dsh-codinput 0.1.0

package/src/client/prefs.ts

@@ -0,0 +1,123 @@
+/** 偏好存储：localStorage 持久化（技术决策：无宿主往返，升级宿主不影响）。 */
+
+/** 快捷键组合：规范化串（如 "mod+enter"、"ctrl+shift+k"），见 hotkey.ts。 */
+export type Hotkey = string;
+
+/**
+ * 输入入口形态（三态，任一时刻只有一个实例）：
+ * - `normal`：接管卡片在原输入位（主输入卡片）；
+ * - `float`：卡片 portal 悬浮（可拖动位置、可拖边界/角落缩放）；
+ * - `side`：卡片由右侧栏 Codinput 标签承载（侧栏收起时经右上角小球唤出）。
+ *
+ * 持久化只存 normal/float 两值——`side` 由「侧栏标签 body 是否挂载」派生
+ * （挂载即侧栏承载该会话输入），避免布局丢失后草稿入口凭空消失。
+ */
+export type CodinputMode = 'normal' | 'float' | 'side';
+
+export interface CodinputPrefs {
+  /** 启用接管：关闭即恢复官方输入框（卸载遮蔽条目）。 */
+  enabled: boolean;
+  /** 显示行号（当前行与行号高亮常开）。 */
+  lineNumbers: boolean;
+  /** 编辑器字体（默认 JetBrains Mono）。 */
+  fontFamily: string;
+  /** 发送快捷键（任意组合，默认 Cmd/Ctrl+Enter）。 */
+  sendHotkey: Hotkey;
+  /** 换行快捷键（任意组合，默认 Enter；不得与发送快捷键相同）。 */
+  lineBreakHotkey: Hotkey;
+  /** 默认视图：编辑开关初值。 */
+  defaultEdit: boolean;
+  /** 默认视图：预览开关初值。 */
+  defaultPreview: boolean;
+  /** 编辑区高度 px（顶边拖把调节，固定高）；null = 随内容、46vh 封顶。 */
+  composerBodyHeight: number | null;
+  /** 入口形态（持久化值只有 normal/float；side 由侧栏标签挂载派生）。 */
+  mode: CodinputMode;
+  /** 悬浮位置（视口坐标，拖动后记忆）；null = 默认居中偏上。 */
+  floatX: number | null;
+  floatY: number | null;
+  /** 悬浮尺寸 px（拖边界/角落调节后记忆）；null = 默认宽 720、高度随内容。 */
+  floatW: number | null;
+  floatH: number | null;
+}
+
+export const DEFAULT_PREFS: CodinputPrefs = {
+  enabled: true,
+  lineNumbers: true,
+  fontFamily: "'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+  sendHotkey: 'mod+enter',
+  lineBreakHotkey: 'enter',
+  defaultEdit: true,
+  defaultPreview: false,
+  composerBodyHeight: null,
+  mode: 'normal',
+  floatX: null,
+  floatY: null,
+  floatW: null,
+  floatH: null,
+};
+
+// v2：旧版（已移除的 v0.1.0）遗留的 'dsh-codinput.prefs' 形状不同且可能
+// enabled:false——换键避免被旧数据劫持接管开关。
+const KEY = 'dsh-codinput.prefs.v2';
+const PERM_KEY = 'dsh-codinput.permission-applied';
+
+const listeners = new Set<() => void>();
+
+export function loadPrefs(): CodinputPrefs {
+  try {
+    const raw = window.localStorage.getItem(KEY);
+    if (!raw) return { ...DEFAULT_PREFS };
+    const parsed = JSON.parse(raw);
+    const merged: CodinputPrefs = { ...DEFAULT_PREFS, ...(parsed && typeof parsed === 'object' ? parsed : null) };
+    const legacy = parsed as { sendKey?: string; lineBreakKey?: string; mode?: unknown; floating?: boolean };
+    // 旧字段迁移：sendKey('mod-enter'|'enter') → sendHotkey/lineBreakHotkey。
+    if (legacy.sendKey === 'enter') {
+      merged.sendHotkey = 'enter';
+      merged.lineBreakHotkey = 'shift-enter';
+    }
+    // 旧字段迁移：两态模型时代的 floating:true → mode:'float'。
+    merged.mode =
+      legacy.mode === 'float' || legacy.mode === 'normal'
+        ? legacy.mode
+        : legacy.floating === true
+          ? 'float'
+          : 'normal';
+    return merged;
+  } catch {
+    return { ...DEFAULT_PREFS };
+  }
+}
+
+export function savePrefs(patch: Partial<CodinputPrefs>): CodinputPrefs {
+  const next = { ...loadPrefs(), ...patch };
+  try {
+    window.localStorage.setItem(KEY, JSON.stringify(next));
+  } catch {
+    /* 存储不可用时仅内存生效 */
+  }
+  for (const fn of listeners) fn();
+  return next;
+}
+
+export function subscribePrefs(fn: () => void): () => void {
+  listeners.add(fn);
+  return () => listeners.delete(fn);
+}
+
+/** 权限菜单最近一次实际应用的预设（仅本浏览器记忆，宿主无公开读取面）。 */
+export function loadAppliedPermission(): string | null {
+  try {
+    return window.localStorage.getItem(PERM_KEY);
+  } catch {
+    return null;
+  }
+}
+
+export function saveAppliedPermission(preset: string): void {
+  try {
+    window.localStorage.setItem(PERM_KEY, preset);
+  } catch {
+    /* 忽略 */
+  }
+}

