@schlessera/brain-ui-react 0.4.0

package/src/components/chat/welcome-state.tsx

@@ -0,0 +1,105 @@
+import { Brain, Newspaper, Search, BarChart3 } from "lucide-react";
+import { motion } from "framer-motion";
+
+export function WelcomeState({
+  onAction,
+}: {
+  onAction: (action: string) => void;
+}) {
+  return (
+    <div className="flex min-h-full items-center justify-center px-4 py-8">
+      <div className="flex flex-col items-center gap-8 text-center">
+        {/* Brain icon with breathe animation */}
+        <motion.div
+          initial={{ opacity: 0, y: 8 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.4, ease: "easeOut" }}
+        >
+          <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-surface">
+            <Brain className="h-8 w-8 text-primary" style={{ animation: "breathe 3s ease-in-out infinite" }} />
+          </div>
+        </motion.div>
+
+        {/* Headline */}
+        <motion.h1
+          className="font-[family-name:var(--font-display)] text-3xl text-foreground"
+          initial={{ opacity: 0, y: 8 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.4, delay: 0.1, ease: "easeOut" }}
+        >
+          What do you need to know?
+        </motion.h1>
+
+        {/* Suggestion cards */}
+        <motion.div
+          className="flex flex-col sm:flex-row gap-3"
+          initial={{ opacity: 0, y: 8 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.4, delay: 0.2, ease: "easeOut" }}
+        >
+          <SuggestionCard
+            icon={Newspaper}
+            label="What's new?"
+            description="Daily briefing"
+            onClick={() => onAction("whatsup")}
+            delay={0}
+          />
+          <SuggestionCard
+            icon={Search}
+            label="Search..."
+            description="Find anything"
+            onClick={() => onAction("search")}
+            delay={0.05}
+          />
+          <SuggestionCard
+            icon={BarChart3}
+            label="Brain stats"
+            description="Overview"
+            onClick={() => onAction("stats")}
+            delay={0.1}
+          />
+        </motion.div>
+
+        {/* Keyboard hints */}
+        <motion.div
+          className="text-xs text-muted-foreground/40"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.4, delay: 0.4 }}
+        >
+          <span className="font-mono">/</span> for commands
+        </motion.div>
+      </div>
+    </div>
+  );
+}
+
+function SuggestionCard({
+  icon: Icon,
+  label,
+  description,
+  onClick,
+  delay,
+}: {
+  icon: typeof Brain;
+  label: string;
+  description: string;
+  onClick: () => void;
+  delay: number;
+}) {
+  return (
+    <motion.button
+      onClick={onClick}
+      className="flex w-44 flex-col items-center gap-2 rounded-xl border border-border bg-surface p-4 text-center transition-all duration-200 hover:border-primary/40 hover:bg-surface-raised"
+      initial={{ opacity: 0, y: 8 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.3, delay: 0.25 + delay, ease: "easeOut" }}
+    >
+      <Icon className="h-5 w-5 text-primary" />
+      <div>
+        <div className="text-sm font-medium text-foreground">{label}</div>
+        <div className="text-[11px] text-muted-foreground">{description}</div>
+      </div>
+    </motion.button>
+  );
+}

package/src/components/connectivity/connection-gate.tsx

