agentgui 1.0.930 → 1.0.932

package/static/js/recording-machine.js

@@ -1,49 +0,0 @@
-(function() {
-  const { createMachine, createActor, assign } = XState;
-
-  const recordingMachine = createMachine({
-    id: 'recording',
-    initial: 'idle',
-    context: {
-      error: null,
-    },
-    states: {
-      idle: {
-        entry: assign({ error: null }),
-        on: {
-          START: { target: 'recording' },
-        },
-      },
-      recording: {
-        on: {
-          STOP: { target: 'processing' },
-          ERROR: {
-            target: 'idle',
-            actions: assign(({ event }) => ({ error: event.error || 'Recording failed' })),
-          },
-        },
-      },
-      processing: {
-        on: {
-          COMPLETE: { target: 'idle' },
-          ERROR: {
-            target: 'idle',
-            actions: assign(({ event }) => ({ error: event.error || 'Processing failed' })),
-          },
-        },
-      },
-    },
-  });
-
-  const actor = createActor(recordingMachine);
-  actor.start();
-
-  window.recordingMachineAPI = {
-    send: function(event) { actor.send(event); },
-    getState: function() { return actor.getSnapshot().value; },
-    isRecording: function() { return actor.getSnapshot().value === 'recording'; },
-    isProcessing: function() { return actor.getSnapshot().value === 'processing'; },
-    subscribe: function(fn) { return actor.subscribe(fn); },
-  };
-  window.__recordingMachine = actor;
-})();

package/static/js/script-runner.js

