@aprovan/patchwork-editor 0.1.0

package/src/components/MarkdownEditor.tsx

@@ -0,0 +1,270 @@
+import { useEditor, EditorContent } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import Placeholder from '@tiptap/extension-placeholder';
+import Typography from '@tiptap/extension-typography';
+import { Markdown } from 'tiptap-markdown';
+import { TextSelection } from '@tiptap/pm/state';
+import { useEffect, useCallback, useRef } from 'react';
+import { CodeBlockExtension } from './CodeBlockExtension';
+
+interface MarkdownEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit: () => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+export function MarkdownEditor({
+  value,
+  onChange,
+  onSubmit,
+  placeholder = 'Type a message...',
+  disabled = false,
+  className = '',
+}: MarkdownEditorProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({
+        heading: { levels: [1, 2, 3] },
+        bulletList: { keepMarks: true, keepAttributes: false },
+        orderedList: { keepMarks: true, keepAttributes: false },
+        codeBlock: false, // Use our custom CodeBlockExtension
+        code: {
+          HTMLAttributes: {
+            class: 'bg-muted rounded px-1 py-0.5 font-mono text-sm',
+          },
+        },
+        blockquote: {
+          HTMLAttributes: {
+            class: 'border-l-4 border-muted-foreground/30 pl-4 italic',
+          },
+        },
+        horizontalRule: false,
+        hardBreak: { keepMarks: false },
+      }),
+      CodeBlockExtension,
+      Placeholder.configure({
+        placeholder,
+        emptyEditorClass: 'is-editor-empty',
+      }),
+      Typography,
+      Markdown.configure({
+        html: false,
+        transformPastedText: true,
+        transformCopiedText: true,
+      }),
+    ],
+    content: value,
+    editable: !disabled,
+    editorProps: {
+      attributes: {
+        class: `outline-none min-h-[40px] max-h-[200px] overflow-y-auto px-3 py-2 ${className}`,
+      },
+      handleKeyDown: (view, event) => {
+        const { state } = view;
+        const { selection } = state;
+        const { $from, $to, empty } = selection;
+
+        const parentType = $from.parent.type.name;
+        const isInList = parentType === 'listItem';
+        const isInCodeBlock = parentType === 'codeBlock';
+
+        // Cmd/Ctrl+A in code block: select just the code block content
+        if ((event.metaKey || event.ctrlKey) && event.key === 'a' && isInCodeBlock) {
+          event.preventDefault();
+          const { tr } = state;
+          tr.setSelection(TextSelection.create(tr.doc, $from.start(), $from.end()));
+          view.dispatch(tr);
+          return true;
+        }
+
+        // ArrowUp at first line of code block: focus language input
+        if (event.key === 'ArrowUp' && isInCodeBlock) {
+          const textBefore = $from.parent.textContent.slice(0, $from.parentOffset);
+          if (!textBefore.includes('\n')) {
+            const domPos = view.domAtPos($from.start());
+            const wrapper = domPos.node.parentElement?.closest('.code-block-wrapper');
+            const langInput = wrapper?.querySelector('.language-input') as HTMLInputElement;
+            if (langInput) {
+              event.preventDefault();
+              langInput.focus();
+              langInput.select();
+              return true;
+            }
+          }
+        }
+
+        // Tab handling in code blocks
+        if (event.key === 'Tab' && isInCodeBlock) {
+          event.preventDefault();
+          const { tr } = state;
+
+          if (empty) {
+            if (event.shiftKey) {
+              const textBefore = $from.parent.textContent.slice(0, $from.parentOffset);
+              if (textBefore.endsWith('  ')) {
+                tr.delete($from.pos - 2, $from.pos);
+              } else if (textBefore.endsWith(' ')) {
+                tr.delete($from.pos - 1, $from.pos);
+              }
+            } else {
+              tr.insertText('  ');
+            }
+          } else {
+            const text = $from.parent.textContent;
+            const lineStart = text.lastIndexOf('\n', $from.parentOffset - 1) + 1;
+            const lineEnd = text.indexOf('\n', $to.parentOffset);
+            const actualEnd = lineEnd === -1 ? text.length : lineEnd;
+            const selectedText = text.slice(lineStart, actualEnd);
+            const lines = selectedText.split('\n');
+
+            const newText = event.shiftKey
+              ? lines.map(line => line.replace(/^  ?/, '')).join('\n')
+              : lines.map(line => '  ' + line).join('\n');
+
+            const blockStart = $from.start();
+            tr.replaceWith(blockStart + lineStart, blockStart + actualEnd, state.schema.text(newText));
+          }
+
+          view.dispatch(tr);
+          return true;
+        }
+
+        // Enter key handling
+        if (event.key === 'Enter') {
+          if (isInCodeBlock) {
+            if (event.shiftKey) {
+              event.preventDefault();
+              const { tr } = state;
+              tr.insertText('\n');
+              view.dispatch(tr);
+              return true;
+            }
+            event.preventDefault();
+            onSubmit();
+            return true;
+          }
+
+          // Shift+Enter: create new paragraph (enables input rules on new lines)
+          if (event.shiftKey) {
+            event.preventDefault();
+            const { tr } = state;
+            view.dispatch(tr.split($from.pos));
+            return true;
+          }
+
+          // Regular Enter: submit (unless in list)
+          if (!isInList) {
+            event.preventDefault();
+            onSubmit();
+            return true;
+          }
+        }
+
+        return false;
+      },
+    },
+    onUpdate: ({ editor }) => {
+      // Get markdown output from tiptap-markdown extension
+      const markdownStorage = (editor.storage as any).markdown;
+      if (markdownStorage?.getMarkdown) {
+        onChange(markdownStorage.getMarkdown());
+      } else {
+        onChange(editor.getText());
+      }
+    },
+  });
+
+  // Handle paste - prefer plain text to avoid VS Code HTML wrapping
+  useEffect(() => {
+    if (!editor) return;
+
+    const handlePaste = (event: ClipboardEvent) => {
+      const plainText = event.clipboardData?.getData('text/plain');
+      const htmlText = event.clipboardData?.getData('text/html');
+
+      if (!plainText) return;
+
+      const { $from } = editor.state.selection;
+      const isInCodeBlock = $from.parent.type.name === 'codeBlock';
+
+      // In code blocks, always paste as plain text
+      if (isInCodeBlock) {
+        event.preventDefault();
+        event.stopPropagation();
+        const { tr } = editor.state;
+        tr.insertText(plainText);
+        editor.view.dispatch(tr);
+        return;
+      }
+
+      // Outside code blocks: intercept HTML to parse as markdown
+      if (htmlText) {
+        event.preventDefault();
+        event.stopPropagation();
+
+        const markdownStorage = (editor.storage as any).markdown;
+        if (markdownStorage?.parser) {
+          try {
+            const parsed = markdownStorage.parser.parse(plainText);
+            if (parsed?.content?.size > 0) {
+              const nodes: any[] = [];
+              parsed.content.forEach((node: any) => nodes.push(node.toJSON()));
+              editor.chain().focus().insertContent(nodes).run();
+              return;
+            }
+          } catch (e) {
+            console.warn('Markdown parse failed, falling back to plain text', e);
+          }
+        }
+
+        editor.chain().focus().insertContent(plainText).run();
+      }
+    };
+
+    const container = containerRef.current;
+    container?.addEventListener('paste', handlePaste, { capture: true });
+    return () => container?.removeEventListener('paste', handlePaste, { capture: true });
+  }, [editor]);
+
+  // Clear content when value is reset externally
+  useEffect(() => {
+    if (editor && value === '' && editor.getText() !== '') {
+      editor.commands.clearContent();
+    }
+  }, [editor, value]);
+
+  // Update editable state
+  useEffect(() => {
+    editor?.setEditable(!disabled);
+  }, [editor, disabled]);
+
+  const focus = useCallback(() => {
+    editor?.commands.focus();
+  }, [editor]);
+
+  useEffect(() => {
+    if (editor) {
+      (editor as any).focusInput = focus;
+    }
+  }, [editor, focus]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={`
+        flex-1 rounded-md border border-input bg-background text-sm
+        ring-offset-background
+        focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2
+        ${disabled ? 'cursor-not-allowed opacity-50' : ''}
+      `}
+      onClick={() => editor?.commands.focus()}
+    >
+      <EditorContent editor={editor} className="markdown-editor" />
+    </div>
+  );
+}

