@schlessera/brain-ui-react 0.4.0

package/src/components/chat/risk-hints.ts

@@ -0,0 +1,95 @@
+import type { ToolCall } from "../../stores/chat-store.js";
+
+// ============================================================
+// Approval-time risk hints
+// ============================================================
+//
+// Non-blocking advisories surfaced in the pending-approval detail so a human
+// notices known-risky shapes before hitting Allow. Detection only — the human
+// still decides. Each rule is { test, message } so the list is easy to extend.
+
+/**
+ * Does this path resolve inside the brain repo?
+ *
+ * Deliberately STRICTER than tool-views.tsx's `toRepoRelative`: this drives a
+ * *risk advisory*, so it must err toward warning — a bare `/brain/` substring
+ * match would wrongly clear `/tmp/brain/secrets`. Inside means either
+ * repo-relative (not absolute, no `..` escape) or anchored at a known brain
+ * root: the container path `/data/brain/` or a home checkout `/home/<user>/brain/`
+ * (`~/brain`).
+ */
+export function isInsideBrainRepo(path: string): boolean {
+  if (/^\/data\/brain\//.test(path) || /^\/home\/[^/]+\/brain\//.test(path)) {
+    return true;
+  }
+  // Repo-relative: not absolute and not escaping upward.
+  if (!path.startsWith("/") && !path.split("/").includes("..")) return true;
+  return false;
+}
+
+function asString(v: unknown): string {
+  return typeof v === "string" ? v : "";
+}
+
+export type RiskRule = {
+  test: (tool: ToolCall) => boolean;
+  message: string;
+};
+
+export const RISK_RULES: RiskRule[] = [
+  {
+    // Note: the Bash input view already badges this red, so this line is
+    // secondary. Kept for consistency so the advisory row reflects every known
+    // risk in one place rather than the human having to cross-reference badges.
+    test: (t) => t.name === "Bash" && Boolean(t.input?.dangerouslyDisableSandbox),
+    message: "runs without the sandbox",
+  },
+  {
+    // Recursive + force in either flag order (-rf, -fr) or as separate flags
+    // (rm -r -f). Lookaheads match a `-…r` flag and a `-…f` flag in any order.
+    test: (t) =>
+      t.name === "Bash" &&
+      /\brm\b(?=[^\n]*\s-[a-zA-Z]*r)(?=[^\n]*\s-[a-zA-Z]*f)/.test(
+        asString(t.input?.command)
+      ),
+    message: "removes files recursively (rm -rf)",
+  },
+  {
+    test: (t) =>
+      t.name === "Bash" &&
+      /git\s+push\b[^\n]*(?:--force\b|--force-with-lease\b|\s-f\b)/.test(
+        asString(t.input?.command)
+      ),
+    message: "force-pushes a git branch",
+  },
+  {
+    test: (t) =>
+      t.name === "Bash" &&
+      /\b(?:curl|wget)\b[^|]*\|\s*(?:ba)?sh\b/.test(asString(t.input?.command)),
+    message: "pipes a remote script into a shell",
+  },
+  {
+    test: (t) => {
+      if (t.name !== "Write" && t.name !== "Edit" && t.name !== "NotebookEdit")
+        return false;
+      const path =
+        asString(t.input?.file_path) || asString(t.input?.notebook_path);
+      if (!path) return false;
+      return !isInsideBrainRepo(path);
+    },
+    message: "writes outside the brain repo",
+  },
+];
+
+/** Advisory messages for every risk rule that fires. Never throws. */
+export function riskHints(tool: ToolCall): string[] {
+  const hints: string[] = [];
+  for (const rule of RISK_RULES) {
+    try {
+      if (rule.test(tool)) hints.push(rule.message);
+    } catch {
+      // Defensive: never let a malformed input break the approval UI.
+    }
+  }
+  return hints;
+}

package/src/components/chat/session-drawer.tsx