package/src/client/services.ts

@@ -0,0 +1,78 @@
+/**
+ * 服务面 stash：ctx 属性直读要求 fiber inject 声明（工程事实 #2），
+ * 统一在 apply 里 ctx.inject(...) 拿 scope 后存此处，组件只读 stash。
+ */
+
+import type {
+  ClientContext,
+  CommandUiFace,
+  ConversationFace,
+  ModelDirectoriesFace,
+  SessionsFace,
+  SidebarRightFace,
+} from './host-types';
+import { diagError, runGuarded } from './diag';
+import { installI18n } from './i18n';
+
+export interface ServiceStash {
+  conversation?: ConversationFace;
+  sessions?: SessionsFace;
+  commandUi?: CommandUiFace;
+  modelDirectories?: ModelDirectoriesFace;
+  sidebarRight?: SidebarRightFace;
+}
+
+export const stash: ServiceStash = {};
+
+export function installServices(ctx: ClientContext): void {
+  // 消费 conversation 服务（本模块 inject 声明已含 'slots' 与 'conversation'）。
+  runGuarded('stash.conversation', () => {
+    ctx.inject(['conversation'], (scope: Record<string, unknown>) => {
+      stash.conversation = scope['conversation'] as ConversationFace;
+    });
+  });
+
+  // sessions / commandUi：被消费服务自身的 static inject 链由宿主装配。
+  runGuarded('stash.services', () => {
+    ctx.inject(['slots', 'sessions', 'commandUi'], (scope: Record<string, unknown>) => {
+      stash.sessions = scope['sessions'] as SessionsFace;
+      stash.commandUi = scope['commandUi'] as CommandUiFace;
+    });
+  });
+
+  // 右侧栏控制器（小球唤回侧栏 Codinput 用）。与 sidebarRightTabs 同批
+  // inject——侧栏标签注册已经用过这个组合，服务面存在即成功。
+  runGuarded('stash.sidebarRight', () => {
+    ctx.inject(['slots', 'sidebarRightTabs', 'sidebarRight'], (scope: Record<string, unknown>) => {
+      stash.sidebarRight = scope['sidebarRight'] as SidebarRightFace;
+    });
+  });
+
+  // 共享模型目录（官方 ui-model-selection 的服务）。工程事实 #2：必须连带
+  // 声明被消费服务自身的 static inject 链（sessions/remote/remote.session）——
+  // directoryFor/select 内部经 cordis accessor 读 remote.session，accessor
+  // 校验的是调用方 fiber 的 inject 声明，缺了会抛 "without inject"。
+  runGuarded('stash.modelDirectories', () => {
+    ctx.inject(['modelDirectories', 'sessions', 'remote', 'remote.session'], (scope: Record<string, unknown>) => {
+      stash.modelDirectories = scope['modelDirectories'] as ModelDirectoriesFace;
+    });
+  });
+
+  // 文案国际化：宿主 locale 服务就绪后注册词典并绑定翻译函数。
+  runGuarded('i18n.install', () => {
+    ctx.inject(['locale'], (scope: Record<string, unknown>) => {
+      installI18n(scope['locale']);
+    });
+  });
+}
+
+/** 服务缺席时统一报诊断口，不打断渲染。 */
+export function requireService<K extends keyof ServiceStash>(name: K): ServiceStash[K] | undefined {
+  const svc = stash[name];
+  if (!svc) diagError('services', new Error(`service unavailable: ${String(name)}`));
+  return svc;
+}
+
+export function safeCall(scope: string, fn: () => void): void {
+  runGuarded(scope, fn);
+}

