Add missing files, update style

README.md

@@ -87,7 +87,9 @@ Memory is roughly 16 bytes per packet for the index, plus about 16 MB of copy bu
 
 ```
 main.go                 entry point, HTTP server
-internal/web/           handlers, tool registry, embedded templates and CSS
+internal/web/           handlers, tool registry, embedded templates
+internal/web/static/    style.css: one stylesheet shared by all pages, following the
+                        utel-frontend design; fonts/ and images/ copied from utel-frontend
 internal/pcap/          pcap file reader, writer, splitter and reorderer
 internal/inet/          IPv4/IPv6 length and checksum fixups, IP header locator
 internal/hexutil/       lenient hex decoding

internal/pcap/reorder.go

@@ -0,0 +1,216 @@
+package pcap
+
+import (
+	"cmp"
+	"errors"
+	"io"
+	"slices"
+	"sync"
+	"sync/atomic"
+)
+
+// A reorderEntry is 16 bytes, which bounds the memory needed per packet.
+type reorderEntry struct {
+	ts  uint64 // seconds << 32 | fraction (µs or ns, consistent within a file)
+	pos uint64 // record offset << lenBits | record length (including the 16 byte record header)
+}
+
+const (
+	lenBits   = 28 // fits MaxRecordLen + 16
+	maxOffset = 1<<(64-lenBits) - 1
+)
+
+func (e reorderEntry) off() int64 { return int64(e.pos >> lenBits) }
+func (e reorderEntry) len() int   { return int(e.pos & (1<<lenBits - 1)) }
+
+// Tuning for WriteTo: packets are copied in batches of up to batchBytes,
+// using parallel reads since random reads from SSDs are much faster with
+// several requests in flight. The next batch is read while the previous one
+// is written.
+const (
+	batchPackets = 16384
+	readers      = 16
+)
+
+var batchBytes = 8 << 20 // variable for tests
+
+// Reorder sorts the packets of a pcap file by timestamp. NewReorder reads
+// and indexes the file, so all parse errors are reported before WriteTo
+// produces any output.
+type Reorder struct {
+	r          io.ReaderAt
+	header     []byte
+	entries    []reorderEntry
+	end        int64 // offset just after the last complete record
+	outOfOrder int
+	truncated  bool
+}
+
+// NewReorder indexes the pcap file in r (of the given size) and sorts the
+// index by timestamp. The sort is stable: packets with equal timestamps keep
+// their original order. It needs 16 bytes of memory per packet.
+func NewReorder(r io.ReaderAt, size int64) (*Reorder, error) {
+	pr, err := NewReader(io.NewSectionReader(r, 0, size))
+	if err != nil {
+		return nil, err
+	}
+	ro := &Reorder{r: r, header: slices.Clone(pr.Header())}
+	off := int64(len(ro.header))
+	var latest uint64
+	for {
+		rec, err := pr.Next()
+		if err == io.EOF {
+			break
+		}
+		if errors.Is(err, ErrTruncated) {
+			ro.truncated = true
+			break
+		}
+		if err != nil {
+			return nil, err
+		}
+		if off > maxOffset {
+			return nil, errors.New("file too large to reorder")
+		}
+		ts := uint64(pr.order.Uint32(rec[0:4]))<<32 | uint64(pr.order.Uint32(rec[4:8]))
+		if ts < latest {
+			ro.outOfOrder++
+		}
+		latest = max(latest, ts)
+		ro.entries = append(ro.entries, reorderEntry{ts: ts, pos: uint64(off)<<lenBits | uint64(len(rec))})
+		off += int64(len(rec))
+
+		if len(ro.entries) == 1024 {
+			// Size the index from the average packet size so far, to avoid
+			// repeatedly growing (and copying) a large slice.
+			avg := (off - int64(len(ro.header))) / 1024
+			est := size / avg
+			ro.entries = slices.Grow(ro.entries, int(est+est/16))
+		}
+	}
+	if len(ro.entries) == 0 {
+		return nil, errors.New("the pcap file contains no packets")
+	}
+	ro.end = off
+	ro.entries = slices.Clip(ro.entries)
+	if ro.outOfOrder > 0 {
+		slices.SortStableFunc(ro.entries, func(a, b reorderEntry) int { return cmp.Compare(a.ts, b.ts) })
+	}
+	return ro, nil
+}
+
+// Packets returns the number of packets.
+func (ro *Reorder) Packets() int { return len(ro.entries) }
+
+// OutOfOrder returns the number of packets with a timestamp earlier than a
+// packet before them in the input.
+func (ro *Reorder) OutOfOrder() int { return ro.outOfOrder }
+
+// Truncated reports whether the input ended with an incomplete packet
+// record, which is left out of the output.
+func (ro *Reorder) Truncated() bool { return ro.truncated }
+
+type batch struct {
+	buf []byte
+	err error
+}
+
+// WriteTo writes the file header followed by the packets in timestamp order.
+func (ro *Reorder) WriteTo(w io.Writer) (int64, error) {
+	if ro.outOfOrder == 0 {
+		return io.Copy(w, io.NewSectionReader(ro.r, 0, ro.end))
+	}
+
+	n, err := w.Write(ro.header)
+	total := int64(n)
+	if err != nil {
+		return total, err
+	}
+
+	// A producer goroutine reads batches into two alternating buffers while
+	// this goroutine writes them out.
+	full := make(chan batch)
+	free := make(chan []byte, 2)
+	free <- nil
+	free <- nil
+	done := make(chan struct{})
+	var wg sync.WaitGroup
+	defer func() {
+		close(done)
+		wg.Wait()
+	}()
+	wg.Go(func() {
+		defer close(full)
+		for i := 0; i < len(ro.entries); {
+			var buf []byte
+			select {
+			case buf = <-free:
+			case <-done:
+				return
+			}
+			var err error
+			i, buf, err = ro.readBatch(i, buf)
+			select {
+			case full <- batch{buf, err}:
+			case <-done:
+				return
+			}
+			if err != nil {
+				return
+			}
+		}
+	})
+
+	for b := range full {
+		if b.err != nil {
+			return total, b.err
+		}
+		n, err := w.Write(b.buf)
+		total += int64(n)
+		if err != nil {
+			return total, err
+		}
+		free <- b.buf
+	}
+	return total, nil
+}
+
+// readBatch reads the records of entries[i:j] into buf, choosing j so that
+// the batch stays within batchBytes and batchPackets (but holds at least one
+// record). It returns j and the filled buffer.
+func (ro *Reorder) readBatch(i int, buf []byte) (int, []byte, error) {
+	j, size := i, 0
+	for j < len(ro.entries) && j-i < batchPackets && (j == i || size+ro.entries[j].len() <= batchBytes) {
+		size += ro.entries[j].len()
+		j++
+	}
+	entries := ro.entries[i:j]
+	dst := make([]int, len(entries)+1)
+	for k, e := range entries {
+		dst[k+1] = dst[k] + e.len()
+	}
+	buf = slices.Grow(buf[:0], size)[:size]
+
+	var (
+		next atomic.Int64
+		wg   sync.WaitGroup
+		errs [readers]error
+	)
+	for r := range min(readers, len(entries)) {
+		wg.Go(func() {
+			for {
+				k := int(next.Add(1) - 1)
+				if k >= len(entries) {
+					return
+				}
+				e := entries[k]
+				if _, err := ro.r.ReadAt(buf[dst[k]:dst[k+1]], e.off()); err != nil {
+					errs[r] = err
+					return
+				}
+			}
+		})
+	}
+	wg.Wait()
+	return j, buf, errors.Join(errs[:]...)
+}

internal/pcap/reorder_test.go

@@ -0,0 +1,195 @@
+package pcap
+
+import (
+	"bytes"
+	"encoding/binary"
+	"errors"
+	"io"
+	"math/rand/v2"
+	"slices"
+	"strings"
+	"testing"
+	"time"
+)
+
+// reorderTestFile builds a pcap file with one packet per timestamp; each
+// packet's data is its index in the input.
+func reorderTestFile(t *testing.T, ts ...time.Time) []byte {
+	t.Helper()
+	var buf bytes.Buffer
+	w, err := NewWriter(&buf, LinkTypeEthernet)
+	if err != nil {
+		t.Fatal(err)
+	}
+	for i, tm := range ts {
+		if err := w.WritePacket(tm, bytes.Repeat([]byte{byte(i)}, i+1)); err != nil {
+			t.Fatal(err)
+		}
+	}
+	return buf.Bytes()
+}
+
+// packetIDs returns the first data byte of each packet in a pcap file.
+func packetIDs(t *testing.T, file []byte) []int {
+	t.Helper()
+	r, err := NewReader(bytes.NewReader(file))
+	if err != nil {
+		t.Fatal(err)
+	}
+	var ids []int
+	for {
+		rec, err := r.Next()
+		if err == io.EOF {
+			return ids
+		}
+		if err != nil {
+			t.Fatal(err)
+		}
+		ids = append(ids, int(rec[16]))
+	}
+}
+
+func TestReorder(t *testing.T) {
+	s := func(sec int64, usec int) time.Time { return time.Unix(sec, int64(usec)*1000) }
+	tests := []struct {
+		name       string
+		ts         []time.Time
+		want       []int
+		outOfOrder int
+	}{
+		{"sorted", []time.Time{s(1, 0), s(1, 1), s(2, 0)}, []int{0, 1, 2}, 0},
+		{"reversed", []time.Time{s(3, 0), s(2, 0), s(1, 0)}, []int{2, 1, 0}, 2},
+		{"microseconds", []time.Time{s(5, 999999), s(5, 2), s(5, 10)}, []int{1, 2, 0}, 2},
+		{"stable for equal timestamps", []time.Time{s(2, 0), s(1, 0), s(2, 0), s(1, 0)}, []int{1, 3, 0, 2}, 2},
+	}
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			in := reorderTestFile(t, tt.ts...)
+			ro, err := NewReorder(bytes.NewReader(in), int64(len(in)))
+			if err != nil {
+				t.Fatal(err)
+			}
+			var out bytes.Buffer
+			n, err := ro.WriteTo(&out)
+			if err != nil {
+				t.Fatal(err)
+			}
+			if n != int64(len(in)) || out.Len() != len(in) {
+				t.Errorf("wrote %d (%d) bytes, want %d", n, out.Len(), len(in))
+			}
+			if !bytes.Equal(out.Bytes()[:24], in[:24]) {
+				t.Error("file header changed")
+			}
+			if got := packetIDs(t, out.Bytes()); !slices.Equal(got, tt.want) {
+				t.Errorf("order %v, want %v", got, tt.want)
+			}
+			if ro.Packets() != len(tt.ts) || ro.OutOfOrder() != tt.outOfOrder || ro.Truncated() {
+				t.Errorf("packets %d outOfOrder %d truncated %v", ro.Packets(), ro.OutOfOrder(), ro.Truncated())
+			}
+		})
+	}
+}
+
+func TestReorderTruncated(t *testing.T) {
+	in := reorderTestFile(t, time.Unix(2, 0), time.Unix(1, 0), time.Unix(0, 0))
+	in = in[:len(in)-1]
+	ro, err := NewReorder(bytes.NewReader(in), int64(len(in)))
+	if err != nil {
+		t.Fatal(err)
+	}
+	var out bytes.Buffer
+	if _, err := ro.WriteTo(&out); err != nil {
+		t.Fatal(err)
+	}
+	if !ro.Truncated() || !slices.Equal(packetIDs(t, out.Bytes()), []int{1, 0}) {
+		t.Errorf("truncated %v, order %v", ro.Truncated(), packetIDs(t, out.Bytes()))
+	}
+}
+
+func TestReorderErrors(t *testing.T) {
+	for name, tc := range map[string]struct {
+		in   []byte
+		want string
+	}{
+		"no packets": {reorderTestFile(t), "no packets"},
+		"garbage":    {bytes.Repeat([]byte("y"), 30), "unknown magic"},
+	} {
+		_, err := NewReorder(bytes.NewReader(tc.in), int64(len(tc.in)))
+		if err == nil || !strings.Contains(err.Error(), tc.want) {
+			t.Errorf("%s: error %v, want %q", name, err, tc.want)
+		}
+	}
+}
+
+// TestReorderManyPackets covers multiple parallel batches, including packets
+// that are bigger than a whole batch, against a simple reference sort.
+func TestReorderManyPackets(t *testing.T) {
+	defer func(n int) { batchBytes = n }(batchBytes)
+	batchBytes = 64 << 10
+
+	r := rand.New(rand.NewPCG(1, 2))
+	var buf bytes.Buffer
+	w, err := NewWriter(&buf, LinkTypeEthernet)
+	if err != nil {
+		t.Fatal(err)
+	}
+	type pkt struct {
+		ts   time.Time
+		data []byte
+	}
+	var pkts []pkt
+	for i := range 50000 {
+		size := 8 + r.IntN(200)
+		if i%10000 == 5 {
+			size = batchBytes + 1000 // gets a batch by itself
+		}
+		data := make([]byte, size)
+		binary.LittleEndian.PutUint64(data, uint64(i))
+		p := pkt{time.Unix(int64(r.IntN(1000)), int64(r.IntN(1000))*1000), data}
+		pkts = append(pkts, p)
+		if err := w.WritePacket(p.ts, p.data); err != nil {
+			t.Fatal(err)
+		}
+	}
+	slices.SortStableFunc(pkts, func(a, b pkt) int { return a.ts.Compare(b.ts) })
+
+	in := buf.Bytes()
+	ro, err := NewReorder(bytes.NewReader(in), int64(len(in)))
+	if err != nil {
+		t.Fatal(err)
+	}
+	var out bytes.Buffer
+	if _, err := ro.WriteTo(&out); err != nil {
+		t.Fatal(err)
+	}
+	var want bytes.Buffer
+	ww, _ := NewWriter(&want, LinkTypeEthernet)
+	for _, p := range pkts {
+		ww.WritePacket(p.ts, p.data)
+	}
+	if !bytes.Equal(out.Bytes(), want.Bytes()) {
+		t.Error("reordered output differs from reference sort")
+	}
+}
+
+type failingWriter struct{ n int }
+
+func (f *failingWriter) Write(p []byte) (int, error) {
+	if f.n--; f.n < 0 {
+		return 0, errors.New("write failed")
+	}
+	return len(p), nil
+}
+
+func TestReorderWriteError(t *testing.T) {
+	in := reorderTestFile(t, time.Unix(2, 0), time.Unix(1, 0))
+	ro, err := NewReorder(bytes.NewReader(in), int64(len(in)))
+	if err != nil {
+		t.Fatal(err)
+	}
+	for n := range 2 {
+		if _, err := ro.WriteTo(&failingWriter{n: n}); err == nil {
+			t.Errorf("failing after %d writes: no error", n)
+		}
+	}
+}

internal/web/reorder.go

@@ -0,0 +1,53 @@
+package web
+
+import (
+	"fmt"
+	"log"
+	"net/http"
+	"strconv"
+
+	"pcap-web-tools/internal/pcap"
+)
+
+type reorderPage struct {
+	MaxUpload string
+	Error     string
+}
+
+func (s *Server) handleReorderForm(w http.ResponseWriter, r *http.Request) {
+	s.render(w, http.StatusOK, "reorder.html", "/reorder", reorderPage{MaxUpload: s.maxUpload()})
+}
+
+func (s *Server) handleReorder(w http.ResponseWriter, r *http.Request) {
+	page := reorderPage{MaxUpload: s.maxUpload()}
+	fail := func(status int, msg string) {
+		page.Error = msg
+		s.render(w, status, "reorder.html", "/reorder", page)
+	}
+
+	file, hdr, status, msg := s.parseUpload(w, r)
+	if status != 0 {
+		fail(status, msg)
+		return
+	}
+	defer file.Close()
+
+	// Indexing reads the whole file, so problems are reported on the page
+	// before any of the download is sent.
+	ro, err := pcap.NewReorder(file, hdr.Size)
+	if err != nil {
+		fail(http.StatusBadRequest, hdr.Filename+": "+err.Error())
+		return
+	}
+
+	w.Header().Set("Content-Type", "application/vnd.tcpdump.pcap")
+	w.Header().Set("Content-Disposition", fmt.Sprintf("attachment; filename=%q", uploadStem(hdr)+"_reordered.pcap"))
+	// Summary for scripted clients; browsers just save the file.
+	w.Header().Set("X-Pcap-Packets", strconv.Itoa(ro.Packets()))
+	w.Header().Set("X-Pcap-Out-Of-Order", strconv.Itoa(ro.OutOfOrder()))
+	w.Header().Set("X-Pcap-Truncated", strconv.FormatBool(ro.Truncated()))
+	if _, err := ro.WriteTo(w); err != nil {
+		// The response has already started, so the error cannot be shown on the page.
+		log.Printf("reorder %q: %v", hdr.Filename, err)
+	}
+}

internal/web/reorder_test.go

@@ -0,0 +1,60 @@
+package web
+
+import (
+	"bytes"
+	"io"
+	"net/http"
+	"strings"
+	"testing"
+	"time"
+
+	"pcap-web-tools/internal/pcap"
+)
+
+func TestReorderHandler(t *testing.T) {
+	srv, err := New(Config{MaxUploadBytes: 1 << 20})
+	if err != nil {
+		t.Fatal(err)
+	}
+	var in bytes.Buffer
+	w, _ := pcap.NewWriter(&in, pcap.LinkTypeEthernet)
+	for _, sec := range []int64{3, 1, 2} {
+		w.WritePacket(time.Unix(sec, 0), []byte{byte(sec)})
+	}
+
+	rec := postUpload(t, srv, "/reorder", "trace.pcap", in.Bytes(), nil)
+	if rec.Code != http.StatusOK {
+		t.Fatalf("status %d: %s", rec.Code, rec.Body)
+	}
+	if cd := rec.Header().Get("Content-Disposition"); cd != `attachment; filename="trace_reordered.pcap"` {
+		t.Errorf("Content-Disposition %q", cd)
+	}
+	if got := rec.Header().Get("X-Pcap-Out-Of-Order"); got != "2" {
+		t.Errorf("X-Pcap-Out-Of-Order %q", got)
+	}
+	r, err := pcap.NewReader(rec.Body)
+	if err != nil {
+		t.Fatal(err)
+	}
+	var order []byte
+	for {
+		p, err := r.Next()
+		if err == io.EOF {
+			break
+		}
+		if err != nil {
+			t.Fatal(err)
+		}
+		order = append(order, p[16])
+	}
+	if !bytes.Equal(order, []byte{1, 2, 3}) {
+		t.Errorf("order %v", order)
+	}
+
+	for name, file := range map[string][]byte{"no file": nil, "not pcap": []byte("hello world, not a pcap file")} {
+		rec := postUpload(t, srv, "/reorder", "x.pcap", file, nil)
+		if rec.Code != http.StatusBadRequest || !strings.Contains(rec.Body.String(), `class="error"`) {
+			t.Errorf("%s: status %d", name, rec.Code)
+		}
+	}
+}

internal/web/static/style.css

@@ -1,127 +1,453 @@
+/*
+ * Shared stylesheet for all pcap tools pages.
+ *
+ * Follows the utel-frontend design: dark theme, utel color tokens, Inter /
+ * Dazzed / Roboto Mono fonts, top bar with a sidebar, "widget" cards and
+ * pill shaped buttons and inputs.
+ */
+
+/* ---------- Fonts ---------- */
+
+@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("/static/fonts/inter-v12-latin-regular.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("/static/fonts/inter-v12-latin-500.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("/static/fonts/inter-v12-latin-600.woff2") format("woff2"); }
+@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("/static/fonts/inter-v12-latin-700.woff2") format("woff2"); }
+@font-face { font-family: "Dazzed-Medium"; font-display: swap; src: url("/static/fonts/Dazzed-Medium.otf") format("opentype"); }
+@font-face { font-family: "Roboto-mono"; font-display: swap; src: url("/static/fonts/RobotoMono-Regular.ttf") format("truetype"); }
+
+/* ---------- Tokens (from utel-frontend variables.scss) ---------- */
+
 :root {
-  --bg: #f7f7f5;
+  color-scheme: dark;
-  --fg: #1d1d1f;
+
-  --muted: #6b6b70;
+  --utel-body-background: #191c1c;
-  --card: #ffffff;
+  --utel-navigation-background: #1f2f2e;
-  --border: #d9d9de;
+  --utel-navigation-background-darken: #15201f;
-  --accent: #2463eb;
+  --utel-text-color: #fff;
-  --accent-fg: #ffffff;
+  --utel-scrollbar-color: #696969;
-  --error-bg: #fdecec;
+  --utel-icon-label-text-color: #a7a7a7;
-  --error-fg: #9b1c1c;
+  --utel-icon-color: #d2d2d2;
-  --l2: #b45309;
+  --utel-p-text-color: #d3d3d3;
-  --l3: #1d4ed8;
+  --utel-title-text-color: #d8d8d8;
-  --l7: #047857;
+  --utel-title-link-color: #a7a7a7;
-  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  --utel-navigation-darker-text-color: #e6e6e6;
+  --utel-content-background: #242828;
+  --utel-content-darker-background: #1c1f1f;
+  --utel-content-text-color: #d8d8d8;
+  --utel-highlight-text-color: #9ed7aa;
+  --utel-content-border-color: #707070ac;
+  --utel-modal-border-color: #303434;
+  --utel-solid-button-color: #6da478;
+  --utel-solid-button-color-darker: #5d9568;
+  --utel-widget-button-color: #3c4343;
+  --utel-widget-button-color-darker: #434b4b;
+  --utel-widget-title-border: #1c1f1f;
+  --utel-widget-border: #323737;
+  --utel-content-hover-color: #393d3d;
+  --utel-fraud-color-yellow: #e4b266;
+  --utel-fraud-color-red: #ea6f80;
+  --utel-table-color: #2d3232;
+  --utel-table-split-color: #242828;
+  --utel-table-header-text-color: #9a9a9a;
+  --utel-severity-color-low: #6daa9c;
+  --utel-input-border-color: #3b4040;
+
+  --top-bar-height: 55px;
+  --sidebar-width: 220px;
+  --font-body: "Inter", system-ui, sans-serif;
+  --font-heading: "Dazzed-Medium", "Inter", sans-serif;
+  --font-mono: "Roboto-mono", ui-monospace, Menlo, Consolas, monospace;
 }
 
-@media (prefers-color-scheme: dark) {
+/* ---------- Base ---------- */
-  :root {
-    --bg: #161618;
-    --fg: #e8e8ea;
-    --muted: #9a9aa2;
-    --card: #1f1f22;
-    --border: #36363c;
-    --accent: #5b8cff;
-    --accent-fg: #0b0b0c;
-    --error-bg: #3a1717;
-    --error-fg: #ffb4b4;
-    --l2: #f5a65b;
-    --l3: #8fb0ff;
-    --l7: #5fd3a6;
-  }
-}
 
-* { box-sizing: border-box; }
+*, *::before, *::after { box-sizing: border-box; }
+
+html, body { margin: 0; }
 
 body {
-  margin: 0;
+  background: var(--utel-body-background);
-  background: var(--bg);
+  color: var(--utel-text-color);
-  color: var(--fg);
+  font: 400 15px/1.5 var(--font-body);
-  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  scrollbar-color: var(--utel-scrollbar-color) transparent;
+  scrollbar-width: thin;
 }
 
-header { border-bottom: 1px solid var(--border); background: var(--card); }
+::-webkit-scrollbar { width: 7px; height: 7px; }
-nav { max-width: 960px; margin: 0 auto; padding: 0.75rem 1rem; display: flex; gap: 1.25rem; flex-wrap: wrap; }
+::-webkit-scrollbar-track { background: transparent; border-radius: 80px; }
-nav a { color: var(--muted); text-decoration: none; }
+::-webkit-scrollbar-thumb { background-color: var(--utel-scrollbar-color); border-radius: 80px; }
-nav a:hover, nav a.active { color: var(--fg); }
-nav a.brand { color: var(--fg); font-weight: 600; }
 
-main { max-width: 960px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
+h1, h2, h3 { font-family: var(--font-heading); font-weight: normal; margin: 0; }
-h1 { margin: 0 0 0.5rem; font-size: 1.6rem; }
+h1 { font-size: 20px; }
-h2 { font-size: 1.25rem; margin: 0 0 0.75rem; }
+h2 { font-size: 16px; }
-h3 { font-size: 1rem; margin: 1.25rem 0 0.5rem; }
+h3 { font-size: 15px; color: var(--utel-title-text-color); margin: 16px 0 8px; }
-.lead { color: var(--muted); margin-top: 0; }
-a { color: var(--accent); }
-code { font-family: var(--mono); font-size: 0.9em; }
-.hint { color: var(--muted); font-weight: normal; font-size: 0.85em; }
 
-.tools { list-style: none; padding: 0; display: grid; gap: 0.75rem; }
+p { color: var(--utel-p-text-color); }
-.tools li { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 1rem; }
+a { color: var(--utel-highlight-text-color); }
-.tools a { font-weight: 600; font-size: 1.05rem; }
+code, pre { font-family: var(--font-mono); font-size: 13px; }
-.tools p { margin: 0.25rem 0 0; color: var(--muted); }
 
-form label { display: block; font-weight: 600; margin: 1rem 0 0.3rem; }
+.hint { color: var(--utel-icon-label-text-color); font-weight: 400; font-size: 13px; }
-textarea, input, select {
+.note { color: var(--utel-icon-label-text-color); font-size: 14px; margin: 6px 0; }
-  width: 100%;
+
-  font: inherit;
+.visually-hidden {
-  color: var(--fg);
+  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
-  background: var(--card);
+  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 0.5rem 0.6rem;
 }
-textarea { font-family: var(--mono); font-size: 0.9rem; resize: vertical; }
-textarea:focus, input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
 
-fieldset { border: 0; padding: 0; margin: 0; }
+/* ---------- Top bar ---------- */
-label.check { display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; font-weight: 600; }
-label.check input { width: auto; }
-.row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1rem; }
-@media (max-width: 720px) { .row { grid-template-columns: 1fr; gap: 0; } }
 
-.actions { margin-top: 1.25rem; display: flex; gap: 0.75rem; }
+.topbar {
-button {
+  position: sticky;
-  font: inherit;
+  top: 0;
-  padding: 0.5rem 1.1rem;
+  z-index: 20;
-  border-radius: 6px;
+  display: flex;
-  border: 1px solid var(--border);
+  align-items: center;
-  background: var(--card);
+  height: var(--top-bar-height);
-  color: var(--fg);
+  background: var(--utel-navigation-background);
+  border-bottom: 1px solid var(--utel-body-background);
+}
+
+.burger {
+  display: grid;
+  place-items: center;
+  width: var(--top-bar-height);
+  height: var(--top-bar-height);
+  flex: none;
+  background: var(--utel-navigation-background-darken);
   cursor: pointer;
 }
-button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
+.burger svg { width: 19px; fill: var(--utel-text-color); }
+.nav-toggle:focus-visible + .topbar .burger { outline: 2px solid var(--utel-solid-button-color); outline-offset: -2px; }
 
-.error { background: var(--error-bg); color: var(--error-fg); padding: 0.75rem 1rem; border-radius: 6px; margin: 1rem 0; }
+.app-title {
-.note { color: var(--muted); margin: 0.35rem 0; }
+  margin-left: 15px;
+  font: 16px/var(--top-bar-height) var(--font-heading);
+  color: var(--utel-text-color);
+  text-decoration: none;
+}
 
-.result { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
+.logo-symbol {
-.summary { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; margin: 0; }
+  position: absolute;
-.summary dt { color: var(--muted); }
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+}
+.logo-symbol svg { width: 40px; height: 40px; fill: var(--utel-text-color); }
+
+/* ---------- Sidebar ---------- */
+
+.sidebar {
+  position: fixed;
+  top: var(--top-bar-height);
+  left: 0;
+  z-index: 10;
+  width: var(--sidebar-width);
+  height: calc(100% - var(--top-bar-height));
+  overflow-y: auto;
+  background: var(--utel-navigation-background-darken);
+  transition: transform 0.15s ease;
+}
+
+.nav-section {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 10px;
+  padding: 8px 15px;
+  color: var(--utel-icon-label-text-color);
+  font-size: 11px;
+  letter-spacing: 0.8px;
+  text-transform: uppercase;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 15px;
+  color: var(--utel-text-color);
+  font-weight: 500;
+  font-size: 15px;
+  text-decoration: none;
+}
+.nav-item:hover, .nav-item.active { background: var(--utel-navigation-background); }
+.nav-item.active { color: var(--utel-highlight-text-color); }
+.nav-item::before {
+  content: "";
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--utel-solid-button-color);
+  flex: none;
+}
+
+/*
+ * The burger toggles the sidebar using a checkbox, so no JavaScript is needed.
+ * Wide screens show the sidebar by default and the burger hides it; narrow
+ * screens hide it by default and the burger shows it over the content.
+ */
+.content { margin-left: var(--sidebar-width); padding: 10px; transition: margin-left 0.15s ease; }
+.nav-toggle:checked ~ .sidebar { transform: translateX(-100%); }
+.nav-toggle:checked ~ .content { margin-left: 0; }
+
+@media (max-width: 64rem) {
+  .sidebar { transform: translateX(-100%); box-shadow: 4px 0 12px rgb(0 0 0 / 0.35); }
+  .nav-toggle:checked ~ .sidebar { transform: none; }
+  .content { margin-left: 0; }
+  .logo-symbol { display: none; }
+}
+
+/* ---------- Page toolbar ---------- */
+
+.toolbar {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 0 20px;
+  margin: 0 5px 10px;
+  font-size: 16px;
+}
+.breadcrumb { color: var(--utel-navigation-darker-text-color); }
+.toolbar-link { color: var(--utel-title-link-color); text-decoration: none; }
+.toolbar-link:hover { color: var(--utel-title-text-color); border-bottom: 1px solid var(--utel-title-text-color); }
+.title-separator { margin: 0 5px 0 7px; color: var(--utel-title-link-color); }
+.toolbar-title { color: var(--utel-title-text-color); }
+.toolbar-info { color: var(--utel-icon-label-text-color); font-size: 14px; }
+
+/* ---------- Widgets ---------- */
+
+.widget {
+  margin: 5px 5px 10px;
+  background: var(--utel-content-background);
+  border-radius: 5px;
+}
+.widget-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 38px;
+  border-bottom: 1px solid var(--utel-widget-title-border);
+}
+.widget-title h2 { padding: 8px 0 8px 10px; color: var(--utel-title-text-color); }
+.widget-title .hint { margin-left: auto; padding-right: 10px; }
+.widget-content { padding: 10px; border-top: 1px solid var(--utel-widget-border); }
+.widget-content > :first-child { margin-top: 0; }
+.widget-content > :last-child { margin-bottom: 0; }
+
+.widget-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
+.tool-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: background 0.1s; }
+.tool-card:hover { background: var(--utel-content-hover-color); }
+.tool-card .widget-content { flex: 1; color: var(--utel-p-text-color); font-size: 14px; }
+
+/* ---------- Buttons ---------- */
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 35px;
+  padding: 6px 16px;
+  border: 0;
+  border-radius: 80px;
+  font: 700 15px var(--font-body);
+  color: var(--utel-text-color);
+  background: var(--utel-widget-button-color);
+  cursor: pointer;
+  text-decoration: none;
+  white-space: nowrap;
+}
+.btn:hover { background: var(--utel-widget-button-color-darker); }
+.btn:focus-visible { outline: 2px solid var(--utel-highlight-text-color); outline-offset: 2px; }
+.btn.primary { background: var(--utel-solid-button-color); }
+.btn.primary:hover { background: var(--utel-solid-button-color-darker); }
+.btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; }
+
+/* ---------- Forms ---------- */
+
+label, .label {
+  display: block;
+  margin: 12px 0 4px;
+  color: var(--utel-content-text-color);
+  font-size: 14px;
+  font-weight: 500;
+}
+
+input, select, textarea {
+  font: 400 14px var(--font-body);
+  color: var(--utel-content-text-color);
+}
+
+/* Single line inputs and selects: utel pill style */
+input:not([type=checkbox], [type=radio], [type=file]), select {
+  width: 100%;
+  height: 32px;
+  padding: 0 15px;
+  background: var(--utel-content-background);
+  border: 1px solid var(--utel-input-border-color);
+  border-radius: 64px;
+}
+select {
+  appearance: none;
+  padding-right: 36px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a7a7a7' stroke-width='1.6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 14px center;
+  background-size: 12px 8px;
+  text-overflow: ellipsis;
+}
+select option { background: var(--utel-content-background); }
+
+/* Multi-line hex input: same border, darker field, rounded rectangle */
+textarea {
+  display: block;
+  width: 100%;
+  padding: 8px 12px;
+  background: var(--utel-content-darker-background);
+  border: 1px solid var(--utel-input-border-color);
+  border-radius: 5px;
+  font-family: var(--font-mono);
+  font-size: 13px;
+  resize: vertical;
+}
+
+::placeholder { color: var(--utel-icon-label-text-color); opacity: 1; }
+
+input:focus, select:focus, textarea:focus { outline: none; border-color: var(--utel-solid-button-color); }
+
+/* Checkbox and radio: 18px box with the utel green when checked */
+input[type=checkbox], input[type=radio] {
+  appearance: none;
+  flex: none;
+  width: 18px;
+  height: 18px;
+  margin: 0;
+  border: 1px solid var(--utel-content-border-color);
+  border-radius: 3px;
+  background: transparent;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+}
+input[type=radio] { border-radius: 50%; }
+input[type=checkbox]:checked, input[type=radio]:checked {
+  background: var(--utel-solid-button-color);
+  border-color: var(--utel-solid-button-color);
+}
+input[type=checkbox]:checked::after {
+  content: "";
+  width: 10px;
+  height: 6px;
+  margin-top: -3px;
+  border: solid var(--utel-text-color);
+  border-width: 0 0 2px 2px;
+  transform: rotate(-45deg);
+}
+input[type=radio]:checked::after {
+  content: "";
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--utel-text-color);
+}
+input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline: 2px solid var(--utel-highlight-text-color); outline-offset: 2px; }
+
+label.check {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  font-weight: 400;
+  font-size: 15px;
+}
+
+/* File input: the button looks like a secondary utel button */
+input[type=file] {
+  width: 100%;
+  padding: 4px;
+  border: 1px dashed var(--utel-input-border-color);
+  border-radius: 5px;
+  color: var(--utel-icon-label-text-color);
+}
+input[type=file]::file-selector-button {
+  height: 30px;
+  margin-right: 12px;
+  padding: 0 14px;
+  border: 0;
+  border-radius: 80px;
+  font: 700 14px var(--font-body);
+  color: var(--utel-text-color);
+  background: var(--utel-widget-button-color);
+  cursor: pointer;
+}
+input[type=file]::file-selector-button:hover { background: var(--utel-widget-button-color-darker); }
+
+fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
+legend { padding: 0; margin: 12px 0 4px; font-size: 14px; font-weight: 500; color: var(--utel-content-text-color); }
+
+/* Three controls on one line: link type, custom link type, file name */
+.row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0 12px; align-items: start; }
+.row label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.field-hint { display: block; margin: 4px 0 0 15px; }
+@media (max-width: 720px) { .row { grid-template-columns: 1fr; } }
+
+/* Split modes: radio with inline number input and unit */
+.modes label.check { margin: 8px 0; }
+.modes input.num { width: 8rem; }
+.modes select.unit { width: 5.5rem; }
+
+/* ---------- Messages ---------- */
+
+.error {
+  margin: 0 5px 10px;
+  padding: 10px 15px;
+  border: 1px solid var(--utel-fraud-color-red);
+  border-left-width: 4px;
+  border-radius: 5px;
+  background: rgb(234 111 128 / 0.1);
+  color: var(--utel-text-color);
+}
+
+/* ---------- Tables (utel table-theme) ---------- */
+
+table { width: 100%; border-collapse: collapse; font-size: 14px; }
+th {
+  padding: 0 10px 5px 5px;
+  text-align: left;
+  font-weight: 400;
+  white-space: nowrap;
+  color: var(--utel-table-header-text-color);
+}
+td {
+  padding: 5px 10px 5px 5px;
+  font-weight: 500;
+  background: var(--utel-table-color);
+  border-top: 1px solid var(--utel-table-split-color);
+}
+tr.changed td:last-child { color: var(--utel-highlight-text-color); }
+
+/* ---------- hex2pcap result ---------- */
+
+.summary { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; font-size: 14px; }
+.summary dt { color: var(--utel-icon-label-text-color); }
 .summary dd { margin: 0; }
 
-table { border-collapse: collapse; width: 100%; background: var(--card); border: 1px solid var(--border); }
-th, td { text-align: left; padding: 0.4rem 0.75rem; border-bottom: 1px solid var(--border); }
-th { color: var(--muted); font-weight: 600; font-size: 0.85rem; }
-tr.changed td:last-child { font-weight: 600; }
-
 .dump {
-  font-family: var(--mono);
+  margin: 0;
-  font-size: 0.85rem;
+  padding: 10px 12px;
-  background: var(--card);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 0.75rem 1rem;
   overflow-x: auto;
+  background: var(--utel-content-darker-background);
+  border-radius: 5px;
+  color: var(--utel-p-text-color);
+  line-height: 1.6;
 }
-.dump .off { color: var(--muted); }
+.dump .off { color: var(--utel-table-header-text-color); }
-.l2 { color: var(--l2); }
+.l2 { color: var(--utel-fraud-color-yellow); }
-.l3 { color: var(--l3); }
+.l3 { color: var(--utel-severity-color-low); }
-.l7 { color: var(--l7); }
+.l7 { color: var(--utel-p-text-color); }
-.chg { text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
+.chg { text-decoration: underline; text-underline-offset: 3px; color: var(--utel-highlight-text-color); font-weight: 700; }
 
-input[type=file] { padding: 0.4rem; }
+/* A hint under a checkbox lines up with the checkbox's text */
-.modes { margin-top: 1rem; }
+label.check + .field-hint { margin: 2px 0 0 26px; }
-.modes legend { font-weight: 600; margin-bottom: 0.3rem; }
-.modes label.check { font-weight: normal; margin: 0.5rem 0; align-items: center; }
-.modes input.num { width: 8rem; }
-.modes select.unit { width: auto; }

internal/web/templates/hex2pcap.html

@@ -1,35 +1,44 @@
 {{define "title"}}Hex → pcap{{end}}
 
+{{define "toolbar-info"}}<span class="toolbar-info">Build a pcap file from hex · <a href="/hex2pcap?example" class="toolbar-link">Load example</a></span>{{end}}
+
 {{define "content"}}
 {{with .Data}}
-<h1>Hex → pcap</h1>
-<p class="lead">
-  Paste hex for each layer. The fields are decoded and concatenated into one packet.
-  Any field may be empty, so you can also paste a whole packet into a single field.
-  Spaces, newlines, <code>:</code>, <code>-</code>, <code>0x</code> and <code>\x</code> are ignored.
-  <a href="/hex2pcap?example">Load example</a>.
-</p>
-
 {{if .Error}}<div class="error" role="alert">{{.Error}}</div>{{end}}
 
 <form method="post" action="/hex2pcap">
-  <label for="l2">Layer 2 <span class="hint">e.g. Ethernet header</span></label>
+<section class="widget">
-  <textarea id="l2" name="l2" rows="2" spellcheck="false">{{.Form.L2}}</textarea>
+  <div class="widget-title"><h2>Packet</h2></div>
+  <div class="widget-content">
+    <p class="note">
+      Paste hex for each layer. The fields are decoded and concatenated into one packet.
+      Any field may be empty, so you can also paste a whole packet into a single field.
+      Spaces, newlines, <code>:</code>, <code>-</code>, <code>0x</code> and <code>\x</code> are ignored.
+    </p>
 
-  <label for="l3">Layer 3 <span class="hint">IPv4/IPv6 header with options, optionally followed by the TCP/UDP/ICMP header, or the SCTP header and chunk header(s)</span></label>
+    <label for="l2">Layer 2 <span class="hint">e.g. Ethernet header</span></label>
-  <textarea id="l3" name="l3" rows="4" spellcheck="false">{{.Form.L3}}</textarea>
+    <textarea id="l2" name="l2" rows="2" spellcheck="false">{{.Form.L2}}</textarea>
 
-  <label for="l7">Payload <span class="hint">the rest of the packet, not interpreted</span></label>
+    <label for="l3">Layer 3 <span class="hint">IPv4/IPv6 header with options, optionally followed by the TCP/UDP/ICMP header, or the SCTP header and chunk header(s)</span></label>
-  <textarea id="l7" name="l7" rows="6" spellcheck="false">{{.Form.L7}}</textarea>
+    <textarea id="l3" name="l3" rows="4" spellcheck="false">{{.Form.L3}}</textarea>
 
-  <fieldset>
+    <label for="l7">Payload <span class="hint">the rest of the packet, not interpreted</span></label>
+    <textarea id="l7" name="l7" rows="6" spellcheck="false">{{.Form.L7}}</textarea>
+  </div>
+</section>
+
+<section class="widget">
+  <div class="widget-title"><h2>Options</h2></div>
+  <div class="widget-content">
     <label class="check">
       <input type="checkbox" name="fix"{{if .Form.Fix}} checked{{end}}>
       Recalculate IP lengths and checksums
-      <span class="hint">IPv4/IPv6 length, IPv4 header checksum, TCP/UDP/ICMP/ICMPv6/SCTP checksum, UDP length.
-        The end of the layer 3 field also sets the TCP data offset and the length of the SCTP chunk the payload belongs to
-        (paste chunk data without padding).</span>
     </label>
+    <p class="hint field-hint">
+      IPv4/IPv6 length, IPv4 header checksum, TCP/UDP/ICMP/ICMPv6/SCTP checksum, UDP length.
+      The end of the layer 3 field also sets the TCP data offset and the length of the SCTP chunk the payload belongs to
+      (paste chunk data without padding).
+    </p>
 
     <div class="row">
       <div>
@@ -39,55 +48,59 @@
         </select>
       </div>
       <div>
-        <label for="customlinktype">Custom link type <span class="hint">when “Custom…” is selected</span></label>
+        <label for="customlinktype">Custom link type</label>
-        <input id="customlinktype" name="customlinktype" inputmode="numeric" value="{{.Form.CustomLinkType}}" placeholder="e.g. 228">
+        <input id="customlinktype" name="customlinktype" inputmode="numeric" value="{{.Form.CustomLinkType}}" placeholder="e.g. 228" aria-describedby="customlinktype-hint">
+        <span id="customlinktype-hint" class="hint field-hint">Used when “Custom…” is selected</span>
       </div>
       <div>
         <label for="filename">File name</label>
         <input id="filename" name="filename" value="{{.Form.Filename}}" placeholder="packet.pcap">
       </div>
     </div>
-  </fieldset>
 
-  <div class="actions">
+    <div class="actions">
-    <button type="submit" name="action" value="preview">Preview</button>
+      <button type="submit" name="action" value="preview" class="btn">Preview</button>
-    <button type="submit" name="action" value="download" class="primary">Download pcap</button>
+      <button type="submit" name="action" value="download" class="btn primary">Download pcap</button>
+    </div>
   </div>
+</section>
 </form>
 
 {{with .Result}}
-<section class="result">
+<section class="widget">
-  <h2>Preview</h2>
+  <div class="widget-title"><h2>Preview</h2></div>
-  <dl class="summary">
+  <div class="widget-content">
-    <dt>Packet length</dt><dd>{{len .Packet}} bytes</dd>
+    <dl class="summary">
-    <dt>Link type</dt><dd>{{.LinkTypeName}} ({{.LinkType}})</dd>
+      <dt>Packet length</dt><dd>{{len .Packet}} bytes</dd>
-    <dt>Layers</dt>
+      <dt>Link type</dt><dd>{{.LinkTypeName}} ({{.LinkType}})</dd>
-    <dd>
+      <dt>Layers</dt>
-      <span class="l2">layer 2: {{.L2Len}}</span> ·
+      <dd>
-      <span class="l3">layer 3: {{.L3Len}}</span> ·
+        <span class="l2">layer 2: {{.L2Len}}</span> ·
-      <span class="l7">payload: {{.L7Len}}</span>
+        <span class="l3">layer 3: {{.L3Len}}</span> ·
-    </dd>
+        <span class="l7">payload: {{.L7Len}}</span>
-  </dl>
+      </dd>
+    </dl>
 
-  {{if .Fixed}}
+    {{if .Fixed}}
-  <h3>Fixups <span class="hint">IP header at offset {{.IPOffset}}</span></h3>
+    <h3>Fixups <span class="hint">IP header at offset {{.IPOffset}}</span></h3>
-  <table>
+    <table>
-    <thead><tr><th>Field</th><th>Old</th><th>New</th></tr></thead>
+      <thead><tr><th>Field</th><th>Old</th><th>New</th></tr></thead>
-    <tbody>
+      <tbody>
-      {{range .Fix.Changes}}
+        {{range .Fix.Changes}}
-      <tr{{if ne .Old .New}} class="changed"{{end}}><td>{{.Field}}</td><td><code>{{.Old}}</code></td><td><code>{{.New}}</code></td></tr>
+        <tr{{if ne .Old .New}} class="changed"{{end}}><td>{{.Field}}</td><td><code>{{.Old}}</code></td><td><code>{{.New}}</code></td></tr>
-      {{end}}
+        {{end}}
-    </tbody>
+      </tbody>
-  </table>
+    </table>
-  {{range .Fix.Notes}}<p class="note">{{.}}</p>{{end}}
+    {{range .Fix.Notes}}<p class="note">{{.}}</p>{{end}}
-  {{end}}
+    {{end}}
 
-  <h3>Hex dump <span class="hint">changed bytes are underlined</span></h3>
+    <h3>Hex dump <span class="hint">changed bytes are underlined</span></h3>
-  <pre class="dump">
+    <pre class="dump">
 {{- range .Dump -}}
 <span class="off">{{.Offset}}</span>  {{range .Bytes}}<span class="{{.Class}}{{if .Changed}} chg{{end}}">{{.Hex}}</span>{{.Sep}}{{end}} {{.ASCII}}
 {{end -}}
 </pre>
+  </div>
 </section>
 {{end}}
 {{end}}

internal/web/templates/index.html

@@ -1,14 +1,14 @@
-{{define "title"}}Home{{end}}
+{{define "title"}}Tools{{end}}
+
+{{define "toolbar-info"}}<span class="toolbar-info">Small utilities for working with pcap packet captures</span>{{end}}
 
 {{define "content"}}
-<h1>pcap tools</h1>
+<div class="widget-grid">
-<p class="lead">Small utilities for working with pcap packet captures.</p>
-<ul class="tools">
   {{range .Tools}}
-  <li>
+  <a href="{{.Path}}" class="widget tool-card">
-    <a href="{{.Path}}">{{.Name}}</a>
+    <div class="widget-title"><h2>{{.Name}}</h2></div>
-    <p>{{.Description}}</p>
+    <div class="widget-content">{{.Description}}</div>
-  </li>
+  </a>
   {{end}}
-</ul>
+</div>
 {{end}}

internal/web/templates/layout.html

@@ -3,17 +3,36 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="color-scheme" content="dark">
 <title>{{template "title" .}} · pcap tools</title>
+<link rel="icon" type="image/png" sizes="32x32" href="/static/images/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/static/images/favicon-16x16.png">
 <link rel="stylesheet" href="/static/style.css">
 </head>
 <body>
-<header>
+<input type="checkbox" id="nav-toggle" class="nav-toggle visually-hidden" aria-label="Toggle navigation">
-  <nav>
+<header class="topbar">
-    <a href="/" class="brand">pcap tools</a>
+  <label for="nav-toggle" class="burger" title="Menu">
-    {{range .Tools}}<a href="{{.Path}}"{{if eq .Path $.Active}} class="active"{{end}}>{{.Name}}</a>{{end}}
+    <svg viewBox="0 0 60 50" aria-hidden="true"><rect y="41.8" width="60" height="8.2"/><rect y="20.9" width="60" height="8.2"/><rect width="60" height="8.2"/></svg>
-  </nav>
+  </label>
+  <a href="/" class="app-title">pcap tools</a>
+  <a href="/" class="logo-symbol" aria-label="Home">
+    <svg viewBox="0 0 25 25" aria-hidden="true"><path d="m15.3 18.8 1.9 4.2h2.1l-2.5-6.4zM9.9 19.8 7.5 19l.7 4h2z"/><path d="m18.7 8.1-1.2.8L15 7.1l-1.2 1.3L11 7.3l-.5 2.9 2.1 2.3-6.8 1.1.1-2.6-2.1.9.7 1.8-1 9.3h2.1l1.2-5.2 4.8 1.6 2.5 3.6h2.1l-2-4.3 4.4-6.7-.7-1.6.8-.4 1.4 3 1.4-2.8-2.8-2.1zm-3.8 2.2-.8-.5.9-1.4.8.5-.9 1.4zM9.195 2.368l1.042-.354 1.286 3.788-1.042.353zM5.072 3.737l.747-.808 3.892 3.597-.746.808z"/><path d="m4.483 8.179.274-1.065 3.777.97L8.26 9.15z"/></svg>
+  </a>
 </header>
-<main>
+<nav class="sidebar" aria-label="Tools">
+  <div class="nav-section">Tools</div>
+  {{range .Tools}}<a href="{{.Path}}" class="nav-item{{if eq .Path $.Active}} active{{end}}"{{if eq .Path $.Active}} aria-current="page"{{end}}>{{.Name}}</a>
+  {{end}}
+</nav>
+<main class="content">
+  <div class="toolbar">
+    <div class="breadcrumb">
+      {{- if ne .Active "/"}}<a href="/" class="toolbar-link">pcap tools</a><span class="title-separator">/</span>{{end -}}
+      <span class="toolbar-title">{{template "title" .}}</span>
+    </div>
+    {{block "toolbar-info" .}}{{end}}
+  </div>
 {{template "content" .}}
 </main>
 </body>

internal/web/templates/reorder.html

@@ -0,0 +1,29 @@
+{{define "title"}}Reorder pcap{{end}}
+
+{{define "toolbar-info"}}<span class="toolbar-info">Sort packets by timestamp, like <code>reordercap</code></span>{{end}}
+
+{{define "content"}}
+{{with .Data}}
+{{if .Error}}<div class="error" role="alert">{{.Error}}</div>{{end}}
+
+<form method="post" action="/reorder" enctype="multipart/form-data">
+<section class="widget">
+  <div class="widget-title"><h2>Reorder</h2></div>
+  <div class="widget-content">
+    <p class="note">
+      Packets with the same timestamp keep their original order. Packet data and the file header are not changed.
+    </p>
+
+    <label for="file">pcap file <span class="hint">classic pcap, up to {{.MaxUpload}}. Convert pcapng with <code>editcap -F pcap</code></span></label>
+    <input id="file" name="file" type="file" accept=".pcap,.cap,.dmp,application/vnd.tcpdump.pcap" required>
+
+    <p class="note">If the capture ends with a truncated packet, that packet is dropped.</p>
+
+    <div class="actions">
+      <button type="submit" class="btn primary">Reorder and download</button>
+    </div>
+  </div>
+</section>
+</form>
+{{end}}
+{{end}}

internal/web/templates/split.html

@@ -1,47 +1,51 @@
 {{define "title"}}Split pcap{{end}}
 
+{{define "toolbar-info"}}<span class="toolbar-info">Split a pcap file by packet count or file size</span>{{end}}
+
 {{define "content"}}
 {{with .Data}}
-<h1>Split pcap</h1>
-<p class="lead">
-  Upload a pcap file and split it into several files by packet count or by file size.
-  The parts are downloaded together as a zip.
-  Packets are copied unchanged, and each part keeps the original file header.
-</p>
-
 {{if .Error}}<div class="error" role="alert">{{.Error}}</div>{{end}}
 
 <form method="post" action="/split" enctype="multipart/form-data">
-  <label for="file">pcap file <span class="hint">classic pcap, up to {{.MaxUpload}}. Convert pcapng with <code>editcap -F pcap</code></span></label>
+<section class="widget">
-  <input id="file" name="file" type="file" accept=".pcap,.cap,.dmp,application/vnd.tcpdump.pcap" required>
+  <div class="widget-title"><h2>Split</h2></div>
+  <div class="widget-content">
+    <p class="note">
+      The parts are downloaded together as a zip. Packets are copied unchanged, and each part keeps the original file header.
+    </p>
 
-  <fieldset class="modes">
+    <label for="file">pcap file <span class="hint">classic pcap, up to {{.MaxUpload}}. Convert pcapng with <code>editcap -F pcap</code></span></label>
-    <legend>Split by</legend>
+    <input id="file" name="file" type="file" accept=".pcap,.cap,.dmp,application/vnd.tcpdump.pcap" required>
-    <label class="check">
-      <input type="radio" name="mode" value="packets"{{if eq .Form.Mode "packets"}} checked{{end}}>
-      At most
-      <input name="packets" class="num" inputmode="numeric" value="{{.Form.Packets}}" aria-label="Packets per file">
-      packets per file
-    </label>
-    <label class="check">
-      <input type="radio" name="mode" value="size"{{if eq .Form.Mode "size"}} checked{{end}}>
-      At most
-      <input name="size" class="num" inputmode="decimal" value="{{.Form.Size}}" aria-label="Size per file">
-      <select name="unit" class="unit" aria-label="Size unit">
-        {{range .Units}}<option{{if eq . $.Data.Form.Unit}} selected{{end}}>{{.}}</option>{{end}}
-      </select>
-      per file
-      <span class="hint">1 MB = 1,000,000 bytes. A packet bigger than this gets a file to itself.</span>
-    </label>
-  </fieldset>
 
-  <p class="note">
+    <fieldset class="modes">
-    At most {{.MaxParts}} output files. If the capture ends with a truncated packet, that packet is dropped.
+      <legend>Split by</legend>
-  </p>
+      <label class="check">
+        <input type="radio" name="mode" value="packets"{{if eq .Form.Mode "packets"}} checked{{end}}>
+        At most
+        <input name="packets" class="num" inputmode="numeric" value="{{.Form.Packets}}" aria-label="Packets per file">
+        packets per file
+      </label>
+      <label class="check">
+        <input type="radio" name="mode" value="size"{{if eq .Form.Mode "size"}} checked{{end}}>
+        At most
+        <input name="size" class="num" inputmode="decimal" value="{{.Form.Size}}" aria-label="Size per file">
+        <select name="unit" class="unit" aria-label="Size unit">
+          {{range .Units}}<option{{if eq . $.Data.Form.Unit}} selected{{end}}>{{.}}</option>{{end}}
+        </select>
+        per file
+      </label>
+    </fieldset>
 
-  <div class="actions">
+    <p class="note">
-    <button type="submit" class="primary">Split and download zip</button>
+      1 MB = 1,000,000 bytes. A packet bigger than the size limit gets a file to itself.
+      At most {{.MaxParts}} output files. If the capture ends with a truncated packet, that packet is dropped.
+    </p>
+
+    <div class="actions">
+      <button type="submit" class="btn primary">Split and download zip</button>
+    </div>
   </div>
+</section>
 </form>
 {{end}}
 {{end}}

internal/web/upload.go

@@ -0,0 +1,42 @@
+package web
+
+import (
+	"errors"
+	"fmt"
+	"mime/multipart"
+	"net/http"
+	"path"
+	"strings"
+)
+
+// parseUpload parses a multipart form with a file in the "file" field. On
+// failure it returns an HTTP status and a message for the page.
+//
+// Files bigger than 1 MB are spooled to temporary files rather than kept in
+// memory; net/http removes them when the handler returns.
+func (s *Server) parseUpload(w http.ResponseWriter, r *http.Request) (multipart.File, *multipart.FileHeader, int, string) {
+	// Allow some slack over the file size limit for the multipart framing and form fields.
+	r.Body = http.MaxBytesReader(w, r.Body, s.cfg.MaxUploadBytes+64<<10)
+	if err := r.ParseMultipartForm(1 << 20); err != nil {
+		var tooBig *http.MaxBytesError
+		if errors.As(err, &tooBig) {
+			return nil, nil, http.StatusRequestEntityTooLarge, "file too large; the maximum upload is " + s.maxUpload()
+		}
+		return nil, nil, http.StatusBadRequest, "bad upload: " + err.Error()
+	}
+	file, hdr, err := r.FormFile("file")
+	if err != nil {
+		return nil, nil, http.StatusBadRequest, "choose a pcap file"
+	}
+	return file, hdr, 0, ""
+}
+
+func (s *Server) maxUpload() string {
+	return fmt.Sprintf("%d MB", s.cfg.MaxUploadBytes/1e6)
+}
+
+// uploadStem returns the sanitized name of an uploaded file without its extension.
+func uploadStem(hdr *multipart.FileHeader) string {
+	name := safeName(hdr.Filename, "capture.pcap")
+	return strings.TrimSuffix(name, path.Ext(name))
+}