Skip to content

Commit 286fcdf

Browse files
aksOpsaksOps
committed
refactor(ui): zero custom CSS — pure DS primitives (AppShell/PageHeader/Stat/Grid/CodeBlock)
- App: AppShell hosts header + main content; no inline styles - TopNav: PageHeader + controlled Tabs + Stat strip; StatPill helper deleted - ServiceSidePanel: KPI grid → DS Stat (4-up); upstream/downstream lists → Card-bordered Buttons; health bar → DS Progress - TracesPage / LogsPage: 12-col Grid + Card + ScrollDiv + Space; row buttons built from DS Button + Space; pre-with-HTML eliminated - ServiceMap: side-panel split moved to Grid (8/4); toolbar → Card extra slot - MCP modals: pre+colorJSON HTML → DS CodeBlock (language="json", copyable) - ToolCard / MCPConsole / ToolCallModal / RPCPopup: Grid + Space replace inline grid/flex; Card title/extra/footer slots replace bespoke headers - Drop tokens.css entirely (--syntax-* palette unused after CodeBlock swap); global.css trimmed to browser reset only (3 rules: box-sizing, body margin, #root height) - utils.ts: drop unused colorJSON + esc helpers Net: 619 insertions / 1078 deletions; CSS bundle 48.5 KB (gzip 9.2 KB).
1 parent f791eb6 commit 286fcdf

19 files changed

Lines changed: 619 additions & 1078 deletions

internal/ui/dist/assets/cytoscape-cose-bilkent-D9vZHFQ-.js renamed to internal/ui/dist/assets/cytoscape-cose-bilkent-BztfHfS8.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎internal/ui/dist/assets/index-BtOiOgcN.js‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

internal/ui/dist/assets/index-DGckg6RL.css renamed to internal/ui/dist/assets/index-DzLWOk_K.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎internal/ui/dist/assets/index-zkbNtXWO.js‎

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎internal/ui/dist/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>OtelContext</title>
7-
<script type="module" crossorigin src="/assets/index-BtOiOgcN.js"></script>
8-
<link rel="stylesheet" crossorigin href="/assets/index-DGckg6RL.css">
7+
<script type="module" crossorigin src="/assets/index-zkbNtXWO.js"></script>
8+
<link rel="stylesheet" crossorigin href="/assets/index-DzLWOk_K.css">
99
</head>
1010
<body>
1111
<div id="root"></div>

‎ui/src/App.tsx‎

Lines changed: 46 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { useCallback, useRef, useState } from 'react'
2+
import { AppShell } from '@ossrandom/design-system'
23
import TopNav, { type OtelView } from './components/nav/TopNav'
34
import ServiceMap from './components/observability/ServiceMap'
45
import TracesPage from './components/observability/TracesPage'
@@ -44,58 +45,50 @@ export default function App() {
4445
}, [])
4546

