auricui-skill 0.0.0-stage → 0.1.2

package/skill/assets/upstream/apps/desktop/chat/src/components/TurnQuestionCard.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+/**
+ * A question from the agent (ask_user), shown above the composer where error cards appear.
+ *
+ * As with Claude Code's AskUserQuestion and Codex's request_user_input, the turn waits here: a picked option (or
+ * number key), or a line written under "Other", is the result of that tool call and the agent carries on, in the
+ * same turn, with no new bubble. The "asked you…" row in the conversation then shows the answer. Closing skips the
+ * question and the agent goes on by its own judgment.
+ */
+import React from 'react';
+import { ArrowUp, MessageCircleQuestion } from 'lucide-react';
+import type { AgentAsk } from '@openfilm/shared';
+import type { LocalAgentAnswer, LocalAgentQuestion } from '@/lib/desktop-bridge';
+import { ChoiceRow, ComposerCard, useNumberKeys } from './ComposerCard';
+import { useT } from '@/i18n';
+
+export function TurnQuestionCard({
+  ask,
+  onAnswer,
+  onSkip,
+  allowOther = true,
+}: {
+  ask: Pick<AgentAsk, 'question' | 'options'>;
+  /** Whether a free answer is allowed (some local agent questions take options only). A question without options always allows one. */
+  allowOther?: boolean;
+  /** The answer (the picked option's text, or what was written). */
+  onAnswer: (text: string) => void;
+  /** Closing skips the question. */
+  onSkip: () => void;
+}) {
+  const t = useT();
+  const [other, setOther] = React.useState('');
+  /* Collapsed: out of the way, but the turn still waits; the card stays as one line with the question */
+  const [collapsed, setCollapsed] = React.useState(false);
+  const freeTextOnly = ask.options.length === 0;
+  const [otherOpen, setOtherOpen] = React.useState(freeTextOnly);
+  const canWrite = allowOther || freeTextOnly;
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  const send = React.useCallback((text: string) => {
+    const value = text.trim();
+    if (value) onAnswer(value);
+  }, [onAnswer]);
+  const pickByIndex = React.useCallback((index: number) => {
+    const option = ask.options[index];
+    if (option) send(option.label);
+    else if (canWrite && index === ask.options.length) { setOtherOpen(true); window.setTimeout(() => inputRef.current?.focus(), 0); }
+  }, [ask.options, canWrite, send]);
+  useNumberKeys(ask.options.length + (canWrite ? 1 : 0), collapsed ? null : pickByIndex);
+
+  return (
+    <ComposerCard
+      role="dialog"
+      icon={<MessageCircleQuestion size={14} />}
+      title={ask.question}
+      onClose={onSkip}
+      collapse={{ collapsed, onToggle: () => setCollapsed((v) => !v), label: t(collapsed ? 'turnAsk.expand' : 'turnAsk.collapse') }}
+    >
+      <div className="-mx-1 mt-2 flex flex-col gap-0.5">
+        {ask.options.map((option, index) => (
+          <ChoiceRow
+            key={`${index}-${option.label}`}
+            index={index + 1}
+            label={option.label}
+            description={option.description}
+            onPick={() => send(option.label)}
+          />
+        ))}
+        {otherOpen ? (
+            <form
+              className="flex items-center gap-2 px-2 py-1"
+              onSubmit={(event) => { event.preventDefault(); send(other); }}
+            >
+              <input
+                ref={inputRef}
+                autoFocus={freeTextOnly}
+                value={other}
+                onChange={(event) => setOther(event.target.value)}
+                onKeyDown={(event) => { if (event.key === 'Escape' && !freeTextOnly) setOtherOpen(false); }}
+                placeholder={t('turnAsk.otherPlaceholder')}
+                className="h-7 min-w-0 flex-1 rounded-lg bg-[var(--surface-2)] px-2.5 text-[13px] text-[var(--text)] outline-none placeholder:text-[var(--text-faint)] focus:ring-1 focus:ring-[var(--border-strong)]"
+              />
+              <button
+                type="submit"
+                disabled={!other.trim()}
+                aria-label={t('turnAsk.send')}
+                className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-[var(--text)] text-[var(--panel)] transition hover:opacity-90 disabled:opacity-30"
+              >
+                <ArrowUp size={14} />
+              </button>
+            </form>
+          ) : canWrite ? (
+            <ChoiceRow
+              index={ask.options.length + 1}
+              label={<span className="text-[var(--text-muted)]">{t('turnAsk.other')}</span>}
+              onPick={() => pickByIndex(ask.options.length)}
+            />
+          ) : null}
+      </div>
+    </ComposerCard>
+  );
+}
+
+/**
+ * Questions from a local Claude Code or Codex (see LocalAgentTurn in local-agent-run): possibly several at once.
+ * One card steps through them and returns all answers after the last. Closing skips them all.
+ */
+export function LocalAgentQuestionCard({
+  questions,
+  onDone,
+}: {
+  questions: LocalAgentQuestion[];
+  onDone: (answers: Record<string, LocalAgentAnswer> | null) => void;
+}) {
+  const [at, setAt] = React.useState(0);
+  const answers = React.useRef<Record<string, LocalAgentAnswer>>({});
+  const q = questions[at];
+  if (!q) return null;
+  return (
+    <TurnQuestionCard
+      key={q.id}
+      ask={{ question: q.question, options: q.options }}
+      allowOther={q.customId != null}
+      onAnswer={(text) => {
+        answers.current[q.id] = q.options.some((o) => o.label === text) ? { label: text } : { text };
+        if (at + 1 < questions.length) setAt(at + 1);
+        else onDone(answers.current);
+      }}
+      onSkip={() => onDone(null)}
+    />
+  );
+}

