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