Skip to content

Commit ddb8471

Browse files
peterjpeterj
authored
Merge pull request #19 from agentdesktop-dev/peterj/uistorybook-comps
improve the mcp/skills view
2 parents 0e5fc95 + f9f7c2a commit ddb8471

7 files changed

Lines changed: 523 additions & 259 deletions

File tree

‎frontend/controller/src/stories/fixtures.ts‎

Lines changed: 150 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -60,38 +60,168 @@ export const overview: Overview = {
6060
recent_devices: devices,
6161
};
6262

63+
const deviceMcpServers = [
64+
{
65+
name: "github-enterprise",
66+
transport: "stdio",
67+
command: "/usr/local/bin/github-mcp-server --read-only",
68+
enabled: true,
69+
source: "VS Code settings",
70+
},
71+
{
72+
name: "workspace-files",
73+
transport: "stdio",
74+
command:
75+
"npx -y @modelcontextprotocol/server-filesystem /Users/developer/projects",
76+
enabled: true,
77+
source: "User settings",
78+
},
79+
{
80+
name: "linear",
81+
transport: "streamable-http",
82+
url: "https://mcp.linear.app/mcp",
83+
enabled: true,
84+
source: "Organization policy",
85+
},
86+
{
87+
name: "sentry-production",
88+
transport: "sse",
89+
url: "https://mcp.sentry.example.internal/events/production",
90+
enabled: true,
91+
source: "Workspace settings",
92+
},
93+
{
94+
name: "postgres-readonly",
95+
transport: "stdio",
96+
command:
97+
"uvx postgres-mcp --access-mode=restricted --profile=analytics-replica",
98+
enabled: false,
99+
source: "Organization policy",
100+
},
101+
{
102+
name: "kubernetes-staging",
103+
transport: "stdio",
104+
command:
105+
"docker run --rm -i company/kubernetes-mcp:stable --context staging-us-east-1",
106+
enabled: true,
107+
source: "Dev container configuration",
108+
},
109+
{
110+
name: "notion-engineering",
111+
transport: "streamable-http",
112+
url: "https://mcp.notion.com/engineering-workspace",
113+
enabled: true,
114+
source: "User settings",
115+
},
116+
];
117+
118+
const deviceSkills = [
119+
{
120+
path: "/Users/developer/.agents/skills/release/SKILL.md",
121+
frontMatter: {
122+
name: "Release workflow",
123+
description:
124+
"Coordinates versioning, validation, release notes, and rollout across repositories.",
125+
},
126+
},
127+
{
128+
path: "/Users/developer/.agents/skills/incident-response/SKILL.md",
129+
frontMatter: {
130+
name: "Incident response",
131+
description:
132+
"Triages production incidents and prepares evidence for the incident commander.",
133+
},
134+
},
135+
{
136+
path: "/Users/developer/.agents/skills/architecture-review/SKILL.md",
137+
frontMatter: {
138+
name: "Architecture review",
139+
description:
140+
"Reviews module boundaries, coupling, and operational tradeoffs.",
141+
},
142+
},
143+
{
144+
path: "/Users/developer/.agents/skills/security-audit/SKILL.md",
145+
frontMatter: {
146+
name: "Security audit",
147+
description:
148+
"Checks authentication, authorization, secret handling, and dependency risk.",
149+
},
150+
},
151+
{
152+
path: "/Users/developer/.agents/skills/migration-planner/SKILL.md",
153+
frontMatter: {
154+
name: "Migration planner",
155+
description:
156+
"Builds staged migrations with compatibility gates and rollback points.",
157+
},
158+
},
159+
{
160+
path: "/Users/developer/.agents/skills/performance-diagnosis/SKILL.md",
161+
frontMatter: {
162+
name: "Performance diagnosis",
163+
description:
164+
"Captures profiles and validates improvements against a reproducible baseline.",
165+
},
166+
},
167+
{
168+
path: "/Users/developer/.agents/skills/accessibility-review/SKILL.md",
169+
frontMatter: {
170+
name: "Accessibility review",
171+
description:
172+
"Audits keyboard flow, semantics, contrast, reflow, and screen reader behavior.",
173+
},
174+
},
175+
{
176+
path: "/Users/developer/.agents/skills/api-design/SKILL.md",
177+
frontMatter: {
178+
name: "API design",
179+
description:
180+
"Shapes stable contracts, error models, pagination, and compatibility expectations.",
181+
},
182+
},
183+
{
184+
path: "/Users/developer/.agents/skills/dependency-upgrade/SKILL.md",
185+
frontMatter: {
186+
name: "Dependency upgrade",
187+
description:
188+
"Plans and validates framework upgrades while minimizing unrelated churn.",
189+
},
190+
},
191+
{
192+
path: "/Users/developer/.agents/skills/documentation/SKILL.md",
193+
frontMatter: {
194+
name: "Documentation maintenance",
195+
description:
196+
"Keeps setup guides, examples, and architecture references current.",
197+
},
198+
},
199+
{
200+
path: "/Users/developer/.agents/skills/onboarding/SKILL.md",
201+
frontMatter: {
202+
name: "Onboarding review",
203+
description:
204+
"Tests first-run workflows and improves defaults and recovery guidance.",
205+
},
206+
},
207+
];
208+
63209
export const deviceDetail: DeviceDetail = {
64210
...macDevice,
65211
discoveries: [
66212
{
67213
kind: "vscode",
68214
version: "1.104.0",
69215
path: "/Applications/Visual Studio Code.app/Contents/Resources/app/bin/code",
70-
mcp_servers: [
71-
{
72-
name: "github-enterprise",
73-
transport: "stdio",
74-
command: "/usr/local/bin/github-mcp-server --read-only",
75-
enabled: true,
76-
source: "VS Code settings",
77-
},
78-
],
79-
skills: [
80-
{
81-
path: "/Users/developer/.agents/skills/release/SKILL.md",
82-
frontMatter: {
83-
name: "Release workflow",
84-
description: "Coordinates a release across repositories.",
85-
},
86-
},
87-
],
216+
mcp_servers: deviceMcpServers,
217+
skills: deviceSkills,
88218
},
89219
{
90220
kind: "claude-code",
91221
version: "2.1.3",
92222
path: "/Users/developer/.local/bin/claude",
93-
mcp_servers: [],
94-
skills: [],
223+
mcp_servers: deviceMcpServers.slice(0, 3),
224+
skills: deviceSkills.slice(0, 5),
95225
},
96226
],
97227
recent_events: [

‎frontend/controller/src/styles.css‎

Lines changed: 1 addition & 175 deletions
Original file line numberDiff line numberDiff line change
@@ -324,29 +324,12 @@ tbody tr:hover {
324324
background: #fafbfc;
325325
}
326326

327-
.device-cell,
328-
.tool-cell {
327+
.device-cell {
329328
display: flex;
330329
align-items: center;
331330
gap: 8px;
332331
}
333332

334-
.tool-icon {
335-
width: 18px;
336-
height: 18px;
337-
display: block;
338-
object-fit: contain;
339-
}
340-
341-
.tool-icon-fallback {
342-
flex: 0 0 auto;
343-
color: var(--muted);
344-
}
345-
346-
.tool-inventory-item {
347-
border-bottom: 1px solid var(--border-soft);
348-
}
349-
350333
.event-row {
351334
min-height: 58px;
352335
padding: 9px 15px;
@@ -394,130 +377,6 @@ tbody tr:hover {
394377
white-space: nowrap;
395378
}
396379

397-
.tool-inventory-item:last-child {
398-
border-bottom: 0;
399-
}
400-
401-
.tool-inventory-item summary {
402-
min-height: 57px;
403-
padding: 10px 15px;
404-
display: grid;
405-
grid-template-columns: minmax(140px, 0.8fr) 90px minmax(220px, 1.5fr) auto;
406-
align-items: center;
407-
gap: 14px;
408-
color: #4b535c;
409-
font-size: 12px;
410-
cursor: pointer;
411-
list-style-position: outside;
412-
}
413-
414-
.tool-inventory-item summary:hover {
415-
background: #fafbfc;
416-
}
417-
418-
.tool-version,
419-
.capability-counts {
420-
color: var(--muted);
421-
}
422-
423-
.capability-counts {
424-
white-space: nowrap;
425-
}
426-
427-
.tool-path {
428-
overflow: hidden;
429-
text-overflow: ellipsis;
430-
white-space: nowrap;
431-
}
432-
433-
.capability-grid {
434-
padding: 0 15px 15px 39px;
435-
display: grid;
436-
grid-template-columns: repeat(2, minmax(0, 1fr));
437-
gap: 24px;
438-
}
439-
440-
.capability-heading {
441-
margin: 0;
442-
padding: 8px 0;
443-
display: flex;
444-
align-items: center;
445-
justify-content: space-between;
446-
gap: 12px;
447-
border-bottom: 1px solid var(--border-soft);
448-
}
449-
450-
.capability-section h4 {
451-
margin: 0;
452-
display: flex;
453-
align-items: center;
454-
gap: 6px;
455-
color: #57606a;
456-
font-size: 11px;
457-
font-weight: 600;
458-
text-transform: uppercase;
459-
letter-spacing: 0.04em;
460-
}
461-
462-
.mini-pager {
463-
display: flex;
464-
align-items: center;
465-
gap: 3px;
466-
color: var(--subtle);
467-
font-size: 9px;
468-
}
469-
470-
.mini-pager button {
471-
width: 19px;
472-
height: 19px;
473-
padding: 0;
474-
display: grid;
475-
place-items: center;
476-
color: var(--muted);
477-
background: transparent;
478-
border: 1px solid var(--border);
479-
border-radius: 3px;
480-
cursor: pointer;
481-
}
482-
483-
.mini-pager button:hover:not(:disabled) {
484-
background: var(--surface);
485-
}
486-
487-
.mini-pager button:disabled {
488-
opacity: 0.35;
489-
cursor: default;
490-
}
491-
492-
.capability-row {
493-
padding: 10px 0;
494-
border-bottom: 1px solid var(--border-soft);
495-
overflow-wrap: anywhere;
496-
}
497-
498-
.capability-row:last-child {
499-
border-bottom: 0;
500-
}
501-
502-
.capability-row > div {
503-
display: flex;
504-
align-items: baseline;
505-
justify-content: space-between;
506-
gap: 12px;
507-
}
508-
509-
.capability-row strong {
510-
color: #24292f;
511-
font-size: 12px;
512-
font-weight: 600;
513-
}
514-
515-
.capability-row span,
516-
.capability-row small {
517-
color: var(--subtle);
518-
font-size: 10px;
519-
}
520-
521380
.mono-soft,
522381
code {
523382
font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
@@ -541,39 +400,6 @@ code {
541400
}
542401
}
543402

544-
.capability-row code,
545-
.capability-row small {
546-
margin-top: 4px;
547-
display: block;
548-
}
549-
550-
.capability-row p,
551-
.capability-empty {
552-
margin: 5px 0 0;
553-
color: var(--muted);
554-
font-size: 11px;
555-
line-height: 1.45;
556-
}
557-
558-
.capability-empty {
559-
padding: 7px 0;
560-
}
561-
562-
@media (max-width: 800px) {
563-
.tool-inventory-item summary {
564-
grid-template-columns: minmax(130px, 1fr) auto;
565-
}
566-
567-
.tool-path {
568-
grid-column: 1 / -1;
569-
}
570-
571-
.capability-grid {
572-
grid-template-columns: 1fr;
573-
padding-left: 35px;
574-
}
575-
}
576-
577403
.tool-avatar-group {
578404
display: flex;
579405
align-items: center;

0 commit comments

Comments
 (0)