4647
return (
47-
<>
48-
<TopNav
49-
view={view}
50-
onNavigate={setView}
51-
dashboard={dash.dashboard}
52-
stats={dash.stats}
53-
wsConnected={wsConnected}
54-
/>
55-
<main
56-
style={{
57-
flex: 1,
58-
minHeight: 0,
59-
display: 'flex',
60-
flexDirection: 'column',
61-
background: 'var(--bg-0)',
62-
overflow: 'hidden',
63-
}}
64-
>
65-
{view === 'services' && (
66-
<ServiceMap
67-
graph={graph.graph}
68-
cache={graph.cache}
69-
loading={graph.loading}
70-
error={graph.error}
71-
onNavigateToTraces={navigateToTraces}
72-
onNavigateToLogs={navigateToLogs}
73-
/>
74-
)}
75-
{view === 'traces' && (
76-
<TracesPage
77-
traces={traces.traces}
78-
selected={traces.selected}
79-
loading={traces.loading}
80-
error={traces.error}
81-
onSelect={(traceId) => void traces.selectTrace(traceId)}
82-
serviceFilter={serviceFilter}
83-
onClearFilter={clearFilter}
84-
/>
85-
)}
86-
{view === 'logs' && (
87-
<LogsPage
88-
logs={logs.logs}
89-
similar={logs.similar}
90-
loading={logs.loading}
91-
error={logs.error}
92-
onSimilar={(query) => void logs.runSimilar(query)}
93-
serviceFilter={serviceFilter}
94-
onClearFilter={clearFilter}
95-
/>
96-
)}
97-
{view === 'mcp' && <MCPConsole />}
98-
</main>
99-
</>
48+
<AppShell
49+
header={
50+
<TopNav
51+
view={view}
52+
onNavigate={setView}
53+
dashboard={dash.dashboard}
54+
stats={dash.stats}
55+
wsConnected={wsConnected}
56+
/>
57+
}
58+
>
59+
{view === 'services' && (
60+
<ServiceMap
61+
graph={graph.graph}
62+
cache={graph.cache}
63+
loading={graph.loading}
64+
error={graph.error}
65+
onNavigateToTraces={navigateToTraces}
66+
onNavigateToLogs={navigateToLogs}
67+
/>
68+
)}
69+
{view === 'traces' && (
70+
<TracesPage
71+
traces={traces.traces}
72+
selected={traces.selected}
73+
loading={traces.loading}
74+
error={traces.error}
75+
onSelect={(traceId) => void traces.selectTrace(traceId)}
76+
serviceFilter={serviceFilter}
77+
onClearFilter={clearFilter}
78+
/>
79+
)}
80+
{view === 'logs' && (
81+
<LogsPage
82+
logs={logs.logs}
83+
similar={logs.similar}
84+
loading={logs.loading}
85+
error={logs.error}
86+
onSimilar={(query) => void logs.runSimilar(query)}
87+
serviceFilter={serviceFilter}
88+
onClearFilter={clearFilter}
89+
/>
90+
)}
91+
{view === 'mcp' && <MCPConsole />}
92+
</AppShell>
10093
)
10194
}

‎ui/src/components/mcp/MCPConsole.tsx‎

