obsidian-catui-acp 0.1.0

package/src/react/ChatApp.tsx

@@ -0,0 +1,677 @@
+import { useChat } from "@ai-sdk/react";
+import type { UIMessage } from "ai";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import type { Components } from "react-markdown";
+import {
+  ArrowUp,
+  Bug,
+  Check,
+  CheckCircle2,
+  ChevronDown,
+  ChevronRight,
+  Copy,
+  LoaderCircle,
+  Plus,
+  ShieldAlert,
+  Square,
+  X,
+  XCircle,
+} from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { MutableRefObject } from "react";
+import { AcpChatTransport } from "../chat/acp-chat-transport";
+import type CatuiAcpPlugin from "../main";
+import type { CatuiConnectionStatus } from "../main";
+import type { CatuiSessionSummary } from "../main";
+import type { PermissionChoice } from "../policy/permission-policy";
+
+import type { PluginDiagnostics } from "../main";
+
+interface ChatAppProps {
+  plugin: CatuiAcpPlugin;
+}
+
+const buttonBase =
+  "catui-reset-button catui:inline-flex catui:h-8 catui:items-center catui:justify-center catui:gap-1.5 catui:rounded-catui-md catui:border catui:border-border catui:bg-bg catui:px-3 catui:text-[12px] catui:font-medium catui:leading-none catui:text-muted catui:transition-colors catui:duration-150 catui:hover:bg-hover catui:hover:text-normal catui:focus-visible:outline-none catui:focus-visible:ring-1 catui:focus-visible:ring-accent catui:disabled:cursor-not-allowed catui:disabled:opacity-50";
+const buttonPrimary =
+  "catui:border-accent catui:bg-accent catui:text-on-accent catui:hover:bg-accent-hover catui:hover:text-on-accent";
+const buttonDanger =
+  "catui:border-error/30 catui:text-error catui:hover:bg-error-bg catui:hover:text-error";
+
+const reasoningPhrases = ["Thinking...", "Reading the vault...", "Working...", "Preparing response..."];
+
+function humanizeToolState(state: string | undefined): string {
+  switch (state) {
+    case "input-streaming":
+      return "running";
+    case "input-available":
+      return "ready";
+    case "output-available":
+      return "done";
+    case "output-error":
+      return "error";
+    default:
+      return state ?? "idle";
+  }
+}
+
+const markdownComponents: Components = {
+  h1: (props) => <h1 className="catui:m-0 catui:mt-2 catui:text-[15px] catui:font-semibold catui:leading-6 catui:text-normal first:catui:mt-0" {...props} />,
+  h2: (props) => <h2 className="catui:m-0 catui:mt-2 catui:text-[14px] catui:font-semibold catui:leading-6 catui:text-normal first:catui:mt-0" {...props} />,
+  h3: (props) => <h3 className="catui:m-0 catui:mt-1.5 catui:text-[13px] catui:font-semibold catui:leading-5 catui:text-normal first:catui:mt-0" {...props} />,
+  h4: (props) => <h4 className="catui:m-0 catui:mt-1.5 catui:text-[13px] catui:font-semibold catui:leading-5 catui:text-muted first:catui:mt-0" {...props} />,
+  p: (props) => <p className="catui:m-0 first:catui:mt-0 last:catui:mb-0" {...props} />,
+  ul: (props) => <ul className="catui:m-0 catui:list-disc catui:pl-5" {...props} />,
+  ol: (props) => <ol className="catui:m-0 catui:list-decimal catui:pl-5" {...props} />,
+  li: (props) => <li className="catui:my-0.5 catui:leading-5" {...props} />,
+  blockquote: (props) => <blockquote className="catui:m-0 catui:border-l-2 catui:border-border catui:pl-2 catui:text-muted" {...props} />,
+  hr: () => <hr className="catui:my-2 catui:border-0 catui:border-t catui:border-border" />,
+  a: ({ href, children, ...rest }) => (
+    <a
+      className="catui:text-accent catui:underline catui:underline-offset-2 catui:decoration-accent/40 catui:transition catui:hover:decoration-accent catui:focus-visible:decoration-accent"
+      href={href}
+      rel="noopener noreferrer"
+      target="_blank"
+      {...rest}
+    >
+      {children}
+    </a>
+  ),
+  strong: (props) => <strong className="catui:font-semibold catui:text-normal" {...props} />,
+  em: (props) => <em className="catui:italic" {...props} />,
+  del: (props) => <del className="catui:text-muted catui:line-through" {...props} />,
+  code: ({ className, children, ...rest }) => {
+    const isBlock = /language-/.test(className ?? "");
+    if (isBlock) {
+      return (
+        <code
+          className={`catui:font-mono catui:text-[12px] catui:leading-5 ${className ?? ""}`}
+          {...rest}
+        >
+          {children}
+        </code>
+      );
+    }
+    return (
+      <code
+        className="catui:rounded-catui-xs catui:bg-hover catui:px-1 catui:py-0.5 catui:font-mono catui:text-[12px] catui:text-normal"
+        {...rest}
+      >
+        {children}
+      </code>
+    );
+  },
+  pre: (props) => (
+    <pre
+      className="catui:my-1.5 catui:max-h-[260px] catui:overflow-auto catui:rounded-catui-sm catui:border catui:border-border catui:bg-bg catui:p-2.5 catui:font-mono catui:text-[12px] catui:leading-5 catui:text-normal catui:whitespace-pre"
+      {...props}
+    />
+  ),
+  table: (props) => (
+    <div className="catui:my-1.5 catui:overflow-x-auto catui:rounded-catui-sm catui:border catui:border-border">
+      <table className="catui:w-full catui:border-collapse catui:text-[12px]" {...props} />
+    </div>
+  ),
+  thead: (props) => <thead className="catui:bg-panel catui:text-muted" {...props} />,
+  tbody: (props) => <tbody className="catui:divide-y catui:divide-border" {...props} />,
+  tr: (props) => <tr className="catui:border-b catui:border-border last:catui:border-b-0" {...props} />,
+  th: (props) => <th className="catui:px-2 catui:py-1.5 catui:text-left catui:font-semibold catui:text-normal" {...props} />,
+  td: (props) => <td className="catui:px-2 catui:py-1.5 catui:text-normal" {...props} />,
+  input: (props) => <input className="catui:mr-1 catui:size-3 catui:accent-accent" disabled {...props} />,
+};
+
+export function ChatApp({ plugin }: ChatAppProps) {
+  const transport = useMemo(() => new AcpChatTransport(plugin), [plugin]);
+  const chat = useChat({ transport, throttle: 40 });
+  const [input, setInput] = useState("");
+  const [status, setStatus] = useState(plugin.connectionStatus);
+  const [permission, setPermission] = useState(plugin.pendingPermission);
+  const [sessionState, setSessionState] = useState({ activeSessionId: plugin.activeSessionId, sessions: plugin.sessions });
+  const [diagnostics, setDiagnostics] = useState<PluginDiagnostics | null>(null);
+  const [showDiagnostics, setShowDiagnostics] = useState(false);
+  const inputRef = useRef<HTMLTextAreaElement | null>(null);
+  const lastActiveSessionIdRef = useRef<string | null>(plugin.activeSessionId);
+  const isBusy = chat.status === "submitted" || chat.status === "streaming";
+
+  useEffect(() => plugin.subscribeStatus(setStatus), [plugin]);
+  useEffect(() => plugin.subscribePermission(setPermission), [plugin]);
+  useEffect(() => plugin.subscribeSessions(setSessionState), [plugin]);
+  useEffect(() => plugin.subscribeDiagnostics(setDiagnostics), [plugin]);
+  useEffect(() => {
+    if (status === "Connected") void plugin.refreshSessions();
+  }, [plugin, status]);
+  useEffect(() => {
+    if (lastActiveSessionIdRef.current === sessionState.activeSessionId) return;
+    lastActiveSessionIdRef.current = sessionState.activeSessionId;
+    chat.setMessages([]);
+    setInput("");
+    if (inputRef.current) inputRef.current.value = "";
+  }, [chat, sessionState.activeSessionId]);
+
+  async function submit() {
+    const text = (input || inputRef.current?.value || "").trim();
+    if (!text || isBusy) return;
+    setInput("");
+    if (inputRef.current) inputRef.current.value = "";
+    await chat.sendMessage({ text });
+  }
+
+  return (
+    <div className="catui:flex catui:h-full catui:min-h-0 catui:flex-col catui:bg-bg catui:font-sans catui:text-normal">
+      <Conversation messages={chat.messages} error={chat.error?.message} busy={isBusy} />
+      {showDiagnostics && diagnostics ? <DiagnosticsPanel diagnostics={diagnostics} /> : null}
+      {permission ? <PermissionPanel detail={permission.detail} onChoice={(choice) => plugin.resolvePermission(choice)} title={permission.title} /> : null}
+      <PromptInput
+        activeSessionId={sessionState.activeSessionId}
+        busy={isBusy}
+        diagnostics={diagnostics}
+        input={input}
+        inputRef={inputRef}
+        onCancel={() => void chat.stop().then(() => plugin.cancelPrompt())}
+        onClose={(sessionId) => {
+          if (isBusy) return;
+          void plugin.closeSession(sessionId);
+        }}
+        onInput={setInput}
+        onNew={() => void plugin.startNewSession()}
+        onSelect={(sessionId) => {
+          if (sessionId === sessionState.activeSessionId || isBusy) return;
+          void plugin.loadSession(sessionId);
+        }}
+        onSubmit={() => void submit()}
+        onToggleDiagnostics={() => setShowDiagnostics((value) => !value)}
+        sessions={sessionState.sessions}
+        showDiagnostics={showDiagnostics}
+        status={status}
+      />
+    </div>
+  );
+}
+
+function Conversation({ busy, error, messages }: { busy: boolean; error?: string; messages: UIMessage[] }) {
+  return (
+    <main className="catui-conversation catui:relative catui:min-h-0 catui:flex-1 catui:overflow-y-auto">
+      <div className="catui:mx-auto catui:flex catui:w-full catui:max-w-[840px] catui:flex-col catui:gap-2 catui:px-3 catui:py-4">
+        {messages.length === 0 ? <EmptyState /> : messages.map((message) => <MessageView key={message.id} message={message} />)}
+        {busy ? <ThinkingIndicator /> : null}
+        {error ? <div className="catui:my-1 catui:rounded-catui-md catui:bg-error-bg catui:px-3 catui:py-2.5 catui:text-[13px] catui:leading-5 catui:text-error catui:shadow-catui-minimal">{error}</div> : null}
+      </div>
+    </main>
+  );
+}
+
+function EmptyState() {
+  return (
+    <div className="catui:pointer-events-none catui:absolute catui:inset-0 catui:flex catui:flex-col catui:items-center catui:justify-center catui:gap-1 catui:text-center catui:select-none">
+      <p className="catui:m-0 catui:text-[14px] catui:text-muted">Ask CatUI about this vault</p>
+      <p className="catui:m-0 catui:text-[12px] catui:text-faint">Start with a question or an edit</p>
+    </div>
+  );
+}
+
+function MessageView({ message }: { message: UIMessage }) {
+  const isUser = message.role === "user";
+  const text = message.parts
+    .filter((part): part is Extract<typeof part, { type: "text" }> => part.type === "text")
+    .map((part) => part.text)
+    .join("\n\n");
+  const activities = message.parts.filter((part) => part.type.startsWith("tool-") || part.type === "dynamic-tool" || part.type.startsWith("data-"));
+
+  if (isUser) {
+    return (
+      <article className="catui:flex catui:w-full catui:flex-col catui:items-end catui:gap-3 catui:pb-1 catui:pt-2">
+        <div className="catui:max-w-[80%] catui:min-w-0 catui:break-words catui:rounded-[16px] catui:bg-user-bubble catui:px-4 catui:py-2 catui:text-[14px] catui:leading-5 catui:text-normal catui:select-text">
+          <div className="catui-acp-markdown">
+            <ReactMarkdown components={markdownComponents} remarkPlugins={[remarkGfm]}>{text}</ReactMarkdown>
+          </div>
+        </div>
+      </article>
+    );
+  }
+
+  return (
+    <article className="catui:flex catui:w-full catui:min-w-0 catui:flex-col catui:gap-1">
+      {activities.length > 0 ? <ActivitySection parts={activities} /> : null}
+      {text ? (
+        <div className="catui-response-card catui:group catui:overflow-hidden catui:rounded-catui-md catui:bg-bg catui:shadow-catui-minimal">
+          <div className="catui-acp-markdown catui:max-h-[560px] catui:overflow-y-auto catui:break-words catui:py-3 catui:pl-[22px] catui:pr-4 catui:text-[14px] catui:leading-5 catui:text-normal catui:select-text">
+            <ReactMarkdown components={markdownComponents} remarkPlugins={[remarkGfm]}>{text}</ReactMarkdown>
+          </div>
+        </div>
+      ) : null}
+    </article>
+  );
+}
+
+function ActivitySection({ parts }: { parts: UIMessage["parts"] }) {
+  const [expanded, setExpanded] = useState(false);
+  const toolNames = parts.map((part) => {
+    const toolPart = part as { toolName?: string; type: string };
+    return toolPart.toolName ?? toolPart.type.replace(/^tool-/, "").replace(/^data-/, "");
+  });
+  const failureCount = parts.filter((part) => humanizeToolState((part as { state?: string }).state ?? part.type) === "error").length;
+  const preview = `${toolNames[toolNames.length - 1]}${failureCount ? ` · ${failureCount} failed` : ""}`;
+
+  return (
+    <section className="catui-activity catui:select-none">
+      <button
+        aria-expanded={expanded}
+        className="catui-reset-button catui:flex catui:w-full catui:items-center catui:gap-2 catui:rounded-catui-md catui:py-1.5 catui:pl-2.5 catui:pr-1.5 catui:text-left catui:text-[13px] catui:text-muted catui:transition-colors catui:hover:bg-hover catui:focus-visible:outline-none catui:focus-visible:ring-1 catui:focus-visible:ring-accent"
+        onClick={() => setExpanded((value) => !value)}
+        type="button"
+      >
+        <span className={`catui:flex catui:size-3 catui:shrink-0 catui:items-center catui:justify-center catui:transition-transform catui:duration-150 ${expanded ? "catui:rotate-90" : ""}`}>
+          <ChevronRight size={12} />
+        </span>
+        <span className="catui:-ml-0.5 catui:shrink-0 catui:rounded-catui-xs catui:bg-bg catui:px-1.5 catui:py-0.5 catui:text-[10px] catui:font-medium catui:tabular-nums catui:shadow-catui-minimal">{parts.length}</span>
+        <span className="catui:min-w-0 catui:flex-1 catui:truncate">{preview}</span>
+      </button>
+      <div className={`catui-activity-list ${expanded ? "catui-activity-list-open" : ""}`}>
+        <div className="catui:ml-[13px] catui:max-h-[360px] catui:space-y-0.5 catui:overflow-y-auto catui:border-l-2 catui:border-border catui:py-0 catui:pl-4 catui:pr-2">
+          {parts.map((part, index) => <ActivityRow key={index} part={part} />)}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function ActivityRow({ part }: { part: UIMessage["parts"][number] }) {
+  const toolPart = part as { errorText?: string; input?: unknown; output?: unknown; state?: string; toolName?: string; type: string };
+  const state = humanizeToolState(toolPart.state ?? toolPart.type);
+  const name = toolPart.toolName ?? toolPart.type.replace(/^tool-/, "");
+  const isRunning = state === "running" || state === "ready";
+  const isDone = state === "done";
+  const hasDetails = toolPart.input !== undefined || toolPart.output !== undefined || Boolean(toolPart.errorText) || part.type.startsWith("data-");
+
+  return (
+    <details className="catui-tool-part catui:min-w-0">
+      <summary className={`catui:flex catui:min-h-6 catui:list-none catui:items-center catui:gap-2 catui:py-0.5 catui:text-[13px] catui:text-muted ${hasDetails ? "catui:cursor-pointer catui:hover:text-normal" : "catui:cursor-default"}`}>
+        {isRunning ? <LoaderCircle className="catui:shrink-0 catui:animate-spin catui:text-accent" size={12} /> : state === "error" ? <XCircle className="catui:shrink-0 catui:text-error" size={12} /> : isDone ? <CheckCircle2 className="catui:shrink-0 catui:text-success" size={12} /> : <span className="catui:size-3 catui:shrink-0 catui:rounded-full catui:border catui:border-muted" />}
+        <span className="catui:min-w-0 catui:flex-1 catui:truncate">{name}</span>
+        <span className="catui:shrink-0 catui:text-[11px] catui:text-faint">{state}</span>
+      </summary>
+      {hasDetails ? <div className="catui:mb-1 catui:ml-5 catui:overflow-hidden catui:rounded-catui-sm catui:bg-foreground-subtle">
+        {toolPart.input ? <JsonBlock label="Input" value={toolPart.input} /> : null}
+        {toolPart.output ? <JsonBlock label="Output" value={toolPart.output} /> : null}
+        {part.type.startsWith("data-") ? <JsonBlock label="Data" value={part} /> : null}
+        {toolPart.errorText ? <pre className="catui:m-0 catui:max-h-[180px] catui:overflow-auto catui:border-t catui:border-border catui:p-2.5 catui:font-mono catui:text-[11px] catui:leading-4 catui:text-error catui:whitespace-pre-wrap">{toolPart.errorText}</pre> : null}
+      </div> : null}
+    </details>
+  );
+}
+
+function JsonBlock({ label, value }: { label: string; value: unknown }) {
+  return (
+    <div className="catui:border-b catui:border-border catui:last:border-b-0">
+      <div className="catui:px-2.5 catui:pt-2 catui:text-[10px] catui:font-medium catui:uppercase catui:text-faint">{label}</div>
+      <pre className="catui:m-0 catui:max-h-[180px] catui:overflow-auto catui:p-2.5 catui:pt-1 catui:font-mono catui:text-[11px] catui:leading-4 catui:text-muted catui:whitespace-pre-wrap">
+        {JSON.stringify(value, null, 2)}
+      </pre>
+    </div>
+  );
+}
+
+function ThinkingIndicator() {
+  const [phraseIndex, setPhraseIndex] = useState(0);
+  const [elapsed, setElapsed] = useState(0);
+
+  useEffect(() => {
+    const phraseTimer = window.setInterval(() => {
+      setPhraseIndex((current) => (current + 1) % reasoningPhrases.length);
+    }, 10000);
+    const elapsedTimer = window.setInterval(() => setElapsed((value) => value + 1), 1000);
+    return () => {
+      window.clearInterval(phraseTimer);
+      window.clearInterval(elapsedTimer);
+    };
+  }, []);
+
+  return (
+    <div className="catui:flex catui:items-center catui:gap-2 catui:-mb-1 catui:px-3 catui:py-1 catui:text-[13px] catui:text-muted" role="status">
+      <LoaderCircle aria-hidden="true" className="catui:animate-spin" size={12} />
+      <span className="catui-thinking-label" key={phraseIndex}>{reasoningPhrases[phraseIndex]}</span>
+      <span className="catui:text-faint catui:tabular-nums">{elapsed}s</span>
+    </div>
+  );
+}
+
+function PermissionPanel({ detail, onChoice, title }: { detail: string; onChoice: (choice: PermissionChoice) => void; title: string }) {
+  return (
+    <section className="catui:mx-2 catui:mb-1 catui:overflow-hidden catui:rounded-catui-md catui:border catui:border-info/30 catui:bg-info-bg catui:shadow-catui-middle">
+      <div className="catui:space-y-3 catui:p-4">
+        <div className="catui:flex catui:items-center catui:gap-2 catui:text-[14px] catui:font-medium catui:text-normal">
+          <ShieldAlert className="catui:shrink-0 catui:text-info" size={14} />
+          <span className="catui:min-w-0 catui:truncate">{title}</span>
+        </div>
+        <pre className="catui:m-0 catui:max-h-24 catui:overflow-auto catui:rounded-catui-md catui:bg-foreground-soft catui:p-3 catui:font-mono catui:text-[12px] catui:leading-[18px] catui:text-muted catui:whitespace-pre-wrap">{detail}</pre>
+      </div>
+      <div className="catui:grid catui:grid-cols-2 catui:gap-1.5 catui:border-t catui:border-border catui:px-3 catui:py-2">
+        <PermissionButton label="Allow once" onClick={() => onChoice("allow_once")} variant="primary" />
+        <PermissionButton label="Always allow" onClick={() => onChoice("allow_always")} />
+        <PermissionButton label="Reject once" onClick={() => onChoice("reject_once")} />
+        <PermissionButton label="Always reject" onClick={() => onChoice("reject_always")} variant="danger" />
+      </div>
+    </section>
+  );
+}
+
+function PermissionButton({ label, onClick, variant }: { label: string; onClick: () => void; variant?: "primary" | "danger" }) {
+  const variantClass =
+    variant === "primary" ? buttonPrimary : variant === "danger" ? buttonDanger : "";
+  return (
+    <button className={`${buttonBase} ${variantClass}`} onClick={onClick}>
+      {label}
+    </button>
+  );
+}
+
+function PromptInput(props: {
+  activeSessionId: string | null;
+  busy: boolean;
+  diagnostics: PluginDiagnostics | null;
+  input: string;
+  inputRef: MutableRefObject<HTMLTextAreaElement | null>;
+  onCancel: () => void;
+  onClose: (sessionId: string) => void;
+  onInput: (value: string) => void;
+  onNew: () => void;
+  onSelect: (sessionId: string) => void;
+  onSubmit: () => void;
+  onToggleDiagnostics: () => void;
+  sessions: CatuiSessionSummary[];
+  showDiagnostics: boolean;
+  status: CatuiConnectionStatus;
+}) {
+  const activeSession = props.sessions.find((session) => session.sessionId === props.activeSessionId);
+  const hasErrors = (props.diagnostics?.runtimeErrors.length ?? 0) > 0;
+  const connected = props.status === "Connected";
+  const starting = props.status === "Starting";
+
+  return (
+    <footer className="catui-input-zone catui:mx-auto catui:mt-1 catui:w-full catui:max-w-[840px] catui:shrink-0 catui:bg-bg catui:px-2">
+      <div className="catui:relative catui:overflow-visible catui:rounded-[16px] catui:bg-bg catui:shadow-catui-middle catui:transition-shadow catui:focus-within:shadow-catui-focused">
+        <textarea
+          ref={props.inputRef}
+          className="catui:block catui:min-h-[88px] catui:max-h-[220px] catui:w-full catui:resize-none catui:overflow-y-auto catui:border-0 catui:bg-transparent catui:pb-3 catui:pl-5 catui:pr-4 catui:pt-4 catui:text-[14px] catui:leading-5 catui:text-normal catui:outline-none catui:placeholder:text-faint"
+          placeholder="What would you like to work on?"
+          value={props.input}
+          onChange={(event) => props.onInput(event.currentTarget.value)}
+          onKeyDown={(event) => {
+            if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
+              event.preventDefault();
+              props.onSubmit();
+            }
+          }}
+        />
+        <div className="catui:flex catui:items-center catui:gap-1 catui:px-2 catui:py-2">
+          <button
+            className="catui-reset-button catui:inline-flex catui:h-6 catui:shrink-0 catui:items-center catui:gap-1.5 catui:rounded-catui-sm catui:bg-info-bg catui:px-2 catui:text-[12px] catui:font-medium catui:text-normal catui:shadow-catui-tinted catui:transition-colors catui:hover:bg-info/20"
+            onClick={props.onToggleDiagnostics}
+            title={`${props.status} · permission mode asks before risky actions`}
+            type="button"
+          >
+            {starting ? <LoaderCircle className="catui:animate-spin catui:text-info" size={12} /> : <ShieldAlert className={connected ? "catui:text-info" : "catui:text-error"} size={12} />}
+            <span>Ask</span>
+          </button>
+          <SessionPicker
+            activeSessionId={props.activeSessionId}
+            busy={props.busy}
+            onSelect={props.onSelect}
+            sessions={props.sessions}
+          />
+          <button
+            aria-label="Diagnostics"
+            aria-pressed={props.showDiagnostics}
+            className={`catui-reset-button catui:flex catui:size-6 catui:shrink-0 catui:items-center catui:justify-center catui:rounded-catui-sm catui:transition-colors catui:hover:bg-hover ${hasErrors ? "catui:text-error" : props.showDiagnostics ? "catui:bg-hover catui:text-normal" : "catui:text-muted"}`}
+            onClick={props.onToggleDiagnostics}
+            title="Diagnostics"
+            type="button"
+          >
+            <Bug size={14} />
+          </button>
+          <button
+            aria-label="New session"
+            className="catui-reset-button catui:flex catui:size-6 catui:shrink-0 catui:items-center catui:justify-center catui:rounded-catui-sm catui:text-muted catui:transition-colors catui:hover:bg-hover catui:hover:text-normal"
+            onClick={props.onNew}
+            title="New session"
+            type="button"
+          >
+            <Plus size={14} />
+          </button>
+          <button
+            aria-label="Close current session"
+            className="catui-reset-button catui:flex catui:size-6 catui:shrink-0 catui:items-center catui:justify-center catui:rounded-catui-sm catui:text-muted catui:transition-colors catui:hover:bg-hover catui:hover:text-error catui:disabled:opacity-30"
+            disabled={!activeSession}
+            onClick={() => activeSession && props.onClose(activeSession.sessionId)}
+            title="Close current session"
+            type="button"
+          >
+            <X size={13} />
+          </button>
+          <div className="catui:min-w-0 catui:flex-1" />
+          <button
+            className={`catui-reset-button catui:ml-2 catui:flex catui:size-7 catui:shrink-0 catui:items-center catui:justify-center catui:rounded-full catui:transition-colors catui:focus-visible:outline-none catui:focus-visible:ring-1 catui:focus-visible:ring-accent catui:disabled:cursor-not-allowed catui:disabled:opacity-40 ${props.busy ? "catui:bg-foreground-soft catui:text-normal catui:hover:bg-foreground-15 catui:active:bg-foreground-20" : "catui:bg-normal catui:text-bg catui:hover:opacity-80"}`}
+            disabled={!props.busy && !props.input.trim()}
+            onClick={props.busy ? props.onCancel : props.onSubmit}
+            title={props.busy ? "Stop" : "Send"}
+            type="button"
+          >
+            {props.busy ? <Square fill="currentColor" size={12} /> : <ArrowUp size={16} />}
+          </button>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+function SessionPicker({
+  activeSessionId,
+  busy,
+  onSelect,
+  sessions,
+}: {
+  activeSessionId: string | null;
+  busy: boolean;
+  onSelect: (sessionId: string) => void;
+  sessions: CatuiSessionSummary[];
+}) {
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const activeSession = sessions.find((session) => session.sessionId === activeSessionId);
+  const activeTitle = getSessionTitle(activeSession);
+  const recentSessions = [...sessions]
+    .filter((session) => !isEmptySessionTitle(session.title))
+    .sort((left, right) => getSessionTimestamp(right) - getSessionTimestamp(left))
+    .slice(0, 10);
+
+  useEffect(() => {
+    if (!open) return;
+    const handlePointerDown = (event: PointerEvent) => {
+      if (!rootRef.current?.contains(event.target as Node)) setOpen(false);
+    };
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("pointerdown", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open]);
+
+  return (
+    <div ref={rootRef} className="catui:relative catui:min-w-0 catui:max-w-[148px] catui:shrink">
+      <button
+        aria-expanded={open}
+        aria-haspopup="menu"
+        aria-label="Active session"
+        className="catui-reset-button catui:flex catui:h-6 catui:w-full catui:items-center catui:gap-1 catui:rounded-catui-sm catui:bg-foreground-subtle catui:pl-2 catui:pr-1.5 catui:text-[12px] catui:font-medium catui:text-muted catui:shadow-catui-minimal catui:transition-colors catui:hover:bg-hover catui:hover:text-normal catui:focus-visible:outline-none catui:focus-visible:ring-1 catui:focus-visible:ring-accent"
+        disabled={sessions.length === 0}
+        onClick={() => setOpen((value) => !value)}
+        title={activeTitle}
+        type="button"
+      >
+        <span className="catui:min-w-0 catui:flex-1 catui:truncate catui:text-left">{activeTitle}</span>
+        <ChevronDown className={`catui:shrink-0 catui:text-faint catui:transition-transform ${open ? "catui:rotate-180" : ""}`} size={11} />
+      </button>
+      {open ? (
+        <div className="catui-session-menu catui:absolute catui:bottom-full catui:left-0 catui:z-50 catui:mb-2 catui:w-[280px] catui:max-w-[calc(100vw-32px)] catui:overflow-hidden catui:rounded-catui-md catui:border catui:border-border catui:bg-bg catui:p-1.5 catui:shadow-catui-middle" role="menu">
+          <div className="catui-session-menu-header catui:flex catui:items-center catui:justify-between catui:px-2 catui:pb-1.5 catui:pt-1">
+            <span className="catui-session-menu-heading catui:text-[11px] catui:font-medium catui:text-muted">Recent chats</span>
+            <span className="catui-session-menu-count catui:text-[10px] catui:tabular-nums catui:text-faint">{recentSessions.length}</span>
+          </div>
+          {recentSessions.length > 0 ? (
+            <div className="catui:max-h-[280px] catui:overflow-y-auto">
+              {recentSessions.map((session) => {
+                const selected = session.sessionId === activeSessionId;
+                const title = getSessionTitle(session);
+                return (
+                  <button
+                    key={session.sessionId}
+                    aria-current={selected ? "true" : undefined}
+                    className="catui-session-item catui-reset-button catui:flex catui:w-full catui:items-center catui:gap-2 catui:rounded-catui-sm catui:px-2 catui:py-1.5 catui:text-left catui:transition-colors catui:focus-visible:outline-none"
+                    disabled={busy}
+                    onClick={() => {
+                      setOpen(false);
+                      onSelect(session.sessionId);
+                    }}
+                    role="menuitem"
+                    title={title}
+                    type="button"
+                  >
+                    <span className="catui:min-w-0 catui:flex-1">
+                      <span className="catui-session-item-title catui:block catui:truncate catui:text-[12px] catui:font-medium catui:text-normal">{title}</span>
+                      <span className="catui-session-item-time catui:mt-0.5 catui:block catui:text-[10px] catui:text-faint">{formatSessionTime(session.updatedAt)}</span>
+                    </span>
+                    <span className="catui:flex catui:size-4 catui:shrink-0 catui:items-center catui:justify-center catui:text-accent">
+                      {selected ? <Check size={12} strokeWidth={2.25} /> : null}
+                    </span>
+                  </button>
+                );
+              })}
+            </div>
+          ) : (
+            <div className="catui:px-2 catui:py-3 catui:text-center catui:text-[11px] catui:text-faint">No previous chats</div>
+          )}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function getSessionTitle(session: CatuiSessionSummary | undefined): string {
+  if (!session || isEmptySessionTitle(session.title)) return "New chat";
+  return normalizeSessionTitle(session.title, session.sessionId.slice(0, 8));
+}
+
+function isEmptySessionTitle(title: string | undefined): boolean {
+  const normalized = title?.trim().toLowerCase();
+  return !normalized || normalized === "(no messages)" || normalized === "no messages";
+}
+
+function getSessionTimestamp(session: CatuiSessionSummary): number {
+  const timestamp = session.updatedAt ? Date.parse(session.updatedAt) : Number.NaN;
+  return Number.isNaN(timestamp) ? 0 : timestamp;
+}
+
+function formatSessionTime(updatedAt: string | undefined): string {
+  if (!updatedAt) return "Earlier";
+  const date = new Date(updatedAt);
+  if (Number.isNaN(date.getTime())) return "Earlier";
+  const now = new Date();
+  const sameDay = date.toDateString() === now.toDateString();
+  if (sameDay) return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  return date.toLocaleDateString([], { month: "short", day: "numeric" });
+}
+
+function normalizeSessionTitle(title: string | undefined, shortId: string): string {
+  const cleanTitle = title
+    ?.split("\n")
+    .map((line) => line.trim())
+    .find((line) => line && line !== "Vault context:");
+  if (!cleanTitle) return `Session ${shortId}`;
+  return cleanTitle.length > 54 ? `${cleanTitle.slice(0, 51)}...` : cleanTitle;
+}
+
+function DiagnosticsPanel({ diagnostics }: { diagnostics: PluginDiagnostics }) {
+  const [copied, setCopied] = useState(false);
+  const errorCount = diagnostics.runtimeErrors.length;
+  const sections = [
+    {
+      key: "info",
+      title: "Build",
+      body: [
+        `plugin: v${diagnostics.pluginVersion}`,
+        `obsidian: v${diagnostics.obsidianVersion}`,
+        `startedAt: ${diagnostics.startedAt}`,
+        `command: ${diagnostics.activeCommand || "(empty)"}`,
+      ].join("\n"),
+    },
+    {
+      key: "load",
+      title: `Load events (${diagnostics.loadEvents.length})`,
+      body: diagnostics.loadEvents.join("\n") || "(none)",
+    },
+    {
+      key: "errors",
+      title: `Runtime errors (${errorCount})`,
+      body: errorCount === 0 ? "(none)" : diagnostics.runtimeErrors.join("\n\n"),
+    },
+    {
+      key: "stderr",
+      title: `CatUI stderr (tail of ${diagnostics.stderrTotal} chars)`,
+      body: diagnostics.stderrTail.trim() || "(empty)",
+    },
+  ];
+
+  const report = sections
+    .map((section) => `## ${section.title}\n${section.body}`)
+    .join("\n\n");
+
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(report);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1200);
+    } catch (error) {
+      console.error("Diagnostics copy failed", error);
+    }
+  }
+
+  return (
+    <section className="catui:border-b catui:border-border catui:bg-panel catui:p-3">
+      <div className="catui:mb-2 catui:flex catui:items-center catui:justify-between catui:gap-2">
+        <div className="catui:text-[12px] catui:font-semibold catui:text-normal">
+          Diagnostics
+          {errorCount > 0 ? <span className="catui:ml-1.5 catui:text-error">· {errorCount} error{errorCount === 1 ? "" : "s"}</span> : null}
+        </div>
+        <button
+          className="catui-reset-button catui:flex catui:items-center catui:gap-1 catui:rounded-catui-sm catui:border catui:border-border catui:bg-bg catui:px-2 catui:py-1 catui:text-[11px] catui:text-muted catui:transition catui:hover:bg-hover catui:hover:text-normal catui:focus-visible:border-accent catui:focus-visible:shadow-[0_0_0_1px_var(--interactive-accent)]"
+          onClick={() => void copy()}
+          type="button"
+        >
+          <Copy size={12} />
+          {copied ? "Copied" : "Copy report"}
+        </button>
+      </div>
+      <div className="catui:flex catui:max-h-[260px] catui:flex-col catui:gap-2 catui:overflow-y-auto">
+        {sections.map((section) => (
+          <details
+            className="catui:rounded-catui-sm catui:border catui:border-border catui:bg-bg"
+            key={section.key}
+            open={section.key === "errors" && errorCount > 0}
+          >
+            <summary className="catui:flex catui:cursor-pointer catui:items-center catui:justify-between catui:px-2 catui:py-1.5 catui:text-[11px] catui:font-medium catui:text-muted">
+              {section.title}
+            </summary>
+            <pre className="catui:m-0 catui:max-h-[180px] catui:overflow-auto catui:border-t catui:border-border catui:bg-panel catui:p-2 catui:font-mono catui:text-[11px] catui:leading-4 catui:text-normal catui:whitespace-pre-wrap">
+              {section.body}
+            </pre>
+          </details>
+        ))}
+      </div>
+    </section>
+  );
+}