claude-simple 0.2.24 → 0.2.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-simple",
-  "version": "0.2.24",
+  "version": "0.2.26",
   "type": "module",
   "bin": {
     "claude-simple": "server.js",

package/public/api.js

@@ -26,20 +26,26 @@ function isHubOnlyPath(path) {
     || p === '/api/notifications/read'
     || p === '/api/ai/notes'
     || p.startsWith('/api/ai/notes/')
-    || p.startsWith('/api/auth/');
+    || p.startsWith('/api/auth/')
+    || p.startsWith('/api/collab/');
 }
 
 export async function api(method, path, body, signal, opts = {}) {
-  const machineId = currentMachineId(opts);
+  const machineId = opts.hub ? null : currentMachineId(opts);
   const headers = {
     'Content-Type': 'application/json',
     ...(ctx.token ? { Authorization: `Bearer ${ctx.token}` } : {}),
   };
 
   // Hub mode: route data APIs to the selected edge (sessions/files/git/…)
-  if (hubMode.peek() && machineId && !isHubOnlyPath(path)) {
+  if (!opts.hub && hubMode.peek() && machineId && !isHubOnlyPath(path)) {
     headers['X-Machine-Id'] = machineId;
   }
+  const mutating = method.toUpperCase() !== 'GET' && method.toUpperCase() !== 'HEAD';
+  if (mutating && ctx.lock?.token && ctx.lock?.key && !String(path).startsWith('/api/collab/')) {
+    headers['X-Lock-Token'] = ctx.lock.token;
+    headers['X-Lock-Key'] = ctx.lock.key;
+  }
 
   const etagKey = opts.etag === true
     ? `${ctx.token || ''}:${machineId || ''}:${path}`
@@ -54,6 +60,7 @@ export async function api(method, path, body, signal, opts = {}) {
       method,
       signal,
       headers,
+      ...(opts.cache ? { cache: opts.cache } : {}),
       ...(body !== undefined ? { body: JSON.stringify(body) } : {}),
     });
     if (res.status === 304) return NOT_MODIFIED;

package/public/app.js

@@ -3,7 +3,7 @@ import { ctx } from './state.js';
 import { probeHub } from './api.js';
 import { initShell, showApp, initAuth, resumeSession, switchTab, shouldRestoreSessionOnBoot } from './shell.js';
 import { initChat } from './chat.js';
-import { initFilesTab } from './files.js';
+import { initFilesTab } from './files.js?v=ui-22';
 import { initGitTab } from './git.js';
 import { initSettings } from './settings.js';
 import { initTerminal } from './terminal.js';

package/public/chat.js

@@ -2,8 +2,9 @@
 import { watch, delegate, esc, $ } from './lib.js';
 import { ctx, isProcessing, currentProject, currentTab, currentModel, currentEffort, currentPermission,
          currentAgent, setAgent, AGENT_LABELS, getDefaultModel, getModelsForAgent, getEffortsForModel,
-         getDefaultEffort, addCustomModel, setCurrentModel, chatDensity, wsStatus } from './state.js';
+         getDefaultEffort, addCustomModel, setCurrentModel, chatDensity, wsStatus, sessionMetaMap, metaKey } from './state.js';
 import { sendWs, api, authHeaders, flushWsQueue, clearWsQueue } from './api.js';
+import { acquireSessionLock, canWriteNow } from './locks.js';
 import { initWakeLock, setWakeLockDesired } from './wake-lock.js';
 import { pushNotification } from './notifications.js';
 import { renderMermaid } from './mermaid.js';
@@ -37,13 +38,39 @@ let sawDisconnect = false;
 let lastWsMachine = null;
 let reconnectQuiet = false;
 const HUB_CURSOR_KEY = 'hubStreamCursors';
+const assistantMessageRefs = new Map();
+let assistantMessageSeq = 0;
+const renderedGrokQueuePrompts = new Set();
+const PENDING_QUEUE_KEY = 'pendingUserTexts';
 /** FIFO messages deliberately queued while a turn is running. */
-let pendingUserTexts = [];
+let pendingUserTexts = (() => {
+  try {
+    const saved = JSON.parse(sessionStorage.getItem(PENDING_QUEUE_KEY) || '[]');
+    return Array.isArray(saved) ? saved.filter(x => x?.key && x?.text).slice(-30) : [];
+  } catch { return []; }
+})();
+const announcedRestoredQueues = new Set();
 // Composer state belongs to a conversation, never to the shared textarea.
 // Keeping this in memory deliberately avoids persisting potentially sensitive
 // prompts to disk while still making session switches lossless.
 const composerDrafts = new Map();
 
+function persistPendingUserTexts() {
+  try {
+    if (pendingUserTexts.length) sessionStorage.setItem(PENDING_QUEUE_KEY, JSON.stringify(pendingUserTexts.slice(-30)));
+    else sessionStorage.removeItem(PENDING_QUEUE_KEY);
+  } catch { /* private mode / quota: in-memory queue still works */ }
+}
+
+function announceRestoredQueue() {
+  const key = draftKey();
+  const count = pendingUserTexts.filter(item => item.key === key).length;
+  if (count && !announcedRestoredQueues.has(key)) {
+    announcedRestoredQueues.add(key);
+    appendSystemMsg(`⌛ Restored ${count} queued prompt${count === 1 ? '' : 's'} in this browser tab`);
+  }
+}
+
 function hubCursorKey(sessionId = ctx.sessionId, agent = ctx.agent, machineId = ctx.machineId) {
   return sessionId ? `${machineId || ''}:${agent || 'claude'}:${sessionId}` : '';
 }
@@ -106,6 +133,7 @@ export function parkQueuedMessages(identity) {
   const queued = pendingUserTexts.filter(item => item.key === key);
   if (!queued.length) return;
   pendingUserTexts = pendingUserTexts.filter(item => item.key !== key);
+  persistPendingUserTexts();
   const existing = composerDrafts.get(key) || '';
   composerDrafts.set(key, [existing, ...queued.map(item => item.text)].filter(Boolean).join('\n\n'));
 }
@@ -126,7 +154,7 @@ function bindSocketLifecycle() {
       ensureChatSocket({ probe: true });
       // Re-subscribe so server can re-attach stream / clear stuck busy state
       if (ctx.ws?.readyState === WebSocket.OPEN && ctx.sessionId) {
-        try { ctx.ws.send(JSON.stringify({ type: 'subscribe', sessionId: ctx.sessionId })); } catch { /* ignore */ }
+        try { ctx.ws.send(JSON.stringify({ type: 'subscribe', sessionId: ctx.sessionId, agent: ctx.agent })); } catch { /* ignore */ }
       }
     }
   });