package/skill/assets/upstream/apps/desktop/chat/src/components/dock-pane-bar.ts

@@ -0,0 +1,14 @@
+/**
+ * One style for the top bar of the workspace's three panes; the conversation pane's is the original.
+ *
+ * If one pane changed its type, button boxes or spacing, the three would stop lining up, so it lives in one place.
+ */
+export const PANE_BAR = 'flex h-8 shrink-0 items-center gap-1 px-1.5';
+export const PANE_TITLE = 'min-w-0 truncate text-[12px] font-medium text-[var(--text-muted)]';
+export const PANE_BTN =
+  'flex h-[22px] w-[22px] shrink-0 items-center justify-center rounded-md text-[var(--text-dim)] transition hover:bg-[var(--bg-hover)] hover:text-[var(--text)]';
+export const PANE_BTN_ON = 'bg-[var(--bg-hover)] text-[var(--text)]';
+export const PANE_ICON = 14;
+/** The viewer's two panel switches (assets, inspector): the buttons a person reaches for most, one size up. */
+export const PANE_TOGGLE = PANE_BTN.replace('h-[22px] w-[22px]', 'h-7 w-7');
+export const PANE_TOGGLE_ICON = 16;

package/skill/assets/upstream/apps/desktop/chat/src/components/project-version.ts

@@ -0,0 +1,37 @@
+import type { PromptDisplay, TurnAttachment } from '@openfilm/shared';
+import type { FileChange } from '@/lib/file-changes';
+import type { Balance } from '@/lib/balance';
+
+/**
+ * One turn of the conversation as the chat draws it: what the person said, what they brought, who answered, how
+ * long it took and how it ended.
+ */
+export interface ProjectVersion {
+  assetId: string;
+  label: string;
+  title: string;
+  prompt: string;
+  /** The message as written in the composer (with pill markers); without it, `prompt` is rendered. */
+  promptDisplay?: PromptDisplay;
+  /** What came with the message (names and thumbnails). */
+  attachments: TurnAttachment[];
+  posterUrl?: string;
+  status: 'ready' | 'active' | 'failed';
+  current: boolean;
+  /** The turn's frame (who answered, which model, how long, how it stopped); see project-versions. */
+  agent?: string;
+  model?: string;
+  durationMs?: number;
+  outcome?: 'stopped' | 'failed' | 'balance';
+  /** outcome 'balance': which service had no balance left, and its page to top it up */
+  balance?: Balance;
+  /** outcome 'failed': why, as the turn kept it (on its footer's Interrupted, on hover) */
+  error?: string;
+  /** When it was sent / settled (ISO): hover says "N minutes ago". */
+  createdAt?: string;
+  settledAt?: string;
+  /** what the turn changed in the project's files (lib/file-changes); none when nothing did */
+  fileChanges?: FileChange[];
+  /** 'background': the agent started it by itself, a background task of its own having come back (no message) */
+  origin?: 'background';
+}

