@schlessera/brain-ui-react 0.4.0

package/src/components/layout/side-rail.tsx

@@ -0,0 +1,128 @@
+import {
+  Brain,
+  RefreshCw,
+  Newspaper,
+  History,
+  KeyRound,
+  SquarePen,
+  FolderTree,
+} from "lucide-react";
+import { useConnectionStore } from "../../stores/connection-store.js";
+import { useUIStore } from "../../stores/ui-store.js";
+import { useChatStore, activeChat } from "../../stores/chat-store.js";
+import { cn } from "../../lib/utils.js";
+
+export function SideRail() {
+  const wsStatus = useConnectionStore((s) => s.wsStatus);
+  const toggleSessionPanel = useUIStore((s) => s.toggleSessionPanel);
+  const toggleSyncPanel = useUIStore((s) => s.toggleSyncPanel);
+  const toggleWhatsupPanel = useUIStore((s) => s.toggleWhatsupPanel);
+  const toggleFilePanel = useUIStore((s) => s.toggleFilePanel);
+  const toggleSecurityPanel = useUIStore((s) => s.toggleSecurityPanel);
+  const clearMessages = useChatStore((s) => s.clearMessages);
+  const hasMessages = useChatStore((s) => activeChat(s).messages.length > 0);
+  const isStreaming = useChatStore((s) => activeChat(s).isStreaming);
+
+  return (
+    <nav className="hidden md:flex w-16 shrink-0 flex-col items-center border-r border-border bg-surface py-4 gap-1">
+      {/* Logo */}
+      <div className="mb-4">
+        <Brain className="h-7 w-7 text-primary" />
+      </div>
+
+      {/* New chat */}
+      {hasMessages && (
+        <RailButton
+          icon={SquarePen}
+          label="New chat"
+          onClick={clearMessages}
+        />
+      )}
+
+      {/* Divider */}
+      <div className="my-2 h-px w-8 bg-border" />
+
+      {/* Quick actions */}
+      <RailButton
+        icon={RefreshCw}
+        label="Sync"
+        onClick={toggleSyncPanel}
+        disabled={isStreaming}
+      />
+      <RailButton
+        icon={Newspaper}
+        label="Whatsup"
+        onClick={toggleWhatsupPanel}
+        disabled={isStreaming}
+      />
+      <RailButton
+        icon={FolderTree}
+        label="Files"
+        onClick={toggleFilePanel}
+      />
+
+      {/* Spacer */}
+      <div className="flex-1" />
+
+      {/* History */}
+      <RailButton
+        icon={History}
+        label="Sessions"
+        onClick={toggleSessionPanel}
+      />
+
+      {/* Security (passkeys, sign out) */}
+      <RailButton
+        icon={KeyRound}
+        label="Security"
+        onClick={toggleSecurityPanel}
+      />
+
+      {/* Connection status */}
+      <div className="mt-2 flex flex-col items-center gap-1">
+        <span
+          className={cn(
+            "inline-block h-2 w-2 rounded-full",
+            wsStatus === "connected" && "bg-green-500",
+            wsStatus === "connecting" && "bg-primary animate-pulse",
+            wsStatus === "disconnected" && "bg-destructive"
+          )}
+        />
+        <span className="text-[10px] text-muted-foreground">
+          {wsStatus === "connected"
+            ? "Live"
+            : wsStatus === "connecting"
+              ? "..."
+              : "Off"}
+        </span>
+      </div>
+    </nav>
+  );
+}
+
+function RailButton({
+  icon: Icon,
+  label,
+  onClick,
+  disabled,
+}: {
+  icon: typeof Brain;
+  label: string;
+  onClick: () => void;
+  disabled?: boolean;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      title={label}
+      className="group relative flex h-10 w-10 items-center justify-center rounded-lg text-muted-foreground transition-all duration-150 hover:bg-surface-raised hover:text-foreground hover:scale-110 disabled:opacity-40 disabled:hover:scale-100"
+    >
+      <Icon className="h-4.5 w-4.5" />
+      {/* Tooltip */}
+      <span className="pointer-events-none absolute left-full ml-2 whitespace-nowrap rounded-md bg-surface-overlay px-2.5 py-1 text-xs font-medium text-foreground opacity-0 shadow-lg transition-opacity group-hover:opacity-100 border border-border">
+        {label}
+      </span>
+    </button>
+  );
+}

package/src/components/layout/slide-panel.tsx