package/src/components/ServicesInspector.tsx

@@ -0,0 +1,118 @@
+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>;
+  };
+}
+
+interface ServicesInspectorProps {
+  namespaces: string[];
+  services?: ServiceInfo[];
+  /** Custom badge component for rendering the service count */
+  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 }>;
+  /** Custom dialog components */
+  DialogComponent?: React.ComponentType<{ children: React.ReactNode; open?: boolean; onOpenChange?: (open: boolean) => void }>;
+  DialogHeaderComponent?: React.ComponentType<{ children: React.ReactNode }>;
+  DialogContentComponent?: React.ComponentType<{ children: React.ReactNode }>;
+  DialogCloseComponent?: React.ComponentType<{ onClose?: () => void }>;
+}
+
+// Fallback components for when custom UI is not provided
+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}`}>
+      {children}
+    </span>
+  );
+}
+
+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()}>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export function ServicesInspector({ 
+  namespaces, 
+  services = [],
+  BadgeComponent = DefaultBadge,
+  DialogComponent = DefaultDialog,
+}: 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;
+  }, {});
+
+  return (
+    <>
+      <button
+        onClick={() => setOpen(true)}
+        className="flex items-center gap-2 hover:opacity-80 transition-opacity"
+      >
+        <Server className="h-4 w-4 text-muted-foreground" />
+        <BadgeComponent className="text-xs">
+          {namespaces.length} service{namespaces.length !== 1 ? 's' : ''}
+        </BadgeComponent>
+      </button>
+
+      <DialogComponent open={open} onOpenChange={setOpen}>
+        <div className="flex justify-between items-center mb-4">
+          <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">
+          {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">
+                <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                <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' : ''}
+                  </BadgeComponent>
+                )}
+              </summary>
+              <div className="ml-6 mt-2 space-y-2">
+                {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" />
+                      <code className="font-mono text-xs">{svc.procedure}</code>
+                      <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>
+                  </details>
+                )) ?? (
+                  <p className="text-xs text-muted-foreground">No tool details available</p>
+                )}
+              </div>
+            </details>
+          ))}
+        </div>
+      </DialogComponent>
+    </>
+  );
+}

package/src/components/edit/EditHistory.tsx

@@ -0,0 +1,89 @@
+import { useRef, useEffect } from 'react';
+import { Loader2 } from 'lucide-react';
+import Markdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import type { EditHistoryEntry } from './types';
+
+interface EditHistoryProps {
+  entries: EditHistoryEntry[];
+  streamingNotes: string[];
+  isStreaming: boolean;
+  pendingPrompt?: string | null;
+  className?: string;
+}
+
+function ProgressNote({ text, isLatest }: { text: string; isLatest?: boolean }) {
+  return (
+    <div className="flex items-center gap-2 text-muted-foreground/60">
+      {isLatest && <Loader2 className="h-3 w-3 animate-spin" />}
+      <p className="text-xs italic">{text}</p>
+    </div>
+  );
+}
+
+export function EditHistory({
+  entries,
+  streamingNotes,
+  isStreaming,
+  pendingPrompt,
+  className = '',
+}: EditHistoryProps) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [entries, streamingNotes, pendingPrompt]);
+
+  return (
+    <div
+      ref={scrollRef}
+      className={`overflow-y-auto p-4 space-y-4 bg-background ${className}`}
+    >
+      {entries.map((entry, i) => (
+        <div key={i} className="space-y-3">
+          <div className="flex justify-end">
+            <div className="bg-primary text-primary-foreground rounded-lg px-4 py-2 max-w-[85%]">
+              <div className="prose prose-sm prose-invert max-w-none prose-p:my-1 prose-headings:my-2 prose-ul:my-1 prose-ol:my-1 prose-li:my-0">
+                <Markdown remarkPlugins={[remarkGfm]}>{entry.prompt}</Markdown>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex justify-start">
+            <div className="bg-primary/10 rounded-lg px-4 py-2 max-w-[85%]">
+              <div className="prose prose-sm dark:prose-invert max-w-none prose-p:my-1 prose-headings:my-2 prose-ul:my-1 prose-ol:my-1 prose-li:my-0">
+                <Markdown remarkPlugins={[remarkGfm]}>{entry.summary}</Markdown>
+              </div>
+            </div>
+          </div>
+        </div>
+      ))}
+
+      {pendingPrompt && (
+        <div className="space-y-3">
+          <div className="flex justify-end">
+            <div className="bg-primary text-primary-foreground rounded-lg px-4 py-2 max-w-[85%]">
+              <div className="prose prose-sm prose-invert max-w-none prose-p:my-1 prose-headings:my-2 prose-ul:my-1 prose-ol:my-1 prose-li:my-0">
+                <Markdown remarkPlugins={[remarkGfm]}>{pendingPrompt}</Markdown>
+              </div>
+            </div>
+          </div>
+
+          {isStreaming && streamingNotes.length > 0 && (
+            <div className="space-y-1 py-2 px-3">
+              {streamingNotes.map((note, i) => (
+                <ProgressNote
+                  key={i}
+                  text={note}
+                  isLatest={i === streamingNotes.length - 1}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}