feat(web): 工作台 - 优化 Agent 工作区与技能库

web/src/components/canvas/canvas-cloud-agent.css

@@ -384,8 +384,8 @@
 }
 
 .agent-conversation {
-    padding: var(--space-3) var(--space-5) var(--space-5);
-    scroll-padding-block: var(--space-5);
+    padding: 10px var(--space-4) var(--space-4);
+    scroll-padding-block: var(--space-4);
 }
 
 .agent-conversation-messages {
@@ -396,12 +396,56 @@
 }
 
 .agent-conversation-messages > * + * {
-    margin-top: var(--space-4);
+    margin-top: 9px;
 }
 
 /* 状态行的图标只是语义标记，不应把正文向右推成另一条内容轴。 */
 .agent-status-message {
     min-width: 0;
+    line-height: 1.45;
+}
+
+.agent-status-message--system {
+    opacity: 0.78;
+}
+
+.agent-status-message--warning {
+    margin-inline: -4px;
+    border: 1px solid color-mix(in srgb, #f59e0b 26%, transparent);
+    border-radius: 10px;
+    background: color-mix(in srgb, #fef3c7 72%, transparent);
+    padding: 8px 10px;
+}
+
+.agent-status-message--error {
+    margin-inline: -4px;
+    border: 1px solid color-mix(in srgb, #ef4444 16%, transparent);
+    border-radius: 10px;
+    background: color-mix(in srgb, #ef4444 5%, transparent);
+    padding: 8px 10px;
+}
+
+.agent-status-message--warning .agent-timeline-marker,
+.agent-status-message--error .agent-timeline-marker {
+    align-self: flex-start;
+    padding-top: 1px;
+}
+
+.agent-error-title {
+    font-size: 13px;
+    line-height: 18px;
+}
+
+.agent-error-detail {
+    margin-top: 2px;
+    font-size: 12px;
+    line-height: 17px;
+}
+
+.agent-error-meta {
+    margin-top: 3px;
+    opacity: 0.72;
+    line-height: 16px;
 }
 
 .agent-message-user {
@@ -409,6 +453,15 @@
     background: var(--agent-surface-hover, color-mix(in srgb, var(--foreground) 7%, transparent));
 }
 
+.agent-message-body .ai-message-markdown-paragraph {
+    margin: 0.32em 0;
+}
+
+.agent-message-body .ai-message-markdown-list {
+    margin-top: 0.35em;
+    margin-bottom: 0.35em;
+}
+
 .agent-welcome {
     display: flex;
     min-height: 100%;
@@ -788,14 +841,94 @@
     line-height: 1;
 }
 
+.agent-message-node-link {
+    display: inline-flex;
+    max-width: min(100%, 300px);
+    align-items: center;
+    gap: 7px;
+    margin: 1px 3px;
+    border: 1px solid color-mix(in srgb, var(--workspace-accent) 28%, transparent);
+    border-radius: 9px;
+    background: color-mix(in srgb, var(--workspace-accent) 9%, transparent);
+    padding: 3px 9px 3px 4px;
+    color: var(--foreground);
+    line-height: 1.15;
+    text-align: left;
+    text-decoration: none;
+    vertical-align: middle;
+    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
+}
+
+.agent-message-node-link:hover {
+    border-color: color-mix(in srgb, var(--workspace-accent) 50%, transparent);
+    background: color-mix(in srgb, var(--workspace-accent) 16%, transparent);
+    color: var(--foreground);
+    text-decoration: none;
+    transform: translateY(-1px);
+}
+
+.agent-message-node-link:focus-visible {
+    outline: 2px solid var(--agent-focus-ring, var(--workspace-accent));
+    outline-offset: 2px;
+}
+
+.agent-message-node-link-preview,
+.agent-message-node-link-icon {
+    display: grid;
+    width: 25px;
+    height: 25px;
+    flex: 0 0 auto;
+    place-items: center;
+    overflow: hidden;
+    border-radius: 6px;
+    background: color-mix(in srgb, var(--workspace-accent) 16%, transparent);
+    color: var(--workspace-accent);
+}
+
+.agent-message-node-link-preview {
+    object-fit: cover;
+}
+
+.agent-message-node-link-copy {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    gap: 1px;
+}
+
+.agent-message-node-link-kind,
+.agent-message-node-link-title {
+    display: block;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.agent-message-node-link-kind {
+    color: color-mix(in srgb, var(--foreground) 58%, transparent);
+    font-size: 10px;
+    font-weight: 500;
+}
+
+.agent-message-node-link-title {
+    color: var(--foreground);
+    font-size: 12px;
+    font-weight: 600;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .agent-message-node-link { transition: none; }
+}
+
 .agent-tool-row {
     /* 日志是事件流，不是连续卡片；只用间距和状态图标建立层次。 */
     --agent-tool-accent: color-mix(in srgb, var(--foreground) 62%, transparent);
-    min-height: 36px;
+    min-height: 28px;
     border: 0;
     border-radius: 8px;
     background: transparent;
-    padding: 5px 0;
+    padding: 2px 0;
     transition: transform 160ms ease;
 }
 
@@ -831,11 +964,11 @@
 
 /* 没有节点明细的“读取信息 / 操作画布”只保留时间线语义，不再撑成一张空卡片。 */
 .agent-tool-row--plain {
-    min-height: 28px;
+    min-height: 24px;
     border-color: transparent;
     border-radius: 9px;
     background: transparent;
-    padding: 3px 0;
+    padding: 1px 0;
 }
 
 .agent-tool-row--read {
@@ -861,10 +994,10 @@
 .agent-tool-header {
     display: flex;
     min-width: 0;
-    align-items: center;
+    align-items: baseline;
     flex-wrap: wrap;
-    gap: 6px;
-    line-height: 18px;
+    gap: 4px 6px;
+    line-height: 17px;
 }
 
 .agent-tool-category {
@@ -978,19 +1111,37 @@
     --agent-tool-accent: var(--agent-accent, var(--foreground));
 }
 
+.agent-operation-feed[data-agent-category="read"] {
+    --agent-tool-accent: #2563eb;
+}
+
+.agent-operation-feed[data-agent-category="create"] {
+    --agent-tool-accent: #d97706;
+}
+
+.agent-operation-feed[data-agent-category="operate"] {
+    --agent-tool-accent: #0f766e;
+}
+
+.agent-operation-feed[data-agent-category="other"] {
+    --agent-tool-accent: #64748b;
+}
+
 .agent-operation-toggle {
     display: flex;
+    width: 100%;
     min-width: 0;
     max-width: 100%;
     align-items: center;
-    gap: 6px;
+    justify-content: flex-start;
+    gap: 5px;
     border: 0;
-    border-radius: 9px;
+    border-radius: 8px;
     background: transparent;
-    padding: 5px 0;
+    padding: 3px 0;
     color: color-mix(in srgb, var(--agent-ink, currentColor) 72%, transparent);
     font-size: var(--fs-caption);
-    line-height: 18px;
+    line-height: 17px;
     text-align: left;
     cursor: pointer;
     transition:
@@ -1004,9 +1155,27 @@
     padding-inline: 0;
 }
 
+.agent-operation-icon {
+    display: inline-flex;
+    width: 16px;
+    height: 18px;
+    flex: 0 0 16px;
+    align-items: center;
+    justify-content: center;
+    color: var(--agent-tool-accent);
+}
+
+.agent-operation-icon svg {
+    width: 14px;
+    height: 14px;
+}
+
+.agent-operation-feed.is-failed .agent-operation-icon {
+    color: #dc2626;
+}
+
 .agent-operation-kind {
     flex: 0 0 auto;
-    color: color-mix(in srgb, var(--agent-tool-accent) 86%, var(--foreground));
     font-size: var(--fs-caption);
     font-weight: 600;
     white-space: nowrap;
@@ -1087,7 +1256,13 @@
 }
 
 .agent-operation-list > * + * {
-    margin-top: var(--space-1);
+    margin-top: 3px;
+}
+
+.agent-operation-feed.is-failed .agent-operation-toggle {
+    border-radius: 8px;
+    background: color-mix(in srgb, #dc2626 5%, transparent);
+    padding-inline: 6px;
 }
 
 /*
@@ -1344,11 +1519,26 @@
     justify-content: center;
 }
 
+.agent-message-icon {
+    display: inline-flex;
+    width: 20px;
+    height: 24px;
+    flex: 0 0 20px;
+    align-items: flex-start;
+    justify-content: center;
+    padding-top: 3px;
+    color: var(--agent-accent, var(--foreground));
+}
+
+.agent-message-icon--user {
+    opacity: 0.76;
+}
+
 .agent-reasoning-card {
     min-width: 0;
     overflow: hidden;
     border: 0;
-    border-radius: 10px;
+    border-radius: 0;
     background: transparent;
     box-shadow: none;
     transition: background-color 160ms ease;
@@ -1391,6 +1581,10 @@
     color: color-mix(in srgb, var(--agent-reasoning-accent) 82%, var(--foreground));
 }
 
+.agent-reasoning-icon.is-live {
+    animation: agent-reasoning-icon-pulse 1.8s ease-in-out infinite;
+}
+
 .agent-reasoning-copy {
     display: flex;
     min-width: 0;
@@ -1474,7 +1668,7 @@
     gap: 0;
     overflow: auto;
     border-top: 0;
-    padding: 4px 0 10px;
+    padding: 2px 0 7px;
     scrollbar-gutter: stable;
 }
 
@@ -1487,6 +1681,11 @@
     overflow-wrap: anywhere;
 }
 
+@keyframes agent-reasoning-icon-pulse {
+    0%, 100% { opacity: .55; transform: rotate(-8deg) scale(.9); }
+    50% { opacity: 1; transform: rotate(8deg) scale(1.08); }
+}
+
 @keyframes agent-reasoning-pulse {
     0%, 100% { opacity: .55; transform: scale(.82); }
     50% { opacity: 1; transform: scale(1); }
@@ -1496,7 +1695,8 @@
     .agent-reasoning-card,
     .agent-reasoning-chevron { transition: none; }
 
-    .agent-reasoning-status-dot { animation: none; }
+    .agent-reasoning-status-dot,
+    .agent-reasoning-icon.is-live { animation: none; }
 }
 
 .agent-working-indicator {
@@ -1898,6 +2098,25 @@
     overscroll-behavior: contain;
 }
 
+.canvas-agent-skill-library-category-group {
+    display: grid;
+    gap: var(--space-1);
+}
+
+.canvas-agent-skill-library-category-group + .canvas-agent-skill-library-category-group {
+    margin-top: var(--space-4);
+    border-top: 1px solid var(--border);
+    padding-top: var(--space-4);
+}
+
+.canvas-agent-skill-library-category-heading {
+    padding: 0 var(--space-3) var(--space-1);
+    color: var(--muted-foreground);
+    font-size: var(--fs-caption);
+    font-weight: 650;
+    letter-spacing: 0.04em;
+}
+
 .canvas-agent-skill-library-tab {
     display: flex;
     min-height: var(--space-12);
@@ -2099,7 +2318,25 @@
     min-width: 0;
     flex-direction: column;
     gap: var(--space-2);
-    padding-top: var(--space-3);
+    padding: var(--space-4) var(--space-2) var(--space-2);
+}
+
+.canvas-agent-skill-card-body.is-text-only {
+    min-height: 204px;
+    border-radius: var(--r-2xl);
+    background: var(--library-surface);
+    padding: var(--space-5);
+}
+
+.canvas-agent-skill-card-category.is-inline {
+    position: static;
+    display: inline-flex;
+    width: fit-content;
+    max-width: 100%;
+    align-self: flex-start;
+    background: var(--library-surface-hover);
+    color: var(--muted-foreground);
+    backdrop-filter: none;
 }
 
 .canvas-agent-skill-card-title-row {
@@ -2111,6 +2348,7 @@
 }
 
 .canvas-agent-skill-card-title-row h3 {
+    display: -webkit-box;
     min-width: 0;
     overflow: hidden;
     margin: 0;
@@ -2119,7 +2357,9 @@
     font-weight: 650;
     line-height: 1.5;
     text-overflow: ellipsis;
-    white-space: nowrap;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow-wrap: anywhere;
 }
 
 .canvas-agent-skill-card-body > p {
@@ -2131,10 +2371,14 @@
     font-size: var(--fs-body);
     line-height: 1.65;
     -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
+    -webkit-line-clamp: 3;
     overflow-wrap: anywhere;
 }
 
+.canvas-agent-skill-card-body.is-text-only > p {
+    -webkit-line-clamp: 5;
+}
+
 .canvas-agent-skill-card-meta {
     display: flex;
     min-width: 0;
@@ -2250,11 +2494,32 @@
 
     .canvas-agent-skill-library-categories {
         flex-direction: row;
-        gap: var(--space-1);
+        gap: var(--space-3);
         overflow-x: auto;
         overscroll-behavior-x: contain;
     }
 
+    .canvas-agent-skill-library-category-group {
+        display: flex;
+        flex: 0 0 auto;
+        align-items: center;
+        gap: var(--space-1);
+    }
+
+    .canvas-agent-skill-library-category-group + .canvas-agent-skill-library-category-group {
+        margin-top: 0;
+        border-top: 0;
+        border-left: 1px solid var(--border);
+        padding-top: 0;
+        padding-left: var(--space-3);
+    }
+
+    .canvas-agent-skill-library-category-heading {
+        flex: 0 0 auto;
+        padding: 0 var(--space-2);
+        font-size: var(--fs-caption);
+    }
+
     .canvas-agent-skill-library-tab {
         min-height: var(--space-10);
         gap: var(--space-2);