@schlessera/brain-ui-react 0.35.0 → 0.37.0

package/src/components/chat/ask-user-typed.ts

@@ -0,0 +1,77 @@
+/**
+ * The typed answer (D38 §1): a composer send while an `ask_user` question is
+ * pending is the answer to that question, not a new message.
+ *
+ * The exchange is submitted through the same path the card's Submit uses —
+ * the store records the answers and the socket carries `ask_user_response` —
+ * with one difference: the exchange is marked `typed`, so the card quotes the
+ * text it took instead of showing a chosen option. Dropping the card would
+ * leave the transcript claiming the question was never answered; leaving it
+ * pending would ask twice.
+ */
+
+import type { AskUserQuestion, ClientMessage } from "@schlessera/brain-ui-sdk/protocol";
+import type { AskUserExchange, ChatKey, ChatState } from "../../stores/chat-state.js";
+
+/** A request the user has neither answered nor dismissed. */
+export function isPendingExchange(
+  exchange: AskUserExchange | null | undefined
+): exchange is AskUserExchange {
+  return !!exchange && !exchange.answers && !exchange.cancelled;
+}
+
+/**
+ * The question the composer text answers — only when the exchange has exactly
+ * one. Answers are submitted for the whole exchange at once and the server
+ * resolves the request on the first response, so binding a typed reply to
+ * question one of several would leave the others blank and unanswerable. A
+ * multi-question prompt keeps the cards' own Submit; the composer text is an
+ * ordinary message.
+ */
+export function questionForTypedAnswer(exchange: AskUserExchange): AskUserQuestion | null {
+  return exchange.questions.length === 1 ? exchange.questions[0]! : null;
+}
+
+/**
+ * Binds `text` to the buffer's pending question, if there is one. Returns
+ * `true` when the text was consumed as an answer — the caller must then NOT
+ * send it as a chat message — and `false` when nothing was pending.
+ */
+export function takeComposerTextAsAnswer(
+  chat: Pick<ChatState, "submitAskUserAnswers"> & {
+    buffers: ChatState["buffers"];
+    draft: ChatState["draft"];
+  },
+  key: ChatKey,
+  text: string,
+  send: (message: ClientMessage) => void
+): boolean {
+  const buffer = key === null ? chat.draft : chat.buffers[key];
+  const exchange = buffer?.askUser;
+  if (!isPendingExchange(exchange)) return false;
+  const question = questionForTypedAnswer(exchange);
+  if (!question) return false;
+  const answer = text.trim();
+  if (!answer) return false;
+
+  const answers = { [question.question]: answer };
+  chat.submitAskUserAnswers(key, exchange.requestId, answers, undefined, true);
+  send({ type: "ask_user_response", requestId: exchange.requestId, answers });
+  return true;
+}
+
+/**
+ * The composer message a reopened (dismissed, then "Ask again") card sends
+ * in place of an `ask_user_response`: the server resolved the request when
+ * the turn ended, so the answer has to travel as a normal message that
+ * quotes the question it answers. One block per question, the picks as
+ * they were recorded.
+ */
+export function reaskMessage(
+  questions: readonly Pick<AskUserQuestion, "question">[],
+  answers: Record<string, string>
+): string {
+  return questions
+    .map((q) => `Answering \u201C${q.question}\u201D: ${answers[q.question] ?? ""}`)
+    .join("\n\n");
+}

