gitmaps 1.0.0

package/app/lib/positions.ts

@@ -0,0 +1,176 @@
+// @ts-nocheck
+/**
+ * Positions — load/save card positions with dual storage:
+ *   - Server-side (SQLite via /api/auth/positions) when logged in
+ *   - localStorage fallback when not authenticated
+ *
+ * Enables shared repositories: each user has their own card layout.
+ */
+import { measure } from 'measure-fn';
+import type { CanvasContext } from './context';
+import { getUser } from './user';
+
+const STORAGE_PREFIX = 'gitcanvas:positions:';
+
+/** Debounce timer for batched saves */
+let _saveTimer: any = null;
+const SAVE_DEBOUNCE_MS = 300;
+
+// ─── Get the localStorage key for the current repo ───────
+function getStorageKey(ctx: CanvasContext): string | null {
+    const repoPath = ctx.snap?.()?.context?.repoPath;
+    if (!repoPath) return null;
+    return `${STORAGE_PREFIX}${repoPath}`;
+}
+
+function getRepoPath(ctx: CanvasContext): string | null {
+    return ctx.snap?.()?.context?.repoPath || null;
+}
+
+// ─── Load all saved positions ────────────────────────────
+export async function loadSavedPositions(ctx: CanvasContext) {
+    return measure('positions:load', async () => {
+        try {
+            const repoPath = getRepoPath(ctx);
+            if (!repoPath) return;
+
+            // Clear old positions first to prevent stale data from
+            // a previously loaded repo bleeding into the new one
+            ctx.positions = new Map();
+
+            // Try server-side first (if logged in)
+            const user = getUser();
+            if (user) {
+                try {
+                    const res = await fetch(`/api/auth/positions?repo=${encodeURIComponent(repoPath)}`);
+                    const data = await res.json();
+                    if (data.positions) {
+                        ctx.positions = new Map(Object.entries(data.positions));
+                        // Migrate legacy expanded state from separate localStorage key
+                        _migrateLegacyExpanded(ctx, repoPath);
+                        return;
+                    }
+                } catch { /* fall through to localStorage */ }
+            }
+
+            // Fallback: localStorage
+            const key = getStorageKey(ctx);
+            if (!key) return;
+            const raw = localStorage.getItem(key);
+            if (raw) {
+                const data = JSON.parse(raw);
+                ctx.positions = new Map(Object.entries(data));
+            }
+
+            // Migrate legacy expanded state from separate localStorage key
+            _migrateLegacyExpanded(ctx, repoPath);
+        } catch (e) {
+            measure('positions:loadError', () => e);
+        }
+    });
+}
+
+// ─── Persist all positions (debounced) ───────────────────
+function flushPositions(ctx: CanvasContext) {
+    const repoPath = getRepoPath(ctx);
+    if (!repoPath) return;
+
+    const obj: Record<string, any> = {};
+    for (const [k, v] of ctx.positions) {
+        obj[k] = v;
+    }
+
+    // Always save to localStorage (instant)
+    try {
+        const key = getStorageKey(ctx);
+        if (key) localStorage.setItem(key, JSON.stringify(obj));
+    } catch { }
+
+    // Also sync to server if logged in (async, fire-and-forget)
+    const user = getUser();
+    if (user) {
+        fetch('/api/auth/positions', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ repoUrl: repoPath, positions: obj }),
+        }).catch(() => { /* silent — localStorage is the safety net */ });
+    }
+}
+
+// ─── Save a single card position (debounced) ─────────────
+export async function savePosition(ctx: CanvasContext, commitHash: string, filePath: string, x?: number, y?: number, width?: number, height?: number) {
+    return measure('positions:save', async () => {
+        try {
+            const posKey = `${commitHash}:${filePath}`;
+            const existing = ctx.positions.get(posKey) || {};
+            const newPos = {
+                x: x !== undefined ? x : existing.x,
+                y: y !== undefined ? y : existing.y,
+                width: width !== undefined ? width : existing.width,
+                height: height !== undefined ? height : existing.height,
+                expanded: existing.expanded, // preserve expanded flag
+            };
+            ctx.positions.set(posKey, newPos);
+
+            // Debounced persist — avoid hammering storage on every drag frame
+            if (_saveTimer) clearTimeout(_saveTimer);
+            _saveTimer = setTimeout(() => flushPositions(ctx), SAVE_DEBOUNCE_MS);
+        } catch (e) {
+            measure('positions:saveError', () => e);
+        }
+    });
+}
+
+// ─── Position key helper ─────────────────────────────────
+export function getPositionKey(filePath: string, commitHash: string): string {
+    return `${commitHash}:${filePath}`;
+}
+
+// ─── Expanded state (unified with positions) ─────────────
+
+/** Check if a file path is saved as expanded in positions */
+export function isPathExpandedInPositions(ctx: CanvasContext, filePath: string): boolean {
+    // Check allfiles key (primary)
+    const key = `allfiles:${filePath}`;
+    const pos = ctx.positions.get(key);
+    return !!(pos && pos.expanded);
+}
+
+/** Mark a file path as expanded or collapsed in positions */
+export function setPathExpandedInPositions(ctx: CanvasContext, filePath: string, expanded: boolean) {
+    const key = `allfiles:${filePath}`;
+    const existing = ctx.positions.get(key) || {};
+    ctx.positions.set(key, { ...existing, expanded });
+    // Trigger debounced persist
+    if (_saveTimer) clearTimeout(_saveTimer);
+    _saveTimer = setTimeout(() => flushPositions(ctx), SAVE_DEBOUNCE_MS);
+}
+
+/** Migrate legacy expanded state from separate localStorage key into positions */
+function _migrateLegacyExpanded(ctx: CanvasContext, repoPath: string) {
+    const legacyKey = `gitcanvas:expanded:${repoPath}`;
+    try {
+        const raw = localStorage.getItem(legacyKey);
+        if (!raw) return;
+        const paths: string[] = JSON.parse(raw);
+        if (!Array.isArray(paths) || paths.length === 0) return;
+
+        let migrated = 0;
+        for (const filePath of paths) {
+            const posKey = `allfiles:${filePath}`;
+            const existing = ctx.positions.get(posKey) || {};
+            if (!existing.expanded) {
+                ctx.positions.set(posKey, { ...existing, expanded: true });
+                migrated++;
+            }
+        }
+
+        if (migrated > 0) {
+            // Persist immediately to save the migration
+            flushPositions(ctx);
+        }
+
+        // Remove the legacy key
+        localStorage.removeItem(legacyKey);
+    } catch { }
+}

