Skip to content

ui: foundation + shell + command palette for new UI#8

Open
Moriz82 wants to merge 1 commit into
mainfrom
worktree-agent-a0dfa4bd
Open

ui: foundation + shell + command palette for new UI#8
Moriz82 wants to merge 1 commit into
mainfrom
worktree-agent-a0dfa4bd

Conversation

@Moriz82

@Moriz82 Moriz82 commented Apr 20, 2026

Copy link
Copy Markdown
Owner

Summary

  • Port new Gossamer UI shell — left icon rail, top header with project pill, command palette, and tweaks panel — to the TypeScript frontend, preserving all backend wiring (health probe, project switching, settings, graph stats).
  • Add design tokens (OKLCH palette, IBM Plex fonts) and shared primitives (Icon, Spark, Severity, Status, Method, Toast).
  • Rewire App.tsx around Shell with localStorage-persisted tabs, ⌘K / / palette, and g/s/i/o/n/f/, single-letter navigation.

Files added

  • frontend/src/styles/{tokens,base,shell,tweaks}.css
  • frontend/src/components/{Icon,Primitives,CommandPalette,Shell,TweaksPanel}.tsx

Files changed

  • frontend/src/App.tsx — rewritten to mount <Shell> + palette + tweaks while keeping every existing panel (GraphPanel, OperationsPanel, SettingsPanel, QueriesPanel, DataPanel, RegistryPanel, IngestorsPanel, FindingsPanel, ScannersPanel, SitemapPanel, IntelPanel).
  • frontend/src/main.tsx — imports tokens/base/shell/tweaks before legacy styles.css.

Verification

  • npm run build succeeds.
  • Playwright smoke (via Preview MCP) — login with gossamer/gossamer, rail renders 7 primary icons, ⌘K opens the palette, clicking rail items swaps breadcrumbs (Graph / Sitemap / Findings / Settings), no console errors.

Test plan

  • Sign in with gossamer/gossamer
  • Verify rail shows 7 primary icons + settings + sign-out
  • Press ⌘K / Cmd+K / / — command palette opens
  • Hit g, s, i, o, n, f, , outside of inputs — tab changes
  • Click project pill — dropdown shows projects, allows switching / creating / deleting / exporting
  • Reload — last tab persists via localStorage
  • Inspector postMessage (__activate_edit_mode) opens TweaksPanel; accent-hue slider and density toggles update :root vars live

🤖 Generated with Claude Code

Port Gossamer's new rail-based UI shell, command palette, and tweaks
panel into the TypeScript codebase while keeping all backend wiring
(health probe, projects, settings, graph stats) intact.

- Add styles/tokens.css (OKLCH palette + IBM Plex fonts), base.css,
  shell.css, tweaks.css.
- Add Icon, Primitives (Spark/Severity/Status/Method/Toast),
  CommandPalette, Shell, and TweaksPanel components with typed props.
- Rewrite App.tsx with rail + header layout, localStorage tab
  persistence, cmd-k / "/" palette, g/s/i/o/n/f/, quick-nav keys, and
  tweaks postMessage protocol.
- Fold existing project selector dropdown logic into the Shell project
  pill.
- main.tsx imports the new CSS tokens/base/shell/tweaks modules before
  legacy styles.css.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant