@pstdio/ui 0.0.3 → 0.1.0

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

@@ -1,228 +0,0 @@
-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

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

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

@@ -1,81 +0,0 @@
-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

@@ -1,147 +0,0 @@
-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

@@ -1,217 +0,0 @@
-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>
-    );
-  },
-};