@clawpump/claw-agent 0.1.5 → 0.1.7

package/agent/web/src/components/ChatSidebar.tsx

@@ -4,12 +4,13 @@
  *
  * Two WebSockets, one per concern:
  *
- *   1. **JSON-RPC sidecar** (`GatewayClient` → /api/ws) — drives the
- *      sidebar's own slot of the dashboard's in-process gateway.  Owns
- *      the model badge / picker / connection state / error banner.
- *      Independent of the PTY pane's session by design — those are the
- *      pieces the sidebar needs to be able to drive directly (model
- *      switch via slash.exec, etc.).
+ *   1. **JSON-RPC sidecar** (`GatewayClient` → /api/ws) — a lightweight
+ *      session used only for connection state (the "live" badge) and
+ *      credential warnings. Independent of the PTY pane's session by
+ *      design. The model badge does NOT come from here: it reads the
+ *      effective config model over REST (`/api/model/info`), and the model
+ *      picker writes config over REST (`/api/model/set`) then offers a
+ *      dashboard reload so the running chat adopts the new model.
  *
  *   2. **Event subscriber** (/api/events?channel=…) — passive, receives
  *      every dispatcher emit from the PTY-side `tui_gateway.entry` that
@@ -28,13 +29,15 @@ import { Badge } from "@nous-research/ui/ui/components/badge";
 import { Card } from "@nous-research/ui/ui/components/card";
 
 import { ModelPickerDialog } from "@/components/ModelPickerDialog";
+import { ModelReloadConfirm } from "@/components/ModelReloadConfirm";
+import { ReasoningPicker } from "@/components/ReasoningPicker";
 import { ToolCall, type ToolEntry } from "@/components/ToolCall";
 import { GatewayClient, type ConnectionState } from "@/lib/gatewayClient";
