@shendeguize/dsh-agent-sidecar 0.1.0 → 0.2.0

package/src/client/detail/detail.module.css

@@ -1,9 +1,4 @@
-/*
- * Session-detail styles (design §5.1 view 2 / §5.3): every color rides a
- * --dsw-alias-* design token with a neutral fallback — no theme colors are
- * hardcoded as the only value. The gap marker uses the warn palette,
- * deliberately restrained (a thin honesty note, not an alarm).
- */
+/* Session-detail layout over the shared Agent Sidecar / DSH token contract. */
 
 .root {
   display: flex;
@@ -13,8 +8,8 @@
   min-height: 420px;
   padding: 16px 20px;
   box-sizing: border-box;
-  color: var(--dsw-alias-label-primary, #1f2328);
-  background: var(--dsw-alias-bg-base, transparent);
+  color: var(--agsc-fg);
+  background: var(--agsc-bg);
 }
 
 /* -------------------------------------------------------------- header */
@@ -32,48 +27,21 @@
   flex-wrap: wrap;
 }
 
-.closeButton {
-  font-size: 12px;
-  font-family: inherit;
-  color: var(--dsw-alias-label-secondary, #57606a);
-  background: transparent;
-  border: 1px solid var(--dsw-alias-border-l1, rgba(0, 0, 0, 0.08));
-  border-radius: 6px;
-  padding: 2px 10px;
-  cursor: pointer;
-}
-
-.closeButton:hover {
-  color: var(--dsw-alias-label-primary, #1f2328);
-  border-color: var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.12));
-  background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.04));
-}
-
 .agent {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   font-size: 13px;
   font-weight: 650;
-  color: var(--dsw-alias-label-primary, #1f2328);
+  color: var(--dsw-alias-label-primary);
 }
 
 .agentGlyph {
   flex: none;
-  color: var(--dsw-alias-brand-primary, #4d6bfe);
+  color: var(--dsw-alias-brand-primary);
 }
 
 .badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  font-size: 12px;
-  line-height: 20px;
-  padding: 0 8px;
-  border-radius: 999px;
-  border: 1px solid var(--dsw-alias-border-l1, rgba(0, 0, 0, 0.08));
-  background: var(--dsw-alias-bg-layer-1, rgba(0, 0, 0, 0.03));
-  color: var(--dsw-alias-label-secondary, #57606a);
   white-space: nowrap;
 }
 
@@ -82,59 +50,37 @@
   height: 8px;
   border-radius: 50%;
   flex: none;
-  background: var(--dsw-alias-label-tertiary, #6e7781);
+  background: var(--agsc-fg-dimmed);
 }
 
 .dot[data-tone='success'] {
-  background: var(--dsw-alias-state-success-primary, #1a7f37);
+  background: var(--agsc-ok);
 }
 
 .dot[data-tone='warn'] {
-  background: var(--dsw-alias-state-warn-primary, #9a6700);
+  background: var(--agsc-warn);
 }
 
 .dot[data-tone='danger'] {
-  background: var(--dsw-alias-state-error-primary, #cf222e);
+  background: var(--agsc-err);
 }
 
 .dot[data-tone='neutral'] {
-  background: var(--dsw-alias-label-tertiary, #6e7781);
+  background: var(--agsc-fg-secondary);
 }
 
 .dot[data-tone='muted'] {
-  background: var(--dsw-alias-label-dimmed, #8c959f);
+  background: var(--agsc-fg-dimmed);
 }
 
 .spacer {
   flex: 1;
 }
 
-.listenButton {
-  font-size: 12px;
-  font-family: inherit;
-  color: var(--dsw-alias-label-secondary, #57606a);
-  background: transparent;
-  border: 1px solid var(--dsw-alias-border-l1, rgba(0, 0, 0, 0.08));
-  border-radius: 999px;
-  padding: 2px 12px;
-  cursor: pointer;
-}
-
-.listenButton:hover {
-  color: var(--dsw-alias-label-primary, #1f2328);
-  border-color: var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.12));
-}
-
-.listenButton[data-active] {
-  color: var(--dsw-alias-brand-primary, #4d6bfe);
-  border-color: var(--dsw-alias-brand-primary, #4d6bfe);
-  background: var(--dsw-alias-brand-tertiary, rgba(77, 107, 254, 0.08));
-}
-
 .title {
   font-size: 15px;
   font-weight: 600;
-  color: var(--dsw-alias-label-primary, #1f2328);
+  color: var(--dsw-alias-label-primary);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -149,16 +95,17 @@
 
 .project {
   font-size: 12px;
-  color: var(--dsw-alias-label-secondary, #57606a);
+  color: var(--dsw-alias-label-secondary);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+/* Click-to-copy session id (UX-17): plain-text look, button semantics. */
 .sessionId {
   font-size: 11px;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  color: var(--dsw-alias-label-tertiary, #6e7781);
+  font-family: var(--ds-font-family-code);
+  color: var(--dsw-alias-label-tertiary);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -166,6 +113,21 @@
   max-width: 40%;
 }
 
+.sessionId:hover {
+  color: var(--dsw-alias-label-primary);
+  text-decoration: underline;
+}
+
+.copiedBubble {
+  flex: none;
+  color: var(--agsc-ok);
+}
+
+.copiedBubble > span,
+.sourceBadge > span {
+  color: inherit;
+}
+
 .metaRow {
   display: flex;
   align-items: center;
@@ -175,7 +137,7 @@
 
 .disclaimer {
   font-size: 11px;
-  color: var(--dsw-alias-label-caption, var(--dsw-alias-label-tertiary, #6e7781));
+  color: var(--dsw-alias-label-caption);
 }
 
 .sourceList {
@@ -185,23 +147,15 @@
 }
 
 .sourceBadge {
-  font-size: 11px;
-  line-height: 16px;
-  padding: 0 6px;
-  border-radius: 999px;
-  border: 1px solid var(--dsw-alias-border-l1, rgba(0, 0, 0, 0.08));
-  color: var(--dsw-alias-label-secondary, #57606a);
-  background: var(--dsw-alias-bg-layer-1, rgba(0, 0, 0, 0.03));
   white-space: nowrap;
 }
 
 .sourceBadge[data-tone='success'] {
-  color: var(--dsw-alias-state-success-primary, #1a7f37);
-  border-color: var(--dsw-alias-state-success-secondary, rgba(26, 127, 55, 0.24));
+  color: var(--agsc-ok);
 }
 
 .sourceBadge[data-tone='muted'] {
-  color: var(--dsw-alias-label-dimmed, #8c959f);
+  color: var(--agsc-fg-dimmed);
 }
 
 /* -------------------------------------------------------------- banner */
@@ -210,10 +164,10 @@
   font-size: 12px;
   line-height: 18px;
   padding: 6px 10px;
-  border-radius: 8px;
-  color: var(--dsw-alias-state-warn-label, var(--dsw-alias-state-warn-primary, #9a6700));
-  background: var(--dsw-alias-state-warn-tertiary, rgba(154, 103, 0, 0.08));
-  border: 1px solid var(--dsw-alias-state-warn-secondary, rgba(154, 103, 0, 0.24));
+  border-radius: var(--agsc-radius-control);
+  color: var(--agsc-warn);
+  background: var(--dsw-alias-state-warn-tertiary);
+  border: 1px solid var(--dsw-alias-state-warn-secondary);
 }
 
 /* --------------------------------------------- loading / empty / error */
@@ -233,52 +187,44 @@
 .bodyStateTitle {
   font-size: 14px;
   font-weight: 600;
-  color: var(--dsw-alias-label-primary, #1f2328);
+  color: var(--dsw-alias-label-primary);
 }
 
 .bodyState[data-kind='error'] .bodyStateTitle {
-  color: var(--dsw-alias-state-error-primary, #cf222e);
+  color: var(--agsc-err);
 }
 
 .bodyStateHint {
   font-size: 12px;
   max-width: 420px;
   line-height: 20px;
-  color: var(--dsw-alias-label-secondary, #57606a);
+  color: var(--dsw-alias-label-secondary);
 }
 
-/* --------------------------------------------------------------- pager */
+/* --------------------------------------- kind filter chips (UX-03) */
 
-.pager {
+.filterRow {
   display: flex;
-  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
 }
 
-.loadMoreButton {
-  font-size: 12px;
-  font-family: inherit;
-  color: var(--dsw-alias-label-secondary, #57606a);
-  background: transparent;
-  border: 1px solid var(--dsw-alias-border-l1, rgba(0, 0, 0, 0.08));
-  border-radius: 6px;
-  padding: 3px 14px;
-  cursor: pointer;
+.filterHiddenNote {
+  font-size: 11px;
+  color: var(--dsw-alias-label-tertiary);
 }
 
-.loadMoreButton:hover:enabled {
-  color: var(--dsw-alias-label-primary, #1f2328);
-  border-color: var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.12));
-  background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.04));
-}
+/* --------------------------------------------------------------- pager */
 
-.loadMoreButton:disabled {
-  cursor: default;
-  opacity: 0.6;
+.pager {
+  display: flex;
+  justify-content: center;
 }
 
 .pagerNote {
   font-size: 11px;
-  color: var(--dsw-alias-label-tertiary, #6e7781);
+  color: var(--dsw-alias-label-tertiary);
 }
 
 .hiddenNotice {
@@ -287,17 +233,7 @@
   justify-content: center;
   gap: 8px;
   font-size: 11px;
-  color: var(--dsw-alias-label-tertiary, #6e7781);
-}
-
-.showAllButton {
-  font-size: 11px;
-  font-family: inherit;
-  color: var(--dsw-alias-brand-primary, #4d6bfe);
-  background: transparent;
-  border: none;
-  padding: 0;
-  cursor: pointer;
+  color: var(--dsw-alias-label-tertiary);
 }
 
 /* ------------------------------------------------------------ timeline */
@@ -318,14 +254,37 @@
   flex-direction: column;
   gap: 4px;
   padding: 6px 10px;
-  border-radius: 8px;
-  border: 1px solid var(--dsw-alias-border-l1, rgba(0, 0, 0, 0.06));
-  background: var(--dsw-alias-bg-layer-1, rgba(0, 0, 0, 0.02));
+  border-radius: var(--agsc-radius-control);
+  border: 1px solid var(--agsc-border);
+  background: var(--agsc-bg-raised);
 }
 
 .event[data-new] {
-  border-color: var(--dsw-alias-brand-primary, #4d6bfe);
-  background: var(--dsw-alias-brand-tertiary, rgba(77, 107, 254, 0.06));
+  border-color: var(--agsc-accent);
+  /* brand tint from the real token (UX-15). */
+  background: color-mix(in srgb, var(--agsc-accent) 6%, transparent);
+}
+
+/* Aggregated streaming-chunk run (UX-03): quiet one-line stand-in. */
+.chunkRun {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 11px;
+  line-height: 16px;
+  padding: 4px 10px;
+  border-radius: var(--agsc-radius-control);
+  color: var(--dsw-alias-label-tertiary);
+  background: var(--agsc-bg-raised);
+  border: 1px dashed var(--agsc-border-strong);
+}
+
+.chunkRun[data-new] {
+  border-color: var(--agsc-accent);
+}
+
+.chunkRunLabel {
+  flex: none;
 }
 
 .eventHead {
@@ -338,22 +297,22 @@
 .eventGlyph {
   flex: none;
   font-size: 12px;
-  color: var(--dsw-alias-label-tertiary, #6e7781);
+  color: var(--dsw-alias-label-tertiary);
 }
 
 .event[data-kind='user'] .eventGlyph,
 .event[data-kind='assistant'] .eventGlyph {
-  color: var(--dsw-alias-brand-primary, #4d6bfe);
+  color: var(--dsw-alias-brand-primary);
 }
 
 .event[data-kind='error'] .eventGlyph {
-  color: var(--dsw-alias-state-error-primary, #cf222e);
+  color: var(--dsw-alias-state-error-primary);
 }
 
 .eventLabel {
   font-size: 12px;
   font-weight: 600;
-  color: var(--dsw-alias-label-primary, #1f2328);
+  color: var(--dsw-alias-label-primary);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -361,18 +320,13 @@
 
 .eventSeq {
   font-size: 10px;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  color: var(--dsw-alias-label-tertiary, #6e7781);
+  font-family: var(--ds-font-family-code);
+  color: var(--dsw-alias-label-tertiary);
   flex: none;
 }
 
 .eventNew {
-  font-size: 10px;
-  line-height: 14px;
-  padding: 0 5px;
-  border-radius: 999px;
-  color: var(--dsw-alias-brand-primary, #4d6bfe);
-  border: 1px solid var(--dsw-alias-brand-primary, #4d6bfe);
+  color: var(--agsc-accent);
   flex: none;
 }
 
@@ -382,37 +336,30 @@
 
 .eventTime {
   font-size: 11px;
-  color: var(--dsw-alias-label-caption, var(--dsw-alias-label-tertiary, #6e7781));
+  color: var(--dsw-alias-label-caption);
   flex: none;
 }
 
 .eventSummary {
   font-size: 12px;
   line-height: 18px;
-  color: var(--dsw-alias-label-secondary, #57606a);
+  color: var(--dsw-alias-label-secondary);
   overflow-wrap: anywhere;
 }
 
 .expandButton {
   align-self: flex-start;
-  font-size: 11px;
-  font-family: inherit;
-  color: var(--dsw-alias-brand-primary, #4d6bfe);
-  background: transparent;
-  border: none;
-  padding: 0;
-  cursor: pointer;
 }
 
 .eventBody {
   margin: 0;
   padding: 8px 10px;
-  border-radius: 6px;
+  border-radius: var(--agsc-radius-control);
   font-size: 11px;
   line-height: 16px;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  color: var(--dsw-alias-label-primary, #1f2328);
-  background: var(--dsw-alias-bg-layer-2, rgba(0, 0, 0, 0.04));
+  font-family: var(--ds-font-family-code);
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-bg-layer-2);
   white-space: pre-wrap;
   overflow-wrap: anywhere;
   max-height: 320px;
@@ -425,9 +372,9 @@
   font-size: 11px;
   line-height: 16px;
   padding: 4px 10px;
-  border-radius: 6px;
+  border-radius: var(--agsc-radius-control);
   text-align: center;
-  color: var(--dsw-alias-state-warn-label, var(--dsw-alias-state-warn-primary, #9a6700));
-  background: var(--dsw-alias-state-warn-tertiary, rgba(154, 103, 0, 0.06));
-  border: 1px dashed var(--dsw-alias-state-warn-secondary, rgba(154, 103, 0, 0.32));
+  color: var(--agsc-warn);
+  background: var(--dsw-alias-state-warn-tertiary);
+  border: 1px dashed var(--dsw-alias-state-warn-secondary);
 }