@pstdio/ui 0.0.1

package/src/components/chat-ui/utils/diff.ts

@@ -0,0 +1,228 @@
+import type { TitleSegment } from "../components/timeline";
+
+export type FileChange = { filePath: string; additions: number; deletions: number };
+
+export function basenameSafe(path: string) {
+  const idx = path.lastIndexOf("/");
+  return idx >= 0 ? path.slice(idx + 1) : path;
+}
+
+function normalizeHeaderPath(input?: string | null) {
+  if (!input) return null;
+
+  const token = input.split("\t")[0].trim();
+  if (token === "/dev/null") return null;
+
+  let normalized = token;
+  if (normalized.startsWith("a/") || normalized.startsWith("b/")) {
+    normalized = normalized.slice(2);
+  }
+
+  return normalized.replace(/^\/+/, "").replace(/\\/g, "/");
+}
+
+const isMinusHeader = (line: string) => line.startsWith("--- ");
+const isPlusHeader = (line: string) => line.startsWith("+++ ");
+const isHunkHeader = (line: string) => line.startsWith("@@");
+const isAddedLine = (line: string) => line.startsWith("+") && !(isPlusHeader(line) || line === "+++");
+const isDeletedLine = (line: string) => line.startsWith("-") && !(isMinusHeader(line) || line === "---");
+
+const ensureFileChange = (changes: Map<string, { additions: number; deletions: number }>, filePath: string) => {
+  if (!changes.has(filePath)) {
+    changes.set(filePath, { additions: 0, deletions: 0 });
+  }
+};
+
+const incrementAdditions = (changes: Map<string, { additions: number; deletions: number }>, filePath: string) => {
+  const current = changes.get(filePath);
+  if (!current) return;
+  current.additions += 1;
+};
+
+const incrementDeletions = (changes: Map<string, { additions: number; deletions: number }>, filePath: string) => {
+  const current = changes.get(filePath);
+  if (!current) return;
+  current.deletions += 1;
+};
+
+type UnifiedDiffState = {
+  currentPath: string | null;
+  lastMinusHeader: string | null;
+  inHunk: boolean;
+};
+
+const processUnifiedDiffLine = (
+  line: string,
+  state: UnifiedDiffState,
+  changes: Map<string, { additions: number; deletions: number }>,
+) => {
+  if (isMinusHeader(line)) {
+    return { ...state, lastMinusHeader: normalizeHeaderPath(line.slice(4)), inHunk: false };
+  }
+
+  if (isPlusHeader(line)) {
+    const plusPath = normalizeHeaderPath(line.slice(4));
+    const currentPath = plusPath ?? state.lastMinusHeader;
+    if (currentPath) ensureFileChange(changes, currentPath);
+    return { ...state, currentPath, inHunk: false };
+  }
+
+  if (!state.currentPath) return state;
+
+  if (isHunkHeader(line)) {
+    return { ...state, inHunk: true };
+  }
+
+  if (!state.inHunk) return state;
+
+  if (isAddedLine(line)) {
+    incrementAdditions(changes, state.currentPath);
+    return state;
+  }
+
+  if (isDeletedLine(line)) {
+    incrementDeletions(changes, state.currentPath);
+  }
+
+  return state;
+};
+
+export function parseUnifiedDiff(diffText?: string) {
+  if (!diffText || typeof diffText !== "string") return [] as FileChange[];
+
+  const changes = new Map<string, { additions: number; deletions: number }>();
+  let state: UnifiedDiffState = {
+    currentPath: null,
+    lastMinusHeader: null,
+    inHunk: false,
+  };
+
+  const lines = diffText.split(/\r?\n/);
+  for (const line of lines) {
+    state = processUnifiedDiffLine(line, state, changes);
+  }
+
+  return Array.from(changes.entries()).map(([filePath, { additions, deletions }]) => ({
+    filePath,
+    additions,
+    deletions,
+  }));
+}
+
+export function buildDiffTitleSegments(diffText?: string) {
+  return parseUnifiedDiff(diffText).map(
+    (file) =>
+      ({
+        kind: "diff",
+        fileName: basenameSafe(file.filePath),
+        filePath: file.filePath,
+        additions: file.additions,
+        deletions: file.deletions,
+      }) satisfies TitleSegment,
+  );
+}
+
+export function extractDiffFilePaths(diffText?: string) {
+  return parseUnifiedDiff(diffText).map((file) => file.filePath);
+}
+
+export type FileDiffPreview = { filePath: string; original: string; modified: string };
+
+const isDiffFileBoundary = (line: string) => isMinusHeader(line) || line.startsWith("diff --git ");
+
+const isInvalidHunkBodyLine = (line: string) => {
+  if (line.startsWith(" ")) return false;
+  if (line.startsWith("+")) return false;
+  if (line.startsWith("-")) return false;
+  return line.trim() !== "";
+};
+
+const appendHunkLine = (line: string, original: string[], modified: string[]) => {
+  if (line.startsWith(" ")) {
+    const text = line.slice(1);
+    original.push(text);
+    modified.push(text);
+    return;
+  }
+
+  if (line.startsWith("-")) {
+    original.push(line.slice(1));
+    return;
+  }
+
+  if (line.startsWith("+")) {
+    modified.push(line.slice(1));
+  }
+};
+
+const parseHunkBody = (lines: string[], startIndex: number, original: string[], modified: string[]) => {
+  let index = startIndex;
+
+  while (index < lines.length) {
+    const line = lines[index] || "";
+    if (isDiffFileBoundary(line) || isHunkHeader(line) || isInvalidHunkBodyLine(line)) {
+      break;
+    }
+
+    appendHunkLine(line, original, modified);
+    index += 1;
+  }
+
+  if (original.length > 0 || modified.length > 0) {
+    original.push("");
+    modified.push("");
+  }
+
+  return index;
+};
+
+const parsePreview = (lines: string[], startIndex: number) => {
+  const oldHeader = normalizeHeaderPath((lines[startIndex] || "").slice(4));
+  const next = lines[startIndex + 1] || "";
+  if (!isPlusHeader(next)) return { nextIndex: startIndex + 1 } as const;
+
+  const newHeader = normalizeHeaderPath(next.slice(4));
+  const filePath = newHeader ?? oldHeader ?? "";
+  const original: string[] = [];
+  const modified: string[] = [];
+
+  let index = startIndex + 2;
+  while (index < lines.length) {
+    const current = lines[index] || "";
+    if (isDiffFileBoundary(current)) break;
+
+    if (!isHunkHeader(current)) {
+      index += 1;
+      continue;
+    }
+
+    index = parseHunkBody(lines, index + 1, original, modified);
+  }
+
+  return {
+    nextIndex: index,
+    preview: { filePath, original: original.join("\n"), modified: modified.join("\n") } satisfies FileDiffPreview,
+  } as const;
+};
+
+export function buildFileDiffPreviews(diffText?: string) {
+  if (!diffText || typeof diffText !== "string") return [] as FileDiffPreview[];
+
+  const lines = diffText.split(/\r?\n/);
+  const previews: FileDiffPreview[] = [];
+
+  let i = 0;
+  while (i < lines.length) {
+    const line = lines[i] || "";
+    if (!isMinusHeader(line)) {
+      i += 1;
+      continue;
+    }
+
+    const { nextIndex, preview } = parsePreview(lines, i);
+    if (preview) previews.push(preview);
+    i = Math.max(nextIndex, i + 1);
+  }
+
+  return previews;
+}

