dsh-taskboard 0.1.0

package/src/client/sidebar-entry.ts

@@ -0,0 +1,165 @@
+/**
+ * Sidebar entry injection — structure ported from the working dsh-web-ui
+ * family implementations (dsh-ssh / dsh-client-ui-task-board, verified live
+ * in this shell): scope to the sidebar root (the logoRow's parent), find the
+ * New Session button inside it (newSession class → first direct-child BUTTON
+ * → aria-label/text fallbacks), and insert the entry as a direct child of
+ * that root next to the logo row. A body-level MutationObserver waits for
+ * the shell and self-heals React re-renders; a slow timer covers shells that
+ * mount late without further mutations.
+ *
+ * The row is plain DOM (no React tree) so it can never disturb the shell's
+ * reconciliation; the board view it toggles is a separate React root mounted
+ * in the center column (see board-mount.tsx).
+ *
+ * @module dsh-taskboard/client/sidebar-entry
+ */
+import type { BoardController } from './controller.ts'
+
+/** Stable data attribute identifying this entry row. */
+export const ENTRY_SELECTOR = '[data-dsh-atb-entry]'
+
+/** Inline icon (16px nav-icon look). */
+const ICON = '<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="2.5" width="12" height="11" rx="1.5"/><path d="M2 6.5h12M6.5 6.5v7"/></svg>'
+
+/**
+ * Find the sidebar shell root element, or undefined while not yet mounted.
+ * (Same as the working family plugins: sidebarCol pane → logoRow owner.)
+ */
+function sidebarRoot(): HTMLElement | undefined {
+  const column = document.querySelector<HTMLElement>('[data-pane="sidebar"], [class*="sidebarCol"]')
+  if (column === null) return undefined
+  const logoOwner = column.querySelector<HTMLElement>('[class*="logoRow"]')?.parentElement
+  return logoOwner ?? (column.firstElementChild as HTMLElement | undefined)
+}
+
+/**
+ * The New Session button: nested in the logo row on current shells, a direct
+ * child BUTTON on the real shell (the family plugins' fallback), with
+ * aria-label/text fallbacks for other shells.
+ */
+function newSessionButton(root: HTMLElement): HTMLButtonElement | undefined {
+  const nested = root.querySelector<HTMLButtonElement>('button[class*="newSession"]')
+  if (nested !== null) return nested
+  for (const child of root.children) {
+    if (child instanceof HTMLButtonElement) return child
+  }
+  const byAria = root.querySelector<HTMLButtonElement>(
+    'button[aria-label="新建会话"], button[aria-label="New Session"], button[aria-label*="新会话"], button[aria-label*="new session" i]',
+  )
+  if (byAria !== null) return byAria
+  const buttons = Array.from(root.querySelectorAll<HTMLButtonElement>('button'))
+  return buttons.find(button => /新会话|新建会话|new session/i.test(button.textContent ?? ''))
+}
+
+/** Build the entry row (a detached button; insert once the shell is up). */
+function createEntry(controller: BoardController): HTMLButtonElement {
+  const entry = document.createElement('button')
+  entry.type = 'button'
+  entry.dataset.dshAtbEntry = ''
+  entry.className = 'dsh-atb-entry'
+  entry.setAttribute('aria-label', 'Agent 任务看板')
+  entry.innerHTML = `<span class="dsh-atb-entry-icon">${ICON}</span><span class="dsh-atb-entry-label">任务看板</span>`
+  entry.addEventListener('click', () => { controller.toggleBoard() })
+  return entry
+}
+
+/** Re-insert the entry after the New Session row (before the browser region). */
+function placeEntry(root: HTMLElement, entry: HTMLButtonElement): boolean {
+  const button = newSessionButton(root)
+  if (button === undefined) return false
+  if (entry.parentElement !== root) {
+    // Position relative to the family block (entries injected by sibling
+    // plugins), never relative to transient logoRow geometry: every family
+    // plugin that self-heals during a re-render then lands in the same
+    // relative order. No append-to-end fallback: appending at the end would
+    // randomly reorder the block after a shell re-render.
+    const row = button.closest('[class*="logoRow"]')
+    const base = (row !== null && row.parentElement === root) ? row : button
+    const family = Array.from(root.children).filter(
+      (el): el is HTMLElement => el instanceof HTMLElement && el.matches('[data-dsh-atb-entry], [data-dsh-taskboard-entry], [data-dsh-ssh-entry]'),
+    )
+    // taskboard sits before the whole family block.
+    const anchor = family.length > 0 ? (family[0] ?? null) : (base.nextElementSibling ?? null)
+    root.insertBefore(entry, anchor)
+  }
+  return true
+}
+
+/** Debug counters (window.__atbDebug) — evidence if the entry fails to appear. */
+interface AtbDebug { attempts: number; found: boolean; placed: boolean }
+
+/**
+ * Mount the sidebar entry, waiting for the shell to render and self-healing
+ * on later React re-renders.
+ * @param controller - the board controller the entry toggles.
+ * @returns disposer removing the entry and its observers.
+ */
+export function mountSidebarEntry(controller: BoardController): () => void {
+  const entry = createEntry(controller)
+  const debug: AtbDebug = { attempts: 0, found: false, placed: false }
+  ;(window as unknown as { __atbDebug?: AtbDebug }).__atbDebug = debug
+  let root: HTMLElement | undefined
+  let placed = false
+
+  const tryPlace = (): void => {
+    debug.attempts++
+    if (root !== undefined && !root.isConnected) {
+      rootObserver.disconnect()
+      root = undefined
+      placed = false
+    }
+    if (placed) {
+      if (document.body.contains(entry)) return
+      rootObserver.disconnect()
+      root = undefined
+      placed = false
+    }
+    root ??= sidebarRoot()
+    if (root === undefined) return
+    debug.found = newSessionButton(root) !== undefined
+    placed = placeEntry(root, entry)
+    debug.placed = placed
+    if (placed) {
+      rootObserver.observe(root, { childList: true, subtree: true })
+    }
+  }
+
+  // Body-level watcher as the whole-rebuild fallback.
+  const waitObserver = new MutationObserver(() => { tryPlace() })
+  waitObserver.observe(document.body, { childList: true, subtree: true })
+
+  // Self-heal: re-insert in the same frame when a re-render displaces the row.
+  const rootObserver = new MutationObserver(() => {
+    if (root === undefined || !root.isConnected) {
+      placed = false
+      tryPlace()
+      return
+    }
+    if (!root.contains(entry)) {
+      placed = placeEntry(root, entry)
+    }
+  })
+
+  // Belt-and-braces: a late shell mount that triggers no further mutations
+  // still gets periodic retries (the family plugins rely on mutation traffic
+  // alone; the timer costs one cheap contains-check per tick once placed).
+  const retry = setInterval(() => { tryPlace() }, 2_000)
+
+  const syncActive = () => {
+    if (controller.getSnapshot().boardOpen) entry.dataset.active = 'true'
+    else delete entry.dataset.active
+  }
+  const unsubscribe = controller.subscribe(syncActive)
+  syncActive()
+
+  tryPlace()
+
+  return () => {
+    clearInterval(retry)
+    waitObserver.disconnect()
+    rootObserver.disconnect()
+    unsubscribe()
+    entry.remove()
+  }
+}

