@dsh-workbench/shared 0.2.14 → 0.2.15

package/src/components/SelectField.test.tsx

@@ -2,6 +2,7 @@ import { describe, expect, it, vi } from 'vitest';
 
 let states: unknown[] = [];
 vi.mock('../lib/react.js', () => ({
+  Fragment: Symbol.for('react.fragment'),
   h: (type: unknown, props: unknown, ...children: unknown[]) => ({ type, props, children }),
   useEffect: () => {},
   useMemo: (compute: () => unknown) => compute(),
@@ -53,6 +54,10 @@ function elementsOf(root: unknown): readonly AnyElement[] {
   return collect(root);
 }
 
+function marked(nodes: readonly AnyElement[]): boolean {
+  return nodes.some((one) => one.props?.['data-wb-select-reveal'] === '');
+}
+
 function menuOf(root: unknown): AnyElement {
   const menu = elementsOf(root).find((one) => one.type === Menu);
   if (menu === undefined) throw new Error('没有渲染出 Menu');
@@ -113,6 +118,38 @@ describe('SelectField：工作区那套下拉的公共形状', () => {
     expect(inputOf(menu.props['anchor'])?.props['value']).toBe('');
   });
 
+  it('★ 只显示图标那一档（折叠左栏那个工作区钮）：没有值也没有箭头，读屏名字只能来自 ariaLabel', () => {
+    const icon = { type: 'i', props: {}, children: [] };
+    const trigger = elementsOf(
+      menuOf(render({ variant: 'ghost', iconOnly: true, icon, ariaLabel: '切换项目' })).props['anchor'],
+    ).find((one) => one.type === 'button');
+
+    expect(trigger?.props['className']).toBe('wb-selectTrigger wb-selectGhost wb-selectIconOnly');
+    expect(trigger?.props['aria-label']).toBe('切换项目');
+    expect(JSON.stringify(trigger?.children)).not.toContain('wb-selectValue');
+    expect(JSON.stringify(trigger?.children)).not.toContain('wb-selectChevron');
+    expect(elementsOf(trigger?.children).some((one) => one.props['className'] === 'wb-selectIcon')).toBe(true);
+  });
+
+  it('不给 iconOnly 时一个字节都不变（宽态那套触发器照旧）', () => {
+    const trigger = elementsOf(menuOf(render({ variant: 'ghost' })).props['anchor']).find(
+      (one) => one.type === 'button',
+    );
+
+    expect(trigger?.props['className']).toBe('wb-selectTrigger wb-selectGhost');
+    expect(JSON.stringify(trigger?.children)).toContain('wb-selectValue');
+  });
+
+  it('★ search=false：锚点仍是触发钮（折叠左栏那个下拉要的就是"点开直接是列表"）', () => {
+    const root = render({ search: false });
+    const anchor = elementsOf(menuOf(root).props['anchor']);
+
+    expect(anchor.some((one) => one.type === 'button')).toBe(true);
+    const classes = anchor.map((one) => one.props?.['className']).filter((one) => typeof one === 'string');
+    expect(classes).not.toContain('wb-selectSearch');
+    expect(inputOf(menuOf(root).props['anchor'])).toBeUndefined();
+  });
+
   it('禁用：触发钮真的 disabled（压暗交给样式，别只在视觉上假装）', () => {
     const root = render({ disabled: true });
     const trigger = elementsOf(menuOf(root).props['anchor']).find((one) => one.type === 'button');
@@ -239,6 +276,32 @@ describe('SelectField：工作区那套下拉的公共形状', () => {
     expect(defaultSelectFilter(option, 'nope')).toBe(false);
   });
 
+  it('★ revealId：只给那一行的图标裹上标记（开列表时靠它滚进可视区），别行一个字节不变', () => {
+    const items = selectEntries(
+      [
+        { value: 'a', label: '甲', icon: <span>甲</span> },
+        { value: 'b', label: '乙', icon: <span>乙</span> },
+      ],
+      undefined,
+      'b',
+    );
+    const iconOf = (id: string): unknown =>
+      (items.find((one) => (one as { id?: string }).id === id) as { icon?: unknown } | undefined)?.icon;
+
+    expect(marked(elementsOf(iconOf('a')))).toBe(false);
+    expect(marked(elementsOf(iconOf('b')))).toBe(true);
+  });
+
+  it('★ revealId 撞上没有图标的行：退而标记它的文字（标记只落一处）', () => {
+    const items = selectEntries([{ value: 'a', label: '甲' }], undefined, 'a');
+    const row = items.find((one) => (one as { id?: string }).id === 'a') as
+      | { label?: unknown; icon?: unknown }
+      | undefined;
+
+    expect(row?.icon).toBeUndefined();
+    expect(marked(elementsOf(row?.label))).toBe(true);
+  });
+
   it('条目构造：图标与禁用照传，分组标题只在换组时出现一次', () => {
     const items = selectEntries(
       [

package/src/components/SelectField.tsx

@@ -1,15 +1,10 @@
 import type { KeyboardEvent as ReactKeyboardEvent, ReactNode, RefObject } from 'react';
 import type { MenuEntry, MenuItem } from '@deepseek-ai/dsh-client-ui-primitives';
 import { h, useEffect, useMemo, useRef, useState } from '../lib/react.js';
-import {
-  IconChevronDownOutlineRegular,
-  IconSearchOutlineRegular,
-  Menu,
-  TextShimmer,
-} from '@deepseek-ai/dsh-client-ui-primitives';
+import { IconSearchOutlineRegular, Menu } from '@deepseek-ai/dsh-client-ui-primitives';
+import { selectLoadingNode, selectTriggerNode } from './SelectFieldNodes.js';
 import { Field } from './Field.js';
 import { TextField } from './TextField.js';
-import { Spinner } from './Spinner.js';
 import './SelectField.css';
 
 export interface SelectFieldOption {
@@ -56,6 +51,8 @@ export interface SelectFieldProps {
   readonly onFooter?: (() => void) | undefined;
   readonly selection?: 'check' | 'fill' | undefined;
   readonly variant?: 'ghost' | 'boxed' | undefined;
+  readonly iconOnly?: boolean | undefined;
+  readonly revealId?: string | undefined;
   readonly ariaLabel?: string | undefined;
   readonly title?: string | undefined;
   readonly id?: string | undefined;
@@ -71,75 +68,54 @@ function mergeClass(...parts: readonly (string | undefined)[]): string {
   return parts.filter((one) => one !== undefined && one !== '').join(' ');
 }
 
-function itemOf(option: SelectFieldOption): MenuItem {
+function triggerClassOf(variantClass: string | undefined, iconOnly: boolean): string {
+  return mergeClass('wb-selectTrigger', variantClass, iconOnly ? 'wb-selectIconOnly' : undefined);
+}
+
+function itemOf(option: SelectFieldOption, revealId: string | undefined): MenuItem {
+  const mark = option.value === revealId;
+  if (!mark) {
+    return {
+      id: option.value,
+      label: option.label,
+      ...(option.icon === undefined ? {} : { icon: option.icon }),
+      ...(option.disabled === true ? { disabled: true } : {}),
+    };
+  }
+  const revealed = (node: ReactNode): ReactNode => (
+    <span className="wb-selectReveal" data-wb-select-reveal="">
+      {node}
+    </span>
+  );
   return {
     id: option.value,
-    label: option.label,
-    ...(option.icon === undefined ? {} : { icon: option.icon }),
+    label: option.icon === undefined ? revealed(option.label) : option.label,
+    ...(option.icon === undefined ? {} : { icon: revealed(option.icon) }),
     ...(option.disabled === true ? { disabled: true } : {}),
   };
 }
 
-function triggerNode(args: {
-  readonly id: string | undefined;
-  readonly className: string;
-  readonly disabled: boolean;
-  readonly invalid: boolean;
-  readonly open: boolean;
-  readonly ariaLabel: string | undefined;
-  readonly title: string | undefined;
-  readonly icon: ReactNode | undefined;
-  readonly value: ReactNode;
-  readonly onOpen: () => void;
-}): ReactNode {
-  return (
-    <button
-      type="button"
-      id={args.id}
-      className={args.className}
-      disabled={args.disabled}
-      aria-haspopup="listbox"
-      aria-expanded={args.open}
-      aria-invalid={args.invalid || undefined}
-      aria-label={args.ariaLabel}
-      title={args.title}
-      onClick={args.onOpen}
-    >
-      {args.icon === undefined ? null : <span className="wb-selectIcon">{args.icon}</span>}
-      <span className="wb-selectValue">{args.value}</span>
-      <span className="wb-selectChevron">
-        <IconChevronDownOutlineRegular size={14} />
-      </span>
-    </button>
-  );
+function revealNode(): HTMLElement | null {
+  const found = document.querySelector('[data-wb-select-reveal]');
+  return found instanceof HTMLElement ? found : null;
 }
 
-function loadingNode(args: {
-  readonly id: string | undefined;
-  readonly className: string;
-  readonly invalid: boolean;
-  readonly ariaLabel: string | undefined;
-  readonly loadingText: string | undefined;
-}): ReactNode {
-  return (
-    <button
-      type="button"
-      id={args.id}
-      className={`${args.className} wb-selectLoading`}
-      disabled
-      aria-busy="true"
-      aria-invalid={args.invalid || undefined}
-      aria-label={args.ariaLabel}
-      title={args.loadingText}
-    >
-      <span className="wb-selectValue">
-        <TextShimmer active>{args.loadingText ?? '…'}</TextShimmer>
-      </span>
-      <span className="wb-selectChevron">
-        <Spinner size={14} />
-      </span>
-    </button>
-  );
+function useRevealOnOpen(open: boolean, revealId: string | undefined): void {
+  useEffect(() => {
+    if (!open || revealId === undefined) return;
+    revealNode()?.scrollIntoView({ block: 'nearest' });
+  }, [open, revealId]);
+}
+
+function selectValueNode(
+  current: SelectFieldOption | undefined,
+  renderValue: SelectFieldProps['renderValue'],
+  placeholder: ReactNode,
+): ReactNode {
+  if (current === undefined) {
+    return <span className="wb-selectPlaceholder">{placeholder ?? '—'}</span>;
+  }
+  return renderValue === undefined ? current.label : renderValue(current);
 }
 
 function searchNode(args: {
@@ -269,6 +245,7 @@ export function stepSelectCursor(
 export function selectEntries(
   shown: readonly SelectFieldOption[],
   emptyText: string | undefined,
+  revealId?: string | undefined,
 ): readonly MenuEntry[] {
   if (shown.length === 0) {
     return emptyText === undefined ? [] : [{ type: 'label', id: EMPTY_ID, text: emptyText }];
@@ -280,7 +257,7 @@ export function selectEntries(
       out.push({ type: 'label', id: `__wb-select-group-${String(out.length)}`, text: option.group });
       group = option.group;
     }
-    out.push(itemOf(option));
+    out.push(itemOf(option, revealId));
   }
   return out;
 }
@@ -368,6 +345,8 @@ export function SelectField(props: SelectFieldProps) {
     fallback,
     selection = 'fill',
     variant = 'boxed',
+    iconOnly = false,
+    revealId,
     ariaLabel,
     title,
     id,
@@ -377,15 +356,17 @@ export function SelectField(props: SelectFieldProps) {
   } = props;
   const state = useSelectState(props);
   const current = options.find((option) => option.value === value);
+
+  useRevealOnOpen(state.open, revealId);
   const variantClass = variant === 'ghost' ? 'wb-selectGhost' : undefined;
-  const triggerClass = mergeClass('wb-selectTrigger', variantClass);
+  const triggerClass = triggerClassOf(variantClass, iconOnly);
 
   if (loading) {
     return framed(
       label,
       hint,
       className,
-      loadingNode({ id, className: triggerClass, invalid, ariaLabel, loadingText }),
+      selectLoadingNode({ id, className: triggerClass, invalid, ariaLabel, loadingText }),
     );
   }
 
@@ -406,7 +387,7 @@ export function SelectField(props: SelectFieldProps) {
     );
   }
 
-  const trigger = triggerNode({
+  const trigger = selectTriggerNode({
     id,
     className: triggerClass,
     disabled,
@@ -415,14 +396,8 @@ export function SelectField(props: SelectFieldProps) {
     ariaLabel,
     title,
     icon,
-    value:
-      current === undefined ? (
-        <span className="wb-selectPlaceholder">{placeholder ?? '—'}</span>
-      ) : renderValue === undefined ? (
-        current.label
-      ) : (
-        renderValue(current)
-      ),
+    value: selectValueNode(current, renderValue, placeholder),
+    iconOnly,
     onOpen: () => state.setOpen(true),
   });
 
@@ -469,7 +444,7 @@ export function SelectField(props: SelectFieldProps) {
       anchor,
       selection,
       selectedId: selectCursorValue(state.shown, state.cursor) ?? undefined,
-      items: selectEntries(state.shown, state.empty),
+      items: selectEntries(state.shown, state.empty, revealId),
       footer:
         footer === undefined
           ? undefined

package/src/components/SelectFieldNodes.tsx

@@ -0,0 +1,77 @@
+import type { ReactNode } from 'react';
+import { Fragment, h } from '../lib/react.js';
+import {
+  IconChevronDownOutlineRegular,
+  TextShimmer,
+} from '@deepseek-ai/dsh-client-ui-primitives';
+import { Spinner } from './Spinner.js';
+
+export function selectTriggerNode(args: {
+  readonly id: string | undefined;
+  readonly className: string;
+  readonly disabled: boolean;
+  readonly invalid: boolean;
+  readonly open: boolean;
+  readonly ariaLabel: string | undefined;
+  readonly title: string | undefined;
+  readonly icon: ReactNode | undefined;
+  readonly value: ReactNode;
+  readonly iconOnly: boolean;
+  readonly onOpen: () => void;
+}): ReactNode {
+  return (
+    <button
+      type="button"
+      id={args.id}
+      className={args.className}
+      disabled={args.disabled}
+      aria-haspopup="listbox"
+      aria-expanded={args.open}
+      aria-invalid={args.invalid || undefined}
+      aria-label={args.ariaLabel}
+      title={args.title}
+      onClick={args.onOpen}
+    >
+      {args.iconOnly ? (
+        <span className="wb-selectIcon">{args.icon}</span>
+      ) : (
+        <Fragment>
+          {args.icon === undefined ? null : <span className="wb-selectIcon">{args.icon}</span>}
+          <span className="wb-selectValue">{args.value}</span>
+          <span className="wb-selectChevron">
+            <IconChevronDownOutlineRegular size={14} />
+          </span>
+        </Fragment>
+      )}
+    </button>
+  );
+}
+
+export function selectLoadingNode(args: {
+  readonly id: string | undefined;
+  readonly className: string;
+  readonly invalid: boolean;
+  readonly ariaLabel: string | undefined;
+  readonly loadingText: string | undefined;
+}): ReactNode {
+  return (
+    <button
+      type="button"
+      id={args.id}
+      className={`${args.className} wb-selectLoading`}
+      disabled
+      aria-busy="true"
+      aria-invalid={args.invalid || undefined}
+      aria-label={args.ariaLabel}
+      title={args.loadingText}
+    >
+      <span className="wb-selectValue">
+        <TextShimmer active>{args.loadingText ?? '…'}</TextShimmer>
+      </span>
+      <span className="wb-selectChevron">
+        <Spinner size={14} />
+      </span>
+    </button>
+  );
+}
+

package/src/config/constants.ts

@@ -28,6 +28,8 @@ export const UNITS_SERVICE = "workbenchUnits";
 
 export const PANEL_STATE_SERVICE = "workbenchPanelState";
 
+export const DIY_DEBUG_SERVICE = "workbenchDiyDebug";
+
 export const PANEL_LIST_LIMIT = 50;
 
 export const OPENCLI_TIMEOUT_MS = 120_000;

package/src/host/tool-kit.ts

@@ -6,6 +6,11 @@ export function sessionWorkspace(exec: DshToolRunContext | undefined): string |
   return typeof cwd === 'string' && cwd.trim() !== '' ? cwd.trim() : null;
 }
 
+export function sessionIdOf(exec: DshToolRunContext | undefined): string | null {
+  const id = exec?.agent?.session?.id;
+  return typeof id === 'string' && id.trim() !== '' ? id.trim() : null;
+}
+
 export function textOutput(text: string): Array<Record<string, unknown>> {
   return [{ type: 'text', text }];
 }

package/src/host.ts

@@ -7,6 +7,7 @@ export * from './api/long-task.js';
 export * from './lib/text.js';
 export * from './lib/ui.js';
 export * from './lib/panel-state.js';
+export * from './lib/diy-debug.js';
 export * from './api/blocker-table.js';
 export * from './host/browser-find.js';
 export * from './host/browser-read.js';

package/src/i18n/en.ts

@@ -420,4 +420,13 @@ export const en: Record<keyof WorkbenchMessages, string> = {
   'configSync.noSource': 'This machine has no other profile to sync from',
   'configSync.emptyProviders': 'The workbench has no model provider yet — sync the llm- rows from some profile, or configure one under Models.',
   'configSync.failed': 'The sync did not go through; try again.',
+
+  'debug.status': 'Debugging',
+  'debug.stalled': 'Debug stalled',
+  'debug.tip.active': 'Debugging {unit} on the workshop board ({since}) · click to go back · tell the agent to pause when done',
+  'debug.tip.stalled': 'The debug is stalled — go back to the 工作台DIY screen · click to return',
+  'debug.back': 'Back to the workshop screen',
+  'debug.strip.active': 'Debugging · {unit} · {since}',
+  'debug.strip.note': 'Tell the agent to pause when you are done',
+  'debug.stripStalled': 'Debug stalled — tell the agent to continue',
 };

package/src/i18n/zh.ts

@@ -415,6 +415,15 @@ export const zh = {
   'configSync.noSource': '这台机器上只有工作台这一个 profile，没有可同步的来源',
   'configSync.emptyProviders': '工作台还没有任何模型供应商 —— 去「配置同步」从某个 profile 把 llm- 那几行搬过来，或自己去「模型」里配。',
   'configSync.failed': '同步没成功，再试一次。',
+
+  'debug.status': '调试中',
+  'debug.stalled': '调试搁置',
+  'debug.tip.active': '工坊那块板上正在调试 {unit}（{since}）· 点一下回到那一屏 · 要停就对 agent 说一句',
+  'debug.tip.stalled': '调试被搁置了 —— 要你回到工作台DIY 那一屏 · 点一下回去',
+  'debug.back': '回到工坊那一屏',
+  'debug.strip.active': '调试中 · {unit} · {since}',
+  'debug.strip.note': '要停就对 agent 说一句「暂停」',
+  'debug.stripStalled': '调试搁置 —— 对 agent 说一句「继续」',
 } as const;
 
 export type WorkbenchMessages = typeof zh;

package/src/index.ts

@@ -45,6 +45,7 @@ export * from './i18n/zh.js';
 export * from './lib/blocker-action.js';
 export * from './lib/busy.js';
 export * from './lib/form-problem.js';
+export * from './lib/diy-debug.js';
 export * from './lib/panel-state.js';
 export * from './lib/react.js';
 export * from './lib/text.js';

package/src/lib/diy-debug.test.ts

@@ -0,0 +1,103 @@
+import { describe, expect, it } from 'vitest';
+import { DEBUG_STALE_MS, createDebugStore, type DebugPact } from './diy-debug.js';
+
+const pact = (sessionId: string, now = 1000, unit = 'demo'): DebugPact => ({
+  sessionId,
+  workspace: '/w/diy',
+  board: '/w/diy',
+  unit,
+  name: unit,
+  now,
+});
+
+describe('调试态：一台机器一次一条，谁开始谁收工', () => {
+  it('★ 开始 ⇒ debugging，把目标、开始时间与会话都记下', () => {
+    const store = createDebugStore();
+    const move = store.begin(pact('s1', 1000));
+
+    expect(move.ok).toBe(true);
+    if (!move.ok) return;
+    expect(move.state.phase).toBe('debugging');
+    expect(move.state.unit).toBe('demo');
+    expect(move.state.startedAt).toBe(1000);
+    expect(store.live(1000)).toEqual(move.state);
+  });
+
+  it('★★ 另一场调试占着就不许再开（一次一台机器只允许一场）', () => {
+    const store = createDebugStore();
+    store.begin(pact('s1', 1000));
+
+    const second = store.begin(pact('s2', 1200));
+
+    expect(second).toEqual({ ok: false, code: 'held-by-other' });
+    expect(store.live(1200)?.sessionId).toBe('s1');
+  });
+
+  it('★ 同一个会话再来一次 ⇒ already-held（换目标要先收工，或接着看用 resume）', () => {
+    const store = createDebugStore();
+    store.begin(pact('s1', 1000));
+
+    expect(store.begin(pact('s1', 1100))).toEqual({ ok: false, code: 'already-held' });
+  });
+
+  it('★ 暂停 / 继续 / 收工的正常路径：每回都换 at，不动 startedAt', () => {
+    const store = createDebugStore();
+    store.begin(pact('s1', 1000));
+
+    const paused = store.pause('s1', 2000);
+    expect(paused.ok && paused.state.phase).toBe('paused');
+    expect(paused.ok && paused.state.at).toBe(2000);
+
+    const resumed = store.resume('s1', 3000);
+    expect(resumed.ok && resumed.state.phase).toBe('debugging');
+    expect(resumed.ok && resumed.state.startedAt).toBe(1000);
+
+    const stopped = store.stop('s1', 4000);
+    expect(stopped.ok && stopped.state.unit).toBe('demo');
+    expect(store.live(4000)).toBeNull();
+  });
+
+  it('★ 没开始就暂停 / 继续 / 收工 ⇒ none；暂停态里再暂停 ⇒ already-paused；调试中再继续 ⇒ already-debugging', () => {
+    const store = createDebugStore();
+
+    expect(store.pause('s1', 1000)).toEqual({ ok: false, code: 'none' });
+    expect(store.resume('s1', 1000)).toEqual({ ok: false, code: 'none' });
+    expect(store.stop('s1', 1000)).toEqual({ ok: false, code: 'none' });
+
+    store.begin(pact('s1', 1000));
+    expect(store.resume('s1', 1000)).toEqual({ ok: false, code: 'already-debugging' });
+    expect(store.pause('s1', 2000).ok).toBe(true);
+    expect(store.pause('s1', 2500)).toEqual({ ok: false, code: 'already-paused' });
+  });
+
+  it('★★ 别人不许动我的调试态（not-owner）—— 谁开始谁收工', () => {
+    const store = createDebugStore();
+    store.begin(pact('s1', 1000));
+
+    expect(store.pause('s2', 1500)).toEqual({ ok: false, code: 'not-owner' });
+    expect(store.resume('s2', 1500)).toEqual({ ok: false, code: 'not-owner' });
+    expect(store.stop('s2', 1500)).toEqual({ ok: false, code: 'not-owner' });
+    expect(store.live(1500)?.sessionId).toBe('s1');
+  });
+
+  it('★★ 屏漂了由闸自动落 paused（stall）；已经在 paused 就 already-paused', () => {
+    const store = createDebugStore();
+    store.begin(pact('s1', 1000));
+
+    const st = store.stall('s1', 2000);
+
+    expect(st.ok && st.state.phase).toBe('paused');
+    expect(store.live(2000)?.phase).toBe('paused');
+    expect(store.stall('s1', 2100)).toEqual({ ok: false, code: 'already-paused' });
+    expect(store.stall('s2', 2100)).toEqual({ ok: false, code: 'not-owner' });
+  });
+
+  it('★ 过期当它不存在（时间隔太久，别把上一场调试留给下一个人）', () => {
+    const store = createDebugStore();
+    store.begin(pact('s1', 1000));
+
+    expect(store.live(1000 + DEBUG_STALE_MS)).not.toBeNull();
+    expect(store.live(1001 + DEBUG_STALE_MS)).toBeNull();
+    expect(store.begin(pact('s2', 1001 + DEBUG_STALE_MS)).ok).toBe(true);
+  });
+});