package/src/components/chat-ui/utils/editor-state.ts

@@ -0,0 +1,5 @@
+import { generateEditorStateFromString } from "@/components/rich-text";
+
+export const createSerializedPromptState = (input = "") => {
+  return JSON.stringify(generateEditorStateFromString(input));
+};

package/src/components/chat-ui/utils/get-icon.ts

@@ -0,0 +1,81 @@
+import type { LucideIcon } from "lucide-react";
+import {
+  AlertTriangle,
+  DotIcon,
+  File,
+  FileDiff,
+  FileDown,
+  FilePen,
+  FileText,
+  FileUp,
+  Globe,
+  ListTree,
+  Move,
+  Search,
+  Terminal,
+  Trash2,
+} from "lucide-react";
+
+const toolIconMap = {
+  shell: Terminal,
+  ls: ListTree,
+  read_file: FileText,
+  write_file: FilePen,
+  delete_file: Trash2,
+  patch: FileDiff,
+  upload_files: FileUp,
+  download_file: FileDown,
+  move_file: Move,
+} as const satisfies Record<string, LucideIcon>;
+
+const iconMap = {
+  dot: DotIcon,
+  danger: AlertTriangle,
+  search: Search,
+  browser: Globe,
+  file: File,
+  terminal: Terminal,
+  ...toolIconMap,
+} as const satisfies Record<string, LucideIcon>;
+
+export type IconName = keyof typeof iconMap;
+export type ToolIconName = keyof typeof toolIconMap;
+
+const DEFAULT_TOOL_ICON: IconName = "dot";
+
+const isToolIconName = (value: string): value is ToolIconName => Object.hasOwn(toolIconMap, value);
+
+export const getIconComponent = (name: IconName): LucideIcon => {
+  return iconMap[name];
+};
+
+export const toolTypeToIconName = (type?: string): IconName => {
+  if (!type) return DEFAULT_TOOL_ICON;
+
+  const normalized = type.replace(/^tool-/, "");
+  if (isToolIconName(normalized)) return normalized;
+
+  switch (normalized) {
+    case "read":
+      return "file";
+    case "bash":
+      return "terminal";
+    case "apply_patch":
+      return "patch";
+    case "grep":
+      return "search";
+    case "glob":
+      return "file";
+    case "search":
+      return "search";
+    case "browser":
+      return "browser";
+    case "fs":
+    case "file":
+      return "file";
+    default:
+      return DEFAULT_TOOL_ICON;
+  }
+};
+
+export { getFileTypeIcon } from "../../../utils/get-file-type-icon";