package/src/client/settings.tsx

@@ -0,0 +1,236 @@
+/**
+ * 设置 → Codinput 分组：启用接管、显示行号、编辑器字体、发送/换行快捷键、
+ * 默认视图。行结构与控件对齐官方设置（T1PP：标题 + 描述 + 发丝线 +
+ * 36px 选择器胶囊）；settings.section（list，须带 label/order——工程事实
+ * #3），偏好 localStorage 持久化。
+ */
+
+import { useEffect, useRef, useState } from 'react';
+import type { SlotRegisterOptions } from './host-types';
+import { DEFAULT_PREFS, loadPrefs, savePrefs, type CodinputPrefs, type Hotkey } from './prefs';
+import { formatCombo, comboFromEventLike } from './hotkey';
+import { IconChevronOfficial } from './icons';
+import { MenuSurface } from './components/MenuSurface';
+import { t, useT } from './i18n';
+
+export const SETTINGS_SECTION_ID = 'codinput';
+
+export function settingsRegistration(): { options: SlotRegisterOptions; component: unknown } {
+  return {
+    options: {
+      name: 'settings.section',
+      id: SETTINGS_SECTION_ID,
+      order: 60,
+      label: () => 'Codinput',
+      registrant: 'dsh-codinput',
+    },
+    component: CodinputSettingsSection,
+  };
+}
+
+/** 快捷键录制器：点击进入录制态，按任意组合完成录入，Esc 取消。 */
+function HotkeyRecorder(props: {
+  value: Hotkey;
+  conflictWith?: Hotkey;
+  ariaLabel: string;
+  onChange(value: Hotkey): void;
+}): JSX.Element {
+  const { value, conflictWith, ariaLabel, onChange } = props;
+  const [recording, setRecording] = useState(false);
+  const [conflict, setConflict] = useState(false);
+  const btnRef = useRef<HTMLButtonElement | null>(null);
+
+  useEffect(() => {
+    if (!recording) return;
+    const onDown = (event: PointerEvent): void => {
+      if (btnRef.current && event.target instanceof Node && btnRef.current.contains(event.target)) return;
+      setRecording(false);
+    };
+    window.addEventListener('pointerdown', onDown, true);
+    return () => window.removeEventListener('pointerdown', onDown, true);
+  }, [recording]);
+
+  return (
+    <button
+      ref={btnRef}
+      type="button"
+      className="dci-set-selector"
+      data-recording={recording || undefined}
+      data-conflict={conflict || undefined}
+      aria-label={ariaLabel}
+      onClick={() => setRecording(true)}
+      onBlur={() => setRecording(false)}
+      onKeyDown={(e) => {
+        if (!recording) return;
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.key === 'Escape') {
+          setRecording(false);
+          return;
+        }
+        if (e.key === 'Shift' || e.key === 'Control' || e.key === 'Alt' || e.key === 'Meta') return;
+        const combo = comboFromEventLike(e.nativeEvent, e.key);
+        if (conflictWith !== undefined && combo === conflictWith) {
+          setConflict(true);
+          window.setTimeout(() => setConflict(false), 1500);
+          return;
+        }
+        onChange(combo);
+        setRecording(false);
+        btnRef.current?.blur();
+      }}
+    >
+      {recording ? t('set.recording') : formatCombo(value)}
+    </button>
+  );
+}
+
+/** 官方设置行（标题 + 描述 + 右侧控件，发丝线分隔）。 */
+function Row(props: { title: string; desc?: string; children: React.ReactNode }): JSX.Element {
+  const { title, desc, children } = props;
+  return (
+    <div className="dci-set-row">
+      <div className="dci-set-rowText">
+        <div className="dci-set-title">{title}</div>
+        {desc ? <div className="dci-set-desc">{desc}</div> : null}
+      </div>
+      <div className="dci-set-control">{children}</div>
+    </div>
+  );
+}
+
+/** 官方选择器：36px 胶囊触发器 + 官方 Menu 下拉（锚点下方弹出）。 */
+function Selector(props: {
+  value: string;
+  options: readonly { value: string; label: string }[];
+  onChange(value: string): void;
+  ariaLabel: string;
+}): JSX.Element {
+  const { value, options, onChange, ariaLabel } = props;
+  const [open, setOpen] = useState(false);
+  const btnRef = useRef<HTMLButtonElement | null>(null);
+  const [anchor, setAnchor] = useState<{ left: number; top: number; right: number; bottom: number } | null>(null);
+  const current = options.find((o) => o.value === value);
+  return (
+    <>
+      <button
+        ref={btnRef}
+        type="button"
+        className="dci-set-selector"
+        aria-haspopup="menu"
+        aria-expanded={open}
+        aria-label={ariaLabel}
+        onClick={() => {
+          if (!open) setAnchor(btnRef.current?.getBoundingClientRect() ?? null);
+          setOpen(!open);
+        }}
+      >
+        {current?.label ?? value}
+        <IconChevronOfficial size={14} />
+      </button>
+      {open && anchor ? (
+        <MenuSurface anchor={anchor} side="bottom" alignEnd onClose={() => setOpen(false)} minWidth={200}>
+          {options.map((opt) => (
+            <button
+              key={opt.value}
+              type="button"
+              className="dci-item"
+              onClick={() => {
+                onChange(opt.value);
+                setOpen(false);
+              }}
+            >
+              <span className="dci-itemLabel">{opt.label}</span>
+            </button>
+          ))}
+        </MenuSurface>
+      ) : null}
+    </>
+  );
+}
+
+function Switch(props: { on: boolean; label: string; onToggle(): void }): JSX.Element {
+  const { on, label, onToggle } = props;
+  return (
+    <button
+      type="button"
+      role="switch"
+      className="dci-switch"
+      aria-checked={on}
+      aria-label={label}
+      onClick={onToggle}
+    />
+  );
+}
+
+export function CodinputSettingsSection(): JSX.Element {
+  const [prefs, setPrefs] = useState<CodinputPrefs>(() => loadPrefs());
+  useT();
+
+  const update = (patch: Partial<CodinputPrefs>): void => {
+    setPrefs(savePrefs(patch));
+  };
+
+  return (
+    <div className="dci-settings">
+      <Row title={t("set.enabled")} desc={t("set.enabledDesc")}>
+        <Switch on={prefs.enabled} label={t("set.enabled")} onToggle={() => update({ enabled: !prefs.enabled })} />
+      </Row>
+      <Row title={t("set.lineNumbers")} desc={t("set.lineNumbersDesc")}>
+        <Switch on={prefs.lineNumbers} label={t("set.lineNumbers")} onToggle={() => update({ lineNumbers: !prefs.lineNumbers })} />
+      </Row>
+      <Row title={t("set.font")} desc={t("set.fontDesc")}>
+        <input
+          type="text"
+          className="dci-set-input"
+          value={prefs.fontFamily}
+          spellCheck={false}
+          aria-label={t("set.font")}
+          onChange={(e) => update({ fontFamily: e.target.value })}
+        />
+      </Row>
+      <Row title={t("set.sendKey")} desc={t("set.sendKeyDesc")}>
+        <HotkeyRecorder
+          value={prefs.sendHotkey}
+          conflictWith={prefs.lineBreakHotkey}
+          ariaLabel={t("set.sendKey")}
+          onChange={(v) => update({ sendHotkey: v })}
+        />
+      </Row>
+      <Row title={t("set.lineBreakKey")} desc={t("set.lineBreakKeyDesc")}>
+        <HotkeyRecorder
+          value={prefs.lineBreakHotkey}
+          conflictWith={prefs.sendHotkey}
+          ariaLabel={t("set.lineBreakKey")}
+          onChange={(v) => update({ lineBreakHotkey: v })}
+        />
+      </Row>
+      <Row title={t("set.defaultView")} desc={t("set.defaultViewDesc")}>
+        <Selector
+          value={prefs.defaultEdit && prefs.defaultPreview ? 'split' : prefs.defaultPreview ? 'preview' : 'edit'}
+          ariaLabel={t("set.defaultView")}
+          onChange={(v) =>
+            update({
+              defaultEdit: v !== 'preview',
+              defaultPreview: v !== 'edit',
+            })
+          }
+          options={[
+            { value: 'edit', label: t('head.editOnly') },
+            { value: 'split', label: t('head.split') },
+            { value: 'preview', label: t('head.previewOnly') },
+          ]}
+        />
+      </Row>
+      <Row title={t("set.reset")} desc={t("set.resetAll")}>
+        <button
+          type="button"
+          className="dci-set-selector"
+          onClick={() => setPrefs(savePrefs({ ...DEFAULT_PREFS }))}
+        >
+          {t("set.resetAction")}
+        </button>
+      </Row>
+    </div>
+  );
+}

