dsh-codinput 0.1.0

package/src/client/components/PopupSelectView.tsx

@@ -0,0 +1,140 @@
+/**
+ * popupSelect 壳：官方 PopupSelectController 的 headless 状态渲染
+ * （命令的选项弹层，如 /model 类确认选择）。键盘与指针路由回控制器。
+ */
+
+import { useEffect, useMemo, useRef } from 'react';
+import { filterOptions } from './popup-filter';
+import type { PopupSelectController, PopupState } from '../host-types';
+import { useSnapshot } from './useSnapshot';
+import { t } from '../i18n';
+
+export interface PopupSelectViewProps {
+  popup: PopupSelectController;
+}
+
+export function PopupSelectView(props: PopupSelectViewProps): JSX.Element | null {
+  const { popup } = props;
+  const state = useSnapshot(popup.state) as PopupState | undefined;
+  const searchRef = useRef<HTMLInputElement | null>(null);
+  const rootRef = useRef<HTMLDivElement | null>(null);
+
+  const filtered = useMemo(
+    () => (state ? filterOptions(state.options, state.search) : []),
+    [state?.options, state?.search],
+  );
+
+  useEffect(() => {
+    if (!state?.open) return;
+    const onDown = (event: PointerEvent): void => {
+      if (rootRef.current && event.target instanceof Node && rootRef.current.contains(event.target)) return;
+      popup.dismiss();
+    };
+    const onKey = (event: KeyboardEvent): void => {
+      if (!state.open || state.submitting) return;
+      if (state.confirming) {
+        if (event.key === 'Escape') {
+          event.preventDefault();
+          popup.cancelConfirmation();
+        }
+        return;
+      }
+      if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        popup.move(1);
+      } else if (event.key === 'ArrowUp') {
+        event.preventDefault();
+        popup.move(-1);
+      } else if (event.key === 'Enter') {
+        event.preventDefault();
+        void popup.select(state.active);
+      } else if (event.key === 'Escape') {
+        event.preventDefault();
+        popup.dismiss({ focusComposer: true });
+      }
+    };
+    window.addEventListener('pointerdown', onDown, true);
+    window.addEventListener('keydown', onKey, true);
+    return () => {
+      window.removeEventListener('pointerdown', onDown, true);
+      window.removeEventListener('keydown', onKey, true);
+    };
+  }, [state?.open, state?.submitting, state?.confirming, state?.active, popup]);
+
+  useEffect(() => {
+    if (state?.open) searchRef.current?.focus();
+  }, [state?.open]);
+
+  if (!state?.open) return null;
+
+  const confirming = state.confirming;
+
+  return (
+    <div className="dci-menu" ref={rootRef}>
+      {state.command ? <div className="dci-group-title">{state.command}</div> : null}
+      {state.status === 'failed' ? (
+        <div className="dci-error">{state.error ?? t('menu.loadFailed')}</div>
+      ) : null}
+      {state.status === 'failed' ? (
+        <button type="button" className="dci-btn" onClick={() => popup.retry()}>
+          重试
+        </button>
+      ) : null}
+      {state.status === 'ready' && !confirming ? (
+        <input
+          ref={searchRef}
+          className="dci-search"
+          type="text"
+          placeholder={t("menu.filter")}
+          value={state.search}
+          onChange={(e) => popup.setSearch(e.target.value)}
+        />
+      ) : null}
+      {confirming ? (
+        <div className="dci-confirm">
+          <div className="dci-row-name">{String(confirming.label ?? '')}</div>
+          {confirming.detail ? <div className="dci-row-desc">{String(confirming.detail)}</div> : null}
+          <label>
+            <input type="checkbox" checked={state.acknowledged} onChange={(e) => popup.acknowledge(e.target.checked)} />
+            <span>{t("popup.ack")}</span>
+          </label>
+          <div className="dci-confirm-actions">
+            <button type="button" className="dci-btn" onClick={() => popup.cancelConfirmation()}>
+              取消
+            </button>
+            <button
+              type="button"
+              className="dci-btn"
+              data-primary="true"
+              disabled={state.submitting || !state.acknowledged}
+              onClick={() => void popup.confirm()}
+            >
+              确认
+            </button>
+          </div>
+        </div>
+      ) : (
+        <>
+          {state.status === 'pending' ? <div className="dci-empty">{t('menu.loading')}</div> : null}
+          {state.status === 'ready' && filtered.length === 0 ? <div className="dci-empty">{t('menu.empty')}</div> : null}
+          {filtered.map((option, index) => (
+            <button
+              key={`${String(option.label)}:${index}`}
+              type="button"
+              className="dci-opt"
+              data-active={index === state.active || undefined}
+              onMouseEnter={() => popup.highlight(index)}
+              onClick={() => void popup.select(index)}
+            >
+              <span className="dci-opt-copy">
+                <span className="dci-opt-name">{String(option.label ?? '')}</span>
+                {option.detail ? <span className="dci-opt-desc">{String(option.detail)}</span> : null}
+              </span>
+            </button>
+          ))}
+        </>
+      )}
+      {state.error && state.status === 'ready' ? <div className="dci-error">{state.error}</div> : null}
+    </div>
+  );
+}

