@brainpilot/web 0.0.5 → 0.0.6

package/src/components/chat/MessageStream.tsx

@@ -1,5 +1,5 @@
 import { Check, ChevronDown, Copy } from "lucide-react";
-import { memo, useEffect, useMemo, useRef, useState } from "react";
+import { memo, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import type { ChatMessage } from "../../contracts/backend";
 import { buildRenderItems } from "../../contexts/messageGroups";
 import { useT } from "../../i18n/useT";
@@ -7,16 +7,31 @@ import { MarkdownMessage } from "./MarkdownMessage";
 import { SystemMessageBubble } from "./SystemMessageBubble";
 import { AskUserCard } from "./AskUserCard";
 import { AutoRetryIndicator } from "./AutoRetryIndicator";
+import { formatToolName, formatPayload } from "../../utils/toolDisplay";
+import { getChatScroll, setChatScroll, resolveScrollTop } from "./chatScrollMemory";
 
 interface MessageStreamProps {
   /** Already filtered / time-sliced by the host. */
   messages: ChatMessage[];
   /** Pin to bottom as new messages arrive (live chat). Default false. */
   autoScroll?: boolean;
+  /**
+   * #89 — session id used to remember scroll position/pinned intent across
+   * tab switches (Chat is unmounted when Agents/Trace is active). When set, the
+   * stream restores its prior position on mount instead of replaying a visible
+   * top-to-bottom scroll. Omit in read-only contexts (demo replay).
+   */
+  scrollKey?: string;
   /** Show the "N messages" toolbar row. Default true. */
   showToolbarCount?: boolean;
   /** Show per-agent elapsed timers + total conversation time. Live chat only. */
   showTiming?: boolean;
+  /**
+   * #99: whole-turn timing (user input → all agents finished). When provided,
+   * the footer shows this authoritative turn duration instead of a per-message
+   * span estimate. `running` drives a live ticking display.
+   */
+  turnTiming?: { running: boolean; elapsedMs: number | null; lastDurationMs: number | null };
   className?: string;
   ariaLabel?: string;
   /** 修正6 — submit an ask_user answer. Omitted in read-only contexts (demo). */
@@ -66,8 +81,10 @@ function formatElapsed(ms: number): string {
 function MessageStreamImpl({
   messages,
   autoScroll = false,
+  scrollKey,
   showToolbarCount = true,
   showTiming = false,
+  turnTiming,
   className,
   ariaLabel,
   onAskUserSubmit,
@@ -115,60 +132,56 @@ function MessageStreamImpl({
     return null;
   }, [messages]);
 
-  // Per-message timing. start = createdAt; end is stamped the first time a
-  // message is observed no longer streaming. A 1s tick drives live re-render
-  // while anything is streaming so running timers advance.
-  const timingRef = useRef<Map<string, { start: number; end: number | null }>>(new Map());
-  const [, setNow] = useState(0);
+  // #99: per-message timer is shown ONLY on the live streaming message — it is a
+  // live "this run has been going for Ns" indicator, never attached to a
+  // completed message or a user bubble (which previously drifted with wall-clock
+  // age). The authoritative whole-turn duration lives in the footer (turnTiming).
   const anyStreaming = liveStreamingId !== null;
-
-  useEffect(() => {
-    if (!showTiming) return;
-    const map = timingRef.current;
-    for (const m of messages) {
-      if (m.role === "user" || m.kind === "hook") continue;
-      const startMs = m.createdAt ? Date.parse(m.createdAt) : NaN;
-      const existing = map.get(m.id);
-      if (!existing) {
-        map.set(m.id, { start: Number.isNaN(startMs) ? Date.now() : startMs, end: m.streaming ? null : Date.now() });
-      } else if (existing.end === null && !m.streaming) {
-        existing.end = Date.now();
-      }
-    }
-  }, [messages, showTiming]);
-
+  const [, setNow] = useState(0);
   useEffect(() => {
     if (!showTiming || !anyStreaming) return;
     const id = window.setInterval(() => setNow((n) => n + 1), 1000);
     return () => window.clearInterval(id);
   }, [showTiming, anyStreaming]);
 
-  // Total conversation time: span from the earliest tracked start to the
-  // latest finish, shown only once the turn is idle and at least one message
-  // has completed.
-  const totalElapsed = useMemo(() => {
-    if (!showTiming || anyStreaming) return null;
-    let min = Infinity;
-    let max = -Infinity;
-    for (const m of messages) {
-      const entry = timingRef.current.get(m.id);
-      if (!entry || entry.end === null) continue;
-      if (entry.start < min) min = entry.start;
-      if (entry.end > max) max = entry.end;
-    }
-    if (min === Infinity || max <= min) return null;
-    return max - min;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [messages, showTiming, anyStreaming]);
-
   const elapsedLabel = (message: ChatMessage): string | null => {
     if (!showTiming) return null;
-    const entry = timingRef.current.get(message.id);
-    if (!entry) return null;
-    const end = entry.end ?? Date.now();
-    return formatElapsed(end - entry.start);
+    // Only the currently-streaming message carries a live timer.
+    if (message.id !== liveStreamingId) return null;
+    const startMs = message.createdAt ? Date.parse(message.createdAt) : NaN;
+    if (Number.isNaN(startMs)) return null;
+    return formatElapsed(Date.now() - startMs);
   };
 
+  // #89 — restore scroll position on (re)mount BEFORE the browser paints, so
+  // returning to Chat from another tab lands at the right place with no visible
+  // top-to-bottom replay. Reads the per-session memory: pinned/fresh → bottom,
+  // otherwise the saved history position. A double rAF re-applies after async
+  // layout (Markdown, images) settles, in case scrollHeight grew post-mount.
+  useLayoutEffect(() => {
+    const node = stackRef.current;
+    if (!node) return;
+    const mem = getChatScroll(scrollKey);
+    isPinnedRef.current = mem ? mem.pinned : true;
+    const apply = () => {
+      const n = stackRef.current;
+      if (!n) return;
+      n.scrollTop = resolveScrollTop(mem, n.scrollHeight);
+    };
+    apply();
+    let raf2 = 0;
+    const raf1 = window.requestAnimationFrame(() => {
+      apply();
+      raf2 = window.requestAnimationFrame(apply);
+    });
+    return () => {
+      window.cancelAnimationFrame(raf1);
+      if (raf2) window.cancelAnimationFrame(raf2);
+    };
+    // Mount-only restore; live append is handled by the autoScroll effect below.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [scrollKey]);
+
   useEffect(() => {
     if (!autoScroll) {
       return;
@@ -187,6 +200,8 @@ function MessageStreamImpl({
     }
     const distanceFromBottom = node.scrollHeight - node.scrollTop - node.clientHeight;
     isPinnedRef.current = distanceFromBottom < 24;
+    // #89 — persist intent so a tab switch (which unmounts Chat) can restore it.
+    setChatScroll(scrollKey, { scrollTop: node.scrollTop, pinned: isPinnedRef.current });
   };
 
   const handleCopy = async (id: string, text: string) => {
@@ -344,10 +359,19 @@ function MessageStreamImpl({
     const displayName = message.agent || (message.role === "system" ? "system" : "principal");
     const isLive = message.id === liveStreamingId;
     const timing = elapsedLabel(message);
-    const content = message.kind === "error" ? (
-      <p className="message-card__content--plain message-row__error">{message.content || (message.streaming ? t("chat.generating") : "")}</p>
-    ) : (
-      <MarkdownMessage content={message.content || (message.streaming ? t("chat.generating") : "")} />
+    const hasContent = !!message.content.trim();
+    const displayContent = hasContent ? message.content : (message.streaming ? t("chat.streamingPending") : "");
+    const content = (
+      <div className={`message-row__content ${message.streaming && !hasContent ? "message-row__content--pending" : ""}`}>
+        {message.kind === "error" ? (
+          <p className="message-card__content--plain message-row__error">{displayContent}</p>
+        ) : (
+          <MarkdownMessage content={displayContent} />
+        )}
+        {message.streaming && message.kind !== "error" ? (
+          <span className="message-row__streaming-cursor" aria-hidden="true" />
+        ) : null}
+      </div>
     );
     return (
       <div
@@ -377,15 +401,30 @@ function MessageStreamImpl({
   const renderActivityStep = (step: ChatMessage) => {
     const isExpert = !!step.agent && step.agent !== "principal";
     if (step.kind === "tool") {
+      // #84: render a friendly tool name (mcp__server__tool → server · tool) and
+      // un-escaped payloads. The raw name stays in `title` for debugging/copy.
+      const friendly = t("chat.toolPrefix", { name: formatToolName(step.toolName) });
+      const input = formatPayload(step.toolInput);
+      const result = formatPayload(step.toolResult);
       return (
         <div className="activity-step" key={step.id}>
           <details>
-            <summary>
+            <summary title={step.toolName || undefined}>
               {isExpert ? <span className="message-card__agent-badge">{step.agent}</span> : null}
-              {step.content || t("chat.toolPrefix", { name: step.toolName || "tool" })}
+              {friendly}
             </summary>
-            {step.toolInput !== undefined && step.toolInput !== "" ? <pre>{JSON.stringify(step.toolInput, null, 2)}</pre> : null}
-            {step.toolResult !== undefined ? <pre>{JSON.stringify(step.toolResult, null, 2)}</pre> : null}
+            {input ? (
+              <div className="activity-step__io">
+                <span className="activity-step__io-label">{t("chat.toolArgs")}</span>
+                <pre>{input}</pre>
+              </div>
+            ) : null}
+            {result ? (
+              <div className="activity-step__io">
+                <span className="activity-step__io-label">{t("chat.toolResult")}</span>
+                <pre>{result}</pre>
+              </div>
+            ) : null}
           </details>
         </div>
       );
@@ -400,7 +439,7 @@ function MessageStreamImpl({
     return (
       <div className="activity-step" key={step.id}>
         {isExpert ? <span className="message-card__agent-badge">{step.agent}</span> : null}
-        <MarkdownMessage content={step.content || (step.streaming ? t("chat.generating") : "")} />
+        <MarkdownMessage content={step.content || (step.streaming ? t("chat.streamingPending") : "")} />
       </div>
     );
   };
@@ -410,7 +449,7 @@ function MessageStreamImpl({
   const activitySubtitle = (steps: ChatMessage[], streaming: boolean) => {
     if (!streaming) return t("chat.thinkingSteps", { count: steps.length });
     const last = steps[steps.length - 1];
-    if (last?.kind === "tool") return t("chat.toolCall", { name: last.toolName || "tool" });
+    if (last?.kind === "tool") return t("chat.toolCall", { name: formatToolName(last.toolName) });
     const text = (last?.reasoning || last?.content || "").trim();
     if (text) return text.length > 80 ? `${text.slice(0, 80)}…` : text;
     return t("chat.thinking");
@@ -448,9 +487,11 @@ function MessageStreamImpl({
           </div>
         ),
       )}
-      {totalElapsed !== null ? (
+      {showTiming && turnTiming && turnTiming.elapsedMs !== null ? (
         <div className="message-stack__total" role="status">
-          {t("chat.totalTime", { time: formatElapsed(totalElapsed) })}
+          {t(turnTiming.running ? "chat.turnTimeRunning" : "chat.totalTime", {
+            time: formatElapsed(turnTiming.elapsedMs),
+          })}
         </div>
       ) : null}
     </div>

package/src/components/chat/PromptComposer.tsx

@@ -1,10 +1,12 @@
-import { Bot, Mic, Paperclip, Plus, Square } from "lucide-react";
+import { Bot, Paperclip, Square, X } from "lucide-react";
 import { FormEvent, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import type { ProviderProfile } from "../../contracts/backend";
 import { useSandbox } from "../../contexts/SandboxContext";
 import { DRAFT_SESSION_ID, useSessions } from "../../contexts/SessionContext";
+import { useTurnTimer } from "../../contexts/useTurnTimer";
 import { draftStore } from "../../contexts/draftStore";
 import { applyMessageFilters } from "../../contexts/messageFilters";
+import { runningToastLabel } from "../../contexts/runningToast";
 import { useT } from "../../i18n/useT";
 import { api } from "../../utils/api";
 import { CustomSelect } from "../primitives/CustomSelect";
@@ -21,15 +23,24 @@ export function PromptComposer() {
   // 可用命令（已通过真实 API 测试 /context ✅ /cost ✅；/compact 由 SDK 内置 ✅）
   // 不可用命令（已移除）：/usage ❌ /clear ❌ /init ❌
   const DEFAULT_SLASH_COMMANDS = ["/compact", "/context", "/cost"];
+  // issue #43: temporarily hide the whole slash-command button until the
+  // dynamic command list (GET /sessions/:id/commands) is implemented backend
+  // side. Flip to true to restore. Code below is kept intact for that.
+  const SHOW_SLASH_COMMANDS = false;
   const [slashCommands, setSlashCommands] = useState<string[]>(DEFAULT_SLASH_COMMANDS);
 
   const [showCommands, setShowCommands] = useState(false);
   const commandsRef = useRef<HTMLDivElement | null>(null);
   const menuRef = useRef<HTMLDivElement | null>(null);
   const [menuPos, setMenuPos] = useState<{ top: number; left: number } | null>(null);
+  // #47: file upload — names of files uploaded into the workspace this turn,
+  // shown as removable chips and announced to the agent on send.
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const [attachments, setAttachments] = useState<string[]>([]);
+  const [uploading, setUploading] = useState(false);
   const { status: sandboxStatus, currentSandbox, reloadConfig } = useSandbox();
   const [composerError, setComposerError] = useState<string | null>(null);
-  const { currentSession, messages, isSending, error, sendPrompt, isConnected, isDraft, agents, agentFilters, interruptCurrent, respondToInput, messageFilters } = useSessions();
+  const { currentSession, messages, isSending, error, sendPrompt, isConnected, isDraft, agents, runActive, agentFilters, interruptCurrent, respondToInput, messageFilters } = useSessions();
   // In draft mode there's no session/connection yet — allow composing so the
   // first send can create + connect the session.
   const canSend = sandboxStatus === "running" && !isSending && (isConnected || isDraft);
@@ -65,6 +76,14 @@ export function PromptComposer() {
     [agents],
   );
 
+  // Names of agents actively working, for the "X 正在工作" toast. Excludes the
+  // trace agent (it self-records continuously and isn't "the user's task"),
+  // matching the runtime's run-active aggregation (#76).
+  const workingAgentNames = useMemo(
+    () => agents.filter((a) => a.status === "running" && a.name !== "trace").map((a) => a.name),
+    [agents],
+  );
+
   useEffect(() => {
     let cancelled = false;
     void api.ui.promptSuggestions().then((suggestions) => {
@@ -77,29 +96,10 @@ export function PromptComposer() {
     };
   }, []);
 
-  useEffect(() => {
-    let cancelled = false;
-    if (!currentSession) {
-      setSlashCommands(DEFAULT_SLASH_COMMANDS);
-      return;
-    }
-    void api.sessions.commands(currentSession.id).then((res) => {
-      if (!cancelled) {
-        // Only override defaults when the backend actually returned commands
-        if (res.commands.length > 0) {
-          setSlashCommands(res.commands);
-        }
-      }
-    }).catch(() => {
-      if (!cancelled) {
-        // Keep defaults on API failure so the button stays visible
-        setSlashCommands(DEFAULT_SLASH_COMMANDS);
-      }
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [currentSession?.id]);
+  // issue #43: the dynamic slash-command list (GET /sessions/:id/commands) is
+  // not implemented on the backend yet — fetching it 404'd on every selected
+  // session. The whole slash-command button is hidden below until that lands,
+  // so we no longer fetch and just keep the local DEFAULT_SLASH_COMMANDS.
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -212,6 +212,10 @@ export function PromptComposer() {
 
   const sessionId = currentSession?.id ?? (isDraft ? DRAFT_SESSION_ID : null);
 
+  // #99: whole-turn timer — spans user input → every agent finished (runState
+  // settles false), debounced against hook/system re-wakes.
+  const turnTiming = useTurnTimer({ runActive, resetKey: currentSession?.id ?? null });
+
   const handleSubmit = async (event: FormEvent) => {
     event.preventDefault();
     if (!sessionId) return;
@@ -220,12 +224,51 @@ export function PromptComposer() {
       return;
     }
     draftStore.set(sessionId, "");
+    // #47: if files were uploaded this turn, prepend a notice so the agent knows
+    // they exist in its workspace and can `read` them. Cleared after send.
+    const notice =
+      attachments.length > 0 ? `${t("chat.upload.notice", { names: attachments.join(", ") })}\n\n` : "";
+    const sentAttachments = attachments;
+    if (attachments.length > 0) setAttachments([]);
     // Carry the chosen provider/model so a freshly-created session records its
     // per-session selection (no-op for an already-running session).
-    await sendPrompt(content, {
+    const ok = await sendPrompt(`${notice}${content}`, {
       providerId: activeProvider?.id,
       modelId: selectedModel || undefined,
     });
+    // #106: a failed/timed-out send must not silently eat the user's input.
+    // Restore the draft (and attachment chips) so they can retry without
+    // retyping. Only restore if they haven't already started typing again.
+    if (!ok) {
+      if (draftStore.get(sessionId).trim().length === 0) {
+        draftStore.set(sessionId, content);
+      }
+      if (sentAttachments.length > 0) {
+        setAttachments((prev) => (prev.length === 0 ? sentAttachments : prev));
+      }
+    }
+  };
+
+  // #47: upload the chosen files into the session workspace, then track their
+  // names as chips. Uses the current sandbox/session id (single-user: same id).
+  const handleFilesChosen = async (files: FileList | null) => {
+    if (!files || files.length === 0) return;
+    const sandboxId = currentSandbox?.id;
+    if (!sandboxId) return;
+    setUploading(true);
+    setComposerError(null);
+    try {
+      for (const file of Array.from(files)) {
+        await api.sandbox.uploadFile(sandboxId, file.name, file);
+        setAttachments((prev) => (prev.includes(file.name) ? prev : [...prev, file.name]));
+      }
+    } catch (e) {
+      const msg = e instanceof Error ? e.message : String(e);
+      setComposerError(t("chat.upload.failed", { msg }));
+    } finally {
+      setUploading(false);
+      if (fileInputRef.current) fileInputRef.current.value = ""; // allow re-selecting the same file
+    }
   };
 
   // Writes to the draft store from non-text controls (slash command picks,
@@ -244,7 +287,9 @@ export function PromptComposer() {
           <MessageStream
             messages={visibleMessages}
             autoScroll
+            scrollKey={sessionId ?? undefined}
             showTiming
+            turnTiming={turnTiming}
             runningAgents={runningAgents}
             onAskUserSubmit={(requestId, answer) => void respondToInput(requestId, answer)}
             onRetryCancel={() => void interruptCurrent()}
@@ -254,7 +299,12 @@ export function PromptComposer() {
         {isAgentRunning || lastAssistantStreaming ? (
           <div className="agent-running-toast" role="status" aria-live="polite">
             <span className="agent-running-toast__dot" />
-            <span className="agent-running-toast__label">{t("chat.agentThinking")}</span>
+            <span className="agent-running-toast__label">
+              {(() => {
+                const label = runningToastLabel(workingAgentNames);
+                return t(label.key, label.vars);
+              })()}
+            </span>
             <button
               className="agent-running-toast__stop"
               type="button"
@@ -275,12 +325,37 @@ export function PromptComposer() {
             ariaLabel={t("chat.srAsk")}
           />
 
+          {attachments.length > 0 || uploading ? (
+            <div className="composer__attachments" aria-label={t("chat.aria.attachFile")}>
+              {attachments.map((name) => (
+                <span className="composer__chip" key={name}>
+                  <Paperclip size={12} />
+                  <span className="composer__chip-name">{name}</span>
+                  <button
+                    type="button"
+                    className="composer__chip-remove"
+                    aria-label={t("chat.aria.removeAttachment")}
+                    onClick={() => setAttachments((prev) => prev.filter((n) => n !== name))}
+                  >
+                    <X size={12} />
+                  </button>
+                </span>
+              ))}
+              {uploading ? <span className="composer__chip composer__chip--pending">{t("chat.upload.uploading")}</span> : null}
+            </div>
+          ) : null}
+
           <div className="composer__toolbar">
             <div className="composer__tools">
+              {/*
+                issue #47: 添加上下文 (Plus) has no picker yet — hidden until the
+                context-attachment flow exists. The chat.aria.attachContext i18n
+                key is kept. Re-add the Plus lucide import when restoring this.
               <IconButton label={t("chat.aria.attachContext")}>
                 <Plus size={18} />
               </IconButton>
-              {slashCommands.length > 0 && (
+              */}
+              {SHOW_SLASH_COMMANDS && slashCommands.length > 0 && (
                 <div className="command-picker" ref={commandsRef}>
                   <IconButton
                     label={t("chat.command")}
@@ -356,10 +431,26 @@ export function PromptComposer() {
                 title={activeProvider ? t("chat.providerTitle", { name: activeProvider.name }) : t("chat.noActiveProvider")}
                 value={selectedModel}
               />
+              {/*
+                issue #47: 语音输入 (Mic) has no capture/permission flow yet —
+                hidden until implemented. The chat.aria.voice i18n key is kept.
+                Re-add the Mic lucide import when restoring this.
               <IconButton label={t("chat.aria.voice")}>
                 <Mic size={17} />
               </IconButton>
-              <IconButton label={t("chat.aria.attachFile")}>
+              */}
+              <input
+                ref={fileInputRef}
+                type="file"
+                multiple
+                style={{ display: "none" }}
+                onChange={(e) => void handleFilesChosen(e.target.files)}
+              />
+              <IconButton
+                label={t("chat.aria.attachFile")}
+                onClick={() => fileInputRef.current?.click()}
+                disabled={uploading || !currentSandbox}
+              >
                 <Paperclip size={17} />
               </IconButton>
               <ComposerSendButton

package/src/components/chat/chatScrollMemory.ts

@@ -0,0 +1,49 @@
+/**
+ * Per-session chat scroll memory (#89).
+ *
+ * Switching workspace tabs (Chat ↔ Agents ↔ Trace) unmounts/remounts the Chat
+ * subtree in DesktopShell, so MessageStream loses its scroll position and its
+ * "is the user pinned to the bottom" intent. This module-level store survives
+ * those remounts, keyed by session id, so returning to Chat can restore where
+ * the user was — at the bottom following live output, or up in the history they
+ * were reading — without a visible top-to-bottom replay.
+ *
+ * Module-level (not React state) on purpose: it must outlive the component that
+ * reads it, and it is deliberately ephemeral (lost on full page reload, which
+ * is the right default — a reload starts a fresh view).
+ */
+
+export interface ChatScrollState {
+  /** Last observed scrollTop of the message stack. */
+  scrollTop: number;
+  /** Whether the user was pinned to (near) the bottom. */
+  pinned: boolean;
+}
+
+const store = new Map<string, ChatScrollState>();
+
+export function getChatScroll(key: string | undefined): ChatScrollState | undefined {
+  if (!key) return undefined;
+  return store.get(key);
+}
+
+export function setChatScroll(key: string | undefined, state: ChatScrollState): void {
+  if (!key) return;
+  store.set(key, state);
+}
+
+/**
+ * Resolve the scrollTop to apply on (re)mount.
+ *
+ * - no memory yet, or the user was pinned → bottom (scrollHeight); this is the
+ *   default for a freshly-opened conversation and for "following live output".
+ * - the user had scrolled up to read history → restore that exact position,
+ *   clamped to the current scrollHeight in case content shrank.
+ */
+export function resolveScrollTop(
+  mem: ChatScrollState | undefined,
+  scrollHeight: number,
+): number {
+  if (!mem || mem.pinned) return scrollHeight;
+  return Math.min(mem.scrollTop, scrollHeight);
+}