gitmaps 1.0.0 → 1.1.1

package/app/lib/chat.tsx

@@ -24,9 +24,29 @@ interface ChatState {
 const fileChatStates = new Map<string, ChatState>();
 let canvasChatState: ChatState = { messages: [], isStreaming: false };
 
-// ─── Render markdown-ish content to safe HTML string ────
+// Store parsed refactors to avoid passing huge string payloads via DOM attributes
+const pendingRefactors = new Map<string, { path: string, content: string }>();
+
 function renderChatContent(text: string): string {
     let html = escapeHtml(text);
+
+    // Parse escaped <edit_file path="...">...</edit_file>
+    const editRegex = /&lt;edit_file path=&quot;([^&]+)&quot;&gt;([\s\S]*?)&lt;\/edit_file&gt;/g;
+    html = html.replace(editRegex, (_, path, content) => {
+        const decodedContent = content.replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&quot;/g, '"');
+        const id = Math.random().toString(36).substring(7);
+        pendingRefactors.set(id, { path, content: decodedContent });
+        return `
+            <div class="chat-refactor-block" style="margin: 10px 0; border: 1px solid var(--border); border-radius: 6px; overflow: hidden;">
+                <div class="chat-refactor-header" style="background: var(--bg-card); padding: 4px 8px; font-size: 11px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border);">
+                    <span style="font-family: monospace;">📄 ${path}</span>
+                    <button class="chat-refactor-apply btn-primary btn-xs" data-refactor-id="${id}" style="padding: 2px 8px; font-size: 10px; border-radius: 4px;">Apply Edit</button>
+                </div>
+                <pre class="chat-code-block" style="margin: 0; border-radius: 0; max-height: 200px; overflow-y: auto;"><code class="language-typescript">${content.trim()}</code></pre>
+            </div>
+        `;
+    });
+
     html = html.replace(/```(\w+)?\n([\s\S]*?)```/g, (_, lang, code) =>
         `<pre class="chat-code-block"><code class="language-${lang || 'text'}">${code.trim()}</code></pre>`);
     html = html.replace(/`([^`]+)`/g, '<code class="chat-inline-code">$1</code>');
@@ -60,12 +80,47 @@ function EmptyChat() {
     );
 }
 
-function MessageList({ messages, isTyping }: { messages: ChatMessage[]; isTyping: boolean }) {
+function MessageList({ messages, isTyping, repoPath }: { messages: ChatMessage[]; isTyping: boolean; repoPath?: string }) {
     if (messages.length === 0 && !isTyping) {
         return <EmptyChat />;
     }
+
+    const handleClick = async (e: any) => {
+        const btn = e.target.closest('.chat-refactor-apply');
+        if (!btn || btn.disabled) return;
+
+        const id = btn.getAttribute('data-refactor-id');
+        const refactor = pendingRefactors.get(id);
+        if (!refactor) return;
+
+        const actualRepoPath = repoPath || canvasChatState.canvasContext?.repoPath;
+        if (!actualRepoPath) {
+            btn.textContent = 'No Repo Context';
+            return;
+        }
+
+        btn.disabled = true;
+        btn.textContent = 'Applying...';
+
+        try {
+            const res = await fetch('/api/repo/file-save', {
+                method: 'POST',
+                body: JSON.stringify({ path: actualRepoPath, filePath: refactor.path, content: refactor.content })
+            });
+            if (res.ok) {
+                btn.textContent = 'Applied ✓';
+                btn.style.background = 'var(--accent-success, #10b981)';
+                btn.style.borderColor = 'var(--accent-success, #10b981)';
+            } else {
+                btn.textContent = 'Error';
+            }
+        } catch (err) {
+            btn.textContent = 'Failed';
+        }
+    };
+
     return (
-        <div className="chat-message-list-inner">
+        <div className="chat-message-list-inner" onClick={handleClick}>
             {messages.map((msg, i) => (
                 <div key={i} className={`chat-message chat-${msg.role}`}>
                     <div className="chat-message-role">{msg.role === 'user' ? 'You' : 'AI'}</div>
@@ -78,10 +133,10 @@ function MessageList({ messages, isTyping }: { messages: ChatMessage[]; isTyping
 }
 
 function ChatPanel({
-    containerId, title, messages, isTyping, onSend, onClose
+    containerId, title, messages, isTyping, repoPath, onSend, onClose
 }: {
     containerId: string; title: string; messages: ChatMessage[];
-    isTyping: boolean; onSend: (text: string) => void; onClose: () => void;
+    isTyping: boolean; repoPath?: string; onSend: (text: string) => void; onClose: () => void;
 }) {
     const handleSend = () => {
         const input = document.getElementById(`${containerId}Input`) as HTMLTextAreaElement;
@@ -108,7 +163,7 @@ function ChatPanel({
                 <button className="chat-close btn-ghost btn-xs" onClick={onClose}>✕</button>
             </div>
             <div className="chat-messages" id={`${containerId}Messages`}>
-                <MessageList messages={messages} isTyping={isTyping} />
+                <MessageList messages={messages} isTyping={isTyping} repoPath={repoPath} />
             </div>
             <div className="chat-input-area">
                 <textarea
@@ -146,6 +201,7 @@ function renderChatPanel(container: HTMLElement, containerId: string, title: str
                 title={title}
                 messages={state.messages}
                 isTyping={state.isStreaming && state.messages[state.messages.length - 1]?.content === ''}
+                repoPath={state.fileContext?.repoPath || state.canvasContext?.repoPath}
                 onSend={onSend}
                 onClose={onClose}
             />,
@@ -240,16 +296,16 @@ async function streamResponse(
 }
 
 // ─── Open file chat in modal ────────────────────────────
-export function openFileChatInModal(filePath: string, content: string, status: string, diff?: string) {
+export function openFileChatInModal(repoPath: string, filePath: string, content: string, status: string, diff?: string) {
     measure('chat:openFileChat', () => {
         if (!fileChatStates.has(filePath)) {
             fileChatStates.set(filePath, {
                 messages: [], isStreaming: false,
-                fileContext: { path: filePath, content, status, diff },
+                fileContext: { repoPath, path: filePath, content, status, diff },
             });
         }
         const state = fileChatStates.get(filePath)!;
-        state.fileContext = { path: filePath, content, status, diff };
+        state.fileContext = { repoPath, path: filePath, content, status, diff };
 
         let chatContainer = document.getElementById('modalChatContainer');
         if (!chatContainer) return;

package/app/lib/code-editor.ts

@@ -4,8 +4,8 @@
  * Creates a CodeMirror 6 editor instance with syntax highlighting,
  * dark theme, and integration with the save/commit workflow.
  */
-import { EditorView, keymap, lineNumbers, highlightActiveLine, highlightActiveLineGutter, drawSelection, rectangularSelection, highlightSpecialChars, ViewPlugin, ViewUpdate } from '@codemirror/view';
-import { EditorState, Compartment } from '@codemirror/state';
+import { EditorView, keymap, lineNumbers, highlightActiveLine, highlightActiveLineGutter, drawSelection, rectangularSelection, highlightSpecialChars, ViewPlugin, ViewUpdate, Decoration, DecorationSet, WidgetType } from '@codemirror/view';
+import { EditorState, Compartment, StateField, StateEffect } from '@codemirror/state';
 import { syntaxHighlighting, defaultHighlightStyle, indentOnInput, bracketMatching, foldGutter, foldKeymap, HighlightStyle } from '@codemirror/language';
 import { defaultKeymap, indentWithTab, history, historyKeymap } from '@codemirror/commands';
 import { searchKeymap, highlightSelectionMatches } from '@codemirror/search';
@@ -219,6 +219,81 @@ function getLanguageExtension(ext: string) {
     }
 }
 
+// ─── Remote Cursors ─────────────────────────────────────
+export const remoteCursorsEffect = StateEffect.define<any[]>();
+
+class RemoteCursorWidget extends WidgetType {
+    constructor(readonly color: string, readonly name: string, readonly typing: boolean) { super(); }
+    toDOM() {
+        const dec = document.createElement("span");
+        dec.style.position = "relative";
+        dec.style.borderLeft = `2px solid ${this.color}`;
+        dec.style.marginLeft = "-1px";
+        dec.style.marginRight = "-1px";
+        dec.style.zIndex = "10";
+        if (this.typing) {
+            dec.style.opacity = "0.7";
+        }
+
+        const tooltip = document.createElement("div");
+        tooltip.textContent = this.name + (this.typing ? '...' : '');
+        tooltip.style.position = "absolute";
+        tooltip.style.top = "-1.5em";
+        tooltip.style.left = "-2px";
+        tooltip.style.padding = "1px 4px";
+        tooltip.style.borderRadius = "3px";
+        tooltip.style.fontSize = "10px";
+        tooltip.style.color = "white";
+        tooltip.style.whiteSpace = "nowrap";
+        tooltip.style.pointerEvents = "none";
+        tooltip.style.zIndex = "10";
+        tooltip.style.backgroundColor = this.color;
+
+        dec.appendChild(tooltip);
+        return dec;
+    }
+    ignoreEvent() { return true; }
+}
+
+const remoteCursorsField = StateField.define<DecorationSet>({
+    create() { return Decoration.none; },
+    update(decorations, tr) {
+        decorations = decorations.map(tr.changes);
+        for (let e of tr.effects) {
+            if (e.is(remoteCursorsEffect)) {
+                let builders: any[] = [];
+                for (let cursor of e.value) {
+                    if (cursor.selections) {
+                        for (let sel of cursor.selections) {
+                            let from = Math.min(sel.anchor, sel.head);
+                            let to = Math.max(sel.anchor, sel.head);
+                            from = Math.max(0, Math.min(from, tr.state.doc.length));
+                            to = Math.max(0, Math.min(to, tr.state.doc.length));
+
+                            if (from !== to) {
+                                builders.push(Decoration.mark({
+                                    attributes: { style: `background-color: ${cursor.color}40` } // 25% opacity
+                                }).range(from, to));
+                            }
+
+                            let head = Math.max(0, Math.min(sel.head, tr.state.doc.length));
+                            builders.push(Decoration.widget({
+                                widget: new RemoteCursorWidget(cursor.color, cursor.name, cursor.typing || false),
+                                side: 1
+                            }).range(head));
+                        }
+                    }
+                }
+                // Sort builders by start position
+                builders.sort((a, b) => a.from - b.from);
+                decorations = Decoration.set(builders, true);
+            }
+        }
+        return decorations;
+    },
+    provide: f => EditorView.decorations.from(f)
+});
+
 // ─── Create Editor ──────────────────────────────────────
 export interface EditorInstance {
     view: EditorView;
@@ -226,6 +301,7 @@ export interface EditorInstance {
     setContent: (content: string) => void;
     getCursorPosition: () => { line: number; col: number };
     scrollToLine: (line: number) => void;
+    setRemoteCursors: (cursors: any[]) => void;
     destroy: () => void;
     focus: () => void;
 }
@@ -238,6 +314,7 @@ export function createCodeEditor(
         onSave?: () => void;
         onChange?: (content: string) => void;
         onCursorMove?: (line: number, col: number) => void;
+        onSelectionChange?: (selections: { anchor: number; head: number }[], isTyping: boolean) => void;
     } = {}
 ): EditorInstance {
     const langCompartment = new Compartment();
@@ -280,6 +357,7 @@ export function createCodeEditor(
                 const pos = update.state.selection.main.head;
                 const line = update.state.doc.lineAt(pos);
                 options.onCursorMove?.(line.number, pos - line.from + 1);
+                options.onSelectionChange?.(update.state.selection.ranges.map(r => ({ anchor: r.anchor, head: r.head })), update.docChanged);
             }
             if (update.docChanged) {
                 options.onChange?.(update.state.doc.toString());
@@ -296,6 +374,7 @@ export function createCodeEditor(
         }),
         EditorView.lineWrapping,
         minimapExtension(),
+        remoteCursorsField,
     ];
 
     if (langExt) {
@@ -336,6 +415,11 @@ export function createCodeEditor(
                 scrollIntoView: true,
             });
         },
+        setRemoteCursors: (cursors: any[]) => {
+            view.dispatch({
+                effects: remoteCursorsEffect.of(cursors)
+            });
+        },
         destroy: () => view.destroy(),
         focus: () => view.focus(),
     };

package/app/lib/connections.tsx

@@ -824,59 +824,50 @@ export function navigateToConnection(ctx: CanvasContext, conn: any, navigateTo:
     });
 }
 
-// ─── Save connections to server ─────────────────────────
-export async function saveConnections(ctx: CanvasContext) {
+// ─── Save connections to localStorage ───────────────────
+export function saveConnections(ctx: CanvasContext) {
     const state = ctx.snap().context;
+    const repoPath = state.repoPath;
+    if (!repoPath) return;
     try {
-        await fetch('/api/connections', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ connections: state.connections })
-        });
+        const key = `gitcanvas:connections:${repoPath}`;
+        localStorage.setItem(key, JSON.stringify(state.connections));
     } catch (e) {
         measure('connections:saveError', () => e);
     }
 }
 
-// ─── Load connections from server ───────────────────────
-export async function loadConnections(ctx: CanvasContext) {
-    return measure('connections:load', async () => {
+// ─── Load connections from localStorage ─────────────────
+export function loadConnections(ctx: CanvasContext) {
+    return measure('connections:load', () => {
         try {
-            const response = await fetch('/api/connections');
-            if (!response.ok) return;
-            const data = await response.json();
-
-            if (data.connections && data.connections.length > 0) {
-                const conns = data.connections.map(c => ({
-                    id: c.conn_id,
-                    sourceFile: c.source_file,
-                    sourceLineStart: c.source_line_start,
-                    sourceLineEnd: c.source_line_end,
-                    targetFile: c.target_file,
-                    targetLineStart: c.target_line_start,
-                    targetLineEnd: c.target_line_end,
-                    comment: c.comment || '',
-                }));
-
-                conns.forEach(conn => {
-                    ctx.actor.send({
-                        type: 'START_CONNECTION',
-                        sourceFile: conn.sourceFile,
-                        lineStart: conn.sourceLineStart,
-                        lineEnd: conn.sourceLineEnd,
-                    });
-                    ctx.actor.send({
-                        type: 'COMPLETE_CONNECTION',
-                        targetFile: conn.targetFile,
-                        lineStart: conn.targetLineStart,
-                        lineEnd: conn.targetLineEnd,
-                        comment: conn.comment,
-                    });
+            const repoPath = ctx.snap().context.repoPath;
+            if (!repoPath) return;
+            const key = `gitcanvas:connections:${repoPath}`;
+            const stored = localStorage.getItem(key);
+            if (!stored) return;
+
+            const connections = JSON.parse(stored);
+            if (!Array.isArray(connections) || connections.length === 0) return;
+
+            connections.forEach(conn => {
+                ctx.actor.send({
+                    type: 'START_CONNECTION',
+                    sourceFile: conn.sourceFile,
+                    lineStart: conn.sourceLineStart,
+                    lineEnd: conn.sourceLineEnd,
+                });
+                ctx.actor.send({
+                    type: 'COMPLETE_CONNECTION',
+                    targetFile: conn.targetFile,
+                    lineStart: conn.targetLineStart,
+                    lineEnd: conn.targetLineEnd,
+                    comment: conn.comment || '',
                 });
+            });
 
-                renderConnections(ctx);
-                buildConnectionMarkers(ctx);
-            }
+            renderConnections(ctx);
+            buildConnectionMarkers(ctx);
         } catch (e) {
             measure('connections:loadError', () => e);
         }

package/app/lib/context.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, test } from 'bun:test';
+import { createCanvasContext, getCanvasContext, setCanvasContext } from './context';
+import { setupDomTest } from './test-dom';
+
+describe('shared canvas context lifecycle', () => {
+  test('createCanvasContext registers the created context globally', () => {
+    const handle = setupDomTest();
+    try {
+      const actor = { getSnapshot: () => ({ context: {} }) };
+      const ctx = createCanvasContext(actor);
+      expect(getCanvasContext()).toBe(ctx);
+      expect(ctx.snap()).toEqual({ context: {} });
+    } finally {
+      setCanvasContext(null);
+      handle.cleanup();
+    }
+  });
+
+  test('setCanvasContext clears the shared context reference', () => {
+    const handle = setupDomTest();
+    try {
+      const actor = { getSnapshot: () => ({ context: { repoPath: 'x' } }) };
+      createCanvasContext(actor);
+      expect(getCanvasContext()).not.toBeNull();
+      setCanvasContext(null);
+      expect(getCanvasContext()).toBeNull();
+    } finally {
+      setCanvasContext(null);
+      handle.cleanup();
+    }
+  });
+});

package/app/lib/context.ts

@@ -6,6 +6,8 @@
  * Every module gets read/write access to the same mutable state.
  */
 
+let currentCanvasContext: CanvasContext | null = null;
+
 export interface CanvasContext {
     /** XState actor */
     actor: any;
@@ -41,7 +43,10 @@ export interface CanvasContext {
     loadingOverlay: HTMLElement | null;
 
     // ─── Text rendering mode ──────────────────
-    useCanvasText: boolean;
+    // 'dom' = DOM-based rendering (default, best compatibility)
+    // 'canvas' = Canvas 2D API (better performance for medium repos)
+    // 'webgl' = Pixi.js WebGL (best performance for 1000+ files)
+    textRendererMode: 'dom' | 'canvas' | 'webgl';
 
     // ─── All-files mode state ─────────────────
     allFilesActive: boolean;
@@ -62,7 +67,7 @@ export interface CanvasContext {
 
 /** Creates a fresh context (call once per mount). */
 export function createCanvasContext(actor: any): CanvasContext {
-    return {
+    const ctx: CanvasContext = {
         actor,
         snap: () => actor.getSnapshot(),
 
@@ -82,7 +87,7 @@ export function createCanvasContext(actor: any): CanvasContext {
         scrollTimers: {},
         connectionDragState: null,
         loadingOverlay: null,
-        useCanvasText: true,
+        textRendererMode: (localStorage.getItem('gitcanvas:textRendererMode') as any) || 'dom',
 
         allFilesActive: true,
         changedFilePaths: new Set(),
@@ -91,4 +96,15 @@ export function createCanvasContext(actor: any): CanvasContext {
         deferredCards: new Map(),
         controlMode: (localStorage.getItem('gitcanvas:controlMode') as any) || 'advanced',
     };
+
+    currentCanvasContext = ctx;
+    return ctx;
+}
+
+export function setCanvasContext(ctx: CanvasContext | null): void {
+    currentCanvasContext = ctx;
+}
+
+export function getCanvasContext(): CanvasContext | null {
+    return currentCanvasContext;
 }

package/app/lib/cursor-sharing.ts

@@ -34,6 +34,36 @@ const REMOVE_MS = 15000; // remove after 15s
 
 let _lastBroadcast = 0;
 
+// ─── Editor Sync Events ─────────────────────────────────
+export interface EditorSyncData {
+    peerId: string;
+    color: string;
+    name: string;
+    file: string;
+    selections: { anchor: number; head: number }[];
+    typing?: boolean;
+}
+
+type EditorSyncListener = (data: EditorSyncData) => void;
+const _editorSyncListeners = new Set<EditorSyncListener>();
+
+export function onEditorSync(listener: EditorSyncListener) {
+    _editorSyncListeners.add(listener);
+    return () => _editorSyncListeners.delete(listener);
+}
+
+export function broadcastEditorSync(file: string, selections: { anchor: number; head: number }[], typing: boolean = false) {
+    if (!_ws || _ws.readyState !== WebSocket.OPEN) return;
+    const userName = localStorage.getItem('gitcanvas:username') || _peerId || 'anonymous';
+    _ws.send(JSON.stringify({
+        type: 'editor_sync',
+        name: userName,
+        file,
+        selections,
+        typing
+    }));
+}
+
 // ─── Initialize ─────────────────────────────────────────
 
 export function initCursorSharing(ctx: CanvasContext) {
@@ -111,6 +141,10 @@ function connectWebSocket() {
                 _color = data.color;
             } else if (data.type === 'cursor') {
                 handleRemoteCursor(data);
+            } else if (data.type === 'editor_sync') {
+                for (const listener of _editorSyncListeners) {
+                    listener(data);
+                }
             } else if (data.type === 'leave') {
                 removeRemoteCursor(data.peerId);
             }