@@ -1,192 +0,0 @@
-(function() {
-  let currentConversationId = null;
-  let currentWorkingDirectory = null;
-  let scriptState = { running: false, script: null, hasStart: false, hasDev: false };
-  let hasTerminalContent = false;
-
-  function init() {
-    setupListeners();
-    setupButtons();
-  }
-
-  function setupListeners() {
-    window.addEventListener('conversation-selected', function(e) {
-      currentConversationId = e.detail.conversationId;
-      hasTerminalContent = false;
-      fetchConversationAndCheckScripts();
-    });
-
-    window.addEventListener('ws-message', function(e) {
-      const data = e.detail;
-      if (!data || !currentConversationId) return;
-      if (data.conversationId !== currentConversationId) return;
-
-      const term = getTerminal();
-
-      if (data.type === 'script_started') {
-        scriptState.running = true;
-        scriptState.script = data.script;
-        hasTerminalContent = false;
-        if (term) term.clear();
-        updateButtons();
-        showTerminalTab();
-      } else if (data.type === 'script_stopped') {
-        scriptState.running = false;
-        const msg = data.error ? data.error : ('exited with code ' + (data.code || 0));
-        if (term) term.writeln('\r\n\x1b[90m[process ' + msg + ']\x1b[0m');
-        updateButtons();
-      } else if (data.type === 'script_output') {
-        hasTerminalContent = true;
-        showTerminalTab();
-        if (term) term.write(data.data);
-      }
-    });
-
-    window.addEventListener('resize', debounce(fitTerminal, 200));
-  }
-
-  function setupButtons() {
-    var startBtn = document.getElementById('scriptStartBtn');
-    var devBtn = document.getElementById('scriptDevBtn');
-    var stopBtn = document.getElementById('scriptStopBtn');
-
-    if (startBtn) startBtn.addEventListener('click', function() { runScript('start'); });
-    if (devBtn) devBtn.addEventListener('click', function() { runScript('dev'); });
-    if (stopBtn) stopBtn.addEventListener('click', function() { stopScript(); });
-  }
-
-  function fetchConversationAndCheckScripts() {
-    if (!currentConversationId) return;
-    window.wsClient.rpc('conv.get', { id: currentConversationId })
-      .then(function(data) {
-        currentWorkingDirectory = data.conversation?.workingDirectory || null;
-        showTerminalTab();
-        checkScripts();
-      })
-      .catch(function() {
-        showTerminalTab();
-        checkScripts();
-      });
-  }
-
-  function checkScripts() {
-    if (!currentConversationId) return;
-    window.wsClient.rpc('conv.scripts', { id: currentConversationId })
-      .then(function(data) {
-        scriptState.hasStart = data.hasStart;
-        scriptState.hasDev = data.hasDev;
-        scriptState.running = data.running;
-        scriptState.script = data.runningScript;
-        updateButtons();
-        if (data.running || hasTerminalContent) showTerminalTab();
-      })
-      .catch(function() {
-        scriptState.hasStart = false;
-        scriptState.hasDev = false;
-        updateButtons();
-      });
-  }
-
-  function updateButtons() {
-    var container = document.getElementById('scriptButtons');
-    var startBtn = document.getElementById('scriptStartBtn');
-    var devBtn = document.getElementById('scriptDevBtn');
-    var stopBtn = document.getElementById('scriptStopBtn');
-
-    var showAny = scriptState.hasStart || scriptState.hasDev || scriptState.running;
-    if (container) container.style.display = showAny ? 'flex' : 'none';
-
-    if (scriptState.running) {
-      if (startBtn) startBtn.style.display = 'none';
-      if (devBtn) devBtn.style.display = 'none';
-      if (stopBtn) stopBtn.style.display = 'flex';
-    } else {
-      if (startBtn) startBtn.style.display = scriptState.hasStart ? 'flex' : 'none';
-      if (devBtn) devBtn.style.display = scriptState.hasDev ? 'flex' : 'none';
-      if (stopBtn) stopBtn.style.display = 'none';
-    }
-  }
-
-  function runScript(script) {
-    if (!currentConversationId || scriptState.running) return;
-    window.wsClient.rpc('conv.run-script', { id: currentConversationId, script: script })
-      .then(function(data) {
-        if (data.ok) {
-          scriptState.running = true;
-          scriptState.script = script;
-          hasTerminalContent = false;
-          updateButtons();
-          showTerminalTab();
-          switchToTerminalView();
-          var term = getTerminal();
-          if (term) {
-            term.clear();
-            term.writeln('\x1b[36m[running npm run ' + script + ']\x1b[0m\r\n');
-          }
-        }
-      })
-      .catch(function(err) { console.error('Failed to start script:', err); });
-  }
-
-  function stopScript() {
-    if (!currentConversationId) return;
-    window.wsClient.rpc('conv.stop-script', { id: currentConversationId })
-      .catch(function(err) { console.error('Failed to stop script:', err); });
-  }
-
-  function showTerminalTab() {
-    var btn = document.getElementById('terminalTabBtn');
-    if (btn) btn.style.display = '';
-  }
-
-  function hideTerminalTab() {
-    var btn = document.getElementById('terminalTabBtn');
-    if (btn) btn.style.display = 'none';
-  }
-
-  function switchToTerminalView() {
-    var bar = document.getElementById('viewToggleBar');
-    if (!bar) return;
-    var termBtn = bar.querySelector('[data-view="terminal"]');
-    if (termBtn) termBtn.click();
-  }
-
-  function getTerminal() {
-    if (window.terminalModule && window.terminalModule.getTerminal) {
-      return window.terminalModule.getTerminal();
-    }
-    return null;
-  }
-
-  function fitTerminal() {
-    var term = getTerminal();
-    if (term && term._core && term._core._renderService) {
-      try { term.fit(); } catch {}
-    }
-  }
-
-  function debounce(fn, ms) {
-    var timer;
-    return function() {
-      clearTimeout(timer);
-      timer = setTimeout(fn, ms);
-    };
-  }
-
-  window.addEventListener('view-switched', function(e) {
-    if (e.detail && e.detail.view === 'terminal') {
-      setTimeout(fitTerminal, 100);
-    }
-  });
-
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', init);
-  } else {
-    init();
-  }
-
-  window.scriptRunner = {
-    getState: function() { return scriptState; },
-    getTerminal: getTerminal
-  };
-})();

package/static/js/state-barrier.js

