cortico 0.1.0

package/src/web/client/ui/prompt-input.tsx

@@ -0,0 +1,311 @@
+/**
+ * 对话输入器:表单壳、自适应高度的 textarea、附图钮、发送钮与图片托盘。一个 React 根挂进
+ * 控制台面板,`promptInput()` 把它包成 ConsolePromptInput。
+ *
+ * 图片在进托盘时就归一化成 base64,提交时与文本一并交出。拖入、粘贴、选择三条入口共用
+ * addFiles:超出张数整批拒,单张失败只报那一张。
+ */
+import * as React from 'react';
+import { flushSync } from 'react-dom';
+import { createRoot } from 'react-dom/client';
+import TextareaAutosize from 'react-textarea-autosize';
+import type {
+  ConsoleImageAttachment,
+  ConsolePromptInput,
+  ConsolePromptInputOptions,
+} from '../../shared/client-panel.ts';
+import { IMAGE_DEFAULTS, isImageFile, normalizeImage } from './images.ts';
+import { S } from './strings.ts';
+
+interface ComposerHandle {
+  focus(): void;
+  setDisabled(disabled: boolean): void;
+  setPlaceholder(text: string | null): void;
+}
+
+/** 托盘里的一张:归一化结果 + 同一份字节的 data URL 缩略图。 */
+interface Attached {
+  id: number;
+  image: ConsoleImageAttachment;
+  src: string;
+}
+
+function sizeCaption(image: ConsoleImageAttachment): string {
+  const kb = image.bytes / 1024;
+  const size = kb >= 1024 ? `${(kb / 1024).toFixed(1)}MB` : `${Math.round(kb)}KB`;
+  return `${size} · ${image.width}×${image.height}`;
+}
+
+const FORM_CLASS =
+  'rounded-[var(--radius-composer)] border border-border bg-surface p-2 shadow-[0_2px_14px_color-mix(in_oklab,var(--foreground)_5%,transparent)] transition-[border-color,box-shadow] duration-150 focus-within:border-border-strong focus-within:shadow-[0_4px_20px_color-mix(in_oklab,var(--foreground)_7%,transparent)]';
+
+const TEXTAREA_CLASS =
+  'max-h-52 min-h-12 w-full resize-none border-0 bg-transparent px-2.5 py-2 text-[15px] leading-6 text-foreground outline-none placeholder:text-muted-foreground/75';
+
+/** 两枚圆形图标钮共用的底:尺寸、焦点环、禁用态。 */
+const ICON_BUTTON =
+  'inline-flex size-8 shrink-0 items-center justify-center rounded-full p-0 outline-none transition-[background-color,color,opacity,transform] duration-150 disabled:pointer-events-none disabled:opacity-40 focus-visible:ring-2 focus-visible:ring-ring/40 [&_svg]:pointer-events-none [&_svg]:size-4';
+
+/** 发送钮:实底,是这一栏唯一的主动作。 */
+const SEND_CLASS = `${ICON_BUTTON} self-end bg-foreground text-background hover:bg-foreground/90 active:translate-y-px focus-visible:ring-offset-2 focus-visible:ring-offset-background`;
+
+/** 附图钮:无底色,不与发送钮抢份量。 */
+const ATTACH_CLASS = `${ICON_BUTTON} text-muted-foreground hover:bg-surface-hover hover:text-foreground`;
+
+const ICON_PROPS = {
+  viewBox: '0 0 24 24',
+  fill: 'none',
+  stroke: 'currentColor',
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round',
+  'aria-hidden': true,
+} as const;
+
+function ArrowUpIcon(): React.ReactElement {
+  return (
+    <svg {...ICON_PROPS} strokeWidth={2.2}>
+      <path d="M12 19.5v-15" />
+      <path d="M5.5 11 12 4.5 18.5 11" />
+    </svg>
+  );
+}
+
+function PictureIcon(): React.ReactElement {
+  return (
+    <svg {...ICON_PROPS} strokeWidth={2}>
+      <rect x="3.5" y="4.5" width="17" height="15" rx="2.5" />
+      <circle cx="8.5" cy="9" r="1.6" />
+      <path d="m4 17.5 5-4.5 3.5 3 3-2.5 4.5 4" />
+    </svg>
+  );
+}
+
+function CrossIcon(): React.ReactElement {
+  return (
+    <svg {...ICON_PROPS} strokeWidth={2.4}>
+      <path d="M7 7l10 10" />
+      <path d="M17 7 7 17" />
+    </svg>
+  );
+}
+
+/** 一张缩略图 + 悬停时右上角的移除钮。 */
+function Thumbnail({ item, onRemove }: { item: Attached; onRemove(): void }): React.ReactElement {
+  const caption = sizeCaption(item.image);
+  return (
+    <div
+      className="group relative size-20 overflow-hidden rounded-[10px] border border-border bg-surface-hover"
+      title={`${item.image.name}\n${caption}`}
+    >
+      <img src={item.src} alt={item.image.name} className="size-full object-cover" draggable={false} />
+      <button
+        type="button"
+        aria-label={S.removeImage(item.image.name)}
+        onClick={onRemove}
+        className="absolute top-1 right-1 inline-flex size-5 items-center justify-center rounded-full bg-foreground/80 text-background opacity-0 transition-opacity duration-100 hover:bg-foreground group-hover:opacity-100 focus-visible:opacity-100 [&_svg]:size-3"
+      >
+        <CrossIcon />
+      </button>
+    </div>
+  );
+}
+
+const PromptComposer = React.forwardRef<ComposerHandle, { opts: ConsolePromptInputOptions }>(
+  ({ opts }, ref) => {
+    const [value, setValue] = React.useState('');
+    const [disabled, setDisabled] = React.useState(opts.disabled ?? false);
+    const [attached, setAttached] = React.useState<Attached[]>([]);
+    /** 还在解码/缩放中的张数。>0 时发送钮暂停,免得把半批图发出去。 */
+    const [pending, setPending] = React.useState(0);
+    /** 最近一次拒收的理由。下一次成功入托盘或用户改动文本时清掉。 */
+    const [note, setNote] = React.useState<string | null>(null);
+    const [dragging, setDragging] = React.useState(false);
+    /** 盖住 `opts.placeholder` 的那一句;`null` 就是不盖。 */
+    const [placeholder, setPlaceholder] = React.useState<string | null>(null);
+    const textarea = React.useRef<HTMLTextAreaElement>(null);
+    const tools = React.useRef<HTMLSpanElement>(null);
+    const picker = React.useRef<HTMLInputElement>(null);
+    const nextId = React.useRef(1);
+    const imagesOpts = opts.images;
+    const maxImages = imagesOpts ? (imagesOpts.max ?? IMAGE_DEFAULTS.max) : 0;
+
+    React.useLayoutEffect(() => {
+      const node = opts.tools;
+      const host = tools.current;
+      if (!node || !host) return;
+      host.appendChild(node);
+      return () => node.remove();
+    }, [opts.tools]);
+
+    React.useImperativeHandle(ref, () => ({
+      focus: () => textarea.current?.focus(),
+      setDisabled,
+      setPlaceholder,
+    }), []);
+
+    /** 收一批文件。超出张数的整批拒;单张失败只报那一张,其余照收。 */
+    const addFiles = (files: Iterable<File>): void => {
+      if (!imagesOpts) return;
+      const list = [...files].filter(isImageFile);
+      if (list.length === 0) return;
+      if (attached.length + pending + list.length > maxImages) {
+        setNote(S.tooManyImages(maxImages));
+        return;
+      }
+      setNote(null);
+      setPending((n) => n + list.length);
+      for (const file of list) {
+        // 序号先于归一化分配:大图缩得慢,托盘顺序仍按用户选的顺序,不按完成顺序
+        const id = nextId.current++;
+        normalizeImage(file, imagesOpts).then(
+          (image) => {
+            const src = `data:${image.mime};base64,${image.base64}`;
+            setAttached((now) => [...now, { id, image, src }].sort((a, b) => a.id - b.id));
+          },
+          (err: unknown) => setNote(err instanceof Error ? err.message : String(err)),
+        ).finally(() => setPending((n) => n - 1));
+      }
+    };
+
+    const remove = (id: number): void => setAttached((now) => now.filter((a) => a.id !== id));
+
+    const canSubmit = !disabled && pending === 0 && (value.trim() !== '' || attached.length > 0);
+
+    const submit = (): void => {
+      if (!canSubmit) return;
+      const images = attached.map((a) => a.image);
+      if (opts.onSubmit(value.trim(), images) !== false) {
+        setValue('');
+        setAttached([]);
+        setNote(null);
+      }
+    };
+
+    return (
+      <form
+        aria-label={opts.label ?? S.messageInput}
+        data-dragging={dragging || undefined}
+        className={dragging ? `${FORM_CLASS} border-dashed border-border-strong` : FORM_CLASS}
+        onSubmit={(event) => {
+          event.preventDefault();
+          submit();
+        }}
+        onDragOver={imagesOpts ? (event) => {
+          if (![...event.dataTransfer.types].includes('Files')) return;
+          event.preventDefault();
+          setDragging(true);
+        } : undefined}
+        onDragLeave={imagesOpts ? () => setDragging(false) : undefined}
+        onDrop={imagesOpts ? (event) => {
+          setDragging(false);
+          if (event.dataTransfer.files.length === 0) return;
+          event.preventDefault();
+          addFiles(event.dataTransfer.files);
+        } : undefined}
+      >
+        {attached.length > 0 && (
+          <div className="flex flex-wrap gap-2 px-2 pt-1 pb-2">
+            {attached.map((a) => (
+              <Thumbnail key={a.id} item={a} onRemove={() => remove(a.id)} />
+            ))}
+          </div>
+        )}
+        <div className="flex min-w-0 items-start">
+          <TextareaAutosize
+            ref={textarea}
+            minRows={1}
+            maxRows={8}
+            rows={1}
+            value={value}
+            disabled={disabled}
+            placeholder={placeholder ?? opts.placeholder ?? S.typeMessage}
+            className={TEXTAREA_CLASS}
+            onChange={(event) => { setValue(event.currentTarget.value); setNote(null); }}
+            onKeyDown={(event) => {
+              // Enter 发送;Shift+Enter 换行;输入法组合中的 Enter 是选字,不是发送
+              if (event.key !== 'Enter' || event.shiftKey || event.nativeEvent.isComposing) return;
+              event.preventDefault();
+              submit();
+            }}
+            onPaste={imagesOpts ? (event) => {
+              const files = [...event.clipboardData.files].filter(isImageFile);
+              if (files.length === 0) return;
+              // 粘贴内容包含图片时只处理图片。
+              event.preventDefault();
+              addFiles(files);
+            } : undefined}
+          />
+        </div>
+        <div className="flex min-h-9 items-center justify-between gap-2 px-1">
+          <span className="truncate px-2 text-xs text-muted-foreground">
+            {note ? <span className="text-danger">{note}</span>
+              : pending > 0 ? S.processingImages(pending)
+              : opts.hint ?? S.enterToSend}
+          </span>
+          <div className="flex items-center gap-1">
+            {imagesOpts && (
+              <>
+                <input
+                  ref={picker}
+                  type="file"
+                  accept="image/*"
+                  multiple
+                  hidden
+                  onChange={(event) => {
+                    if (event.currentTarget.files) addFiles(event.currentTarget.files);
+                    // 同一个文件再选一次也要触发 change
+                    event.currentTarget.value = '';
+                  }}
+                />
+                <button
+                  type="button"
+                  aria-label={S.addImage}
+                  title={S.addImageHint}
+                  className={ATTACH_CLASS}
+                  disabled={disabled || attached.length >= maxImages}
+                  onClick={() => picker.current?.click()}
+                >
+                  <PictureIcon />
+                </button>
+              </>
+            )}
+            <span ref={tools} className="flex items-center" />
+            <button
+              type="submit"
+              aria-label={S.sendMessage}
+              title={S.sendMessage}
+              className={SEND_CLASS}
+              disabled={!canSubmit}
+            >
+              <ArrowUpIcon />
+            </button>
+          </div>
+        </div>
+      </form>
+    );
+  },
+);
+PromptComposer.displayName = 'PromptComposer';
+
+export function promptInput(
+  doc: Document,
+  signal: AbortSignal,
+  opts: ConsolePromptInputOptions,
+): ConsolePromptInput {
+  const el = doc.createElement('div');
+  el.className = 'prompt-input-host';
+  const handle = React.createRef<ComposerHandle>();
+  const root = createRoot(el, { identifierPrefix: 'cortico-' });
+  flushSync(() => root.render(<PromptComposer ref={handle} opts={opts} />));
+
+  const dispose = (): void => root.unmount();
+  if (signal.aborted) dispose();
+  else signal.addEventListener('abort', dispose, { once: true });
+
+  return {
+    el,
+    focus: () => handle.current?.focus(),
+    setDisabled: (disabled) => handle.current?.setDisabled(disabled),
+    setPlaceholder: (text) => handle.current?.setPlaceholder(text),
+  };
+}