@@ -0,0 +1,213 @@
+import { useState, useEffect } from "react";
+import { Plus, Loader2 } from "lucide-react";
+import { api } from "../../lib/api-client.js";
+import { useChatStore } from "../../stores/chat-store.js";
+import { SlidePanel } from "../layout/slide-panel.js";
+import { cn } from "../../lib/utils.js";
+
+interface SessionInfo {
+  id: string;
+  title: string | null;
+  createdAt: number;
+  lastActiveAt: number;
+  totalCostUsd?: number;
+}
+
+interface GroupedSessions {
+  label: string;
+  sessions: SessionInfo[];
+}
+
+export function SessionDrawer({
+  open,
+  onClose,
+  onResume,
+}: {
+  open: boolean;
+  onClose: () => void;
+  onResume: (sessionId: string) => void;
+}) {
+  const [sessions, setSessions] = useState<SessionInfo[]>([]);
+  const [loading, setLoading] = useState(false);
+  const clearMessages = useChatStore((s) => s.clearMessages);
+  const currentSessionId = useChatStore((s) => s.activeSessionId);
+  const runStates = useChatStore((s) => s.runStates);
+  // A running/queued session other than the one in view is reattachable. Derive
+  // it from the live per-session run-state (kept current by the frame demux)
+  // rather than the deprecated status.activeSessionId, which multi-session
+  // servers no longer send.
+  const backgroundSessionId =
+    Object.keys(runStates).find((id) => id !== currentSessionId) ?? null;
+
+  useEffect(() => {
+    if (open) {
+      setLoading(true);
+      api
+        .sessions()
+        .then((data) => setSessions(data.sessions))
+        .catch(() => setSessions([]))
+        .finally(() => setLoading(false));
+    }
+  }, [open]);
+
+  const groups = groupSessionsByDate(sessions);
+
+  return (
+    <SlidePanel open={open} onClose={onClose} title="Sessions" wide>
+      <div className="flex h-full flex-col">
+        {/* New chat button */}
+        <div className="p-4">
+          <button
+            onClick={() => {
+              clearMessages();
+              onClose();
+            }}
+            className="flex w-full items-center justify-center gap-2 rounded-xl border-2 border-dashed border-primary/30 py-3 text-[13px] font-medium text-primary transition-all hover:border-primary/50 hover:bg-primary/5"
+          >
+            <Plus className="h-4 w-4" />
+            New conversation
+          </button>
+        </div>
+
+        {/* Session list */}
+        <div className="flex-1 overflow-y-auto px-2 pb-4">
+          {/* Active session banner */}
+          {backgroundSessionId && (
+            <div className="px-2 pb-2">
+              <button
+                onClick={() => {
+                  onResume(backgroundSessionId);
+                  onClose();
+                }}
+                className="flex w-full items-center gap-3 rounded-lg border border-primary/30 bg-primary/5 px-3 py-2.5 text-left transition-colors hover:bg-primary/10"
+              >
+                <span
+                  className="h-2 w-2 shrink-0 rounded-full bg-primary"
+                  style={{ animation: "breathe 2s ease-in-out infinite" }}
+                />
+                <div className="min-w-0">
+                  <div className="truncate text-[13px] font-medium text-foreground">
+                    Session running...
+                  </div>
+                  <div className="text-[11px] text-primary">
+                    Tap to reattach
+                  </div>
+                </div>
+              </button>
+            </div>
+          )}
+
+          {loading ? (
+            <div className="flex items-center justify-center py-12 text-muted-foreground">
+              <Loader2 className="h-4 w-4 animate-spin" />
+            </div>
+          ) : sessions.length === 0 && !backgroundSessionId ? (
+            <p className="py-12 text-center text-xs text-muted-foreground">
+              No sessions yet
+            </p>
+          ) : (
+            groups.map((group) => (
+              <div key={group.label}>
+                <div className="px-3 py-2 font-[family-name:var(--font-mono)] text-[10px] font-medium uppercase tracking-widest text-muted-foreground/40">
+                  {group.label}
+                </div>
+                {group.sessions.map((session) => (
+                  <button
+                    key={session.id}
+                    onClick={() => {
+                      onResume(session.id);
+                      onClose();
+                    }}
+                    className={cn(
+                      "w-full rounded-lg px-3 py-2.5 text-left transition-colors hover:bg-surface-raised",
+                      session.id === currentSessionId &&
+                        "border-l-2 border-primary bg-primary/5"
+                    )}
+                  >
+                    <div className="flex items-center gap-2">
+                      <div className="min-w-0 flex-1 truncate text-[13px] font-medium text-foreground">
+                        {session.title || "Untitled"}
+                      </div>
+                      <RunBadge state={runStates[session.id]} />
+                    </div>
+                    <div className="mt-0.5 flex items-center gap-2">
+                      <span className="text-[11px] text-muted-foreground">
+                        {formatRelativeTime(session.lastActiveAt)}
+                      </span>
+                      {session.totalCostUsd != null &&
+                        session.totalCostUsd > 0 && (
+                          <span className="text-[11px] text-muted-foreground/40">
+                            ${session.totalCostUsd.toFixed(2)}
+                          </span>
+                        )}
+                    </div>
+                  </button>
+                ))}
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+    </SlidePanel>
+  );
+}
+
+/** Live run-state pill on a session row (streaming / queued). */
+function RunBadge({ state }: { state?: "streaming" | "queued" | "idle" }) {
+  if (state !== "streaming" && state !== "queued") return null;
+  const running = state === "streaming";
+  return (
+    <span
+      className={cn(
+        "shrink-0 rounded-full px-1.5 py-0.5 text-[9px] font-medium uppercase tracking-wide",
+        running ? "bg-primary/15 text-primary" : "bg-amber-500/15 text-amber-500"
+      )}
+    >
+      {running ? "Running" : "Queued"}
+    </span>
+  );
+}
+
+function groupSessionsByDate(sessions: SessionInfo[]): GroupedSessions[] {
+  const dayMs = 86400000;
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  const todayMs = today.getTime();
+  const yesterdayMs = todayMs - dayMs;
+  const weekAgoMs = todayMs - 7 * dayMs;
+
+  const groups: Record<string, SessionInfo[]> = {
+    Today: [],
+    Yesterday: [],
+    "This week": [],
+    Earlier: [],
+  };
+
+  for (const s of sessions) {
+    if (s.lastActiveAt >= todayMs) {
+      groups.Today.push(s);
+    } else if (s.lastActiveAt >= yesterdayMs) {
+      groups.Yesterday.push(s);
+    } else if (s.lastActiveAt >= weekAgoMs) {
+      groups["This week"].push(s);
+    } else {
+      groups.Earlier.push(s);
+    }
+  }
+
+  return Object.entries(groups)
+    .filter(([, sessions]) => sessions.length > 0)
+    .map(([label, sessions]) => ({ label, sessions }));
+}
+
+function formatRelativeTime(ms: number): string {
+  const diff = Date.now() - ms;
+  const minutes = Math.floor(diff / 60000);
+  if (minutes < 1) return "just now";
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  if (days < 7) return `${days}d ago`;
+  return new Date(ms).toLocaleDateString();
+}

package/src/components/chat/share-block.tsx

@@ -0,0 +1,128 @@
+import { uiConfig } from "../../config.js";
+import { useRef } from "react";
+import { BrainMarkdown } from "./brain-markdown.js";
+import { ShareMenu, type ShareOption } from "../share/share-menu.js";
+import { renderAndShare, shareFile, shareText, copyRichText } from "../../lib/share.js";
+import { stripMarkdown } from "../../lib/strip-markdown.js";
+import { Share2 } from "lucide-react";
+
+export type ShareBlockFormat = "image" | "pdf" | "text" | "markdown" | "richtext";
+
+const FORMAT_LABELS: Record<ShareBlockFormat, string> = {
+  image: "Share as image",
+  pdf: "Share as PDF",
+  text: "Share as plain text",
+  markdown: "Share markdown source",
+  richtext: "Copy as rich text",
+};
+
+const ORDER: ShareBlockFormat[] = ["image", "pdf", "text", "markdown", "richtext"];
+
+interface ShareBlockProps {
+  body: string;
+  format?: ShareBlockFormat;
+  title?: string;
+}
+
+export function ShareBlock({ body, format = "image", title }: ShareBlockProps) {
+  const bodyRef = useRef<HTMLDivElement>(null);
+  const filename = sanitizeFilename(title ?? "share");
+
+  const primary = makeAction(format, body, filename, title, bodyRef);
+  const secondary: ShareOption[] = ORDER.filter((f) => f !== format).map((f) =>
+    makeAction(f, body, filename, title, bodyRef)
+  );
+
+  return (
+    <div className="my-4 overflow-hidden rounded-lg border border-primary/30 bg-primary/[0.04]">
+      <div className="flex items-center justify-between gap-3 border-b border-primary/20 bg-primary/[0.06] px-3 py-2">
+        <div className="flex min-w-0 items-center gap-2 text-xs">
+          <Share2 className="h-3.5 w-3.5 shrink-0 text-primary/80" />
+          <span className="truncate font-medium text-primary/90">
+            {title ?? "Share"}
+          </span>
+          <span className="rounded-full bg-primary/15 px-2 py-0.5 text-[10px] uppercase tracking-wide text-primary/80">
+            {format}
+          </span>
+        </div>
+        <div className="flex items-center gap-1">
+          <button
+            onClick={() => void primary.run()}
+            className="rounded-md bg-primary px-2.5 py-1 text-[11px] font-medium text-primary-foreground transition-opacity hover:opacity-90"
+          >
+            {primary.label}
+          </button>
+          <ShareMenu options={secondary} title="Other formats" />
+        </div>
+      </div>
+      <div ref={bodyRef} className="px-4 py-3">
+        <BrainMarkdown content={body} className="brain-prose" fileLinks />
+      </div>
+    </div>
+  );
+}
+
+function makeAction(
+  fmt: ShareBlockFormat,
+  body: string,
+  filename: string,
+  title: string | undefined,
+  bodyRef: React.RefObject<HTMLDivElement | null>
+): ShareOption {
+  return {
+    id: fmt,
+    label: FORMAT_LABELS[fmt],
+    run: () => runFormat(fmt, body, filename, title, bodyRef),
+  };
+}
+
+async function runFormat(
+  fmt: ShareBlockFormat,
+  body: string,
+  filename: string,
+  title: string | undefined,
+  bodyRef: React.RefObject<HTMLDivElement | null>
+): Promise<boolean> {
+  switch (fmt) {
+    case "image":
+      return renderAndShare({
+        content: body,
+        contentType: "markdown",
+        format: "png",
+        filename,
+        title: title ?? uiConfig.shareTitle,
+      });
+    case "pdf":
+      return renderAndShare({
+        content: body,
+        contentType: "markdown",
+        format: "pdf",
+        filename,
+        title: title ?? uiConfig.shareTitle,
+      });
+    case "text":
+      return shareText({ text: stripMarkdown(body), title });
+    case "markdown":
+      return shareFile(
+        new File([body], `${filename}.md`, { type: "text/markdown" }),
+        { title: title ?? filename }
+      );
+    case "richtext": {
+      const html = bodyRef.current?.innerHTML ?? `<pre>${escapeHtml(body)}</pre>`;
+      return copyRichText(html, stripMarkdown(body));
+    }
+  }
+}
+
+function sanitizeFilename(s: string): string {
+  return s.replace(/[^a-z0-9_-]+/gi, "_").slice(0, 60) || "share";
+}
+
+function escapeHtml(s: string): string {
+  return s
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}