@@ -1,105 +0,0 @@
-
-class ConversationState {
-  constructor() {
-    this.current = {
-      id: null,
-      version: 0,
-      data: null,
-      timestamp: 0,
-      reason: null
-    };
-    this.history = [];
-    this.MAX_HISTORY = 50;
-  }
-
-  selectConversation(id, reason, serverVersion) {
-    if (id === this.current.id && serverVersion === this.current.version) {
-      return { success: false, reason: 'already_selected', prevState: this.current, newState: this.current };
-    }
-    const prevState = { ...this.current };
-    this.current.id = id;
-    this.current.version = serverVersion || (this.current.version + 1);
-    this.current.timestamp = Date.now();
-    this.current.reason = reason;
-    this.current.data = null;
-    this._recordHistory('selectConversation', prevState, this.current, reason);
-    return { success: true, reason: 'selected', prevState, newState: { ...this.current } };
-  }
-
-  updateConversation(id, data, serverVersion) {
-    if (id !== this.current.id) {
-      return { success: false, reason: 'id_mismatch', prevState: this.current, newState: this.current };
-    }
-    if (serverVersion && serverVersion < this.current.version) {
-      return { success: false, reason: 'stale_version', prevState: this.current, newState: this.current };
-    }
-    const prevState = { ...this.current };
-    this.current.data = { ...this.current.data, ...data };
-    this.current.version = serverVersion || (this.current.version + 1);
-    this.current.timestamp = Date.now();
-    this._recordHistory('updateConversation', prevState, this.current, 'update');
-    return { success: true, reason: 'updated', prevState, newState: { ...this.current } };
-  }
-
-  deleteConversation(id, serverVersion) {
-    if (id !== this.current.id) {
-      return { success: false, reason: 'not_current', prevState: this.current, newState: this.current };
-    }
-    const prevState = { ...this.current };
-    this.current.id = null;
-    this.current.version = 0;
-    this.current.data = null;
-    this.current.timestamp = Date.now();
-    this.current.reason = 'deleted';
-    this._recordHistory('deleteConversation', prevState, this.current, 'delete');
-    return { success: true, reason: 'deleted', prevState, newState: { ...this.current } };
-  }
-
-  clear(reason) {
-    const prevState = { ...this.current };
-    this.current.id = null;
-    this.current.version = 0;
-    this.current.data = null;
-    this.current.timestamp = Date.now();
-    this.current.reason = reason;
-    this._recordHistory('clear', prevState, this.current, reason);
-    return { success: true, reason: 'cleared', prevState, newState: { ...this.current } };
-  }
-
-  getCurrent() {
-    return { ...this.current };
-  }
-
-  getVersion() {
-    return this.current.version;
-  }
-
-  _recordHistory(operation, prevState, newState, detail) {
-    this.history.push({
-      operation,
-      prevState,
-      newState,
-      detail,
-      timestamp: Date.now()
-    });
-    if (this.history.length > this.MAX_HISTORY) {
-      this.history.shift();
-    }
-  }
-
-  getHistory() {
-    return [...this.history];
-  }
-
-  debugDump() {
-    return {
-      current: { ...this.current },
-      history: this.getHistory(),
-      timestamp: Date.now()
-    };
-  }
-}
-
-if (typeof window !== 'undefined') {
-  window.ConversationState = new ConversationState();
-}

package/static/js/streaming-renderer-dispatch.js

