@brainpilot/web 0.0.9 → 0.0.11

package/src/components/chat/PromptComposer.tsx

@@ -15,6 +15,8 @@ import { ComposerInput } from "./ComposerInput";
 import { ComposerSendButton } from "./ComposerSendButton";
 import { ComposerSendTools } from "./ComposerSendTools";
 import { MessageStream } from "./MessageStream";
+import { RunningScriptsPanel } from "./RunningScriptsPanel";
+import { selectActiveScripts } from "./runningScripts";
 
 export function PromptComposer() {
   const t = useT();
@@ -69,6 +71,14 @@ export function PromptComposer() {
   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;
+  // A bash tool is in flight iff selectActiveScripts finds anything; when it
+  // does, the RunningScriptsPanel below the toast owns the Stop button so
+  // we don't render a duplicate. When no scripts are running (e.g. the agent
+  // is thinking or streaming text), the toast keeps its own Stop.
+  const hasActiveScripts = useMemo(
+    () => selectActiveScripts(visibleMessages).length > 0,
+    [visibleMessages],
+  );
 
   // Agents whose run is still active. Threaded to MessageStream so a folded
   // activity block stays "in progress" across ReAct rounds — without this, the
@@ -298,6 +308,7 @@ export function PromptComposer() {
             showTiming
             turnTiming={turnTiming}
             runningAgents={runningAgents}
+            groupExpertActivity
             onAskUserSubmit={(requestId, answer) => void respondToInput(requestId, answer)}
             onRetryCancel={() => void interruptCurrent()}
           />
@@ -312,19 +323,26 @@ export function PromptComposer() {
                 return t(label.key, label.vars);
               })()}
             </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>
+            {hasActiveScripts ? null : (
+              <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}
 
+        <RunningScriptsPanel
+          messages={visibleMessages}
+          onStop={() => void interruptCurrent()}
+        />
+
         <form className="composer" aria-label={t("chat.aria.newPrompt")} onSubmit={handleSubmit}>
           <ComposerInput
             sessionId={sessionId}

package/src/components/chat/RunningScriptsPanel.tsx

@@ -0,0 +1,118 @@
+import { ChevronDown, Square } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { ChatMessage } from "../../contracts/backend";
+import { useT } from "../../i18n/useT";
+import { formatElapsed } from "../../utils/format";
+import { selectActiveScripts } from "./runningScripts";
+
+interface Props {
+  messages: ChatMessage[];
+  onStop: () => void;
+}
+
+/**
+ * "Running scripts" panel — sits directly above the composer while any bash
+ * tool call is in flight, and unmounts the moment the last one ends.
+ *
+ * The message-stream activity block folds a whole turn's reasoning + tool
+ * calls into one collapsed history entry; the composer toast only names the
+ * working agent. Neither answers what users most often ask when they see the
+ * agent pause: "what shell command is running right now, and can I kill it?"
+ *
+ * Per-script elapsed timing is derived locally from a ref-held Map keyed by
+ * `toolCallId` — the runtime doesn't emit a start timestamp on
+ * `tool_call_start`, and per-second precision is fine for a "how long has
+ * this been going" affordance. `role="status"` (no `aria-live`) so the
+ * once-a-second tick doesn't spam screen readers with elapsed digits.
+ */
+export function RunningScriptsPanel({ messages, onStop }: Props) {
+  const t = useT();
+  const scripts = useMemo(() => selectActiveScripts(messages), [messages]);
+
+  // New scripts get a stamp the first render they appear in; finished ones
+  // are pruned so a re-appearing tool-call-id (shouldn't happen, but be
+  // defensive) restarts its clock cleanly.
+  const startedAt = useRef<Map<string, number>>(new Map());
+  useEffect(() => {
+    const now = performance.now();
+    const live = new Set(scripts.map((s) => s.id));
+    for (const id of live) {
+      if (!startedAt.current.has(id)) startedAt.current.set(id, now);
+    }
+    for (const id of startedAt.current.keys()) {
+      if (!live.has(id)) startedAt.current.delete(id);
+    }
+  }, [scripts]);
+
+  // Tick once a second while at least one script is in flight so the
+  // per-script elapsed advances without needing external state.
+  const [, setTick] = useState(0);
+  useEffect(() => {
+    if (scripts.length === 0) return;
+    const id = window.setInterval(() => setTick((n) => n + 1), 1000);
+    return () => window.clearInterval(id);
+  }, [scripts.length]);
+
+  // Open by default — the whole point of the panel is that the user sees
+  // what's running. `<details>` preserves the user's toggle across re-renders
+  // as long as the DOM node is reused (which it is: the panel itself doesn't
+  // remount while scripts come and go).
+  const [open, setOpen] = useState(true);
+
+  if (scripts.length === 0) return null;
+
+  const now = performance.now();
+  const starts = Array.from(startedAt.current.values());
+  const oldest = starts.length > 0 ? Math.min(...starts) : now;
+
+  return (
+    <div className="running-scripts" role="status">
+      <details
+        open={open}
+        onToggle={(e) => setOpen((e.target as HTMLDetailsElement).open)}
+      >
+        <summary>
+          <span className="running-scripts__dot" aria-hidden="true" />
+          <ChevronDown size={14} className="running-scripts__chevron" aria-hidden="true" />
+          <span className="running-scripts__label">
+            {t("chat.runningScripts.count", { count: scripts.length })}
+            {` · ${formatElapsed(now - oldest)}`}
+          </span>
+          <button
+            className="running-scripts__stop"
+            type="button"
+            onClick={(e) => {
+              // Don't toggle the <details> when clicking Stop.
+              e.stopPropagation();
+              e.preventDefault();
+              onStop();
+            }}
+            aria-label={t("chat.aria.stop")}
+            title={t("chat.aria.stop")}
+          >
+            <Square size={10} fill="currentColor" />
+            <span>{t("chat.stop")}</span>
+          </button>
+        </summary>
+        <ul className="running-scripts__list">
+          {scripts.map((s) => {
+            const start = startedAt.current.get(s.id);
+            const elapsed = start === undefined ? "" : formatElapsed(now - start);
+            return (
+              <li className="running-scripts__item" key={s.id}>
+                <div className="running-scripts__item-head">
+                  <span className="running-scripts__item-agent">{s.agent}</span>
+                  <span className="running-scripts__item-name">bash</span>
+                  <span className="running-scripts__item-elapsed">{elapsed}</span>
+                </div>
+                <pre className="running-scripts__cmd">
+                  {s.command || t("chat.runningScripts.pending")}
+                </pre>
+              </li>
+            );
+          })}
+        </ul>
+      </details>
+    </div>
+  );
+}

package/src/components/chat/runningScripts.ts

@@ -0,0 +1,88 @@
+import type { ChatMessage } from "../../contracts/backend";
+
+/**
+ * "Running script" panel data model (pure, no React).
+ *
+ * The composer's toast tells the user *which agent* is thinking, and the
+ * message stream's activity block shows the *history* of every reasoning /
+ * tool step. Neither surfaces the piece users most often ask for: "what
+ * shell command is running right now, and can I stop it?"
+ *
+ * A "script" here is a tool call whose kind is `tool`, whose name resolves
+ * to `bash` (bare or mcp-namespaced), and whose `streaming` flag is still
+ * true — i.e. TOOL_CALL_START has arrived but TOOL_CALL_END has not. Once
+ * the end event lands, the reducer clears `streaming`, the row falls off
+ * this list, and the panel collapses when the last one leaves.
+ *
+ * Restricting to bash on purpose: filesystem reads/greps/edits are cheap
+ * and finish fast, so listing them would just add noise. Long-running
+ * work — pytest, wget, training loops — flows through bash.
+ */
+
+/**
+ * Match a tool name against the bash tool, whether it arrived bare
+ * (Pi's built-in) or namespaced (`mcp__<server>__bash` from a bridged MCP
+ * server). Mirrors the bare-name extraction used by `isInternalToolName`
+ * in messageGroups.ts so the two visibility filters stay consistent.
+ */
+export function isBashTool(name: string | undefined): boolean {
+  if (!name) return false;
+  if (name === "bash") return true;
+  const bare = name.includes("__") ? name.slice(name.lastIndexOf("__") + 2) : name;
+  return bare === "bash";
+}
+
+/**
+ * Best-effort extraction of the shell command from the tool call args.
+ *
+ * The reducer feeds `TOOL_CALL_ARGS` deltas verbatim into `toolInput` as a
+ * string, so once enough of the JSON has arrived we get `{"command": "..."}`
+ * (or `cmd`, depending on the runtime). While the JSON is still partial we
+ * just show the raw fragment — better than nothing, and it stops flickering
+ * once the delta stream completes.
+ */
+export function extractCommand(toolInput: unknown): string {
+  if (typeof toolInput !== "string" || toolInput.length === 0) return "";
+  const trimmed = toolInput.trim();
+  try {
+    const parsed = JSON.parse(trimmed);
+    if (parsed && typeof parsed === "object") {
+      const obj = parsed as Record<string, unknown>;
+      for (const key of ["command", "cmd", "script", "shell"]) {
+        const value = obj[key];
+        if (typeof value === "string" && value.length > 0) return value;
+      }
+    }
+  } catch {
+    // Partial JSON while args are still streaming — fall through.
+  }
+  return trimmed;
+}
+
+/** A bash tool call that is still executing. */
+export interface ActiveScript {
+  id: string;
+  agent: string;
+  command: string;
+}
+
+/**
+ * Distil the flat message log down to the bash calls still in flight, in
+ * arrival order. Everything else — text, thinking, non-bash tools, completed
+ * bash calls — is filtered out. Callers can trigger the panel purely off
+ * `result.length > 0`.
+ */
+export function selectActiveScripts(messages: ChatMessage[]): ActiveScript[] {
+  const out: ActiveScript[] = [];
+  for (const m of messages) {
+    if (m.kind !== "tool") continue;
+    if (!m.streaming) continue;
+    if (!isBashTool(m.toolName)) continue;
+    out.push({
+      id: m.id,
+      agent: m.agent ?? "principal",
+      command: extractCommand(m.toolInput),
+    });
+  }
+  return out;
+}

package/src/components/demo/DemoView.tsx

@@ -614,7 +614,7 @@ export function DemoView({ resetSignal }: DemoViewProps = {}) {
           {condensedMessages.length === 0 ? (
             <p className="demo-panel__empty">{t("demo.conversation.empty")}</p>
           ) : (
-            <MessageStream messages={condensedMessages} showToolbarCount={false} className="demo-message-stream" />
+            <MessageStream messages={condensedMessages} showToolbarCount={false} groupExpertActivity className="demo-message-stream" />
           )}
         </section>
 

package/src/components/session/AgentTraceViews.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef, useState } from "react";
-import { Network, Pause, Play, RefreshCw, Search, UserRoundCog, X } from "lucide-react";
+import { Network, Pause, Play, RefreshCw, Search, X } from "lucide-react";
 import { TraceNode } from "../../contracts/backend";
 import { useSessions } from "../../contexts/SessionContext";
 import { useT } from "../../i18n/useT";
@@ -24,14 +24,10 @@ export function AgentsPanel() {
     <section className="workspace-panel" aria-labelledby="agents-panel-heading">
       <div className="workspace-panel__inner workspace-panel__inner--trace">
         <header className="workspace-panel__header">
-          <div>
-            <span className="workspace-panel__eyebrow">
-              <Network size={11} style={{ marginRight: 4, verticalAlign: "-1px" }} />
-              {t("trace.agents.eyebrow")}
-            </span>
-            <h2 id="agents-panel-heading">{t("trace.agents.title")}</h2>
-          </div>
-          <UserRoundCog size={18} />
+          <h2 id="agents-panel-heading" className="workspace-panel__title-icon">
+            <Network size={18} />
+            {t("trace.agents.eyebrow")}
+          </h2>
         </header>
 
         {!currentSession ? (