package/skill/assets/upstream/apps/desktop/chat/src/components/prompt-editor/MentionMenuPlugin.tsx

@@ -0,0 +1,372 @@
+'use client';
+
+/**
+ * Type `@` in the sentence to pick something and insert it.
+ *
+ * The host's providers decide what can be picked (see mention-menu). This plugin
+ * recognizes the `@`, places the menu above the composer, and replaces the typed `@xxx`
+ * with a pill.
+ *
+ * Built on Lexical's LexicalTypeaheadMenuPlugin, which handles anchoring, repositioning
+ * on scroll, arrow keys and Enter. Only the trigger is our own: Lexical's requires
+ * whitespace or line start before `@`, which does not work in text without spaces
+ * (Chinese, Japanese).
+ */
+import React from 'react';
+import { createPortal } from 'react-dom';
+import { useChatMenu } from '@/lib/chat-menu';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import {
+  LexicalTypeaheadMenuPlugin,
+  MenuOption,
+  type MenuTextMatch,
+} from '@lexical/react/LexicalTypeaheadMenuPlugin';
+import {
+  $createTextNode,
+  $insertNodes,
+  COMMAND_PRIORITY_CRITICAL,
+  KEY_ESCAPE_COMMAND,
+  type LexicalEditor,
+  type TextNode,
+} from 'lexical';
+import { FileText, Image as ImageIcon, Music, Video } from 'lucide-react';
+import { PILL_ICON } from './PromptPill';
+import { $createPromptReferenceNode } from './PromptReferenceNode';
+import {
+  buildMentionMenu,
+  matchMentionTrigger,
+  type MentionEntry,
+  type MentionProvider,
+  type MentionTrigger,
+} from './mention-menu';
+import { chatLayer } from '@/lib/chat-layer';
+
+export interface MentionMenuConfig {
+  /** What `@` can pick, in menu group order. */
+  providers: MentionProvider[];
+  /** The menu's accessible name (it is a listbox). */
+  label: string;
+  /**
+   * Called when the menu opens.
+   *
+   * The file list is fetched only then: most sessions never mention a file.
+   */
+  onOpen?: () => void;
+  /** When typing opens it: an `@` (the default), or a `/` at the start (the agent's commands, matchSlashTrigger). */
+  trigger?: (textBeforeCursor: string) => MentionTrigger | null;
+}
+
+/** Lexical requires options to subclass MenuOption (it attaches a ref for scrolling). */
+class MentionMenuOption extends MenuOption {
+  readonly entry: MentionEntry;
+
+  constructor(entry: MentionEntry) {
+    super(entry.item.id);
+    this.entry = entry;
+  }
+}
+
+export function MentionMenuPlugin({ providers, label, onOpen, trigger: match = matchMentionTrigger }: MentionMenuConfig) {
+  const [editor] = useLexicalComposerContext();
+  const [query, setQuery] = React.useState('');
+
+  const options = React.useMemo(
+    () => buildMentionMenu(providers, query).map((entry) => new MentionMenuOption(entry)),
+    [providers, query],
+  );
+
+  /* These callbacks must be stable. The host re-renders often (20 times a second during
+     playback) and Lexical uses them as effect dependencies, so new functions would
+     re-subscribe every render. The trigger likewise depends only on the typed text, not
+     on a new providers array. */
+  const providersRef = React.useRef(providers);
+  providersRef.current = providers;
+  const onOpenRef = React.useRef(onOpen);
+  onOpenRef.current = onOpen;
+  const handleOpen = React.useCallback(() => onOpenRef.current?.(), []);
+  const handleQueryChange = React.useCallback((value: string | null) => setQuery(value ?? ''), []);
+
+  const matchRef = React.useRef(match);
+  matchRef.current = match;
+  const triggerFn = React.useCallback((text: string): MenuTextMatch | null => {
+    const trigger = matchRef.current(text);
+    if (!trigger) return null;
+    /* No matches, no menu: an open menu takes the arrow keys, so an empty one would lock
+       them while the user probably wants to move the caret. */
+    if (buildMentionMenu(providersRef.current, trigger.query).length === 0) return null;
+    return {
+      leadOffset: trigger.leadOffset,
+      matchingString: trigger.query,
+      replaceableString: trigger.replaceableString,
+    };
+  }, []);
+
+  const onSelectOption = React.useCallback(
+    (option: MentionMenuOption, nodeToReplace: TextNode | null, closeMenu: () => void) => {
+      const { item } = option.entry;
+      const picked = item.disabled ? null : item.select();
+      /* a command goes in as its words, with a space for what follows */
+      if (picked && 'text' in picked) {
+        editor.update(() => {
+          const node = $createTextNode(`${picked.text} `);
+          if (nodeToReplace) nodeToReplace.replace(node);
+          else $insertNodes([node]);
+          node.select();
+          closeMenu();
+        });
+        keepCaretInComposer(editor);
+        return;
+      }
+      const references = picked ? [picked].flat() : [];
+      /* A disabled item yields nothing, but the menu still closes: an open menu takes
+         Enter, so the next Enter would not send. Same when select() returns nothing
+         (too many references). */
+      if (!references.length) {
+        closeMenu();
+        return;
+      }
+      editor.update(() => {
+        /* A space after each pill: the caret cannot enter a pill, so the next typed text
+           needs somewhere to go apart from it. */
+        const nodes = references.flatMap((reference) => [$createPromptReferenceNode(reference), $createTextNode(' ')]);
+        // nodeToReplace is the typed `@xxx`; without it, insert at the caret.
+        if (nodeToReplace) {
+          nodeToReplace.replace(nodes[0]!);
+          let last = nodes[0]!;
+          for (const node of nodes.slice(1)) { last.insertAfter(node); last = node; }
+        } else $insertNodes(nodes);
+        (nodes.at(-1) as TextNode).select();
+        closeMenu();
+      });
+      keepCaretInComposer(editor);
+    },
+    [editor],
+  );
+
+  return (
+    <LexicalTypeaheadMenuPlugin<MentionMenuOption>
+      options={options}
+      onQueryChange={handleQueryChange}
+      onSelectOption={onSelectOption}
+      onOpen={handleOpen}
+      triggerFn={triggerFn}
+      /* The menu must get Enter first: the composer's Enter-to-send is HIGH, so without
+         CRITICAL, Enter with the menu open would send the unfinished message. */
+      commandPriority={COMMAND_PRIORITY_CRITICAL}
+      menuRenderFn={(anchorRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => (
+        anchorRef.current && options.length > 0 && typeof document !== 'undefined'
+          ? createPortal(
+            <MentionMenu
+              label={label}
+              options={options}
+              selectedIndex={selectedIndex}
+              onPick={selectOptionAndCleanUp}
+              onHighlight={setHighlightedIndex}
+              shell={composerShell(editor.getRootElement())}
+              editorRoot={editor.getRootElement()}
+              onDismiss={() => editor.dispatchCommand(KEY_ESCAPE_COMMAND, new KeyboardEvent('keydown', { key: 'Escape' }))}
+            />,
+            chatLayer(),
+          )
+          : null
+      )}
+    />
+  );
+}
+
+/**
+ * After a pick (Enter, Tab or click), the caret must stay in the composer, after the
+ * pill's space.
+ *
+ * The pick also re-renders the host, unmounts the menu and mounts the pill's remove
+ * button. If any of that takes focus, the next keystrokes go to the page as editor
+ * shortcuts. So once the frame settles, focus returns if it left; Lexical's focus
+ * restores the stored selection, which is right after the pill.
+ */
+function keepCaretInComposer(editor: LexicalEditor): void {
+  if (typeof window === 'undefined') return;
+  window.requestAnimationFrame(() => {
+    const root = editor.getRootElement();
+    if (!root?.isConnected || !editor.isEditable()) return;
+    if (root.ownerDocument.activeElement === root) return;
+    editor.focus();
+  });
+}
+
+/** The box the menu aligns to: the host's `data-prompt-shell`, or else the editor's parent. */
+function composerShell(root: HTMLElement | null): HTMLElement | null {
+  if (!root) return null;
+  return root.closest<HTMLElement>('[data-prompt-shell]') ?? root.parentElement ?? root;
+}
+
+/** A file's broad type from its extension, only to pick an icon, so images and audio look different. */
+const IMAGE_EXT = /\.(png|jpe?g|gif|webp|avif|svg|heic|bmp)$/i;
+const VIDEO_EXT = /\.(mp4|mov|webm|m4v|mkv|avi)$/i;
+const AUDIO_EXT = /\.(mp3|wav|m4a|aac|ogg|flac|opus)$/i;
+function fileIcon(label: string): React.ComponentType<{ size?: number; className?: string }> {
+  if (IMAGE_EXT.test(label)) return ImageIcon;
+  if (VIDEO_EXT.test(label)) return Video;
+  if (AUDIO_EXT.test(label)) return Music;
+  return FileText;
+}
+
+/**
+ * The menu.
+ *
+ * Placed above the whole composer, left-aligned and as wide (at most 360), not at the
+ * caret, where it would cover the text just typed. Below only when there is no room
+ * above. A click anywhere outside the menu and the editor closes it, since an open menu
+ * takes the arrow keys and Enter.
+ */
+function MentionMenu({
+  label,
+  options,
+  selectedIndex,
+  onPick,
+  onHighlight,
+  shell,
+  editorRoot,
+  onDismiss,
+}: {
+  label: string;
+  options: MentionMenuOption[];
+  selectedIndex: number | null;
+  onPick: (option: MentionMenuOption) => void;
+  onHighlight: (index: number) => void;
+  shell: HTMLElement | null;
+  editorRoot: HTMLElement | null;
+  onDismiss: () => void;
+}) {
+  const ref = React.useRef<HTMLDivElement>(null);
+  const [style, setStyle] = React.useState<React.CSSProperties | null>(null);
+  useChatMenu(true);
+
+  React.useLayoutEffect(() => {
+    if (!shell) return undefined;
+    const place = () => {
+      const r = shell.getBoundingClientRect();
+      const width = Math.min(360, Math.max(260, r.width));
+      const left = Math.max(8, Math.min(r.left, window.innerWidth - width - 8));
+      const gap = 8;
+      const roomAbove = r.top - gap - 8;
+      const roomBelow = window.innerHeight - r.bottom - gap - 8;
+      const up = roomAbove >= Math.min(320, roomBelow) || roomAbove >= 200;
+      setStyle({
+        position: 'fixed',
+        left,
+        width,
+        maxHeight: Math.max(160, Math.min(340, up ? roomAbove : roomBelow)),
+        ...(up ? { bottom: window.innerHeight - r.top + gap } : { top: r.bottom + gap }),
+      });
+    };
+    place();
+    window.addEventListener('resize', place);
+    window.addEventListener('scroll', place, true);
+    return () => {
+      window.removeEventListener('resize', place);
+      window.removeEventListener('scroll', place, true);
+    };
+  }, [shell]);
+
+  /* Capture phase: some elements stop pointerdown before it bubbles to window. A click
+     into an iframe sends no event but blurs the window, which also counts as outside. */
+  const dismissRef = React.useRef(onDismiss);
+  dismissRef.current = onDismiss;
+  React.useEffect(() => {
+    const outside = (event: PointerEvent) => {
+      const target = event.target as Node;
+      if (ref.current?.contains(target) || editorRoot?.contains(target)) return;
+      dismissRef.current();
+    };
+    const blur = () => dismissRef.current();
+    window.addEventListener('pointerdown', outside, true);
+    window.addEventListener('blur', blur);
+    return () => {
+      window.removeEventListener('pointerdown', outside, true);
+      window.removeEventListener('blur', blur);
+    };
+  }, [editorRoot]);
+
+  if (!style) return null;
+  return (
+    <div
+      ref={ref}
+      role="listbox"
+      aria-label={label}
+      /* Marks the open mention menu. */
+      data-prompt-menu=""
+      style={style}
+      className="z-[10000] flex flex-col overflow-hidden rounded-[14px] border border-[var(--border)] bg-[var(--surface)] shadow-[0_18px_48px_-12px_rgba(0,0,0,0.45),0_2px_8px_rgba(0,0,0,0.12)]"
+    >
+      <div className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden p-1.5">
+        {options.map((option, index) => {
+          const { item, groupLabel, firstOfGroup } = option.entry;
+          const Icon = item.icon ?? (item.kind === 'file' ? fileIcon(item.label) : PILL_ICON[item.kind]);
+          const selected = index === selectedIndex;
+          return (
+            <React.Fragment key={option.key}>
+              {firstOfGroup ? (
+                <div
+                  role="presentation"
+                  className={`px-2 pb-1 text-[11px] font-medium text-[var(--text-faint)] ${index === 0 ? 'pt-1' : 'mt-1 border-t border-[var(--border)] pt-2.5'}`}
+                >
+                  {groupLabel}
+                </div>
+              ) : null}
+              <div
+                role="option"
+                /* Lexical points aria-activedescendant at this id (its own renderer uses
+                   the same scheme), so screen readers follow the keyboard selection. */
+                id={`typeahead-item-${index}`}
+                aria-selected={selected}
+                aria-disabled={item.disabled ? true : undefined}
+                ref={option.setRefElement}
+                onMouseEnter={() => onHighlight(index)}
+                /* Keep focus in the editor on mouse down, so typing continues after the pick. */
+                onMouseDown={(event) => event.preventDefault()}
+                onClick={() => onPick(option)}
+                className={`flex items-center gap-2.5 rounded-lg px-2 py-1.5 text-[13px] ${
+                  item.disabled
+                    ? 'cursor-not-allowed opacity-50'
+                    : `cursor-pointer ${selected ? 'bg-[var(--bg-hover)]' : ''}`
+                }`}
+              >
+                <span className={`flex h-6 w-6 shrink-0 items-center justify-center rounded-md ${selected && !item.disabled ? 'bg-[var(--surface)] text-[var(--text)]' : 'bg-[var(--surface-2)] text-[var(--text-muted)]'}`}>
+                  <Icon size={13} />
+                </span>
+                {/* A disabled item keeps its full name and the hint shrinks instead. */}
+                <span className={`truncate text-[var(--text)] ${item.disabled || item.describes ? 'max-w-[60%] shrink-0' : 'min-w-0 flex-1'}`}>{item.label}</span>
+                {/* Disabled: why. Otherwise: the file size or timecode. */}
+                {item.disabled && item.disabledHint ? (
+                  <span className="min-w-0 flex-1 truncate text-right text-[11px] text-[var(--text-faint)]" title={item.disabledHint}>
+                    {item.disabledHint}
+                  </span>
+                ) : item.detail && item.describes ? (
+                  <span className="min-w-0 flex-1 truncate text-[11.5px] text-[var(--text-faint)]" title={item.detail}>{item.detail}</span>
+                ) : item.detail ? (
+                  <span className="shrink-0 tabular-nums text-[11.5px] text-[var(--text-faint)]">
+                    {item.detail}
+                  </span>
+                ) : null}
+              </div>
+            </React.Fragment>
+          );
+        })}
+      </div>
+      {/* Key hints: the menu is keyboard-first */}
+      <div aria-hidden className="flex shrink-0 items-center gap-3 border-t border-[var(--border)] px-3 py-1.5 text-[11px] text-[var(--text-faint)]">
+        <span><Kbd>↑</Kbd><Kbd>↓</Kbd></span>
+        <span><Kbd>↵</Kbd></span>
+        <span className="ml-auto"><Kbd>esc</Kbd></span>
+      </div>
+    </div>
+  );
+}
+
+function Kbd({ children }: { children: React.ReactNode }) {
+  return (
+    <kbd className="mr-0.5 inline-flex h-[18px] min-w-[18px] items-center justify-center rounded border border-[var(--border)] bg-[var(--surface-2)] px-1 font-sans text-[10.5px] text-[var(--text-muted)]">
+      {children}
+    </kbd>
+  );
+}