@@ -1,144 +0,0 @@
-Object.assign(StreamingRenderer.prototype, {
-  renderBatch(batch) {
-    if (!this.outputContainer) return;
-
-    this.emit('render:start', { eventCount: batch.length });
-    const renderStart = performance.now();
-
-    try {
-      const fragment = document.createDocumentFragment();
-      let nodeCount = 0;
-
-      for (const event of batch) {
-        try {
-          const element = this.renderEvent(event);
-          if (element) {
-            fragment.appendChild(element);
-            nodeCount++;
-          }
-        } catch (error) {
-          console.error('Event render error:', error, event);
-        }
-      }
-
-      if (nodeCount > 0) {
-        this.outputContainer.appendChild(fragment);
-        this.domNodeCount += nodeCount;
-
-        this.nestToolResultsInToolUses();
-      }
-
-      this.autoScroll();
-
-      const renderTime = performance.now() - renderStart;
-      this.lastRenderTime = renderTime;
-
-      this.emit('render:complete', {
-        eventCount: batch.length,
-        nodeCount,
-        renderTime
-      });
-    } catch (error) {
-      console.error('Batch render error:', error);
-      this.emit('error:render', { error, batch });
-    }
-  },
-
-  renderEvent(event) {
-    if (!event.type) return null;
-
-    try {
-      if (event.type === 'streaming_progress' && event.block) {
-        return this.renderBlock(event.block, event);
-      }
-
-      if (event.type === 'streaming_error' && event.isPrematureEnd) {
-        return this.renderBlockPremature({ type: 'premature', error: event.error, exitCode: event.exitCode });
-      }
-
-      switch (event.type) {
-        case 'streaming_start':
-          return this.renderStreamingStart(event);
-        case 'streaming_progress':
-          return this.renderStreamingProgress(event);
-        case 'streaming_complete':
-          return this.renderStreamingComplete(event);
-        case 'file_read':
-          return this.renderFileRead(event);
-        case 'file_write':
-          return this.renderFileWrite(event);
-        case 'git_status':
-          return this.renderGitStatus(event);
-        case 'command_execute':
-          return this.renderCommand(event);
-        case 'error':
-          return this.renderError(event);
-        case 'text_block':
-          return this.renderText(event);
-        case 'code_block':
-          return this.renderCode(event);
-        case 'thinking_block':
-          return null;
-        case 'tool_use':
-          return this.renderToolUse(event);
-        case 'compact_boundary':
-          return this.renderCompactBoundary(event);
-        case 'compact_summary':
-          return this.renderCompactBoundary(event);
-        case 'turn_duration':
-          return this.renderTurnDuration(event);
-        case 'agent_progress':
-          return this.renderAgentProgress(event);
-        case 'mcp_progress':
-          return this.renderMcpProgress(event);
-        default:
-          return this.renderGeneric(event);
-      }
-    } catch (error) {
-      console.error('Event render error:', error, event);
-      return this.renderError({ message: error.message, event });
-    }
-  },
-
-  renderBlock(block, context = {}, targetContainer = null) {
-    if (!block || !block.type) return null;
-
-    try {
-      switch (block.type) {
-        case 'text':
-          return this.renderBlockText(block, context, targetContainer);
-        case 'code':
-          return this.renderBlockCode(block, context);
-        case 'thinking':
-          return this.renderBlockThinking(block, context);
-        case 'tool_use':
-          return this.renderBlockToolUse(block, context);
-        case 'tool_result':
-          return this.renderBlockToolResult(block, context);
-        case 'image':
-          return this.renderBlockImage(block, context);
-        case 'bash':
-          return this.renderBlockBash(block, context);
-        case 'system':
-          return this.renderBlockSystem(block, context);
-        case 'result':
-          return this.renderBlockResult(block, context);
-        case 'tool_status':
-          return this.renderBlockToolStatus(block, context);
-        case 'usage':
-          return this.renderBlockUsage(block, context);
-        case 'plan':
-          return this.renderBlockPlan(block, context);
-        case 'premature':
-          return this.renderBlockPremature(block, context);
-        case 'hook_progress':
-          return this.renderBlockHookProgress(block, context);
-        default:
-          return this.renderBlockGeneric(block, context);
-      }
-    } catch (error) {
-      console.error('Block render error:', error, block);
-      return this.renderBlockError(block, error);
-    }
-  }
-});

package/static/js/streaming-renderer-events.js