@@ -0,0 +1,137 @@
+import { Brain, WifiOff, ShieldAlert } from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
+import { useConnectionStore } from "../../stores/connection-store.js";
+import { useEffect, useState, type ReactNode } from "react";
+import { LoginScreen } from "./login-screen.js";
+import { useVpnStatus } from "../../hooks/use-vpn-status.js";
+
+export function ConnectionGate({ children }: { children: ReactNode }) {
+  // The gate owns its connectivity probe — composing <ConnectionGate> is all
+  // an embedder needs; the store would otherwise sit on "checking" forever.
+  useVpnStatus();
+  const vpnStatus = useConnectionStore((s) => s.vpnStatus);
+
+  // Once the app has connected, never unmount the UI again — an intermittent
+  // drop must not destroy rendered chat state. Show a banner instead.
+  const [everConnected, setEverConnected] = useState(false);
+  useEffect(() => {
+    if (vpnStatus === "connected") setEverConnected(true);
+  }, [vpnStatus]);
+
+  // Auth required (password mode) and no valid session: show the login screen,
+  // even if we were connected before (an expired session must re-prompt).
+  if (vpnStatus === "unauthorized") {
+    return <LoginScreen />;
+  }
+
+  if (vpnStatus === "connected" || everConnected) {
+    return (
+      <>
+        <OfflineBanner
+          show={everConnected && vpnStatus !== "connected"}
+          forbidden={vpnStatus === "forbidden"}
+        />
+        {children}
+      </>
+    );
+  }
+
+  return (
+    <div className="flex h-[100dvh] items-center justify-center bg-background">
+      <AnimatePresence mode="wait">
+        <motion.div
+          key={vpnStatus}
+          initial={{ opacity: 0, y: 8 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: -8 }}
+          transition={{ duration: 0.3 }}
+          className="flex flex-col items-center gap-6 text-center px-6"
+        >
+          <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-surface">
+            <Brain
+              className="h-8 w-8 text-primary"
+              style={
+                vpnStatus === "checking"
+                  ? { animation: "breathe 3s ease-in-out infinite" }
+                  : undefined
+              }
+            />
+          </div>
+
+          {vpnStatus === "checking" && (
+            <p className="text-sm text-muted-foreground">Connecting...</p>
+          )}
+
+          {vpnStatus === "forbidden" && (
+            <>
+              <h1 className="font-[family-name:var(--font-display)] text-2xl text-foreground">
+                VPN Required
+              </h1>
+              <p className="text-sm text-muted-foreground max-w-xs">
+                Connect to the Tailscale VPN to access Brain.
+              </p>
+            </>
+          )}
+
+          {vpnStatus === "unreachable" && (
+            <>
+              <h1 className="font-[family-name:var(--font-display)] text-2xl text-foreground">
+                Unable to reach server
+              </h1>
+              <p className="text-sm text-muted-foreground max-w-xs">
+                Check your connection and try again. Retrying automatically...
+              </p>
+            </>
+          )}
+        </motion.div>
+      </AnimatePresence>
+    </div>
+  );
+}
+
+/**
+ * Slim overlay banner for connection drops after the app is up. The UI below
+ * stays mounted and interactive; reconnection is automatic (VPN poll + WS
+ * backoff both tighten while offline).
+ */
+function OfflineBanner({
+  show,
+  forbidden,
+}: {
+  show: boolean;
+  forbidden: boolean;
+}) {
+  return (
+    <AnimatePresence>
+      {show && (
+        <motion.div
+          initial={{ opacity: 0, y: -24 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: -24 }}
+          transition={{ duration: 0.2 }}
+          className="pointer-events-none fixed inset-x-0 top-0 z-[60] flex justify-center px-4 pt-3"
+        >
+          <div
+            role="status"
+            className="flex items-center gap-2 rounded-full border border-amber-500/30 bg-amber-950/90 px-4 py-1.5 text-xs text-amber-200 shadow-lg backdrop-blur"
+          >
+            {forbidden ? (
+              <ShieldAlert className="h-3.5 w-3.5" />
+            ) : (
+              <WifiOff className="h-3.5 w-3.5" />
+            )}
+            <span>
+              {forbidden
+                ? "VPN required — reconnect Tailscale"
+                : "Connection lost — reconnecting…"}
+            </span>
+            <span
+              className="inline-block h-1.5 w-1.5 rounded-full bg-amber-400"
+              style={{ animation: "breathe 2s ease-in-out infinite" }}
+            />
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}

package/src/components/connectivity/login-screen.tsx

@@ -0,0 +1,169 @@
+import { uiConfig } from "../../config.js";
+import { useEffect, useRef, useState, type FormEvent } from "react";
+import { Brain, Fingerprint, Lock } from "lucide-react";
+import { motion } from "framer-motion";
+import { api } from "../../lib/api-client.js";
+import {
+  isUserCancel,
+  loginWithPasskey,
+  supportsAutofill,
+  supportsPasskeys,
+} from "../../lib/passkeys.js";
+
+/**
+ * Login, shown when the server is in `password` auth mode and no valid session
+ * cookie is present (the /api/vpn-check probe returns 401). Password is always
+ * offered; a passkey button appears when the server reports registered
+ * passkeys and the browser supports WebAuthn. On success the browser has the
+ * HttpOnly session cookie; a reload boots the authenticated app.
+ */
+export function LoginScreen() {
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+  const [passkeyAvailable, setPasskeyAvailable] = useState(false);
+  // Fail-open: if the methods probe fails, keep the password form — the
+  // server enforces the real policy, and hiding the only working method on a
+  // transient error would be a self-inflicted lockout.
+  const [passwordAvailable, setPasswordAvailable] = useState(true);
+  const conditionalStarted = useRef(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    api
+      .authMethods()
+      .then(async (methods) => {
+        if (cancelled) return;
+        if (methods.passkey && !methods.password) setPasswordAvailable(false);
+        if (!methods.passkey || !supportsPasskeys()) return;
+        setPasskeyAvailable(true);
+        // Conditional UI (progressive enhancement): surface passkeys in the
+        // password input's autofill. Runs once; a user cancel is not an error.
+        if (conditionalStarted.current || !(await supportsAutofill())) return;
+        conditionalStarted.current = true;
+        try {
+          await loginWithPasskey({ useBrowserAutofill: true });
+          window.location.reload();
+        } catch (err) {
+          if (!isUserCancel(err)) {
+            console.warn("[passkeys] conditional UI failed:", err);
+          }
+        }
+      })
+      .catch(() => {
+        // Methods probe failing degrades to password-only — unchanged behavior.
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  async function onSubmit(e: FormEvent) {
+    e.preventDefault();
+    if (!password || submitting) return;
+    setSubmitting(true);
+    setError(null);
+    try {
+      await api.login(password);
+      // Cookie is set; reload so the app boots authenticated.
+      window.location.reload();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Login failed");
+      setSubmitting(false);
+    }
+  }
+
+  async function onPasskeyClick() {
+    if (submitting) return;
+    setSubmitting(true);
+    setError(null);
+    try {
+      await loginWithPasskey();
+      window.location.reload();
+    } catch (err) {
+      if (!isUserCancel(err)) {
+        setError(err instanceof Error ? err.message : "Passkey login failed");
+      }
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <div className="flex h-[100dvh] items-center justify-center bg-background">
+      <motion.div
+        initial={{ opacity: 0, y: 8 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3 }}
+        className="flex w-full max-w-xs flex-col items-center gap-6 px-6 text-center"
+      >
+        <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-surface">
+          <Brain className="h-8 w-8 text-primary" />
+        </div>
+        <div>
+          <h1 className="font-[family-name:var(--font-display)] text-2xl text-foreground">
+            {uiConfig.appName}
+          </h1>
+          <p className="mt-1 text-sm text-muted-foreground">
+            {!passwordAvailable
+              ? "Sign in with your passkey."
+              : passkeyAvailable
+                ? "Use your passkey or enter the password."
+                : "Enter the password to continue."}
+          </p>
+        </div>
+
+        <form onSubmit={onSubmit} className="flex w-full flex-col gap-3">
+          {passwordAvailable && (
+            <div className="relative">
+              <Lock className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground/60" />
+              <input
+                type="password"
+                autoFocus
+                autoComplete="current-password webauthn"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                placeholder="Password"
+                className="w-full rounded-lg border border-border-subtle bg-surface py-2 pl-9 pr-3 text-sm text-foreground outline-none transition-colors focus:border-primary"
+              />
+            </div>
+          )}
+          {error && (
+            <p role="alert" className="text-xs text-destructive">
+              {error}
+            </p>
+          )}
+          {passwordAvailable && (
+            <button
+              type="submit"
+              disabled={submitting || !password}
+              className="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:brightness-110 disabled:opacity-50"
+            >
+              {submitting ? "Signing in…" : "Sign in"}
+            </button>
+          )}
+          {passkeyAvailable && (
+            <button
+              type="button"
+              onClick={onPasskeyClick}
+              disabled={submitting}
+              className={
+                passwordAvailable
+                  ? "flex items-center justify-center gap-2 rounded-lg border border-border-subtle bg-surface px-4 py-2 text-sm font-medium text-foreground transition-colors hover:border-primary disabled:opacity-50"
+                  : "flex items-center justify-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:brightness-110 disabled:opacity-50"
+              }
+            >
+              <Fingerprint className="h-4 w-4" />
+              Sign in with a passkey
+            </button>
+          )}
+          {!passwordAvailable && !passkeyAvailable && (
+            <p className="text-xs text-muted-foreground">
+              Password login is disabled. Use a device or browser that supports
+              passkeys.
+            </p>
+          )}
+        </form>
+      </motion.div>
+    </div>
+  );
+}

package/src/components/files/file-panel.tsx

@@ -0,0 +1,116 @@
+import { useEffect } from "react";
+import { ChevronDown, ChevronRight, X } from "lucide-react";
+import { useFileStore } from "../../stores/file-store.js";
+import { FileTree } from "./file-tree.js";
+import { FileViewer } from "./file-viewer.js";
+import { cn } from "../../lib/utils.js";
+
+export function FilePanel({ open, onClose }: { open: boolean; onClose: () => void }) {
+  const currentPath = useFileStore((s) => s.currentPath);
+  const treeExpanded = useFileStore((s) => s.treeExpanded);
+  const setTreeExpanded = useFileStore((s) => s.setTreeExpanded);
+  const closeFile = useFileStore((s) => s.closeFile);
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [open, onClose]);
+
+  // Sync hash route to current file. When the panel closes, strip the
+  // `#/files*` segment entirely so a reload doesn't reopen it.
+  useEffect(() => {
+    if (!open) {
+      if (window.location.hash.startsWith("#/files")) {
+        // Replace with the pathname (no hash) so reload lands on the chat.
+        history.replaceState(null, "", window.location.pathname + window.location.search);
+      }
+      return;
+    }
+    if (currentPath) {
+      const target = `#/files/${currentPath}`;
+      if (window.location.hash !== target) {
+        history.replaceState(null, "", target);
+      }
+    } else if (window.location.hash.startsWith("#/files")) {
+      history.replaceState(null, "", "#/files");
+    }
+  }, [open, currentPath]);
+
+  const showTree = !currentPath || treeExpanded;
+
+  return (
+    <>
+      {open && (
+        <div
+          className="fixed inset-0 z-40 bg-black/40 transition-opacity md:bg-black/20"
+          onClick={onClose}
+        />
+      )}
+
+      <div
+        className={cn(
+          "fixed right-0 top-0 z-50 flex h-full w-full flex-col border-l border-border bg-surface shadow-[0_16px_48px_rgba(0,0,0,0.5)] md:w-[560px]",
+          "transform transition-transform duration-300 ease-out",
+          open ? "translate-x-0" : "translate-x-full"
+        )}
+      >
+        {/* 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">
+            Files
+          </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>
+
+        <div className="flex flex-1 flex-col overflow-hidden">
+          {/* Tree toggle strip — visible when a file is open */}
+          {currentPath && (
+            <div className="flex items-center gap-1 border-b border-border bg-surface-raised/40 px-3 py-1.5">
+              <button
+                onClick={() => setTreeExpanded(!treeExpanded)}
+                className="flex items-center gap-1.5 rounded px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-surface-raised hover:text-foreground"
+              >
+                {treeExpanded ? <ChevronDown className="h-3.5 w-3.5" /> : <ChevronRight className="h-3.5 w-3.5" />}
+                {treeExpanded ? "Hide tree" : "Show tree"}
+              </button>
+              <button
+                onClick={closeFile}
+                className="ml-auto rounded px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-surface-raised hover:text-foreground"
+              >
+                Close file
+              </button>
+            </div>
+          )}
+
+          {/* Tree area */}
+          {showTree && (
+            <div
+              className={cn(
+                "overflow-y-auto",
+                currentPath ? "max-h-[45vh] border-b border-border" : "flex-1"
+              )}
+            >
+              <FileTree />
+            </div>
+          )}
+
+          {/* Viewer area */}
+          {currentPath && (
+            <div className="flex-1 overflow-hidden">
+              <FileViewer />
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}

package/src/components/files/file-tree.tsx

@@ -0,0 +1,143 @@
+import { useEffect, useRef } from "react";
+import { ChevronRight, Folder, FolderOpen, FileText, FileCode, FileImage, File as FileIcon, Loader2, AlertCircle } from "lucide-react";
+import { useFileStore } from "../../stores/file-store.js";
+import type { FileEntry } from "@schlessera/brain-ui-sdk/protocol";
+import { cn } from "../../lib/utils.js";
+
+const IMAGE_EXT = new Set([".png", ".jpg", ".jpeg", ".gif", ".webp", ".svg", ".avif", ".bmp", ".ico"]);
+const CODE_EXT = new Set([".ts", ".tsx", ".js", ".jsx", ".mjs", ".cjs", ".py", ".rb", ".go", ".rs", ".java", ".sh", ".bash", ".css", ".html", ".json", ".yaml", ".yml", ".toml", ".sql"]);
+
+function iconForFile(name: string) {
+  const i = name.lastIndexOf(".");
+  const ext = i >= 0 ? name.slice(i).toLowerCase() : "";
+  if (ext === ".md" || ext === ".markdown" || ext === ".txt") return FileText;
+  if (IMAGE_EXT.has(ext)) return FileImage;
+  if (CODE_EXT.has(ext)) return FileCode;
+  return FileIcon;
+}
+
+export function FileTree() {
+  const loadDir = useFileStore((s) => s.loadDir);
+  const dirCache = useFileStore((s) => s.dirCache);
+  const dirErrors = useFileStore((s) => s.dirErrors);
+
+  useEffect(() => {
+    if (!dirCache[""]) {
+      void loadDir("");
+    }
+  }, [dirCache, loadDir]);
+
+  const rootEntries = dirCache[""];
+  const rootError = dirErrors[""];
+
+  if (rootError) {
+    return (
+      <div className="flex items-start gap-2 px-4 py-3 text-xs text-destructive">
+        <AlertCircle className="h-4 w-4 shrink-0" />
+        <span>{rootError}</span>
+      </div>
+    );
+  }
+
+  if (!rootEntries) {
+    return (
+      <div className="flex items-center gap-2 px-4 py-3 text-xs text-muted-foreground">
+        <Loader2 className="h-3.5 w-3.5 animate-spin" />
+        Loading files...
+      </div>
+    );
+  }
+
+  return (
+    <ul className="py-1 text-sm">
+      {rootEntries.map((entry) => (
+        <TreeNode key={entry.path} entry={entry} depth={0} />
+      ))}
+    </ul>
+  );
+}
+
+function TreeNode({ entry, depth }: { entry: FileEntry; depth: number }) {
+  const expanded = useFileStore((s) => s.expandedDirs.has(entry.path));
+  const loading = useFileStore((s) => s.loadingDirs.has(entry.path));
+  const childEntries = useFileStore((s) => (entry.type === "dir" ? s.dirCache[entry.path] : undefined));
+  const childError = useFileStore((s) => (entry.type === "dir" ? s.dirErrors[entry.path] : undefined));
+  const toggleDir = useFileStore((s) => s.toggleDir);
+  const openFile = useFileStore((s) => s.openFile);
+  const isActive = useFileStore((s) => s.currentPath === entry.path);
+  const highlighted = useFileStore(
+    (s) => entry.type === "dir" && s.highlightedDir === entry.path
+  );
+  const setHighlightedDir = useFileStore((s) => s.setHighlightedDir);
+  const dirBtnRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (!highlighted || !dirBtnRef.current) return;
+    dirBtnRef.current.scrollIntoView({ behavior: "smooth", block: "center" });
+    const t = setTimeout(() => setHighlightedDir(null), 1800);
+    return () => clearTimeout(t);
+  }, [highlighted, setHighlightedDir]);
+
+  const indent = { paddingLeft: depth * 14 + 8 };
+
+  if (entry.type === "dir") {
+    return (
+      <li>
+        <button
+          ref={dirBtnRef}
+          onClick={() => void toggleDir(entry.path)}
+          className={cn(
+            "flex w-full items-center gap-1.5 rounded px-2 py-1 text-left text-foreground transition-colors hover:bg-surface-raised",
+            highlighted && "brain-tree-highlight"
+          )}
+          style={indent}
+          aria-expanded={expanded}
+        >
+          <ChevronRight
+            className={cn(
+              "h-3 w-3 shrink-0 text-muted-foreground transition-transform",
+              expanded && "rotate-90"
+            )}
+          />
+          {expanded ? (
+            <FolderOpen className="h-4 w-4 shrink-0 text-primary/80" />
+          ) : (
+            <Folder className="h-4 w-4 shrink-0 text-muted-foreground" />
+          )}
+          <span className="truncate">{entry.name}</span>
+          {loading && <Loader2 className="ml-auto h-3 w-3 animate-spin text-muted-foreground" />}
+        </button>
+        {expanded && (
+          <ul>
+            {childError && (
+              <li className="flex items-center gap-1.5 px-2 py-1 text-xs text-destructive" style={{ paddingLeft: (depth + 1) * 14 + 8 }}>
+                <AlertCircle className="h-3 w-3" /> {childError}
+              </li>
+            )}
+            {childEntries?.map((child) => (
+              <TreeNode key={child.path} entry={child} depth={depth + 1} />
+            ))}
+          </ul>
+        )}
+      </li>
+    );
+  }
+
+  const Icon = iconForFile(entry.name);
+  return (
+    <li>
+      <button
+        onClick={() => void openFile(entry.path)}
+        className={cn(
+          "flex w-full items-center gap-1.5 rounded px-2 py-1 text-left transition-colors hover:bg-surface-raised",
+          isActive ? "bg-surface-raised text-primary" : "text-foreground/90"
+        )}
+        style={indent}
+      >
+        <span className="h-3 w-3 shrink-0" />
+        <Icon className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+        <span className="truncate">{entry.name}</span>
+      </button>
+    </li>
+  );
+}