@@ -0,0 +1,64 @@
+import { useEffect, type ReactNode } from "react";
+import { X } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+
+export function SlidePanel({
+  open,
+  onClose,
+  title,
+  wide,
+  children,
+}: {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  wide?: boolean;
+  children: ReactNode;
+}) {
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [open, onClose]);
+
+  return (
+    <>
+      {/* Backdrop */}
+      {open && (
+        <div
+          className="fixed inset-0 z-40 bg-black/40 transition-opacity md:bg-black/20"
+          onClick={onClose}
+        />
+      )}
+
+      {/* Panel */}
+      <div
+        className={cn(
+          "fixed right-0 top-0 z-50 flex h-full flex-col border-l border-border bg-surface shadow-[0_16px_48px_rgba(0,0,0,0.5)]",
+          "transform transition-transform duration-300 ease-out",
+          open ? "translate-x-0" : "translate-x-full",
+          wide ? "w-full md:w-[480px]" : "w-full md:w-80"
+        )}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between border-b border-border px-5 py-4">
+          <h2 className="font-[family-name:var(--font-display)] text-lg text-foreground">
+            {title}
+          </h2>
+          <button
+            onClick={onClose}
+            className="rounded-lg p-2.5 md:p-1.5 text-muted-foreground transition-colors hover:bg-surface-raised hover:text-foreground"
+          >
+            <X className="h-5 w-5 md:h-4 md:w-4" />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto">{children}</div>
+      </div>
+    </>
+  );
+}

package/src/components/quick-actions/streaming-modal.tsx

@@ -0,0 +1,168 @@
+import { useState, useEffect, useRef } from "react";
+import { Loader2, CheckCircle2, XCircle } from "lucide-react";
+import { SlidePanel } from "../layout/slide-panel.js";
+import { linkifyPaths } from "../chat/brain-markdown.js";
+
+type StreamState = "idle" | "running" | "success" | "error" | "cancelled";
+
+export function StreamingPanel({
+  open,
+  onClose,
+  title,
+  endpoint,
+  method = "POST",
+}: {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  endpoint: string;
+  method?: string;
+}) {
+  const [state, setState] = useState<StreamState>("idle");
+  const [lines, setLines] = useState<string[]>([]);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const controllerRef = useRef<AbortController | null>(null);
+
+  useEffect(() => {
+    if (!open) return;
+
+    setState("running");
+    setLines([]);
+
+    const controller = new AbortController();
+    controllerRef.current = controller;
+
+    (async () => {
+      try {
+        const res = await fetch(endpoint, {
+          method,
+          signal: controller.signal,
+        });
+
+        if (!res.ok || !res.body) {
+          setState("error");
+          setLines((l) => [...l, `HTTP ${res.status}: ${res.statusText}`]);
+          return;
+        }
+
+        const reader = res.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = "";
+
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+
+          buffer += decoder.decode(value, { stream: true });
+          const events = buffer.split("\n\n");
+          buffer = events.pop() || "";
+
+          for (const event of events) {
+            const dataLine = event
+              .split("\n")
+              .find((l) => l.startsWith("data: "));
+            if (!dataLine) continue;
+
+            try {
+              const data = JSON.parse(dataLine.slice(6));
+              if (data.text !== undefined) {
+                setLines((l) => [...l, data.text]);
+              }
+              if (data.type === "done") {
+                setState(data.success ? "success" : "error");
+              }
+            } catch {}
+          }
+        }
+      } catch (err: any) {
+        if (err.name === "AbortError") {
+          setLines((l) => [...l, "Cancelled."]);
+          setState("cancelled");
+        } else {
+          setState("error");
+          setLines((l) => [...l, `Error: ${err.message}`]);
+        }
+      } finally {
+        controllerRef.current = null;
+      }
+    })();
+
+    return () => {
+      controller.abort();
+      controllerRef.current = null;
+    };
+  }, [open, endpoint, method]);
+
+  // Auto-scroll
+  useEffect(() => {
+    scrollRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [lines]);
+
+  const isRunning = state === "running";
+
+  return (
+    <SlidePanel
+      open={open}
+      onClose={isRunning ? () => {} : onClose}
+      title={title}
+    >
+      <div className="flex h-full flex-col">
+        {/* Status bar */}
+        <div className="flex items-center gap-2 border-b border-border px-5 py-2">
+          {isRunning && (
+            <Loader2 className="h-3.5 w-3.5 animate-spin text-primary" />
+          )}
+          {state === "success" && (
+            <CheckCircle2 className="h-3.5 w-3.5 text-green-500" />
+          )}
+          {(state === "error" || state === "cancelled") && (
+            <XCircle className="h-3.5 w-3.5 text-destructive" />
+          )}
+          <span className="text-xs text-muted-foreground">
+            {isRunning
+              ? "Running..."
+              : state === "success"
+                ? "Complete"
+                : state === "error"
+                  ? "Failed"
+                  : state === "cancelled"
+                    ? "Cancelled"
+                    : "Ready"}
+          </span>
+        </div>
+
+        {/* Log output */}
+        <div className="flex-1 overflow-y-auto p-4 font-[family-name:var(--font-mono)] text-xs leading-relaxed text-muted-foreground">
+          {lines.map((line, i) => (
+            <div key={i} className="whitespace-pre-wrap">
+              {linkifyPaths(line)}
+            </div>
+          ))}
+          {isRunning && lines.length === 0 && (
+            <div className="text-muted-foreground/50">Starting...</div>
+          )}
+          <div ref={scrollRef} />
+        </div>
+
+        {/* Footer */}
+        <div className="border-t border-border px-5 py-3 flex justify-end">
+          {isRunning ? (
+            <button
+              onClick={() => controllerRef.current?.abort()}
+              className="rounded-lg border border-destructive/30 px-4 py-1.5 text-xs font-medium text-destructive transition-colors hover:bg-destructive/10"
+            >
+              Cancel
+            </button>
+          ) : (
+            <button
+              onClick={onClose}
+              className="rounded-lg bg-surface-raised px-4 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-surface-overlay"
+            >
+              Close
+            </button>
+          )}
+        </div>
+      </div>
+    </SlidePanel>
+  );
+}

