@aprovan/patchwork-editor 0.1.0

package/src/components/edit/EditModal.tsx

@@ -0,0 +1,236 @@
+import { useState, useCallback, useMemo, type ReactNode } from 'react';
+import {
+  Code,
+  Eye,
+  AlertCircle,
+  Loader2,
+  Pencil,
+  X,
+  RotateCcw,
+  Send,
+  FolderTree,
+  FileCode,
+} from 'lucide-react';
+import { MarkdownEditor } from '../MarkdownEditor';
+import { EditHistory } from './EditHistory';
+import { FileTree } from './FileTree';
+import { useEditSession, type UseEditSessionOptions } from './useEditSession';
+import { getActiveContent, getFiles } from './types';
+import { Bobbin, serializeChangesToYAML, type Change } from '@aprovan/bobbin';
+
+// Simple hash for React key to force re-render on code changes
+function hashCode(str: string): number {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = ((hash << 5) - hash + str.charCodeAt(i)) | 0;
+  }
+  return hash;
+}
+
+export interface EditModalProps extends UseEditSessionOptions {
+  isOpen: boolean;
+  onClose: (finalCode: string, editCount: number) => void;
+  renderPreview: (code: string) => ReactNode;
+  renderLoading?: () => ReactNode;
+  renderError?: (error: string) => ReactNode;
+  previewError?: string | null;
+  previewLoading?: boolean;
+}
+
+export function EditModal({
+  isOpen,
+  onClose,
+  renderPreview,
+  renderLoading,
+  renderError,
+  previewError,
+  previewLoading,
+  ...sessionOptions
+}: EditModalProps) {
+  const [showPreview, setShowPreview] = useState(true);
+  const [showTree, setShowTree] = useState(false);
+  const [editInput, setEditInput] = useState('');
+  const [bobbinChanges, setBobbinChanges] = useState<Change[]>([]);
+  const [previewContainer, setPreviewContainer] = useState<HTMLDivElement | null>(null);
+
+  const session = useEditSession(sessionOptions);
+  const code = getActiveContent(session);
+  const files = useMemo(() => getFiles(session.project), [session.project]);
+  const hasChanges = code !== (session.originalProject.files.get(session.activeFile)?.content ?? '');
+
+  const handleBobbinChanges = useCallback((changes: Change[]) => {
+    setBobbinChanges(changes);
+  }, []);
+
+  const handleSubmit = () => {
+    if ((!editInput.trim() && bobbinChanges.length === 0) || session.isApplying) return;
+    
+    // Convert bobbin changes to YAML context
+    let promptWithContext = editInput;
+    
+    if (bobbinChanges.length > 0) {
+      const bobbinYaml = serializeChangesToYAML(bobbinChanges, []);
+      promptWithContext = `${editInput}\n\n---\nVisual Changes (apply these styles/modifications):\n\`\`\`yaml\n${bobbinYaml}\n\`\`\``;
+    }
+    
+    session.submitEdit(promptWithContext);
+    setEditInput('');
+    setBobbinChanges([]);
+  };
+
+  const handleClose = () => {
+    const editCount = session.history.length;
+    const finalCode = code;
+    setEditInput('');
+    session.clearError();
+    onClose(finalCode, editCount);
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-8">
+      <div className="flex flex-col bg-background rounded-lg shadow-xl w-full h-full max-w-6xl max-h-[90vh] overflow-hidden">
+        <div className="flex items-center gap-2 px-4 py-3 bg-background border-b-2">
+          <Pencil className="h-4 w-4 text-primary" />
+          {session.isApplying && (
+            <span className="text-xs font-medium text-primary flex items-center gap-1 ml-2">
+              <Loader2 className="h-3 w-3 animate-spin" />
+              Applying edits...
+            </span>
+          )}
+          <div className="ml-auto flex gap-2">
+            {hasChanges && (
+              <button
+                onClick={session.revert}
+                className="px-2 py-1 text-xs rounded flex items-center gap-1 hover:bg-primary/20 text-primary"
+                title="Revert to original"
+              >
+                <RotateCcw className="h-3 w-3" />
+              </button>
+            )}
+            <button
+              onClick={() => setShowTree(!showTree)}
+              className={`px-2 py-1 text-xs rounded flex items-center gap-1 ${showTree ? 'bg-primary text-primary-foreground' : 'hover:bg-primary/20 text-primary'}`}
+              title={showTree ? 'Single file' : 'File tree'}
+            >
+              {showTree ? <FileCode className="h-3 w-3" /> : <FolderTree className="h-3 w-3" />}
+            </button>
+            <button
+              onClick={() => setShowPreview(!showPreview)}
+              className={`px-2 py-1 text-xs rounded flex items-center gap-1 ${showPreview ? 'bg-primary text-primary-foreground' : 'hover:bg-primary/20 text-primary'}`}
+            >
+              {showPreview ? <Eye className="h-3 w-3" /> : <Code className="h-3 w-3" />}
+              {showPreview ? 'Preview' : 'Code'}
+            </button>
+            <button
+              onClick={handleClose}
+              className="px-2 py-1 text-xs rounded flex items-center gap-1 bg-primary text-primary-foreground hover:bg-primary/90"
+              title="Exit edit mode"
+            >
+              <X className="h-3 w-3" />
+              Done
+            </button>
+          </div>
+        </div>
+
+        <div className="flex-1 min-h-0 border-b-2 overflow-hidden flex">
+          {showTree && (
+            <FileTree
+              files={files}
+              activeFile={session.activeFile}
+              onSelectFile={session.setActiveFile}
+            />
+          )}
+          <div className="flex-1 overflow-auto">
+            {showPreview ? (
+              <div className="bg-white h-full relative" ref={setPreviewContainer}>
+                {previewError && renderError ? (
+                  renderError(previewError)
+                ) : previewError ? (
+                  <div className="p-4 text-sm text-destructive flex items-center gap-2">
+                    <AlertCircle className="h-4 w-4 shrink-0" />
+                    <span>{previewError}</span>
+                  </div>
+                ) : previewLoading && renderLoading ? (
+                  renderLoading()
+                ) : previewLoading ? (
+                  <div className="p-4 flex items-center gap-2 text-muted-foreground">
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                    <span className="text-sm">Rendering preview...</span>
+                  </div>
+                ) : (
+                  <div className="p-4" key={hashCode(code)}>{renderPreview(code)}</div>
+                )}
+                {!renderLoading && !renderError && !previewLoading && <Bobbin
+                  container={previewContainer}
+                  pillContainer={previewContainer}
+                  defaultActive={false}
+                  showInspector
+                  onChanges={handleBobbinChanges}
+                  exclude={['.bobbin-pill', '[data-bobbin]']}
+                />}
+              </div>
+            ) : (
+              <div className="p-4 bg-muted/10 h-full overflow-auto">
+                <pre className="text-xs whitespace-pre-wrap break-words m-0">
+                  <code>{code}</code>
+                </pre>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <EditHistory
+          entries={session.history}
+          streamingNotes={session.streamingNotes}
+          isStreaming={session.isApplying}
+          pendingPrompt={session.pendingPrompt}
+          className="h-48"
+        />
+
+        {session.error && (
+          <div className="px-4 py-2 bg-destructive/10 text-destructive text-sm flex items-center gap-2 border-t-2 border-destructive">
+            <AlertCircle className="h-4 w-4 shrink-0" />
+            {session.error}
+          </div>
+        )}
+
+        {bobbinChanges.length > 0 && (
+          <div className="px-4 py-2 bg-blue-50 text-blue-700 text-sm flex items-center gap-2 border-t">
+            <span>{bobbinChanges.length} visual change{bobbinChanges.length !== 1 ? 's' : ''}</span>
+            <button
+              onClick={() => setBobbinChanges([])}
+              className="text-xs underline hover:no-underline"
+            >
+              Clear
+            </button>
+          </div>
+        )}
+
+        <div className="p-4 border-t-2 bg-primary/5 flex gap-2 items-end">
+          <div className="flex-1">
+            <MarkdownEditor
+              value={editInput}
+              onChange={setEditInput}
+              onSubmit={handleSubmit}
+              placeholder="Describe changes..."
+              disabled={session.isApplying}
+            />
+          </div>
+          <button
+            onClick={handleSubmit}
+            disabled={(!editInput.trim() && bobbinChanges.length === 0) || session.isApplying}
+            className="px-3 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50 flex items-center gap-1 shrink-0"
+          >
+            {session.isApplying ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <Send className="h-4 w-4" />
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/edit/FileTree.tsx

@@ -0,0 +1,144 @@
+import { useMemo, useState } from 'react';
+import { ChevronRight, ChevronDown, File, Folder } from 'lucide-react';
+import type { VirtualFile } from '@aprovan/patchwork-compiler';
+
+interface TreeNode {
+  name: string;
+  path: string;
+  isDir: boolean;
+  children: TreeNode[];
+}
+
+function buildTree(files: VirtualFile[]): TreeNode {
+  const root: TreeNode = { name: '', path: '', isDir: true, children: [] };
+
+  for (const file of files) {
+    const parts = file.path.split('/');
+    let current = root;
+
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i]!;
+      const isLast = i === parts.length - 1;
+      const currentPath = parts.slice(0, i + 1).join('/');
+
+      let child = current.children.find(c => c.name === part);
+      if (!child) {
+        child = {
+          name: part,
+          path: currentPath,
+          isDir: !isLast,
+          children: [],
+        };
+        current.children.push(child);
+      }
+      current = child;
+    }
+  }
+
+  root.children.sort((a, b) => {
+    if (a.isDir !== b.isDir) return a.isDir ? -1 : 1;
+    return a.name.localeCompare(b.name);
+  });
+
+  return root;
+}
+
+interface TreeNodeComponentProps {
+  node: TreeNode;
+  activeFile: string;
+  onSelect: (path: string) => void;
+  depth?: number;
+}
+
+function TreeNodeComponent({ node, activeFile, onSelect, depth = 0 }: TreeNodeComponentProps) {
+  const [expanded, setExpanded] = useState(true);
+
+  if (!node.name) {
+    return (
+      <>
+        {node.children.map(child => (
+          <TreeNodeComponent
+            key={child.path}
+            node={child}
+            activeFile={activeFile}
+            onSelect={onSelect}
+            depth={depth}
+          />
+        ))}
+      </>
+    );
+  }
+
+  const isActive = node.path === activeFile;
+
+  if (node.isDir) {
+    return (
+      <div>
+        <button
+          onClick={() => setExpanded(!expanded)}
+          className="flex items-center gap-1 w-full px-2 py-1 text-left text-sm hover:bg-muted/50 rounded"
+          style={{ paddingLeft: `${depth * 12 + 8}px` }}
+        >
+          {expanded ? (
+            <ChevronDown className="h-3 w-3 shrink-0" />
+          ) : (
+            <ChevronRight className="h-3 w-3 shrink-0" />
+          )}
+          <Folder className="h-3 w-3 shrink-0 text-muted-foreground" />
+          <span className="truncate">{node.name}</span>
+        </button>
+        {expanded && (
+          <div>
+            {node.children.map(child => (
+              <TreeNodeComponent
+                key={child.path}
+                node={child}
+                activeFile={activeFile}
+                onSelect={onSelect}
+                depth={depth + 1}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <button
+      onClick={() => onSelect(node.path)}
+      className={`flex items-center gap-1 w-full px-2 py-1 text-left text-sm hover:bg-muted/50 rounded ${
+        isActive ? 'bg-primary/10 text-primary' : ''
+      }`}
+      style={{ paddingLeft: `${depth * 12 + 20}px` }}
+    >
+      <File className="h-3 w-3 shrink-0 text-muted-foreground" />
+      <span className="truncate">{node.name}</span>
+    </button>
+  );
+}
+
+export interface FileTreeProps {
+  files: VirtualFile[];
+  activeFile: string;
+  onSelectFile: (path: string) => void;
+}
+
+export function FileTree({ files, activeFile, onSelectFile }: FileTreeProps) {
+  const tree = useMemo(() => buildTree(files), [files]);
+
+  return (
+    <div className="w-48 border-r bg-muted/30 overflow-auto text-foreground">
+      <div className="p-2 border-b text-xs font-medium text-muted-foreground uppercase tracking-wide">
+        Files
+      </div>
+      <div className="p-1">
+        <TreeNodeComponent
+          node={tree}
+          activeFile={activeFile}
+          onSelect={onSelectFile}
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/edit/api.ts

@@ -0,0 +1,100 @@
+import { applyDiffs, hasDiffBlocks, parseEditResponse } from '../../lib/diff';
+import type { EditRequest, EditResponse } from './types';
+
+export interface EditApiOptions {
+  endpoint?: string;
+  onProgress?: (note: string) => void;
+  /** Automatically remove stray diff markers from output (default: true) */
+  sanitize?: boolean;
+}
+
+export async function sendEditRequest(
+  request: EditRequest,
+  options: EditApiOptions = {},
+): Promise<EditResponse> {
+  const { endpoint = '/api/edit', onProgress, sanitize = true } = options;
+
+  const response = await fetch(endpoint, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(request),
+  });
+
+  if (!response.ok) {
+    throw new Error('Edit request failed');
+  }
+
+  const text = await streamResponse(response, onProgress);
+
+  if (!hasDiffBlocks(text)) {
+    throw new Error('No valid diffs in response');
+  }
+
+  const parsed = parseEditResponse(text);
+  const result = applyDiffs(request.code, parsed.diffs, { sanitize });
+
+  if (result.applied === 0) {
+    // Provide detailed context about failed diffs for better error feedback
+    const failedDetails = result.failed
+      .map((f, i) => `[${i + 1}] "${f}"`)
+      .join('\n');
+    throw new Error(
+      `Failed to apply ${parsed.diffs.length} diff(s). None of the SEARCH blocks matched the code.\n\nFailed searches:\n${failedDetails}\n\nThis usually means the code has changed or the SEARCH text doesn't match exactly.`,
+    );
+  }
+
+  // Include warning in summary if markers were detected
+  let summary = parsed.summary || `Applied ${result.applied} change(s)`;
+  if (result.warning) {
+    summary = `⚠️ ${result.warning}\n\n${summary}`;
+  }
+
+  return {
+    newCode: result.code,
+    summary,
+    progressNotes: parsed.progressNotes,
+  };
+}
+
+async function streamResponse(
+  response: Response,
+  onProgress?: (note: string) => void,
+): Promise<string> {
+  const reader = response.body?.getReader();
+  if (!reader) {
+    return response.text();
+  }
+
+  const decoder = new TextDecoder();
+  let fullText = '';
+  const emittedNotes = new Set<string>();
+
+  let done = false;
+  while (!done) {
+    const result = await reader.read();
+    done = result.done;
+    if (result.value) {
+      fullText += decoder.decode(result.value, { stream: true });
+
+      if (onProgress) {
+        // Extract notes from code fence attributes as they stream in.
+        // Format: ```lang note="description" path="@/file.tsx"
+        // Match complete attribute to avoid emitting partial notes.
+        const noteAttrRegex = /```\w*\s+note="([^"]+)"/g;
+        let match;
+        while ((match = noteAttrRegex.exec(fullText)) !== null) {
+          const noteMatch = match[1];
+          if (noteMatch) {
+            const note = noteMatch.trim();
+            if (!emittedNotes.has(note)) {
+              emittedNotes.add(note);
+              onProgress(note);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  return fullText;
+}

package/src/components/edit/index.ts

@@ -0,0 +1,6 @@
+export * from './types';
+export * from './api';
+export * from './useEditSession';
+export * from './EditHistory';
+export * from './EditModal';
+export * from './FileTree';

package/src/components/edit/types.ts

@@ -0,0 +1,53 @@
+import type { VirtualProject, VirtualFile } from '@aprovan/patchwork-compiler';
+
+export interface EditHistoryEntry {
+  prompt: string;
+  summary: string;
+  isRetry?: boolean;
+}
+
+export interface EditSessionState {
+  project: VirtualProject;
+  originalProject: VirtualProject;
+  activeFile: string;
+  history: EditHistoryEntry[];
+  isApplying: boolean;
+  error: string | null;
+  streamingNotes: string[];
+  pendingPrompt: string | null;
+}
+
+export interface EditSessionActions {
+  submitEdit: (prompt: string) => Promise<void>;
+  revert: () => void;
+  updateActiveFile: (content: string) => void;
+  setActiveFile: (path: string) => void;
+  clearError: () => void;
+}
+
+// Convenience getters
+export function getActiveContent(state: EditSessionState): string {
+  return state.project.files.get(state.activeFile)?.content ?? '';
+}
+
+export function getFiles(project: VirtualProject): VirtualFile[] {
+  return Array.from(project.files.values());
+}
+
+export interface EditRequest {
+  code: string;
+  prompt: string;
+}
+
+export interface EditResponse {
+  newCode: string;
+  summary: string;
+  progressNotes: string[];
+}
+
+export interface CompileResult {
+  success: boolean;
+  error?: string;
+}
+
+export type CompileFn = (code: string) => Promise<CompileResult>;

package/src/components/edit/useEditSession.ts

@@ -0,0 +1,164 @@
+import { useState, useCallback, useMemo } from 'react';
+import type { VirtualProject } from '@aprovan/patchwork-compiler';
+import { createSingleFileProject } from '@aprovan/patchwork-compiler';
+import { sendEditRequest } from './api';
+import type {
+  EditHistoryEntry,
+  EditSessionState,
+  EditSessionActions,
+  CompileFn,
+} from './types';
+
+export interface UseEditSessionOptions {
+  originalCode: string;
+  compile?: CompileFn;
+  apiEndpoint?: string;
+}
+
+function cloneProject(project: VirtualProject): VirtualProject {
+  return {
+    ...project,
+    files: new Map(project.files),
+  };
+}
+
+export function useEditSession(
+  options: UseEditSessionOptions,
+): EditSessionState & EditSessionActions {
+  const { originalCode, compile, apiEndpoint } = options;
+
+  const originalProject = useMemo(
+    () => createSingleFileProject(originalCode),
+    [originalCode],
+  );
+
+  const [project, setProject] = useState<VirtualProject>(originalProject);
+  const [activeFile, setActiveFile] = useState(originalProject.entry);
+  const [history, setHistory] = useState<EditHistoryEntry[]>([]);
+  const [isApplying, setIsApplying] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [streamingNotes, setStreamingNotes] = useState<string[]>([]);
+  const [pendingPrompt, setPendingPrompt] = useState<string | null>(null);
+
+  const performEdit = useCallback(
+    async (
+      currentCode: string,
+      prompt: string,
+      isRetry = false,
+    ): Promise<{ newCode: string; entries: EditHistoryEntry[] }> => {
+      const entries: EditHistoryEntry[] = [];
+
+      const response = await sendEditRequest(
+        { code: currentCode, prompt },
+        {
+          endpoint: apiEndpoint,
+          onProgress: (note) => setStreamingNotes((prev) => [...prev, note]),
+        },
+      );
+
+      entries.push({
+        prompt: isRetry ? `Fix: ${prompt}` : prompt,
+        summary: response.summary,
+        isRetry,
+      });
+
+      if (compile) {
+        const compileResult = await compile(response.newCode);
+        if (!compileResult.success && compileResult.error) {
+          setStreamingNotes([]);
+          const errorPrompt = `Compilation error: ${compileResult.error}\n\nPlease fix this error.`;
+          const retryResult = await performEdit(
+            response.newCode,
+            errorPrompt,
+            true,
+          );
+          return {
+            newCode: retryResult.newCode,
+            entries: [...entries, ...retryResult.entries],
+          };
+        }
+      }
+
+      return { newCode: response.newCode, entries };
+    },
+    [compile, apiEndpoint],
+  );
+
+  const currentCode = useMemo(
+    () => project.files.get(activeFile)?.content ?? '',
+    [project, activeFile],
+  );
+
+  const submitEdit = useCallback(
+    async (prompt: string) => {
+      if (!prompt.trim() || isApplying) return;
+
+      setIsApplying(true);
+      setError(null);
+      setStreamingNotes([]);
+      setPendingPrompt(prompt);
+
+      try {
+        const result = await performEdit(currentCode, prompt);
+        setProject((prev) => {
+          const updated = cloneProject(prev);
+          const file = updated.files.get(activeFile);
+          if (file) {
+            updated.files.set(activeFile, { ...file, content: result.newCode });
+          }
+          return updated;
+        });
+        setHistory((prev) => [...prev, ...result.entries]);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Edit failed');
+      } finally {
+        setIsApplying(false);
+        setStreamingNotes([]);
+        setPendingPrompt(null);
+      }
+    },
+    [currentCode, activeFile, isApplying, performEdit],
+  );
+
+  const revert = useCallback(() => {
+    setProject(originalProject);
+    setActiveFile(originalProject.entry);
+    setHistory([]);
+    setError(null);
+    setStreamingNotes([]);
+  }, [originalProject]);
+
+  const updateActiveFile = useCallback(
+    (content: string) => {
+      setProject((prev) => {
+        const updated = cloneProject(prev);
+        const file = updated.files.get(activeFile);
+        if (file) {
+          updated.files.set(activeFile, { ...file, content });
+        }
+        return updated;
+      });
+    },
+    [activeFile],
+  );
+
+  const clearError = useCallback(() => {
+    setError(null);
+  }, []);
+
+  return {
+    project,
+    originalProject,
+    activeFile,
+    history,
+    isApplying,
+    error,
+    streamingNotes,
+    pendingPrompt,
+    submitEdit,
+    revert,
+    updateActiveFile,
+    setActiveFile,
+    clearError,
+  };
+}