@brainpilot/web 0.0.3 → 0.0.5

package/src/components/chat/PromptComposer.tsx

@@ -0,0 +1,398 @@
+import { Bot, Mic, Paperclip, Plus, Square } 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 { draftStore } from "../../contexts/draftStore";
+import { applyMessageFilters } from "../../contexts/messageFilters";
+import { useT } from "../../i18n/useT";
+import { api } from "../../utils/api";
+import { CustomSelect } from "../primitives/CustomSelect";
+import { IconButton } from "../primitives/IconButton";
+import { ComposerInput } from "./ComposerInput";
+import { ComposerSendButton } from "./ComposerSendButton";
+import { MessageStream } from "./MessageStream";
+
+export function PromptComposer() {
+  const t = useT();
+  const [suggestedTasks, setSuggestedTasks] = useState<string[]>([]);
+  const [activeProvider, setActiveProvider] = useState<ProviderProfile | null>(null);
+  const [selectedModel, setSelectedModel] = useState("");
+  // 可用命令（已通过真实 API 测试 /context ✅ /cost ✅；/compact 由 SDK 内置 ✅）
+  // 不可用命令（已移除）：/usage ❌ /clear ❌ /init ❌
+  const DEFAULT_SLASH_COMMANDS = ["/compact", "/context", "/cost"];
+  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);
+  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();
+  // 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);
+
+  const visibleMessages = useMemo(() => {
+    const agentFiltered = messages.filter((msg) => {
+      if (msg.role === "user") return true;
+      const agent = msg.agent || "principal";
+      const filters = agentFilters[agent];
+      if (!filters) return true;
+      // "隐藏消息" 只隐藏普通消息，不碰 tool / hook
+      if (filters.hideMessages && msg.kind !== "tool" && msg.kind !== "hook") return false;
+      // "隐藏工具调用" 只隐藏 tool
+      if (filters.hideTools && msg.kind === "tool") return false;
+      // "隐藏 Hooks" 只隐藏 hook
+      if (filters.hideHooks && msg.kind === "hook") return false;
+      return true;
+    });
+    return applyMessageFilters(agentFiltered, messageFilters);
+  }, [messages, agentFilters, messageFilters]);
+
+  const hasMessages = visibleMessages.length > 0;
+  const isAgentRunning = agents.some((a) => a.status === "running");
+  const lastAssistantStreaming = visibleMessages[visibleMessages.length - 1]?.role === "assistant" && visibleMessages[visibleMessages.length - 1]?.streaming;
+
+  // Agents whose run is still active. Threaded to MessageStream so a folded
+  // activity block stays "in progress" across ReAct rounds — without this, the
+  // per-message streaming flags all clear between rounds and the block flashes
+  // "完成思考" in the gap. Memoized so its identity is stable for MessageStream's
+  // memo() (a fresh Set each render would defeat the memoization).
+  const runningAgents = useMemo(
+    () => new Set(agents.filter((a) => a.status === "running").map((a) => a.name)),
+    [agents],
+  );
+
+  useEffect(() => {
+    let cancelled = false;
+    void api.ui.promptSuggestions().then((suggestions) => {
+      if (!cancelled) {
+        setSuggestedTasks(suggestions);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  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]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (commandsRef.current && !commandsRef.current.contains(event.target as Node)) {
+        setShowCommands(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  useLayoutEffect(() => {
+    if (!showCommands || !commandsRef.current || !menuRef.current) return;
+    const buttonRect = commandsRef.current.getBoundingClientRect();
+    const menuRect = menuRef.current.getBoundingClientRect();
+    setMenuPos({
+      top: buttonRect.top - menuRect.height - 6,
+      left: buttonRect.left,
+    });
+  }, [showCommands]);
+
+  useEffect(() => {
+    if (!showCommands) return;
+    const handleClose = () => setShowCommands(false);
+    window.addEventListener("resize", handleClose);
+    return () => {
+      window.removeEventListener("resize", handleClose);
+    };
+  }, [showCommands]);
+
+  // Textarea autoresize, key handling, and draft state moved to ComposerInput,
+  // which owns the textarea ref and subscribes to draftStore directly.
+  // PromptComposer no longer re-renders on keystrokes — that's the whole point
+  // of the split.
+
+  useEffect(() => {
+    let cancelled = false;
+    const loadProviderAndSettings = async () => {
+      try {
+        const [providerRes, settings, healthProfiles] = await Promise.all([
+          api.providers.getActive(),
+          api.settings.get(),
+          api.providers.health().catch(() => [] as ProviderProfile[]),
+        ]);
+        if (cancelled) {
+          return;
+        }
+        let provider = providerRes;
+        if (provider && healthProfiles.length > 0) {
+          const activeId = provider.id;
+          const hp = healthProfiles.find((p) => p.id === activeId);
+          if (hp) {
+            provider = { ...provider, healthStatus: hp.healthStatus, healthCheckedAt: hp.healthCheckedAt, modelHealth: hp.modelHealth };
+          }
+        }
+        setActiveProvider(provider);
+        setSelectedModel((current) => {
+          if (current && provider?.models.includes(current)) {
+            return current;
+          }
+          if (settings.model && provider?.models.includes(settings.model)) {
+            return settings.model;
+          }
+          return provider?.models[0] ?? "";
+        });
+      } catch {
+        if (!cancelled) {
+          setActiveProvider(null);
+          setSelectedModel("");
+        }
+      }
+    };
+    void loadProviderAndSettings();
+    window.addEventListener("provider-profiles-updated", loadProviderAndSettings);
+    return () => {
+      cancelled = true;
+      window.removeEventListener("provider-profiles-updated", loadProviderAndSettings);
+    };
+  }, []);
+
+  useEffect(() => {
+    const refreshProvider = async () => {
+      try {
+        const [providerRes, healthProfiles] = await Promise.all([
+          api.providers.getActive(),
+          api.providers.health().catch(() => [] as ProviderProfile[]),
+        ]);
+        let provider = providerRes;
+        if (provider && healthProfiles.length > 0) {
+          const providerId = provider.id;
+          const hp = healthProfiles.find((p) => p.id === providerId);
+          if (hp) {
+            provider = { ...provider, healthStatus: hp.healthStatus, healthCheckedAt: hp.healthCheckedAt, modelHealth: hp.modelHealth };
+          }
+        }
+        setActiveProvider(provider);
+        setSelectedModel((current) => {
+          if (current && provider?.models.includes(current)) {
+            return current;
+          }
+          return provider?.models[0] ?? "";
+        });
+      } catch {
+        // ignore silent refresh errors
+      }
+    };
+    const id = window.setInterval(() => void refreshProvider(), 30000);
+    return () => window.clearInterval(id);
+  }, []);
+
+  const sessionId = currentSession?.id ?? (isDraft ? DRAFT_SESSION_ID : null);
+
+  const handleSubmit = async (event: FormEvent) => {
+    event.preventDefault();
+    if (!sessionId) return;
+    const content = draftStore.get(sessionId).trim();
+    if (!content || !canSend) {
+      return;
+    }
+    draftStore.set(sessionId, "");
+    // 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, {
+      providerId: activeProvider?.id,
+      modelId: selectedModel || undefined,
+    });
+  };
+
+  // Writes to the draft store from non-text controls (slash command picks,
+  // suggestion cards). PromptComposer never reads the draft, so these don't
+  // pull it onto the keystroke render path.
+  const setDraftFor = (value: string) => {
+    if (sessionId) draftStore.set(sessionId, value);
+  };
+
+  return (
+    <section className={`prompt-home ${hasMessages ? "prompt-home--active" : ""}`} aria-labelledby="prompt-heading">
+      <div className="prompt-home__inner">
+        {hasMessages ? null : <h1 id="prompt-heading">{currentSession?.title ?? t("chat.heading")}</h1>}
+
+        {hasMessages ? (
+          <MessageStream
+            messages={visibleMessages}
+            autoScroll
+            showTiming
+            runningAgents={runningAgents}
+            onAskUserSubmit={(requestId, answer) => void respondToInput(requestId, answer)}
+            onRetryCancel={() => void interruptCurrent()}
+          />
+        ) : null}
+
+        {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>
+            <button
+              className="agent-running-toast__stop"
+              type="button"
+              onClick={() => void interruptCurrent()}
+              aria-label={t("chat.aria.stop")}
+              title={t("chat.aria.stop")}
+            >
+              <Square size={10} fill="currentColor" />
+              <span>{t("chat.stop")}</span>
+            </button>
+          </div>
+        ) : null}
+
+        <form className="composer" aria-label={t("chat.aria.newPrompt")} onSubmit={handleSubmit}>
+          <ComposerInput
+            sessionId={sessionId}
+            placeholder={t("chat.placeholder")}
+            ariaLabel={t("chat.srAsk")}
+          />
+
+          <div className="composer__toolbar">
+            <div className="composer__tools">
+              <IconButton label={t("chat.aria.attachContext")}>
+                <Plus size={18} />
+              </IconButton>
+              {slashCommands.length > 0 && (
+                <div className="command-picker" ref={commandsRef}>
+                  <IconButton
+                    label={t("chat.command")}
+                    onClick={() => setShowCommands((s) => !s)}
+                    className={`command-trigger ${showCommands ? "is-active" : ""}`}
+                  >
+                    <span>{t("chat.command")}</span>
+                  </IconButton>
+                  {showCommands && (
+                    <div
+                      className="command-picker__menu"
+                      ref={menuRef}
+                      style={menuPos ? { top: menuPos.top, left: menuPos.left } : { top: -9999, left: -9999 }}
+                    >
+                      {slashCommands.map((cmd) => (
+                        <button
+                          key={cmd}
+                          className="command-picker__option"
+                          type="button"
+                          onClick={() => {
+                            setDraftFor(cmd);
+                            setShowCommands(false);
+                          }}
+                        >
+                          {cmd}
+                        </button>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+
+            <div className="composer__send-tools">
+              <CustomSelect
+                ariaLabel={t("chat.modelPlaceholder")}
+                className="model-select"
+                disabled={!currentSandbox || !activeProvider || activeProvider.models.length === 0}
+                onChange={async (model) => {
+                  setSelectedModel(model);
+                  setComposerError(null);
+                  try {
+                    await api.settings.update({ model });
+                  } catch (e) {
+                    const msg = e instanceof Error ? e.message : String(e);
+                    console.error("Failed to save model selection", e);
+                    setComposerError(t("chat.error.saveModel", { msg }));
+                    return;
+                  }
+                  try {
+                    await reloadConfig();
+                  } catch (e) {
+                    const msg = e instanceof Error ? e.message : String(e);
+                    console.error("Failed to reload config after model change", e);
+                    setComposerError(t("chat.error.reloadConfig", { msg }));
+                  }
+                }}
+                options={activeProvider?.models.map((model) => {
+                  const mh = activeProvider.modelHealth?.find((m) => m.model === model);
+                  const status = mh?.status ?? "unknown";
+                  return {
+                    value: model,
+                    label: model,
+                    indicator: (
+                      <span
+                        className={`model-status-dot model-status-dot--${status}`}
+                        title={mh?.error ?? status}
+                      />
+                    ),
+                  };
+                }) ?? []}
+                placeholder={t("chat.modelPlaceholder")}
+                title={activeProvider ? t("chat.providerTitle", { name: activeProvider.name }) : t("chat.noActiveProvider")}
+                value={selectedModel}
+              />
+              <IconButton label={t("chat.aria.voice")}>
+                <Mic size={17} />
+              </IconButton>
+              <IconButton label={t("chat.aria.attachFile")}>
+                <Paperclip size={17} />
+              </IconButton>
+              <ComposerSendButton
+                sessionId={sessionId}
+                canSend={canSend}
+                label={t("chat.aria.send")}
+              />
+            </div>
+          </div>
+
+        </form>
+
+        {error ? <p className="composer-status composer-status--error">{error}</p> : null}
+        {composerError ? <p className="composer-status composer-status--error">{composerError}</p> : null}
+        {!canSend ? (
+          <p className="composer-status">
+            {sandboxStatus !== "running"
+              ? t("chat.status.startSandbox")
+              : isConnected
+                ? t("chat.status.preparing")
+                : t("chat.status.connecting")}
+          </p>
+        ) : null}
+
+        {!hasMessages && suggestedTasks.length > 0 ? <div className="suggestions" aria-label={t("chat.aria.suggested")}>
+          {suggestedTasks.map((task) => (
+            <button className="suggestion-row" key={task} onClick={() => setDraftFor(task)} type="button">
+              <Bot size={15} />
+              <span>{task}</span>
+            </button>
+          ))}
+        </div> : null}
+      </div>
+    </section>
+  );
+}

package/src/components/chat/SystemMessageBubble.tsx

@@ -0,0 +1,46 @@
+import { AlertTriangle, Info, OctagonAlert, XCircle } from "lucide-react";
+import type { SystemMessageView } from "../../contracts/backend";
+import { useT } from "../../i18n/useT";
+
+/**
+ * 修正6 — system_message bubble. Renders a `system_message` event (level
+ * info|warning|error|fatal) as a 4-level styled inline bubble in the
+ * conversation stream. `fatal` gets the emphasized red treatment; `details`
+ * (debug) is revealed on expand.
+ */
+export function SystemMessageBubble({ view }: { view: SystemMessageView }) {
+  const t = useT();
+  const level = view.level;
+  const Icon =
+    level === "fatal" ? OctagonAlert :
+    level === "error" ? XCircle :
+    level === "warning" ? AlertTriangle :
+    Info;
+  const labelKey =
+    level === "fatal" ? "chat.system.fatal" :
+    level === "error" ? "chat.system.error" :
+    level === "warning" ? "chat.system.warning" :
+    "chat.system.info";
+
+  return (
+    <div
+      className={`system-message system-message--${level}${level === "fatal" ? " system-message--emphasis" : ""}`}
+      role={level === "error" || level === "fatal" ? "alert" : "status"}
+      data-testid="system-message"
+      data-level={level}
+    >
+      <div className="system-message__head">
+        <Icon size={15} className="system-message__icon" aria-hidden="true" />
+        <span className="system-message__label">{t(labelKey)}</span>
+        {view.agent ? <span className="system-message__agent">{view.agent}</span> : null}
+      </div>
+      <p className="system-message__text">{view.message}</p>
+      {view.details ? (
+        <details className="system-message__details">
+          <summary>{t("chat.system.details")}</summary>
+          <pre>{view.details}</pre>
+        </details>
+      ) : null}
+    </div>
+  );
+}

package/src/components/demo/DemoFileTree.tsx

@@ -0,0 +1,146 @@
+import { useMemo, useState } from "react";
+import { ChevronRight, File, FileImage, FileText, Folder } from "lucide-react";
+import type { DemoFile } from "../../contracts/demoBundle";
+import { getPreviewKind } from "../files/filePreview";
+
+interface TreeNode {
+  name: string;
+  path: string;
+  isDir: boolean;
+  children: TreeNode[];
+}
+
+/** Build a nested tree from a flat list of file paths. Folders first, alpha. */
+export function buildFileTree(paths: string[]): TreeNode[] {
+  const root: TreeNode = { name: "", path: "", isDir: true, children: [] };
+  for (const raw of paths) {
+    const norm = raw.replace(/^\/+/, "");
+    const parts = norm.split("/").filter(Boolean);
+    let cursor = root;
+    let acc = "";
+    parts.forEach((part, idx) => {
+      acc = acc ? `${acc}/${part}` : part;
+      const isLeaf = idx === parts.length - 1;
+      let child = cursor.children.find((c) => c.name === part);
+      if (!child) {
+        // Preserve the original (possibly leading-slash) path on the leaf so it
+        // matches DemoFile.path / artifact paths exactly.
+        child = { name: part, path: isLeaf ? raw : acc, isDir: !isLeaf, children: [] };
+        cursor.children.push(child);
+      }
+      if (!isLeaf) {
+        child.isDir = true;
+      }
+      cursor = child;
+    });
+  }
+  sortTree(root);
+  return root.children;
+}
+
+function sortTree(node: TreeNode) {
+  node.children.sort((a, b) => {
+    if (a.isDir !== b.isDir) {
+      return a.isDir ? -1 : 1;
+    }
+    return a.name.localeCompare(b.name);
+  });
+  node.children.forEach(sortTree);
+}
+
+function leafIcon(name: string) {
+  const kind = getPreviewKind(name);
+  if (kind === "image") {
+    return <FileImage size={14} />;
+  }
+  if (kind === "text") {
+    return <FileText size={14} />;
+  }
+  return <File size={14} />;
+}
+
+interface DemoFileTreeProps {
+  files: DemoFile[];
+  highlightedPaths: Set<string>;
+  activePath: string | null;
+  onSelect: (path: string) => void;
+  emptyLabel: string;
+  skippedLabel: string;
+  unreadableLabel: string;
+}
+
+export function DemoFileTree({ files, highlightedPaths, activePath, onSelect, emptyLabel, skippedLabel, unreadableLabel }: DemoFileTreeProps) {
+  const tree = useMemo(() => buildFileTree(files.map((f) => f.path)), [files]);
+  const truncated = useMemo(() => new Set(files.filter((f) => f.truncated).map((f) => f.path)), [files]);
+  const unreadable = useMemo(
+    () => new Set(files.filter((f) => f.reason === "unreadable").map((f) => f.path)),
+    [files],
+  );
+  const [collapsed, setCollapsed] = useState<Set<string>>(() => new Set());
+
+  if (files.length === 0) {
+    return <p className="demo-panel__empty">{emptyLabel}</p>;
+  }
+
+  const toggle = (path: string) => {
+    setCollapsed((current) => {
+      const next = new Set(current);
+      if (next.has(path)) {
+        next.delete(path);
+      } else {
+        next.add(path);
+      }
+      return next;
+    });
+  };
+
+  const renderNode = (node: TreeNode, depth: number) => {
+    const pad = 8 + depth * 14;
+    if (node.isDir) {
+      const isOpen = !collapsed.has(node.path);
+      return (
+        <div key={node.path || node.name} className="demo-tree-node">
+          <button
+            className="demo-tree-row demo-tree-row--dir"
+            style={{ paddingLeft: pad }}
+            onClick={() => toggle(node.path)}
+            type="button"
+          >
+            <span className={`demo-tree-chevron ${isOpen ? "is-open" : ""}`}>
+              <ChevronRight size={13} />
+            </span>
+            <Folder size={14} />
+            <span className="demo-tree-name">{node.name}</span>
+          </button>
+          {isOpen ? node.children.map((child) => renderNode(child, depth + 1)) : null}
+        </div>
+      );
+    }
+    const isSkipped = truncated.has(node.path);
+    const isUnreadable = unreadable.has(node.path);
+    const isProduced = highlightedPaths.has(node.path);
+    const isActive = activePath === node.path;
+    return (
+      <div key={node.path} className="demo-tree-node">
+        <button
+          className={`demo-tree-row ${isActive ? "is-active" : ""} ${isProduced ? "is-produced" : ""} ${isSkipped ? "is-skipped" : ""}`}
+          style={{ paddingLeft: pad + 13 }}
+          disabled={isSkipped && !isUnreadable}
+          onClick={() => onSelect(node.path)}
+          title={node.path}
+          type="button"
+        >
+          {leafIcon(node.name)}
+          <span className="demo-tree-name">{node.name}</span>
+          {isUnreadable ? (
+            <small className="demo-tree-skip">{unreadableLabel}</small>
+          ) : isSkipped ? (
+            <small className="demo-tree-skip">{skippedLabel}</small>
+          ) : null}
+        </button>
+      </div>
+    );
+  };
+
+  return <div className="demo-file-tree">{tree.map((node) => renderNode(node, 0))}</div>;
+}