package/src/client/styles.ts

@@ -0,0 +1,391 @@
+/**
+ * Board styles, injected as one global stylesheet with dsh-atb- prefixed
+ * classes. Colors ride the shell's --dsw-* design tokens where available so
+ * the board follows the active theme/skin; urgency accents are the fixed
+ * red/purple/blue of the protocol.
+ *
+ * @module dsh-taskboard/client/styles
+ */
+
+/** The stylesheet text. */
+export const STYLES = `
+.dsh-atb-entry {
+  display: flex; align-items: center; gap: 8px;
+  width: calc(100% - 8px); margin: 2px 4px; padding: 6px 10px;
+  border: none; border-radius: 8px; background: transparent;
+  color: var(--dsw-text-secondary, inherit); font: inherit; font-size: 13px;
+  cursor: pointer; text-align: left;
+}
+.dsh-atb-entry:hover { background: var(--dsw-hover, rgba(128,128,128,.12)); color: var(--dsw-text-primary, inherit); }
+.dsh-atb-entry[data-active="true"] { background: var(--dsw-active, rgba(128,128,128,.18)); color: var(--dsw-text-primary, inherit); font-weight: 500; }
+.dsh-atb-entry svg { flex: none; }
+
+html[data-dsh-atb-active] [data-pane="conversation"] > *:not([data-dsh-atb-view]) { display: none !important; }
+.dsh-atb-view { display: none; }
+html[data-dsh-atb-active] .dsh-atb-view { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
+
+.dsh-atb-board { display: flex; flex-direction: column; height: 100%; min-height: 0; padding: 12px 16px; gap: 10px; box-sizing: border-box; }
+.dsh-atb-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.dsh-atb-title { font-size: 15px; font-weight: 600; margin: 0; }
+.dsh-atb-count { font-size: 12px; color: var(--dsw-text-secondary, gray); }
+.dsh-atb-spacer { flex: 1; }
+.dsh-atb-select, .dsh-atb-input {
+  font: inherit; font-size: 12.5px; padding: 5px 8px; border-radius: 7px;
+  border: 1px solid var(--dsw-border, rgba(128,128,128,.35));
+  background: var(--dsw-bg, transparent); color: inherit;
+}
+.dsh-atb-chip {
+  display: inline-flex; align-items: center; gap: 5px;
+  font-size: 12px; padding: 3px 9px; border-radius: 999px; cursor: pointer;
+  border: 1px solid var(--dsw-border, rgba(128,128,128,.35));
+  background: transparent; color: var(--dsw-text-secondary, inherit);
+}
+.dsh-atb-chip[data-on="true"] { color: #fff; border-color: transparent; }
+.dsh-atb-chip[data-urgency="urgent"][data-on="true"] { background: #e5484d; }
+.dsh-atb-chip[data-urgency="normal"][data-on="true"] { background: #8e4ec6; }
+.dsh-atb-chip[data-urgency="relaxed"][data-on="true"] { background: #3e63dd; }
+.dsh-atb-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
+.dsh-atb-dot[data-urgency="urgent"] { background: #e5484d; }
+.dsh-atb-dot[data-urgency="normal"] { background: #8e4ec6; }
+.dsh-atb-dot[data-urgency="relaxed"] { background: #3e63dd; }
+
+.dsh-atb-btn {
+  font: inherit; font-size: 12.5px; padding: 5px 11px; border-radius: 7px; cursor: pointer;
+  border: 1px solid var(--dsw-border, rgba(128,128,128,.35));
+  background: var(--dsw-bg-elevated, rgba(128,128,128,.08)); color: inherit;
+}
+.dsh-atb-btn:hover { background: var(--dsw-hover, rgba(128,128,128,.18)); }
+.dsh-atb-btn:disabled { opacity: .45; cursor: default; }
+.dsh-atb-btn[data-primary="true"] { background: var(--dsw-alias-button-primary-fill, var(--dsw-alias-brand-primary, #1f2328)); border-color: transparent; color: var(--dsw-alias-label-primary-foreground, #fff); }
+.dsh-atb-btn[data-danger="true"] { color: var(--dsw-alias-state-error-primary, #e5484d); border-color: color-mix(in srgb, var(--dsw-alias-state-error-primary, #e5484d) 45%, transparent); }
+
+.dsh-atb-columns { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; flex: 1; min-height: 0; overflow-x: auto; }
+
+.dsh-atb-detailpanel {
+  display: flex; flex-direction: column;
+  flex: none; max-height: 55%; min-height: 180px; overflow: hidden;
+  border: 1px solid var(--dsw-border, rgba(128,128,128,.25)); border-radius: 12px;
+  background: var(--dsw-bg-panel, var(--dsw-bg-elevated, rgba(128,128,128,.05)));
+  padding: 10px 12px; box-shadow: 0 -4px 18px rgba(0,0,0,.12);
+}
+.dsh-atb-detailpanel .dsh-atb-detail { flex: 1; min-height: 0; }
+.dsh-atb-column { display: flex; flex-direction: column; min-width: 200px; min-height: 0; border-radius: 10px; background: var(--dsw-bg-inset, rgba(128,128,128,.07)); padding: 8px; gap: 8px; }
+.dsh-atb-colhead { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 2px 4px; }
+.dsh-atb-colcount { font-size: 11px; font-weight: 400; color: var(--dsw-text-secondary, gray); }
+.dsh-atb-cards { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 0; flex: 1; padding: 2px; }
+
+.dsh-atb-card {
+  position: relative; border-radius: 9px; padding: 8px 10px 8px 13px; cursor: pointer;
+  background: var(--dsw-bg-elevated, rgba(128,128,128,.1));
+  border: 1px solid var(--dsw-border, rgba(128,128,128,.25));
+  font-size: 13px; text-align: left; color: inherit; width: 100%; box-sizing: border-box;
+}
+.dsh-atb-card:hover { border-color: var(--dsw-border-strong, rgba(128,128,128,.55)); }
+.dsh-atb-card[draggable="true"] { cursor: grab; }
+.dsh-atb-card[data-dragging] { opacity: .45; }
+.dsh-atb-column[data-dragover] { outline: 2px dashed var(--dsw-border-strong, rgba(128,128,128,.55)); outline-offset: -2px; background: var(--dsw-bg-hover, rgba(128,128,128,.12)); }
+.dsh-atb-card::before {
+  content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 3.5px; border-radius: 3px;
+}
+.dsh-atb-card[data-urgency="urgent"]::before { background: #e5484d; }
+.dsh-atb-card[data-urgency="normal"]::before { background: #8e4ec6; }
+.dsh-atb-card[data-urgency="relaxed"]::before { background: #3e63dd; }
+.dsh-atb-card-title { font-weight: 550; line-height: 1.35; word-break: break-word; }
+.dsh-atb-card-meta { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 11px; color: var(--dsw-text-secondary, gray); flex-wrap: wrap; }
+.dsh-atb-badge { font-size: 10.5px; padding: 1px 6px; border-radius: 5px; background: rgba(128,128,128,.18); }
+.dsh-atb-badge[data-kind="blocked"] { background: rgba(229,72,77,.18); color: #e5484d; }
+.dsh-atb-badge[data-kind="scheduled"] { background: rgba(62,99,221,.16); color: #3e63dd; }
+.dsh-atb-badge[data-kind="trashed"] { background: rgba(229,72,77,.14); color: #e5484d; text-decoration: line-through; }
+.dsh-atb-badge[data-kind="done"] { background: rgba(46,160,67,.16); color: #2ea043; }
+.dsh-atb-badge[data-kind="running"] { background: rgba(229,152,42,.16); color: #e69842; }
+
+.dsh-atb-error { font-size: 12px; color: #e5484d; padding: 4px 8px; border-radius: 6px; background: rgba(229,72,77,.1); }
+.dsh-atb-empty { font-size: 12px; color: var(--dsw-text-secondary, gray); padding: 10px 4px; }
+
+/* ---------- detail pane (polished) ---------- */
+.dsh-atb-detail {
+  display: flex; flex-direction: column; gap: 12px; overflow-y: auto; min-height: 0; flex: 1;
+  padding: 2px; position: relative;
+}
+.dsh-atb-detail::before {
+  content: ""; position: sticky; top: 0; height: 3px; border-radius: 3px; flex: none;
+}
+.dsh-atb-detail[data-urgency="urgent"]::before { background: linear-gradient(90deg, #e5484d, rgba(229,72,77,.15)); }
+.dsh-atb-detail[data-urgency="normal"]::before { background: linear-gradient(90deg, #8e4ec6, rgba(142,78,198,.15)); }
+.dsh-atb-detail[data-urgency="relaxed"]::before { background: linear-gradient(90deg, #3e63dd, rgba(62,99,221,.15)); }
+
+.dsh-atb-detail-head { display: flex; align-items: flex-start; gap: 10px; }
+.dsh-atb-detail-titlewrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
+.dsh-atb-detail-titlebar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.dsh-atb-detail-titlebar h3 { margin: 0; font-size: 15.5px; line-height: 1.35; word-break: break-word; }
+.dsh-atb-detail-close {
+  flex: none; width: 26px; height: 26px; border-radius: 7px; border: none; cursor: pointer;
+  background: transparent; color: var(--dsw-text-secondary, gray); font-size: 13px; line-height: 1;
+}
+.dsh-atb-detail-close:hover { background: var(--dsw-hover, rgba(128,128,128,.18)); color: inherit; }
+.dsh-atb-detail-topbtns { display: flex; align-items: center; gap: 6px; flex: none; }
+.dsh-atb-detail-edit {
+  font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 7px; cursor: pointer;
+  border: 1px solid var(--dsw-border, rgba(128,128,128,.32));
+  background: var(--dsw-bg-elevated, rgba(128,128,128,.07)); color: var(--dsw-text-secondary, inherit);
+}
+.dsh-atb-detail-edit:hover { border-color: var(--dsw-alias-brand-primary, #1f2328); color: var(--dsw-alias-label-primary, inherit); }
+
+.dsh-atb-statuspill {
+  flex: none; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; letter-spacing: .02em;
+}
+.dsh-atb-statuspill[data-status="backlog"] { background: rgba(128,128,128,.18); color: var(--dsw-text-secondary, #888); }
+.dsh-atb-statuspill[data-status="todo"] { background: rgba(62,99,221,.15); color: #3e63dd; }
+.dsh-atb-statuspill[data-status="in_progress"] { background: rgba(230,152,66,.16); color: #d9822b; }
+.dsh-atb-statuspill[data-status="in_review"] { background: rgba(142,78,198,.16); color: #8e4ec6; }
+.dsh-atb-statuspill[data-status="done"] { background: rgba(46,160,67,.16); color: #2ea043; }
+.dsh-atb-statuspill[data-status="canceled"], .dsh-atb-statuspill[data-status="archived"] { background: rgba(128,128,128,.14); color: var(--dsw-text-secondary, #888); }
+
+.dsh-atb-detail-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
+.dsh-atb-chip2 {
+  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; line-height: 1;
+  padding: 3px 8px; border-radius: 6px;
+  background: var(--dsw-bg-inset, rgba(128,128,128,.09)); color: var(--dsw-text-secondary, #999);
+}
+.dsh-atb-chip2-icon { font-size: 10.5px; opacity: .85; }
+.dsh-atb-chip2[data-tone="urgent"] { background: rgba(229,72,77,.15); color: #e5484d; }
+.dsh-atb-chip2[data-tone="normal"] { background: rgba(142,78,198,.14); color: #a06ce0; }
+.dsh-atb-chip2[data-tone="relaxed"] { background: rgba(62,99,221,.13); color: #6d92e8; }
+.dsh-atb-detail-sub { font-size: 11.5px; color: var(--dsw-text-secondary, gray); }
+
+.dsh-atb-fieldcard {
+  border: 1px solid var(--dsw-border, rgba(128,128,128,.22)); border-radius: 10px;
+  padding: 9px 11px; display: flex; flex-direction: column; gap: 5px;
+  background: var(--dsw-bg-elevated, rgba(128,128,128,.06));
+}
+.dsh-atb-fieldcard-label {
+  font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
+  color: var(--dsw-text-secondary, gray);
+}
+.dsh-atb-fieldcard[data-kind="prompt"] .dsh-atb-fieldcard-label { color: #8e63c8; }
+.dsh-atb-promptbox {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px; line-height: 1.55; white-space: pre-wrap; word-break: break-word;
+  background: var(--dsw-bg-inset, rgba(128,128,128,.08)); border-radius: 7px; padding: 8px 10px;
+  border: 1px dashed var(--dsw-border, rgba(128,128,128,.25));
+}
+.dsh-atb-desc { white-space: pre-wrap; word-break: break-word; font-size: 13px; line-height: 1.55; }
+
+.dsh-atb-detail-actions { display: flex; flex-direction: column; gap: 8px; }
+.dsh-atb-runbtn {
+  font: inherit; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 9px; cursor: pointer;
+  border: 1px solid transparent; background: var(--dsw-alias-button-primary-fill, var(--dsw-alias-brand-primary, #1f2328)); color: var(--dsw-alias-label-primary-foreground, #fff); text-align: center;
+  transition: filter .12s ease;
+}
+.dsh-atb-runbtn:hover { filter: brightness(1.1); }
+.dsh-atb-movebtns { display: flex; gap: 6px; flex-wrap: wrap; }
+.dsh-atb-movebtn {
+  font: inherit; font-size: 12px; padding: 4px 11px; border-radius: 999px; cursor: pointer;
+  border: 1px solid var(--dsw-border, rgba(128,128,128,.32));
+  background: var(--dsw-bg-elevated, rgba(128,128,128,.07)); color: var(--dsw-text-secondary, inherit);
+  transition: border-color .12s ease, color .12s ease;
+}
+.dsh-atb-movebtn:hover { border-color: var(--dsw-border-strong, rgba(128,128,128,.6)); color: inherit; }
+.dsh-atb-movebtn[data-to="done"] { border-color: rgba(46,160,67,.55); color: #2ea043; }
+.dsh-atb-movebtn[data-to="done"]:hover { background: rgba(46,160,67,.12); }
+.dsh-atb-movebtn[data-to="canceled"], .dsh-atb-movebtn[data-to="archived"] { opacity: .75; }
+.dsh-atb-movebtn[data-to="blocked"] { border-color: rgba(229,72,77,.45); }
+.dsh-atb-movebtn[data-to="blocked"]:hover { background: rgba(229,72,77,.1); }
+.dsh-atb-confirm { display: inline-flex; align-items: center; gap: 6px; }
+.dsh-atb-confirm-label { font-size: 11.5px; color: var(--dsw-text-secondary, gray); }
+
+.dsh-atb-section { font-size: 13px; display: flex; flex-direction: column; gap: 7px; }
+.dsh-atb-section h4 {
+  margin: 0; font-size: 11px; color: var(--dsw-text-secondary, gray);
+  text-transform: uppercase; letter-spacing: .05em; display: flex; align-items: center; gap: 6px;
+}
+.dsh-atb-count2 {
+  font-size: 10px; font-weight: 600; padding: 0 6px; border-radius: 999px; line-height: 16px;
+  background: var(--dsw-bg-inset, rgba(128,128,128,.14)); color: var(--dsw-text-secondary, gray);
+}
+.dsh-atb-empty2 { font-size: 12px; color: var(--dsw-text-secondary, gray); padding: 8px 0; }
+
+.dsh-atb-commentlist { display: flex; flex-direction: column; gap: 8px; }
+.dsh-atb-bubble { display: flex; gap: 8px; }
+.dsh-atb-bubble-avatar {
+  flex: none; width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
+  font-size: 13px; background: var(--dsw-bg-inset, rgba(128,128,128,.12));
+}
+.dsh-atb-bubble[data-from="agent"] .dsh-atb-bubble-avatar { background: rgba(142,78,198,.15); }
+.dsh-atb-bubble-main {
+  flex: 1; min-width: 0; border-radius: 10px; padding: 6px 10px;
+  background: var(--dsw-bg-elevated, rgba(128,128,128,.08));
+  border: 1px solid var(--dsw-border, rgba(128,128,128,.18));
+}
+.dsh-atb-bubble[data-from="agent"] .dsh-atb-bubble-main { border-color: rgba(142,78,198,.3); background: rgba(142,78,198,.07); }
+.dsh-atb-bubble-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
+.dsh-atb-bubble-meta b { font-size: 11.5px; font-weight: 600; color: var(--dsw-text-primary, inherit); }
+.dsh-atb-bubble[data-from="agent"] .dsh-atb-bubble-meta b { color: #a06ce0; }
+.dsh-atb-bubble-meta span { font-size: 10.5px; color: var(--dsw-text-secondary, gray); }
+.dsh-atb-bubble-body { font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
+
+.dsh-atb-composer { display: flex; gap: 7px; align-items: flex-end; margin-top: 2px; }
+.dsh-atb-composer-input {
+  flex: 1; font: inherit; font-size: 12.5px; line-height: 1.5; padding: 7px 10px; border-radius: 9px;
+  border: 1px solid var(--dsw-border, rgba(128,128,128,.32));
+  background: var(--dsw-bg, transparent); color: inherit; resize: vertical; min-height: 38px;
+}
+.dsh-atb-composer-input:focus { outline: none; border-color: var(--dsw-alias-brand-primary, #1f2328); }
+.dsh-atb-composer-send {
+  flex: none; font: inherit; font-size: 12.5px; padding: 7px 14px; border-radius: 9px; cursor: pointer;
+  border: 1px solid transparent; background: var(--dsw-alias-button-primary-fill, var(--dsw-alias-brand-primary, #1f2328)); color: var(--dsw-alias-label-primary-foreground, #fff);
+}
+.dsh-atb-composer-send:disabled { opacity: .4; cursor: default; }
+
+.dsh-atb-execlist { display: flex; flex-direction: column; gap: 5px; }
+.dsh-atb-exec-row {
+  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px;
+  padding: 5px 9px; border-radius: 8px;
+  background: var(--dsw-bg-elevated, rgba(128,128,128,.07));
+  border: 1px solid var(--dsw-border, rgba(128,128,128,.16));
+}
+.dsh-atb-exec-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: rgba(128,128,128,.5); }
+.dsh-atb-exec-dot[data-outcome="succeeded"] { background: #2ea043; box-shadow: 0 0 0 3px rgba(46,160,67,.15); }
+.dsh-atb-exec-dot[data-outcome="failed"] { background: #e5484d; box-shadow: 0 0 0 3px rgba(229,72,77,.15); }
+.dsh-atb-exec-dot[data-outcome="running"] { background: #d9822b; box-shadow: 0 0 0 3px rgba(217,130,43,.18); animation: dsh-atb-pulse 1.6s ease-in-out infinite; }
+@keyframes dsh-atb-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
+.dsh-atb-exec-trigger { font-size: 11px; color: var(--dsw-text-secondary, gray); }
+.dsh-atb-exec-outcome { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 5px; }
+.dsh-atb-exec-outcome[data-outcome="succeeded"] { background: rgba(46,160,67,.15); color: #2ea043; }
+.dsh-atb-exec-outcome[data-outcome="failed"] { background: rgba(229,72,77,.14); color: #e5484d; }
+.dsh-atb-exec-outcome[data-outcome="running"] { background: rgba(217,130,43,.15); color: #d9822b; }
+.dsh-atb-exec-outcome[data-outcome="cancelled"] { background: rgba(128,128,128,.15); color: var(--dsw-text-secondary, gray); }
+.dsh-atb-exec-time { font-size: 11px; color: var(--dsw-text-secondary, gray); }
+.dsh-atb-exec-session { font-size: 11px; color: var(--dsw-text-secondary, gray); }
+.dsh-atb-exec-error { flex-basis: 100%; font-size: 11px; color: #e5484d; word-break: break-all; }
+
+.dsh-atb-dangerzone {
+  display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px;
+  border-top: 1px dashed var(--dsw-border, rgba(128,128,128,.25));
+}
+
+/* ---------- task form modal (create + edit, polished) ---------- */
+.dsh-atb-modal-backdrop {
+  position: fixed; inset: 0; z-index: 80;
+  background: var(--dsw-alias-bg-mask-drop, rgba(28,30,36,.4)); backdrop-filter: var(--dsw-mask-blur, blur(2px));
+  display: flex; align-items: center; justify-content: center;
+  animation: dsh-atb-fade .14s ease;
+}
+@keyframes dsh-atb-fade { from { opacity: 0; } }
+.dsh-atb-modal {
+  width: min(560px, calc(100vw - 48px)); max-height: calc(100vh - 80px);
+  display: flex; flex-direction: column; overflow: hidden; border-radius: 14px;
+  background: var(--dsw-alias-bg-overlay, #fff); color: var(--dsw-alias-label-primary, inherit);
+  border: 1px solid var(--dsw-alias-border-l2, rgba(128,128,128,.25));
+  box-shadow: var(--dsw-shadow-lv3, 0 12px 32px rgba(0,0,0,.18));
+  animation: dsh-atb-pop .16s ease;
+}
+@keyframes dsh-atb-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
+.dsh-atb-modal-head {
+  display: flex; align-items: center; gap: 10px;
+  padding: 13px 16px 11px; border-bottom: 1px solid var(--dsw-alias-border-l2, rgba(128,128,128,.18));
+}
+.dsh-atb-modal-headicon {
+  flex: none; width: 30px; height: 30px; border-radius: 9px;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 14px; background: var(--dsw-alias-brand-primary, #1f2328); color: var(--dsw-alias-label-primary-foreground, #fff);
+}
+.dsh-atb-modal-headtext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
+.dsh-atb-modal-headtext h3 { margin: 0; font-size: 15px; line-height: 1.3; }
+.dsh-atb-modal-headtext p { margin: 0; font-size: 11.5px; color: var(--dsw-alias-label-secondary, gray); }
+.dsh-atb-modal-close {
+  flex: none; width: 26px; height: 26px; border-radius: 7px; border: none; cursor: pointer;
+  background: transparent; color: var(--dsw-alias-label-tertiary, gray); font-size: 13px; line-height: 1;
+}
+.dsh-atb-modal-close:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.18)); color: var(--dsw-alias-label-primary, inherit); }
+
+.dsh-atb-modal-body {
+  padding: 13px 16px; overflow-y: auto;
+  display: grid; grid-template-columns: 1fr 1fr; gap: 11px 10px;
+}
+.dsh-atb-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
+.dsh-atb-field[data-span="full"] { grid-column: 1 / -1; }
+.dsh-atb-field-label {
+  display: flex; align-items: center; gap: 3px;
+  font-size: 11px; font-weight: 600; letter-spacing: .03em;
+  color: var(--dsw-alias-label-secondary, gray);
+}
+.dsh-atb-req { color: var(--dsw-alias-state-error-primary, #e5484d); font-style: normal; }
+.dsh-atb-modal-body input, .dsh-atb-modal-body textarea, .dsh-atb-modal-body select {
+  font: inherit; font-size: 13px; padding: 7px 10px; border-radius: 8px;
+  width: 100%; box-sizing: border-box;
+  border: 1px solid var(--dsw-alias-border-l2, rgba(128,128,128,.35));
+  background: var(--dsw-specific-input-major, transparent); color: var(--dsw-alias-label-primary, inherit);
+  transition: border-color .12s ease, box-shadow .12s ease;
+}
+.dsh-atb-modal-body textarea { min-height: 64px; resize: vertical; }
+.dsh-atb-modal-body input:focus, .dsh-atb-modal-body textarea:focus, .dsh-atb-modal-body select:focus {
+  outline: none; border-color: var(--dsw-alias-brand-primary, #1f2328);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dsw-alias-brand-primary, #1f2328) 18%, transparent);
+}
+.dsh-atb-modal-body .dsh-atb-input-bad { border-color: var(--dsw-alias-state-error-primary, #e5484d); }
+.dsh-atb-modal-body .dsh-atb-input-bad:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--dsw-alias-state-error-primary, #e5484d) 20%, transparent); }
+
+.dsh-atb-urgency-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
+.dsh-atb-urgency-opt {
+  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
+  padding: 8px 10px; border-radius: 9px; cursor: pointer;
+  border: 1px solid var(--dsw-alias-border-l2, rgba(128,128,128,.35));
+  background: transparent; color: inherit;
+  transition: border-color .12s ease, background .12s ease;
+}
+.dsh-atb-urgency-name { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
+.dsh-atb-urgency-hint { font-size: 10.5px; color: var(--dsw-alias-label-tertiary, gray); }
+.dsh-atb-urgency-opt:hover { border-color: var(--dsw-alias-label-tertiary, rgba(128,128,128,.6)); }
+.dsh-atb-urgency-opt[data-on="true"][data-urgency="urgent"] { border-color: rgba(229,72,77,.65); background: rgba(229,72,77,.1); }
+.dsh-atb-urgency-opt[data-on="true"][data-urgency="normal"] { border-color: rgba(142,78,198,.65); background: rgba(142,78,198,.1); }
+.dsh-atb-urgency-opt[data-on="true"][data-urgency="relaxed"] { border-color: rgba(62,99,221,.65); background: rgba(62,99,221,.1); }
+
+.dsh-atb-mode-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
+.dsh-atb-mode-opt {
+  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
+  padding: 8px 10px; border-radius: 9px; cursor: pointer;
+  border: 1px solid var(--dsw-alias-border-l2, rgba(128,128,128,.35));
+  background: transparent; color: inherit;
+  transition: border-color .12s ease, background .12s ease;
+}
+.dsh-atb-mode-name { font-size: 12.5px; font-weight: 600; }
+.dsh-atb-mode-hint { font-size: 10.5px; color: var(--dsw-alias-label-tertiary, gray); }
+.dsh-atb-mode-opt:hover { border-color: var(--dsw-alias-label-tertiary, rgba(128,128,128,.6)); }
+.dsh-atb-mode-opt[data-on="true"] { border-color: var(--dsw-alias-brand-primary, #1f2328); background: color-mix(in srgb, var(--dsw-alias-brand-primary, #1f2328) 8%, transparent); }
+
+.dsh-atb-cron-presets { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
+.dsh-atb-cron-preset {
+  font: inherit; font-size: 11px; padding: 2px 9px; border-radius: 999px; cursor: pointer;
+  border: 1px solid var(--dsw-alias-border-l2, rgba(128,128,128,.35));
+  background: transparent; color: var(--dsw-alias-label-secondary, inherit);
+}
+.dsh-atb-cron-preset:hover { border-color: var(--dsw-alias-label-tertiary, rgba(128,128,128,.6)); color: inherit; }
+.dsh-atb-cron-preset[data-on="true"] { border-color: transparent; background: var(--dsw-alias-brand-primary, #1f2328); color: var(--dsw-alias-label-primary-foreground, #fff); }
+.dsh-atb-cron-next { margin-left: auto; font-size: 11px; color: var(--dsw-alias-label-tertiary, gray); }
+
+.dsh-atb-modal-foot {
+  display: flex; align-items: center; gap: 10px;
+  padding: 11px 16px; border-top: 1px solid var(--dsw-alias-border-l2, rgba(128,128,128,.18));
+  background: var(--dsw-alias-bg-layer-1, rgba(128,128,128,.04));
+}
+.dsh-atb-modal-hint { flex: 1; min-width: 0; font-size: 11.5px; color: var(--dsw-alias-label-tertiary, gray); }
+.dsh-atb-modal-hint[data-tone="bad"] { color: var(--dsw-alias-state-error-primary, #e5484d); }
+.dsh-atb-modal-footbtns { display: flex; gap: 8px; }
+
+.dsh-atb-secondary { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
+.dsh-atb-link { color: var(--dsw-alias-state-business-primary, #3e63dd); cursor: pointer; text-decoration: none; }
+.dsh-atb-link:hover { text-decoration: underline; }
+`
+
+let injected = false
+
+/** Inject the stylesheet once (idempotent). */
+export function injectStyles(): void {
+  if (injected || typeof document === 'undefined') return
+  const style = document.createElement('style')
+  style.id = 'dsh-taskboard-styles'
+  style.textContent = STYLES
+  document.head.append(style)
+  injected = true
+}