package/src/components/code-editor.tsx

@@ -0,0 +1,147 @@
+import { DiffEditor, Editor } from "@monaco-editor/react";
+
+export const customTheme = {
+  base: "vs-dark" as const,
+  inherit: true,
+  rules: [],
+  colors: {
+    "editor.background": "#0a0d15",
+    "editor.foreground": "#f5f5f5",
+    "editor.lineHighlightBackground": "#22252C",
+    "editorCursor.foreground": "#A7A7A7",
+    "editorWhitespace.foreground": "#3B3B3B",
+    "editorIndentGuide.background": "#404040",
+    "editorIndentGuide.activeBackground": "#707070",
+  },
+};
+
+interface CodeEditorProps {
+  language: string;
+  defaultCode?: string;
+  code?: string;
+  isEditable: boolean;
+  showLineNumbers?: boolean;
+  onChange?: (code: string) => void;
+  disableScroll?: boolean;
+}
+
+export const CodeEditor = (props: CodeEditorProps) => {
+  const { defaultCode, code, showLineNumbers, isEditable, language = "javascript", onChange, disableScroll } = props;
+
+  const options = {
+    tabSize: 2,
+    minimap: {
+      enabled: false,
+    },
+    fontSize: 12,
+    readOnly: !isEditable,
+    lineNumbers: showLineNumbers ? "on" : "off",
+    ...(disableScroll
+      ? {
+          scrollbar: {
+            vertical: "hidden" as const,
+            horizontal: "hidden" as const,
+            useShadows: false,
+            alwaysConsumeMouseWheel: false,
+          },
+          scrollBeyondLastLine: false,
+          mouseWheelScrollSensitivity: 0,
+          overviewRulerLanes: 0,
+        }
+      : {}),
+  } as const;
+
+  return (
+    <Editor
+      width="100%"
+      height="100%"
+      language={language}
+      defaultValue={defaultCode}
+      value={code}
+      theme={"ps-theme"}
+      options={options}
+      onChange={(value) => {
+        onChange?.(value || "");
+      }}
+      beforeMount={(monaco) => {
+        monaco.editor.defineTheme("ps-theme", customTheme);
+      }}
+      onMount={async (editor, monaco) => {
+        monaco.editor.setTheme("ps-theme");
+
+        // Add JSX support
+        monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+          jsx: monaco.languages.typescript.JsxEmit.React,
+        });
+
+        // Format on cmd+s
+        editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, async () => {
+          await editor.getAction("editor.action.formatDocument")?.run();
+        });
+
+        // Run format on the initial value
+        await editor.getAction("editor.action.formatDocument")?.run();
+      }}
+    />
+  );
+};
+
+interface CodeDiffEditorProps {
+  language: string;
+  original: string;
+  modified: string;
+  showLineNumbers?: boolean;
+  disableScroll?: boolean;
+}
+
+export const CodeDiffEditor = (props: CodeDiffEditorProps) => {
+  const { original, modified, showLineNumbers, language = "javascript", disableScroll } = props;
+
+  const options = {
+    tabSize: 2,
+    minimap: {
+      enabled: false,
+    },
+    fontSize: 12,
+    readOnly: true,
+    originalEditable: false,
+    renderSideBySide: true,
+    useInlineViewWhenSpaceIsTooSmall: true,
+    lineNumbers: showLineNumbers ? "on" : "off",
+    ...(disableScroll
+      ? {
+          scrollbar: {
+            vertical: "hidden" as const,
+            horizontal: "hidden" as const,
+            useShadows: false,
+            alwaysConsumeMouseWheel: false,
+          },
+          scrollBeyondLastLine: false,
+          mouseWheelScrollSensitivity: 0,
+          overviewRulerLanes: 0,
+        }
+      : {}),
+  } as const;
+
+  return (
+    <DiffEditor
+      width="100%"
+      height="100%"
+      language={language}
+      original={original}
+      modified={modified}
+      theme={"ps-theme"}
+      options={options}
+      beforeMount={(monaco) => {
+        monaco.editor.defineTheme("ps-theme", customTheme);
+      }}
+      onMount={(_, monaco) => {
+        monaco.editor.setTheme("ps-theme");
+
+        monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+          jsx: monaco.languages.typescript.JsxEmit.React,
+        });
+      }}
+    />
+  );
+};