package/src/client/components/SlashMenu.tsx

@@ -0,0 +1,255 @@
+/**
+ * '/' '@' 候选菜单：官方 MenuView 复刻。主模式为卡片顶部锚定的全宽
+ * 浮层（absolute bottom calc(100%+4px)，随卡片等宽，max-height 320 随
+ * 上方空间收缩）；侧栏形态（side）改为头部行下方**向下**弹出——卡片
+ * 铺满面板后上方没有空间，向下弹才能留在卡片边界内不被面板裁剪；
+ * crumbs 导航行在滚动区外；组标题按来源本地化（指令/技能/子智能体，
+ * 未知来源显示原名），item.section 生成小节标题；pending 空组出骨架屏；
+ * 拾取/悬停/面包屑/钻取全部路由回控制器（combobox 语义：
+ * aria-activedescendant，焦点不离开编辑器）。卡片内指针按下不关闭。
+ */
+
+import { Fragment, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { t, tOptional } from '../i18n';
+import type { InputTriggerController, MenuState } from '../host-types';
+import { useSnapshot } from './useSnapshot';
+import { IconChevronOfficial, IconFile, IconFolder, IconSearch } from '../icons';
+
+export interface SlashMenuProps {
+  triggers: InputTriggerController;
+  /** 向下弹出（侧栏/悬浮形态）：菜单锚在头部行下方、留在卡片边界内。 */
+  dropdown?: boolean;
+}
+
+/** 组标题按来源映射到 i18n；未知来源回退原名（与官方同语义）。 */
+const MAX_HEIGHT = 320;
+
+function sourceLabel(source: string): string {
+  return tOptional(`menu.source.${source}`) ?? source;
+}
+
+function optionId(source: string, index: number): string {
+  return `dsh-slash-option-${source}-${index}`;
+}
+
+function candidateIcon(icon: unknown): JSX.Element | null {
+  if (icon === 'file') return <IconFile size={16} />;
+  if (icon === 'folder') return <IconFolder size={16} />;
+  if (icon === 'session') return <IconSearch size={16} />;
+  // 官方命令图标是 React 组件（primitives Icon*Outline16 同构），
+  // 菜单按 <icon size={16}/> 渲染（官方 MenuView 同语义）。
+  if (typeof icon === 'function') {
+    const Comp = icon as React.ComponentType<{ size?: number }>;
+    return <Comp size={16} />;
+  }
+  return null;
+}
+
+/** 右向 chevron（官方 IconChevronRightOutline14 的等价绘制）。 */
+function ChevronRight({ size = 14 }: { size?: number }): JSX.Element {
+  return (
+    <span style={{ display: 'inline-flex', transform: 'rotate(-90deg)' }}>
+      <IconChevronOfficial size={size} />
+    </span>
+  );
+}
+
+export function SlashMenu(props: SlashMenuProps): JSX.Element | null {
+  const { triggers, dropdown } = props;
+  const menu = useSnapshot(triggers.menu) as MenuState | undefined;
+  const headers = useSnapshot(triggers.headers);
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const [maxHeight, setMaxHeight] = useState(MAX_HEIGHT);
+  /** 向下弹出时的菜单顶边（相对卡片顶；null = 向上弹出）。 */
+  const [menuTop, setMenuTop] = useState<number | null>(null);
+
+  const open = menu?.open === true;
+  const highlight = open ? menu.highlight ?? null : null;
+
+  // 可用空间收缩 max-height：向上弹出（主模式）菜单底边固定在卡片顶上方
+  // 4px，可吃满卡片到视口顶的距离；向下弹出（侧栏/悬浮）菜单顶边固定在
+  // 头部行下方，吃满卡片内头部行以下的距离——卡片靠视口顶时上方没有
+  // 空间，向下弹才能留在视口与卡片边界内。
+  useLayoutEffect(() => {
+    if (!open) return;
+    const card = rootRef.current?.closest('.dci-card');
+    if (!card) return;
+    if (dropdown) {
+      const header = card.querySelector<HTMLElement>('.dci-accessory');
+      const cardRect = card.getBoundingClientRect();
+      const headerBottom = header
+        ? header.getBoundingClientRect().bottom - cardRect.top
+        : 36;
+      setMenuTop(Math.round(headerBottom) + 2);
+      // 侧栏吃满面板内剩余空间；悬浮卡可较小，吃满视口内剩余空间（可
+      // 伸出卡片、不出视口）。
+      const inFloat = !!rootRef.current?.closest('.dci-float');
+      const budget = inFloat
+        ? window.innerHeight - (cardRect.top + headerBottom) - 16
+        : cardRect.height - headerBottom - 10;
+      setMaxHeight(Math.max(120, Math.min(MAX_HEIGHT, budget)));
+      return;
+    }
+    setMenuTop(null);
+    const top = card.getBoundingClientRect().top;
+    setMaxHeight(Math.max(120, Math.min(MAX_HEIGHT, top - 16)));
+  }, [open, menu?.generation, dropdown]);
+
+  // 高亮行滚动进视野（官方 scrollIntoView block nearest）。
+  useEffect(() => {
+    if (!highlight) return;
+    document
+      .getElementById(optionId(highlight.source, highlight.index))
+      ?.scrollIntoView({ block: 'nearest' });
+  }, [highlight]);
+
+  // 外部指针按下关闭；卡片内（含工具行）不关闭（官方 dismiss 语义）。
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event: PointerEvent): void => {
+      if (!(event.target instanceof Node)) return;
+      if (rootRef.current?.contains(event.target)) return;
+      if (rootRef.current?.closest('[data-composer-card]')?.contains(event.target)) return;
+      triggers.dismiss();
+    };
+    document.addEventListener('pointerdown', onPointerDown, true);
+    return () => document.removeEventListener('pointerdown', onPointerDown, true);
+  }, [open, triggers]);
+
+  if (!open || !menu) return null;
+
+  const crumbsFor = (source: string) => headers?.get(source);
+
+  return (
+    <div
+      ref={rootRef}
+      className="dci-slash-menu"
+      data-trigger-menu=""
+      data-dropdown={dropdown || undefined}
+      style={dropdown ? { top: menuTop ?? 38, maxHeight } : { maxHeight }}
+    >
+      {menu.groups.map((group) => {
+        const trail = crumbsFor(group.source);
+        if (trail === undefined || trail.length === 0) return null;
+        return (
+          <nav key={`${group.source}:crumbs`} className="dci-slash-crumbs" aria-label={t("menu.nav")}>
+            {trail.map((crumb, index) => (
+              <span key={`${index}-${crumb.value}`} style={{ display: 'inline-flex', alignItems: 'center', gap: 2 }}>
+                {index > 0 ? (
+                  <span className="dci-slash-crumbSeparator" aria-hidden="true">
+                    <ChevronRight size={12} />
+                  </span>
+                ) : null}
+                <button
+                  type="button"
+                  className="dci-slash-crumb"
+                  data-current={crumb.current === true || undefined}
+                  aria-current={crumb.current === true ? 'location' : undefined}
+                  disabled={crumb.current === true}
+                  onMouseDown={(e) => {
+                    e.preventDefault();
+                    triggers.pickCrumb(group.source, index);
+                  }}
+                >
+                  {crumb.label}
+                </button>
+              </span>
+            ))}
+          </nav>
+        );
+      })}
+      <div
+        className="dci-slash-viewport"
+        role="listbox"
+        aria-label={t("menu.triggerCandidates")}
+        aria-activedescendant={highlight ? optionId(highlight.source, highlight.index) : undefined}
+      >
+        {menu.groups.map((group) => {
+          if (group.status === 'ready' && group.items.length === 0) return null;
+          const hasSections = group.items.some((item) => item.section !== undefined);
+          return (
+            <Fragment key={group.source}>
+              {group.showGroupTitle === false || hasSections ? null : (
+                <div className="dci-slash-groupTitle" role="presentation" data-source={group.source}>
+                  {sourceLabel(group.source)}
+                </div>
+              )}
+              {group.status === 'pending' && group.items.length === 0 ? (
+                <div role="status" aria-label={tOptional("menu.loading")} data-source={group.source}>
+                  <div className="dci-slash-skeletonRow">
+                    <span className="dci-slash-skeletonBar" style={{ width: '32%' }} />
+                  </div>
+                  <div className="dci-slash-skeletonRow">
+                    <span className="dci-slash-skeletonBar" style={{ width: '48%' }} />
+                  </div>
+                </div>
+              ) : (
+                group.items.map((item, index) => {
+                  const active = highlight?.source === group.source && highlight.index === index;
+                  return (
+                    <Fragment key={optionId(group.source, index)}>
+                      {item.section !== undefined && item.section !== group.items[index - 1]?.section ? (
+                        <div className="dci-slash-sectionTitle" role="presentation">
+                          {item.section}
+                        </div>
+                      ) : null}
+                      <button
+                        id={optionId(group.source, index)}
+                        type="button"
+                        role="option"
+                        aria-selected={active}
+                        className="dci-slash-item"
+                        data-active={active || undefined}
+                        onMouseDown={(e) => {
+                          e.preventDefault();
+                          triggers.pick(group.source, index);
+                        }}
+                        onMouseMove={active ? undefined : () => triggers.hover(group.source, index)}
+                      >
+                        {item.icon !== undefined ? (
+                          <span className="dci-slash-itemIcon" aria-hidden="true">
+                            {candidateIcon(item.icon)}
+                          </span>
+                        ) : null}
+                        {/* 官方语义：主名 = label ?? name；label 与 name 不同时另出灰色别名。 */}
+                        <span className="dci-slash-itemName">{item.label ?? item.name}</span>
+                        {item.label !== undefined && item.label.toLowerCase() !== item.name.toLowerCase() ? (
+                          <span className="dci-slash-itemAlias">{item.name}</span>
+                        ) : null}
+                        {item.description !== undefined ? (
+                          <span className="dci-slash-itemDescription">{item.description}</span>
+                        ) : null}
+                        {item.drill === true ? (
+                          <span className="dci-slash-trailing">
+                            <span className="dci-slash-drillHintText" aria-hidden="true">
+                              进入目录
+                            </span>
+                            <kbd className="dci-slash-drillHint" aria-hidden="true">
+                              Tab
+                            </kbd>
+                            <span
+                              role="button"
+                              aria-label={tOptional("menu.drill")}
+                              className="dci-slash-drill"
+                              onMouseDown={(e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                triggers.pick(group.source, index, 'drill');
+                              }}
+                            >
+                              <ChevronRight size={14} />
+                            </span>
+                          </span>
+                        ) : null}
+                      </button>
+                    </Fragment>
+                  );
+                })
+              )}
+            </Fragment>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/client/components/StatsRow.tsx

@@ -0,0 +1,188 @@
+/** 数据行（卡片下方）：官方 composer stats 复刻（bOPqQW + bRhRbq）——两枚
+ * 胶囊（仪表盘「轮/步 · tok/s」、数据库「累计 tok · 缓存命中」），点击弹出
+ * 官方同构详情面板（会话统计 / Token 用量），锚点上方弹出、点外关闭。 */
+
+import { useEffect, useRef, useState } from 'react';
+import { useSessionStats, formatTokens, type SessionStats } from '../stats';
+import type { UseProjection } from '../host-types';
+import { t } from '../i18n';
+
+export interface StatsRowProps {
+  useProjection: UseProjection | undefined;
+  sessionId: string | undefined;
+  /** chat 树解析的轮次计时（模型用时 / TTFT）。 */
+  chatTimings?: { modelMs?: number; ttftMs?: number };
+}
+
+/** 官方仪表盘 glyph（弧 + 指针 + 中点，stroke 1.25）。 */
+export function GaugeIcon({ size = 14 }: { size?: number }): JSX.Element {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true">
+      <path d="M3.49 13.26A6.375 6.375 0 1 1 12.51 13.26" stroke="currentColor" strokeWidth="1.25" />
+      <path d="M8 8.75L11.4 5.35" stroke="currentColor" strokeWidth="1.25" />
+      <circle cx="8" cy="8.75" r="1.55" fill="currentColor" />
+    </svg>
+  );
+}
+
+/** 官方数据库 glyph（椭圆柱，stroke 1.25）。 */
+export function DatabaseIcon({ size = 14 }: { size?: number }): JSX.Element {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true">
+      <ellipse cx="8" cy="3.6" rx="5.75" ry="2.4" stroke="currentColor" strokeWidth="1.25" />
+      <path d="M2.25 3.6V12.3A5.75 2.4 0 0 0 13.75 12.3V3.6" stroke="currentColor" strokeWidth="1.25" />
+      <path d="M2.25 7.95A5.75 2.4 0 0 0 13.75 7.95" stroke="currentColor" strokeWidth="1.25" />
+    </svg>
+  );
+}
+
+/** 官方详情面板（bRhRbq：标题行 + 发丝线 + dt/dd 栅格）。 */
+function StatPanel(props: {
+  label: string;
+  icon: JSX.Element;
+  titleValue?: string;
+  rows: readonly [string, string][];
+}): JSX.Element {
+  const { label, icon, titleValue, rows } = props;
+  return (
+    <div className="dci-stat-panel" role="dialog" aria-label={label}>
+      <div className="dci-stat-panelTitle">
+        <span className="dci-stat-panelLabel">
+          {icon}
+          {label}
+        </span>
+        {titleValue !== undefined ? <span className="dci-stat-panelValue">{titleValue}</span> : null}
+      </div>
+      <div className="dci-stat-panelRule" aria-hidden="true" />
+      <dl className="dci-stat-details">
+        {rows.map(([dt, dd]) => (
+          <div key={dt} style={{ display: 'contents' }}>
+            <dt>{dt}</dt>
+            <dd>{dd}</dd>
+          </div>
+        ))}
+      </dl>
+    </div>
+  );
+}
+
+function Pill(props: { stats: SessionStats; open: boolean; onToggle(): void }): JSX.Element {
+  const { stats, open, onToggle } = props;
+  const roundsPart =
+    stats.turns !== undefined && stats.steps !== undefined
+      ? t('stats.turns', { turns: stats.turns, steps: stats.steps })
+      : stats.turns !== undefined
+        ? t('stats.turns', { turns: stats.turns, steps: 0 })
+        : t('stats.turns', { turns: 0, steps: 0 });
+  const speedPart = stats.tokensPerSecond !== undefined ? `${Math.round(stats.tokensPerSecond)} tok/s` : null;
+  const modelSec = stats.modelMs !== undefined ? stats.modelMs / 1000 : null;
+  const ttftSec = stats.ttftMs !== undefined ? stats.ttftMs / 1000 : null;
+  return (
+    <span className="dci-stat-anchor">
+      <button
+        type="button"
+        className="dci-stat-pill"
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        onClick={onToggle}
+      >
+        <GaugeIcon />
+        <span className="dci-stat-label">
+          {roundsPart}
+          {speedPart !== null ? (
+            <>
+              <span className="dci-stat-sep" aria-hidden="true">·</span>
+              {speedPart}
+            </>
+          ) : null}
+        </span>
+      </button>
+      {open ? (
+        <StatPanel
+          label={t("stats.session")}
+          icon={<GaugeIcon />}
+          rows={[
+            [t('stats.modelTime'), modelSec !== null ? `${modelSec.toFixed(1)}s` : '—'],
+            [t('stats.ttft'), ttftSec !== null ? `${ttftSec.toFixed(1)}s` : '—'],
+            [t('stats.tpsLabel'), speedPart ?? '—'],
+          ]}
+        />
+      ) : null}
+    </span>
+  );
+}
+
+function TokenPill(props: { stats: SessionStats; open: boolean; onToggle(): void }): JSX.Element | null {
+  const { stats, open, onToggle } = props;
+  if (stats.totalTokens === undefined) return null;
+  const comma = (n: number): string => Math.round(n).toLocaleString('en-US');
+  return (
+    <span className="dci-stat-anchor">
+      <button
+        type="button"
+        className="dci-stat-pill"
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        onClick={onToggle}
+      >
+        <DatabaseIcon />
+        <span className="dci-stat-label">
+          {formatTokens(stats.totalTokens)}
+          {stats.cacheHitPct !== undefined ? (
+            <>
+              <span className="dci-stat-sep" aria-hidden="true">·</span>
+              缓存命中 {Math.round(stats.cacheHitPct)}%
+            </>
+          ) : null}
+        </span>
+      </button>
+      {open ? (
+        <StatPanel
+          label={t("stats.usage")}
+          icon={<DatabaseIcon />}
+          titleValue={`${comma(stats.totalTokens)} tok`}
+          rows={[
+            [t('stats.cacheHitLabel'), stats.cacheHitPct !== undefined ? `${Math.round(stats.cacheHitPct)}%` : '—'],
+            [t('stats.uncached'), `${comma(stats.uncachedInputTokens ?? 0)} tok`],
+            [t('stats.cacheRead'), `${comma(stats.cacheReadTokens ?? 0)} tok`],
+            [t('stats.output'), `${comma(stats.outputTokens ?? 0)} tok`],
+          ]}
+        />
+      ) : null}
+    </span>
+  );
+}
+
+export function StatsRow(props: StatsRowProps): JSX.Element | null {
+  const { useProjection, sessionId, chatTimings } = props;
+  const [open, setOpen] = useState<'rounds' | 'tokens' | null>(null);
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const sampled = useSessionStats(useProjection, sessionId);
+  // chat 树计时优先（历史会话也有值），采样值兜底。
+  const stats = sampled
+    ? {
+        ...sampled,
+        ...(chatTimings?.modelMs !== undefined ? { modelMs: chatTimings.modelMs } : {}),
+        ...(chatTimings?.ttftMs !== undefined ? { ttftMs: chatTimings.ttftMs } : {}),
+      }
+    : sampled;
+
+  // 点外面关闭（面板内/胶囊上不关）。
+  useEffect(() => {
+    if (open === null) return;
+    const onDown = (event: PointerEvent): void => {
+      if (rootRef.current && event.target instanceof Node && rootRef.current.contains(event.target)) return;
+      setOpen(null);
+    };
+    window.addEventListener('pointerdown', onDown, true);
+    return () => window.removeEventListener('pointerdown', onDown, true);
+  }, [open]);
+
+  if (!stats) return null;
+  return (
+    <div className="dci-stat-root" data-composer-stats="codinput" ref={rootRef}>
+      <Pill stats={stats} open={open === 'rounds'} onToggle={() => setOpen(open === 'rounds' ? null : 'rounds')} />
+      <TokenPill stats={stats} open={open === 'tokens'} onToggle={() => setOpen(open === 'tokens' ? null : 'tokens')} />
+    </div>
+  );
+}