Added import/export as json!

export the rules and variables as json files
i added this because in future i want to extend this project more and add more things in it, possibly making a CLI tool to run this thing locally too

Readme

added readme, it includes features, syntax, examples and all that shi

and also removed the preloaded empty rule when site is loaded fresh, cuz it looked cleaner without that

Smol Guide

Added a very small guide, it includes syntax, examples, operators, tokens for understanding errors, etc
i lowkey over-complicated this at the beginning cuz i made it a whole different page using react-router-dom, but halfway through doing that it felt too much just for a small amount of text i have move a lot of things around, so i decide to make it a modal which can opened with a button or shortcut (?)

and i got rid of that ugly ahh scroll bar too btw

Two smol keyboard shortcuts

1. CTRL + Enter => run all rules
2. ESC => Close modal

Rule Templates!

i always add something so the user does not have to do too much to try my project, i dont want votes just because they cant understand how to use my project lol
so i added rule templates, just click “Add from templates” and pick a rule and it will clear the current rules and add that picked rule with the variables it needs, then you can customise it too.

there are 10 rules right now!!

that scroll bar looking ugly tho i gotta do something about that

Added new keywords!

1. CONTAINS

used to check if a string contains a substring
for example if the word “robotic” contains “robot” that would be:

IF word CONTAINS "robot" THEN yes = true

word is a variable with value robotic btw!

2. STARTSWITH

used to check if a string starts with something
same example:

IF word STARTSWITH "robo" THEN yes = true

3. ENDSWITH

the opposite, checks for a string at the end, like “tic” of “robotic”

IF word ENDSWITH "tic" THEN yes = true

4. BETWEEN

used to check if a numbe lies between some minum and maxium value, like if 18 lies between 10 and 20

IF age BETWEEN 10 AND 20 THEN teeneger = true

Multiple THEN actions + Clear All button

so i made the assignments after THEN keyword separated by comma so now you can do something like this:

IF age > 18 THEN allowed = true, unc = true

and a clear all buttons which clears all the rules, errors, variables, etc

Multiple rules support

now you can add multiple rules, run them separetly or all at once, it shows result with rule number too
it was quite hard tho ngl the for loop for evaluation was messing with me hard lmao and rule indexes

Better error messages + Error dislay

improved the vague ahh errors, now its a teeny bit better, and now i am also dispaying error

it has 19 error throwing lines btw, like at 19 places it throws errors, probably more in future

Showing Result!

it shows the boolean result and the output variable now :3
at first i was thinking of showing both input and output together as one object but i didnt do that was it was a bit weird after some thinking, so yeah this is how it looks:

Things added:

IF and THEN keyword

well, it was not that hard, i moved AST’s entry point from parseExpression to parseRule and it starts from a rule, and also THEN keyword used to define an action

Evaluation

it was pretty easy lol, because its just all about boolean output i just use a switch statement to get the values first and compare them with the identifiers, and in runRule function i just use the evaluate function in an if statement and based on that i set the action variable

Variable Panel UI

you can add variables as input, it suppors strings, numbers, and boolean, just simple click a button and add your variable, it was the hardest to do lol, i hate styling so much but i also love when it looks good at the end

todo: error handling

Abstract Syntax Tree

this was easy but hard a the same time cuz of debugging.
AST produces complex nested objects as output so it was really hard to understand if something is wrong or not, reading the object and keeping track of the rule in head is confusing, but looks like it works right now

and honestly, dont look at the image lmao, not worth it, but you can tho it shows AST working but i am not going to show the entire object lol
however i am thinking to add an AST visualiser too cuz its a tree and best shown in tree format

Lexer!!

so after countless memory crash cuz of infinite loop my lexer is finally done, it is a very simple lexer with all the things i think i would need for an MVP.

things it can parse:

1. basic rules:

age > 18
name == "john pork"
score == 100
isActive == true
status != "banned"

2. logical combinations

age > 18 AND isActive == true
score >= 50 AND score <= 100

3. nested mixed bullshit

((age > 18 AND country == "IN") OR (score > 900 AND rank >= 10)) AND isActive == true

i am yet to handle contional statements tho

Made very basic homepage!

just a text area and a button, i only added those two because i made the UI first just for the sake showing something nice in first devlog instead of a console screenshot of backend logic :3

and also start very basic stuff for rule evaluation, so i hardcoded an object for rule IF age > 2 AND country == "Pangea" THEN access = "yesn't", no parsing right now tho, just an object

What the hell? page added!

visit if you dont know anything, it will help you so you can enjoy the lab more!

Readme + More keyboard shortcuts

oof i hate this one
fixed some errors in grid due to grid being null and what not, and also added readme

and yes a couple more keyboard shortcut

Custom Rule Input!