Lines changed: 49 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useState } from 'react'
2-
import { Alert, Badge, Button, Space } from '@ossrandom/design-system'
2+
import { Alert, Badge, Button, Card, Grid, Space } from '@ossrandom/design-system'
33
import { Plug, RefreshCw } from 'lucide-react'
44
import { useMCP } from '@/hooks/useMCP'
55
import type { MCPTool } from '@/types/api'
@@ -19,108 +19,60 @@ export default function MCPConsole() {
1919
const [callTool, setCallTool] = useState<MCPTool | null>(null)
2020
const [rpcTool, setRpcTool] = useState<MCPTool | null>(null)
2121

22-
return (
23-
<div style={{ display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0 }}>
24-
<div
25-
style={{
26-
display: 'flex',
27-
alignItems: 'center',
28-
gap: '0.75rem',
29-
padding: '0.7rem 1rem',
30-
borderBottom: '1px solid var(--border-1)',
31-
background: 'var(--bg-1)',
32-
}}
33-
>
34-
<Badge tone={statusTone[status]} size="sm">
35-
<span style={{ textTransform: 'capitalize' }}>{status}</span>
36-
</Badge>
37-
22+
const header = (
23+
<Space justify="between" align="center" wrap>
24+
<Space size="xs" align="center" wrap>
25+
<Badge tone={statusTone[status]} size="sm">{status}</Badge>
3826
<Space size="xs" align="center">
39-
<Plug size={11} style={{ opacity: 0.5 }} />
40-
<code
41-
style={{
42-
fontFamily: 'var(--font-mono, ui-monospace, monospace)',
43-
padding: '0.15rem 0.4rem',
44-
borderRadius: 'var(--radius-sm)',
45-
background: 'var(--bg-2)',
46-
border: '1px solid var(--border-1)',
47-
color: 'var(--fg-2)',
48-
fontSize: '0.7rem',
49-
}}
50-
>
51-
{window.location.origin}/mcp
52-
</code>
27+
<Plug size={11} />
28+
<code>{window.location.origin}/mcp</code>
5329
</Space>
54-
55-
<Badge tone="subtle" size="sm">
56-
HTTP Streamable MCP · JSON-RPC 2.0
57-
</Badge>
58-
59-
<div style={{ marginLeft: 'auto' }}>
60-
<Button
61-
variant="ghost"
62-
size="sm"
63-
iconLeft={<RefreshCw size={12} />}
64-
onClick={() => void connect()}
65-
>
66-
Reconnect
67-
</Button>
68-
</div>
69-
</div>
70-
71-
<div
72-
style={{
73-
padding: '0.7rem 1rem',
74-
borderBottom: '1px solid var(--border-1)',
75-
display: 'flex',
76-
alignItems: 'center',
77-
justifyContent: 'space-between',
78-
}}
30+
<Badge tone="subtle" size="sm">HTTP Streamable MCP · JSON-RPC 2.0</Badge>
31+
</Space>
32+
<Button
33+
variant="ghost"
34+
size="sm"
35+
iconLeft={<RefreshCw size={12} />}
36+
onClick={() => void connect()}
7937
>
80-
<span
81-
style={{
82-
fontSize: '0.66rem',
83-
fontWeight: 700,
84-
textTransform: 'uppercase',
85-
letterSpacing: '0.14em',
86-
color: 'var(--fg-4)',
87-
}}
88-
>
89-
Available Tools
90-
</span>
91-
<span style={{ fontSize: '0.72rem', color: 'var(--fg-3)' }}>{tools.length} discovered</span>
92-
</div>
38+
Reconnect
39+
</Button>
40+
</Space>
41+
)
9342

94-
<div
95-
style={{
96-
flex: 1,
97-
overflow: 'auto',
98-
padding: '1rem',
99-
display: 'grid',
100-
gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
101-
gap: '0.8rem',
102-
alignContent: 'start',
103-
}}
43+
return (
44+
<Space direction="vertical" size="md">
45+
<Card bordered padding="md" radius="md">
46+
{header}
47+
</Card>
48+
49+
<Card
50+
bordered
51+
padding="md"
52+
radius="md"
53+
title="Available Tools"
54+
extra={<Badge tone="subtle" size="sm">{tools.length} discovered</Badge>}
10455
>
10556
{status === 'error' && (
106-
<div style={{ gridColumn: '1 / -1' }}>
107-
<Alert severity="danger" title="Connection failed">
108-
{error || 'Could not reach the MCP endpoint.'}{' '}
109-
<code style={{ fontFamily: 'var(--font-mono, ui-monospace, monospace)' }}>MCP_ENABLED=true</code>
110-
</Alert>
111-
</div>
57+
<Alert severity="danger" title="Connection failed">
58+
{error || 'Could not reach the MCP endpoint.'} <code>MCP_ENABLED=true</code>
59+
</Alert>
60+
)}
61+
{status === 'connected' && (
62+
<Grid columns={12} gap="md">
63+
{tools.map((tool, index) => (
64+
<Grid.Col key={tool.name} span={4}>
65+
<ToolCard
66+
tool={tool}
67+
index={index}
68+
onCall={(next) => setCallTool(tools[next])}
69+
onRPC={(next) => setRpcTool(tools[next])}
70+
/>
71+
</Grid.Col>
72+
))}
73+
</Grid>
11274
)}
113-
{status === 'connected' &&
114-
tools.map((tool, index) => (
115-
<ToolCard
116-
key={tool.name}
117-
tool={tool}
118-
index={index}
119-
onCall={(next) => setCallTool(tools[next])}
120-
onRPC={(next) => setRpcTool(tools[next])}
121-
/>
122-
))}
123-
</div>
75+
</Card>
12476

12577
{callTool && (
12678
<ToolCallModal
@@ -132,6 +84,6 @@ export default function MCPConsole() {
13284
/>
13385
)}
13486
{rpcTool && <RPCPopup tool={rpcTool} onClose={() => setRpcTool(null)} onSend={send} />}
135-
</div>
87+
</Space>
13688
)
13789
}

0 commit comments

Comments
 (0)