package/src/components/chat/brain-markdown-links.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { apiBase } from "../../lib/backend.js";
+import type { BrainUiRoot } from "../../root.js";
 import {
   isInternalRepoDir,
   isInternalRepoPath,
@@ -15,13 +15,13 @@ import { useUIStore } from "../../stores/ui-store.js";
  * already an API route — passes through. A repo-relative path is rewritten to
  * the files endpoint, which is where brain content is served from.
  */
-export function repoImageSrc(src: string): string {
+export function repoImageSrc(src: string, root: BrainUiRoot): string {
   const trimmed = src.trim();
   if (!trimmed) return src;
   if (/^(data:|blob:|https?:\/\/)/i.test(trimmed)) return trimmed;
-  if (trimmed.startsWith("/api/")) return trimmed;
+  if (trimmed.startsWith("/api/")) return root.backendUrl(trimmed);
   const rel = trimmed.replace(/^\.\//, "").replace(/^\/+/, "");
-  return `${apiBase()}/files/content?path=${encodeURIComponent(rel)}&raw=1`;
+  return `${root.apiBase()}/files/content?path=${encodeURIComponent(rel)}&raw=1`;
 }
 /** Click target for a repo-relative file reference. Opens the file panel + viewer. */
 export function FileLink({ path, children }: { path: string; children?: React.ReactNode }) {

package/src/components/chat/brain-markdown.tsx

@@ -1,3 +1,4 @@
+import { useBrainUiRoot } from "../../root-context.js";
 import React, { memo, useEffect, useMemo } from "react";
 import Markdown from "react-markdown";
 
@@ -83,6 +84,7 @@ export const BrainMarkdown = memo(function BrainMarkdown({ content, className, e
 });
 
 const BrainMarkdownInner = memo(function BrainMarkdownInner({ content, className, entityTags = false, fileLinks = false }: BrainMarkdownProps) {
+  const root = useBrainUiRoot();
   const processed = entityTags ? renderEntityTags(content) : content;
   const ensureWikilinks = useFileStore((s) => s.ensureWikilinks);
   // Entity-tag rendering emits its own markup and must not be re-highlighted.
@@ -134,7 +136,7 @@ const BrainMarkdownInner = memo(function BrainMarkdownInner({ content, className
        * appears. `data:` URIs and absolute URLs are left alone.
        */
       img: ({ src, alt, ...props }: React.ComponentPropsWithoutRef<"img">) => {
-        const resolved = typeof src === "string" ? repoImageSrc(src) : src;
+        const resolved = typeof src === "string" ? repoImageSrc(src, root) : src;
         // Inline, an image is only as wide as the viewport. Tapping it opens the
         // zoom viewer, the same way a mermaid diagram does.
         if (typeof resolved !== "string") {
@@ -166,7 +168,7 @@ const BrainMarkdownInner = memo(function BrainMarkdownInner({ content, className
         );
       },
     };
-  }, [entityTags, fileLinks]);
+  }, [entityTags, fileLinks, root]);
 
   return (
     <div className={className ?? "brain-prose"}>

package/src/components/chat/chat-page.tsx

@@ -1,3 +1,4 @@
+import { useBrainUiRoot } from "../../root-context.js";
 import { useState, useRef, useEffect, useLayoutEffect, useCallback } from "react";
 import { ArrowDown, ChevronUp } from "lucide-react";
 import { useChatStore, activeChat } from "../../stores/chat-store.js";
@@ -18,7 +19,7 @@ import { AddPanel } from "../quick-actions/add-modal.js";
 import { FilePanel } from "../files/file-panel.js";
 import { Composer } from "./composer.js";
 import { useChatCommands } from "./use-chat-commands.js";
-import { getBackendUrl } from "../../lib/backend.js";
+import { Button } from "@schlessera/brain-ui-kit";
 import {
   primeClientEnvironment,
   READING_COLUMN_ATTR,
@@ -48,6 +49,7 @@ const WINDOW_STEP = 40;
  * that on the first re-render.
  */
 export function ChatPage() {
+  const root = useBrainUiRoot();
   const scrollRef = useRef<HTMLDivElement>(null);
   const autoScrollRef = useRef(true);
   const [showScrollButton, setShowScrollButton] = useState(false);
@@ -139,14 +141,15 @@ export function ChatPage() {
 
   const handleToolApproval = useCallback(
     (toolUseId: string, approved: boolean, always?: boolean) => {
-      useChatStore.getState().resolveToolApproval(sessionId, toolUseId, approved);
+      root.stores.chat.getState().resolveToolApproval(sessionId, toolUseId, approved);
+      // The transcript's approval card is the only caller: channel "card" (#113).
       if (approved) {
-        send({ type: "tool_approval", toolUseId, ...(always ? { always: true } : {}) });
+        send({ type: "tool_approval", toolUseId, ...(always ? { always: true } : {}), channel: "card" });
       } else {
-        send({ type: "tool_denial", toolUseId, message: "Denied by user" });
+        send({ type: "tool_denial", toolUseId, message: "Denied by user", channel: "card" });
       }
     },
-    [send, sessionId]
+    [send, sessionId, root]
   );
 
   const handleAskUserSubmit = useCallback(
@@ -155,20 +158,37 @@ export function ChatPage() {
       answers: Record<string, string>,
       annotations?: Record<string, AskUserAnnotation>
     ) => {
-      useChatStore
-        .getState()
+      root.stores.chat.getState()
         .submitAskUserAnswers(sessionId, requestId, answers, annotations);
       send({ type: "ask_user_response", requestId, answers, annotations });
     },
-    [send, sessionId]
+    [send, sessionId, root]
   );
 
   const handleAskUserCancel = useCallback(
     (requestId: string) => {
-      useChatStore.getState().cancelAskUser(sessionId, requestId);
+      root.stores.chat.getState().cancelAskUser(sessionId, requestId);
       send({ type: "ask_user_cancel", requestId, reason: "User dismissed" });
     },
-    [send, sessionId]
+    [send, sessionId, root]
+  );
+
+  /**
+   * A dismissed question asked again (seventh drop, ruling 7). The request
+   * was resolved server-side when the turn ended, so the answer goes out as
+   * an ordinary message — the same path the composer's send takes, minus
+   * attachments and provider (a resumed session is pinned to its own).
+   */
+  const handleAskUserReask = useCallback(
+    (text: string) => {
+      const chat = root.stores.chat.getState();
+      chat.addUserMessage(sessionId, text, "typed");
+      if (!(sessionId === null ? chat.draft : chat.buffers[sessionId])?.isStreaming) {
+        chat.startAssistantMessage(sessionId);
+      }
+      send({ type: "chat_message", text, sessionId: sessionId ?? undefined });
+    },
+    [send, sessionId, root]
   );
 
   const handleSessionResume = useCallback(
@@ -225,7 +245,7 @@ export function ChatPage() {
         open={syncPanelOpen}
         onClose={() => setSyncPanelOpen(false)}
         title="Brain Sync"
-        endpoint={getBackendUrl("/api/brain/sync")}
+        endpoint="/api/brain/sync"
       />
       <WhatsupPanel
         open={whatsupPanelOpen}
@@ -244,6 +264,15 @@ export function ChatPage() {
         onClose={() => setFilePanelOpen(false)}
       />
 
+      {/* New chat is the Chat header's primary action (D37): a tab is a place
+          and starting a chat is an act, so it is neither a rail row nor a bar
+          slot. It only appears once there is a conversation to leave. */}
+      {hasMessages && (
+        <div className="flex shrink-0 items-center justify-end px-4 pt-2 md:px-6">
+          <Button label="New chat" icon="compose" tone="ghost" size="sm" block={false} onClick={clearMessages} />
+        </div>
+      )}
+
       {/* Message area */}
       <div className="relative flex-1 overflow-hidden">
         {messages.length === 0 ? (
@@ -284,6 +313,7 @@ export function ChatPage() {
                   onToolApproval={handleToolApproval}
                   onAskUserSubmit={handleAskUserSubmit}
                   onAskUserCancel={handleAskUserCancel}
+                  onAskUserReask={handleAskUserReask}
                 />
               ))}
             </div>

package/src/components/chat/composer-view.tsx

@@ -0,0 +1,194 @@
+import { BottomSheet, Button, Callout, Composer as KitComposer, Icon, ListRow, type ComposerState } from "@schlessera/brain-ui-kit";
+import { X } from "lucide-react";
+import type { ClipboardEvent, KeyboardEvent, ReactNode, RefObject } from "react";
+import { cn } from "../../lib/utils.js";
+
+/**
+ * The composer's frame, rendered from props (S7, the `chat` directory).
+ * `Composer` is the container: it owns the draft, the attachments and their
+ * object URLs, the provider choice, the voice review, the command palette's
+ * open state and every store read.
+ *
+ * The field itself is the kit `Composer` (D37: the composer is kit-owned —
+ * it is the one piece of permanent chrome, and a field redrawn per screen is
+ * a component nobody can audit). The kit draws attach · field · mic ·
+ * send/stop, the provider chip in the hint line and the state-driven
+ * placeholder, hint and trailing control. What this frame adds around it is
+ * what the design leaves to the app: the slash-command palette above the
+ * field, the attachment previews and their errors, the attach MENU behind
+ * the paperclip (a docked `BottomSheet` on a phone, a popover on a pointer
+ * screen — capture is a menu, not three more icons), the provider list, and
+ * two keys the kit does not know: ↑ on an empty draft recalls the last
+ * prompt, and esc dismisses the slash palette.
+ *
+ * Paste-to-attach is caught here too: the kit's textarea has no paste
+ * handler of its own, and the event bubbles to this frame with its files.
+ */
+export interface ComposerAttachment {
+  previewUrl: string;
+  name: string;
+}
+
+export interface ComposerProvider {
+  label: string;
+  /** Fixed for this conversation: the chip is text, not a control. */
+  locked: boolean;
+  menuOpen: boolean;
+  options: { id: string; label: string }[];
+  selectedId: string | null;
+}
+
+export interface ComposerViewProps {
+  value: string;
+  state: ComposerState;
+  /** Overrides the state's own placeholder (a connection reason, the host's copy). */
+  placeholder?: string;
+  /** Overrides the state's own hint ("Will queue" while a session runs). */
+  hint?: string;
+  /** The offline reason, printed in the hint row. */
+  blockedWhy?: string;
+  paletteOpen: boolean;
+  /** The command palette, already rendered by the container, or null. */
+  palette: ReactNode;
+  attachMenuOpen: boolean;
+  attachments: ComposerAttachment[];
+  attachErrors: string[];
+  provider: ComposerProvider | null;
+  /** The container's ref: it focuses the field after a recall or a voice edit. */
+  frameRef: RefObject<HTMLDivElement | null>;
+  /** The container's ref for the provider popover's outside-click dismissal. */
+  providerMenuRef: RefObject<HTMLDivElement | null>;
+  onChange: (value: string) => void;
+  onSend: () => void;
+  onStop: () => void;
+  onMic: () => void;
+  onAttachToggle: () => void;
+  onPickLibrary: () => void;
+  onPickCamera: () => void;
+  onPasteFiles: (files: File[]) => void;
+  onRecall: () => void;
+  onEscape: () => void;
+  onRemoveAttachment: (index: number) => void;
+  onDismissErrors: () => void;
+  onProviderToggle: () => void;
+  onProviderSelect: (id: string) => void;
+}
+
+export function ComposerView(p: ComposerViewProps) {
+  function onKeyDown(e: KeyboardEvent<HTMLDivElement>) {
+    if ((e.target as HTMLElement).tagName !== "TEXTAREA") return;
+    if (e.key === "ArrowUp" && !p.value.trim()) p.onRecall();
+    if (e.key === "Escape" && p.paletteOpen) p.onEscape();
+  }
+
+  function onPaste(e: ClipboardEvent<HTMLDivElement>) {
+    const files = e.clipboardData?.files;
+    if (!files || files.length === 0) return;
+    const images = Array.from(files).filter((f) => f.type.startsWith("image/"));
+    if (images.length === 0) return;
+    e.preventDefault();
+    p.onPasteFiles(images);
+  }
+
+  const pointer = typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(min-width: 900px)").matches;
+  const attachMenu = (
+    <div className="flex flex-col">
+      <ListRow variant="group" icon="image" iconTone="teal" title="Photo library" subtitle="Pick images already on this device" onClick={p.onPickLibrary} />
+      <ListRow variant="group" icon="attach" iconTone="amber" title="Camera" subtitle="Take a photo now" onClick={p.onPickCamera} />
+      <ListRow variant="group" icon="copy" iconTone="neutral" title="Paste" subtitle="An image on the clipboard pastes straight into the field" last />
+    </div>
+  );
+
+  return (
+    <div ref={p.frameRef} data-composer="" className="relative mx-auto max-w-3xl" onKeyDown={onKeyDown} onPaste={onPaste}>
+      {p.attachErrors.length > 0 && (
+        <div className="mb-2 flex items-start gap-2" role="alert">
+          <div className="min-w-0 flex-1">
+            <Callout tone="red" variant="banner" icon="failed" mono text={p.attachErrors.join(" · ")} />
+          </div>
+          <Button label="Dismiss" tone="quiet" size="sm" block={false} onClick={p.onDismissErrors} />
+        </div>
+      )}
+
+      {p.attachments.length > 0 && (
+        <div className="mb-2 flex flex-wrap gap-2">
+          {p.attachments.map((a, i) => (
+            <div key={i} className="relative h-16 w-16 shrink-0">
+              <img src={a.previewUrl} alt={a.name} className="h-16 w-16 rounded-lg border border-border object-cover" />
+              <button
+                type="button"
+                onClick={() => p.onRemoveAttachment(i)}
+                title="Remove"
+                aria-label={`Remove ${a.name}`}
+                className="absolute -right-1.5 -top-1.5 flex h-5 w-5 items-center justify-center rounded-full border border-border bg-surface text-muted-foreground shadow transition-colors hover:text-destructive"
+              >
+                <X className="h-3 w-3" />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {p.palette}
+
+      {/* The provider list, anchored above the field: the chip that opens it
+          sits in the kit's hint line, so the list is the frame's. */}
+      {p.provider && p.provider.menuOpen && !p.provider.locked && (
+        <div ref={p.providerMenuRef} role="menu" aria-label="Model" className="absolute bottom-full left-4 z-50 mb-1 min-w-[14rem] overflow-hidden rounded-xl border border-[var(--bk-color-edge)] bg-[var(--bk-color-raised)] py-1 shadow-2xl">
+          {p.provider.options.map((o) => (
+            <button
+              key={o.id}
+              role="menuitem"
+              type="button"
+              onClick={() => p.onProviderSelect(o.id)}
+              className="flex w-full items-center gap-2 px-3 py-2 text-left text-xs text-foreground transition-colors hover:bg-surface-raised"
+            >
+              <span className={cn("flex w-3.5 shrink-0", o.id === p.provider!.selectedId ? "opacity-100" : "opacity-0")}>
+                <Icon icon="confirm" size={14} color="var(--bk-amber-ink)" />
+              </span>
+              <span className="truncate">{o.label}</span>
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Capture is a MENU behind the paperclip (D37): a popover on a pointer
+          screen, the kit sheet on a phone. */}
+      {p.attachMenuOpen && pointer && (
+        <div role="menu" aria-label="Attach" className="absolute bottom-full left-4 z-50 mb-1 w-72 overflow-hidden rounded-xl border border-[var(--bk-color-edge)] bg-[var(--bk-color-raised)] shadow-2xl">
+          {attachMenu}
+        </div>
+      )}
+      {p.attachMenuOpen && !pointer && (
+        <div
+          className="fixed inset-0 z-40 bg-black/60"
+          onMouseDown={(e) => {
+            if (e.target === e.currentTarget) p.onAttachToggle();
+          }}
+        >
+          <div role="dialog" aria-label="Attach" className="absolute inset-x-0 bottom-0">
+            <BottomSheet title="Attach" subtitle="Photo, camera, or paste." docked>
+              {attachMenu}
+            </BottomSheet>
+          </div>
+        </div>
+      )}
+
+      <KitComposer
+        variant="send"
+        state={p.state}
+        placeholder={p.placeholder}
+        hint={p.hint}
+        blockedWhy={p.blockedWhy}
+        value={p.value}
+        provider={p.provider?.label}
+        onProvider={p.provider && !p.provider.locked ? p.onProviderToggle : undefined}
+        onChange={p.onChange}
+        onSend={p.onSend}
+        onStop={p.onStop}
+        onAttach={p.onAttachToggle}
+        onMic={p.onMic}
+      />
+    </div>
+  );
+}