added that, now you can try your own rules with the B/S notation where B is birth and S is survival
for example: B3/S23 is the rule of conway, it means if there are 3 neighbours then a dead cell will become alive, and if there are 2 or 3 neighbor cell then the cell will survive in next generation, if no conditions are met the cell will die in next generation

and also some minor changes

• made Seed rule use a block as starter in grid instead of randomizing the grid
• added new rule Diamoeba after i fell in love with it while trying the custom input (pic attached)

well now its real “lab” ig cuz you can try your own input lol

More patterns

to be honest, this took so long of messing around to have them work that i dont even remember the specifics of what i added, but i added some patterns for conway and other rules, conway still dominates i dont think i need that many patterns for every rule right now, but i surely added cool patterns

and also made the pattern selector in controls handle the categories dynamically, before it was just hardcoded stuff

Major Rule and Pattern changes

things added:

1. density to rules, it is an integer which tells the % of grid to be activated for seeding before simulation starts, not every rule uses it tho
2. thats why i added Patterns for seeding lol, some rules requires patterns or they wont look good with random seeding of grid
3. added usePattern in rule which is a boolean, and it tells where to use pattern by default when user selects a rule, if set to false it will randomize the grid instead with given density
4. added more “Recommended Patterns:” section in controls, it has buttons which loads patterns, and recommendation is just recommended: boolean on some patterns i find important and beautiful lol

so far this is the rule type right now:

export type Rule = {
  name: string;
  b: number[];
  s: number[];
  density?: number;
  recommendedPattern?: string;
  usePattern?: boolean;
};

right now only Conway’s Game of Life has patterns, will add more in next dev log, it is very hard to find coordinates and set them properly

added more rules!

so far added:

1. Conway’s Game of Life
2. HighLife
3. Seeds
4. Life without Death
5. Mezectrics <–– MY FAV :3
6. Snowflakes
7. Vote (pls vote good)
8. Inversed Life
9. Diamonds
10. Day & Night
11. Replicator

these are so beautiful i am working on adding some set patterns so users can see them at their best

Added Grid Lines Toggle!

so you can toggle grid lines from a button, really helps making it look better

Fixed: zoom not working while simulation is playing

now it zooms anytime you press it

Pattern Library!

added lots of patterns for Conway’s Game of Life, these patterns were found long ago randomly, cuz thats the coolest thing about Cellular Automata, it creates complex patterns over time!

i made pattern selectable through a select after selecting the rule, and it clears the grid then creates pattern which you can run

and every pattern i have added is just bunch of coordinates like this:

[5, 5], [6, 5], [7, 4], [7, 6], [8, 5], [9, 5], [10, 5], [11, 5], [12, 4], [12, 6], [13, 5], [14, 5]

^ this is the “Pentadecathlon” pattern which is a period 15 oscillator first found in 1970!

so i have added many types of patterns, they are:

1. Still Life: 6 patterns
2. Oscillators: 5 patterns
3. Spaceships: 2 pattern
4. Guns: 1 pattern

PS: and i added alive cell counter

Many Changes:

1. Added step button, so user can see next generation and see them one by one instead of running the loop
2. added an infopanel, where i am showing generation count, rule name, rule B/S notation, state, and more in future
3. and i fixed speed range slider, which was not working as intended, i had to pause and play again for it work, now its simultaneous
4. added keyboard shortcuts!, you can press ? to see them
5. reduced default cell sizes to 8px
6. added zoom buttons
7. better control buttons UI (grouping them)

Createad first simulation and controls!

so i added Conway’s Game of Life but after adding that i remembered that this lab will have multiple pre-defined simulation rules and presets and even custom ones, so i deleted the conway logic seperately i made and instead i made a Rule type which stores preset rules for simulations B/S format where B is birth and S is survival.

and wrote a bunch of nested loops so i can check for neighbor cells dynamically based on provided rule so i dont have to write logic for each simuation preset, it works like a charm! gave me a hard time tho

oh yes and i added control buttons above the grid container, the buttons i added:

• Random 20%: activates random 20% cells in grid to seed it for simulation
• Random 50%: same, with 50%, i will make it based on input later if i feel like it
• Play/Pause: duh, ofc it will be this
• Speed Range Slider: right now its betweens 50ms to 500ms for each generation but i was also thinking generations per seconds as speed unit but i am still confused what to go so i picked this, seemed easier lol

okay bye see you in next oneeee

Home Page and Grid

first dev log!!!
so i made a simple home page with title and grid, and also /whatthehell as about page

Grid took a long time because i rewrote it multiple times, the first of grid was just simple 20x20 with no toggle on click, then it was dynamically took the size of parent div and had toggle on and off on click, and third one had click-and-drag to toggle multiple instead of just clicking but it was very laggy as it rendered entire grid everytime even once cell roggled on and off so i scrapped the entire normal approach and used Canvas API instead, so its super smooth

