@joekytc/dsh-swarm 0.1.0

package/client/kanban.css

@@ -0,0 +1,653 @@
+/* T32：卡片/连接线等局部过渡保持 120-180ms；prefers-reduced-motion 全局关闭 */
+.dsh-kb-tab {
+  /* DSH 设计令牌（浅/深色随 body[data-ds-dark-theme] 自动切换）——禁止硬编码颜色 */
+  --dsh-kb-surface: var(--dsw-alias-bg-layer-1);
+  --dsh-kb-surface-elev: var(--dsw-alias-bg-layer-3);
+  --dsh-kb-text-primary: var(--dsw-alias-label-primary);
+  --dsh-kb-text-secondary: var(--dsw-alias-label-secondary);
+  --dsh-kb-text-tertiary: var(--dsw-alias-label-tertiary);
+  --dsh-kb-border: var(--dsw-alias-border-l2);
+  --dsh-kb-hover: var(--dsw-alias-interactive-bg-hover);
+  --dsh-kb-mask: var(--dsw-alias-bg-mask-3);
+  --dsh-kb-input: var(--dsw-specific-input-major);
+  --dsh-kb-inline-code: var(--dsw-alias-markdown-inline-code);
+  /* 大圆角契约（对齐 DSH 卡片 16px），后续 UI 一律复用 */
+  --dsh-kb-radius-lg: 16px;
+  --dsh-kb-radius-md: 10px;
+  --dsh-kb-radius-sm: 8px;
+  /* 状态色 → DSH 语义令牌 */
+  --dsh-kb-complete: var(--dsw-alias-state-success-primary);
+  --dsh-kb-active: var(--dsw-alias-state-business-primary);
+  --dsh-kb-blocked: var(--dsw-alias-state-error-primary);
+  --dsh-kb-pending: currentColor;
+  /* 角色色：DSH 有等价令牌则复用；p/pt/dt 无 DSH 等价色，保留原值 */
+  --dsh-kb-v: var(--dsw-alias-state-business-primary);
+  --dsh-kb-p: #a855f7;
+  --dsh-kb-w: var(--dsw-alias-state-success-primary);
+  --dsh-kb-d: var(--dsw-alias-state-warn-primary);
+  --dsh-kb-pt: #6366f1; /* 计划评审：靛/浅蓝 */
+  --dsh-kb-dt: #ec4899; /* 实现评审：玫红 */
+  height: 100%;
+  width: 100%;
+  min-width: 715px; /* 看板最小宽度 */
+  max-width: 780px; /* 看板最大宽度 */
+  margin-inline: auto;
+  display: flex;
+  flex-direction: column;
+  color: inherit;
+  background: var(--dsw-alias-bg-base);
+  pointer-events: auto;
+  font-size: 13px;
+  line-height: 1.45;
+  overflow: hidden;
+}
+
+.dsh-kb-banner {
+  flex: 0 0 auto;
+  padding: 6px 12px;
+  font-size: 12px;
+  border-bottom: 1px solid var(--dsh-kb-border);
+}
+.dsh-kb-banner--reconnecting,
+.dsh-kb-banner--loading {
+  color: var(--dsh-kb-active);
+}
+.dsh-kb-banner--error {
+  color: var(--dsh-kb-blocked);
+}
+
+.dsh-kb-tab-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  padding: 8px;
+}
+
+.dsh-kb-loading {
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: currentColor;
+  opacity: 0.7;
+}
+
+.dsh-kb-toolbar {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  padding-bottom: 8px;
+}
+.dsh-kb-toolbar input {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 6px 10px;
+  border: 1px solid var(--dsh-kb-border);
+  border-radius: var(--dsh-kb-radius-md);
+  background: var(--dsh-kb-input);
+  color: var(--dsh-kb-text-primary);
+}
+
+.dsh-kb-rail {
+  display: flex;
+  flex-direction: column;
+}
+/* 状态筛选 chip 组：执行中/阻塞/失败/已完成（多选并集；空=默认视图） */
+.dsh-kb-filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 0 0 8px;
+}
+.dsh-kb-filter {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 10px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 999px;
+  background: transparent;
+  color: currentColor;
+  font: inherit;
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
+}
+.dsh-kb-filter:hover {
+  background: var(--dsh-kb-hover);
+}
+.dsh-kb-filter--active {
+  border-color: var(--dsh-kb-active);
+  color: var(--dsh-kb-active);
+  background: color-mix(in srgb, var(--dsh-kb-active) 10%, transparent);
+}
+
+.dsh-kb-chain {
+  margin-bottom: 10px;
+}
+.dsh-kb-chain__title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 6px 8px;
+  border: 0;
+  border-radius: var(--dsh-kb-radius-sm);
+  background: transparent;
+  color: var(--dsh-kb-text-primary);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 150ms ease;
+}
+.dsh-kb-chain__title:hover {
+  background: var(--dsh-kb-hover);
+}
+/* 每条链路前的折叠箭头（与 DSH 折叠交互一致：细 chevron，展开时旋转，150ms 过渡） */
+.dsh-kb-chain__chevron {
+  flex: 0 0 auto;
+  width: 7px;
+  height: 7px;
+  border-top: 1.5px solid currentColor;
+  border-right: 1.5px solid currentColor;
+  transform: rotate(45deg);
+  opacity: 0.7;
+  transition: transform 150ms ease;
+}
+.dsh-kb-chain__title[aria-expanded='true'] .dsh-kb-chain__chevron {
+  transform: rotate(135deg);
+}
+.dsh-kb-chain__name {
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dsh-kb-chain__meta {
+  flex: 0 0 auto;
+  white-space: nowrap;
+  opacity: 0.7;
+}
+.dsh-kb-chain__warning {
+  padding: 4px 8px;
+  margin: 2px 0 6px;
+  border-left: 3px solid var(--dsh-kb-blocked);
+  color: var(--dsh-kb-blocked);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* D23：链完成验收核对警告行（completed 链未确认前阻塞最终汇报） */
+.dsh-kb-chain__audit {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  white-space: normal;
+}
+.dsh-kb-chain__audit span {
+  flex: 1 1 auto;
+  overflow: hidden;
+}
+.dsh-kb-audit-confirm {
+  flex: 0 0 auto;
+  border: 1px solid var(--dsh-kb-blocked);
+  border-radius: var(--dsh-kb-radius-sm);
+  background: transparent;
+  color: var(--dsh-kb-blocked);
+  padding: 2px 10px;
+  cursor: pointer;
+  font: inherit;
+  transition: background-color 150ms ease, color 150ms ease;
+}
+.dsh-kb-audit-confirm:hover {
+  background: var(--dsh-kb-blocked);
+  color: #fff;
+}
+
+.dsh-kb-nodes {
+  list-style: none;
+  margin: 0;
+  padding: 0 0 0 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+.dsh-kb-node {
+  position: relative;
+  padding-left: 12px;
+}
+.dsh-kb-node::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: var(--dsh-kb-pending);
+  transition: background-color 150ms ease;
+}
+.dsh-kb-node--complete::before { background: var(--dsh-kb-complete); }
+.dsh-kb-node--active::before { background: var(--dsh-kb-active); }
+.dsh-kb-node--pending::before {
+  background: repeating-linear-gradient(to bottom, currentColor 0 3px, transparent 3px 6px);
+}
+.dsh-kb-node--blocked::before {
+  background: repeating-linear-gradient(to bottom, var(--dsh-kb-blocked) 0 4px, transparent 4px 8px);
+}
+
+.dsh-kb-task {
+  display: grid;
+  grid-template-columns: 22px 1fr auto;
+  grid-template-rows: auto auto;
+  gap: 2px 8px;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 6px 8px;
+  margin: 4px 0;
+  border: 1px solid transparent;
+  border-radius: var(--dsh-kb-radius-lg);
+  background: transparent;
+  color: var(--dsh-kb-text-primary);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: border-color 150ms ease, background-color 150ms ease, opacity 150ms ease;
+}
+.dsh-kb-task:hover {
+  background: var(--dsh-kb-hover);
+}
+.dsh-kb-task[data-selected],
+.dsh-kb-task--active {
+  border-color: var(--dsh-kb-active);
+}
+/* T32：完成任务保留在轨道但视觉降权；状态色不变、不整卡染色 */
+.dsh-kb-task--complete {
+  opacity: 0.72;
+}
+.dsh-kb-task__title {
+  grid-column: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dsh-kb-task__status {
+  grid-column: 3;
+  color: currentColor;
+  opacity: 0.75;
+}
+.dsh-kb-task__meta {
+  grid-column: 2 / 4;
+  opacity: 0.6;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dsh-kb-task__warn {
+  grid-column: 2 / 4;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--dsh-kb-blocked);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dsh-kb-task__warn svg {
+  flex: 0 0 auto;
+}
+.dsh-kb-task__warn span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dsh-kb-task--complete .dsh-kb-task__status { color: var(--dsh-kb-complete); }
+.dsh-kb-task--blocked .dsh-kb-task__status { color: var(--dsh-kb-blocked); }
+/* D17：选中任务所在链路的上游/当前/下游路径卡高亮；不改变连接线语义，选中卡保持强边框 */
+.dsh-kb-task--related:not(.dsh-kb-task--active) {
+  border-color: color-mix(in srgb, var(--dsh-kb-active) 35%, transparent);
+  background: color-mix(in srgb, var(--dsh-kb-active) 6%, transparent);
+}
+
+.dsh-kb-empty {
+  padding: 24px 12px;
+  text-align: center;
+  color: var(--dsh-kb-text-secondary);
+  border: 1px dashed var(--dsh-kb-border);
+  border-radius: var(--dsh-kb-radius-lg);
+}
+
+.dsh-kb-profile {
+  grid-row: 1 / 3;
+  align-self: start;
+  width: 20px;
+  height: 20px;
+  border-radius: var(--dsh-kb-radius-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: 700;
+  color: #fff;
+}
+.dsh-kb-profile--v { background: var(--dsh-kb-v); }
+.dsh-kb-profile--p { background: var(--dsh-kb-p); }
+.dsh-kb-profile--w { background: var(--dsh-kb-w); }
+.dsh-kb-profile--d { background: var(--dsh-kb-d); }
+.dsh-kb-profile--pt { background: var(--dsh-kb-pt); }
+.dsh-kb-profile--dt { background: var(--dsh-kb-dt); }
+
+/* T27：任务卡弹窗（原位详情）——DSH 面板风格：大圆角 + 抬升表面 + 浅/深色令牌 */
+.dsh-kb-detail {
+  display: flex;
+  flex-direction: column;
+  min-height: calc(100% - 16px);
+  margin: 8px;
+  padding: 12px 16px;
+  box-sizing: border-box;
+  border: 1px solid var(--dsh-kb-border);
+  border-radius: var(--dsh-kb-radius-lg);
+  background: var(--dsh-kb-surface);
+  color: var(--dsh-kb-text-primary);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+}
+.dsh-kb-detail__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--dsh-kb-border);
+}
+.dsh-kb-detail__header > button:not(.dsh-kb-unread) {
+  flex: 0 0 auto;
+  width: 28px;
+  height: 28px;
+  border: 1px solid var(--dsh-kb-border);
+  border-radius: var(--dsh-kb-radius-md);
+  background: transparent;
+  color: var(--dsh-kb-text-primary);
+  cursor: pointer;
+  font: inherit;
+  line-height: 1;
+  transition: background-color 150ms ease;
+}
+.dsh-kb-detail__header > button:not(.dsh-kb-unread):hover {
+  background: var(--dsh-kb-hover);
+}
+.dsh-kb-detail__identity {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.dsh-kb-detail__identity strong,
+.dsh-kb-detail__identity span {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dsh-kb-detail__actions {
+  display: flex;
+  gap: 4px;
+  flex: 0 0 auto;
+}
+.dsh-kb-detail__actions button {
+  border: 1px solid var(--dsh-kb-border);
+  border-radius: var(--dsh-kb-radius-md);
+  background: transparent;
+  color: var(--dsh-kb-text-primary);
+  padding: 4px 10px;
+  cursor: pointer;
+  font: inherit;
+  transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
+}
+.dsh-kb-detail__actions button:hover {
+  background: var(--dsh-kb-hover);
+}
+.dsh-kb-detail__actions button[data-confirming='true'] {
+  border-color: var(--dsh-kb-blocked);
+  color: var(--dsh-kb-blocked);
+}
+.dsh-kb-detail__actions button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.dsh-kb-action-form {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.dsh-kb-action-form input {
+  width: 140px;
+  padding: 3px 8px;
+  border: 1px solid var(--dsh-kb-border);
+  border-radius: var(--dsh-kb-radius-sm);
+  background: var(--dsh-kb-input);
+  color: var(--dsh-kb-text-primary);
+  font: inherit;
+  font-size: 12px;
+}
+.dsh-kb-unread {
+  flex: 0 0 auto;
+  border: 1px solid var(--dsh-kb-active);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--dsh-kb-active) 12%, transparent);
+  color: var(--dsh-kb-active);
+  padding: 2px 8px;
+  font: inherit;
+  font-size: 12px;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.dsh-kb-action-error {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  margin: 4px 0;
+  border-left: 3px solid var(--dsh-kb-blocked);
+  color: var(--dsh-kb-blocked);
+  font-size: 12px;
+}
+.dsh-kb-action-error span {
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dsh-kb-action-error button {
+  flex: 0 0 auto;
+  border: 1px solid currentColor;
+  border-radius: var(--dsh-kb-radius-sm);
+  background: transparent;
+  color: inherit;
+  padding: 1px 6px;
+  cursor: pointer;
+  font: inherit;
+}
+.dsh-kb-detail [role='tablist'] {
+  display: flex;
+  gap: 4px;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--dsh-kb-border);
+}
+.dsh-kb-detail [role='tab'] {
+  border: 0;
+  border-radius: var(--dsh-kb-radius-sm);
+  background: transparent;
+  color: var(--dsh-kb-text-secondary);
+  padding: 4px 10px;
+  cursor: pointer;
+  transition: background-color 150ms ease, color 150ms ease;
+}
+.dsh-kb-detail [role='tab']:hover {
+  color: var(--dsh-kb-text-primary);
+  background: var(--dsh-kb-hover);
+}
+.dsh-kb-detail [role='tab'][aria-selected='true'] {
+  background: var(--dsh-kb-hover);
+  color: var(--dsh-kb-text-primary);
+}
+.dsh-kb-detail [role='tabpanel'] {
+  padding: 8px 0;
+  overflow: auto;
+}
+.dsh-kb-detail h4 {
+  margin: 8px 0 4px;
+  font-size: 12px;
+  text-transform: none;
+  color: var(--dsh-kb-text-secondary);
+}
+.dsh-kb-detail code {
+  background: var(--dsh-kb-inline-code);
+  border-radius: var(--dsh-kb-radius-sm);
+  padding: 1px 4px;
+}
+.dsh-kb-detail dl {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 4px 8px;
+  margin: 8px 0;
+}
+.dsh-kb-detail dt { opacity: 0.7; color: var(--dsh-kb-text-tertiary); }
+.dsh-kb-detail dd { margin: 0; }
+.dsh-kb-detail time { opacity: 0.6; font-size: 12px; margin-inline-end: 4px; }
+
+.dsh-kb-spec-attachments {
+  list-style: none;
+  margin: 4px 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.dsh-kb-spec-attachments li {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dsh-kb-spec-attachment__kind {
+  font-size: 11px;
+  border: 1px solid var(--dsh-kb-border);
+  border-radius: var(--dsh-kb-radius-sm);
+  padding: 0 4px;
+  opacity: 0.8;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dsh-kb-tab * {
+    transition-duration: 0ms !important;
+  }
+}
+
+/* 整链删除按钮：默认隐藏，hover 需求标题行时出现（GUI 仅 human，二次确认） */
+.dsh-kb-chain__delete {
+  flex: 0 0 auto;
+  border: 0;
+  background: transparent;
+  color: currentColor;
+  opacity: 0;
+  font: inherit;
+  line-height: 1;
+  padding: 2px 4px;
+  cursor: pointer;
+  transition: opacity 150ms ease, color 150ms ease;
+}
+.dsh-kb-chain__title:hover .dsh-kb-chain__delete,
+.dsh-kb-chain__delete:focus-visible { opacity: 0.7; }
+.dsh-kb-chain__delete:hover { opacity: 1; color: var(--dsh-kb-blocked); }
+/* 删除二次确认弹窗（复用 rename 弹窗外壳/圆角契约） */
+.dsh-kb-delete-modal__text {
+  color: var(--dsh-kb-text-secondary);
+  font-size: 13px;
+  line-height: 1.5;
+}
+.dsh-kb-delete-modal__error {
+  color: var(--dsh-kb-blocked);
+  font-size: 12px;
+}
+.dsh-kb-rename-modal__actions .dsh-kb-delete-confirm {
+  border-color: transparent;
+  background: var(--dsw-alias-state-error-primary);
+  color: #fff;
+}
+/* T7：链标题改名铅笔按钮 + 轻量弹窗（GUI 仅 human；角色卡不可改名） */
+.dsh-kb-chain__rename {
+  flex: 0 0 auto;
+  border: 0;
+  background: transparent;
+  color: currentColor;
+  opacity: 0.55;
+  font: inherit;
+  line-height: 1;
+  padding: 2px 4px;
+  cursor: pointer;
+}
+.dsh-kb-chain__rename:hover { opacity: 1; }
+.dsh-kb-task__status-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.dsh-kb-rename-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: var(--dsh-kb-mask);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.dsh-kb-rename-modal {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 280px;
+  padding: 16px;
+  border: 1px solid var(--dsh-kb-border);
+  border-radius: var(--dsh-kb-radius-lg);
+  background: var(--dsh-kb-surface-elev);
+  color: var(--dsh-kb-text-primary);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+}
+.dsh-kb-rename-modal__label {
+  color: var(--dsh-kb-text-primary);
+  font-size: 13px;
+  font-weight: 600;
+}
+.dsh-kb-rename-modal__input {
+  padding: 6px 10px;
+  border: 1px solid var(--dsh-kb-border);
+  border-radius: var(--dsh-kb-radius-md);
+  background: var(--dsh-kb-input);
+  color: var(--dsh-kb-text-primary);
+  font: inherit;
+}
+.dsh-kb-rename-modal__input:focus {
+  outline: none;
+  border-color: var(--dsh-kb-active);
+}
+.dsh-kb-rename-modal__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+.dsh-kb-rename-modal__actions button {
+  border: 1px solid var(--dsh-kb-border);
+  border-radius: var(--dsh-kb-radius-md);
+  background: transparent;
+  color: var(--dsh-kb-text-primary);
+  font: inherit;
+  padding: 4px 14px;
+  cursor: pointer;
+  transition: background-color 150ms ease;
+}
+.dsh-kb-rename-modal__actions button:hover {
+  background: var(--dsh-kb-hover);
+}
+.dsh-kb-rename-modal__actions .dsh-kb-rename-save {
+  border-color: transparent;
+  background: var(--dsw-alias-button-primary-fill);
+  color: var(--dsw-alias-label-primary-foreground);
+}

package/client/useKanbanBoard.ts

@@ -0,0 +1,7 @@
+import { useSyncExternalStore } from 'react';
+import type { BoardStore } from './board-store.js';
+
+/** 看板外部 store 的 React 桥（T24）：只订阅快照，不复制领域状态机。 */
+export function useKanbanBoard(store: BoardStore) {
+  return useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+}