@@ -225,6 +253,50 @@ function syncWakeLock() {
   setWakeLockDesired(need);
 }
 
+function composerBlockReason() {
+  if ((ctx.role || 'editor') === 'viewer') return '只读账号，无法输入';
+  if (ctx.lock?.foreign) {
+    const who = ctx.lock.holder && ctx.lock.holder !== 'viewer' ? ctx.lock.holder : '其他用户';
+    return `会话由 ${who} 占用（锁）`;
+  }
+  return '当前无法输入';
+}
+
+/** Enable typing whenever this user is allowed to write (role + lease). */
+export function applyComposerAccess() {
+  const writable = canWriteNow();
+  ctx.externalSessionReadOnly = !writable;
+  const input = $('chat-input');
+  const send = $('send-btn');
+  const attach = $('btn-attach');
+  const banner = $('session-lock-banner');
+  if (input) {
+    input.disabled = !writable;
+    input.readOnly = !writable;
+    if (!writable) input.placeholder = composerBlockReason();
+    else if (isProcessing.peek()) input.placeholder = '回复中… 可先写好下一条，结束后自动发送 · 或点 ■ 停止';
+    else updateInputMode(input.value || '');
+  }
+  if (send) send.disabled = !writable;
+  if (attach) attach.disabled = !writable;
+  if (banner) {
+    if (!writable) {
+      banner.classList.remove('hidden');
+      banner.textContent = composerBlockReason();
+    } else {
+      banner.classList.add('hidden');
+      banner.textContent = '';
+    }
+  }
+}
+
+/** Kept for session-nav resets. Never use this to lock the composer on
+ * native JSONL sync — UI-owned sessions write the same files, which left
+ * holders unable to type after a turn. */
+export function setExternalSessionReadOnly(_readOnly) {
+  applyComposerAccess();
+}
+
 /** Manual reconnect (toolbar / banner). Resets backoff and forces a new socket. */
 export function refreshConnection() {
   reconnectDelay = 400;
@@ -273,9 +345,10 @@ export function connectWS(opts = {}) {
     wsStatus.value = 'open';
     updateConnDot();
     if (ctx.sessionId) {
-      try { sock.send(JSON.stringify({ type: 'subscribe', sessionId: ctx.sessionId })); } catch { /* ignore */ }
+      try { sock.send(JSON.stringify({ type: 'subscribe', sessionId: ctx.sessionId, agent: ctx.agent })); } catch { /* ignore */ }
     }
     flushWsQueue();
+    announceRestoredQueue();
     startHeartbeat(sock, gen);
     syncWakeLock();
     if (sawDisconnect && !reconnectQuiet) {
@@ -307,6 +380,10 @@ export function connectWS(opts = {}) {
         // Server says idle — unlock (fixes Grok lingering process / missed complete)
         isProcessing.value = false;
         flushPendingUserText();
+      } else {
+        // After reload the UI starts idle; server status is still authoritative
+        // enough to release browser-restored queued prompts.
+        flushPendingUserText();
       }
       syncWakeLock();
       return;
@@ -336,6 +413,7 @@ function flushPendingUserText() {
   // opened (or are converted to a draft during navigation).
   if (index < 0) return;
   const [pending] = pendingUserTexts.splice(index, 1);
+  persistPendingUserTexts();
   const input = $('chat-input');
   if (input) {
     input.value = pending.text;
@@ -379,10 +457,25 @@ function handleWsMessage(msg) {
     document.dispatchEvent(new CustomEvent('sessions-changed'));
     return;
   }
+  if (msg.type === 'external-sessions-changed') {
+    document.dispatchEvent(new CustomEvent('sessions-changed'));
+    return;
+  }
+  if (msg.type === 'external-session-updated') {
+    // Native JSONL changed (our agent or a terminal CLI). Refresh history but
+    // do not disable the composer: that flag stuck after every UI turn.
+    document.dispatchEvent(new CustomEvent('sessions-changed'));
+    document.dispatchEvent(new CustomEvent('external-session-updated', { detail: msg }));
+    return;
+  }
   if (msg.type === 'notification' && msg.notification) {
     pushNotification(msg.notification);
     return;
   }
+  if (msg.type === 'grok-queue-status') {
+    renderGrokQueuePrompts(msg);
+    return;
+  }
   if (msg.type === 'result') {
     finalizeThoughtStream();
     finalizeAssistantStream();
@@ -422,6 +515,10 @@ function handleWsMessage(msg) {
   if (msg.type === 'error') {
     finalizeThoughtStream();
     finalizeAssistantStream();
+    if (msg.code === 423 || /locked/i.test(String(msg.message || ''))) {
+      ctx.lock = { ...(ctx.lock || {}), held: false, foreign: true, holder: msg.lock?.holder || ctx.lock?.holder || 'another user' };
+      applyComposerAccess();
+    }
     appendMsg('error', 'Error', msg.message);
     markTurnDone();
     return;
@@ -555,6 +652,7 @@ function finalizeAssistantStream() {
     liveAsstBody.classList.add('md');
     liveAsstBody.innerHTML = renderMarkdown(text);
     enhanceMarkdown(liveAsstEl);
+    addAssistantMessageActions(liveAsstEl, text);
   } else {
     liveAsstEl.remove();
   }
@@ -811,6 +909,22 @@ export function sendMessage() {
   const input = $('chat-input');
   const text  = input?.value.trim();
   if (!text || !currentProject.peek()) return;
+  if (!canWriteNow()) {
+    appendSystemMsg(composerBlockReason());
+    acquireSessionLock().then(() => applyComposerAccess()).catch(() => {});
+    return;
+  }
+  if (ctx.sessionId && !ctx.lock?.held && !ctx.lock?.unmanaged) {
+    acquireSessionLock().then(r => {
+      if (!r?.ok && !r?.skipped) {
+        applyComposerAccess();
+        appendSystemMsg(composerBlockReason());
+        return;
+      }
+      sendMessage();
+    }).catch(() => sendMessage());
+    return;
+  }
 
   // While a turn is running, queue the next message (common Grok complaint).
   if (isProcessing.peek()) {
@@ -821,22 +935,26 @@ export function sendMessage() {
       const effort = currentEffort.peek() || getDefaultEffort(agent, currentModel.peek()) || 'low';
       const ok = sendWs({
         type: 'command', cmd: 'turn.start', agent, command: text, sessionId: ctx.sessionId,
+        lockToken: ctx.lock?.token || undefined,
         options: {
           agent, cwd: currentProject.peek().path, sessionId: ctx.sessionId,
           configDir: ctx.configDir, model: currentModel.peek(),
+          lockToken: ctx.lock?.token || undefined,
           effort,
           ...(currentPermission.peek() && { permissionMode: currentPermission.peek() }),
           ...(currentPermission.peek() === 'bypassPermissions' && { allowDangerouslySkipPermissions: true }),
         },
       });
+      appendQueuedGrokPrompt(text);
       input.value = '';
       autoResize(input);
       updateInputMode('');
       clearPendingAttachments();
-      appendSystemMsg(ok ? '已加入 Grok 服务端队列，刷新页面不会丢失' : '连接未就绪，消息将在重连后发送');
+      appendSystemMsg(ok ? '已加入 Grok 服务端队列，刷新页面仍会显示' : '连接未就绪，消息将在重连后发送');
       return;
     }
     pendingUserTexts.push({ key: draftKey(), text });
+    persistPendingUserTexts();
     input.value = '';
     autoResize(input);
     updateInputMode('');
@@ -887,12 +1005,14 @@ export function sendMessage() {
       agent,
       command: text,
       sessionId: ctx.sessionId,
+      lockToken: ctx.lock?.token || undefined,
       options: {
         agent,
         cwd:       currentProject.peek().path,
         sessionId: ctx.sessionId,
         configDir: ctx.configDir,
         model:     currentModel.peek(),
+        lockToken: ctx.lock?.token || undefined,
         ...(effort     && { effort }),
         ...(permission && { permissionMode: permission }),
         ...(permission === 'bypassPermissions' && { allowDangerouslySkipPermissions: true }),
@@ -907,6 +1027,8 @@ export function stopProcessing() {
     sendWs({ type: 'command', cmd: 'turn.interrupt', sessionId: ctx.sessionId });
   }
   pendingUserTexts = pendingUserTexts.filter(item => item.key !== draftKey());
+  persistPendingUserTexts();
+  markQueuedGrokPromptsCancelled();
   markTurnDone();
 }
 
@@ -1017,7 +1139,7 @@ function bubbleHtml(role, text, ts) {
     case 'assistant': {
       const long = text.length > ASST_COLLAPSE;
       const inner = long ? `<div class="msg-body">${renderMarkdown(text)}</div>${expandBtn}` : renderMarkdown(text);
-      bubble = `<div class="max-w-[min(92%,52rem)] rounded-2xl rounded-tl-sm px-3.5 py-2.5 text-sm bg-base-200 border border-base-300/40 break-words md leading-relaxed${long ? ' msg-card' : ''}">${inner}</div>`;
+      bubble = `<div class="msg-assistant-content max-w-[min(92%,52rem)] rounded-2xl rounded-tl-sm px-3.5 py-2.5 text-sm bg-base-200 border border-base-300/40 break-words md leading-relaxed${long ? ' msg-card' : ''}">${inner}</div>`;
       break;
     }
     case 'error':
@@ -1047,6 +1169,7 @@ export function appendMsg(role, _label, text, opts = {}) {
   const ts = coerceTs(opts.ts) ?? (role === 'system' ? null : Date.now());
   msgs.insertAdjacentHTML('beforeend', bubbleHtml(role, text, ts));
   enhanceMarkdown(msgs.lastElementChild);
+  if (role === 'assistant') addAssistantMessageActions(msgs.lastElementChild, text, opts);
   stickBottom(msgs, role === 'user');
 }
 
@@ -1345,6 +1468,122 @@ export function clearMessages() {
   toolBatch = null;
   liveAsstEl = liveAsstBody = null;
   liveThoughtEl = liveThoughtBody = null;
+  assistantMessageRefs.clear();
+  renderedGrokQueuePrompts.clear();
+}
+
+function queuedGrokPromptKey(text, sessionId = ctx.sessionId) {
+  return `${sessionId || ''}\n${String(text || '')}`;
+}
+
+/** Paint a server-accepted Grok follow-up before the native transcript writes
+ * it. This makes the queued user prompt visible both immediately and after a
+ * reconnect (the server sends the same snapshot on subscribe). */
+function appendQueuedGrokPrompt(text, sessionId = ctx.sessionId) {
+  const key = queuedGrokPromptKey(text, sessionId);
+  if (!text || renderedGrokQueuePrompts.has(key)) return;
+  renderedGrokQueuePrompts.add(key);
+  appendMsg('user', 'You', text, { ts: Date.now() });
+  $('messages')?.lastElementChild?.classList.add('queued-user-msg');
+}
+
+function renderGrokQueuePrompts(msg) {
+  if ((msg.sessionId || ctx.sessionId) !== ctx.sessionId) return;
+  const items = Array.isArray(msg.items) ? msg.items.filter(x => typeof x === 'string' && x.trim()) : [];
+  for (const text of items) appendQueuedGrokPrompt(text, msg.sessionId || ctx.sessionId);
+  if (items.length) appendSystemMsg(`⌛ Grok queue · ${items.length} prompt${items.length === 1 ? '' : 's'} waiting`);
+}
+
+function markQueuedGrokPromptsCancelled() {
+  const msgs = $('messages');
+  if (!msgs) return;
+  msgs.querySelectorAll('.queued-user-msg').forEach(row => {
+    row.classList.remove('queued-user-msg');
+    row.classList.add('cancelled-queued-user-msg');
+  });
+  renderedGrokQueuePrompts.clear();
+}
+
+/** Per-answer controls stay below the assistant message. Raw answer text lives
+ * only in this in-memory map, never in a DOM data attribute. */
+function addAssistantMessageActions(row, text, opts = {}) {
+  if (!row || !text || row.querySelector('.msg-actions')) return;
+  const key = `a${++assistantMessageSeq}`;
+  assistantMessageRefs.set(key, {
+    text,
+    historyIndex: Number.isInteger(opts.historyIndex) ? opts.historyIndex : null,
+    sessionId: ctx.sessionId,
+    agent: ctx.agent || currentAgent.peek() || 'claude',
+    machineId: ctx.machineId || null,
+  });
+  const canFork = !['gemini', 'cursor'].includes(ctx.agent || currentAgent.peek() || 'claude');
+  const actions = document.createElement('div');
+  actions.className = 'msg-actions';
+  actions.innerHTML = `
+    <button type="button" class="msg-action-btn" data-copy-message="${esc(key)}" title="Copy answer">Copy</button>
+    ${canFork ? `<button type="button" class="msg-action-btn" data-fork-message="${esc(key)}" title="Start a branch from this answer">Fork</button>` : ''}`;
+  const timestamp = row.querySelector('.msg-ts');
+  row.insertBefore(actions, timestamp || null);
+}
+
+async function copyAssistantMessage(button) {
+  const ref = assistantMessageRefs.get(button.dataset.copyMessage || '');
+  if (!ref) return;
+  try {
+    await navigator.clipboard.writeText(ref.text);
+    button.textContent = 'Copied';
+  } catch {
+    button.textContent = 'Failed';
+  }
+  setTimeout(() => { button.textContent = 'Copy'; }, 1300);
+}
+
+async function forkAssistantMessage(button) {
+  const ref = assistantMessageRefs.get(button.dataset.forkMessage || '');
+  if (!ref || !ref.sessionId || ref.sessionId !== ctx.sessionId) return;
+  button.disabled = true;
+  button.textContent = 'Forking…';
+  try {
+    const res = await api('POST', `/api/sessions/${encodeURIComponent(ref.sessionId)}/fork`, {
+      sourceAgent: ref.agent,
+      ...(ref.historyIndex != null ? { upTo: ref.historyIndex } : {}),
+      assistantText: ref.text,
+    }, undefined, { machineId: ref.machineId || undefined });
+    if (!res?.success || !res.targetSessionId) throw new Error('Fork did not create a session');
+    const branch = {
+      parentSessionId: ref.sessionId,
+      parentAgent: ref.agent,
+      parentMachineId: ref.machineId,
+      forkMessageIndex: Number.isInteger(res.forkMessageIndex) ? res.forkMessageIndex : ref.historyIndex,
+      forkedAt: Date.now(),
+    };
+    const metaRes = await api('PUT', '/api/sessions/meta', {
+      sessionId: res.targetSessionId, agent: res.targetAgent || ref.agent, branch,
+      machineId: ref.machineId || undefined,
+    }, undefined, { machineId: ref.machineId || undefined });
+    const key = metaKey(res.targetAgent || ref.agent, res.targetSessionId, ref.machineId);
+    sessionMetaMap.value = {
+      ...sessionMetaMap.peek(),
+      [key]: {
+        favorite: Boolean(metaRes?.favorite), notes: metaRes?.notes || '', title: metaRes?.title || '',
+        hidden: Boolean(metaRes?.hidden), branch: metaRes?.branch || branch, updatedAt: metaRes?.updatedAt || Date.now(),
+      },
+    };
+    const [{ loadAllSessions }, { resumeSession }] = await Promise.all([
+      import('./shell/session-list.js'), import('./shell/session-nav.js'),
+    ]);
+    await loadAllSessions({ waitFresh: true });
+    await resumeSession(res.targetSessionId, currentProject.peek()?.path || null, ctx.configDir || null,
+      res.targetAgent || ref.agent, ref.machineId || null);
+    appendSystemMsg('Fork created — this branch can now continue independently.');
+  } catch (err) {
+    button.textContent = 'Fork failed';
+    appendSystemMsg(`Fork failed: ${err.message}`);
+    setTimeout(() => { button.textContent = 'Fork'; }, 1800);
+  } finally {
+    button.disabled = false;
+    if (button.textContent === 'Forking…') button.textContent = 'Fork';
+  }
 }
 
 function appendStreamBubble(role) {
@@ -1620,12 +1859,8 @@ export function initChat() {
   watch(isProcessing, val => {
     $('send-btn')?.classList.toggle('hidden', val);
     $('stop-btn')?.classList.toggle('hidden', !val);
-    const input = $('chat-input');
-    if (input) {
-      input.disabled = false;
-      if (val) input.placeholder = '回复中… 可先写好下一条，结束后自动发送 · 或点 ■ 停止';
-      else updateInputMode(input.value || '');
-    }
+    applyComposerAccess();
+    if (!val) $('send-btn')?.toggleAttribute('disabled', !canWriteNow());
     const msgs = $('messages');
     if (!msgs) return;
     const existing = $('typing-indicator');
@@ -1641,6 +1876,8 @@ export function initChat() {
   });
 
   watch(chatDensity, () => applyChatDensity());
+  document.addEventListener('session-lock-changed', () => applyComposerAccess());
+  applyComposerAccess();
 
   // Chat input: ⌘/Ctrl+Enter = send. On phones, Enter sends (Shift+Enter newline).
   delegate.on('keydown', '#chat-input', e => {
@@ -1747,6 +1984,17 @@ export function initChat() {
     el.textContent = expanded ? '▲ Show less' : '▼ Show more';
   });
 
+  delegate.on('click', '[data-copy-message]', (e, el) => {
+    e.preventDefault();
+    e.stopPropagation();
+    void copyAssistantMessage(el);
+  });
+  delegate.on('click', '[data-fork-message]', (e, el) => {
+    e.preventDefault();
+    e.stopPropagation();
+    void forkAssistantMessage(el);
+  });
+
   // Copy code from fenced blocks
   delegate.on('click', '.code-copy', async (e, el) => {
     e.preventDefault();

package/public/files.js

@@ -2,6 +2,8 @@
 import { effect, asyncEffect, delegate, esc, $ } from './lib.js';
 import { currentProject, currentTab, filesRoot, filesPath, viewingFile, ctx } from './state.js';
 import { api, authHeaders, authQuery } from './api.js';
+import { renderMermaid } from './mermaid.js';
+import { renderMath } from './math.js';
 
 // ── Helpers ───────────────────────────────────────────────────────────────────
 function fileIcon(name) {
@@ -24,6 +26,11 @@ function officeKind(path) {
   return e === 'docx' || e === 'pptx' || e === 'xlsx' || e === 'pdf' ? e : null;
 }
 
+function isMarkdownFile(path) {
+  const ext = extOf(path);
+  return ext === 'md' || ext === 'markdown' || ext === 'mdx';
+}
+
 function sizeLabel(size) {
   if (size == null) return '';
   if (size > 1024 * 1024) return `${(size / (1024 * 1024)).toFixed(1)} MB`;
@@ -136,6 +143,7 @@ function renderDir(files) {
 
 function renderTextFile(path, content, size) {
   const isBinary = /[\x00-\x08\x0e-\x1f]/.test(content.slice(0, 512));
+  if (!isBinary && isMarkdownFile(path)) return renderMarkdownFile(path, content, size);
   const lang = langFromPath(path);
   const langClass = lang ? `language-${esc(lang)}` : '';
   const body = isBinary
@@ -144,6 +152,37 @@ function renderTextFile(path, content, size) {
   return fileChrome(path, size, isBinary ? 'binary' : (lang || 'text')) + body;
 }
 
+function markdownHtml(content) {
+  if (typeof marked !== 'undefined') {
+    try {
+      return marked.parse(content, { breaks: true, gfm: true });
+    } catch { /* Show the source below if parsing fails. */ }
+  }
+  return esc(content).replace(/\n/g, '<br>');
+}
+
+function renderMarkdownFile(path, content, size) {
+  return fileChrome(path, size, 'Markdown') + `
+    <div class="file-markdown-toolbar" role="group" aria-label="Markdown view">
+      <button type="button" class="file-markdown-mode active" data-file-render-mode="preview">Preview</button>
+      <button type="button" class="file-markdown-mode" data-file-render-mode="code">Code</button>
+    </div>
+    <div class="file-markdown-preview md p-4 overflow-auto flex-1">${markdownHtml(content)}</div>
+    <pre class="file-markdown-code file-preview p-4 font-mono text-xs leading-relaxed overflow-auto flex-1 m-0 hidden"><code class="file-preview-code language-markdown">${esc(content)}</code></pre>`;
+}
+
+function enhanceMarkdownPreview(root) {
+  const preview = root?.querySelector('.file-markdown-preview');
+  if (!preview) return;
+  if (typeof hljs !== 'undefined') {
+    preview.querySelectorAll('pre code:not(.hljs)').forEach(el => {
+      try { hljs.highlightElement(el); } catch { /* retain readable source */ }
+    });
+  }
+  renderMath(preview);
+  renderMermaid(preview);
+}
+
 // ── Office previews ───────────────────────────────────────────────────────────
 async function renderDocx(arrayBuffer) {
   await loadScript('/vendor/mammoth.browser.min.js');
@@ -426,6 +465,7 @@ async function showFile(area, file, data, signal) {
   }
   area.innerHTML = renderTextFile(file, data.content || '', size);
   highlightFilePreview(area);
+  if (isMarkdownFile(file)) enhanceMarkdownPreview(area);
 }
 
 // ── Init ──────────────────────────────────────────────────────────────────────
@@ -494,6 +534,16 @@ export function initFilesTab() {
     if (!path) return;
     deleteFile(currentProject.peek(), path);
   });
+  delegate.on('click', '[data-file-render-mode]', (_, el) => {
+    const root = el.closest('#files-area');
+    if (!root) return;
+    const showCode = el.dataset.fileRenderMode === 'code';
+    root.querySelector('.file-markdown-preview')?.classList.toggle('hidden', showCode);
+    root.querySelector('.file-markdown-code')?.classList.toggle('hidden', !showCode);
+    root.querySelectorAll('[data-file-render-mode]').forEach(button => {
+      button.classList.toggle('active', button === el);
+    });
+  });
   // Excel sheet tabs
   delegate.on('click', '.office-sheet-tab', (_, el) => {
     const root = el.closest('.office-xlsx');

package/public/index.html

@@ -85,7 +85,7 @@
   <script src="/vendor/mermaid.min.js"></script>
   <link rel="stylesheet" href="/vendor/katex.min.css">
   <script src="/vendor/katex.min.js"></script>
-  <link rel="stylesheet" href="style.css?v=ui-20">
+  <link rel="stylesheet" href="style.css?v=ui-22">
 </head>
 <body class="h-dvh overflow-hidden flex flex-col bg-base-100 text-base-content">
   <div id="root" class="flex flex-col flex-1 overflow-hidden"></div>
@@ -101,6 +101,6 @@
       }
     }, 10000);
   </script>
-  <script type="module" src="app.js?v=ui-20"></script>
+  <script type="module" src="app.js?v=ui-22"></script>
 </body>
 </html>