@schlessera/brain-ui-react 0.4.0

package/src/components/settings/passkey-panel.tsx

@@ -0,0 +1,281 @@
+import { useEffect, useState } from "react";
+import {
+  Check,
+  Cloud,
+  Fingerprint,
+  Loader2,
+  LogOut,
+  Pencil,
+  Plus,
+  Trash2,
+  X,
+} from "lucide-react";
+import type { PasskeySummary } from "@schlessera/brain-ui-sdk/protocol";
+import { api } from "../../lib/api-client.js";
+import { isUserCancel, registerPasskey, supportsPasskeys } from "../../lib/passkeys.js";
+import { SlidePanel } from "../layout/slide-panel.js";
+import { cn } from "../../lib/utils.js";
+
+/**
+ * Passkey management + sign out. Registration requires the current session
+ * (routes are behind the auth guard); credentials are RP-scoped, so entries
+ * registered on another hostname are badged and only useful there.
+ */
+export function PasskeyPanel({
+  open,
+  onClose,
+}: {
+  open: boolean;
+  onClose: () => void;
+}) {
+  const [credentials, setCredentials] = useState<PasskeySummary[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [passkeyMode, setPasskeyMode] = useState(true);
+
+  const webAuthnSupported = supportsPasskeys();
+
+  async function refresh() {
+    setLoading(true);
+    try {
+      const data = await api.passkeyList();
+      setCredentials(data.credentials);
+      setPasskeyMode(true);
+    } catch {
+      // 400 = server not in password mode; anything else degrades the same way.
+      setPasskeyMode(false);
+      setCredentials([]);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    if (open) {
+      setError(null);
+      void refresh();
+    }
+  }, [open]);
+
+  async function onAdd() {
+    if (busy) return;
+    setBusy(true);
+    setError(null);
+    try {
+      await registerPasskey();
+      await refresh();
+    } catch (err) {
+      if (!isUserCancel(err)) {
+        setError(err instanceof Error ? err.message : "Registration failed");
+      }
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function onDelete(id: string) {
+    if (!window.confirm("Remove this passkey? You can't undo this.")) return;
+    setError(null);
+    try {
+      await api.passkeyDelete(id);
+      setCredentials((rows) => rows.filter((row) => row.id !== id));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Delete failed");
+    }
+  }
+
+  async function onRename(id: string, label: string) {
+    setError(null);
+    try {
+      await api.passkeyRename(id, label);
+      setCredentials((rows) =>
+        rows.map((row) => (row.id === id ? { ...row, label } : row))
+      );
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Rename failed");
+    }
+  }
+
+  async function onSignOut() {
+    try {
+      await api.logout();
+    } finally {
+      window.location.reload();
+    }
+  }
+
+  return (
+    <SlidePanel open={open} onClose={onClose} title="Security">
+      <div className="flex h-full flex-col">
+        <div className="flex-1 overflow-y-auto p-4">
+          <h3 className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+            Passkeys
+          </h3>
+          <p className="mt-1 text-xs text-muted-foreground">
+            Sign in with Face ID, fingerprint, or a security key instead of the
+            password. Passkeys only work on the site they were added on.
+          </p>
+
+          {loading ? (
+            <div className="mt-6 flex justify-center">
+              <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+            </div>
+          ) : (
+            <ul className="mt-4 flex flex-col gap-2">
+              {credentials.map((credential) => (
+                <PasskeyRow
+                  key={credential.id}
+                  credential={credential}
+                  onDelete={() => onDelete(credential.id)}
+                  onRename={(label) => onRename(credential.id, label)}
+                />
+              ))}
+              {credentials.length === 0 && passkeyMode && (
+                <li className="rounded-lg border border-dashed border-border-subtle p-4 text-center text-xs text-muted-foreground">
+                  No passkeys yet.
+                </li>
+              )}
+            </ul>
+          )}
+
+          {error && (
+            <p role="alert" className="mt-3 text-xs text-destructive">
+              {error}
+            </p>
+          )}
+
+          {passkeyMode && webAuthnSupported ? (
+            <button
+              onClick={onAdd}
+              disabled={busy}
+              className="mt-4 flex w-full 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"
+            >
+              {busy ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <Plus className="h-4 w-4" />
+              )}
+              Add a passkey
+            </button>
+          ) : (
+            <p className="mt-4 text-xs text-muted-foreground">
+              {passkeyMode
+                ? "This browser does not support passkeys."
+                : "Passkeys need password auth mode on the server."}
+            </p>
+          )}
+        </div>
+
+        {/* Sign out */}
+        <div className="border-t border-border p-4">
+          <button
+            onClick={onSignOut}
+            className="flex w-full 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-destructive hover:text-destructive"
+          >
+            <LogOut className="h-4 w-4" />
+            Sign out
+          </button>
+        </div>
+      </div>
+    </SlidePanel>
+  );
+}
+
+function PasskeyRow({
+  credential,
+  onDelete,
+  onRename,
+}: {
+  credential: PasskeySummary;
+  onDelete: () => void;
+  onRename: (label: string) => void;
+}) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(credential.label);
+  const foreignRp =
+    typeof window !== "undefined" && credential.rpId !== window.location.hostname;
+
+  const displayName =
+    credential.label ||
+    `Passkey · ${new Date(credential.createdAt).toLocaleDateString()}`;
+
+  function commit() {
+    setEditing(false);
+    const label = draft.trim();
+    if (label !== credential.label) onRename(label);
+  }
+
+  return (
+    <li className="rounded-lg border border-border-subtle bg-surface p-3">
+      <div className="flex items-center gap-2">
+        <Fingerprint className="h-4 w-4 shrink-0 text-primary" />
+        {editing ? (
+          <span className="flex flex-1 items-center gap-1">
+            <input
+              autoFocus
+              value={draft}
+              onChange={(e) => setDraft(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") commit();
+                if (e.key === "Escape") setEditing(false);
+              }}
+              className="w-full rounded border border-border-subtle bg-background px-2 py-0.5 text-sm text-foreground outline-none focus:border-primary"
+            />
+            <button onClick={commit} title="Save" className="p-1 text-muted-foreground hover:text-foreground">
+              <Check className="h-3.5 w-3.5" />
+            </button>
+            <button onClick={() => setEditing(false)} title="Cancel" className="p-1 text-muted-foreground hover:text-foreground">
+              <X className="h-3.5 w-3.5" />
+            </button>
+          </span>
+        ) : (
+          <span className="flex-1 truncate text-sm text-foreground">{displayName}</span>
+        )}
+        {!editing && (
+          <>
+            <button
+              onClick={() => {
+                setDraft(credential.label);
+                setEditing(true);
+              }}
+              title="Rename"
+              className="p-1 text-muted-foreground transition-colors hover:text-foreground"
+            >
+              <Pencil className="h-3.5 w-3.5" />
+            </button>
+            <button
+              onClick={onDelete}
+              title="Remove"
+              className="p-1 text-muted-foreground transition-colors hover:text-destructive"
+            >
+              <Trash2 className="h-3.5 w-3.5" />
+            </button>
+          </>
+        )}
+      </div>
+      <div className="mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1 pl-6 text-[11px] text-muted-foreground">
+        {credential.backedUp && (
+          <span className="flex items-center gap-1">
+            <Cloud className="h-3 w-3" /> Synced
+          </span>
+        )}
+        {foreignRp && (
+          <span
+            className={cn(
+              "rounded bg-surface-raised px-1.5 py-0.5 font-medium text-foreground/70"
+            )}
+            title={`Registered on ${credential.rpId}; only usable there.`}
+          >
+            {credential.rpId}
+          </span>
+        )}
+        <span>
+          {credential.lastUsedAt
+            ? `Last used ${new Date(credential.lastUsedAt).toLocaleDateString()}`
+            : `Added ${new Date(credential.createdAt).toLocaleDateString()}`}
+        </span>
+      </div>
+    </li>
+  );
+}

package/src/components/share/share-menu.tsx

@@ -0,0 +1,121 @@
+import { useEffect, useRef, useState } from "react";
+import { Share2, Loader2, Check, AlertCircle } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+
+export interface ShareOption {
+  id: string;
+  label: string;
+  /** Optional short hint shown below the label. */
+  hint?: string;
+  /** Async action: returns true on success, false on user-cancel. */
+  run: () => Promise<boolean>;
+}
+
+interface ShareMenuProps {
+  options: ShareOption[];
+  /** Aria label / tooltip for the trigger button. */
+  title?: string;
+  /** When provided, override the default icon button with a custom trigger. */
+  className?: string;
+  /** Optional render-prop for a custom trigger; receives the click handler. */
+  renderTrigger?: (props: { onClick: () => void; busy: boolean }) => React.ReactNode;
+}
+
+type Status = "idle" | "busy" | "done" | "error";
+
+export function ShareMenu({ options, title = "Share", className, renderTrigger }: ShareMenuProps) {
+  const [open, setOpen] = useState(false);
+  const [status, setStatus] = useState<Status>("idle");
+  const [error, setError] = useState<string | null>(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const onDocClick = (e: MouseEvent) => {
+      if (!wrapperRef.current?.contains(e.target as Node)) setOpen(false);
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", onDocClick);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDocClick);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+
+  // If there's only one option, the trigger should fire it directly.
+  const single = options.length === 1 ? options[0] : null;
+
+  const runOption = async (opt: ShareOption) => {
+    setOpen(false);
+    setStatus("busy");
+    setError(null);
+    try {
+      await opt.run();
+      setStatus("done");
+      setTimeout(() => setStatus("idle"), 1200);
+    } catch (err) {
+      console.error("[share-menu]", err);
+      setError(err instanceof Error ? err.message : "Share failed");
+      setStatus("error");
+      setTimeout(() => setStatus("idle"), 3000);
+    }
+  };
+
+  const handleTrigger = () => {
+    if (status === "busy") return;
+    if (single) {
+      void runOption(single);
+      return;
+    }
+    setOpen((v) => !v);
+  };
+
+  const icon =
+    status === "busy" ? (
+      <Loader2 className="h-3.5 w-3.5 animate-spin" />
+    ) : status === "done" ? (
+      <Check className="h-3.5 w-3.5" />
+    ) : status === "error" ? (
+      <AlertCircle className="h-3.5 w-3.5 text-destructive" />
+    ) : (
+      <Share2 className="h-3.5 w-3.5" />
+    );
+
+  return (
+    <div ref={wrapperRef} className={cn("relative inline-flex", className)}>
+      {renderTrigger ? (
+        renderTrigger({ onClick: handleTrigger, busy: status === "busy" })
+      ) : (
+        <button
+          onClick={handleTrigger}
+          disabled={status === "busy"}
+          title={error ?? title}
+          className="rounded p-1.5 text-muted-foreground transition-colors hover:bg-surface-raised hover:text-foreground disabled:opacity-50"
+        >
+          {icon}
+        </button>
+      )}
+      {open && !single && (
+        <div
+          role="menu"
+          className="absolute right-0 top-full z-50 mt-1 min-w-[12rem] overflow-hidden rounded-lg border border-border bg-background py-1 shadow-lg"
+        >
+          {options.map((opt) => (
+            <button
+              key={opt.id}
+              role="menuitem"
+              onClick={() => void runOption(opt)}
+              className="block w-full px-3 py-2 text-left text-xs text-foreground transition-colors hover:bg-surface-raised"
+            >
+              <div className="font-medium">{opt.label}</div>
+              {opt.hint && <div className="text-[10px] text-muted-foreground">{opt.hint}</div>}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/voice/dictation-sheet.tsx

@@ -0,0 +1,217 @@
+import { useEffect, useRef } from "react";
+import { Mic, X } from "lucide-react";
+import { useVoiceStore } from "../../voice/voice-store.js";
+import { cn } from "../../lib/utils.js";
+
+export function DictationSheet({
+  open,
+  onStop,
+  onCancel,
+}: {
+  open: boolean;
+  onStop: () => void;
+  onCancel: () => void;
+}) {
+  const partial = useVoiceStore((s) => s.partial);
+  const finalText = useVoiceStore((s) => s.finalText);
+  const audioLevel = useVoiceStore((s) => s.audioLevel);
+  const error = useVoiceStore((s) => s.error);
+  const draining = useVoiceStore((s) => s.draining);
+  // Mic still opening — the session is being fetched, so capture isn't live
+  // yet. Drives the honest "Connecting…" state instead of claiming "Listening".
+  const connecting = useVoiceStore((s) => s.connecting);
+  const providerId = useVoiceStore((s) => s.providerId);
+  // Text already under review — the current capture appends to it on stop,
+  // so show it dimmed as the lead-in.
+  const reviewText = useVoiceStore((s) => s.reviewText);
+  const transcriptRef = useRef<HTMLDivElement>(null);
+
+  const statusLabel = connecting
+    ? "Connecting…"
+    : draining
+      ? "Finalizing…"
+      : "Listening";
+  // Surface the active provider so a silent fallback to browser speech (which
+  // streams mic audio to Google on Chrome) isn't invisible.
+  const providerNote = providerNoteFor(providerId);
+
+  // Keep the newest words in view — the live transcript grows past the
+  // sheet's height quickly when dictating longer prompts.
+  useEffect(() => {
+    const el = transcriptRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [finalText, partial, open]);
+
+  // Lock body scroll while open
+  useEffect(() => {
+    if (!open) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [open]);
+
+  // Escape cancels
+  useEffect(() => {
+    if (!open) return;
+    const h = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onCancel();
+    };
+    document.addEventListener("keydown", h);
+    return () => document.removeEventListener("keydown", h);
+  }, [open, onCancel]);
+
+  if (!open) return null;
+
+  return (
+    <>
+      {/* Backdrop — tap-to-stop is intentional: huge target. Disabled while
+          draining so a stray tap doesn't double-trigger. */}
+      <div
+        className="fixed inset-0 z-40 bg-black/60 backdrop-blur-sm"
+        onClick={() => { if (!draining) onStop(); }}
+      />
+
+      {/* Sheet */}
+      <div
+        className={cn(
+          "fixed inset-x-0 bottom-0 z-50 flex flex-col rounded-t-3xl border-t border-border bg-surface shadow-[0_-16px_48px_rgba(0,0,0,0.5)]",
+          "max-h-[60vh] min-h-[40vh]",
+          "animate-in slide-in-from-bottom duration-200"
+        )}
+        // Don't propagate to backdrop
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between border-b border-border/50 px-5 py-3">
+          <div className="flex items-center gap-2">
+            <span className="relative inline-flex h-2 w-2">
+              {/* Pulse only once capture is actually live — a "connecting" dot
+                  must not imply the mic is already open. */}
+              {!connecting && (
+                <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-75" />
+              )}
+              <span
+                className={cn(
+                  "relative inline-flex h-2 w-2 rounded-full",
+                  connecting ? "bg-muted-foreground/50" : "bg-primary"
+                )}
+              />
+            </span>
+            <span className="font-[family-name:var(--font-mono)] text-xs uppercase tracking-widest text-muted-foreground">
+              {statusLabel}
+            </span>
+          </div>
+          <button
+            onClick={onCancel}
+            disabled={draining}
+            title="Cancel"
+            className="rounded-lg p-2 text-muted-foreground hover:bg-surface-raised hover:text-foreground disabled:opacity-30"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+
+        {/* Active-provider note — subtle for Deepgram, amber for the browser
+            speech fallback whose audio leaves the device. */}
+        {providerNote && !error && (
+          <div
+            className={cn(
+              "px-5 pt-2 text-center text-[11px]",
+              providerNote.warn
+                ? "text-primary/90"
+                : "text-muted-foreground/50"
+            )}
+          >
+            {providerNote.text}
+          </div>
+        )}
+
+        {/* Waveform */}
+        <div className="flex items-center justify-center px-6 py-4">
+          <Waveform level={audioLevel} />
+        </div>
+
+        {/* Transcript */}
+        <div ref={transcriptRef} className="flex-1 overflow-y-auto px-6 pb-6">
+          {error ? (
+            <div className="rounded-lg bg-destructive/10 p-4 text-sm text-destructive">
+              {error}
+            </div>
+          ) : (
+            <p className="text-base leading-relaxed">
+              {reviewText && (
+                <span className="text-muted-foreground/50">{reviewText} </span>
+              )}
+              <span className="text-foreground">{finalText}</span>
+              {finalText && partial && " "}
+              <span className="text-muted-foreground/60">{partial}</span>
+              {!reviewText && !finalText && !partial && (
+                <span className="text-muted-foreground/40">
+                  Speak to start...
+                </span>
+              )}
+            </p>
+          )}
+        </div>
+
+        {/* Big stop button — thumb-friendly */}
+        <div className="border-t border-border/50 p-4">
+          <button
+            onClick={onStop}
+            disabled={draining}
+            className="flex h-14 w-full items-center justify-center gap-3 rounded-xl bg-primary text-primary-foreground transition-all duration-150 hover:brightness-110 active:scale-[0.99] disabled:opacity-60 disabled:cursor-progress"
+          >
+            <Mic className="h-5 w-5" />
+            <span className="text-sm font-semibold uppercase tracking-wider">
+              {draining ? "Finalizing…" : "Done"}
+            </span>
+          </button>
+          <p className="mt-2 text-center text-[11px] text-muted-foreground/50">
+            {draining
+              ? "Waiting for the last words…"
+              : "Tap anywhere outside to stop"}
+          </p>
+        </div>
+      </div>
+    </>
+  );
+}
+
+/** Human-readable note for the active speech provider, or null if unknown. */
+function providerNoteFor(
+  providerId: string | null
+): { text: string; warn: boolean } | null {
+  switch (providerId) {
+    case "deepgram":
+      return { text: "via Deepgram", warn: false };
+    case "webspeech":
+      // Browser speech (Chrome) streams mic audio to Google — call it out.
+      return { text: "via browser speech · audio goes to Google", warn: true };
+    case null:
+      return null;
+    default:
+      return { text: `via ${providerId}`, warn: false };
+  }
+}
+
+function Waveform({ level }: { level: number }) {
+  // Render 16 bars whose height is driven by current level + per-bar phase.
+  const bars = 16;
+  return (
+    <div className="flex h-16 items-center gap-1.5">
+      {Array.from({ length: bars }).map((_, i) => {
+        const phase = (i / bars) * Math.PI;
+        const offset = (Math.sin(phase + Date.now() / 200) + 1) / 2;
+        const h = 8 + level * 56 * (0.4 + 0.6 * offset);
+        return (
+          <span
+            key={i}
+            style={{ height: `${h}px` }}
+            className="w-1.5 rounded-full bg-primary transition-[height] duration-75 ease-linear"
+          />
+        );
+      })}
+    </div>
+  );
+}

package/src/components/voice/mic-button.tsx

@@ -0,0 +1,31 @@
+import { Mic } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+
+export function MicButton({
+  active,
+  disabled,
+  onTap,
+}: {
+  active: boolean;
+  disabled?: boolean;
+  onTap: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onTap}
+      disabled={disabled}
+      title={active ? "Stop dictation" : "Voice dictation"}
+      aria-label={active ? "Stop dictation" : "Voice dictation"}
+      className={cn(
+        "flex h-8 w-8 items-center justify-center rounded-lg transition-all duration-150",
+        active
+          ? "bg-primary text-primary-foreground animate-pulse"
+          : "text-muted-foreground hover:bg-surface-raised hover:text-foreground",
+        disabled && "opacity-30 cursor-not-allowed"
+      )}
+    >
+      <Mic className="h-4 w-4" />
+    </button>
+  );
+}