“What the hell” page added

for people who got no idea about any of this, so i dont get bad votes just because they dont know what network packets are T__T

so if you are a voter, PLEASE read that page!

Added HTTP-heavy pcap file as sample

so now you have two files as samples, one mix of all kinds of protocols and other is full of HTTP stuff

i used scapy library of python do it

it includes:

• GET
• POST
• 200
• 401
• 404
• 201

“Follow Stream” Added!

just like wireshark, it loads the application layer protocol data by assembling all the TCP streams, and displaying the data, i feel like doing the UI was harder than doing the logic T__T
so i have added a button to follow stream which opens a StreamModal which will display the application layer protocol data accordingly right now only supports HTTP/1.1, soon FTP too

ngl i think i should display the data a bit more in raw form like wireshark but lets just leave it like that for now as i have to ship for lock in side quest lol

Started UI and display work

and i started with DNS cuz well UDP is simple. but sadly DNS isnt.
the complex structure had me going crazy trying to have proper offsets in details builder function, so i just gave up for now hehe
right now clicking on DNS fields highlights the entire raw DNS packet in hex dump, in future i will add proper offsets.
and to do this i had to make offset and length field optional in types which took a long time cuz i had to update every file and calculation of relative offset and all that stuff for hex dump highlighting
but at the end i dont think i have to touch DNS again until i wish to. relieved fr.

DNS Parser!!

i hate it.
it was so hard because DNS packets are compressed like zip files, labels arent repeated, like there will be “google” in one place and pointer to that everywhere else when needed so parser needs to interact with whole raw DNS packet not the usual bytes reading i do with my custom BinaryReader class

and i had to make a different application layer dispatcher and types and everything because DNS runs on UDP and UDP and TCP have complete different things so i cant have a common application layer structure

New Protocol: FTP

added support for FTP packets!

it was simple as its just lines of text but took longer because there was a small bug in TCP parsing where i was not skipping 6 bytes that were meant to be skipped for now, and those 6 bytes were leaking into leaking into applicaiton layer
it was there in HTTP/1.1 parser too but i didnt understand where it was coming from so i added a temporary solution to remove garbage bytes from HTTP raw bytes, but then i had the same problem in FTP too so i spent a whole probably 40 mins trying to figure out why, and found the problem and fixed it permanently

ps: added a flush function in stream tracker class that will clear out the streams list (any left over stuff)

again, no UI work yet

Big Things Added ->

+ TCP Stream Reassembly

this was huge pain T_T
i made a TCPStream class which handles single streams to reassemble, it includes .ingest() function which takes in a sequence number and data and processes them according to 3 cases, check TCPStream.ts file if you want to i have wrote a comment about those cases

and a StreamTracker class, which will be on global class be store all reassembled streams and parsed application layer packets, i have made the output of stream tracker be a part of the base PCAP parsing along with GlobalHeaders and Packets

had a lot of problems in this and so many mistakes because of the way sequence number works T__T
but it works now :3

+ Application Layer

while half-way through writing StreamTracker i realised i cant complete it without application layer dispatcher lol, so i started working application layer dissectors/parsers

Made HTTP/1.1 Parser

this was easy ngl, cuz it text parsing not binary, i am not doing much in this for now just basic stuff.

but had a hard time figuring out how to handle multiple packets in one stream which is common in HTTP/1.1 which uses keep-alive

at the end i stiched everything together and it works :))))

attached a screenshot of one processed HTTP packet from reassembled TCP stream, didnt do any UI work lol

Smol things added

• added pcap generation code using python
• added sample test file on UI
• added error on uploading non-PCAP files
• updated dev note

Completed Hex Dump Pane

oof, it was very tiring

• started hex work with builders giving absolute offse but it was having lots of problems
• converted absolute offsets to relative which will be added with protocol’s offset to get absolute
• created 3 columns in hex pane to show binary ascii and hex
• added hex highlighting when clicked/field clicked and vice versa
• added a tool tip to show offset
• had to rewrite entire hex dump pane because i was having so much problem with absolute offsets and console logs and stuff were everywhere lol

stable now tho!

UI Update

• connected builder functions to UI
• now all protocol contents are shown in packet details pane

Internal updates

• made “Details Builder” function which takes a packet and gives it’s details of the protocols in a flat array like [link, network, transport], it will be used to show data on UI
• controlled easily using registry i made just like parsing functions
• preparation for packet details pane (currently named protocol tree, will change it)
• made ICMP and ICMPv6 save icmpType in the struct too for ease in details building
• removed the type flag: number from IPv4 and made it a boolean object, which is eaiser to understand and corrct way to do it
• fixed a typo in etherTypes constant

