@cyber-dash-tech/revela 0.7.9 → 0.8.2

package/lib/edit/resolve-deck.ts

@@ -1,6 +1,6 @@
-import { existsSync } from "fs"
-import { basename, relative, resolve, sep } from "path"
-import { DECKS_STATE_FILE, hasDecksState, isDeckHtmlPath, readDecksState } from "../decks-state"
+import { existsSync, readdirSync } from "fs"
+import { relative, resolve, sep } from "path"
+import { DECKS_STATE_FILE, isDeckHtmlPath, workspaceDeckSlug } from "../decks-state"
 
 export interface EditableDeck {
   slug: string
@@ -9,68 +9,29 @@ export interface EditableDeck {
   source: "decks-state" | "fallback" | "file-path"
 }
 
-export function resolveEditableDeck(workspaceRoot: string, input: string): EditableDeck {
-  const requested = input.trim()
-  if (!requested) return resolveDefaultDeck(workspaceRoot)
-
-  const slug = normalizeSlug(requested)
-
-  if (hasDecksState(workspaceRoot)) {
-    const state = readDecksState(workspaceRoot)
-    const deck = state.decks[requested] ?? (slug ? state.decks[slug] : undefined)
-    if (deck) {
-      return resolveDeckFile(workspaceRoot, deck.slug, deck.outputPath, "decks-state")
-    }
-  }
-
-  if (looksLikePath(requested)) {
-    return resolvePathTarget(workspaceRoot, requested)
-  }
-
-  if (!slug) throw new Error("Deck target must be a deck slug or decks/*.html path.")
-
-  return resolveDeckFile(workspaceRoot, slug, `decks/${slug}.html`, "fallback")
-}
-
-function resolveDefaultDeck(workspaceRoot: string): EditableDeck {
-  if (!hasDecksState(workspaceRoot)) {
-    throw new Error(`No ${DECKS_STATE_FILE} found. Use /revela edit <deck-slug|decks/file.html>.`)
+export function resolveEditableDeck(workspaceRoot: string, input = ""): EditableDeck {
+  if (input.trim()) {
+    throw new Error("/revela edit no longer accepts a target. It opens the only HTML deck in decks/.")
   }
 
-  const state = readDecksState(workspaceRoot)
-  const activeSlug = normalizeSlug(state.activeDeck || "")
-  if (activeSlug) {
-    const deck = state.decks[activeSlug]
-    if (!deck) throw new Error(`Active deck ${activeSlug} does not exist in ${DECKS_STATE_FILE}. Use /revela edit <target>.`)
-    return resolveDeckFile(workspaceRoot, deck.slug, deck.outputPath, "decks-state")
+  const htmlFiles = listDeckHtmlFiles(workspaceRoot)
+  if (htmlFiles.length === 0) {
+    throw new Error("No deck HTML found in decks/. Generate a deck first.")
   }
-
-  const decks = Object.values(state.decks)
-  if (decks.length === 1) {
-    const deck = decks[0]
-    return resolveDeckFile(workspaceRoot, deck.slug, deck.outputPath, "decks-state")
-  }
-
-  if (decks.length === 0) {
-    throw new Error(`${DECKS_STATE_FILE} has no decks. Use /revela edit <deck-slug|decks/file.html>.`)
+  if (htmlFiles.length > 1) {
+    throw new Error("This workspace contains multiple deck HTML files. Revela 0.8 expects one deck per workspace. Move extra decks to separate workspaces.")
   }
 
-  throw new Error(`${DECKS_STATE_FILE} has multiple decks and no activeDeck. Use /revela edit <target>.`)
+  return resolveDeckFile(workspaceRoot, workspaceDeckSlug(workspaceRoot), htmlFiles[0], "file-path")
 }
 
-function resolvePathTarget(workspaceRoot: string, requested: string): EditableDeck {
-  if (isAbsoluteLike(requested)) {
-    throw new Error("/revela edit only accepts workspace-relative decks/*.html paths.")
-  }
-
-  const normalized = normalizePath(requested).replace(/^\.\//, "")
-  if (!isDeckHtmlPath(normalized)) {
-    throw new Error("/revela edit file paths must point to decks/*.html.")
-  }
-
-  const slug = normalizeSlug(basename(normalized, ".html"))
-  if (!slug) throw new Error("Deck target must be a deck slug or decks/*.html path.")
-  return resolveDeckFile(workspaceRoot, slug, normalized, "file-path")
+function listDeckHtmlFiles(workspaceRoot: string): string[] {
+  const dir = resolve(workspaceRoot, "decks")
+  if (!existsSync(dir)) return []
+  return readdirSync(dir, { withFileTypes: true })
+    .filter((entry) => entry.isFile() && entry.name.toLowerCase().endsWith(".html"))
+    .map((entry) => `decks/${entry.name}`)
+    .sort((a, b) => a.localeCompare(b))
 }
 
 function resolveDeckFile(
@@ -93,7 +54,7 @@ function resolveDeckFile(
   }
 
   return {
-    slug: normalizeSlug(slug),
+    slug,
     file: workspaceRelative(root, absoluteFile),
     absoluteFile,
     source,
@@ -107,19 +68,3 @@ function isInside(root: string, target: string): boolean {
 function workspaceRelative(root: string, target: string): string {
   return relative(root, target).split(sep).join("/")
 }
-
-function looksLikePath(value: string): boolean {
-  return value.includes("/") || value.includes("\\") || value.endsWith(".html")
-}
-
-function isAbsoluteLike(value: string): boolean {
-  return value.startsWith("/") || /^[a-zA-Z]:[\\/]/.test(value)
-}
-
-function normalizePath(value: string): string {
-  return value.replace(/\\/g, "/")
-}
-
-function normalizeSlug(value: string): string {
-  return value.toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "")
-}

package/lib/edit/server.ts

@@ -1,11 +1,13 @@
 import { randomBytes } from "crypto"
 import { readFileSync, statSync } from "fs"
+import { resolve, sep } from "path"
 import type { EditableDeck } from "./resolve-deck"
 import { buildEditPrompt, type EditCommentPayload } from "./prompt"
 
 const TOKEN_BYTES = 24
 const SESSION_TTL_MS = 2 * 60 * 60 * 1000
 const IDLE_STOP_MS = 30 * 60 * 1000
+export const LIVE_EDITOR_IDLE_MS = 10 * 1000
 
 interface EditSession {
   token: string
@@ -20,7 +22,13 @@ interface EditSession {
 
 export interface EditServerHandle {
   baseUrl: string
-  createSession(input: { client: any; sessionID: string; deck: EditableDeck }): string
+  getOrCreateSession(input: { client: any; sessionID: string; deck: EditableDeck }): EditServerSessionResult
+}
+
+export interface EditServerSessionResult {
+  token: string
+  reused: boolean
+  live: boolean
 }
 
 let server: ReturnType<typeof Bun.serve> | undefined
@@ -41,8 +49,21 @@ export function startEditServer(): EditServerHandle {
 
   return {
     baseUrl,
-    createSession(input) {
+    getOrCreateSession(input) {
       cleanupExpiredSessions()
+      const existing = findSessionForDeck(input.deck.absoluteFile)
+      if (existing) {
+        existing.session.client = input.client
+        existing.session.sessionID = input.sessionID
+        existing.session.deck = input.deck.slug
+        existing.session.file = input.deck.file
+        return {
+          token: existing.token,
+          reused: true,
+          live: isSessionLive(existing.session),
+        }
+      }
+
       const token = randomBytes(TOKEN_BYTES).toString("base64url")
       sessions.set(token, {
         token,
@@ -54,11 +75,47 @@ export function startEditServer(): EditServerHandle {
         createdAt: Date.now(),
         lastActiveAt: Date.now(),
       })
-      return token
+      return { token, reused: false, live: false }
     },
   }
 }
 
+export function hasLiveEditorSession(deck: EditableDeck, maxIdleMs = LIVE_EDITOR_IDLE_MS): boolean {
+  cleanupExpiredSessions()
+  const existing = findSessionForDeck(deck.absoluteFile)
+  return existing ? isSessionLive(existing.session, maxIdleMs) : false
+}
+
+export function hasLiveEditorSessionForFile(workspaceRoot: string, filePath: string, maxIdleMs = LIVE_EDITOR_IDLE_MS): boolean {
+  if (!filePath) return false
+  const root = resolve(workspaceRoot)
+  const absoluteFile = resolve(root, filePath)
+  if (absoluteFile !== root && !absoluteFile.startsWith(root.endsWith(sep) ? root : root + sep)) return false
+  cleanupExpiredSessions()
+  const existing = findSessionForDeck(absoluteFile)
+  return existing ? isSessionLive(existing.session, maxIdleMs) : false
+}
+
+export function stopEditServer(): void {
+  if (idleTimer) clearTimeout(idleTimer)
+  idleTimer = undefined
+  sessions.clear()
+  server?.stop()
+  server = undefined
+  baseUrl = ""
+}
+
+function findSessionForDeck(absoluteFile: string): { token: string; session: EditSession } | undefined {
+  for (const [token, session] of sessions) {
+    if (session.absoluteFile === absoluteFile) return { token, session }
+  }
+  return undefined
+}
+
+function isSessionLive(session: EditSession, maxIdleMs = LIVE_EDITOR_IDLE_MS): boolean {
+  return Date.now() - session.lastActiveAt <= maxIdleMs
+}
+
 async function handleRequest(req: Request): Promise<Response> {
   cleanupExpiredSessions()
   const url = new URL(req.url)
@@ -156,7 +213,7 @@ function validateSession(token: string | null): { ok: true; value: EditSession }
   if (!token) return { ok: false, response: textResponse("Missing token", 401) }
   const session = sessions.get(token)
   if (!session) return { ok: false, response: textResponse("Invalid or expired token", 401) }
-  if (Date.now() - session.createdAt > SESSION_TTL_MS) {
+  if (Date.now() - session.lastActiveAt > SESSION_TTL_MS) {
     sessions.delete(token)
     return { ok: false, response: textResponse("Expired token", 401) }
   }
@@ -167,7 +224,7 @@ function validateSession(token: string | null): { ok: true; value: EditSession }
 function cleanupExpiredSessions(): void {
   const now = Date.now()
   for (const [token, session] of sessions) {
-    if (now - session.createdAt > SESSION_TTL_MS) sessions.delete(token)
+    if (now - session.lastActiveAt > SESSION_TTL_MS) sessions.delete(token)
   }
 }
 
@@ -212,7 +269,7 @@ function jsonResponse(body: unknown, status = 200): Response {
   })
 }
 
-function renderEditorShell(token: string): string {
+export function renderEditorShell(token: string): string {
   const encodedToken = JSON.stringify(token)
   return `<!doctype html>
 <html lang="en">
@@ -221,50 +278,57 @@ function renderEditorShell(token: string): string {
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>Revela Edit</title>
   <style>
-    :root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
+    :root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
     * { box-sizing: border-box; }
-    body { margin: 0; background: #0d1117; color: #f0f6fc; height: 100vh; overflow: hidden; }
-    .app { display: grid; grid-template-columns: minmax(0, 1fr) 380px; height: 100vh; }
-    .preview { position: relative; min-width: 0; background: #05070a; border-right: 1px solid #30363d; }
-    iframe { display: block; width: 100%; height: 100%; border: 0; background: white; }
+    body { margin: 0; background: #f6f8fb; color: #172033; height: 100vh; overflow: hidden; }
+    body.resizing { cursor: col-resize; user-select: none; }
+    body.resizing iframe, body.resizing .hitbox { pointer-events: none; }
+    .app { --editor-width: 376px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--editor-width); height: 100vh; }
+    .preview { position: relative; min-width: 0; background: #eef3f8; }
+    .resize-handle { position: absolute; top: 0; bottom: 0; right: calc(var(--editor-width) - 7px); width: 14px; z-index: 5; cursor: col-resize; background: transparent; }
+    .resize-handle::before { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 44px; border-radius: 999px; transform: translate(-50%, -50%); background: rgba(148,163,184,.34); box-shadow: 0 1px 2px rgba(15,23,42,.06); transition: background .16s ease, height .16s ease, box-shadow .16s ease; }
+    .resize-handle:hover::before, body.resizing .resize-handle::before { height: 52px; background: #94a3b8; box-shadow: 0 0 0 4px rgba(148,163,184,.16); }
+    iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
     .hitbox { position: absolute; inset: 0; z-index: 2; cursor: crosshair; background: transparent; }
-    aside { display: flex; flex-direction: column; gap: 16px; padding: 18px; background: #111827; }
-    h1 { margin: 0; font-size: 18px; line-height: 1.2; }
-    .hint { margin: 0; color: #9ca3af; font-size: 13px; line-height: 1.5; }
+    aside { display: flex; flex-direction: column; gap: 16px; padding: 20px; background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); }
+    h1 { margin: 0; font-size: 18px; line-height: 1.2; letter-spacing: -.01em; color: #0f172a; }
+    .wordmark { font-family: Garamond, "Iowan Old Style", Georgia, serif; font-size: 21px; letter-spacing: .08em; font-weight: 600; }
+    .hint { margin: 0; color: #64748b; font-size: 13px; line-height: 1.5; }
     .panel { display: flex; flex-direction: column; gap: 10px; }
-    .label { color: #9ca3af; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
-    .comment-editor { width: 100%; min-height: 160px; max-height: 42vh; overflow: auto; padding: 12px; border: 1px solid #374151; border-radius: 12px; background: #020617; color: #f8fafc; font: inherit; line-height: 1.5; outline: none; white-space: pre-wrap; }
-    .comment-editor:focus { border-color: #38bdf8; box-shadow: 0 0 0 2px rgba(56,189,248,.18); }
-    .comment-editor:empty::before { content: attr(data-placeholder); color: #64748b; pointer-events: none; }
-    .ref-chip { display: inline-flex; align-items: center; margin: 0 2px; padding: 1px 6px; border-radius: 999px; background: rgba(56,189,248,.18); color: #bae6fd; border: 1px solid rgba(56,189,248,.45); font-weight: 700; white-space: nowrap; }
+    .label { color: #64748b; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
+    .comment-editor { width: 100%; min-height: 164px; max-height: 42vh; overflow: auto; padding: 13px 14px; border: 1px solid #d7e0ea; border-radius: 14px; background: #ffffff; color: #0f172a; font: inherit; line-height: 1.5; outline: none; white-space: pre-wrap; box-shadow: 0 10px 28px rgba(15,23,42,.06); }
+    .comment-editor:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12), 0 10px 28px rgba(15,23,42,.06); }
+    .comment-editor:empty::before { content: attr(data-placeholder); color: #94a3b8; pointer-events: none; }
+    .ref-chip { display: inline-flex; align-items: center; margin: 0 2px; padding: 1px 7px; border-radius: 999px; background: var(--ref-bg, #e0f2fe); color: var(--ref-text, #075985); border: 1px solid var(--ref-border, #7dd3fc); font-weight: 800; white-space: nowrap; }
     .comment-thread { display: flex; flex-direction: column; gap: 10px; max-height: 30vh; overflow: auto; }
-    .comment-bubble { border: 1px solid #374151; border-radius: 14px; padding: 10px 12px; background: #0f172a; color: #e5e7eb; font-size: 13px; line-height: 1.45; }
-    .comment-bubble.sending { border-color: rgba(56,189,248,.5); background: rgba(14,116,144,.14); }
-    .comment-bubble.applied { border-color: rgba(34,197,94,.55); background: rgba(22,101,52,.18); }
-    .comment-bubble.stale { border-color: rgba(251,191,36,.6); background: rgba(120,53,15,.2); }
-    .comment-bubble.failed { border-color: rgba(248,113,113,.65); background: rgba(127,29,29,.2); }
+    .comment-bubble { border: 1px solid #dbe4ee; border-radius: 14px; padding: 10px 12px; background: #ffffff; color: #334155; font-size: 13px; line-height: 1.45; box-shadow: 0 8px 24px rgba(15,23,42,.05); }
+    .comment-bubble.sending { border-color: #93c5fd; background: #eff6ff; }
+    .comment-bubble.updated { border-color: #86efac; background: #f0fdf4; }
+    .comment-bubble.stale { border-color: #facc15; background: #fefce8; }
+    .comment-bubble.failed { border-color: #fca5a5; background: #fef2f2; }
     .comment-bubble-text { white-space: pre-wrap; overflow-wrap: anywhere; }
-    .comment-bubble-state { margin-top: 8px; color: #93c5fd; font-size: 12px; font-weight: 700; }
-    .comment-bubble.applied .comment-bubble-state { color: #86efac; }
-    .comment-bubble.stale .comment-bubble-state { color: #fcd34d; }
-    .comment-bubble.failed .comment-bubble-state { color: #fca5a5; }
-    button { width: 100%; padding: 12px 14px; border: 0; border-radius: 12px; background: #38bdf8; color: #04111d; font-weight: 700; cursor: pointer; }
+    .comment-bubble-state { margin-top: 8px; color: #2563eb; font-size: 12px; font-weight: 800; }
+    .comment-bubble.updated .comment-bubble-state { color: #15803d; }
+    .comment-bubble.stale .comment-bubble-state { color: #a16207; }
+    .comment-bubble.failed .comment-bubble-state { color: #b91c1c; }
+    button { width: 100%; padding: 12px 14px; border: 0; border-radius: 12px; background: #2563eb; color: #ffffff; font-weight: 800; cursor: pointer; box-shadow: 0 10px 24px rgba(37,99,235,.22); }
     button:disabled { cursor: not-allowed; opacity: .5; }
-    .status { min-height: 20px; color: #93c5fd; font-size: 13px; }
-    @media (max-width: 900px) { .app { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; } aside { max-height: 48vh; } }
+    .status { min-height: 20px; color: #475569; font-size: 13px; line-height: 1.45; }
+    @media (max-width: 900px) { .app { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; } .resize-handle { display: none; } aside { max-height: 48vh; } }
   </style>
 </head>
 <body>
   <main class="app">
     <section class="preview"><iframe id="deck" src="/deck?token=${encodeURIComponent(token)}"></iframe><div id="hitbox" class="hitbox" aria-label="Deck element selection layer"></div></section>
+    <div id="resizeHandle" class="resize-handle" role="separator" aria-label="Resize editor panel" aria-orientation="vertical" title="Drag to resize editor. Double-click to reset."></div>
     <aside>
       <div>
-        <h1>Revela Visual Edit</h1>
-        <p class="hint">Write one comment. Use Ctrl/Cmd + click on deck elements to insert precise references into the comment.</p>
+        <h1><span class="wordmark">REVELA</span> Editor</h1>
+        <p class="hint">Refine your deck with precise visual comments. Cmd/Ctrl-click any slide element to attach it as a reference, then describe the change you want.</p>
       </div>
       <div class="panel">
         <div class="label">Comment</div>
-        <div id="comment" class="comment-editor" contenteditable="true" role="textbox" aria-multiline="true" data-placeholder="Example: Align @Metric 1 with @Metric 2, and remove @Text block 3."></div>
+        <div id="comment" class="comment-editor" contenteditable="true" role="textbox" aria-multiline="true" data-placeholder="Example: Cmd/Ctrl-click to ref the chart title, then ask to make it shorter and align it with the KPI row."></div>
       </div>
       <div id="commentThread" class="comment-thread" aria-live="polite"></div>
       <button id="send" disabled>Send comments</button>
@@ -275,6 +339,22 @@ function renderEditorShell(token: string): string {
     (() => {
       const token = ${encodedToken};
       const COMMENT_STALE_MS = 60000;
+      const EDITOR_WIDTH_KEY = 'revela-edit-editor-width';
+      const DEFAULT_EDITOR_WIDTH = 376;
+      const MIN_EDITOR_WIDTH = 320;
+      const MAX_EDITOR_WIDTH = 620;
+      const REFERENCE_COLORS = [
+        { border: '#7aa6d8', fill: 'rgba(122,166,216,.18)', bg: '#eaf2fb', text: '#244f78' },
+        { border: '#a99bd9', fill: 'rgba(169,155,217,.18)', bg: '#f1eefb', text: '#574985' },
+        { border: '#83b99a', fill: 'rgba(131,185,154,.18)', bg: '#edf7f1', text: '#2f6848' },
+        { border: '#d7a775', fill: 'rgba(215,167,117,.18)', bg: '#fbf1e7', text: '#7a4d22' },
+        { border: '#d493b0', fill: 'rgba(212,147,176,.18)', bg: '#faedf3', text: '#7b3f5b' },
+        { border: '#73b8bd', fill: 'rgba(115,184,189,.18)', bg: '#e8f6f7', text: '#285f64' },
+        { border: '#c7b46e', fill: 'rgba(199,180,110,.18)', bg: '#f8f3df', text: '#6b5b1e' },
+        { border: '#9eb27e', fill: 'rgba(158,178,126,.18)', bg: '#f1f6e9', text: '#4f642e' },
+        { border: '#c08fc8', fill: 'rgba(192,143,200,.18)', bg: '#f7edf8', text: '#6b3f73' },
+        { border: '#8fa7c9', fill: 'rgba(143,167,201,.18)', bg: '#eef3fa', text: '#405a7b' },
+      ];
       const state = {
         references: [],
         pendingComments: [],
@@ -288,10 +368,12 @@ function renderEditorShell(token: string): string {
         pendingRefreshMessage: false,
         bound: false,
         commentRange: null,
+        resizeDrag: null,
       };
       const els = {
         frame: null,
         hitbox: null,
+        resizeHandle: null,
         comment: null,
         commentThread: null,
         send: null,
@@ -311,15 +393,17 @@ function renderEditorShell(token: string): string {
         try {
           els.frame = document.getElementById('deck');
           els.hitbox = document.getElementById('hitbox');
+          els.resizeHandle = document.getElementById('resizeHandle');
           els.comment = document.getElementById('comment');
           els.commentThread = document.getElementById('commentThread');
           els.send = document.getElementById('send');
           els.status = document.getElementById('status');
 
-          if (!els.frame || !els.hitbox || !els.comment || !els.commentThread || !els.send || !els.status) {
+          if (!els.frame || !els.hitbox || !els.resizeHandle || !els.comment || !els.commentThread || !els.send || !els.status) {
             throw new Error('Editor boot failed: required DOM nodes are missing.');
           }
 
+          restoreEditorWidth();
           bindEvents();
           setStatus('Editor ready. Ctrl/Cmd + click deck elements to reference them.');
           initFrame();
@@ -358,9 +442,59 @@ function renderEditorShell(token: string): string {
           renderHoverOutline(state.hoverEl);
           renderReferenceOutlines();
         }, { passive: false });
+        els.resizeHandle.addEventListener('pointerdown', startEditorResize);
+        els.resizeHandle.addEventListener('dblclick', resetEditorWidth);
         els.send.addEventListener('click', sendComment);
       }
 
+      function restoreEditorWidth() {
+        try {
+          const saved = Number(window.localStorage.getItem(EDITOR_WIDTH_KEY));
+          setEditorWidth(Number.isFinite(saved) ? saved : DEFAULT_EDITOR_WIDTH, false);
+        } catch {
+          setEditorWidth(DEFAULT_EDITOR_WIDTH, false);
+        }
+      }
+
+      function startEditorResize(event) {
+        event.preventDefault();
+        const currentWidth = Number.parseFloat(getComputedStyle(document.querySelector('.app')).getPropertyValue('--editor-width')) || DEFAULT_EDITOR_WIDTH;
+        state.resizeDrag = { startX: event.clientX, startWidth: currentWidth };
+        document.body.classList.add('resizing');
+        els.resizeHandle.setPointerCapture?.(event.pointerId);
+        window.addEventListener('pointermove', resizeEditor);
+        window.addEventListener('pointerup', stopEditorResize, { once: true });
+      }
+
+      function resizeEditor(event) {
+        if (!state.resizeDrag) return;
+        const nextWidth = state.resizeDrag.startWidth + state.resizeDrag.startX - event.clientX;
+        setEditorWidth(nextWidth, true);
+      }
+
+      function stopEditorResize() {
+        state.resizeDrag = null;
+        document.body.classList.remove('resizing');
+        window.removeEventListener('pointermove', resizeEditor);
+      }
+
+      function resetEditorWidth() {
+        setEditorWidth(DEFAULT_EDITOR_WIDTH, true);
+      }
+
+      function setEditorWidth(width, persist) {
+        const nextWidth = clampEditorWidth(width);
+        document.querySelector('.app')?.style.setProperty('--editor-width', nextWidth + 'px');
+        if (!persist) return;
+        try {
+          window.localStorage.setItem(EDITOR_WIDTH_KEY, String(nextWidth));
+        } catch {}
+      }
+
+      function clampEditorWidth(width) {
+        return Math.min(MAX_EDITOR_WIDTH, Math.max(MIN_EDITOR_WIDTH, Math.round(width)));
+      }
+
       function initFrame() {
         try {
           const doc = els.frame.contentDocument;
@@ -406,6 +540,7 @@ function renderEditorShell(token: string): string {
           const nextVersion = body.version || (String(body.mtimeMs) + ':' + String(body.size));
           if (!state.deckVersion) {
             state.deckVersion = nextVersion;
+            markCommentsUpdatedForVersion(nextVersion);
             markStaleComments();
             return;
           }
@@ -414,7 +549,7 @@ function renderEditorShell(token: string): string {
             return;
           }
           state.deckVersion = nextVersion;
-          markCommentsAppliedForVersion(nextVersion);
+          markCommentsUpdatedForVersion(nextVersion);
           refreshDeckPreview(body.mtimeMs);
         } catch (error) {
           reportError(error);
@@ -497,7 +632,7 @@ function renderEditorShell(token: string): string {
           const body = await res.json().catch(() => ({}));
           if (!res.ok || !body.ok) throw new Error(body.error || 'Failed to send comment');
           updatePendingCommentStatus(commentId, 'sent', { baseDeckVersion: body.deckVersion || state.deckVersion });
-          setStatus('Comment sent. Waiting for deck update...');
+          if (pendingCommentStatus(commentId) !== 'updated') setStatus('Comment sent. Waiting for deck update...');
           updateSendState();
         } catch (error) {
           updatePendingCommentStatus(commentId, 'failed');
@@ -525,9 +660,10 @@ function renderEditorShell(token: string): string {
           return;
         }
         const payload = collectPayload(target);
+        const color = REFERENCE_COLORS[(state.nextReferenceId - 1) % REFERENCE_COLORS.length];
         const id = 'ref-' + state.nextReferenceId++;
         const label = nextReferenceLabel(payload);
-        const reference = { id, target, label, payload };
+        const reference = { id, target, label, payload, color };
         state.references.push(reference);
         insertReferenceChip(reference);
         renderReferenceOutlines();
@@ -571,7 +707,7 @@ function renderEditorShell(token: string): string {
           status,
           createdAt: Date.now(),
           baseDeckVersion: state.deckVersion,
-          appliedVersion: null,
+          updatedVersion: null,
         });
         renderCommentThread();
         return id;
@@ -580,42 +716,46 @@ function renderEditorShell(token: string): string {
       function updatePendingCommentStatus(id, status, updates) {
         const comment = state.pendingComments.find((item) => item.id === id);
         if (!comment) return;
-        if (comment.status === 'applied' && status !== 'failed') return;
+        if (comment.status === 'updated' && status !== 'failed') return;
         comment.status = status;
         if (updates) Object.assign(comment, updates);
         renderCommentThread();
       }
 
-      function markCommentsAppliedForVersion(version) {
+      function markCommentsUpdatedForVersion(version) {
         let changed = false;
         state.pendingComments.forEach((comment) => {
           if ((comment.status === 'sent' || comment.status === 'sending' || comment.status === 'stale') && comment.baseDeckVersion !== version) {
-            comment.status = 'applied';
-            comment.appliedVersion = version;
+            comment.status = 'updated';
+            comment.updatedVersion = version;
             changed = true;
           }
         });
-        if (changed) renderCommentThread();
+        if (changed) {
+          renderCommentThread();
+          setStatus('Deck file updated. Preview will refresh automatically.');
+        }
       }
 
       function markStaleComments() {
         const now = Date.now();
         let changed = false;
-        const hasWaiting = state.pendingComments.some((comment) => {
-          if (comment.status !== 'sent' && comment.status !== 'sending') return false;
-          if (now - comment.createdAt < COMMENT_STALE_MS) return true;
+        state.pendingComments.forEach((comment) => {
+          if (comment.status !== 'sent' && comment.status !== 'sending') return;
+          if (now - comment.createdAt < COMMENT_STALE_MS) return;
           comment.status = 'stale';
           changed = true;
-          return true;
         });
         if (changed) {
           renderCommentThread();
-          setStatus('Still waiting for deck file update. If OpenCode already finished, refresh the editor.');
-        } else if (hasWaiting) {
-          setStatus('Comment sent. Waiting for deck update...');
+          setStatus('Still waiting for deck file update. The preview will refresh automatically when the file changes.');
         }
       }
 
+      function pendingCommentStatus(id) {
+        return state.pendingComments.find((comment) => comment.id === id)?.status || '';
+      }
+
       function renderCommentThread() {
         els.commentThread.textContent = '';
         state.pendingComments.forEach((comment) => {
@@ -637,7 +777,7 @@ function renderEditorShell(token: string): string {
       }
 
       function commentStatusLabel(status) {
-        if (status === 'applied') return '✅ Applied';
+        if (status === 'updated') return 'Deck file updated';
         if (status === 'stale') return 'Still waiting for deck file update';
         if (status === 'failed') return 'Failed to send';
         if (status === 'sending') return 'Sending to OpenCode...';
@@ -661,6 +801,12 @@ function renderEditorShell(token: string): string {
         return outline;
       }
 
+      function setOutlineColor(outline, color) {
+        if (!outline || !color) return;
+        outline.style.borderColor = color.border;
+        outline.style.background = color.fill;
+      }
+
       function renderBox(outline, target) {
         if (!outline || !target || !target.getBoundingClientRect) {
           if (outline) outline.style.display = 'none';
@@ -681,8 +827,12 @@ function renderEditorShell(token: string): string {
       function renderReferenceOutlines() {
         const doc = els.frame.contentDocument;
         if (!doc || doc.location.href === 'about:blank') return;
-        while (state.referenceOutlines.length < state.references.length) state.referenceOutlines.push(createOutline(doc, '#f59e0b', 'rgba(245,158,11,.16)'));
-        state.referenceOutlines.forEach((outline, index) => renderBox(outline, state.references[index]?.target));
+        while (state.referenceOutlines.length < state.references.length) state.referenceOutlines.push(createOutline(doc, '#7aa6d8', 'rgba(122,166,216,.18)'));
+        state.referenceOutlines.forEach((outline, index) => {
+          const reference = state.references[index];
+          setOutlineColor(outline, reference?.color);
+          renderBox(outline, reference?.target);
+        });
       }
 
       function clearHover() {
@@ -704,6 +854,9 @@ function renderEditorShell(token: string): string {
         chip.className = 'ref-chip';
         chip.contentEditable = 'false';
         chip.dataset.refId = reference.id;
+        chip.style.setProperty('--ref-bg', reference.color.bg);
+        chip.style.setProperty('--ref-border', reference.color.border);
+        chip.style.setProperty('--ref-text', reference.color.text);
         chip.textContent = '@' + reference.label;
         const trailingSpace = document.createTextNode(' ');
         const range = getCommentInsertRange();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyber-dash-tech/revela",
-  "version": "0.7.9",
+  "version": "0.8.2",
   "description": "OpenCode plugin that turns AI into an HTML slide deck generator",
   "type": "module",
   "main": "./index.ts",