package/src/components/quick-actions/whatsup-modal.tsx

@@ -0,0 +1,149 @@
+import { useState, useEffect, useRef } from "react";
+import { Loader2, XCircle } from "lucide-react";
+import { SlidePanel } from "../layout/slide-panel.js";
+import { BrainMarkdown } from "../chat/brain-markdown.js";
+import { getBackendUrl } from "../../lib/backend.js";
+
+type State = "loading" | "done" | "error" | "cancelled";
+
+export function WhatsupPanel({
+  open,
+  onClose,
+}: {
+  open: boolean;
+  onClose: () => void;
+}) {
+  const [state, setState] = useState<State>("loading");
+  const [content, setContent] = useState("");
+  const controllerRef = useRef<AbortController | null>(null);
+
+  useEffect(() => {
+    if (!open) return;
+
+    setState("loading");
+    setContent("");
+
+    const controller = new AbortController();
+    controllerRef.current = controller;
+
+    (async () => {
+      try {
+        const res = await fetch(getBackendUrl("/api/brain/whatsup"), {
+          method: "POST",
+          signal: controller.signal,
+        });
+
+        if (!res.ok || !res.body) {
+          setState("error");
+          setContent(`HTTP ${res.status}: ${res.statusText}`);
+          return;
+        }
+
+        const reader = res.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = "";
+        const lines: string[] = [];
+
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+
+          buffer += decoder.decode(value, { stream: true });
+          const events = buffer.split("\n\n");
+          buffer = events.pop() || "";
+
+          for (const event of events) {
+            const dataLine = event
+              .split("\n")
+              .find((l) => l.startsWith("data: "));
+            if (!dataLine) continue;
+
+            try {
+              const data = JSON.parse(dataLine.slice(6));
+              if (data.type === "progress" && data.text !== undefined) {
+                lines.push(data.text);
+              }
+              if (data.type === "done") {
+                setState(data.success ? "done" : "error");
+              }
+            } catch {}
+          }
+        }
+
+        setContent(lines.join("\n"));
+      } catch (err: any) {
+        if (err.name === "AbortError") {
+          setState("cancelled");
+          setContent("Cancelled.");
+        } else {
+          setState("error");
+          setContent(`Error: ${err.message}`);
+        }
+      } finally {
+        controllerRef.current = null;
+      }
+    })();
+
+    return () => {
+      controller.abort();
+      controllerRef.current = null;
+    };
+  }, [open]);
+
+  const isLoading = state === "loading";
+
+  return (
+    <SlidePanel
+      open={open}
+      onClose={onClose}
+      title="Whatsup"
+      wide
+    >
+      <div className="flex h-full flex-col">
+        {/* Status bar (errors only — loading uses centered indicator) */}
+        {(state === "error" || state === "cancelled") && (
+          <div className="flex items-center gap-2 border-b border-border px-5 py-2">
+            <XCircle className="h-3.5 w-3.5 text-destructive" />
+            <span className="text-xs text-muted-foreground">Failed</span>
+          </div>
+        )}
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto p-5">
+          {isLoading ? (
+            <div className="flex items-center justify-center h-32 text-muted-foreground text-sm">
+              <Loader2 className="h-5 w-5 animate-spin mr-2 text-primary" />
+              Generating briefing...
+            </div>
+          ) : (
+            <BrainMarkdown
+              content={content}
+              className="whatsup-briefing brain-prose"
+              entityTags
+              fileLinks
+            />
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="border-t border-border px-5 py-3 flex justify-end">
+          {isLoading ? (
+            <button
+              onClick={() => controllerRef.current?.abort()}
+              className="rounded-lg border border-destructive/30 px-4 py-1.5 text-xs font-medium text-destructive transition-colors hover:bg-destructive/10"
+            >
+              Cancel
+            </button>
+          ) : (
+            <button
+              onClick={onClose}
+              className="rounded-lg bg-surface-raised px-4 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-surface-overlay"
+            >
+              Close
+            </button>
+          )}
+        </div>
+      </div>
+    </SlidePanel>
+  );
+}