@@ -1,163 +0,0 @@
-Object.assign(StreamingRenderer.prototype, {
-  renderBlockImage(block, context) {
-    const div = document.createElement('div');
-    div.className = 'block-image';
-    div.classList.add(this._getBlockTypeClass('image'));
-
-    let src = block.image || block.src || '';
-    const alt = block.alt || 'Image';
-
-    if (block.data && block.media_type) {
-      src = `data:${block.media_type};base64,${block.data}`;
-    }
-
-    div.innerHTML = `
-      <img src="${this.escapeHtml(src)}" alt="${this.escapeHtml(alt)}" loading="lazy">
-      ${block.alt ? `<div class="image-caption">${this.escapeHtml(alt)}</div>` : ''}
-    `;
-
-    return div;
-  },
-
-  renderBlockBash(block, context) {
-    const div = document.createElement('div');
-    div.className = 'block-bash';
-    div.classList.add(this._getBlockTypeClass('bash'));
-
-    const command = block.command || block.code || '';
-    const output = block.output || '';
-
-    let html = `<div class="bash-command"><span class="prompt">$</span><code>${this.escapeHtml(command)}</code></div>`;
-
-    if (output) {
-      if (StreamingRenderer.detectCodeContent(output)) {
-        html += StreamingRenderer.renderCodeWithHighlight(output, this.escapeHtml.bind(this), true);
-      } else {
-        html += `<pre class="bash-output"><code>${this.escapeHtml(output)}</code></pre>`;
-      }
-    }
-
-    div.innerHTML = html;
-    return div;
-  },
-
-  renderBlockSystem(block, context) {
-    if (block.subtype === 'compact_boundary') return this.renderCompactBoundary(block);
-    if (block.subtype === 'turn_duration') return this.renderTurnDuration(block);
-    if (!block.model && !block.cwd && !block.tools) return null;
-    const details = document.createElement('details');
-    details.className = 'folded-tool folded-tool-info permanently-expanded';
-    details.dataset.eventType = 'system';
-    details.classList.add(this._getBlockTypeClass('system'));
-    const desc = block.model ? this.escapeHtml(block.model) : 'Session';
-    const summary = document.createElement('summary');
-    summary.className = 'folded-tool-bar';
-    summary.innerHTML = `
-      <span class="folded-tool-icon"><svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/></svg></span>
-      <span class="folded-tool-name">Session</span>
-      <span class="folded-tool-desc">${desc}</span>
-    `;
-    details.appendChild(summary);
-    const body = document.createElement('div');
-    body.className = 'folded-tool-body block-system';
-    body.innerHTML = `
-      <div class="system-body">
-        ${block.model ? `<div class="sys-field"><span class="sys-label">Model</span><span class="sys-value"><code>${this.escapeHtml(block.model)}</code></span></div>` : ''}
-        ${block.cwd ? `<div class="sys-field"><span class="sys-label">Directory</span><span class="sys-value"><code>${this.escapeHtml(block.cwd)}</code></span></div>` : ''}
-        ${block.session_id ? `<div class="sys-field"><span class="sys-label">Session</span><span class="sys-value"><code>${this.escapeHtml(block.session_id)}</code></span></div>` : ''}
-        ${block.tools && Array.isArray(block.tools) ? `<div class="sys-field" style="flex-direction:column;gap:0.375rem"><span class="sys-label">Tools (${block.tools.length})</span><div class="tools-list">${block.tools.map(t => `<span class="tool-badge">${this.escapeHtml(t)}</span>`).join('')}</div></div>` : ''}
-      </div>
-    `;
-    details.appendChild(body);
-    return details;
-  },
-
-  renderBlockResult(block, context) {
-    const isError = block.is_error || false;
-    const duration = block.duration_ms ? (block.duration_ms / 1000).toFixed(1) + 's' : '';
-    const cost = block.total_cost_usd ? '$' + block.total_cost_usd.toFixed(4) : '';
-    const turns = block.num_turns || '';
-    const statsDesc = [duration, cost, turns ? turns + ' turns' : ''].filter(Boolean).join(' / ');
-
-    const details = document.createElement('details');
-    details.className = isError ? 'folded-tool folded-tool-error permanently-expanded' : 'folded-tool permanently-expanded';
-    details.dataset.eventType = 'result';
-    details.classList.add(this._getBlockTypeClass(isError ? 'error' : 'result'));
-
-    const iconSvg = isError
-      ? '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>'
-      : '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>';
-
-    const summary = document.createElement('summary');
-    summary.className = 'folded-tool-bar';
-    summary.innerHTML = `
-      <span class="folded-tool-icon">${iconSvg}</span>
-      <span class="folded-tool-name">${isError ? 'Failed' : 'Complete'}</span>
-      <span class="folded-tool-desc">${this.escapeHtml(statsDesc)}</span>
-    `;
-    details.appendChild(summary);
-
-    if (block.result || duration || cost || turns) {
-      const body = document.createElement('div');
-      body.className = 'folded-tool-body';
-      let bodyHtml = '';
-      if (duration || cost || turns) {
-        bodyHtml += `<div class="block-result"><div class="result-stats">
-          ${duration ? `<div class="result-stat"><span class="stat-icon">&#9202;</span><span class="stat-value">${this.escapeHtml(duration)}</span><span class="stat-label">duration</span></div>` : ''}
-          ${cost ? `<div class="result-stat"><span class="stat-icon">&#128176;</span><span class="stat-value">${this.escapeHtml(cost)}</span><span class="stat-label">cost</span></div>` : ''}
-          ${turns ? `<div class="result-stat"><span class="stat-icon">&#128260;</span><span class="stat-value">${this.escapeHtml(String(turns))}</span><span class="stat-label">turns</span></div>` : ''}
-        </div></div>`;
-      }
-      if (block.result) {
-        const r = typeof block.result === 'string' ? block.result : JSON.stringify(block.result, null, 2);
-        const rendered = this.containsHtmlTags(r) ? '<div class="html-content">' + this.sanitizeHtml(r) + '</div>' : `<div style="font-size:0.8rem;white-space:pre-wrap;word-break:break-word;line-height:1.5">${this.escapeHtml(r)}</div>`;
-        bodyHtml += rendered;
-      }
-      body.innerHTML = bodyHtml;
-      details.appendChild(body);
-    }
-
-    return details;
-  },
-
-  renderBlockToolStatus(block, context) {
-    const status = block.status || 'pending';
-    const statusIcons = {
-      pending: '<svg viewBox="0 0 20 20" fill="currentColor" style="color:var(--color-text-secondary)"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/></svg>',
-      in_progress: '<svg viewBox="0 0 20 20" fill="currentColor" class="animate-spin" style="color:var(--color-info)"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/></svg>'
-    };
-    const statusLabels = {
-      pending: 'Pending',
-      in_progress: 'Running...'
-    };
-
-    const div = document.createElement('div');
-    div.className = 'block-tool-status';
-    div.dataset.toolUseId = block.tool_use_id || '';
-    div.classList.add(this._getBlockTypeClass('tool_status'));
-    div.innerHTML = `
-      <div style="display:flex;align-items:center;gap:0.5rem;padding:0.25rem 0.5rem;font-size:0.75rem;color:var(--color-text-secondary)">
-        ${statusIcons[status] || statusIcons.pending}
-        <span>${statusLabels[status] || this.escapeHtml(status)}</span>
-      </div>
-    `;
-    return div;
-  },
-
-  renderBlockHookProgress(block, context) {
-    const hookEvent = block.hookEvent || block.hookName || '';
-    const hookIcons = {
-      PreToolUse: '<svg viewBox="0 0 20 20" fill="currentColor" style="width:0.75rem;height:0.75rem"><path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10.666a1 1 0 11-1.64-1.118L9.687 10H5a1 1 0 01-.82-1.573l7-10.666a1 1 0 011.12-.373z" clip-rule="evenodd"/></svg>',
-      PostToolUse: '<svg viewBox="0 0 20 20" fill="currentColor" style="width:0.75rem;height:0.75rem"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>',
-      Stop: '<svg viewBox="0 0 20 20" fill="currentColor" style="width:0.75rem;height:0.75rem"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8 7a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V8a1 1 0 00-1-1H8z" clip-rule="evenodd"/></svg>'
-    };
-    const icon = hookIcons[hookEvent.split(':')[0]] || hookIcons.PreToolUse;
-    const label = hookEvent.includes(':') ? hookEvent.split(':').pop() : hookEvent;
-    const div = document.createElement('div');
-    div.className = 'block-hook-progress';
-    div.dataset.hookEvent = hookEvent;
-    div.style.cssText = 'display:none';
-    div.innerHTML = '<span class="hook-badge" style="display:inline-flex;align-items:center;gap:0.25rem;padding:0.125rem 0.5rem;font-size:0.65rem;color:var(--color-text-secondary);opacity:0.5">' + icon + '<span>' + this.escapeHtml(label) + '</span></span>';
-    return div;
-  }
-});