dguiducci/Skald-Circle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tool card UI redesign: semantic icons, inline diff persistence, tool detail page, MCP-friendly titles
Nightly Build / build (push) Successful in 6m38s
Details

Browse Source
This commit is contained in:
dguiducci
2026-07-21 23:39:41 +01:00
parent 8e891fbced
commit c11702c3d3
44 changed files with 1103 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/css/copilot-messages.css
+138 -1
View File
@@ -131,13 +131,67 @@
font-size: 0.7rem;
}
/* The leading tool-type icon: a colored glyph, or an MCP connector's own icon. */
.copilot-tool-ico {
flex-shrink: 0;
font-size: 0.9rem;
line-height: 1;
color: var(--tool-generic);
}
.copilot-tool-ico-wrap {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.copilot-tool-ico-img {
width: 15px;
height: 15px;
object-fit: contain;
border-radius: 3px;
}
/* Fallback: hide the glyph unless the connector image failed to load. */
.copilot-tool-ico-wrap .copilot-tool-ico { display: none; }
.copilot-tool-ico-wrap.img-failed .copilot-tool-ico-img { display: none; }
.copilot-tool-ico-wrap.img-failed .copilot-tool-ico { display: inline; }
.tool-ico--edit { color: var(--tool-edit); }
.tool-ico--read { color: var(--tool-read); }
.tool-ico--list { color: var(--tool-list); }
.tool-ico--search { color: var(--tool-search); }
.tool-ico--shell { color: var(--tool-shell); }
.tool-ico--subagent { color: var(--tool-subagent); }
.tool-ico--image { color: var(--tool-image); }
.tool-ico--config { color: var(--tool-config); }
.tool-ico--introspection { color: var(--tool-introspection); }
.tool-ico--mcp { color: var(--tool-mcp); }
.tool-ico--file,
.tool-ico--tool { color: var(--tool-generic); }
.copilot-tool-name {
font-weight: 400;
display: flex;
align-items: baseline;
gap: 0.4rem;
min-width: 0;
overflow: hidden;
}
/* The friendly, static tool title ("Edit File") — the primary label. */
.copilot-tool-title {
font-weight: 500;
white-space: nowrap;
flex-shrink: 0;
color: var(--msg-assistant-text);
}
/* The muted secondary detail (target path / command / primary arg). */
.copilot-tool-detail {
font-family: var(--bs-font-monospace);
font-size: 0.72rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
color: var(--placeholder-color);
}
.copilot-tool-name code {
@@ -583,3 +637,86 @@
}
.attach-chip-remove:hover { background: var(--sidebar-hover); color: #dc2626; }
/* ── Tool card "view details" (eye) ────────────────────────────────────────── */
.copilot-tool-eye {
display: inline-flex;
align-items: center;
padding: 0 0.25rem;
color: var(--placeholder-color);
border-radius: 0.25rem;
flex-shrink: 0;
}
.copilot-tool-eye:hover { color: var(--accent); background: var(--accent-soft); }
/* ── Tool-detail page (#tool_detail) ───────────────────────────────────────── */
.tool-detail-page {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
.tool-detail-body {
flex: 1;
overflow-y: auto;
padding: 1rem 1.25rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.tool-detail-section {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.tool-detail-label {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--placeholder-color);
}
.tool-detail-pre {
font-family: var(--bs-font-monospace);
font-size: 0.82rem;
white-space: pre-wrap;
word-break: break-word;
margin: 0;
padding: 0.7rem 0.9rem;
background: rgba(0, 0, 0, 0.04);
border: 1px solid var(--toolbar-border);
border-radius: var(--radius-sm);
overflow-x: auto;
}
.tool-detail-pre--error { color: #dc2626; }
@media (prefers-color-scheme: dark) {
.tool-detail-pre { background: rgba(255, 255, 255, 0.04); }
}
.tool-detail-muted { color: var(--placeholder-color); font-size: 0.85rem; }
.tool-detail-path {
align-self: flex-start;
font-family: var(--bs-font-monospace);
font-size: 0.82rem;
color: var(--accent);
background: var(--accent-soft);
border: none;
border-radius: var(--radius-sm);
padding: 0.3rem 0.6rem;
cursor: pointer;
}
.tool-detail-path:hover { text-decoration: underline; }
/* The detail page's diff fills the panel rather than the compact card height. */
.tool-detail-page .copilot-diff {
max-height: none;
font-size: 0.82rem;
}
web/css/variables.css
+26
View File
@@ -12,6 +12,20 @@
--accent-soft: rgba(217, 93, 78, 0.12);
--accent-ring: rgba(217, 93, 78, 0.28);
/* Tool-card accents — one hue per tool category (semantic icon key).
Light mode; the dark block below lifts them for contrast. */
--tool-edit: #2563eb;
--tool-read: #0891b2;
--tool-list: #7c3aed;
--tool-search: #9333ea;
--tool-shell: #475569;
--tool-subagent: #0d9488;
--tool-image: #db2777;
--tool-config: #ca8a04;
--tool-introspection: #6b7280;
--tool-mcp: var(--accent);
--tool-generic: #8a7a66;
/* Radius scale — friendly, generous */
--radius-sm: 8px;
--radius-md: 12px;
@@ -66,6 +80,18 @@
--accent-soft: rgba(232, 131, 111, 0.16);
--accent-ring: rgba(232, 131, 111, 0.35);
/* Tool-card accents — lifted for dark backgrounds */
--tool-edit: #60a5fa;
--tool-read: #22d3ee;
--tool-list: #a78bfa;
--tool-search: #c084fc;
--tool-shell: #94a3b8;
--tool-subagent: #2dd4bf;
--tool-image: #f472b6;
--tool-config: #eab308;
--tool-introspection: #9ca3af;
--tool-generic: #b3a28c;
--sidebar-bg: #241f1a;
--sidebar-hover: rgba(236, 225, 211, 0.06);
--sidebar-active-bg: rgba(232, 131, 111, 0.16);