package/src/web/client/ui/sheet.ts

@@ -0,0 +1,131 @@
+/**
+ * 档案卡与几个行内小件。
+ *
+ * 视觉全部复用 `src/web/public/styles.css` 里的共享 class。`sheetbody` 是卡片内部
+ * 布局的稳定挂点，供等高卡片把动作区压到下沿。
+ */
+
+import type { ConsoleBadge } from '../../shared/console-protocol.ts';
+import type {
+  ConsoleChipTone,
+  ConsoleMemo,
+  ConsoleSheet,
+  ConsoleSheetOptions,
+} from '../../shared/client-panel.ts';
+import { h } from './dom.ts';
+
+function heading(doc: Document, title: string, en?: string): HTMLHeadingElement {
+  const head = h(doc, 'h3', null, title);
+  if (en) head.appendChild(h(doc, 'span', 'en', en));
+  return head;
+}
+
+/** 有 desc 时将说明行作为 body 的首个子节点，以匹配折叠卡选择器。 */
+function descLine(doc: Document, body: HTMLElement, text?: string): HTMLElement | null {
+  if (!text) return null;
+  const el = h(doc, 'div', 'sh-desc', text);
+  body.appendChild(el);
+  return el;
+}
+
+/** 档案卡。控制台的基本视觉单元。 */
+export function sheet(doc: Document, opts: ConsoleSheetOptions): ConsoleSheet {
+  const el = h(doc, 'div', 'sheet tabbed');
+  const note = h(doc, 'span', 'foldnote hidden');
+  const body = h(doc, 'div', 'sheetbody');
+  const head = heading(doc, opts.title, opts.en);
+  // note 照样进 DOM(带 .hidden),这样 `sheet()` 与 `foldSheet()` 的节点关系一致:
+  // 扩展往 note 里写字在两种卡上都是合法操作,只是不折叠的卡看不见它。
+  head.appendChild(note);
+  el.append(head, body);
+  return { el, body, note, desc: descLine(doc, body, opts.desc) };
+}
+
+/** 折叠状态通过面板 memo 存取，键由面板命名空间隔离。 */
+export function foldSheet(
+  doc: Document,
+  memo: ConsoleMemo,
+  signal: AbortSignal,
+  id: string,
+  opts: ConsoleSheetOptions & { defaultOpen?: boolean },
+): ConsoleSheet {
+  const el = h(doc, 'details', 'sheet tabbed fold');
+  el.open = memo.get<boolean>(foldKey(id), !!opts.defaultOpen);
+  const sum = h(doc, 'summary');
+  const note = h(doc, 'span', 'foldnote');
+  sum.append(heading(doc, opts.title, opts.en), note);
+  const body = h(doc, 'div', 'foldbody');
+  el.append(sum, body);
+  // 卡片本身随 root 一起被丢弃,监听本不至于泄漏;仍挂 signal 是因为 memo 可能比
+  // 面板活得久——面板都卸了还回写折叠状态,那是拿旧值盖新值。
+  el.addEventListener('toggle', () => memo.set(foldKey(id), el.open), { signal });
+  return { el, body, note, desc: descLine(doc, body, opts.desc) };
+}
+
+/** memo 里的键。加前缀是为了不跟扩展自己的键撞。 */
+function foldKey(id: string): string {
+  return 'fold:' + id;
+}
+
+/** 一行按钮/状态条。 */
+export function rowbar(doc: Document): HTMLDivElement {
+  return h(doc, 'div', 'rowbar');
+}
+
+/** 卡片内一个独立内容组的标题。 */
+export function section(doc: Document, title: string, description?: string): HTMLDivElement {
+  const el = h(doc, 'div', 'sectionhead');
+  el.appendChild(h(doc, 'h4', null, title));
+  if (description) el.appendChild(h(doc, 'div', 'sectiondesc', description));
+  return el;
+}
+
+/** 提交、保存与破坏性操作所在的卡片脚栏。 */
+export function actions(doc: Document): HTMLDivElement {
+  return h(doc, 'div', 'rowbar actionbar');
+}
+
+export function button(
+  doc: Document,
+  signal: AbortSignal,
+  label: string,
+  opts?: {
+    variant?: 'plain' | 'primary' | 'danger';
+    size?: 'sm' | 'md';
+    onClick?: (ev: MouseEvent) => void;
+  },
+): HTMLButtonElement {
+  // class 顺序与既有前端一致:`btn sm primary`
+  let cls = 'btn';
+  if (opts?.size === 'sm') cls += ' sm';
+  if (opts?.variant === 'primary' || opts?.variant === 'danger') cls += ' ' + opts.variant;
+  const el = h(doc, 'button', cls, label);
+  el.type = 'button';
+  if (opts?.onClick) el.addEventListener('click', opts.onClick, { signal });
+  return el;
+}
+
+/**
+ * 药丸。三态各有配色：`on` 用 `--ok`，`off` 用 `--ink-dim`（比中性态更淡的"关闭/静默"），
+ * `plain` 与不给 tone 一样落中性 `.pill`。
+ */
+export function pill(doc: Document, text: string, tone?: ConsoleBadge['tone']): HTMLSpanElement {
+  const cls = tone === 'on' ? 'pill on' : tone === 'off' ? 'pill off' : 'pill';
+  return h(doc, 'span', cls, text);
+}
+
+/** 筹码。等宽小字的读数标签，`warn` / `accent` 对应既有的 `warnc` / `dreamc` 两个配色。 */
+export function chip(doc: Document, text: string, tone?: ConsoleChipTone): HTMLSpanElement {
+  const cls = tone === 'warn' ? 'chip warnc' : tone === 'accent' ? 'chip dreamc' : 'chip';
+  return h(doc, 'span', cls, text);
+}
+
+/** 一行消息（保存结果、错误）。`bad` 走警示配色。 */
+export function msgline(doc: Document, text?: string, bad?: boolean): HTMLDivElement {
+  return h(doc, 'div', bad ? 'msgline bad' : 'msgline', text ?? '');
+}
+
+/** 空态。居中灰字，占一片版面——"这里本该有东西，但现在没有"。 */
+export function placeholder(doc: Document, text: string): HTMLDivElement {
+  return h(doc, 'div', 'placeholder', text);
+}

