@aprovan/patchwork-editor 0.1.2-dev.03aaf5b → 0.1.2-dev.ba8f277

package/src/components/ServicesInspector.tsx

@@ -1,66 +1,123 @@
-import { useState } from 'react';
-import { ChevronDown, Server } from 'lucide-react';
+import { useState } from "react";
+import { ChevronDown, Server } from "lucide-react";
 
 export interface ServiceInfo {
   name: string;
   namespace: string;
   procedure: string;
   description: string;
-  parameters: {
-    jsonSchema: Record<string, unknown>;
-  };
+  parameters?: Record<string, unknown>;
 }
 
 interface ServicesInspectorProps {
   namespaces: string[];
   services?: ServiceInfo[];
   /** Custom badge component for rendering the service count */
-  BadgeComponent?: React.ComponentType<{ children: React.ReactNode; variant?: string; className?: string }>;
+  BadgeComponent?: React.ComponentType<{
+    children: React.ReactNode;
+    variant?: string;
+    className?: string;
+  }>;
   /** Custom collapsible components */
-  CollapsibleComponent?: React.ComponentType<{ children: React.ReactNode; defaultOpen?: boolean; className?: string }>;
-  CollapsibleTriggerComponent?: React.ComponentType<{ children: React.ReactNode; className?: string }>;
-  CollapsibleContentComponent?: React.ComponentType<{ children: React.ReactNode }>;
+  CollapsibleComponent?: React.ComponentType<{
+    children: React.ReactNode;
+    defaultOpen?: boolean;
+    className?: string;
+  }>;
+  CollapsibleTriggerComponent?: React.ComponentType<{
+    children: React.ReactNode;
+    className?: string;
+  }>;
+  CollapsibleContentComponent?: React.ComponentType<{
+    children: React.ReactNode;
+  }>;
   /** Custom dialog components */
-  DialogComponent?: React.ComponentType<{ children: React.ReactNode; open?: boolean; onOpenChange?: (open: boolean) => void }>;
+  DialogComponent?: React.ComponentType<{
+    children: React.ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+  }>;
   DialogHeaderComponent?: React.ComponentType<{ children: React.ReactNode }>;
-  DialogContentComponent?: React.ComponentType<{ children: React.ReactNode }>;
+  DialogContentComponent?: React.ComponentType<{
+    children: React.ReactNode;
+    className?: string;
+  }>;
   DialogCloseComponent?: React.ComponentType<{ onClose?: () => void }>;
 }
 
 // Fallback components for when custom UI is not provided
