@dsh-workbench/shared 0.2.12 → 0.2.14

package/src/components/SelectField.tsx

@@ -5,11 +5,11 @@ import {
   IconChevronDownOutlineRegular,
   IconSearchOutlineRegular,
   Menu,
-  StateDot,
   TextShimmer,
 } from '@deepseek-ai/dsh-client-ui-primitives';
 import { Field } from './Field.js';
 import { TextField } from './TextField.js';
+import { Spinner } from './Spinner.js';
 import './SelectField.css';
 
 export interface SelectFieldOption {
@@ -48,6 +48,7 @@ export interface SelectFieldProps {
   readonly open?: boolean | undefined;
   readonly onOpenChange?: ((open: boolean) => void) | undefined;
   readonly disabled?: boolean | undefined;
+  readonly invalid?: boolean | undefined;
   readonly loading?: boolean | undefined;
   readonly loadingText?: string | undefined;
   readonly fallback?: SelectFieldFallback | undefined;
@@ -83,6 +84,7 @@ 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;
@@ -98,6 +100,7 @@ function triggerNode(args: {
       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}
@@ -114,6 +117,7 @@ function triggerNode(args: {
 function loadingNode(args: {
   readonly id: string | undefined;
   readonly className: string;
+  readonly invalid: boolean;
   readonly ariaLabel: string | undefined;
   readonly loadingText: string | undefined;
 }): ReactNode {
@@ -124,6 +128,7 @@ function loadingNode(args: {
       className={`${args.className} wb-selectLoading`}
       disabled
       aria-busy="true"
+      aria-invalid={args.invalid || undefined}
       aria-label={args.ariaLabel}
       title={args.loadingText}
     >
@@ -131,7 +136,7 @@ function loadingNode(args: {
         <TextShimmer active>{args.loadingText ?? '…'}</TextShimmer>
       </span>
       <span className="wb-selectChevron">
-        <StateDot state="ongoing" size={14} />
+        <Spinner size={14} />
       </span>
     </button>
   );
@@ -357,6 +362,7 @@ export function SelectField(props: SelectFieldProps) {
     footer,
     onFooter,
     disabled = false,
+    invalid = false,
     loading = false,
     loadingText,
     fallback,
@@ -379,7 +385,7 @@ export function SelectField(props: SelectFieldProps) {
       label,
       hint,
       className,
-      loadingNode({ id, className: triggerClass, ariaLabel, loadingText }),
+      loadingNode({ id, className: triggerClass, invalid, ariaLabel, loadingText }),
     );
   }
 
@@ -392,6 +398,7 @@ export function SelectField(props: SelectFieldProps) {
         id={id}
         name={name}
         className="wb-selectFallback"
+        invalid={invalid}
         aria-label={ariaLabel}
         value={fallback.value}
         onChange={(event) => fallback.onChange(event.currentTarget.value)}
@@ -403,6 +410,7 @@ export function SelectField(props: SelectFieldProps) {
     id,
     className: triggerClass,
     disabled,
+    invalid,
     open: state.open,
     ariaLabel,
     title,

package/src/components/Spinner.css

@@ -0,0 +1,6 @@
+
+.wb-spinner {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+}

package/src/components/Spinner.test.tsx

@@ -0,0 +1,35 @@
+import { describe, expect, it, vi } from 'vitest';
+
+vi.mock('../lib/react.js', async () => {
+  const actual = await vi.importActual<typeof import('../lib/react.js')>('../lib/react.js');
+  return { ...actual, h: (type: unknown, props?: unknown, ...children: unknown[]) => ({ type, props: props ?? {}, children }) };
+});
+vi.mock('./Spinner.css', () => ({ default: {} }));
+
+import { StateDot } from '@deepseek-ai/dsh-client-ui-primitives';
+import { Spinner } from './Spinner.js';
+
+describe('Spinner（loading 那颗）', () => {
+  it('画的是 dsh 的 ongoing 状态点（视觉只有这一处实现）', () => {
+    const node = Spinner({ size: 12 }) as unknown as { children: readonly { type: unknown; props: Record<string, unknown> }[] };
+
+    expect(node.children[0]?.type).toBe(StateDot);
+    expect(node.children[0]?.props['state']).toBe('ongoing');
+    expect(node.children[0]?.props['size']).toBe(12);
+  });
+
+  it('没给 label 时对读屏隐藏（它是装饰，话由旁边的文案说）', () => {
+    const node = Spinner({}) as unknown as { props: Record<string, unknown> };
+
+    expect(node.props['aria-hidden']).toBe(true);
+    expect(node.props['role']).toBeUndefined();
+  });
+
+  it('给了 label 就是一条状态播报', () => {
+    const node = Spinner({ label: '正在读环境' }) as unknown as { props: Record<string, unknown> };
+
+    expect(node.props['role']).toBe('status');
+    expect(node.props['aria-label']).toBe('正在读环境');
+    expect(node.props['aria-hidden']).toBeUndefined();
+  });
+});

package/src/components/Spinner.tsx

@@ -0,0 +1,19 @@
+import { StateDot } from '@deepseek-ai/dsh-client-ui-primitives';
+import { h } from '../lib/react.js';
+import './Spinner.css';
+
+export interface SpinnerProps {
+  readonly size?: number;
+  readonly label?: string | undefined;
+}
+
+export function Spinner({ size = 14, label }: SpinnerProps) {
+  return (
+    <span
+      className="wb-spinner"
+      {...(label === undefined ? { 'aria-hidden': true } : { role: 'status', 'aria-label': label })}
+    >
+      <StateDot state="ongoing" size={size} />
+    </span>
+  );
+}

package/src/components/TextField.css

@@ -27,6 +27,6 @@
 }
 
 :where(.wb-textField) {
-  min-height: var(--wb-len-32);
-  padding: var(--wb-len-6) var(--wb-len-12);
+  min-height: var(--wb-len-28);
+  padding: var(--wb-len-4) var(--wb-len-10);
 }

package/src/host.ts

@@ -8,17 +8,17 @@ export * from './lib/text.js';
 export * from './lib/ui.js';
 export * from './lib/panel-state.js';
 export * from './api/blocker-table.js';
+export * from './host/browser-find.js';
+export * from './host/browser-read.js';
 export * from './host/cli-error.js';
 export * from './host/data-root.js';
-export * from './host/browser-read.js';
-export * from './host/browser-find.js';
 export * from './host/facts.js';
 export * from './host/git.js';
 export * from './host/http.js';
 export * from './host/long-task.js';
 export * from './host/opencli-runtime.js';
-export * from './host/opencli.js';
 export * from './host/opencli-window.js';
+export * from './host/opencli.js';
 export * from './host/plugin-ledger.js';
 export * from './host/plugin-source.js';
 export * from './host/provision.js';

package/src/i18n/en.ts

@@ -48,6 +48,15 @@ export const en: Record<keyof WorkbenchMessages, string> = {
   'status.completed': 'Completed',
   'status.subagentsRunning.one': '{n} subagent running',
   'status.subagentsRunning.other': '{n} subagents running',
+  'project.attention.warning.one': '1 session waiting for you',
+  'project.attention.warning.other': '{n} sessions waiting for you',
+  'project.attention.running.one': '1 session running',
+  'project.attention.running.other': '{n} sessions running',
+  'project.attention.done.one': '1 session finished, unread',
+  'project.attention.done.other': '{n} sessions finished, unread',
+  'project.attention.state.warning': 'Approval',
+  'project.attention.state.running': 'Running',
+  'project.attention.state.done': 'New',
 
   'hover.copied': 'Copied',
   'time.now': 'just now',

package/src/i18n/zh.ts

@@ -46,6 +46,15 @@ export const zh = {
   'status.completed': '已完成',
   'status.subagentsRunning.one': '{n} 个子代理运行中',
   'status.subagentsRunning.other': '{n} 个子代理运行中',
+  'project.attention.warning.one': '1 个会话在等你点头',
+  'project.attention.warning.other': '{n} 个会话在等你点头',
+  'project.attention.running.one': '1 个会话在跑',
+  'project.attention.running.other': '{n} 个会话在跑',
+  'project.attention.done.one': '1 个会话跑完没看',
+  'project.attention.done.other': '{n} 个会话跑完没看',
+  'project.attention.state.warning': '待审批',
+  'project.attention.state.running': '在跑',
+  'project.attention.state.done': '新消息',
 
   'hover.copied': '已复制',
   'time.now': '刚刚',

package/src/index.ts

@@ -7,8 +7,8 @@ export * from './api/facts.js';
 export * from './api/host-write.js';
 export * from './api/long-task.js';
 export * from './api/unit-board.js';
-export * from './api/unit.js';
 export * from './api/unit-declaration.js';
+export * from './api/unit.js';
 export * from './api/workbench-client.js';
 export * from './api/workbench-contract.js';
 export * from './components/Activity.js';
@@ -19,18 +19,21 @@ export * from './components/CardAnchor.js';
 export * from './components/CardBoundary.js';
 export * from './components/CardHead.js';
 export * from './components/ChoiceGroup.js';
+export * from './components/Field.js';
+export * from './components/FormActions.js';
+export * from './components/FormRows.js';
+export * from './components/Link.js';
 export * from './components/LongTaskRow.js';
 export * from './components/Note.js';
 export * from './components/ResourceStates.js';
 export * from './components/Rows.js';
 export * from './components/SaveBar.js';
-export * from './components/SettingsSection.js';
 export * from './components/SelectField.js';
+export * from './components/SettingsSection.js';
+export * from './components/Spinner.js';
 export * from './components/Stack.js';
 export * from './components/StateBlock.js';
 export * from './components/TextField.js';
-export * from './components/Field.js';
-export * from './components/Link.js';
 export * from './components/board-module.js';
 export * from './components/icons.js';
 export * from './config/constants.js';
@@ -41,6 +44,7 @@ export * from './i18n/merge.js';
 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/panel-state.js';
 export * from './lib/react.js';
 export * from './lib/text.js';

package/src/lib/form-problem.test.ts

@@ -0,0 +1,76 @@
+import { describe, expect, it, vi } from 'vitest';
+import { firstProblemOf, revealFirstProblem } from './form-problem.js';
+
+function rootWith(problem: unknown): { readonly root: ParentNode; readonly queries: string[] } {
+  const queries: string[] = [];
+  const root = {
+    querySelector: (selector: string) => {
+      queries.push(selector);
+      return selector === '[data-wb-problem]' ? problem : null;
+    },
+  } as unknown as ParentNode;
+  return { root, queries };
+}
+
+interface ProblemStub {
+  readonly element: Element;
+  readonly queries: string[];
+  readonly scrollIntoView: ReturnType<typeof vi.fn>;
+  readonly focus: ReturnType<typeof vi.fn>;
+}
+
+function problemStub(options: { readonly scroll: boolean }): ProblemStub {
+  const queries: string[] = [];
+  const scrollIntoView = vi.fn();
+  const focus = vi.fn();
+  const element = {
+    scrollIntoView,
+    querySelector: (selector: string) => {
+      queries.push(selector);
+      return { focus };
+    },
+  } as unknown as Element;
+  if (!options.scroll) {
+    delete (element as { scrollIntoView?: unknown }).scrollIntoView;
+  }
+  return { element, queries, scrollIntoView, focus };
+}
+
+describe('firstProblemOf / revealFirstProblem', () => {
+  it('没有错误行就返回 null / false，什么也不碰', () => {
+    const empty = rootWith(null);
+    const missing = problemStub({ scroll: true });
+
+    expect(firstProblemOf(empty.root)).toBeNull();
+    expect(revealFirstProblem(rootWith(null).root)).toBe(false);
+    expect(missing.focus).not.toHaveBeenCalled();
+    expect(missing.scrollIntoView).not.toHaveBeenCalled();
+  });
+
+  it('第一处 [data-wb-problem] 就是它', () => {
+    const problem = problemStub({ scroll: true });
+    const found = rootWith(problem.element);
+
+    expect(firstProblemOf(found.root)).toBe(problem.element);
+    expect(found.queries).toEqual(['[data-wb-problem]']);
+  });
+
+  it('带进视口 + 聚焦里面第一个可聚焦控件，返回 true', () => {
+    const problem = problemStub({ scroll: true });
+
+    expect(revealFirstProblem(rootWith(problem.element).root)).toBe(true);
+    expect(problem.scrollIntoView).toHaveBeenCalledTimes(1);
+    expect(problem.scrollIntoView).toHaveBeenCalledWith({ block: 'nearest' });
+    expect(problem.queries).toHaveLength(1);
+    expect(problem.queries[0]).toContain('input:not([disabled])');
+    expect(problem.focus).toHaveBeenCalledTimes(1);
+  });
+
+  it('没有 scrollIntoView 也不炸（jsdom 缺它）：照样聚焦、照样返回 true', () => {
+    const problem = problemStub({ scroll: false });
+
+    expect(() => revealFirstProblem(rootWith(problem.element).root)).not.toThrow();
+    expect(revealFirstProblem(rootWith(problem.element).root)).toBe(true);
+    expect(problem.focus).toHaveBeenCalledTimes(2);
+  });
+});

package/src/lib/form-problem.ts

@@ -0,0 +1,22 @@
+const PROBLEM_SELECTOR = '[data-wb-problem]';
+
+const FOCUSABLE_SELECTOR = [
+  'input:not([disabled])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  'button:not([disabled])',
+  'a[href]',
+  '[tabindex]:not([tabindex="-1"])',
+].join(', ');
+
+export function firstProblemOf(root: ParentNode): Element | null {
+  return root.querySelector(PROBLEM_SELECTOR);
+}
+
+export function revealFirstProblem(root: ParentNode): boolean {
+  const problem = firstProblemOf(root);
+  if (problem === null) return false;
+  problem.scrollIntoView?.({ block: 'nearest' });
+  problem.querySelector<HTMLElement>(FOCUSABLE_SELECTOR)?.focus?.();
+  return true;
+}

package/src/components/SaveBar.css

@@ -1,7 +0,0 @@
-
-.wb-formActions {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--wb-len-8);
-}