Skip to content

feat(ui): single-view layout with MCP URL in header + full-bleed service map#76

Merged
aksOps merged 1 commit intomainfrom
chore/ui-singleview-mcp-header
May 3, 2026
Merged

feat(ui): single-view layout with MCP URL in header + full-bleed service map#76
aksOps merged 1 commit intomainfrom
chore/ui-singleview-mcp-header

Conversation

@aksOps
Copy link
Copy Markdown
Contributor

@aksOps aksOps commented May 3, 2026

Summary

UX cleanup of the embedded React UI based on user feedback during a live session on a 34" desktop:

  • Removed Traces and Logs views from the nav. Service Map is the only remaining view, so nav tabs are dropped entirely.
  • MCP endpoint URL now lives in the TopNav header with an inline Copy button — visible from any state, no navigation needed. Standalone MCPConsole view is unmounted (file kept as orphaned source for a follow-up cleanup pass).
  • Service Map canvas height now scales with viewport via a new `useWindowHeight` hook. Was hard-capped at 660px; now floor=460, cap=`windowH - 320`, so a 1440-tall window gets ~1120px of canvas.
  • Fixed: even a 34" monitor was rendering everything at "mobile size". Root cause: the design-system `` component defaults to `display: inline-flex`, which collapses the container to its widest child's intrinsic width. Top-level `` in remaining views now overrides this with `{ display: 'flex', width: '100%' }` so the page fills wide monitors.

Bundle

`248KB → 233KB` after tree-shaking the orphaned Traces/Logs view + MCPConsole code from the production bundle.

Files

  • `ui/src/App.tsx` — strip traces/logs imports, hooks, callbacks, state
  • `ui/src/components/nav/TopNav.tsx` — single-view nav, MCP URL+Copy in header
  • `ui/src/components/observability/ServicesView.tsx` — width-fill, dynamic map height
  • `ui/src/components/observability/ServiceSidePanel.tsx` — drop `onViewTraces`/`onViewLogs` props + buttons (no destination anymore)
  • `ui/src/components/observability/tests/ServiceSidePanel.test.tsx` — drop the orphaned "View Traces" test
  • `ui/src/hooks/useWindowHeight.ts` — new SSR-safe resize-tracking hook
  • `ui/src/components/mcp/MCPConsole.tsx` — annotated as orphaned, contains the same URL+Copy pattern but is no longer routed
  • `internal/ui/dist/*` — fresh production bundle (Vite output, tracked per project convention)

Orphaned source kept for follow-up

`TracesView.tsx`, `LogsView.tsx`, `useTraces.ts`, `useLogs.ts`, `MCPConsole.tsx` (and related tests). Tree-shaken from the bundle so they don't ship; left in source to keep this PR scoped to the UX change. A small follow-up will delete them.

Test plan

  • `make ui-build` clean
  • `go build ./...` clean
  • Daemon starts on `HTTP_PORT=37776` and serves `index-B9ZFj2IV.js`
  • Visual: 34" monitor shows full-width layout (verified by user during session)
  • Visual: service map fills available height (verified by user during session)
  • CI green
  • SonarCloud Quality Gate green

🤖 Generated with Claude Code

…ice map

UX cleanup:
- Removed Traces and Logs views from the UI nav. Service Map is the only
  remaining view; nav tabs are dropped (single view = no tabs needed).
- MCP endpoint URL now lives in the TopNav header with an inline Copy
  button — accessible from any state, no navigation required. The
  standalone MCPConsole view is unmounted (file kept temporarily as
  orphaned source for the next cleanup pass).
- Service Map canvas height now scales with viewport via new
  useWindowHeight hook. Was hard-capped at 660px; now floor=460,
  cap=windowH-320 so a 1440-tall window gets ~1120px of canvas.
- Top-level <Space> in remaining views now overrides display:inline-flex
  → display:flex with width:100% so the page actually fills wide
  monitors. The design-system Space defaults to inline-flex which
  collapses the entire view to its widest child's intrinsic width — the
  symptom that made even a 34" desktop look mobile-sized.

Bundle: 248KB → 233KB after tree-shaking the orphaned views.

Verification
- make ui-build clean
- go build ./... clean
- Daemon starts on HTTP_PORT=37776 and serves the new bundle
  (index-B9ZFj2IV.js)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@sonarqubecloud
Copy link
Copy Markdown

sonarqubecloud Bot commented May 3, 2026

@aksOps aksOps merged commit 0c92a4a into main May 3, 2026
17 checks passed
@aksOps aksOps deleted the chore/ui-singleview-mcp-header branch May 3, 2026 16:46
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