package/src/web/client/ui/strings.ts

@@ -0,0 +1,71 @@
+import { pick } from '../core/language.ts';
+
+const zh = {
+  copy: '复制',
+  copyNothing: '取不到要复制的内容',
+  copied: '已复制',
+  copyFailed: '复制失败，已展开文本供手动选取',
+  imageReadFailed: '读取图片失败',
+  canvasUnsupported: '浏览器不支持 canvas,无法缩放图片',
+  imageEncodeFailed: '图片重编码失败',
+  fileFallback: '文件',
+  imageFallback: '图片',
+  notImage: (name: string) => `${name} 不是支持的图片格式(JPEG / PNG / WebP / GIF)`,
+  undecodable: (name: string) => `${name} 无法解码`,
+  stillTooLarge: (name: string, mb: number) => `${name} 缩放后仍超过 ${mb}MB`,
+  lamp: {
+    online: '正常',
+    loading: '启动中',
+    error: '故障',
+    offline: '未启用',
+  },
+  cancel: '取消',
+  proceedAnyway: '仍要继续',
+  confirm: '确认',
+  close: '✕ 关闭 (Esc)',
+  tooManyImages: (max: number) => `一条消息最多 ${max} 张图`,
+  messageInput: '消息输入',
+  typeMessage: '输入消息…',
+  processingImages: (count: number) => `处理 ${count} 张图片…`,
+  enterToSend: 'Enter 发送 · Shift+Enter 换行',
+  sendMessage: '发送消息',
+  addImage: '添加图片',
+  addImageHint: '添加图片（也可粘贴或拖入）',
+  removeImage: (name: string) => `移除 ${name}`,
+};
+
+const en: typeof zh = {
+  copy: 'Copy',
+  copyNothing: 'Nothing to copy',
+  copied: 'Copied',
+  copyFailed: 'Copy failed; text expanded for manual selection',
+  imageReadFailed: 'Failed to read image',
+  canvasUnsupported: 'This browser does not support canvas; cannot resize image',
+  imageEncodeFailed: 'Image re-encoding failed',
+  fileFallback: 'File',
+  imageFallback: 'Image',
+  notImage: (name: string) => `${name} is not a supported image format (JPEG / PNG / WebP / GIF)`,
+  undecodable: (name: string) => `${name} could not be decoded`,
+  stillTooLarge: (name: string, mb: number) => `${name} still exceeds ${mb}MB after resizing`,
+  lamp: {
+    online: 'online',
+    loading: 'starting',
+    error: 'error',
+    offline: 'disabled',
+  },
+  cancel: 'Cancel',
+  proceedAnyway: 'Proceed anyway',
+  confirm: 'Confirm',
+  close: '✕ Close (Esc)',
+  tooManyImages: (max: number) => `At most ${max} images per message`,
+  messageInput: 'Message input',
+  typeMessage: 'Type a message…',
+  processingImages: (count: number) => `Processing ${count} image(s)…`,
+  enterToSend: 'Enter to send · Shift+Enter for newline',
+  sendMessage: 'Send message',
+  addImage: 'Add image',
+  addImageHint: 'Add image (paste or drop also works)',
+  removeImage: (name: string) => `Remove ${name}`,
+};
+
+export const S = pick({ zh, en });