package/src/components/column-file-browser.stories.tsx

@@ -0,0 +1,217 @@
+import { Box, Stack, Text } from "@chakra-ui/react";
+import type { ReactNode } from "react";
+import { useState } from "react";
+
+import { ColumnFileBrowser, type ColumnFileItem } from "./column-file-browser";
+
+type StoryFn = () => ReactNode;
+
+const demoItems: ColumnFileItem[] = [
+  {
+    id: "sample-raw",
+    name: "sample-raw",
+    type: "folder",
+    meta: "3 items",
+    children: [
+      {
+        id: "sample-raw/invoices",
+        name: "invoices",
+        type: "folder",
+        meta: "2 items",
+        children: [
+          {
+            id: "sample-raw/invoices/2024-02.pdf",
+            name: "2024-02.pdf",
+            type: "file",
+            meta: "1.2 MB · Feb 2, 2024",
+          },
+          {
+            id: "sample-raw/invoices/2024-03.pdf",
+            name: "2024-03.pdf",
+            type: "file",
+            meta: "980 KB · Mar 8, 2024",
+          },
+        ],
+      },
+      {
+        id: "sample-raw/contracts",
+        name: "contracts",
+        type: "folder",
+        meta: "1 item",
+        children: [
+          {
+            id: "sample-raw/contracts/vendor-agreement.pdf",
+            name: "vendor-agreement.pdf",
+            type: "file",
+            meta: "2.1 MB · Jan 18, 2024",
+          },
+        ],
+      },
+      {
+        id: "sample-raw/notes.md",
+        name: "notes.md",
+        type: "file",
+        meta: "6 KB · Apr 8, 2024",
+      },
+    ],
+  },
+  {
+    id: "sample-artifacts",
+    name: "sample-artifacts",
+    type: "folder",
+    meta: "2 items",
+    children: [
+      {
+        id: "sample-artifacts/run-042",
+        name: "run-042",
+        type: "folder",
+        meta: "1 item",
+        children: [
+          {
+            id: "sample-artifacts/run-042/output.json",
+            name: "output.json",
+            type: "file",
+            meta: "48 KB · May 8, 2024",
+          },
+        ],
+      },
+      {
+        id: "sample-artifacts/logs",
+        name: "logs",
+        type: "folder",
+        meta: "0 items",
+        children: [],
+      },
+    ],
+  },
+  {
+    id: "sample-validation/summary.csv",
+    name: "summary.csv",
+    type: "file",
+    meta: "18 KB · Jul 20, 2024",
+  },
+];
+
+const emptyItems: ColumnFileItem[] = [
+  {
+    id: "sample-raw",
+    name: "sample-raw",
+    type: "folder",
+    meta: "0 items",
+    children: [],
+  },
+];
+
+const formatPath = (path: ColumnFileItem[]) => {
+  if (path.length === 0) return "root";
+
+  return path.map((item) => item.name).join(" / ");
+};
+
+const formatFileCount = (count: number) => `${count} file${count === 1 ? "" : "s"}`;
+
+const canDeleteItem = (item: ColumnFileItem) => item.type === "file";
+
+const meta = {
+  title: "Components/ColumnFileBrowser",
+  component: ColumnFileBrowser,
+  decorators: [
+    (Story: StoryFn) => (
+      <Box padding="sm" background="bg">
+        <Story />
+      </Box>
+    ),
+  ],
+};
+
+export default meta;
+
+export const Default = {
+  render: () => {
+    const [activity, setActivity] = useState("Select a file or folder.");
+
+    const handleFolderOpen = (_folder: ColumnFileItem, path: ColumnFileItem[]) => {
+      setActivity(`Opened folder: ${formatPath(path)}`);
+    };
+
+    const handleFileOpen = (_file: ColumnFileItem, path: ColumnFileItem[]) => {
+      setActivity(`Opened file: ${formatPath(path)}`);
+    };
+
+    const handleDeleteItem = (item: ColumnFileItem, path: ColumnFileItem[]) => {
+      setActivity(`Deleted ${item.type}: ${formatPath(path)}`);
+    };
+
+    const handleDownloadFile = (_file: ColumnFileItem, path: ColumnFileItem[]) => {
+      setActivity(`Downloaded: ${formatPath(path)}`);
+    };
+
+    const handleDropFiles = (files: File[], _folder: ColumnFileItem | null, path: ColumnFileItem[]) => {
+      const fileLabel = formatFileCount(files.length);
+
+      setActivity(`Dropped ${fileLabel} into ${formatPath(path)}`);
+    };
+
+    const handleUploadClick = () => {
+      setActivity("Upload clicked.");
+    };
+
+    return (
+      <Stack gap="sm">
+        <Box borderWidth="1px" borderColor="border.muted" borderRadius="md" overflow="hidden" height="420px">
+          <ColumnFileBrowser
+            items={demoItems}
+            emptyLabel="This folder is empty."
+            onFolderOpen={handleFolderOpen}
+            onFileOpen={handleFileOpen}
+            onDeleteItem={handleDeleteItem}
+            onDownloadFile={handleDownloadFile}
+            onDropFiles={handleDropFiles}
+            onUploadClick={handleUploadClick}
+            canDeleteItem={canDeleteItem}
+          />
+        </Box>
+        <Text textStyle="paragraph/XS/regular" color="fg.muted">
+          {activity}
+        </Text>
+      </Stack>
+    );
+  },
+};
+
+export const EmptyFolder = {
+  render: () => {
+    const [activity, setActivity] = useState("Drop files here to upload.");
+
+    const handleFolderOpen = (_folder: ColumnFileItem, path: ColumnFileItem[]) => {
+      setActivity(`Opened folder: ${formatPath(path)}`);
+    };
+
+    const handleDropFiles = (files: File[], _folder: ColumnFileItem | null, path: ColumnFileItem[]) => {
+      const fileLabel = formatFileCount(files.length);
+
+      setActivity(`Dropped ${fileLabel} into ${formatPath(path)}`);
+    };
+
+    const handleUploadClick = () => {
+      setActivity("Upload clicked.");
+    };
+
+    return (
+      <Stack gap="sm">
+        <Box borderWidth="1px" borderColor="border.muted" borderRadius="md" overflow="hidden" height="280px">
+          <ColumnFileBrowser
+            items={emptyItems}
+            emptyLabel="Nothing here yet."
+            onFolderOpen={handleFolderOpen}
+            onDropFiles={handleDropFiles}
+            onUploadClick={handleUploadClick}
+          />
+        </Box>
+        <Text textStyle="paragraph/XS/regular" color="fg.muted">
+          {activity}
+        </Text>
+      </Stack>
+    );
+  },
+};