@dsh-workbench/shared 0.2.10 → 0.2.11

package/src/components/SelectField.tsx

@@ -0,0 +1,486 @@
+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,
+  StateDot,
+  TextShimmer,
+} from '@deepseek-ai/dsh-client-ui-primitives';
+import { Field } from './Field.js';
+import { TextField } from './TextField.js';
+import './SelectField.css';
+
+export interface SelectFieldOption {
+  readonly value: string;
+  readonly label: ReactNode;
+  readonly searchText?: string | undefined;
+  readonly icon?: ReactNode | undefined;
+  readonly group?: string | undefined;
+  readonly disabled?: boolean | undefined;
+}
+
+export interface SelectFieldFallback {
+  readonly value: string;
+  readonly onChange: (next: string) => void;
+}
+
+export interface SelectFieldFooter {
+  readonly label: ReactNode;
+  readonly icon?: ReactNode | undefined;
+}
+
+export interface SelectFieldProps {
+  readonly value: string;
+  readonly options: readonly SelectFieldOption[];
+  readonly onChange: (value: string) => void;
+  readonly label?: ReactNode | undefined;
+  readonly hint?: ReactNode | undefined;
+  readonly icon?: ReactNode | undefined;
+  readonly renderValue?: ((current: SelectFieldOption | undefined) => ReactNode) | undefined;
+  readonly placeholder?: ReactNode | undefined;
+  readonly search?: boolean | undefined;
+  readonly searchLabel?: string | undefined;
+  readonly searchPlaceholder?: string | undefined;
+  readonly filter?: ((option: SelectFieldOption, query: string) => boolean) | undefined;
+  readonly emptyText?: string | ((query: string) => string) | undefined;
+  readonly open?: boolean | undefined;
+  readonly onOpenChange?: ((open: boolean) => void) | undefined;
+  readonly disabled?: boolean | undefined;
+  readonly loading?: boolean | undefined;
+  readonly loadingText?: string | undefined;
+  readonly fallback?: SelectFieldFallback | undefined;
+  readonly footer?: SelectFieldFooter | undefined;
+  readonly onFooter?: (() => void) | undefined;
+  readonly selection?: 'check' | 'fill' | undefined;
+  readonly variant?: 'ghost' | 'boxed' | undefined;
+  readonly ariaLabel?: string | undefined;
+  readonly title?: string | undefined;
+  readonly id?: string | undefined;
+  readonly name?: string | undefined;
+  readonly className?: string | undefined;
+  readonly menuClassName?: string | undefined;
+}
+
+const FOOTER_ID = '__wb-select-footer__';
+const EMPTY_ID = '__wb-select-empty__';
+
+function mergeClass(...parts: readonly (string | undefined)[]): string {
+  return parts.filter((one) => one !== undefined && one !== '').join(' ');
+}
+
+function itemOf(option: SelectFieldOption): MenuItem {
+  return {
+    id: option.value,
+    label: option.label,
+    ...(option.icon === undefined ? {} : { icon: option.icon }),
+    ...(option.disabled === true ? { disabled: true } : {}),
+  };
+}
+
+function triggerNode(args: {
+  readonly id: string | undefined;
+  readonly className: string;
+  readonly disabled: 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-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 loadingNode(args: {
+  readonly id: string | undefined;
+  readonly className: string;
+  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-label={args.ariaLabel}
+      title={args.loadingText}
+    >
+      <span className="wb-selectValue">
+        <TextShimmer active>{args.loadingText ?? '…'}</TextShimmer>
+      </span>
+      <span className="wb-selectChevron">
+        <StateDot state="ongoing" size={14} />
+      </span>
+    </button>
+  );
+}
+
+function searchNode(args: {
+  readonly boxRef: RefObject<HTMLSpanElement | null>;
+  readonly className: string;
+  readonly id: string | undefined;
+  readonly name: string | undefined;
+  readonly ariaLabel: string | undefined;
+  readonly placeholder: string | undefined;
+  readonly query: string;
+  readonly onQuery: (next: string) => void;
+  readonly onKey: (event: ReactKeyboardEvent<HTMLInputElement>) => void;
+}): ReactNode {
+  return (
+    <span ref={args.boxRef} className={args.className}>
+      <span className="wb-selectSearchIcon">
+        <IconSearchOutlineRegular size={14} />
+      </span>
+      <TextField
+        id={args.id}
+        name={args.name}
+        className="wb-selectSearchInput"
+        aria-label={args.ariaLabel}
+        placeholder={args.placeholder}
+        value={args.query}
+        onChange={(event) => args.onQuery(event.currentTarget.value)}
+        onKeyDown={(event) => {
+          if (event.nativeEvent.isComposing) return;
+          args.onKey(event);
+        }}
+      />
+    </span>
+  );
+}
+
+function menuNode(args: {
+  readonly open: boolean;
+  readonly listClassName: string;
+  readonly anchor: ReactNode;
+  readonly selection: 'check' | 'fill';
+  readonly selectedId: string | undefined;
+  readonly items: readonly MenuEntry[];
+  readonly footer: readonly MenuEntry[] | undefined;
+  readonly onPick: (id: string) => void;
+  readonly onCancel: () => void;
+}): ReactNode {
+  return (
+    <Menu
+      open={args.open}
+      portal
+      className="wb-selectAnchor"
+      listClassName={args.listClassName}
+      anchor={args.anchor}
+      align="start"
+      side="bottom"
+      selection={args.selection}
+      selectedId={args.selectedId}
+      items={args.items}
+      footer={args.footer}
+      onSelect={args.onPick}
+      onClose={args.onCancel}
+    />
+  );
+}
+
+function framed(
+  label: ReactNode | undefined,
+  hint: ReactNode | undefined,
+  className: string | undefined,
+  control: ReactNode,
+): ReactNode {
+  const inner =
+    label === undefined
+      ? hint === undefined
+        ? control
+        : (
+            <span className="wb-select">
+              {control}
+              <span className="wb-selectHint">{hint}</span>
+            </span>
+          )
+      : (
+          <Field label={label} hint={hint}>
+            {control}
+          </Field>
+        );
+  return className === undefined ? inner : <div className={className}>{inner}</div>;
+}
+
+export function searchTextOf(option: SelectFieldOption): string {
+  if (option.searchText !== undefined) return option.searchText;
+  return typeof option.label === 'string' ? option.label : '';
+}
+
+export function defaultSelectFilter(option: SelectFieldOption, query: string): boolean {
+  const needle = query.trim().toLowerCase();
+  if (needle === '') return true;
+  return searchTextOf(option).toLowerCase().includes(needle);
+}
+
+export function filterSelectOptions(
+  options: readonly SelectFieldOption[],
+  query: string,
+  filter: (option: SelectFieldOption, query: string) => boolean = defaultSelectFilter,
+): readonly SelectFieldOption[] {
+  return options.filter((option) => filter(option, query));
+}
+
+export function selectCursorValue(
+  shown: readonly SelectFieldOption[],
+  cursor: number | null,
+): string | null {
+  if (cursor === null || shown.length === 0) return null;
+  return shown[Math.min(cursor, shown.length - 1)]?.value ?? null;
+}
+
+export function stepSelectCursor(
+  shown: readonly SelectFieldOption[],
+  cursor: number | null,
+  step: 1 | -1,
+): number | null {
+  if (shown.length === 0) return null;
+  if (cursor === null) return step === 1 ? 0 : shown.length - 1;
+  return (cursor + step + shown.length) % shown.length;
+}
+
+export function selectEntries(
+  shown: readonly SelectFieldOption[],
+  emptyText: string | undefined,
+): readonly MenuEntry[] {
+  if (shown.length === 0) {
+    return emptyText === undefined ? [] : [{ type: 'label', id: EMPTY_ID, text: emptyText }];
+  }
+  const out: MenuEntry[] = [];
+  let group: string | null = null;
+  for (const option of shown) {
+    if (option.group !== undefined && option.group !== group) {
+      out.push({ type: 'label', id: `__wb-select-group-${String(out.length)}`, text: option.group });
+      group = option.group;
+    }
+    out.push(itemOf(option));
+  }
+  return out;
+}
+
+function useSelectState(props: SelectFieldProps) {
+  const { options, filter = defaultSelectFilter, emptyText, open: openProp, onOpenChange } = props;
+  const [openState, setOpenState] = useState(false);
+  const [query, setQuery] = useState('');
+  const [cursor, setCursor] = useState<number | null>(null);
+  const boxRef = useRef<HTMLSpanElement | null>(null);
+  const triggerRef = useRef<HTMLButtonElement | null>(null);
+  const wasOpenRef = useRef(false);
+  const pickedRef = useRef(false);
+  const closedByUsRef = useRef(false);
+
+  const open = openProp ?? openState;
+  const setOpen = (next: boolean): void => {
+    if (openProp === undefined) setOpenState(next);
+    onOpenChange?.(next);
+  };
+
+  useEffect(() => {
+    if (!open || props.search === false) return;
+    boxRef.current?.querySelector('input')?.focus();
+  }, [open, props.search]);
+
+  useEffect(() => {
+    if (open) {
+      wasOpenRef.current = true;
+      return;
+    }
+    if (!wasOpenRef.current) return;
+    wasOpenRef.current = false;
+    const closedByUs = closedByUsRef.current;
+    const picked = pickedRef.current;
+    closedByUsRef.current = false;
+    pickedRef.current = false;
+    if (!closedByUs || picked) return;
+    triggerRef.current?.focus();
+  }, [open]);
+
+  const shown = useMemo(() => filterSelectOptions(options, query, filter), [options, query, filter]);
+  const close = (picked: boolean): void => {
+    closedByUsRef.current = true;
+    pickedRef.current = picked;
+    setOpen(false);
+    setQuery('');
+    setCursor(null);
+  };
+
+  return {
+    open,
+    setOpen,
+    query,
+    cursor,
+    setCursor,
+    setQuery,
+    shown,
+    close,
+    boxRef,
+    triggerRef,
+    empty: typeof emptyText === 'function' ? emptyText(query) : emptyText,
+  };
+}
+
+export function SelectField(props: SelectFieldProps) {
+  const {
+    value,
+    options,
+    onChange,
+    label,
+    hint,
+    icon,
+    renderValue,
+    placeholder,
+    search = true,
+    searchLabel,
+    searchPlaceholder,
+    footer,
+    onFooter,
+    disabled = false,
+    loading = false,
+    loadingText,
+    fallback,
+    selection = 'fill',
+    variant = 'boxed',
+    ariaLabel,
+    title,
+    id,
+    name,
+    className,
+    menuClassName,
+  } = props;
+  const state = useSelectState(props);
+  const current = options.find((option) => option.value === value);
+  const variantClass = variant === 'ghost' ? 'wb-selectGhost' : undefined;
+  const triggerClass = mergeClass('wb-selectTrigger', variantClass);
+
+  if (loading) {
+    return framed(
+      label,
+      hint,
+      className,
+      loadingNode({ id, className: triggerClass, ariaLabel, loadingText }),
+    );
+  }
+
+  if (fallback !== undefined && options.length === 0) {
+    return framed(
+      label,
+      hint,
+      className,
+      <TextField
+        id={id}
+        name={name}
+        className="wb-selectFallback"
+        aria-label={ariaLabel}
+        value={fallback.value}
+        onChange={(event) => fallback.onChange(event.currentTarget.value)}
+      />,
+    );
+  }
+
+  const trigger = triggerNode({
+    id,
+    className: triggerClass,
+    disabled,
+    open: state.open,
+    ariaLabel,
+    title,
+    icon,
+    value:
+      current === undefined ? (
+        <span className="wb-selectPlaceholder">{placeholder ?? '—'}</span>
+      ) : renderValue === undefined ? (
+        current.label
+      ) : (
+        renderValue(current)
+      ),
+    onOpen: () => state.setOpen(true),
+  });
+
+  const anchor =
+    state.open && search
+      ? searchNode({
+          boxRef: state.boxRef,
+          className: mergeClass('wb-selectSearch', variantClass),
+          id,
+          name,
+          ariaLabel: searchLabel,
+          placeholder: searchPlaceholder,
+          query: state.query,
+          onQuery: (next) => {
+            state.setQuery(next);
+            state.setCursor(null);
+          },
+          onKey: (event) => {
+            if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+              event.stopPropagation();
+              event.preventDefault();
+              state.setCursor((at) =>
+                stepSelectCursor(state.shown, at, event.key === 'ArrowDown' ? 1 : -1),
+              );
+              return;
+            }
+            if (event.key !== 'Enter') return;
+            event.stopPropagation();
+            const pick = state.shown[Math.min(state.cursor ?? 0, state.shown.length - 1)];
+            if (pick === undefined) return;
+            state.close(true);
+            onChange(pick.value);
+          },
+        })
+      : trigger;
+
+  return framed(
+    label,
+    hint,
+    className,
+    menuNode({
+      open: state.open,
+      listClassName: mergeClass('wb-selectMenu', menuClassName),
+      anchor,
+      selection,
+      selectedId: selectCursorValue(state.shown, state.cursor) ?? undefined,
+      items: selectEntries(state.shown, state.empty),
+      footer:
+        footer === undefined
+          ? undefined
+          : [
+              {
+                id: FOOTER_ID,
+                label: footer.label,
+                ...(footer.icon === undefined ? {} : { icon: footer.icon }),
+              },
+            ],
+      onPick: (picked) => {
+        state.close(true);
+        if (picked === FOOTER_ID) {
+          onFooter?.();
+          return;
+        }
+        onChange(picked);
+      },
+      onCancel: () => state.close(false),
+    }),
+  );
+}

package/src/components/SettingsSection.css

@@ -3,7 +3,7 @@ section.wb-settings {
   display: flex;
   flex-direction: column;
   gap: var(--wb-len-12);
-  padding: 0;
+  padding: var(--wb-len-12) var(--wb-len-16);
   border: 0;
   border-radius: var(--dsw-radius-md);
   background: var(--dsw-alias-settings-card-fill);
@@ -19,7 +19,7 @@ section.wb-settings {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: var(--dsw-font-base-16-font-size);
+  font-size: var(--dsw-font-s-strong-14-font-size);
   line-height: var(--wb-line-24);
   font-weight: 500;
   color: var(--dsw-alias-label-primary);

package/src/components/TextField.css

@@ -13,6 +13,11 @@
   box-shadow: inset 0 0 0 0.5px var(--dsw-alias-state-business-primary);
 }
 
+.wb-textField:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
 .wb-textField[aria-invalid='true'] {
   border-color: var(--dsw-alias-state-error-primary);
 }

package/src/components/icons.tsx

@@ -105,6 +105,25 @@ export function IconModules({ size = 16 }: IconProps) {
   );
 }
 
+export function IconModuleMark({ size = 16 }: IconProps) {
+  return (
+    <Shell size={size} viewBox="0 0 24 24">
+      <defs>
+        <linearGradient id="workbench-module-mark" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" stopColor="#3b82f6" />
+          <stop offset="55%" stopColor="#8b5cf6" />
+          <stop offset="100%" stopColor="#14b8a6" />
+        </linearGradient>
+      </defs>
+      <rect width={24} height={24} rx={7} fill="url(#workbench-module-mark)" />
+      <rect x="4.6" y="4.6" width="6.2" height="6.2" rx="1.9" fill="#ffffff" />
+      <rect x="13.2" y="4.6" width="6.2" height="6.2" rx="1.9" fill="#ffffff" fillOpacity={0.78} />
+      <rect x="4.6" y="13.2" width="6.2" height="6.2" rx="1.9" fill="#ffffff" fillOpacity={0.78} />
+      <rect x="13.2" y="13.2" width="6.2" height="6.2" rx="1.9" fill="#ffffff" />
+    </Shell>
+  );
+}
+
 export function IconPanelScreen({ size = 16 }: IconProps) {
   return (
     <svg

package/src/host/tool-approval.ts

@@ -63,6 +63,7 @@ export interface ApprovalCall {
 
 export type ApprovalVerdict =
   | { readonly kind: 'read' }
+  | { readonly kind: 'allow' }
   | {
       readonly kind: 'ask';
       readonly reason: string;
@@ -116,7 +117,7 @@ export async function approvalFor(
     };
   }
 
-  if (verdict?.kind === 'read') return undefined;
+  if (verdict?.kind === 'read' || verdict?.kind === 'allow') return undefined;
 
   if (verdict?.kind !== 'ask') {
     return {

package/src/host/tool-kit.ts

@@ -39,12 +39,12 @@ export function commandHintFor(names: CommandHintNames): CommandHint {
 
       const advice =
         `这条命令（${command}）在这份 ${names.plugin} 插件里可能不存在（插件版本旧就会缺）：` +
-        `用 workbench_modules（action=update, id=${names.suiteId}）升级插件，或在面板的模块状态里点更新，再重试。`;
+        `用 workbench_modules_update（id=${names.suiteId}）升级插件，或在面板的模块状态里点更新，再重试。`;
 
       throw new WorkbenchDataError(error.code, `${error.message}。${advice}`, {
         ...(error.detail === undefined ? {} : { detail: error.detail }),
         hint:
-          `升级：workbench_modules（action=update, id=${names.suiteId}）。` +
+          `升级：workbench_modules_update（id=${names.suiteId}）。` +
           `终端确认：opencli ${names.plugin} ${command} --help${
             error.hint === undefined ? '' : `\n${error.hint}`
           }`,

package/src/host.ts

@@ -18,6 +18,7 @@ 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/plugin-ledger.js';
 export * from './host/plugin-source.js';
 export * from './host/provision.js';

package/src/i18n/en.ts

@@ -144,7 +144,7 @@ export const en: Record<keyof WorkbenchMessages, string> = {
   'panels.market.pluginKeptUnsure': 'Files kept for now: some modules on this machine do not say what they use, so it is unclear who needs it.',
   'panels.market.pluginKeptHeld': 'Files kept: this one is yours, and a module letting go will not remove it.',
   'panels.market.pluginKeptUnnamed': 'Files kept for now: this one cannot be identified as a plugin, so it is unclear who needs it.',
-  'panels.market.pluginBroken': 'This install is broken: it cannot be identified as a plugin. Uninstall it, or tell the agent to reinstall it by package name with workbench_modules (the install-bundle action).',
+  'panels.market.pluginBroken': 'This install is broken: it cannot be identified as a plugin. Uninstall it, or tell the agent to reinstall it by package name with workbench_modules_install_bundle.',
   'panels.market.restartNeeded': 'The new version is installed — restart once to pick it up.',
   'panels.market.foot': 'After installing, enable it in the panel page of that project.',
   'panels.market.recheck': 'Check for updates',

package/src/i18n/zh.ts

@@ -140,7 +140,7 @@ export const zh = {
   'panels.market.pluginKeptUnsure': '文件先留着：这台机器上还有模块看不出用了什么，说不准谁在用它。',
   'panels.market.pluginKeptHeld': '文件留着：你自己装的那一份，模块放手不动它。',
   'panels.market.pluginKeptUnnamed': '文件先留着：看不出这是哪个插件，说不准谁在用它。',
-  'panels.market.pluginBroken': '这份装坏了：看不出它是个插件。可以卸载，或者直接跟 agent 说：用 workbench_modules 的 install-bundle 按包名再装一次。',
+  'panels.market.pluginBroken': '这份装坏了：看不出它是个插件。可以卸载，或者直接跟 agent 说：用 workbench_modules_install_bundle 按包名再装一次。',
   'panels.market.restartNeeded': '新版装好了，重启一次才生效。',
   'panels.market.foot': '装好后到那个项目的面板页勾选它，模块才会出现。',
   'panels.market.recheck': '重新检查更新',

package/src/index.ts

@@ -15,6 +15,7 @@ export * from './components/Activity.js';
 export * from './components/ApprovalDetail.js';
 export * from './components/ApprovalPlan.js';
 export * from './components/Card.js';
+export * from './components/CardAnchor.js';
 export * from './components/CardBoundary.js';
 export * from './components/CardHead.js';
 export * from './components/ChoiceGroup.js';
@@ -25,6 +26,7 @@ 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/Stack.js';
 export * from './components/StateBlock.js';
 export * from './components/TextField.js';

package/src/lib/react.ts

@@ -8,6 +8,9 @@ export const Fragment = react.Fragment;
 
 export const Component = react.Component;
 
+export const createContext = react.createContext;
+export const useContext = react.useContext;
+
 export const useState = react.useState;
 export const useEffect = react.useEffect;
 export const useLayoutEffect = react.useLayoutEffect;

package/dist/lib/lint-probe.d.ts

@@ -1 +0,0 @@
-export declare function useLintProbe(): number;

package/dist/lib/lint-probe.js

@@ -1,6 +0,0 @@
-import { useRef } from './react';
-export function useLintProbe() {
-    const probeRef = useRef(0);
-    probeRef.current = 1;
-    return probeRef.current;
-}