@lelouchhe/webagent 0.1.0

package/dist/js/input.mmjqzu9r.js

@@ -0,0 +1,196 @@
+// User input handling: send, cancel, keyboard shortcuts
+
+import {
+  state, dom, setBusy, sendCancel,
+  getConfigOption, getConfigValue, updateNewBtnVisibility,
+} from './state.mmjqzu9r.js';
+import { addMessage, addSystem, addBashBlock, showWaiting } from './render.mmjqzu9r.js';
+import { handleSlashCommand, hideSlashMenu, handleSlashMenuKey, updateSlashMenu } from './commands.mmjqzu9r.js';
+import { renderAttachPreview } from './images.mmjqzu9r.js';
+
+// Wire up cancel-timeout feedback (state.js cannot import render.js directly)
+state._onCancelTimeout = () => addSystem('warn: Agent not responding to cancel');
+
+function sendMessage() {
+  const text = dom.input.value.trim();
+  if (!text && state.pendingImages.length === 0) return;
+
+  // Slash commands and bash always go through, even while busy
+  if ((text.startsWith('/') || text === '?' || text.startsWith('? ')) && state.pendingImages.length === 0) {
+    dom.input.value = '';
+    dom.input.style.height = 'auto';
+    updateNewBtnVisibility();
+    syncSendBtn();
+    handleSlashCommand(text);
+    return;
+  }
+
+  if (text.startsWith('!') && state.pendingImages.length === 0) {
+    const command = text.slice(1).trim();
+    if (!command) return;
+    if (!state.sessionId) {
+      addSystem('warn: Session not ready yet, please wait…');
+      return;
+    }
+    dom.input.value = '';
+    dom.input.style.height = 'auto';
+    dom.inputArea.classList.remove('bash-mode');
+    updateNewBtnVisibility();
+    addBashBlock(command, true);
+    state.ws.send(JSON.stringify({ type: 'bash_exec', sessionId: state.sessionId, command }));
+    setBusy(true);
+    return;
+  }
+
+  // Regular messages require agent to be idle
+  if (state.busy) return;
+
+  dom.input.value = '';
+  dom.input.style.height = 'auto';
+  dom.inputArea.classList.remove('bash-mode');
+  updateNewBtnVisibility();
+
+  if (!state.sessionId) {
+    addSystem('warn: Session not ready yet, please wait…');
+    return;
+  }
+
+  // Show user message with image thumbnails
+  const msgEl = addMessage('user', text || '(image)');
+  for (const img of state.pendingImages) {
+    const imgEl = document.createElement('img');
+    imgEl.className = 'user-image';
+    imgEl.src = img.previewUrl;
+    msgEl.appendChild(imgEl);
+  }
+
+  // Upload images to server, then send prompt
+  const images = state.pendingImages.slice();
+  state.pendingImages.length = 0;
+  renderAttachPreview();
+
+  if (images.length > 0) {
+    Promise.all(images.map(img =>
+      fetch(`/api/images/${state.sessionId}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ data: img.data, mimeType: img.mimeType }),
+      }).then(r => r.json()).then(j => ({ data: img.data, mimeType: img.mimeType, path: j.path }))
+    )).then(uploaded => {
+      state.ws.send(JSON.stringify({ type: 'prompt', sessionId: state.sessionId, text: text || 'What is in this image?', images: uploaded }));
+    });
+  } else {
+    state.ws.send(JSON.stringify({ type: 'prompt', sessionId: state.sessionId, text }));
+  }
+  state.turnEnded = false;
+  setBusy(true);
+  showWaiting();
+}
+
+function doCancel() {
+  if (sendCancel()) addSystem('^X');
+}
+
+// --- Event listeners ---
+
+/** True when the input contains a slash command or bang-bash that can bypass busy. */
+function inputHasCommand() {
+  const text = dom.input.value.trim();
+  return text.startsWith('/') || text.startsWith('!') || text === '?' || text.startsWith('? ');
+}
+
+/** Update the send button label to reflect whether the input has a command. */
+function syncSendBtn() {
+  if (!state.busy) return;
+  if (inputHasCommand()) {
+    dom.sendBtn.textContent = '↵';
+    dom.sendBtn.title = 'Send (Enter)';
+    dom.sendBtn.classList.remove('cancel');
+  } else {
+    dom.sendBtn.textContent = '^X';
+    dom.sendBtn.title = 'Cancel (Ctrl+X)';
+    dom.sendBtn.classList.add('cancel');
+  }
+}
+
+dom.sendBtn.onclick = () => {
+  if (state.busy && !inputHasCommand()) {
+    doCancel();
+  } else {
+    sendMessage();
+  }
+};
+
+dom.input.addEventListener('keydown', (e) => {
+  // Slash menu navigation
+  if (handleSlashMenuKey(e)) {
+    e.preventDefault();
+    return;
+  }
+  if (e.key === 'Enter' && !e.shiftKey) {
+    e.preventDefault();
+    hideSlashMenu();
+    sendMessage();
+    return;
+  }
+  // Ctrl+U to upload file
+  if (e.key === 'u' && (e.ctrlKey || e.metaKey) && !e.shiftKey) {
+    e.preventDefault();
+    dom.fileInput.click();
+    return;
+  }
+});
+
+// Global Escape to dismiss slash menu
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'x' && (e.ctrlKey || e.metaKey) && !e.shiftKey && state.busy) {
+    e.preventDefault();
+    doCancel();
+    return;
+  }
+  if (e.key === 'Escape' && dom.slashMenu.classList.contains('active')) {
+    e.preventDefault();
+    hideSlashMenu();
+    dom.input.focus();
+  }
+});
+
+// Cycle mode helper
+function cycleMode() {
+  const opt = getConfigOption('mode');
+  if (!opt || !opt.options.length) return;
+  const idx = opt.options.findIndex(o => o.value === opt.currentValue);
+  const next = opt.options[(idx + 1) % opt.options.length];
+  state.ws.send(JSON.stringify({ type: 'set_config_option', sessionId: state.sessionId, configId: 'mode', value: next.value }));
+  addSystem(`Mode → ${next.name}`);
+}
+
+// Global Ctrl+M to cycle mode
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'm' && (e.ctrlKey || e.metaKey) && !e.shiftKey) {
+    e.preventDefault();
+    cycleMode();
+  }
+});
+
+// Click prompt indicator to cycle mode
+dom.prompt.addEventListener('click', cycleMode);
+
+// Click + to fill /new into input and show path menu
+dom.newBtn.addEventListener('click', () => {
+  dom.input.value = '/new ';
+  updateNewBtnVisibility();
+  syncSendBtn();
+  updateSlashMenu();
+  dom.input.focus();
+});
+
+// Hide + button when input has content; sync send button label
+dom.input.addEventListener('input', () => { updateNewBtnVisibility(); syncSendBtn(); });
+dom.input.addEventListener('focus', updateNewBtnVisibility);
+
+// Auto-resize textarea
+dom.input.addEventListener('input', () => {
+  dom.input.style.height = 'auto';
+  dom.input.style.height = Math.min(dom.input.scrollHeight, 200) + 'px';
+});

package/dist/js/render.mmjqzu9r.js

@@ -0,0 +1,200 @@
+// Rendering functions, theme, markdown, bash UI
+
+import { dom, state } from './state.mmjqzu9r.js';
+
+// --- Markdown ---
+marked.setOptions({ breaks: true, gfm: true });
+
+export function renderMd(text) {
+  return DOMPurify.sanitize(marked.parse(text));
+}
+
+// --- Message helpers ---
+
+export function addMessage(role, text) {
+  const el = document.createElement('div');
+  el.className = `msg ${role}`;
+  el.innerHTML = role === 'user' ? escHtml(text).replace(/\n/g, '<br>') : renderMd(text);
+  appendMessageElement(el);
+  return el;
+}
+
+export function addSystem(text) {
+  const el = document.createElement('div');
+  el.className = 'system-msg';
+  el.textContent = text;
+  appendMessageElement(el);
+}
+
+export function finishAssistant() {
+  state.currentAssistantEl = null;
+  state.currentAssistantText = '';
+}
+
+export function finishThinking() {
+  if (state.currentThinkingEl) {
+    const sum = state.currentThinkingEl.querySelector('summary');
+    sum.textContent = '⠿ thought';
+    sum.classList.remove('active');
+    sum.style.animation = 'none';
+    state.currentThinkingEl = null;
+    state.currentThinkingText = '';
+  }
+}
+
+let waitingEl = null;
+const SCROLL_FOLLOW_THRESHOLD = 80;
+
+function isNearBottom(el) {
+  return el.scrollHeight - el.scrollTop - el.clientHeight < SCROLL_FOLLOW_THRESHOLD;
+}
+
+function updateScrollFollowState() {
+  state.followMessages = isNearBottom(dom.messages);
+}
+
+dom.messages.addEventListener('scroll', updateScrollFollowState);
+
+function shouldFollowNewContent() {
+  return state.followMessages || isNearBottom(dom.messages);
+}
+
+export function appendMessageElement(el, force = false) {
+  const shouldFollow = force || shouldFollowNewContent();
+  dom.messages.appendChild(el);
+  scrollToBottom(shouldFollow);
+  return el;
+}
+
+export function showWaiting() {
+  hideWaiting();
+  waitingEl = document.createElement('div');
+  waitingEl.id = 'waiting';
+  waitingEl.innerHTML = '<span class="cursor">▌</span>';
+  appendMessageElement(waitingEl, true);
+}
+export function hideWaiting() {
+  if (waitingEl) { waitingEl.remove(); waitingEl = null; }
+}
+
+export function scrollToBottom(force) {
+  const el = dom.messages;
+  if (force || state.followMessages) {
+    el.scrollTop = el.scrollHeight;
+    state.followMessages = true;
+    return;
+  }
+  state.followMessages = isNearBottom(el);
+}
+
+export function escHtml(s) {
+  const d = document.createElement('div');
+  d.textContent = s;
+  return d.innerHTML;
+}
+
+export function formatLocalTime(utcStr) {
+  if (!utcStr) return '';
+  const d = new Date(utcStr.endsWith('Z') ? utcStr : utcStr + 'Z');
+  const pad = n => String(n).padStart(2, '0');
+  return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+
+export function renderPatchDiff(ri) {
+  // Case 1: patch string format (*** Begin Patch)
+  if (typeof ri === 'string' && ri.includes('*** Begin Patch')) {
+    const lines = ri.split('\n');
+    const html = [];
+    for (const line of lines) {
+      if (line.startsWith('*** Begin Patch') || line.startsWith('*** End Patch')) continue;
+      if (line.startsWith('*** Update File:') || line.startsWith('*** Add File:') || line.startsWith('*** Delete File:')) {
+        html.push(`<span class="diff-file">${escHtml(line)}</span>`);
+      } else if (line.startsWith('@@')) {
+        html.push(`<span class="diff-hunk">${escHtml(line)}</span>`);
+      } else if (line.startsWith('-')) {
+        html.push(`<span class="diff-del">${escHtml(line)}</span>`);
+      } else if (line.startsWith('+')) {
+        html.push(`<span class="diff-add">${escHtml(line)}</span>`);
+      } else {
+        html.push(escHtml(line));
+      }
+    }
+    return html.join('\n');
+  }
+  // Case 2: object with old_str / new_str (edit tool rawInput)
+  if (ri && typeof ri === 'object') {
+    const html = [];
+    if (ri.path) html.push(`<span class="diff-file">*** ${escHtml(ri.path)}</span>`);
+    if (ri.old_str != null) {
+      for (const line of String(ri.old_str).split('\n')) {
+        html.push(`<span class="diff-del">- ${escHtml(line)}</span>`);
+      }
+    }
+    if (ri.new_str != null) {
+      for (const line of String(ri.new_str).split('\n')) {
+        html.push(`<span class="diff-add">+ ${escHtml(line)}</span>`);
+      }
+    }
+    if (ri.file_text != null) {
+      html.push(`<span class="diff-add">+ (new file, ${ri.file_text.split('\n').length} lines)</span>`);
+    }
+    return html.length > (ri.path ? 1 : 0) ? html.join('\n') : null;
+  }
+  return null;
+}
+
+// --- Bash command UI ---
+
+export function addBashBlock(command, running = false) {
+  const el = document.createElement('div');
+  el.className = 'bash-block';
+  el.innerHTML = `<span class="bash-cmd${running ? ' running' : ''}">${escHtml(command)}</span>` +
+    `<div class="bash-output"></div>`;
+  el.querySelector('.bash-cmd').onclick = () => {
+    const out = el.querySelector('.bash-output');
+    if (out.style.display === 'none') {
+      out.style.display = 'block';
+    } else if (out.classList.contains('has-content')) {
+      out.style.display = 'none';
+    }
+  };
+  appendMessageElement(el);
+  if (running) state.currentBashEl = el;
+  return el;
+}
+
+export function finishBash(el, code, signal) {
+  if (!el) return;
+  const cmd = el.querySelector('.bash-cmd');
+  cmd.classList.remove('running');
+  let exitText = '';
+  if (signal) {
+    exitText = `[signal: ${signal}]`;
+  } else if (code !== 0 && code != null) {
+    exitText = `[exit: ${code}]`;
+  }
+  if (exitText) {
+    const span = document.createElement('span');
+    span.className = `bash-exit ${code === 0 ? 'ok' : 'fail'}`;
+    span.textContent = exitText;
+    cmd.after(span);
+  }
+  if (el === state.currentBashEl) state.currentBashEl = null;
+}
+
+// --- Theme ---
+
+const THEME_ICONS = { auto: '◑', light: '☀', dark: '☾' };
+const THEME_CYCLE = ['auto', 'light', 'dark'];
+function getTheme() { return localStorage.getItem('theme') || 'auto'; }
+function applyTheme(t) {
+  document.documentElement.setAttribute('data-theme', t);
+  dom.themeBtn.textContent = THEME_ICONS[t];
+  dom.themeBtn.title = `Theme: ${t}`;
+  localStorage.setItem('theme', t);
+}
+dom.themeBtn.onclick = () => {
+  const cur = getTheme();
+  applyTheme(THEME_CYCLE[(THEME_CYCLE.indexOf(cur) + 1) % 3]);
+};
+applyTheme(getTheme());

package/dist/js/state.mmjqzu9r.js

@@ -0,0 +1,176 @@
+// Shared state, DOM refs, config helpers, routing, session management
+
+const $ = (s) => document.querySelector(s);
+
+export const dom = {
+  messages: $('#messages'),
+  input: $('#input'),
+  sendBtn: $('#send-btn'),
+  prompt: $('#input-prompt'),
+  status: $('#status'),
+  sessionInfo: $('#session-info'),
+  newBtn: $('#new-btn'),
+  attachBtn: $('#attach-btn'),
+  fileInput: $('#file-input'),
+  attachPreview: $('#attach-preview'),
+  themeBtn: $('#theme-btn'),
+  slashMenu: $('#slash-menu'),
+  inputArea: $('#input-area'),
+};
+
+export const state = {
+  ws: null,
+  sessionId: null,
+  sessionCwd: null,
+  sessionTitle: null,
+  awaitingNewSession: false,
+  configOptions: [],
+  currentAssistantEl: null,
+  currentAssistantText: '',
+  currentThinkingEl: null,
+  currentThinkingText: '',
+  busy: false,
+  pendingImages: [],
+  currentBashEl: null,
+  followMessages: true,
+  pendingToolCallIds: new Set(),
+  pendingPermissionRequestIds: new Set(),
+  pendingPromptDone: false,
+  turnEnded: false,
+  cancelTimeout: 10_000,
+  _cancelTimerId: null,
+  _onCancelTimeout: null,
+  lastEventSeq: 0,
+  replayInProgress: false,
+  replayQueue: [],
+};
+
+const CONNECTION_STATUS_CLASSES = {
+  disconnected: 'is-disconnected',
+  connecting: 'is-connecting',
+  connected: 'is-connected',
+};
+
+export function setConnectionStatus(status, label = status) {
+  dom.status.textContent = '';
+  dom.status.className = `status-dot ${CONNECTION_STATUS_CLASSES[status]}`;
+  dom.status.dataset.state = status;
+  dom.status.setAttribute('aria-label', label);
+  dom.status.setAttribute('title', label);
+}
+
+// --- Config helpers ---
+
+export function getConfigOption(id) { return state.configOptions.find(o => o.id === id); }
+export function getConfigValue(id) { return getConfigOption(id)?.currentValue ?? null; }
+export function setConfigValue(id, value) {
+  const opt = getConfigOption(id);
+  if (opt) opt.currentValue = value;
+}
+export function updateConfigOptions(newOptions) {
+  state.configOptions = newOptions;
+  updateModeUI();
+}
+
+export function updateModeUI() {
+  dom.inputArea.classList.remove('plan-mode', 'autopilot-mode');
+  const modeValue = getConfigValue('mode') || '';
+  if (modeValue.includes('#plan')) dom.inputArea.classList.add('plan-mode');
+  else if (modeValue.includes('#autopilot')) dom.inputArea.classList.add('autopilot-mode');
+}
+
+export function setBusy(on) {
+  state.busy = on;
+  if (on) {
+    dom.sendBtn.textContent = '^X';
+    dom.sendBtn.title = 'Cancel (Ctrl+X)';
+    dom.sendBtn.classList.add('cancel');
+    dom.prompt.classList.add('busy');
+  } else {
+    dom.sendBtn.textContent = '↵';
+    dom.sendBtn.title = 'Send (Enter)';
+    dom.sendBtn.classList.remove('cancel');
+    dom.prompt.classList.remove('busy');
+  }
+}
+
+export function requestNewSession({ cwd, inheritFromSessionId = state.sessionId } = {}) {
+  const payload = { type: 'new_session' };
+  if (cwd) payload.cwd = cwd;
+  if (inheritFromSessionId) payload.inheritFromSessionId = inheritFromSessionId;
+  state.awaitingNewSession = true;
+  state.ws.send(JSON.stringify(payload));
+}
+
+export function resetSessionUI() {
+  dom.messages.innerHTML = '';
+  state.currentAssistantEl = null;
+  state.currentAssistantText = '';
+  state.currentThinkingEl = null;
+  state.currentThinkingText = '';
+  state.pendingImages.length = 0;
+  state.followMessages = true;
+  state.pendingToolCallIds.clear();
+  state.pendingPermissionRequestIds.clear();
+  state.pendingPromptDone = false;
+  state.turnEnded = false;
+  state._cancelTimerId = null;
+  state.lastEventSeq = 0;
+  state.replayInProgress = false;
+  state.replayQueue = [];
+  dom.attachPreview.innerHTML = '';
+  dom.attachPreview.classList.remove('active');
+  dom.input.disabled = false;
+  dom.sendBtn.disabled = false;
+  dom.input.placeholder = '';
+  setBusy(false);
+}
+
+export function updateNewBtnVisibility() {
+  dom.newBtn.classList.toggle('hidden', dom.input.value.length > 0);
+}
+
+// Send cancel without UI side-effect — callers add their own feedback.
+// If state.cancelTimeout > 0, arms a timer that calls onCancelTimeout() when
+// the agent fails to acknowledge the cancel in time.
+export function sendCancel() {
+  if (!state.busy || !state.ws) return false;
+  state.ws.send(JSON.stringify({ type: 'cancel', sessionId: state.sessionId }));
+  clearCancelTimer();
+  if (state.cancelTimeout > 0) {
+    state._cancelTimerId = setTimeout(() => {
+      state._cancelTimerId = null;
+      if (state.busy) {
+        state.turnEnded = true;
+        setBusy(false);
+        state._onCancelTimeout?.();
+      }
+    }, state.cancelTimeout);
+  }
+  return true;
+}
+
+export function clearCancelTimer() {
+  if (state._cancelTimerId != null) {
+    clearTimeout(state._cancelTimerId);
+    state._cancelTimerId = null;
+  }
+}
+
+// --- Hash routing ---
+
+export function getHashSessionId() {
+  const h = location.hash.slice(1);
+  return h || null;
+}
+
+export function setHashSessionId(id) {
+  history.replaceState(null, '', `#${id}`);
+}
+
+export function updateSessionInfo(id, title) {
+  dom.sessionInfo.textContent = title || (id ? id.slice(0, 8) + '…' : '');
+  document.title = title || '>_';
+}
+
+setConnectionStatus('disconnected');

package/dist/manifest.json

@@ -0,0 +1,26 @@
+{
+  "name": "WebAgent",
+  "short_name": ">_",
+  "description": "Remote Copilot CLI via browser",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#0d1117",
+  "theme_color": "#0d1117",
+  "icons": [
+    {
+      "src": "/icons/icon.svg",
+      "sizes": "any",
+      "type": "image/svg+xml"
+    },
+    {
+      "src": "/icons/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}