@tangle-network/ui 3.0.0 → 5.0.0

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();
+  });
+});

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/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/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