image is of an ARP packet, showing protocol details of both Link layer (ethernet) and Network layer (ARP)

UI Update

• made the 3 pane UI layout
• made resize hanldes for all 3 panes
• completed packet list pane, used @tanstack/react-virtual to show the packets
• added colors for each protocol, makes it so beautiful
• removed an ugly scroll bar using webkit

Parsers and thingamajigs updates:

• added parser for ICMPv4
• added parser for ICMPv6
• added parser for IPv6
• added parser for ARP
• updated types to include raw bytes along side other data too so i can show it on a hex pane like wireshark
• added definition look table for codes and types of packets: ARP, ICMPv4, IP Protocols (shared between IPv4 and IPv6), Link types, and application layer ports

lots of stuff

• created a BinaryReader class to easily read PCAP files, passing the buffer through DataView API and using UInt8Array in some places too
• made structs for typing the data, like PacketHeader, GlobalHeader, EthernetFrame, IPv4Packet, etc
• created parsers for PCAP file global header
• created parser for packet headers
• started working on ethernet link type dissector in which i built parsers for Link Layer, Network Layer, and Transport Layer
• Link layer parsers: parseEthernet (ethernet frames)
• Network layer parsers: parseIPv4
• Transport layer parsers: parseTCP and parseUDP

nothing worked.

Refactored EVERYTHING

• this time started from bottom most parser, network layer stuff that is, then went up towards link layer
• while refactoring identified the problem which was in ethernet frame parser function parseEthernet where i was doing rawPayload = reader.readBytes(1500); which is wrong, because 1500 bytes is the theoretical upper limit of payload size in ethernet frame
• fixed the problem by creating a function in reader class readRemaining which reads the remaining bytes by calculating total packet size - offset, exactly needed this
• fixed the file structure of dissectors, bad structure was also one reason last time stuff didnt work

it works now.

–

things left to do:

1. complete network layer parsers: IPv6, ARP
2. complete transport layer parsers: ICMP
3. start working on TCP packet reassembly for application layer parsing

sorry for bad pic, i could’ve edited it to show better but i have to GOO T___T

What i did:

• initialized the project
• cleand up the vite bs
• made the home page with the drag and drop uploading thingy
• created basic workspaceheader

Changelog

• fixed some damn path problems that my idiot eyes couldnt see
• completed home page with drag and drop uploading, created workspace header
• empty site, cleaned the vite code to start from clean slate

cleaned up the code a little bit, no other changes

i am trying to ship again because of a payout problem

Analyser update

• added the two boolean directives (upgrade-insecure-requests and block-all-mixed-content)
• better scoring system! last one only punished but this once has bonuses and reason of penalty/bonus
• recommendation system, it recommends stuff, duh
• UI changes, using more icons now and changed input method part too

code not the best , my finals going on, so i will refactor the code after march.

Big Update - Added Policy Builder

Built a complete CSP Policy Builder, integrated with existing analysis capabilities

Features (in builder only)

• 2 new boolean directives (upgrade-insecure-requests, block-all-mixed-content)
• Real time security analysis (red flags, missing directives, scoring)
• Import existing CSP to edit
• Report-Only mode toggle
• Search/filter directives
• Quick add buttons for common sources
• 4 Presets for quick building

Presets

• Strict - Maximum security (‘none’ fallbacks)
• Balanced - Security + compatibility (‘self’ + ‘unsafe-inline’)
• Legacy - Older browser support (wildcards, dangerous!)
• API Only - For API endpoints (‘none’ everywhere)

some changes are yet to be made in analyser like the boolean directives

Git Changelogs

thanks FT Utils

• fixed a small problem and updated readme
• forgot to run prettier
• Added complete policy builder with 2 new boolean directives and with better component file structure, big update

Started working on policy builder after long
just UI right now but the hook is also in development, it uses the same functions from analyser to follow single source of truth principal

Exporting analysis report - added!

Formats supported:

• JSON
• Markdown
  pdf coming soon!

now you can save the reports locally and show in meetings if you are employed

• added a little loading skeleton in analysis
  

Added attack surface, improved types to include attack class, improved parser to remove header name and work around invalid directives, added bunch of more directives in rule table

MPV is ready.

Major style changes, improved badges, changed directive item style a bit, added missing directives list in overview, added a small help component, removed unique sources for now (will be added in future), made a banner for this and also made the README file

A lot of stuff:

• Replaced that boring stats with policy grade
• Added a better tooltip with reason, fix recommendation, and reference
• Updated parser logic

Policy breakdown and overview

started analysis work, it can evaluate sources right now

started the UI work, may not look the best but UI is not my top priority right now :3