package/app/lib/pr-review.ts

@@ -0,0 +1,374 @@
+/**
+ * PR Review — Inline Comments on Diff Lines
+ * 
+ * Enables code review directly on the canvas:
+ * - Click the gutter area of any line to add a comment
+ * - Comments stored per file+line in localStorage
+ * - Visual markers (purple dot) rendered in the canvas gutter
+ * - Comment thread popup with input field and existing comments
+ * - Optional WebSocket sync for collaborative review
+ * 
+ * Storage key: `gitcanvas:reviews:{repoSlug}`
+ * Data format: { [filePath]: { [lineNum]: ReviewComment[] } }
+ */
+
+// ─── Types ──────────────────────────────────────────────
+
+export interface ReviewComment {
+    id: string;
+    author: string;
+    text: string;
+    lineNum: number;
+    filePath: string;
+    createdAt: number;
+    resolved?: boolean;
+}
+
+export interface ReviewStore {
+    [filePath: string]: {
+        [lineNum: string]: ReviewComment[];
+    };
+}
+
+// ─── Storage ────────────────────────────────────────────
+
+const STORAGE_PREFIX = 'gitcanvas:reviews:';
+let currentRepo = '';
+let store: ReviewStore = {};
+let changeListeners: Array<() => void> = [];
+
+export function initReviewStore(repoSlug: string) {
+    currentRepo = repoSlug;
+    try {
+        const saved = localStorage.getItem(STORAGE_PREFIX + repoSlug);
+        store = saved ? JSON.parse(saved) : {};
+    } catch {
+        store = {};
+    }
+}
+
+function persist() {
+    if (!currentRepo) return;
+    try {
+        localStorage.setItem(STORAGE_PREFIX + currentRepo, JSON.stringify(store));
+    } catch { /* quota exceeded — non-fatal */ }
+    changeListeners.forEach(fn => fn());
+}
+
+export function onReviewChange(fn: () => void): () => void {
+    changeListeners.push(fn);
+    return () => { changeListeners = changeListeners.filter(f => f !== fn); };
+}
+
+// ─── CRUD ───────────────────────────────────────────────
+
+export function addComment(filePath: string, lineNum: number, text: string, author = 'You'): ReviewComment {
+    if (!store[filePath]) store[filePath] = {};
+    const key = String(lineNum);
+    if (!store[filePath][key]) store[filePath][key] = [];
+
+    const comment: ReviewComment = {
+        id: `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+        author,
+        text,
+        lineNum,
+        filePath,
+        createdAt: Date.now(),
+    };
+
+    store[filePath][key].push(comment);
+    persist();
+    return comment;
+}
+
+export function getComments(filePath: string, lineNum: number): ReviewComment[] {
+    return store[filePath]?.[String(lineNum)] || [];
+}
+
+export function getAllFileComments(filePath: string): Map<number, ReviewComment[]> {
+    const map = new Map<number, ReviewComment[]>();
+    const fileStore = store[filePath];
+    if (!fileStore) return map;
+    for (const [key, comments] of Object.entries(fileStore)) {
+        const lineNum = parseInt(key, 10);
+        if (!isNaN(lineNum) && comments.length > 0) {
+            map.set(lineNum, comments);
+        }
+    }
+    return map;
+}
+
+export function resolveComment(filePath: string, lineNum: number, commentId: string) {
+    const comments = store[filePath]?.[String(lineNum)];
+    if (!comments) return;
+    const comment = comments.find(c => c.id === commentId);
+    if (comment) {
+        comment.resolved = true;
+        persist();
+    }
+}
+
+export function deleteComment(filePath: string, lineNum: number, commentId: string) {
+    const key = String(lineNum);
+    const comments = store[filePath]?.[key];
+    if (!comments) return;
+    store[filePath][key] = comments.filter(c => c.id !== commentId);
+    if (store[filePath][key].length === 0) delete store[filePath][key];
+    if (Object.keys(store[filePath]).length === 0) delete store[filePath];
+    persist();
+}
+
+export function getReviewStats(): { totalComments: number; totalFiles: number; unresolvedCount: number } {
+    let totalComments = 0;
+    let unresolvedCount = 0;
+    let totalFiles = 0;
+    for (const filePath of Object.keys(store)) {
+        let hasComments = false;
+        for (const comments of Object.values(store[filePath])) {
+            totalComments += comments.length;
+            unresolvedCount += comments.filter(c => !c.resolved).length;
+            if (comments.length > 0) hasComments = true;
+        }
+        if (hasComments) totalFiles++;
+    }
+    return { totalComments, totalFiles, unresolvedCount };
+}
+
+// ─── Comment Thread Popup ───────────────────────────────
+
+let activePopup: HTMLElement | null = null;
+
+export function showCommentPopup(
+    filePath: string,
+    lineNum: number,
+    anchorX: number,
+    anchorY: number,
+    onSubmit?: (comment: ReviewComment) => void
+) {
+    hideCommentPopup();
+
+    const comments = getComments(filePath, lineNum);
+    const popup = document.createElement('div');
+    popup.className = 'review-comment-popup';
+    popup.setAttribute('data-line', String(lineNum));
+    popup.style.cssText = `
+        position: fixed;
+        z-index: 10000;
+        background: rgba(22, 22, 35, 0.98);
+        border: 1px solid rgba(124, 58, 237, 0.5);
+        border-radius: 12px;
+        padding: 0;
+        min-width: 320px;
+        max-width: 420px;
+        max-height: 360px;
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 16px rgba(124, 58, 237, 0.2);
+        font-family: 'Inter', -apple-system, sans-serif;
+        font-size: 13px;
+        color: #c9d1d9;
+        overflow: hidden;
+        backdrop-filter: blur(16px);
+    `;
+
+    // Header
+    const header = document.createElement('div');
+    header.style.cssText = `
+        padding: 10px 14px;
+        border-bottom: 1px solid rgba(255,255,255,0.08);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background: rgba(124, 58, 237, 0.1);
+    `;
+    header.innerHTML = `
+        <span style="font-weight: 600; color: #a78bfa;">
+            💬 Line ${lineNum}
+        </span>
+        <span style="color: #6e7681; font-size: 11px;">
+            ${comments.length} comment${comments.length !== 1 ? 's' : ''}
+        </span>
+    `;
+    popup.appendChild(header);
+
+    // Existing comments
+    if (comments.length > 0) {
+        const list = document.createElement('div');
+        list.style.cssText = `
+            max-height: 180px;
+            overflow-y: auto;
+            padding: 8px 14px;
+        `;
+        for (const c of comments) {
+            const item = document.createElement('div');
+            item.style.cssText = `
+                padding: 8px 0;
+                border-bottom: 1px solid rgba(255,255,255,0.04);
+                ${c.resolved ? 'opacity: 0.5;' : ''}
+            `;
+            const ago = timeAgo(c.createdAt);
+            item.innerHTML = `
+                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
+                    <span style="font-weight: 500; color: #a78bfa; font-size: 12px;">${escapeHtml(c.author)}</span>
+                    <span style="color: #484f58; font-size: 11px;">${ago}</span>
+                </div>
+                <div style="line-height: 1.5; ${c.resolved ? 'text-decoration: line-through;' : ''}">${escapeHtml(c.text)}</div>
+            `;
+
+            // Resolve/delete buttons
+            const actions = document.createElement('div');
+            actions.style.cssText = 'display: flex; gap: 8px; margin-top: 4px;';
+
+            if (!c.resolved) {
+                const resolveBtn = document.createElement('button');
+                resolveBtn.textContent = '✓ Resolve';
+                resolveBtn.style.cssText = btnStyle('#238636');
+                resolveBtn.onclick = (e) => {
+                    e.stopPropagation();
+                    resolveComment(filePath, lineNum, c.id);
+                    showCommentPopup(filePath, lineNum, anchorX, anchorY, onSubmit);
+                };
+                actions.appendChild(resolveBtn);
+            }
+
+            const delBtn = document.createElement('button');
+            delBtn.textContent = '✕';
+            delBtn.style.cssText = btnStyle('#da3633');
+            delBtn.onclick = (e) => {
+                e.stopPropagation();
+                deleteComment(filePath, lineNum, c.id);
+                showCommentPopup(filePath, lineNum, anchorX, anchorY, onSubmit);
+            };
+            actions.appendChild(delBtn);
+
+            item.appendChild(actions);
+            list.appendChild(item);
+        }
+        popup.appendChild(list);
+    }
+
+    // Input area
+    const inputArea = document.createElement('div');
+    inputArea.style.cssText = `
+        padding: 10px 14px;
+        border-top: 1px solid rgba(255,255,255,0.06);
+        display: flex;
+        gap: 8px;
+    `;
+
+    const input = document.createElement('input');
+    input.type = 'text';
+    input.placeholder = 'Add a comment...';
+    input.style.cssText = `
+        flex: 1;
+        background: rgba(255,255,255,0.06);
+        border: 1px solid rgba(255,255,255,0.1);
+        border-radius: 8px;
+        padding: 8px 12px;
+        color: #c9d1d9;
+        font-size: 13px;
+        outline: none;
+        font-family: inherit;
+    `;
+
+    const submitBtn = document.createElement('button');
+    submitBtn.textContent = '↵';
+    submitBtn.style.cssText = `
+        background: rgba(124, 58, 237, 0.8);
+        border: none;
+        border-radius: 8px;
+        padding: 8px 14px;
+        color: white;
+        font-size: 14px;
+        cursor: pointer;
+        transition: background 0.15s;
+    `;
+    submitBtn.onmouseenter = () => submitBtn.style.background = 'rgba(124, 58, 237, 1)';
+    submitBtn.onmouseleave = () => submitBtn.style.background = 'rgba(124, 58, 237, 0.8)';
+
+    const submit = () => {
+        const text = input.value.trim();
+        if (!text) return;
+        const comment = addComment(filePath, lineNum, text);
+        onSubmit?.(comment);
+        // Refresh popup to show new comment
+        showCommentPopup(filePath, lineNum, anchorX, anchorY, onSubmit);
+    };
+
+    input.onkeydown = (e) => {
+        if (e.key === 'Enter') submit();
+        if (e.key === 'Escape') hideCommentPopup();
+        e.stopPropagation(); // Don't trigger canvas shortcuts
+    };
+    submitBtn.onclick = submit;
+
+    inputArea.appendChild(input);
+    inputArea.appendChild(submitBtn);
+    popup.appendChild(inputArea);
+
+    // Position: prefer above the anchor, fall below if near top
+    document.body.appendChild(popup);
+    const popupRect = popup.getBoundingClientRect();
+    let px = anchorX;
+    let py = anchorY - popupRect.height - 8;
+    if (py < 10) py = anchorY + 24;
+    if (px + popupRect.width > window.innerWidth - 10) px = window.innerWidth - popupRect.width - 10;
+    popup.style.left = `${px}px`;
+    popup.style.top = `${py}px`;
+
+    activePopup = popup;
+
+    // Focus input
+    requestAnimationFrame(() => input.focus());
+
+    // Close on outside click (delayed to avoid immediate close)
+    setTimeout(() => {
+        const closeHandler = (e: MouseEvent) => {
+            if (!popup.contains(e.target as Node)) {
+                hideCommentPopup();
+                document.removeEventListener('mousedown', closeHandler);
+            }
+        };
+        document.addEventListener('mousedown', closeHandler);
+    }, 50);
+}
+
+export function hideCommentPopup() {
+    if (activePopup) {
+        activePopup.remove();
+        activePopup = null;
+    }
+}
+
+// ─── Helpers ────────────────────────────────────────────
+
+function btnStyle(color: string): string {
+    return `
+        background: none;
+        border: none;
+        color: ${color};
+        cursor: pointer;
+        font-size: 11px;
+        padding: 2px 4px;
+        border-radius: 4px;
+        opacity: 0.7;
+        transition: opacity 0.15s;
+    `;
+}
+
+function escapeHtml(str: string): string {
+    return str
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+}
+
+function timeAgo(ts: number): string {
+    const diff = Date.now() - ts;
+    const mins = Math.floor(diff / 60000);
+    if (mins < 1) return 'just now';
+    if (mins < 60) return `${mins}m ago`;
+    const hours = Math.floor(mins / 60);
+    if (hours < 24) return `${hours}h ago`;
+    const days = Math.floor(hours / 24);
+    return `${days}d ago`;
+}

package/app/lib/production-mode.ts

@@ -0,0 +1,47 @@
+// @ts-nocheck
+/**
+ * Production mode detection — checks if we're running on the SaaS deploy.
+ *
+ * When in production (gitmaps.xyz), certain features are restricted:
+ * - File editing/saving is disabled
+ * - Git commits are disabled
+ * - Local repo paths are hidden
+ *
+ * These restrictions exist because the SaaS version works with
+ * cloned repos, not local file systems.
+ */
+
+const PRODUCTION_HOSTS = ['gitmaps.xyz', 'www.gitmaps.xyz'];
+
+/** Check if the app is running in production SaaS mode */
+export function isProductionMode(): boolean {
+    if (typeof window === 'undefined') return false;
+    return PRODUCTION_HOSTS.includes(window.location.hostname);
+}
+
+/** Check if editing is allowed (false in production) */
+export function isEditingAllowed(): boolean {
+    return !isProductionMode();
+}
+
+/** Get the production notice HTML for the editor area */
+export function getProductionEditorNotice(): string {
+    return `
+        <div class="production-notice">
+            <div class="production-notice-icon">
+                <svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="currentColor" stroke-width="1.5">
+                    <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
+                    <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
+                </svg>
+            </div>
+            <h3 class="production-notice-title">Editing is view-only on GitMaps.xyz</h3>
+            <p class="production-notice-desc">
+                To edit files, save changes, and commit directly — install GitMaps locally:
+            </p>
+            <code class="production-notice-cmd">npx gitmaps</code>
+            <p class="production-notice-sub">
+                Local mode gives you full read-write access to your repositories.
+            </p>
+        </div>
+    `;
+}