@schlessera/brain-ui-react 0.4.0

package/src/components/files/file-viewer-binary.tsx

@@ -0,0 +1,63 @@
+import { FileWarning, Download } from "lucide-react";
+import type { FileContentResponse } from "@schlessera/brain-ui-sdk/protocol";
+import { API_BASE } from "../../lib/backend.js";
+
+export function FileViewerBinary({ content }: { content: FileContentResponse }) {
+  const isImage = content.mime?.startsWith("image/");
+  const rawUrl = `${API_BASE}/files/content?path=${encodeURIComponent(content.path)}&raw=1`;
+
+  if (isImage) {
+    const filename = content.path.split("/").pop() ?? content.path;
+    return (
+      <div className="flex h-full flex-col items-center justify-center gap-3 p-6">
+        <div className="flex max-h-full max-w-full overflow-auto rounded-lg border border-border bg-surface p-2">
+          <img src={rawUrl} alt={content.path} className="max-h-[70vh] max-w-full object-contain" />
+        </div>
+        <div className="flex flex-wrap items-center justify-center gap-2 text-xs text-muted-foreground">
+          <span>
+            {content.mime} · {formatSize(content.size)}
+          </span>
+          <span className="text-muted-foreground/40">·</span>
+          <a
+            href={rawUrl}
+            download={filename}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-1 rounded text-muted-foreground transition-colors hover:text-foreground"
+          >
+            <Download className="h-3 w-3" />
+            Download
+          </a>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="m-6 flex flex-col items-start gap-3 rounded-lg border border-border bg-surface p-6">
+      <div className="flex items-center gap-2 text-foreground">
+        <FileWarning className="h-5 w-5 text-muted-foreground" />
+        <span className="font-medium">Preview not available</span>
+      </div>
+      <div className="text-xs text-muted-foreground">
+        {content.mime ?? "unknown"} · {formatSize(content.size)}
+      </div>
+      <a
+        href={rawUrl}
+        download={content.path.split("/").pop() ?? content.path}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="mt-1 inline-flex items-center gap-1.5 rounded-md border border-border bg-background px-3 py-1.5 text-xs text-foreground transition-colors hover:bg-surface-raised"
+      >
+        <Download className="h-3.5 w-3.5" />
+        Download
+      </a>
+    </div>
+  );
+}
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / 1024 / 1024).toFixed(2)} MB`;
+}

package/src/components/files/file-viewer-html.tsx

@@ -0,0 +1,10 @@
+export function FileViewerHtml({ content }: { content: string }) {
+  return (
+    <iframe
+      sandbox=""
+      srcDoc={content}
+      className="h-full w-full border-0 bg-white"
+      title="HTML preview"
+    />
+  );
+}

package/src/components/files/file-viewer-markdown.tsx

@@ -0,0 +1,14 @@
+import { useMemo } from "react";
+import { BrainMarkdown } from "../chat/brain-markdown.js";
+import { splitFrontmatter } from "../../lib/frontmatter.js";
+import { FrontmatterPanel } from "./frontmatter-panel.js";
+
+export function FileViewerMarkdown({ content }: { content: string }) {
+  const { fields, body } = useMemo(() => splitFrontmatter(content), [content]);
+  return (
+    <div className="px-6 py-4">
+      {fields.length > 0 && <FrontmatterPanel fields={fields} />}
+      <BrainMarkdown content={body} className="brain-prose max-w-none" fileLinks />
+    </div>
+  );
+}

package/src/components/files/file-viewer-raw.tsx

@@ -0,0 +1,44 @@
+import { useState } from "react";
+import { Copy, Check } from "lucide-react";
+
+export function FileViewerRaw({ content, fileName }: { content: string; fileName: string }) {
+  const [copied, setCopied] = useState(false);
+  const [wrap, setWrap] = useState(false);
+
+  return (
+    <div className="group relative">
+      <div className="sticky top-0 z-10 flex items-center justify-end gap-2 border-b border-border/30 bg-surface/80 px-4 py-1.5 backdrop-blur">
+        <label className="flex cursor-pointer items-center gap-1.5 text-[11px] text-muted-foreground">
+          <input
+            type="checkbox"
+            checked={wrap}
+            onChange={(e) => setWrap(e.target.checked)}
+            className="h-3 w-3 accent-primary"
+          />
+          Wrap
+        </label>
+        <button
+          onClick={() => {
+            navigator.clipboard.writeText(content);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 1500);
+          }}
+          title="Copy file content"
+          className="flex items-center gap-1 rounded px-2 py-0.5 text-[11px] text-muted-foreground transition-colors hover:bg-surface-raised hover:text-foreground"
+        >
+          {copied ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
+          {copied ? "Copied" : "Copy"}
+        </button>
+      </div>
+      <pre
+        className={
+          wrap
+            ? "whitespace-pre-wrap break-words p-4 font-[family-name:var(--font-mono)] text-[13px] leading-relaxed text-foreground"
+            : "overflow-x-auto p-4 font-[family-name:var(--font-mono)] text-[13px] leading-relaxed text-foreground"
+        }
+      >
+        <code data-filename={fileName}>{content}</code>
+      </pre>
+    </div>
+  );
+}

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

@@ -0,0 +1,290 @@
+import { Loader2, AlertCircle, Eye, Code, Copy, Check, FolderOpen } from "lucide-react";
+import { useState } from "react";
+import { useFileStore } from "../../stores/file-store.js";
+import { cn } from "../../lib/utils.js";
+import { FileViewerMarkdown } from "./file-viewer-markdown.js";
+import { FileViewerHtml } from "./file-viewer-html.js";
+import { FileViewerRaw } from "./file-viewer-raw.js";
+import { FileViewerBinary } from "./file-viewer-binary.js";
+import { ShareMenu, type ShareOption } from "../share/share-menu.js";
+import { API_BASE } from "../../lib/backend.js";
+import { fetchAsFile, shareFile, renderAndShare } from "../../lib/share.js";
+import { splitFrontmatter } from "../../lib/frontmatter.js";
+import { stripMarkdown } from "../../lib/strip-markdown.js";
+import type { FileContentResponse } from "@schlessera/brain-ui-sdk/protocol";
+
+export function FileViewer() {
+  const currentPath = useFileStore((s) => s.currentPath);
+  const content = useFileStore((s) => s.currentContent);
+  const loading = useFileStore((s) => s.contentLoading);
+  const error = useFileStore((s) => s.contentError);
+  const viewMode = useFileStore((s) => s.viewMode);
+  const setViewMode = useFileStore((s) => s.setViewMode);
+  const setTreeExpanded = useFileStore((s) => s.setTreeExpanded);
+
+  if (!currentPath) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center gap-2 px-6 text-center text-sm text-muted-foreground">
+        <FolderOpen className="h-8 w-8 text-muted-foreground/40" />
+        <span>Select a file from the tree to view it.</span>
+      </div>
+    );
+  }
+
+  const fileName = currentPath.split("/").pop() ?? currentPath;
+  const previewAvailable = content?.kind === "markdown" || content?.kind === "html";
+
+  return (
+    <div className="flex h-full flex-col">
+      <Toolbar
+        fileName={fileName}
+        fullPath={currentPath}
+        size={content?.size}
+        viewMode={viewMode}
+        setViewMode={setViewMode}
+        previewAvailable={previewAvailable}
+        content={content ?? null}
+        onRevealInTree={() => setTreeExpanded(true)}
+      />
+
+      <div className="flex-1 overflow-auto">
+        {loading && (
+          <div className="flex items-center justify-center gap-2 py-8 text-sm text-muted-foreground">
+            <Loader2 className="h-4 w-4 animate-spin" />
+            Loading file...
+          </div>
+        )}
+        {error && (
+          <div className="m-4 flex items-start gap-2 rounded-lg border border-destructive/30 bg-destructive/5 p-4 text-sm text-destructive">
+            <AlertCircle className="mt-0.5 h-4 w-4 shrink-0" />
+            <span>{error}</span>
+          </div>
+        )}
+        {!loading && !error && content && <ViewerBody content={content} viewMode={viewMode} />}
+      </div>
+    </div>
+  );
+}
+
+function ViewerBody({ content, viewMode }: { content: NonNullable<ReturnType<typeof useFileStore.getState>["currentContent"]>; viewMode: "preview" | "raw" }) {
+  if (content.kind === "binary") {
+    return <FileViewerBinary content={content} />;
+  }
+  if (viewMode === "raw" || (content.kind !== "markdown" && content.kind !== "html")) {
+    return <FileViewerRaw content={content.content ?? ""} fileName={content.path} />;
+  }
+  if (content.kind === "markdown") {
+    return <FileViewerMarkdown content={content.content ?? ""} />;
+  }
+  return <FileViewerHtml content={content.content ?? ""} />;
+}
+
+function Toolbar({
+  fileName,
+  fullPath,
+  size,
+  viewMode,
+  setViewMode,
+  previewAvailable,
+  content,
+  onRevealInTree,
+}: {
+  fileName: string;
+  fullPath: string;
+  size?: number;
+  viewMode: "preview" | "raw";
+  setViewMode: (m: "preview" | "raw") => void;
+  previewAvailable: boolean;
+  content: FileContentResponse | null;
+  onRevealInTree: () => void;
+}) {
+  const [copied, setCopied] = useState(false);
+  const shareOptions = content ? buildFileShareOptions(content, fileName) : [];
+  return (
+    <div className="flex items-center gap-2 border-b border-border bg-surface px-4 py-2">
+      <button
+        onClick={onRevealInTree}
+        title="Reveal in tree"
+        className="rounded p-1 text-muted-foreground transition-colors hover:bg-surface-raised hover:text-foreground"
+      >
+        <FolderOpen className="h-3.5 w-3.5" />
+      </button>
+      <div className="min-w-0 flex-1">
+        <div className="truncate text-sm font-medium text-foreground" title={fullPath}>
+          {fileName}
+        </div>
+        <div className="truncate text-[10px] text-muted-foreground" title={fullPath}>
+          {fullPath}
+          {size !== undefined && <span className="ml-2">· {formatSize(size)}</span>}
+        </div>
+      </div>
+      <button
+        onClick={() => {
+          navigator.clipboard.writeText(fullPath);
+          setCopied(true);
+          setTimeout(() => setCopied(false), 1500);
+        }}
+        title="Copy path"
+        className="rounded p-1.5 text-muted-foreground transition-colors hover:bg-surface-raised hover:text-foreground"
+      >
+        {copied ? <Check className="h-3.5 w-3.5" /> : <Copy className="h-3.5 w-3.5" />}
+      </button>
+      {shareOptions.length > 0 && <ShareMenu options={shareOptions} title="Share" />}
+      {previewAvailable && (
+        <div className="flex items-center rounded-md border border-border bg-background">
+          <ModeButton active={viewMode === "preview"} onClick={() => setViewMode("preview")} title="Preview">
+            <Eye className="h-3.5 w-3.5" />
+          </ModeButton>
+          <ModeButton active={viewMode === "raw"} onClick={() => setViewMode("raw")} title="Raw">
+            <Code className="h-3.5 w-3.5" />
+          </ModeButton>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ModeButton({ active, onClick, title, children }: { active: boolean; onClick: () => void; title: string; children: React.ReactNode }) {
+  return (
+    <button
+      onClick={onClick}
+      title={title}
+      className={cn(
+        "flex h-7 w-7 items-center justify-center transition-colors",
+        active ? "bg-surface-raised text-primary" : "text-muted-foreground hover:text-foreground"
+      )}
+    >
+      {children}
+    </button>
+  );
+}
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / 1024 / 1024).toFixed(2)} MB`;
+}
+
+function buildFileShareOptions(content: FileContentResponse, fileName: string): ShareOption[] {
+  const rawUrl = `${API_BASE}/files/content?path=${encodeURIComponent(content.path)}&raw=1`;
+
+  // Single-action share for previewable images / PDFs: ship the bytes as-is.
+  if (content.kind === "binary") {
+    if (content.mime?.startsWith("image/") || content.mime === "application/pdf") {
+      return [
+        {
+          id: "file",
+          label: "Share file",
+          run: async () => {
+            const file = await fetchAsFile(rawUrl, fileName, content.mime);
+            return shareFile(file, { title: fileName });
+          },
+        },
+      ];
+    }
+    // Non-previewable binary: no share menu (user can still use Download link).
+    return [];
+  }
+
+  if (content.kind === "markdown") {
+    const md = content.content ?? "";
+    const { body } = splitFrontmatter(md);
+    return [
+      {
+        id: "md-file",
+        label: "Share as .md file",
+        hint: "Original markdown source",
+        run: async () => {
+          const file = new File([md], fileName.endsWith(".md") ? fileName : `${fileName}.md`, {
+            type: "text/markdown",
+          });
+          return shareFile(file, { title: fileName });
+        },
+      },
+      {
+        id: "md-text",
+        label: "Share body as plain text",
+        hint: "Frontmatter dropped, markdown stripped",
+        run: async () => {
+          const file = new File([stripMarkdown(body)], `${baseName(fileName)}.txt`, {
+            type: "text/plain",
+          });
+          return shareFile(file, { title: fileName });
+        },
+      },
+      {
+        id: "md-png",
+        label: "Share as image",
+        hint: "Rendered PNG snapshot",
+        run: () =>
+          renderAndShare({
+            content: body,
+            contentType: "markdown",
+            format: "png",
+            filename: baseName(fileName),
+            title: fileName,
+          }),
+      },
+      {
+        id: "md-pdf",
+        label: "Share as PDF",
+        hint: "Vector PDF, A4",
+        run: () =>
+          renderAndShare({
+            content: body,
+            contentType: "markdown",
+            format: "pdf",
+            filename: baseName(fileName),
+            title: fileName,
+          }),
+      },
+    ];
+  }
+
+  if (content.kind === "html") {
+    const html = content.content ?? "";
+    return [
+      {
+        id: "html-file",
+        label: "Share as .html file",
+        run: async () => {
+          const file = new File([html], fileName.endsWith(".html") ? fileName : `${fileName}.html`, {
+            type: "text/html",
+          });
+          return shareFile(file, { title: fileName });
+        },
+      },
+      {
+        id: "html-png",
+        label: "Share as image",
+        run: () =>
+          renderAndShare({
+            content: html,
+            contentType: "html",
+            format: "png",
+            filename: baseName(fileName),
+            title: fileName,
+          }),
+      },
+      {
+        id: "html-pdf",
+        label: "Share as PDF",
+        run: () =>
+          renderAndShare({
+            content: html,
+            contentType: "html",
+            format: "pdf",
+            filename: baseName(fileName),
+            title: fileName,
+          }),
+      },
+    ];
+  }
+
+  // Raw text / unknown: no share for V1 (user limited to previewable types).
+  return [];
+}
+
+function baseName(name: string): string {
+  return name.replace(/\.[a-z0-9]{1,8}$/i, "");
+}

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