package/src/client/sidebar.tsx

@@ -0,0 +1,114 @@
+/**
+ * 侧边模式：官方 Sidebar（dockkit）标签页承载，入口与标签芯片同名
+ * 「Codinput」。两段式注册——sidebarRightTabs.register（类型定义）+
+ * sidebar.right.pane.tab（keyed，key = 定义 id）。停靠、分栏、全屏、
+ * 浮动由官方 dockkit 承担；侧栏与主输入读写同一台输入机，草稿天然同源。
+ *
+ * 唯一输入组件约定：body **挂载**期间经 sideinput 总线声明承载本会话
+ * 输入（形态 = side），主输入遮蔽条目随之隐藏——收起侧栏不让位（可见性
+ * 只用于判断「需不需要右上角小球唤出」）。标签关闭（body 卸载）后撤销
+ * 声明，主输入原样恢复。
+ */
+
+import { useEffect, useRef, useState } from 'react';
+import type { SessionStandard, SidebarTabInfo, SlotRegisterOptions } from './host-types';
+import { claimSidebarInput, useSidebarCarryOwner, type SidebarCarry } from './sideinput';
+import { CodinputSurface } from './components/CodinputSurface';
+import { t, useT } from './i18n';
+
+export const SIDEBAR_TAB_ID = 'dsh-codinput';
+export const SIDEBAR_TAB_KIND = 'codinput';
+
+/** 第一段：标签类型定义（页面型：无 patterns，经指南页打开）。 */
+export function sidebarTabDefinition(): Record<string, unknown> {
+  return {
+    id: SIDEBAR_TAB_ID,
+    kind: SIDEBAR_TAB_KIND,
+    priority: 'extension',
+    title: () => 'Codinput',
+    guide: [
+      {
+        order: 0,
+        title: () => 'Codinput',
+        description: () => t('side.guideDesc'),
+      },
+    ],
+  };
+}
+
+/** 第二段：keyed 槽位 body 注册选项与组件（key = 定义 id）。 */
+export function sidebarBodyRegistration(): { options: SlotRegisterOptions; component: unknown } {
+  return {
+    options: {
+      name: 'sidebar.right.pane.tab',
+      key: SIDEBAR_TAB_ID,
+      registrant: 'dsh-codinput',
+    },
+    component: SidebarCodinputBody,
+  };
+}
+
+/**
+ * session 槽位标准 props 直达官方输入机。useTabInfo 是槽位声明的注入
+ * hook（宿主按 use<Name> 约定随 props 下发，缺席说明宿主形状漂移——
+ * 此时按 visible=false 处理，退回「不隐藏主输入」的旧行为）。
+ * useTabInfo 内部订阅 dockkit store，展开/激活/浮动变化都会重渲染。
+ */
+export function SidebarCodinputBody(props: SessionStandard & { useTabInfo?: () => SidebarTabInfo }): JSX.Element {
+  const { sessionId, useInput, inputActions, useProjection, useTabInfo } = props;
+  const state = useInput((s) => s);
+  useT();
+  // 注入 hook 的有无逐渲染稳定（渲染器 useMemo 绑定），条件调用合规。
+  const info = useTabInfo ? useTabInfo() : undefined;
+  const visible = info?.tab.visible === true;
+  const expanded = info?.sidebar.expanded === true;
+
+  // 承载声明挂在 body 生命周期上（挂载即承载，与可见性无关）；可见性与
+  // 侧栏展开态随后续渲染实时上报（小球据此判断「已收起」）。
+  const carryRef = useRef<SidebarCarry | null>(null);
+  const [token, setToken] = useState(0);
+  useEffect(() => {
+    const carry = claimSidebarInput(sessionId, { visible, expanded });
+    carryRef.current = carry;
+    setToken(carry.token);
+    return () => {
+      carryRef.current = null;
+      carry.release();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sessionId]);
+  useEffect(() => {
+    carryRef.current?.set({ visible, expanded });
+  }, [visible, expanded]);
+
+  // 同一会话被复制出第二个 Codinput 标签（分栏）时，只有最早声明的 body
+  // 渲染编辑面——输入入口唯一，另一个 body 出提示而不是第二个编辑器。
+  const owner = useSidebarCarryOwner(sessionId, token);
+  if (!owner) {
+    return (
+      <div className="dci-side-notice" role="note">
+        {t("side.notice")}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        inset: 0,
+        minHeight: 0,
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
+      <CodinputSurface
+        sessionId={sessionId}
+        state={state}
+        actions={inputActions}
+        useProjection={useProjection}
+        side={true}
+      />
+    </div>
+  );
+}