@tangle-network/ui 1.0.1 → 4.1.0

package/src/files/file-preview.tsx

@@ -4,7 +4,7 @@
  * Renders any file type beautifully:
  * - PDF: embedded viewer
  * - CSV/XLSX: tabular preview
- * - Code (py/json/yaml/ts/js): line-numbered viewer
+ * - Code (py/json/yaml/ts/js): syntax-highlighted, line-numbered viewer
  * - Markdown: rendered prose
  * - Images: inline display
  * - Text: monospace preview
@@ -17,6 +17,14 @@ import {
 } from "lucide-react";
 import { cn } from "../lib/utils";
 import { Markdown } from "../markdown/markdown";
+import { CodeBlock, CopyButton } from "../markdown/code-block";
+import {
+  detectFileFormat,
+  fileExtension,
+  getCodeLanguage,
+  getFormatLabel,
+  type FileFormat,
+} from "./file-format";
 
 export interface FilePreviewProps {
   filename: string;
@@ -29,87 +37,33 @@ export interface FilePreviewProps {
   className?: string;
 }
 
-function getPreviewType(filename: string, mimeType?: string): string {
-  const ext = filename.split(".").pop()?.toLowerCase() || "";
-  if (mimeType?.startsWith("application/pdf") || ext === "pdf") return "pdf";
-  if (mimeType?.startsWith("image/") || ["png", "jpg", "jpeg", "gif", "svg", "webp"].includes(ext)) return "image";
-  if (["csv"].includes(ext)) return "csv";
-  if (["xlsx", "xls"].includes(ext)) return "spreadsheet";
-  if (["py", "ts", "js", "tsx", "jsx", "sh", "bash"].includes(ext) || ["profile", "bashrc", "bash_logout", "env", "gitignore"].includes(ext)) return "code";
-  if (["json"].includes(ext)) return "json";
-  if (["yaml", "yml"].includes(ext)) return "yaml";
-  if (["md", "markdown"].includes(ext)) return "markdown";
-  if (["txt", "log", "text"].includes(ext)) return "text";
-  
-  // If we have no known extension but we do have a text plain content payload, fallback to text rather than "unknown"
-  if (mimeType?.startsWith("text/plain")) return "text";
-  
-  return "unknown";
-}
-
-function getPreviewLabel(previewType: string) {
-  switch (previewType) {
-    case "pdf":
-      return "PDF";
-    case "image":
-      return "Image";
-    case "csv":
-      return "CSV";
-    case "spreadsheet":
-      return "Spreadsheet";
-    case "code":
-      return "Code";
-    case "json":
-      return "JSON";
-    case "yaml":
-      return "YAML";
-    case "markdown":
-      return "Markdown";
-    case "text":
-      return "Text";
-    default:
-      return "File";
-  }
-}
-
-function CodePreview({ content, filename }: { content: string; filename: string }) {
-  const lines = content.split("\n");
-  const language = filename.split(".").pop()?.toUpperCase() || "TXT";
+function CodePreview({
+  content,
+  filename,
+  format,
+}: {
+  content: string;
+  filename: string;
+  format: FileFormat;
+}) {
+  const lineCount = content.split("\n").length;
+  const language = getCodeLanguage(filename, format);
+  // Prefer the extension; for an extensionless file (e.g. one detected from its
+  // MIME type) fall back to the highlight language so the label stays meaningful.
+  const labelToken = fileExtension(filename) || language || "txt";
 
+  // Same theme-aware highlighter the chat markdown renderer uses, so code looks
+  // identical in an artifact pane and inline in a message.
   return (
-    <div className="relative bg-background rounded-[var(--radius-md)] border border-border overflow-hidden">
-      <div className="flex items-center justify-between gap-3 border-b border-border px-4 py-2.5">
-        <div className="flex gap-1.5">
-          <div className="w-3 h-3 rounded-full bg-[#FF5F57]" />
-          <div className="w-3 h-3 rounded-full bg-[#FEBC2E]" />
-          <div className="w-3 h-3 rounded-full bg-[#8E59FF]" />
-        </div>
-        <div className="ml-2 min-w-0 flex-1 truncate text-xs font-mono text-muted-foreground">
-          {filename}
-        </div>
-        <div className="inline-flex items-center gap-2 rounded-[var(--radius-full)] border border-border bg-card px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-muted-foreground">
-          <span>{language}</span>
-          <span className="h-1 w-1 rounded-full bg-[var(--border-hover)]" />
-          <span>{lines.length} lines</span>
-        </div>
-      </div>
-      <div className="overflow-auto max-h-[70vh]">
-        <table className="w-full">
-          <tbody>
-            {lines.map((line, i) => (
-              <tr key={i} className="hover:bg-accent">
-                <td className="text-right pr-4 pl-4 py-0 select-none text-muted-foreground text-xs font-mono w-10 align-top leading-[1.55]">
-                  {i + 1}
-                </td>
-                <td className="pr-4 py-0 font-mono text-[13px] text-foreground leading-[1.55] whitespace-pre">
-                  {line || " "}
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </div>
+    <CodeBlock
+      code={content}
+      language={language}
+      label={`${labelToken} · ${lineCount} lines`}
+      showLineNumbers
+      className="max-h-[70vh] overflow-auto"
+    >
+      <CopyButton text={content} />
+    </CodeBlock>
   );
 }
 
@@ -270,13 +224,13 @@ export function FilePreview({
   hideHeader = false,
   className,
 }: FilePreviewProps) {
-  const previewType = getPreviewType(filename, mimeType);
-  const previewLabel = getPreviewLabel(previewType);
+  const format: FileFormat = detectFileFormat(filename, mimeType);
+  const previewLabel = getFormatLabel(format);
   const hasRenderableSource =
     Boolean(content) ||
     Boolean(blobUrl) ||
-    previewType === "unknown" ||
-    previewType === "spreadsheet";
+    format === "unknown" ||
+    format === "spreadsheet";
 
   return (
     <div className={cn("flex flex-col h-full", className)}>
@@ -312,23 +266,23 @@ export function FilePreview({
       )}
 
       <div className="flex-1 overflow-auto p-3">
-        {previewType === "pdf" && blobUrl && <PdfPreview blobUrl={blobUrl} filename={filename} />}
-        {previewType === "image" && blobUrl && <ImagePreview src={blobUrl} filename={filename} />}
-        {previewType === "csv" && typeof content === "string" && <CsvPreview content={content} />}
-        {(previewType === "code" || previewType === "json" || previewType === "yaml") && typeof content === "string" && (
-          <CodePreview content={content} filename={filename} />
+        {format === "pdf" && blobUrl && <PdfPreview blobUrl={blobUrl} filename={filename} />}
+        {format === "image" && blobUrl && <ImagePreview src={blobUrl} filename={filename} />}
+        {format === "csv" && typeof content === "string" && <CsvPreview content={content} />}
+        {(format === "code" || format === "json" || format === "yaml") && typeof content === "string" && (
+          <CodePreview content={content} filename={filename} format={format} />
         )}
-        {previewType === "text" && typeof content === "string" && <TextPreview content={content} />}
-        {previewType === "markdown" && typeof content === "string" && <MarkdownPreview content={content} />}
-        {previewType === "spreadsheet" && (
+        {format === "text" && typeof content === "string" && <TextPreview content={content} />}
+        {format === "markdown" && typeof content === "string" && <MarkdownPreview content={content} />}
+        {format === "spreadsheet" && (
           <UnsupportedPreview
             filename={filename}
             title="Spreadsheet preview is not available in this surface"
             description="Download the workbook or convert it to CSV when you need an inline preview."
           />
         )}
-        {previewType === "unknown" && typeof content !== "string" && <EmptyPreview filename={filename} />}
-        {previewType === "unknown" && typeof content === "string" && <TextPreview content={content} />}
+        {format === "unknown" && typeof content !== "string" && <EmptyPreview filename={filename} />}
+        {format === "unknown" && typeof content === "string" && <TextPreview content={content} />}
         {!hasRenderableSource && typeof content !== "string" && (
           <UnsupportedPreview
             filename={filename}

package/src/files/index.ts

@@ -15,3 +15,11 @@ export {
 export { FilePreview, type FilePreviewProps } from "./file-preview";
 export { FileTabs, type FileTabsProps, type FileTabData } from "./file-tabs";
 export { FileArtifactPane, type FileArtifactPaneProps } from "./file-artifact-pane";
+export {
+  detectFileFormat,
+  fileExtension,
+  getCodeLanguage,
+  getFormatLabel,
+  getSyntaxLanguage,
+  type FileFormat,
+} from "./file-format";

package/src/index.ts

@@ -3,8 +3,6 @@ export * from "./chat";
 export * from "./run";
 export * from "./openui";
 export * from "./files";
-export { type ConnectionState } from "./editor";
-export * from "./editor";
 export * from "./markdown";
 export * from "./auth";
 export * from "./hooks";
@@ -12,3 +10,4 @@ export * from "./stores";
 export * from "./types";
 export * from "./utils";
 export * from "./tool-previews";
+export * from "./redaction";

package/src/markdown/code-block.test.tsx

@@ -0,0 +1,62 @@
+import { describe, it, expect } from "vitest";
+import { render } from "@testing-library/react";
+import { CodeBlock, CopyButton } from "./code-block";
+
+describe("CodeBlock", () => {
+  it("renders the code through the syntax highlighter", () => {
+    const { container } = render(<CodeBlock code={"const x = 1;"} language="typescript" />);
+    expect(container.querySelector("code")).not.toBeNull();
+  });
+
+  it("uses `label` as the header text, overriding `language`", () => {
+    const { getByText, queryByText } = render(
+      <CodeBlock code={"x"} language="typescript" label="config.ts" />,
+    );
+    expect(getByText("config.ts")).toBeInTheDocument();
+    expect(queryByText("typescript")).toBeNull();
+  });
+
+  it("falls back to `language` for the header when no `label` is given", () => {
+    const { getByText } = render(<CodeBlock code={"x"} language="python" />);
+    expect(getByText("python")).toBeInTheDocument();
+  });
+
+  it("renders no header when neither label nor language is set", () => {
+    const { container } = render(<CodeBlock code={"x"} />);
+    // The header is the only element carrying a bottom border.
+    expect(container.querySelector(".border-b")).toBeNull();
+  });
+
+  it("treats an explicit empty label as 'no header', even with a language", () => {
+    const { container, queryByText } = render(
+      <CodeBlock code={"x"} language="python" label="" />,
+    );
+    expect(container.querySelector(".border-b")).toBeNull();
+    expect(queryByText("python")).toBeNull();
+  });
+
+  it("places children in the header when a header is shown", () => {
+    const { container } = render(
+      <CodeBlock code={"x"} label="run.ts">
+        <CopyButton text="x" />
+      </CodeBlock>,
+    );
+    const copyButton = container.querySelector('button[title="Copy to clipboard"]');
+    expect(copyButton).not.toBeNull();
+    // Inside the bordered header, not the absolute hover overlay.
+    expect(copyButton?.closest(".border-b")).not.toBeNull();
+    expect(copyButton?.closest(".absolute")).toBeNull();
+  });
+
+  it("moves children to a hover overlay when no header is shown", () => {
+    const { container } = render(
+      <CodeBlock code={"x"}>
+        <CopyButton text="x" />
+      </CodeBlock>,
+    );
+    const copyButton = container.querySelector('button[title="Copy to clipboard"]');
+    expect(copyButton).not.toBeNull();
+    expect(copyButton?.closest(".absolute")).not.toBeNull();
+    expect(copyButton?.closest(".border-b")).toBeNull();
+  });
+});

package/src/markdown/code-block.tsx

@@ -74,6 +74,12 @@ function getSyntaxTheme(): { [key: string]: React.CSSProperties } {
 export interface CodeBlockProps extends HTMLAttributes<HTMLDivElement> {
   code: string;
   language?: string;
+  /**
+   * Header text. Defaults to `language`. Set this when the display name differs
+   * from the highlight.js language id — e.g. a file extension ("BASHRC") whose
+   * content highlights as a known language, or none.
+   */
+  label?: string;
   showLineNumbers?: boolean;
   /** Force light theme; defaults to dark */
   light?: boolean;
@@ -107,28 +113,29 @@ function useIsLightTheme(): boolean {
 }
 
 export const CodeBlock = memo(
-  ({ code, language, showLineNumbers = false, light: lightProp, className, children, ...props }: CodeBlockProps) => {
+  ({ code, language, label, showLineNumbers = false, light: lightProp, className, children, ...props }: CodeBlockProps) => {
     const isLight = useIsLightTheme();
     const light = lightProp ?? isLight;
     const theme = getSyntaxTheme();
     const bg = "bg-card border-border";
     const headerBg = light ? "bg-muted/50 border-border" : "bg-background border-border";
     const langColor = "text-muted-foreground";
+    const headerLabel = label ?? language;
 
     return (
       <div
         className={cn("group relative overflow-hidden rounded-lg border font-mono", bg, className)}
         {...props}
       >
-        {language && (
+        {headerLabel && (
           <div className={cn("flex items-center justify-between border-b px-3 py-1", headerBg)}>
             <span className={cn("text-[calc(var(--font-size-xs)-1px)] font-mono font-medium uppercase tracking-widest", langColor)}>
-              {language}
+              {headerLabel}
             </span>
             {children}
           </div>
         )}
-        {!language && children && (
+        {!headerLabel && children && (
           <div className="absolute right-2 top-2 z-10 flex items-center gap-2 opacity-0 transition-opacity group-hover:opacity-100">
             {children}
           </div>

package/src/nav/index.tsx

@@ -0,0 +1,34 @@
+import {
+  Link as RRLink,
+  NavLink as RRNavLink,
+  type LinkProps,
+  type NavLinkProps,
+} from "react-router";
+
+/**
+ * Navigation primitives that make agent-app products feel snappy by default.
+ *
+ * The dominant source of the "1–2s when I click through pages" latency in the
+ * fleet is NOT slow queries (route loaders' D1 indexes already cover their
+ * filters) — it is that every click is a COLD loader round-trip the user waits
+ * on, because bare `<Link>`s do no prefetching. React Router can fire the
+ * target route's loader on hover/focus (`prefetch="intent"`), overlapping the
+ * round-trip with the user's mouse travel so the transition feels instant.
+ *
+ * These wrappers default `prefetch="intent"` so a product gets that behaviour
+ * by importing the shared `<Link>` instead of remembering the flag on every
+ * nav element. The default is overridable — a caller that passes `prefetch`
+ * wins (the spread is applied after the default).
+ */
+
+/** `react-router` `<Link>` with `prefetch="intent"` on by default. */
+export function Link({ prefetch = "intent", ...props }: LinkProps) {
+  return <RRLink prefetch={prefetch} {...props} />;
+}
+
+/** `react-router` `<NavLink>` with `prefetch="intent"` on by default. */
+export function NavLink({ prefetch = "intent", ...props }: NavLinkProps) {
+  return <RRNavLink prefetch={prefetch} {...props} />;
+}
+
+export type { LinkProps, NavLinkProps } from "react-router";

package/src/redaction/index.ts

@@ -0,0 +1,7 @@
+export {
+  RedactedDocument,
+  type RedactedDocumentProps,
+  type RedactedDocumentData,
+  type RedactedDocSegment,
+  type RevealResult,
+} from "./redacted-document";

package/src/redaction/redacted-document.tsx

@@ -0,0 +1,150 @@
+import { useCallback, useState, type ReactNode } from "react";
+import { Eye, EyeOff, Loader2, ShieldAlert } from "lucide-react";
+import { cn } from "../lib/utils";
+
+/**
+ * Viewer for a server-produced redacted document. Renders text inline and each
+ * redacted span as a masked chip; clicking a chip asks the server to reveal that
+ * one span. The original plaintext is NEVER in the document the client holds —
+ * the chip carries only an id + kind; `onReveal` round-trips to the server, where
+ * `@tangle-network/agent-app/redact`'s `revealSpan` runs the authorization check
+ * and writes the audit trail. So authz + audit are server-truth; this is display.
+ *
+ * Structural types (no `@tangle-network/agent-app` dependency) — the viewer needs
+ * only `{ id, kind }` per span; the cipher stays server-side.
+ */
+
+export type RedactedDocSegment =
+  | { type: "text"; text: string }
+  | { type: "redacted"; id: string; kind: string };
+
+export interface RedactedDocumentData {
+  segments: RedactedDocSegment[];
+}
+
+export interface RevealResult {
+  ok: boolean;
+  value?: string;
+  /** e.g. `forbidden` | `not_found` when `ok` is false. */
+  reason?: string;
+}
+
+export interface RedactedDocumentProps {
+  document: RedactedDocumentData;
+  /** Reveal one span by id. Wire to a server route that calls agent-app's
+   *  `revealSpan` (authz + audit happen there). Resolves with the original. */
+  onReveal: (spanId: string) => Promise<RevealResult>;
+  /** Display label for a redaction kind (default: the kind, upper-cased). */
+  labelForKind?: (kind: string) => string;
+  className?: string;
+}
+
+type ChipState =
+  | { status: "masked" }
+  | { status: "loading" }
+  | { status: "revealed"; value: string }
+  | { status: "denied"; reason?: string };
+
+const defaultLabel = (kind: string) => kind.replace(/[-_]/g, " ").toUpperCase();
+
+function RedactedChip({
+  kind,
+  label,
+  onReveal,
+}: {
+  kind: string;
+  label: string;
+  onReveal: () => Promise<RevealResult>;
+}) {
+  const [state, setState] = useState<ChipState>({ status: "masked" });
+
+  const reveal = useCallback(async () => {
+    setState({ status: "loading" });
+    try {
+      const r = await onReveal();
+      setState(
+        r.ok && r.value !== undefined
+          ? { status: "revealed", value: r.value }
+          : { status: "denied", reason: r.reason },
+      );
+    } catch {
+      setState({ status: "denied", reason: "error" });
+    }
+  }, [onReveal]);
+
+  if (state.status === "revealed") {
+    return (
+      <button
+        type="button"
+        onClick={() => setState({ status: "masked" })}
+        title="Revealed — click to hide"
+        aria-label={`${label}: revealed, click to hide`}
+        className={cn(
+          "inline-flex items-center gap-1 rounded-[var(--radius-sm)] px-1 font-medium",
+          "bg-[color-mix(in_oklch,var(--color-warning,orange)_18%,transparent)] text-foreground ring-1 ring-warning/40",
+        )}
+      >
+        {state.value}
+        <EyeOff className="size-3 opacity-60" />
+      </button>
+    );
+  }
+
+  if (state.status === "denied") {
+    return (
+      <span
+        title={`Restricted${state.reason ? ` (${state.reason})` : ""}`}
+        aria-label={`${label}: restricted`}
+        className="inline-flex items-center gap-1 rounded-[var(--radius-sm)] bg-muted px-1 text-muted-foreground"
+      >
+        <ShieldAlert className="size-3" /> {label}
+      </span>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      disabled={state.status === "loading"}
+      onClick={reveal}
+      title={`${label} — click to reveal`}
+      aria-label={`${label} redacted, click to reveal`}
+      className={cn(
+        "inline-flex items-center gap-1 rounded-[var(--radius-sm)] px-1 font-medium tracking-wide",
+        "bg-muted text-muted-foreground hover:bg-muted/80 hover:text-foreground transition-colors",
+        "cursor-pointer select-none",
+      )}
+    >
+      {state.status === "loading" ? (
+        <Loader2 className="size-3 animate-spin" />
+      ) : (
+        <Eye className="size-3 opacity-60" />
+      )}
+      <span aria-hidden>{"███"}</span> {label}
+    </button>
+  );
+}
+
+export function RedactedDocument({
+  document,
+  onReveal,
+  labelForKind = defaultLabel,
+  className,
+}: RedactedDocumentProps): ReactNode {
+  return (
+    <div className={cn("whitespace-pre-wrap break-words leading-relaxed", className)}>
+      {document.segments.map((seg, i) =>
+        seg.type === "text" ? (
+          <span key={i}>{seg.text}</span>
+        ) : (
+          <RedactedChip
+            key={seg.id}
+            kind={seg.kind}
+            label={labelForKind(seg.kind)}
+            onReveal={() => onReveal(seg.id)}
+          />
+        ),
+      )}
+    </div>
+  );
+}

package/src/tool-previews/write-file-preview.tsx

@@ -1,6 +1,7 @@
 import { memo } from "react";
 import { FileEdit } from "lucide-react";
 import type { ToolPart } from "../types/parts";
+import { getSyntaxLanguage } from "../files/file-format";
 import { CodeBlock, CopyButton } from "../markdown/code-block";
 import { PreviewCard, PreviewError, PreviewLoading } from "./preview-primitives";
 
@@ -18,35 +19,6 @@ function extractWriteContent(
   return { path, content };
 }
 
-function getLanguageFromPath(path: string): string | undefined {
-  const ext = path.split(".").pop()?.toLowerCase();
-  const map: Record<string, string> = {
-    ts: "typescript",
-    tsx: "tsx",
-    js: "javascript",
-    jsx: "jsx",
-    rs: "rust",
-    py: "python",
-    go: "go",
-    rb: "ruby",
-    json: "json",
-    yaml: "yaml",
-    yml: "yaml",
-    toml: "toml",
-    md: "markdown",
-    css: "css",
-    scss: "scss",
-    html: "html",
-    sh: "bash",
-    bash: "bash",
-    zsh: "bash",
-    sql: "sql",
-    sol: "solidity",
-    proto: "protobuf",
-  };
-  return ext ? map[ext] : undefined;
-}
-
 /**
  * Preview for file write/create operations.
  * Shows file path, line count, and the written content.
@@ -56,7 +28,7 @@ export const WriteFilePreview = memo(({ part }: WriteFilePreviewProps) => {
   if (!write) return null;
 
   const lineCount = write.content.split("\n").length;
-  const language = getLanguageFromPath(write.path);
+  const language = getSyntaxLanguage(write.path);
 
   return (
     <PreviewCard