@@ -0,0 +1,78 @@
+import { ChevronRight } from "lucide-react";
+import type { FrontmatterField } from "../../lib/frontmatter.js";
+import { useFileStore } from "../../stores/file-store.js";
+import { cn } from "../../lib/utils.js";
+
+export function FrontmatterPanel({ fields }: { fields: FrontmatterField[] }) {
+  const collapsed = useFileStore((s) => s.frontmatterCollapsed);
+  const toggle = useFileStore((s) => s.toggleFrontmatter);
+
+  if (fields.length === 0) return null;
+
+  return (
+    <div className="mb-4 overflow-hidden rounded-md border border-border/60 bg-surface/50">
+      <button
+        type="button"
+        onClick={toggle}
+        aria-expanded={!collapsed}
+        className="flex w-full items-center gap-2 px-3 py-1.5 text-left font-[family-name:var(--font-mono)] text-[11px] uppercase tracking-wider text-muted-foreground transition-colors hover:bg-surface-raised"
+      >
+        <ChevronRight
+          className={cn(
+            "h-3 w-3 transition-transform",
+            !collapsed && "rotate-90"
+          )}
+        />
+        <span>frontmatter</span>
+        <span className="text-muted-foreground/50">·</span>
+        <span>{fields.length} {fields.length === 1 ? "field" : "fields"}</span>
+        {collapsed && (
+          <span className="ml-auto truncate text-muted-foreground/40">
+            {fields.slice(0, 3).map((f) => f.key).join(", ")}
+            {fields.length > 3 ? "…" : ""}
+          </span>
+        )}
+      </button>
+
+      {!collapsed && (
+        <table className="w-full border-collapse text-xs">
+          <tbody>
+            {fields.map((f) => (
+              <tr
+                key={f.key}
+                className="border-t border-border/30 align-top first:border-t-0"
+              >
+                <th
+                  scope="row"
+                  className="w-32 max-w-[40%] whitespace-nowrap px-3 py-1.5 text-right font-[family-name:var(--font-mono)] font-normal text-muted-foreground"
+                >
+                  {f.key}
+                </th>
+                <td className="px-3 py-1.5 text-foreground/90">
+                  {f.list ? (
+                    <div className="flex flex-wrap gap-1">
+                      {f.list.map((item, i) => (
+                        <span
+                          key={`${item}-${i}`}
+                          className="rounded border border-border bg-background px-1.5 py-[1px] font-[family-name:var(--font-mono)] text-[11px] text-muted-foreground"
+                        >
+                          {item}
+                        </span>
+                      ))}
+                    </div>
+                  ) : (
+                    <span className="font-[family-name:var(--font-mono)] text-[11px] leading-relaxed">
+                      {f.value || (
+                        <span className="text-muted-foreground/40">—</span>
+                      )}
+                    </span>
+                  )}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </div>
+  );
+}

package/src/components/layout/app-shell.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+import { SideRail } from "./side-rail.js";
+import { MobileTabBar } from "./mobile-tab-bar.js";
+import { useChatStore, activeChat } from "../../stores/chat-store.js";
+import { cn } from "../../lib/utils.js";
+
+export function AppShell({ children }: { children: ReactNode }) {
+  const isStreaming = useChatStore((s) => activeChat(s).isStreaming);
+
+  return (
+    <div className="flex h-[100dvh] bg-background text-foreground">
+      <SideRail />
+      <div className="flex flex-1 flex-col overflow-hidden">
+        {/* Amber filament line */}
+        <div
+          className={cn("filament", isStreaming && "filament--active")}
+        />
+        <main className="flex flex-1 flex-col overflow-hidden pb-16 md:pb-0">
+          {children}
+        </main>
+      </div>
+      <MobileTabBar />
+    </div>
+  );
+}

package/src/components/layout/mobile-tab-bar.tsx

@@ -0,0 +1,54 @@
+import {
+  Brain,
+  Newspaper,
+  RefreshCw,
+  History,
+  KeyRound,
+  FolderTree,
+} from "lucide-react";
+import { useUIStore } from "../../stores/ui-store.js";
+import { cn } from "../../lib/utils.js";
+
+export function MobileTabBar() {
+  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);
+
+  return (
+    <nav className="md:hidden fixed bottom-0 inset-x-0 z-30 flex h-14 items-center justify-around border-t border-border bg-surface px-1 pb-[env(safe-area-inset-bottom)]">
+      <TabIcon icon={Brain} label="Chat" active />
+      <TabIcon icon={Newspaper} label="Brief" onClick={toggleWhatsupPanel} />
+      <TabIcon icon={FolderTree} label="Files" onClick={toggleFilePanel} />
+      <TabIcon icon={RefreshCw} label="Sync" onClick={toggleSyncPanel} />
+      <TabIcon icon={History} label="History" onClick={toggleSessionPanel} />
+      <TabIcon icon={KeyRound} label="Security" onClick={toggleSecurityPanel} />
+    </nav>
+  );
+}
+
+function TabIcon({
+  icon: Icon,
+  label,
+  active,
+  onClick,
+}: {
+  icon: typeof Brain;
+  label: string;
+  active?: boolean;
+  onClick?: () => void;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        "flex flex-col items-center gap-0.5 px-2 py-1 text-[10px]",
+        active ? "text-primary" : "text-muted-foreground"
+      )}
+    >
+      <Icon className="h-5 w-5" />
+      {label}
+    </button>
+  );
+}