DraugnetUI v2.1.0

DraugnetUI v2.1.0

Full changelog: v2.0.0...v2.1.0

Highlights

This release adds the "Report via Template" page — a guided, event-template-driven
submission form that renders dynamically from a backend template definition — and
improves the CSV reporting page.

✨ Report via Template (template.html)

A new guided submission page that builds its form from a backend template rather than
a fixed layout:

• Template picker & render dispatch — searchable GET /templates picker, then
  fetches GET /templates/{uuid} and renders the definition element-by-element.
• Element renderers for all element types:
  • section, text_block, and attribute_field
  • object_field (via /object_templates)
  • tag_field and galaxy_field pickers (taxonomy / galaxy-cluster backed)
  • file_field (base64 upload) and event_report (Markdown)
• Event-defaults panel — read-only/informational view of the template's
  event_defaults, with a live {{date}} / {{now}} / {{user}} / {{field:id}}
  info preview.
• Slim metadata block — PAP / submitter / description, built inline on the page.
• Client-side validation, submit & token save — mandatory-field enforcement,
  POST /share/template, and automatic token save to localStorage.
• Theming — full light/dark parity for object instances.

📄 CSV reporting improvements

• Fixed date-field handling in CSV reports.
• Added type/category dropdowns (backed by a bundled describeTypes.json).

📚 Documentation

• Documented the Report-via-Template page in CLAUDE.md.
• Added an operator UI end-to-end checklist for the template page.

DraugnetUI v2.0.1 released

Improved

• CSV submission form — ISO 8601 date/time picker — the First Seen and Last Seen fields now use a dedicated date/time picker widget instead of a plain text input. The picker supports both
  YYYY-MM-DD and YYYY-MM-DDTHH:MM:SS formats and includes a Now shortcut. The popup is rendered outside the table's layout context so it is never clipped by row boundaries.
• CSV submission form — Type combobox — the Type field is now a filterable combobox sourced from MISP's describeTypes.json. Users can type to narrow down the 190+ available MISP attribute
  types, navigate the list with arrow keys, and confirm with Enter. Free-text entry is still allowed for types not in the list.
• CSV submission form — Category combobox — the Category field is now a filterable combobox sourced from describeTypes.json. The available options are filtered dynamically based on the type
  selected in the same row, showing only the categories that are valid for that type. If the type field is empty or not a known MISP type, all 16 categories are offered.

v2.0.0 released

● v2.0.0 — Draugnet UI

Full UI Revamp

This release is a ground-up redesign of the Draugnet frontend. Every page has
been reworked for visual consistency, usability, and security.

---

New Features

CSV Submission Page

A new Report via CSV page lets users submit structured attribute data either
by uploading a .csv file (with drag-and-drop support) or by filling in a
row-by-row table directly in the browser. Columns: type, value, category,
first_seen, last_seen, comment. Required fields are visually distinct,
rows can be added with a button or by tabbing out of the last cell, and the
upload path auto-populates the table for review before submission.

---

Redesigned Pages

Landing Page

Replaced the sparse single-column layout with a full-width design:

• Hero section with logo, project description, and links to the Draugnet API
  and Draugnet UI repositories
• 2×2 feature card grid (Why Draugnet, Anonymity, Submission formats, Updating reports)
• API reference section with live endpoint links populated from config.json

Submission Pages (Freetext, MISP JSON, STIX, Object, CSV)

All five submission pages now share a consistent layout:

• Page header with a colour-coded icon, title, and a one-line description
• Editor-style card with a borderless textarea and a footer bar containing a
  contextual hint and a Submit button with a paper-plane icon

View Report Page

• Page header consistent with submission pages (fa-eye icon + subtitle)
• Toolbar cleaned up: emoji replaced with Font Awesome icons throughout
  (Visual / JSON toggle, Download dropdown, Add-to-report group)
• Token + timestamp info rendered as a slim banner above the report card
  rather than a card nested inside another card
• Fixed a bug where a duplicate "View Report" message appeared in the wrong
  location when no token was provided

---

Component Redesigns

Navigation Bar

• Five individual "Report via …" links collapsed into a single Report
  dropdown, with the icon and colour from each page shown next to its entry
• Dark mode toggle changed from a checkbox to an icon button (moon / sun)
  that swaps icon on toggle
• Slim 44 px bar with a themed background and a bottom border separator;
  active page highlighted in both the top-level bar and inside the dropdown

Token Store Sidebar

• Fixed width (300 px) at large breakpoints instead of a percentage column
  that grew awkwardly on wide screens
• Redesigned as a sticky full-height panel with:
  • A compact header showing a live token count badge and icon buttons for
    download and purge
  • Per-token copy-to-clipboard button (shows a checkmark for 1.5 s on success)
  • Fade-in action buttons on row hover
  • Empty state with a folder icon and prompt
  • Minimal footer input for pasting tokens manually

Event Tree Visualizer

• Colour-coded type pills replace the flat blue badge: each node type has
  its own colour (Attribute = teal, Object = blue, Tag = amber, Galaxy = purple,
  Relationship = pink, Note / Opinion = grey)
• Pill text shows the most specific identifier — the MISP type for Attributes
  (ip-dst, sha256, …), the template name for Objects (file, email, …),
  the galaxy type for Galaxy clusters
• Unicode ▼ toggle replaced with a Font Awesome chevron that animates
  smoothly between expanded and collapsed states
• Connector lines now use theme-aware CSS variables instead of hard-coded #ccc
• Hover tooltip rebuilt with structured key / value rows and a polished shadow

Template Selector (Report via Object)

• Native browser <datalist> (unstyled, ignores dark theme) replaced with a
  fully custom combobox:
  • Substring filtering on every keystroke with matched characters highlighted
  • Keyboard navigation: ↑ / ↓ to move, Enter to select, Escape to dismiss
  • Clear button appears once a value is typed
  • Styled consistently with the rest of the app using theme CSS variables

---

Security Improvements

• Content Security Policy and hardening headers (X-Frame-Options,
  X-Content-Type-Options, Referrer-Policy) added to all nginx location blocks
• baseUrl read from config.json is now validated (must be http: or
  https:); invalid values fall back to window.location.origin
• All inline onclick="…" attributes replaced with addEventListener calls
• XSS fix on the Object page: template name and description are now inserted
  via DOM text APIs instead of innerHTML interpolation