@shendeguize/dsh-agent-sidecar 0.1.1 → 0.2.0

package/src/client/board/board.module.css

@@ -1,9 +1,4 @@
-/*
- * Board styles (design §5.4): every color rides a --dsw-alias-* design
- * token with a neutral fallback — no theme colors are hardcoded as the
- * only value. Layout follows the dsh-project-kanban blueprint (flex top
- * bar, grouped sections, auto-fill card grid).
- */
+/* Board layout consumes the public Agent Sidecar theme contract. */
 
 .root {
   display: flex;
@@ -14,8 +9,8 @@
   padding: 16px 20px;
   box-sizing: border-box;
   overflow-y: auto;
-  color: var(--dsw-alias-label-primary, #1f2328);
-  background: var(--dsw-alias-bg-base, transparent);
+  color: var(--agsc-fg);
+  background: var(--agsc-bg);
 }
 
 /* ------------------------------------------------------------- top bar */
@@ -30,84 +25,35 @@
 .title {
   font-size: 15px;
   font-weight: 650;
-  color: var(--dsw-alias-label-primary, #1f2328);
+  color: var(--agsc-fg);
   margin-right: 2px;
 }
 
-.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;
-}
-
 .dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   flex: none;
-  background: var(--dsw-alias-label-tertiary, #6e7781);
-}
-
-.dot[data-tone='success'] {
-  background: var(--dsw-alias-state-success-primary, #1a7f37);
-}
-
-.dot[data-tone='warn'] {
-  background: var(--dsw-alias-state-warn-primary, #9a6700);
-}
-
-.dot[data-tone='danger'] {
-  background: var(--dsw-alias-state-error-primary, #cf222e);
+  background: var(--dsw-alias-label-tertiary);
 }
 
 .dot[data-tone='neutral'] {
-  background: var(--dsw-alias-label-tertiary, #6e7781);
+  background: var(--dsw-alias-label-tertiary);
 }
 
 .dot[data-tone='muted'] {
-  background: var(--dsw-alias-label-dimmed, #8c959f);
+  background: var(--agsc-fg-dimmed);
 }
 
 /* UX-01: clickable working/waiting count badges + the total counter. */
 
 .countBadge {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  font-size: 12px;
-  font-family: inherit;
-  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;
-  cursor: pointer;
-}
-
-.countBadge: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));
-}
-
-.countBadge[aria-pressed='true'] {
-  color: var(--dsw-alias-brand-primary, #4d6bfe);
-  border-color: var(--dsw-alias-brand-primary, #4d6bfe);
 }
 
 .countTotal {
   font-size: 12px;
-  color: var(--dsw-alias-label-secondary, #57606a);
+  color: var(--agsc-fg-secondary);
   white-space: nowrap;
 }
 
@@ -120,79 +66,52 @@
   align-items: center;
   gap: 5px;
   font-size: 12px;
-  color: var(--dsw-alias-label-secondary, #57606a);
+  color: var(--agsc-fg-secondary);
   white-space: nowrap;
 }
 
 .select {
+  height: 28px;
   font-size: 12px;
   font-family: inherit;
-  color: var(--dsw-alias-label-primary, #1f2328);
-  background: var(--dsw-alias-bg-layer-1, transparent);
-  border: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.12));
-  border-radius: 6px;
-  padding: 2px 6px;
+  color: var(--agsc-fg);
+  background: var(--agsc-bg-raised);
+  border: 1px solid var(--agsc-border-strong);
+  border-radius: 14px;
+  padding: 0 10px;
 }
 
 .checkbox {
-  accent-color: var(--dsw-alias-brand-primary, #4d6bfe);
+  accent-color: var(--agsc-accent);
   margin: 0;
 }
 
-.refresh {
-  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;
-}
-
-.refresh: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));
-}
-
-.refresh:disabled {
-  cursor: default;
-  opacity: 0.6;
-}
-
 /* -------------------------------------------------------------- banner */
 
 .banner {
   font-size: 12px;
   line-height: 18px;
   padding: 6px 10px;
-  border-radius: 8px;
-  border: 1px solid var(--dsw-alias-border-l1, rgba(0, 0, 0, 0.08));
+  border-radius: var(--agsc-radius-control);
+  border: 1px solid var(--agsc-border);
 }
 
 .banner[data-tone='warn'] {
-  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-color: var(--dsw-alias-state-warn-secondary, rgba(154, 103, 0, 0.24));
+  color: var(--agsc-warn);
+  background: var(--dsw-alias-state-warn-tertiary);
+  border-color: var(--dsw-alias-state-warn-secondary);
 }
 
 .banner[data-tone='danger'] {
-  color: var(--dsw-alias-state-error-primary, #cf222e);
-  background: var(--dsw-alias-state-error-secondary, rgba(207, 34, 46, 0.08));
-  border-color: var(--dsw-alias-state-error-secondary, rgba(207, 34, 46, 0.24));
+  color: var(--agsc-err);
+  background: var(--dsw-alias-state-error-secondary);
+  border-color: var(--dsw-alias-state-error-secondary);
 }
 
 .bannerDismiss {
   margin-left: 10px;
-  padding: 0;
-  border: none;
-  background: transparent;
-  font-size: 12px;
-  font-family: inherit;
   color: inherit;
   text-decoration: underline;
-  cursor: pointer;
 }
 
 /* -------------------------------------------------------- empty states */
@@ -212,14 +131,14 @@
 .emptyTitle {
   font-size: 14px;
   font-weight: 600;
-  color: var(--dsw-alias-label-primary, #1f2328);
+  color: var(--agsc-fg);
 }
 
 .emptyHint {
   font-size: 12px;
   max-width: 420px;
   line-height: 20px;
-  color: var(--dsw-alias-label-secondary, #57606a);
+  color: var(--agsc-fg-secondary);
 }
 
 /* -------------------------------------------------------- group blocks */
@@ -248,36 +167,23 @@
 .chevron {
   flex: none;
   font-size: 10px;
-  color: var(--dsw-alias-label-tertiary, #6e7781);
+  color: var(--agsc-fg-dimmed);
 }
 
 .groupAttention {
   flex: none;
   font-size: 11px;
-  color: var(--dsw-alias-state-warn-primary, #9a6700);
+  color: var(--agsc-warn);
 }
 
 .showMore {
   align-self: flex-start;
-  font-size: 12px;
-  font-family: inherit;
-  color: var(--dsw-alias-label-secondary, #57606a);
-  background: transparent;
-  border: 1px dashed var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.12));
-  border-radius: 6px;
-  padding: 2px 10px;
-  cursor: pointer;
-}
-
-.showMore:hover {
-  color: var(--dsw-alias-label-primary, #1f2328);
-  background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.04));
 }
 
 .groupName {
   font-size: 13px;
   font-weight: 600;
-  color: var(--dsw-alias-label-primary, #1f2328);
+  color: var(--agsc-fg);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -286,8 +192,8 @@
 .groupCount {
   font-size: 11px;
   flex: none;
-  color: var(--dsw-alias-label-secondary, #57606a);
-  background: var(--dsw-alias-bg-layer-2, rgba(0, 0, 0, 0.04));
+  color: var(--agsc-fg-secondary);
+  background: var(--dsw-alias-bg-layer-2);
   border-radius: 999px;
   padding: 0 8px;
   line-height: 18px;
@@ -305,24 +211,37 @@
   display: flex;
   flex-direction: column;
   gap: 6px;
-  text-align: left;
-  font-family: inherit;
   min-width: 0;
   padding: 10px 12px;
-  border-radius: 8px;
-  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.02));
-  cursor: pointer;
+  border-radius: var(--agsc-radius-card);
+  border: 1px solid var(--agsc-border-strong);
+  background: var(--agsc-bg-raised);
 }
 
 .card:hover {
-  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));
+  border-color: var(--dsw-alias-label-dimmed);
+  background: var(--dsw-alias-interactive-bg-hover);
 }
 
-.card:focus-visible {
-  outline: 2px solid var(--dsw-alias-brand-primary, #4d6bfe);
-  outline-offset: 1px;
+.cardOpen {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100%;
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--agsc-radius-control);
+  color: inherit;
+  background: none;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.cardOpen:focus-visible {
+  outline: 2px solid var(--agsc-accent);
+  outline-offset: 2px;
 }
 
 .cardHead {
@@ -343,54 +262,56 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: var(--dsw-alias-label-primary, #1f2328);
+  color: var(--agsc-fg);
 }
 
 .glyph {
   flex: none;
-  color: var(--dsw-alias-brand-primary, #4d6bfe);
+  color: var(--agsc-accent);
+}
+
+.statusPill {
+  max-width: 100%;
 }
 
 .attention {
   font-size: 11px;
-  color: var(--dsw-alias-state-warn-primary, #9a6700);
+  color: var(--agsc-warn);
 }
 
 .attention[data-kind='gap'] {
-  color: var(--dsw-alias-state-error-primary, #cf222e);
+  color: var(--agsc-err);
 }
 
 .cardTitle {
   font-size: 13px;
-  color: var(--dsw-alias-label-primary, #1f2328);
+  color: var(--agsc-fg);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .cardId {
+  align-self: flex-start;
+  max-width: 100%;
+  justify-content: flex-start;
   font-size: 11px;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  color: var(--dsw-alias-label-tertiary, #6e7781);
+  font-family: var(--agsc-font-mono);
+  color: var(--agsc-fg-secondary);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  cursor: copy;
-}
-
-.cardId:hover {
-  color: var(--dsw-alias-label-secondary, #57606a);
 }
 
 .copied {
   margin-left: 6px;
   font-family: inherit;
-  color: var(--dsw-alias-state-success-primary, #1a7f37);
+  color: var(--agsc-ok);
 }
 
 .cardEvent {
   font-size: 12px;
-  color: var(--dsw-alias-label-secondary, #57606a);
+  color: var(--agsc-fg-secondary);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -398,5 +319,5 @@
 
 .cardTime {
   font-size: 11px;
-  color: var(--dsw-alias-label-caption, var(--dsw-alias-label-tertiary, #6e7781));
+  color: var(--agsc-fg-secondary);
 }

package/src/client/board/project-view-logic.ts

@@ -13,13 +13,10 @@
  * and the group-level `lastActivityAt`. Only the fields this view renders
  * are mirrored; extra wire fields are structurally ignored.
  *
- * Reuse contract (T2.2, read-only): tone/glyph/relative-time/label tools
- * are imported from `./logic.ts` without touching its exports, so both
- * board views speak the same visual language. Strings NEW to this view
- * live in the module-local {@link PROJECT_VIEW_STRINGS} table (S7 unifies
- * locales later); strings emitted by reused board tools (status labels,
- * relative time, the unknown-project label) intentionally stay with the
- * board table so the two views can never drift apart.
+ * Reuse contract (T2.2): tone/glyph/relative-time/label tools are imported
+ * from `./logic.ts`, so both board views speak the same visual language.
+ * Project-only copy is exposed through the dynamic
+ * {@link PROJECT_VIEW_STRINGS} locale facade.
  *
  * @module
  */
@@ -35,39 +32,29 @@ import {
   statusRank,
   type StatusBadgeVM,
 } from './logic.ts'
+import { createLocaleView } from '../locales/view.ts'
 
 // ---------------------------------------------------------------------------
-// Module-local strings (project-view-only vocabulary; Chinese primary).
+// Project-view-only locale facade.
 // ---------------------------------------------------------------------------
 
-export const PROJECT_VIEW_STRINGS = {
-  /** View heading. */
-  title: '项目关联',
-  /** Header count summary. */
-  summary: '{projects} 个项目 · {sessions} 个会话',
-  /** Cross-agent badge, shown when a project hosts 2+ agent kinds. */
-  crossAgent: '{n} 种 agent',
-  /** Group header session count. */
-  sessionCount: '{n} 个会话',
-  /** Group header recency line. */
-  lastActive: '最近活跃 {time}',
-  /** Marker on sessions live in this dsh process (UnifiedSession.live). */
-  liveChip: '实时',
-  /** Untitled-session fallback. */
-  untitled: '(无标题)',
-  /** Lane truncation fold (UX-20; mirrors the board's group fold). */
-  showAllSessions: '展开全部 {n} 个会话',
-  showLessSessions: '只看前 {n} 个',
-  /** Empty state (no groups at all). */
+export const PROJECT_VIEW_STRINGS = createLocaleView({
+  title: 'project.title',
+  summary: 'project.summary',
+  crossAgent: 'project.crossAgent',
+  sessionCount: 'project.sessionCount',
+  lastActive: 'project.lastActive',
+  liveChip: 'project.liveChip',
+  untitled: 'project.untitled',
+  showAllSessions: 'project.showAllSessions',
+  showLessSessions: 'project.showLessSessions',
   empty: {
-    title: '暂无项目关联',
-    hint: '时间窗内没有跨 agent 的项目活动;agent 在某个项目目录下开始工作后会出现在这里。',
+    title: 'project.empty.title',
+    hint: 'project.empty.hint',
   },
-  /** Loading placeholder (first fetch, nothing to show yet). */
-  loading: '正在加载项目关联…',
-  /** Error banner prefix; the raw error detail is appended by the view. */
-  errorTitle: '项目关联加载失败',
-} as const
+  loading: 'project.loading',
+  errorTitle: 'project.errorTitle',
+} as const)
 
 export type ProjectViewStrings = typeof PROJECT_VIEW_STRINGS