-function DefaultBadge({ children, className = '' }: { children: React.ReactNode; className?: string }) {
+function DefaultBadge({
+  children,
+  className = "",
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
   return (
-    <span className={`inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 ${className}`}>
+    <span
+      className={`inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 ${className}`}
+    >
       {children}
     </span>
   );
 }
 
-function DefaultDialog({ children, open, onOpenChange }: { children: React.ReactNode; open?: boolean; onOpenChange?: (open: boolean) => void }) {
+function DefaultDialog({
+  children,
+  open,
+  onOpenChange,
+}: {
+  children: React.ReactNode;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}) {
   if (!open) return null;
   return (
-    <div className="fixed inset-0 z-50 bg-black/50" onClick={() => onOpenChange?.(false)}>
-      <div className="fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 bg-background p-6 shadow-lg rounded-lg" onClick={e => e.stopPropagation()}>
+    <div
+      className="fixed inset-0 z-50 bg-black/50"
+      onClick={() => onOpenChange?.(false)}
+    >
+      <div
+        className="fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 bg-background p-6 shadow-lg rounded-lg"
+        onClick={(e) => e.stopPropagation()}
+      >
         {children}
       </div>
     </div>
   );
 }
 
-export function ServicesInspector({ 
-  namespaces, 
+export function ServicesInspector({
+  namespaces,
   services = [],
   BadgeComponent = DefaultBadge,
   DialogComponent = DefaultDialog,
+  DialogHeaderComponent = ({ children }) => (
+    <div className="flex justify-between items-center mb-4">{children}</div>
+  ),
+  DialogContentComponent = ({ children, className = "" }) => (
+    <div className={className}>{children}</div>
+  ),
+  DialogCloseComponent = ({ onClose }) => (
+    <button
+      onClick={() => onClose?.()}
+      className="text-muted-foreground hover:text-foreground"
+    >
+      ×
+    </button>
+  ),
 }: ServicesInspectorProps) {
   const [open, setOpen] = useState(false);
 
   if (namespaces.length === 0) return null;
 
-  const groupedServices = services.reduce<Record<string, ServiceInfo[]>>((acc, svc) => {
-    (acc[svc.namespace] ??= []).push(svc);
-    return acc;
-  }, {});
+  const groupedServices = services.reduce<Record<string, ServiceInfo[]>>(
+    (acc, svc) => {
+      (acc[svc.namespace] ??= []).push(svc);
+      return acc;
+    },
+    {},
+  );
 
   return (
     <>
@@ -70,16 +127,16 @@ export function ServicesInspector({
       >
         <Server className="h-4 w-4 text-muted-foreground" />
         <BadgeComponent className="text-xs">
-          {namespaces.length} service{namespaces.length !== 1 ? 's' : ''}
+          {namespaces.length} service{namespaces.length !== 1 ? "s" : ""}
         </BadgeComponent>
       </button>
 
       <DialogComponent open={open} onOpenChange={setOpen}>
-        <div className="flex justify-between items-center mb-4">
+        <DialogHeaderComponent>
           <h2 className="text-lg font-semibold">Available Services</h2>
-          <button onClick={() => setOpen(false)} className="text-muted-foreground hover:text-foreground">×</button>
-        </div>
-        <div className="space-y-3 max-h-96 overflow-auto">
+          <DialogCloseComponent onClose={() => setOpen(false)} />
+        </DialogHeaderComponent>
+        <DialogContentComponent className="space-y-3 max-h-96 overflow-auto">
           {namespaces.map((ns) => (
             <details key={ns} open={namespaces.length === 1}>
               <summary className="flex items-center gap-2 w-full p-2 rounded bg-muted/50 hover:bg-muted transition-colors cursor-pointer">
@@ -87,7 +144,8 @@ export function ServicesInspector({
                 <span className="font-medium text-sm">{ns}</span>
                 {groupedServices[ns] && (
                   <BadgeComponent className="ml-auto text-xs">
-                    {groupedServices[ns].length} tool{groupedServices[ns].length !== 1 ? 's' : ''}
+                    {groupedServices[ns].length} tool
+                    {groupedServices[ns].length !== 1 ? "s" : ""}
                   </BadgeComponent>
                 )}
               </summary>
@@ -95,23 +153,29 @@ export function ServicesInspector({
                 {groupedServices[ns]?.map((svc) => (
                   <details key={svc.name}>
                     <summary className="flex items-center gap-2 w-full text-left text-sm hover:text-foreground text-muted-foreground transition-colors cursor-pointer">
-                      <ChevronDown className="h-3 w-3" />
+                      {svc.parameters && <ChevronDown className="h-3 w-3" />}
                       <code className="font-mono text-xs">{svc.procedure}</code>
-                      <span className="truncate text-xs opacity-70">{svc.description}</span>
+                      <span className="truncate text-xs opacity-70">
+                        {svc.description}
+                      </span>
                     </summary>
-                    <div className="ml-5 mt-1 p-2 rounded border bg-muted/30 overflow-auto max-h-48">
-                      <pre className="text-xs font-mono whitespace-pre-wrap break-words m-0">
-                        {JSON.stringify(svc.parameters.jsonSchema, null, 2)}
-                      </pre>
-                    </div>
+                    {svc.parameters && (
+                      <div className="ml-5 mt-1 p-2 rounded border bg-muted/30 overflow-auto max-h-48">
+                        <pre className="text-xs font-mono whitespace-pre-wrap break-words m-0">
+                          {JSON.stringify(svc.parameters, null, 2)}
+                        </pre>
+                      </div>
+                    )}
                   </details>
                 )) ?? (
-                  <p className="text-xs text-muted-foreground">No tool details available</p>
+                  <p className="text-xs text-muted-foreground">
+                    No tool details available
+                  </p>
                 )}
               </div>
             </details>
           ))}
-        </div>
+        </DialogContentComponent>
       </DialogComponent>
     </>
   );

package/src/components/WidgetPreview.tsx

@@ -0,0 +1,102 @@
+import { useEffect, useRef, useState } from 'react';
+import { AlertCircle, Loader2 } from 'lucide-react';
+import type { Compiler, Manifest, MountedWidget } from '@aprovan/patchwork-compiler';
+
+export interface WidgetPreviewProps {
+  code: string;
+  compiler: Compiler | null;
+  services?: string[];
+  enabled?: boolean;
+}
+
+function createManifest(services?: string[]): Manifest {
+  return {
+    name: 'preview',
+    version: '1.0.0',
+    platform: 'browser',
+    image: '@aprovan/patchwork-image-shadcn',
+    services,
+  };
+}
+
+export function WidgetPreview({
+  code,
+  compiler,
+  services,
+  enabled = true,
+}: WidgetPreviewProps) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const mountedRef = useRef<MountedWidget | null>(null);
+
+  useEffect(() => {
+    if (!enabled || !compiler || !containerRef.current) return;
+
+    let cancelled = false;
+
+    const compileAndMount = async () => {
+      setLoading(true);
+      setError(null);
+
+      try {
+        if (mountedRef.current) {
+          compiler.unmount(mountedRef.current);
+          mountedRef.current = null;
+        }
+
+        const widget = await compiler.compile(code, createManifest(services), {
+          typescript: true,
+        });
+
+        if (cancelled || !containerRef.current) return;
+
+        const mounted = await compiler.mount(widget, {
+          target: containerRef.current,
+          mode: 'embedded',
+        });
+
+        mountedRef.current = mounted;
+      } catch (err) {
+        if (!cancelled) {
+          setError(err instanceof Error ? err.message : 'Failed to render preview');
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    };
+
+    void compileAndMount();
+
+    return () => {
+      cancelled = true;
+      if (mountedRef.current && compiler) {
+        compiler.unmount(mountedRef.current);
+        mountedRef.current = null;
+      }
+    };
+  }, [code, compiler, enabled, services]);
+
+  return (
+    <>
+      {error && (
+        <div className="text-sm text-destructive flex items-center gap-2 p-3">
+          <AlertCircle className="h-4 w-4 shrink-0" />
+          <span>{error}</span>
+        </div>
+      )}
+      {loading && (
+        <div className="p-3 flex items-center gap-2 text-muted-foreground">
+          <Loader2 className="h-4 w-4 animate-spin" />
+          <span className="text-sm">Rendering preview...</span>
+        </div>
+      )}
+      {!compiler && enabled && !loading && !error && (
+        <div className="p-3 text-sm text-muted-foreground">Compiler not initialized</div>
+      )}
+      <div ref={containerRef} className="w-full" />
+    </>
+  );
+}

package/src/components/edit/EditModal.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback, useMemo, useRef, type ReactNode } from 'react';
+import { useState, useCallback, useMemo, useRef, useEffect, type ReactNode } from 'react';
 import {
   Code,
   Eye,
@@ -10,9 +10,10 @@ import {
   Send,
   FolderTree,
   FileCode,
-  Save,
 } from 'lucide-react';
 import { MarkdownEditor } from '../MarkdownEditor';
+import { MarkdownPreview } from '../MarkdownPreview';
+import { SaveStatusButton, type SaveStatus } from '../SaveStatusButton';
 import { EditHistory } from './EditHistory';
 import { FileTree } from './FileTree';
 import { SaveConfirmDialog } from './SaveConfirmDialog';
@@ -20,7 +21,7 @@ import { CodeBlockView } from './CodeBlockView';
 import { MediaPreview } from './MediaPreview';
 import { useEditSession, type UseEditSessionOptions } from './useEditSession';
 import { getActiveContent, getFiles } from './types';
-import { getFileType, isCompilable, getMimeType } from './fileTypes';
+import { getFileType, isCompilable, isMarkdownFile, getMimeType } from './fileTypes';
 import { Bobbin, serializeChangesToYAML, type Change } from '@aprovan/bobbin';
 import type { VirtualProject } from '@aprovan/patchwork-compiler';
 
@@ -36,6 +37,7 @@ function hashCode(str: string): number {
 
 export interface EditModalProps extends UseEditSessionOptions {
   isOpen: boolean;
+  initialTreePath?: string;
   initialState?: Partial<{
     showTree: boolean;
     showPreview: boolean;
@@ -61,6 +63,7 @@ export function EditModal({
   renderError,
   previewError,
   previewLoading,
+  initialTreePath,
   initialState = {},
   hideFileTree = false,
   ...sessionOptions
@@ -75,19 +78,33 @@ export function EditModal({
   const [pillContainer, setPillContainer] = useState<HTMLDivElement | null>(null);
   const [showConfirm, setShowConfirm] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
+  const [saveStatus, setSaveStatus] = useState<SaveStatus>('saved');
+  const [lastSavedSnapshot, setLastSavedSnapshot] = useState('');
   const [saveError, setSaveError] = useState<string | null>(null);
   const [pendingClose, setPendingClose] = useState<{ code: string; count: number } | null>(null);
+  const [treePath, setTreePath] = useState(initialTreePath ?? '');
+  const wasOpenRef = useRef(false);
   const currentCodeRef = useRef<string>('');
 
   const session = useEditSession(sessionOptions);
   const code = getActiveContent(session);
+  const effectiveTreePath = treePath || session.activeFile;
   currentCodeRef.current = code;
   const files = useMemo(() => getFiles(session.project), [session.project]);
+  const projectSnapshot = useMemo(
+    () =>
+      Array.from(session.project.files.entries())
+        .sort(([a], [b]) => a.localeCompare(b))
+        .map(([path, file]) => `${path}\u0000${file.content}`)
+        .join('\u0001'),
+    [session.project]
+  );
   const hasChanges = code !== (session.originalProject.files.get(session.activeFile)?.content ?? '');
 
   const fileType = useMemo(() => getFileType(session.activeFile), [session.activeFile]);
   const isCompilableFile = isCompilable(session.activeFile);
-  const showPreviewToggle = isCompilableFile;
+  const isMarkdown = isMarkdownFile(session.activeFile);
+  const showPreviewToggle = isCompilableFile || isMarkdown;
 
   const handleBobbinChanges = useCallback((changes: Change[]) => {
     setBobbinChanges(changes);
@@ -111,6 +128,28 @@ export function EditModal({
 
   const hasSaveHandler = onSave || onSaveProject;
 
+  useEffect(() => {
+    if (isOpen && !wasOpenRef.current) {
+      setLastSavedSnapshot(projectSnapshot);
+      setSaveStatus('saved');
+      setSaveError(null);
+    }
+    wasOpenRef.current = isOpen;
+  }, [isOpen, projectSnapshot]);
+
+  useEffect(() => {
+    if (!hasSaveHandler) return;
+    if (projectSnapshot === lastSavedSnapshot) {
+      if (saveStatus !== 'saving' && saveStatus !== 'saved') {
+        setSaveStatus('saved');
+      }
+      return;
+    }
+    if (saveStatus === 'saved' || saveStatus === 'error') {
+      setSaveStatus('unsaved');
+    }
+  }, [projectSnapshot, lastSavedSnapshot, saveStatus, hasSaveHandler]);
+
   const handleClose = useCallback(() => {
     const editCount = session.history.length;
     const finalCode = code;
@@ -129,6 +168,7 @@ export function EditModal({
   const handleSaveAndClose = useCallback(async () => {
     if (!pendingClose || !hasSaveHandler) return;
     setIsSaving(true);
+    setSaveStatus('saving');
     setSaveError(null);
     try {
       if (onSaveProject) {
@@ -136,6 +176,8 @@ export function EditModal({
       } else if (onSave) {
         await onSave(pendingClose.code);
       }
+      setLastSavedSnapshot(projectSnapshot);
+      setSaveStatus('saved');
       setShowConfirm(false);
       setEditInput('');
       session.clearError();
@@ -143,10 +185,11 @@ export function EditModal({
       setPendingClose(null);
     } catch (e) {
       setSaveError(e instanceof Error ? e.message : 'Save failed');
+      setSaveStatus('error');
     } finally {
       setIsSaving(false);
     }
-  }, [pendingClose, onSave, onSaveProject, session, onClose]);
+  }, [pendingClose, onSave, onSaveProject, session, onClose, projectSnapshot, hasSaveHandler]);
 
   const handleDiscard = useCallback(() => {
     if (!pendingClose) return;
@@ -166,6 +209,7 @@ export function EditModal({
   const handleDirectSave = useCallback(async () => {
     if (!hasSaveHandler) return;
     setIsSaving(true);
+    setSaveStatus('saving');
     setSaveError(null);
     try {
       if (onSaveProject) {
@@ -173,12 +217,15 @@ export function EditModal({
       } else if (onSave && currentCodeRef.current) {
         await onSave(currentCodeRef.current);
       }
+      setLastSavedSnapshot(projectSnapshot);
+      setSaveStatus('saved');
     } catch (e) {
       setSaveError(e instanceof Error ? e.message : 'Save failed');
+      setSaveStatus('error');
     } finally {
       setIsSaving(false);
     }
-  }, [onSave, onSaveProject, session.project]);
+  }, [onSave, onSaveProject, session.project, hasSaveHandler, projectSnapshot]);
 
   if (!isOpen) return null;
 
@@ -213,30 +260,23 @@ export function EditModal({
                 {showTree ? <FileCode className="h-3 w-3" /> : <FolderTree className="h-3 w-3" />}
               </button>
             )}
+            {hasSaveHandler && (
+              <SaveStatusButton
+                status={saveStatus}
+                onClick={handleDirectSave}
+                disabled={isSaving}
+                tone="primary"
+              />
+            )}
             {showPreviewToggle && (
               <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'}`}
+                className={`w-[5rem] 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>
             )}
-            {hasSaveHandler && (
-              <button
-                onClick={handleDirectSave}
-                disabled={isSaving}
-                className="px-2 py-1 text-xs rounded flex items-center gap-1 hover:bg-primary/20 text-primary disabled:opacity-50"
-                title="Save changes"
-              >
-                {isSaving ? (
-                  <Loader2 className="h-3 w-3 animate-spin" />
-                ) : (
-                  <Save className="h-3 w-3" />
-                )}
-                Save
-              </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"
@@ -253,7 +293,12 @@ export function EditModal({
             <FileTree
               files={files}
               activeFile={session.activeFile}
-              onSelectFile={session.setActiveFile}
+              activePath={effectiveTreePath}
+              onSelectFile={(path) => {
+                setTreePath(path);
+                session.setActiveFile(path);
+              }}
+              onSelectDirectory={(path) => setTreePath(path)}
               onReplaceFile={session.replaceFile}
             />
           )}
@@ -293,6 +338,14 @@ export function EditModal({
                 editable
                 onChange={session.updateActiveFile}
               />
+            ) : isMarkdown && showPreview ? (
+              <div className="p-4 prose prose-sm dark:prose-invert max-w-none h-full overflow-auto">
+                <MarkdownPreview
+                  value={code}
+                  editable
+                  onChange={session.updateActiveFile}
+                />
+              </div>
             ) : fileType.category === 'text' ? (
               <CodeBlockView
                 content={code}
@@ -306,10 +359,14 @@ export function EditModal({
                 mimeType={getMimeType(session.activeFile)}
                 fileName={session.activeFile.split('/').pop() ?? session.activeFile}
               />
+            // Default to code view for unknown types
             ) : (
-              <div className="flex items-center justify-center h-full text-muted-foreground">
-                <p className="text-sm">Preview not available for this file type</p>
-              </div>
+              <CodeBlockView
+                content={code}
+                language={fileType.language}
+                editable
+                onChange={session.updateActiveFile}
+              />
             )}
           </div>
         </div>