@tangle-network/ui 1.0.1 → 4.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "1.0.1",
+  "version": "4.1.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -96,6 +96,11 @@
       "types": "./dist/tool-previews.d.ts",
       "import": "./dist/tool-previews.js",
       "default": "./dist/tool-previews.js"
+    },
+    "./nav": {
+      "types": "./dist/nav.d.ts",
+      "import": "./dist/nav.js",
+      "default": "./dist/nav.js"
     }
   },
   "dependencies": {
@@ -126,7 +131,8 @@
   "peerDependencies": {
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
-    "@tangle-network/brand": "^0.3.0"
+    "react-router": "^7",
+    "@tangle-network/brand": "^0.5.0"
   },
   "peerDependenciesMeta": {
     "@nanostores/react": {
@@ -158,6 +164,9 @@
     },
     "yjs": {
       "optional": true
+    },
+    "react-router": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -177,7 +186,8 @@
     "@storybook/react": "^8.6.18",
     "tsup": "^8.3.5",
     "typescript": "^5.6.0",
-    "yjs": "^13.6.0"
+    "yjs": "^13.6.0",
+    "react-router": "^7"
   },
   "keywords": [
     "tangle",

package/src/files/file-artifact-pane.tsx

@@ -6,6 +6,7 @@ import {
   type DocumentEditorPaneCollaborationConfig,
 } from "../editor/document-editor-pane";
 import { ArtifactPane, type ArtifactPaneProps } from "../primitives/artifact-pane";
+import { detectFileFormat } from "./file-format";
 import { FilePreview, type FilePreviewProps } from "./file-preview";
 import { FileTabs, type FileTabData } from "./file-tabs";
 
@@ -79,9 +80,8 @@ export function FileArtifactPane({
     />
   ) : undefined;
   const isMarkdown =
-    mimeType === "text/markdown" ||
-    filename.toLowerCase().endsWith(".md") ||
-    path?.toLowerCase().endsWith(".md");
+    detectFileFormat(filename, mimeType) === "markdown" ||
+    (path ? detectFileFormat(path, mimeType) === "markdown" : false);
   const isEditableMarkdown = isMarkdown && editor?.enabled;
   const headerActions = (
     <>

package/src/files/file-format.test.ts

@@ -0,0 +1,176 @@
+import { describe, it, expect } from "vitest";
+import {
+  detectFileFormat,
+  fileExtension,
+  getCodeLanguage,
+  getFormatLabel,
+  getSyntaxLanguage,
+} from "./file-format";
+
+describe("detectFileFormat", () => {
+  it("detects by extension", () => {
+    expect(detectFileFormat("report.pdf")).toBe("pdf");
+    expect(detectFileFormat("photo.PNG")).toBe("image");
+    expect(detectFileFormat("data.csv")).toBe("csv");
+    expect(detectFileFormat("book.xlsx")).toBe("spreadsheet");
+    expect(detectFileFormat("legacy.xls")).toBe("spreadsheet");
+    expect(detectFileFormat("main.py")).toBe("code");
+    expect(detectFileFormat("app.tsx")).toBe("code");
+    expect(detectFileFormat("config.json")).toBe("json");
+    expect(detectFileFormat("compose.yaml")).toBe("yaml");
+    expect(detectFileFormat("compose.yml")).toBe("yaml");
+    expect(detectFileFormat("README.md")).toBe("markdown");
+    expect(detectFileFormat("notes.markdown")).toBe("markdown");
+    expect(detectFileFormat("output.log")).toBe("text");
+  });
+
+  it("treats shell dotfiles as code", () => {
+    expect(detectFileFormat(".bashrc")).toBe("code");
+    expect(detectFileFormat(".profile")).toBe("code");
+    expect(detectFileFormat(".gitignore")).toBe("code");
+  });
+
+  it("routes every highlightable extension to the code viewer", () => {
+    // detectFileFormat must stay in sync with getSyntaxLanguage — anything we
+    // can highlight (and that has no dedicated format) renders as code, not text.
+    for (const file of [
+      "main.rs",
+      "server.go",
+      "app.rb",
+      "styles.css",
+      "theme.scss",
+      "index.html",
+      "Cargo.toml",
+      "query.sql",
+      "Token.sol",
+      "schema.proto",
+      "module.mjs",
+      "legacy.cjs",
+      "deploy.zsh",
+    ]) {
+      expect(detectFileFormat(file)).toBe("code");
+      expect(getSyntaxLanguage(file)).toBeDefined();
+    }
+  });
+
+  it("keeps formats with a dedicated renderer out of the code viewer", () => {
+    expect(detectFileFormat("config.json")).toBe("json");
+    expect(detectFileFormat("compose.yml")).toBe("yaml");
+    expect(detectFileFormat("README.md")).toBe("markdown");
+  });
+
+  it("prefers MIME type when it is more specific", () => {
+    expect(detectFileFormat("file", "application/pdf")).toBe("pdf");
+    expect(detectFileFormat("blob", "image/png")).toBe("image");
+    expect(detectFileFormat("CHANGELOG", "text/markdown")).toBe("markdown");
+    expect(detectFileFormat("noext", "text/plain")).toBe("text");
+  });
+
+  it("falls back to unknown when nothing matches", () => {
+    expect(detectFileFormat("mystery.bin")).toBe("unknown");
+    expect(detectFileFormat("noextension")).toBe("unknown");
+  });
+
+  it("does not classify a dotless basename that happens to spell an extension", () => {
+    // A file literally named "pdf"/"json" has no extension — it must not be
+    // treated as that format (e.g. a pdf with no blobUrl renders empty).
+    expect(detectFileFormat("pdf")).toBe("unknown");
+    expect(detectFileFormat("json")).toBe("unknown");
+    expect(detectFileFormat("csv")).toBe("unknown");
+  });
+
+  it("lets a concrete extension win over a generic text/plain MIME", () => {
+    expect(detectFileFormat("config.json", "text/plain")).toBe("json");
+    expect(detectFileFormat("main.py", "text/plain")).toBe("code");
+  });
+
+  it("detects structured-data MIME types on generically-named files", () => {
+    expect(detectFileFormat("data", "application/json")).toBe("json");
+    expect(detectFileFormat("records", "text/csv")).toBe("csv");
+    expect(detectFileFormat("export", "application/csv")).toBe("csv");
+    expect(detectFileFormat("config", "application/yaml")).toBe("yaml");
+    expect(detectFileFormat("feed", "application/x-yaml")).toBe("yaml");
+    expect(detectFileFormat("feed", "text/yaml")).toBe("yaml");
+  });
+
+  it("ignores MIME charset parameters", () => {
+    expect(detectFileFormat("data", "application/json; charset=utf-8")).toBe("json");
+    expect(detectFileFormat("blob", "IMAGE/PNG")).toBe("image");
+  });
+
+  it("treats an authoritative MIME type as outranking a conflicting extension", () => {
+    expect(detectFileFormat("notes.json", "text/markdown")).toBe("markdown");
+    expect(detectFileFormat("page.txt", "application/json")).toBe("json");
+  });
+});
+
+describe("getFormatLabel", () => {
+  it("maps every format to a human label", () => {
+    expect(getFormatLabel("pdf")).toBe("PDF");
+    expect(getFormatLabel("json")).toBe("JSON");
+    expect(getFormatLabel("yaml")).toBe("YAML");
+    expect(getFormatLabel("markdown")).toBe("Markdown");
+    expect(getFormatLabel("spreadsheet")).toBe("Spreadsheet");
+    expect(getFormatLabel("unknown")).toBe("File");
+  });
+});
+
+describe("getSyntaxLanguage", () => {
+  it("maps known extensions to highlight.js language ids", () => {
+    expect(getSyntaxLanguage("main.py")).toBe("python");
+    expect(getSyntaxLanguage("server.ts")).toBe("typescript");
+    expect(getSyntaxLanguage("index.mjs")).toBe("javascript");
+    expect(getSyntaxLanguage("config.json")).toBe("json");
+    expect(getSyntaxLanguage("compose.yml")).toBe("yaml");
+    expect(getSyntaxLanguage(".bashrc")).toBe("bash");
+    expect(getSyntaxLanguage("lib.rs")).toBe("rust");
+  });
+
+  it("resolves from a full path, not just a basename", () => {
+    expect(getSyntaxLanguage("src/server/index.ts")).toBe("typescript");
+  });
+
+  it("returns undefined for unmapped extensions", () => {
+    expect(getSyntaxLanguage("mystery.bin")).toBeUndefined();
+    expect(getSyntaxLanguage("noextension")).toBeUndefined();
+  });
+});
+
+describe("getCodeLanguage", () => {
+  it("uses the detected format for json/yaml, covering extensionless MIME-only files", () => {
+    expect(getCodeLanguage("config", "json")).toBe("json");
+    expect(getCodeLanguage("config", "yaml")).toBe("yaml");
+    // A real extension resolves to the same answer.
+    expect(getCodeLanguage("config.json", "json")).toBe("json");
+    expect(getCodeLanguage("compose.yml", "yaml")).toBe("yaml");
+  });
+
+  it("keys off the extension for other code formats", () => {
+    expect(getCodeLanguage("main.rs", "code")).toBe("rust");
+    expect(getCodeLanguage("server.ts", "code")).toBe("typescript");
+    expect(getCodeLanguage("notes", "code")).toBeUndefined();
+  });
+});
+
+describe("fileExtension", () => {
+  it("lowercases the trailing extension", () => {
+    expect(fileExtension("Photo.JPEG")).toBe("jpeg");
+  });
+
+  it("returns the dotfile name for files that are all extension", () => {
+    expect(fileExtension(".gitignore")).toBe("gitignore");
+  });
+
+  it("ignores dots in directory components", () => {
+    expect(fileExtension("my.config.dir/file")).toBe("");
+    expect(fileExtension("v1.2.0/Makefile")).toBe("");
+    expect(fileExtension("a.b.c/server.ts")).toBe("ts");
+  });
+
+  it("returns no extension for a dotless basename, even one that looks like an extension", () => {
+    expect(fileExtension("json")).toBe("");
+    expect(fileExtension("pdf")).toBe("");
+    expect(fileExtension("README")).toBe("");
+    expect(fileExtension("Makefile")).toBe("");
+  });
+});

package/src/files/file-format.ts

@@ -0,0 +1,167 @@
+/**
+ * Shared file-format detection for every file surface — the preview pane, the
+ * artifact pane, and code rendering. Centralising extension/MIME → format logic
+ * keeps chat and artifact views consistent and avoids the same mapping drifting
+ * across components.
+ */
+
+export type FileFormat =
+  | "pdf"
+  | "image"
+  | "csv"
+  | "spreadsheet"
+  | "code"
+  | "json"
+  | "yaml"
+  | "markdown"
+  | "text"
+  | "unknown";
+
+const IMAGE_EXTENSIONS = ["png", "jpg", "jpeg", "gif", "svg", "webp"];
+
+const EXTENSION_TO_SYNTAX_LANGUAGE: Record<string, string> = {
+  ts: "typescript",
+  tsx: "tsx",
+  js: "javascript",
+  jsx: "jsx",
+  mjs: "javascript",
+  cjs: "javascript",
+  rs: "rust",
+  py: "python",
+  go: "go",
+  rb: "ruby",
+  json: "json",
+  yaml: "yaml",
+  yml: "yaml",
+  toml: "toml",
+  md: "markdown",
+  markdown: "markdown",
+  css: "css",
+  scss: "scss",
+  html: "html",
+  sh: "bash",
+  bash: "bash",
+  zsh: "bash",
+  bashrc: "bash",
+  bash_logout: "bash",
+  profile: "bash",
+  sql: "sql",
+  sol: "solidity",
+  proto: "protobuf",
+};
+
+// Syntax-mapped extensions that render through their own dedicated format
+// instead of the generic code viewer.
+const NON_CODE_SYNTAX_EXTENSIONS = new Set(["json", "yaml", "yml", "md", "markdown"]);
+
+// Code files with no highlight language — still shown as themed monospace.
+const PLAIN_CODE_EXTENSIONS = ["env", "gitignore"];
+
+// Derived from the syntax map so code detection and highlighting never drift:
+// every extension we can highlight (minus those with a dedicated format) routes
+// through the code viewer.
+const CODE_EXTENSIONS = new Set<string>([
+  ...Object.keys(EXTENSION_TO_SYNTAX_LANGUAGE).filter((ext) => !NON_CODE_SYNTAX_EXTENSIONS.has(ext)),
+  ...PLAIN_CODE_EXTENSIONS,
+]);
+
+/**
+ * Lowercased trailing extension. Returns "" for a name with no extension
+ * ("README", "json" → ""), and the post-dot name for a dotfile (".bashrc" →
+ * "bashrc"). Directory components are ignored so dots in a directory name don't
+ * leak in ("my.config/file" → "").
+ */
+export function fileExtension(filename: string): string {
+  const base = filename.slice(filename.lastIndexOf("/") + 1);
+  const dot = base.lastIndexOf(".");
+  // No dot → no extension. A leading dot (dotfile) is the one case where the
+  // whole post-dot name is the extension key.
+  if (dot < 0) return "";
+  return base.slice(dot + 1).toLowerCase();
+}
+
+/** Bare MIME essence, lowercased with any `; charset=…` parameters stripped. */
+function mimeEssence(mimeType?: string): string {
+  return mimeType?.split(";")[0]?.trim().toLowerCase() ?? "";
+}
+
+/**
+ * Resolve a filename + optional MIME type to the renderer format. A specific,
+ * authoritative MIME type wins over the extension; otherwise the extension
+ * decides; a generic text/plain payload is the final fallback.
+ */
+export function detectFileFormat(filename: string, mimeType?: string): FileFormat {
+  const ext = fileExtension(filename);
+  const mime = mimeEssence(mimeType);
+
+  // 1. Specific MIME types are authoritative — they outrank the extension.
+  if (mime === "application/pdf") return "pdf";
+  if (mime.startsWith("image/")) return "image";
+  if (mime === "text/markdown") return "markdown";
+  if (mime === "application/json") return "json";
+  if (mime === "text/csv" || mime === "application/csv") return "csv";
+  if (mime === "application/yaml" || mime === "application/x-yaml" || mime === "text/yaml") return "yaml";
+
+  // 2. Fall back to the file extension.
+  if (ext === "pdf") return "pdf";
+  if (IMAGE_EXTENSIONS.includes(ext)) return "image";
+  if (ext === "csv") return "csv";
+  if (ext === "xlsx" || ext === "xls") return "spreadsheet";
+  if (CODE_EXTENSIONS.has(ext)) return "code";
+  if (ext === "json") return "json";
+  if (ext === "yaml" || ext === "yml") return "yaml";
+  if (ext === "md" || ext === "markdown") return "markdown";
+  if (["txt", "log", "text"].includes(ext)) return "text";
+
+  // 3. Unknown extension but a text/plain payload — show as text, not "unknown".
+  if (mime === "text/plain") return "text";
+
+  return "unknown";
+}
+
+/** Human-facing label for a detected format. */
+export function getFormatLabel(format: FileFormat): string {
+  switch (format) {
+    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";
+  }
+}
+
+/**
+ * Map a filename (or path) to a highlight.js language id for CodeBlock. Returns
+ * undefined when there is no confident mapping; CodeBlock then renders themed
+ * monospace and lets the highlighter auto-detect, so callers never need a
+ * bespoke language table.
+ */
+export function getSyntaxLanguage(filename: string): string | undefined {
+  return EXTENSION_TO_SYNTAX_LANGUAGE[fileExtension(filename)];
+}
+
+/**
+ * Highlight language for a file already classified as a code-like format.
+ * `json`/`yaml` are their own highlight language even when detected purely from
+ * a MIME type on an extensionless file (where the extension can't reveal it);
+ * any other code format keys off the extension.
+ */
+export function getCodeLanguage(filename: string, format: FileFormat): string | undefined {
+  if (format === "json" || format === "yaml") return format;
+  return getSyntaxLanguage(filename);
+}

package/src/files/file-preview.stories.tsx

@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { FilePreview } from './file-preview'
+
+const TS_SOURCE = `interface SandboxConfig {
+  model: string
+  timeout: number
+  env: Record<string, string>
+}
+
+// Create a new sandbox and stream its output.
+export async function run(config: SandboxConfig) {
+  const sandbox = await Sandbox.create(config)
+  for await (const chunk of sandbox.stream()) {
+    process.stdout.write(chunk)
+  }
+}`
+
+const JSON_SOURCE = `{
+  "name": "@tangle-network/sandbox-ui",
+  "version": "0.37.1",
+  "type": "module",
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run"
+  }
+}`
+
+const SHELL_SOURCE = `# ~/.bashrc — loaded for interactive shells
+export NIX_BIN_PATH=/nix/profile/bin
+export PATH="$NIX_BIN_PATH:$PATH"
+
+alias gs="git status"
+alias ll="ls -alh"`
+
+const CSV_SOURCE = `name,role,active
+Ada,engineer,true
+Linus,maintainer,true
+Grace,architect,false`
+
+const MARKDOWN_SOURCE = `# Artifact
+
+Markdown still renders as **prose**, not as a code block.
+
+- Themed headings
+- \`inline code\`
+- [links](https://tangle.tools)`
+
+const meta: Meta<typeof FilePreview> = {
+  title: 'Files/FilePreview',
+  component: FilePreview,
+  parameters: { layout: 'fullscreen', backgrounds: { default: 'dark' } },
+  decorators: [
+    (Story) => (
+      <div className="h-[560px] w-[760px] bg-card text-foreground">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof FilePreview>
+
+export const Code: Story = {
+  name: 'Code (TypeScript) — syntax highlighted',
+  args: { filename: 'run.ts', content: TS_SOURCE },
+}
+
+export const Json: Story = {
+  name: 'JSON',
+  args: { filename: 'package.json', content: JSON_SOURCE },
+}
+
+export const ShellDotfile: Story = {
+  name: 'Shell dotfile (.bashrc)',
+  args: { filename: '.bashrc', content: SHELL_SOURCE },
+}
+
+export const Csv: Story = {
+  name: 'CSV table',
+  args: { filename: 'people.csv', content: CSV_SOURCE },
+}
+
+export const MarkdownProse: Story = {
+  name: 'Markdown (rendered prose)',
+  args: { filename: 'README.md', content: MARKDOWN_SOURCE },
+}

package/src/files/file-preview.test.tsx

@@ -0,0 +1,52 @@
+import { describe, it, expect } from "vitest";
+import { render } from "@testing-library/react";
+import { FilePreview } from "./file-preview";
+
+describe("FilePreview", () => {
+  it("renders code through the syntax highlighter, not a plain table", () => {
+    const { container, getByText } = render(
+      <FilePreview filename="server.ts" content={'const x: number = 1;\nexport { x };'} />,
+    );
+
+    // react-syntax-highlighter emits a <code> element; the old plain viewer
+    // used a <table>. Asserting both pins the artifact viewer to the shared,
+    // theme-aware CodeBlock used by chat.
+    expect(container.querySelector("code")).not.toBeNull();
+    expect(container.querySelector("table")).toBeNull();
+
+    // Header label carries the extension + line count, and a copy button is wired.
+    expect(getByText(/ts · 2 lines/i)).toBeInTheDocument();
+    expect(container.querySelector('button[title="Copy to clipboard"]')).not.toBeNull();
+  });
+
+  it("renders JSON through the highlighter too", () => {
+    const { container } = render(
+      <FilePreview filename="config.json" content={'{\n  "a": 1\n}'} />,
+    );
+    expect(container.querySelector("code")).not.toBeNull();
+    expect(container.querySelector("table")).toBeNull();
+  });
+
+  it("routes MIME-detected json on an extensionless file to the code viewer", () => {
+    const { container } = render(
+      <FilePreview filename="config" mimeType="application/json" content={'{"a":1}'} />,
+    );
+    expect(container.querySelector("code")).not.toBeNull();
+    expect(container.querySelector("pre.bg-background")).toBeNull(); // not the plain TextPreview
+  });
+
+  it("renders csv as a table", () => {
+    const { container } = render(
+      <FilePreview filename="data.csv" content={"a,b\n1,2"} />,
+    );
+    expect(container.querySelector("table")).not.toBeNull();
+  });
+
+  it("renders plain text in a pre, without the highlighter", () => {
+    const { container } = render(
+      <FilePreview filename="notes.txt" content={"just words"} />,
+    );
+    expect(container.querySelector("pre")).not.toBeNull();
+    expect(container.querySelector("code")).toBeNull();
+  });
+});