-import { HERMES_BASE_PATH, buildWsAuthParam } from "@/lib/api";
+import { api, HERMES_BASE_PATH, buildWsAuthParam } from "@/lib/api";
 
 import { cn } from "@/lib/utils";
 import { AlertCircle, ChevronDown, RefreshCw } from "lucide-react";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 interface SessionInfo {
   cwd?: string;
@@ -71,10 +74,32 @@ const STATE_TONE: Record<
 
 interface ChatSidebarProps {
   channel: string;
+  /** Management profile from the dashboard switcher — scopes session.create. */
+  profile?: string;
   className?: string;
+  onDashboardNewSessionRequest?: () => void;
+  /**
+   * Render the tool-call activity card. Defaults to true. The dashboard Chat
+   * tab sets this false so the right rail stays a thin model + session-list
+   * column; the model picker and its event plumbing are unaffected.
+   */
+  showTools?: boolean;
+  /**
+   * "rail" (default) renders the vertical card column for the right rail.
+   * "bar" renders a compact horizontal row of just the model picker +
+   * reasoning effort, for the page header on the Chat tab.
+   */
+  variant?: "rail" | "bar";
 }
 
-export function ChatSidebar({ channel, className }: ChatSidebarProps) {
+export function ChatSidebar({
+  channel,
+  profile,
+  className,
+  onDashboardNewSessionRequest,
+  showTools = true,
+  variant = "rail",
+}: ChatSidebarProps) {
   // `version` bumps on reconnect; gw is derived so we never call setState
   // for it inside an effect (React 19's set-state-in-effect rule). The
   // counter is the dependency on purpose — it's not read in the memo body,
@@ -84,21 +109,77 @@ export function ChatSidebar({ channel, className }: ChatSidebarProps) {
   const gw = useMemo(() => new GatewayClient(), [version]);
 
   const [state, setState] = useState<ConnectionState>("idle");
-  const [sessionId, setSessionId] = useState<string | null>(null);
   const [info, setInfo] = useState<SessionInfo>({});
   const [tools, setTools] = useState<ToolEntry[]>([]);
   const [modelOpen, setModelOpen] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  // The badge shows config.yaml's main model (`model.default`) via
+  // `/api/model/info` — the same value the Models page writes and a new chat
+  // session boots from. We deliberately don't use the sidecar's `session.info`
+  // model: that's a one-time snapshot of the throwaway sidecar agent taken when
+  // its session is created, and it never updates when the model is changed
+  // elsewhere, so the badge would go stale. `/api/model/info` is profile-scoped
+  // by `fetchJSON`, so it reads the same profile this sidebar is scoped to.
+  const [effectiveModel, setEffectiveModel] = useState("");
+  // Whether the effective model supports reasoning effort — gates the
+  // ReasoningPicker. Read from the same `/api/model/info` capabilities the
+  // (currently unused) ModelInfoCard surfaces, so the dashboard exposes a
+  // control to *set* the level, not just a read-only "Reasoning" badge.
+  const [supportsReasoning, setSupportsReasoning] = useState(false);
+  // Bumped on model change/save so ReasoningPicker re-reads the saved effort
+  // (config is profile-scoped the same way the model badge is).
+  const [modelRefreshKey, setModelRefreshKey] = useState(0);
+  // Set after the picker saves a model and the user declines the reload: config
+  // is updated but the running session keeps its model until rebuilt.
+  const [modelNotice, setModelNotice] = useState<string | null>(null);
+  // Short name of a just-saved model awaiting confirm to reload (a fresh chat
+  // session is how the running chat adopts it; we confirm before discarding it).
+  const [pendingReloadModel, setPendingReloadModel] = useState<string | null>(
+    null,
+  );
+
+  const refreshEffectiveModel = useCallback(() => {
+    void api
+      .getModelInfo()
+      .then((r) => {
+        if (r?.model) setEffectiveModel(String(r.model));
+        setSupportsReasoning(!!r?.capabilities?.supports_reasoning);
+        // Bump so ReasoningPicker re-reads the saved effort for the new model.
+        setModelRefreshKey((k) => k + 1);
+      })
+      .catch(() => {
+        // Best-effort: keep the last known label rather than blanking it.
+      });
+  }, []);
+
+  // Profile or PTY channel change tears down both WebSockets. Bump `version`
+  // (same path as the manual Reconnect button) so the gateway client is
+  // recreated and the events feed resubscribes — otherwise the old events
+  // socket's close handler can leave a stale error banner after a switch.
+  const scopeKey = `${channel}\0${profile ?? ""}`;
+  const prevScopeKey = useRef<string | null>(null);
+  useEffect(() => {
+    if (prevScopeKey.current === null) {
+      prevScopeKey.current = scopeKey;
+      return;
+    }
+    if (prevScopeKey.current === scopeKey) return;
+    prevScopeKey.current = scopeKey;
+    setError(null);
+    setTools([]);
+    setVersion((v) => v + 1);
+  }, [scopeKey]);
 
   useEffect(() => {
     let cancelled = false;
+    queueMicrotask(() => {
+      if (cancelled) return;
+      setInfo({});
+      setError(null);
+    });
     const offState = gw.onState(setState);
 
     const offSessionInfo = gw.on<SessionInfo>("session.info", (ev) => {
-      if (ev.session_id) {
-        setSessionId(ev.session_id);
-      }
-
       if (ev.payload) {
         setInfo((prev) => ({ ...prev, ...ev.payload }));
       }
@@ -112,21 +193,21 @@ export function ChatSidebar({ channel, className }: ChatSidebarProps) {
       }
     });
 
-    // Adopt whichever session the gateway hands us. session.create on the
-    // sidecar is independent of the PTY pane's session by design — we
-    // only need a sid to drive the model picker's slash.exec calls.
+    // Create the sidecar session so the gateway surfaces session-scoped
+    // signals (connection state, credential warnings). It's independent of the
+    // PTY pane's session by design. The model picker no longer rides this
+    // session — it writes config.yaml over REST — so we don't track its id.
     gw.connect()
       .then(() => {
         if (cancelled) {
           return;
         }
-        return gw.request<{ session_id: string }>("session.create", {});
-      })
-      .then((created) => {
-        if (cancelled || !created?.session_id) {
-          return;
-        }
-        setSessionId(created.session_id);
+        // close_on_disconnect: the gateway reaps this sidecar session (and its
+        // slash_worker subprocess) when the WS drops, instead of leaking it.
+        return gw.request<{ session_id: string }>("session.create", {
+          close_on_disconnect: true,
+          ...(profile ? { profile } : {}),
+        });
       })
       .catch((e: Error) => {
         if (!cancelled) {
@@ -141,6 +222,7 @@ export function ChatSidebar({ channel, className }: ChatSidebarProps) {
       offError();
       gw.close();
     };
+    // `profile` is read from render; scope changes bump `version` → new `gw`.
   }, [gw]);
 
   // Event subscriber WebSocket — receives the rebroadcast of every
@@ -204,7 +286,9 @@ export function ChatSidebar({ channel, className }: ChatSidebarProps) {
 
       const { type, payload } = frame.params;
 
-      if (type === "tool.start") {
+      if (type === "dashboard.new_session_requested") {
+        onDashboardNewSessionRequest?.();
+      } else if (type === "tool.start") {
         const p = payload as
           | { tool_id?: string; name?: string; context?: string }
           | undefined;
@@ -280,45 +364,122 @@ export function ChatSidebar({ channel, className }: ChatSidebarProps) {
       unmounting = true;
       ws?.close();
     };
-  }, [channel, version]);
+  }, [channel, onDashboardNewSessionRequest, version]);
+
+  // Seed the badge on mount and re-read it whenever the sockets are rebuilt
+  // (a profile/channel switch bumps `version`).
+  useEffect(() => {
+    refreshEffectiveModel();
+  }, [refreshEffectiveModel, version]);
 
   const reconnect = useCallback(() => {
     setError(null);
     setTools([]);
+    setModelNotice(null);
+    setPendingReloadModel(null);
     setVersion((v) => v + 1);
   }, []);
 
-  // Picker hands us a fully-formed slash command (e.g. "/model anthropic/...").
-  // Fire-and-forget through `slash.exec`; the TUI pane will render the result
-  // via PTY, so the sidebar doesn't need to surface output of its own.
-  const onModelSubmit = useCallback(
-    (slashCommand: string) => {
-      if (!sessionId) {
-        return;
-      }
+  // The picker writes config.yaml over REST and reloads — it doesn't ride the
+  // sidecar gateway session, so it's available whenever the sidebar is mounted.
+  const modelName = effectiveModel || info.model || "—";
+  const modelLabel = modelName.split("/").slice(-1)[0] ?? "—";
+  const banner = error ?? info.credential_warning ?? null;
 
-      void gw.request("slash.exec", {
-        session_id: sessionId,
-        command: slashCommand,
-      });
-      setModelOpen(false);
-    },
-    [gw, sessionId],
+  // Model picker + reload-confirm portals — rendered in both layouts.
+  const dialogs = (
+    <>
+      {modelOpen && (
+        <ModelPickerDialog
+          // Same path the Models page uses (REST /api/model/set), not the
+          // sidecar config.set RPC, which didn't reliably land in the
+          // config.yaml the agent boots from. Always persisted (alwaysGlobal).
+          loader={api.getModelOptions}
+          alwaysGlobal
+          onApply={async ({ provider, model, confirmExpensiveModel }) => {
+            setModelNotice(null);
+            setPendingReloadModel(null);
+            const result = await api.setModelAssignment({
+              confirm_expensive_model: confirmExpensiveModel,
+              scope: "main",
+              provider,
+              model,
+            });
+            if (!result.confirm_required) {
+              refreshEffectiveModel();
+              setPendingReloadModel(model.split("/").slice(-1)[0]);
+            }
+            return result;
+          }}
+          onClose={() => {
+            setModelOpen(false);
+            refreshEffectiveModel();
+          }}
+        />
+      )}
+
+      <ModelReloadConfirm
+        model={pendingReloadModel}
+        onCancel={() => {
+          const m = pendingReloadModel;
+          setPendingReloadModel(null);
+          setModelNotice(
+            `Model set to ${m}. Run /new or refresh the page to apply it to this chat.`,
+          );
+        }}
+      />
+    </>
   );
 
-  const canPickModel = state === "open" && !!sessionId;
-  const modelLabel = (info.model ?? "—").split("/").slice(-1)[0] ?? "—";
-  const banner = error ?? info.credential_warning ?? null;
+  // Compact horizontal layout for the page header (Chat tab): model picker +
+  // connection state + reasoning effort, inline.
+  if (variant === "bar") {
+    return (
+      <div className="flex min-w-0 items-center gap-2">
+        <Button
+          ghost
+          size="sm"
+          onClick={() => setModelOpen(true)}
+          className="min-w-0 max-w-[9rem] px-1 py-0 normal-case tracking-normal text-sm font-medium hover:underline"
+          title={modelName === "—" ? "switch model" : modelName}
+        >
+          <span className="flex min-w-0 items-center gap-1">
+            <span className="truncate">{modelLabel}</span>
+            <ChevronDown className="size-3.5 shrink-0 text-text-secondary" />
+          </span>
+        </Button>
+
+        <Badge tone={STATE_TONE[state]} className="hidden shrink-0 md:inline-flex">
+          {STATE_LABEL[state]}
+        </Badge>
+
+        {supportsReasoning && (
+          <ReasoningPicker
+            compact
+            currentModel={modelName}
+            refreshKey={modelRefreshKey}
+            onChanged={(effort) =>
+              setModelNotice(
+                `Reasoning effort set to ${effort}. Run /new or refresh the page to apply it to this chat.`,
+              )
+            }
+          />
+        )}
+
+        {dialogs}
+      </div>
+    );
+  }
 
   return (
     <aside
       className={cn(
-        "flex h-full w-full min-w-0 shrink-0 flex-col gap-3 overflow-y-auto overflow-x-hidden pr-1 lg:w-80",
+        "flex h-full w-full min-w-0 shrink-0 flex-col gap-3 overflow-y-auto overflow-x-hidden pr-1",
         className,
       )}
     >
       <Card className="flex items-center justify-between gap-2 px-3 py-2">
-        <div className="min-w-0">
+        <div className="min-w-0 flex-1">
           <div className="text-display text-xs tracking-wider text-text-tertiary">
             model
           </div>
@@ -326,23 +487,51 @@ export function ChatSidebar({ channel, className }: ChatSidebarProps) {
           <Button
             ghost
             size="sm"
-            disabled={!canPickModel}
             onClick={() => setModelOpen(true)}
-            suffix={
-              canPickModel ? (
-                <ChevronDown className="text-text-secondary" />
-              ) : undefined
-            }
-            className="self-start min-w-0 px-0 py-0 normal-case tracking-normal text-sm font-medium hover:underline disabled:no-underline"
-            title={info.model ?? "switch model"}
+            className={cn(
+              "max-w-full min-w-0 px-0 py-0",
+              "self-start normal-case tracking-normal text-sm font-medium",
+              "hover:underline disabled:no-underline",
+            )}
+            title={modelName === "—" ? "switch model" : modelName}
           >
-            <span className="truncate">{modelLabel}</span>
+            <span className="flex min-w-0 max-w-full items-center gap-1">
+              <span className="truncate">{modelLabel}</span>
+
+              <ChevronDown className="size-3.5 shrink-0 text-text-secondary" />
+            </span>
           </Button>
         </div>
 
-        <Badge tone={STATE_TONE[state]}>{STATE_LABEL[state]}</Badge>
+        <Badge tone={STATE_TONE[state]} className="shrink-0">
+          {STATE_LABEL[state]}
+        </Badge>
       </Card>
 
+      {supportsReasoning && (
+        <Card className="py-0">
+          <ReasoningPicker
+            currentModel={modelName}
+            refreshKey={modelRefreshKey}
+            onChanged={(effort) =>
+              setModelNotice(
+                `Reasoning effort set to ${effort}. Run /new or refresh the page to apply it to this chat.`,
+              )
+            }
+          />
+        </Card>
+      )}
+
+      {modelNotice && (
+        <Card className="flex items-start gap-2 border-warning/40 bg-warning/5 px-3 py-2 text-xs">
+          <AlertCircle className="mt-0.5 h-3.5 w-3.5 shrink-0 text-warning" />
+
+          <div className="wrap-break-word min-w-0 flex-1 text-text-secondary">
+            {modelNotice}
+          </div>
+        </Card>
+      )}
+
       {banner && (
         <Card className="flex items-start gap-2 border-destructive/40 bg-destructive/5 px-3 py-2 text-xs">
           <AlertCircle className="mt-0.5 h-3.5 w-3.5 shrink-0 text-destructive" />
@@ -365,30 +554,25 @@ export function ChatSidebar({ channel, className }: ChatSidebarProps) {
         </Card>
       )}
 
-      <Card className="flex min-h-0 flex-none flex-col px-2 py-2">
-        <div className="text-display px-1 pb-2 text-xs tracking-wider text-text-tertiary">
-          tools
-        </div>
-
-        <div className="flex min-h-0 flex-col gap-1.5">
-          {tools.length === 0 ? (
-            <div className="px-2 py-4 text-center text-xs text-text-secondary">
-              no tool calls yet
-            </div>
-          ) : (
-            tools.map((t) => <ToolCall key={t.id} tool={t} />)
-          )}
-        </div>
-      </Card>
+      {showTools && (
+        <Card className="flex min-h-0 flex-none flex-col px-2 py-2">
+          <div className="text-display px-1 pb-2 text-xs tracking-wider text-text-tertiary">
+            tools
+          </div>
 
-      {modelOpen && canPickModel && sessionId && (
-        <ModelPickerDialog
-          gw={gw}
-          sessionId={sessionId}
-          onClose={() => setModelOpen(false)}
-          onSubmit={onModelSubmit}
-        />
+          <div className="flex min-h-0 flex-col gap-1.5">
+            {tools.length === 0 ? (
+              <div className="px-2 py-4 text-center text-xs text-text-secondary">
+                no tool calls yet
+              </div>
+            ) : (
+              tools.map((t) => <ToolCall key={t.id} tool={t} />)
+            )}
+          </div>
+        </Card>
       )}
+
+      {dialogs}
     </aside>
   );
 }

package/agent/web/src/components/ConfirmDialog.tsx

@@ -0,0 +1,122 @@
+import { Button } from "@nous-research/ui/ui/components/button";
+import { AlertTriangle } from "lucide-react";
+import { useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import { cn, themedBody } from "@/lib/utils";
+
+interface ConfirmDialogProps {
+  cancelLabel?: string;
+  confirmLabel?: string;
+  description?: string;
+  destructive?: boolean;
+  loading?: boolean;
+  onCancel: () => void;
+  onConfirm: () => void;
+  open: boolean;
+  title: string;
+}
+
+export function ConfirmDialog({
+  cancelLabel = "Cancel",
+  confirmLabel = "Confirm",
+  description,
+  destructive = false,
+  loading = false,
+  onCancel,
+  onConfirm,
+  open,
+  title,
+}: ConfirmDialogProps) {
+  const dialogRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+
+    const prevActive = document.activeElement as HTMLElement | null;
+    dialogRef.current
+      ?.querySelector<HTMLButtonElement>("[data-confirm]")
+      ?.focus();
+
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onCancel();
+      }
+    };
+
+    document.addEventListener("keydown", onKey);
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.body.style.overflow = prevOverflow;
+      prevActive?.focus?.();
+    };
+  }, [open, onCancel]);
+
+  if (!open) return null;
+
+  return createPortal(
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="confirm-dialog-title"
+      aria-describedby={description ? "confirm-dialog-desc" : undefined}
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onCancel();
+      }}
+      className="fixed inset-0 z-[200] flex items-center justify-center bg-background/85 backdrop-blur-sm p-4"
+    >
+      <div
+        ref={dialogRef}
+        className={cn(
+          themedBody,
+          "relative w-full max-w-md border border-border bg-card shadow-2xl",
+        )}
+      >
+        <div className="flex items-start gap-3 p-4 border-b border-border">
+          {destructive && (
+            <div aria-hidden className="mt-0.5 shrink-0 text-destructive">
+              <AlertTriangle className="h-4 w-4" />
+            </div>
+          )}
+
+          <div className="flex-1 min-w-0 flex flex-col gap-1">
+            <h2
+              id="confirm-dialog-title"
+              className="font-mondwest text-display text-base tracking-wider"
+            >
+              {title}
+            </h2>
+
+            {description && (
+              <p
+                id="confirm-dialog-desc"
+                className="text-xs text-muted-foreground leading-relaxed whitespace-pre-line"
+              >
+                {description}
+              </p>
+            )}
+          </div>
+        </div>
+
+        <div className="flex items-center justify-end gap-2 p-3">
+          <Button type="button" outlined onClick={onCancel} disabled={loading}>
+            {cancelLabel}
+          </Button>
+          <Button
+            data-confirm
+            type="button"
+            destructive={destructive}
+            onClick={onConfirm}
+            disabled={loading}
+          >
+            {loading ? "…" : confirmLabel}
+          </Button>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}