legate 0.1.0

data/lib/legate/web/sass_compiler.rb

@@ -0,0 +1,73 @@
+# frozen_string_literal: true
+
+require 'sass-embedded'
+require 'fileutils'
+require 'logger'
+
+module Legate
+  module Web
+    # Sass compiler for the web interface
+    class SassCompiler
+      class << self
+        def compile_all
+          new.compile_all
+        end
+      end
+
+      def initialize
+        @logger = Logger.new($stdout)
+        @logger.level = Logger::INFO
+      end
+
+      def compile_all
+        @logger.info('Compiling Sass files...')
+
+        # Ensure the output directory exists
+        FileUtils.mkdir_p(output_dir)
+
+        # Find all Sass files
+        sass_files = Dir.glob(File.join(source_dir, '**', '*.scss'))
+
+        sass_files.each do |sass_file|
+          compile_file(sass_file)
+        end
+
+        @logger.info('Sass compilation complete!')
+      end
+
+      def compile_file(sass_file)
+        relative_path = sass_file.sub("#{source_dir}/", '')
+        output_file = File.join(output_dir, relative_path.sub('.scss', '.css'))
+
+        # Ensure the output directory exists
+        FileUtils.mkdir_p(File.dirname(output_file))
+
+        @logger.info("Compiling #{relative_path} to #{output_file.sub("#{output_dir}/", '')}")
+
+        begin
+          # Compile the Sass file
+          input = File.read(sass_file)
+          result = Sass.compile_string(input, style: 'expanded', load_paths: [File.dirname(sass_file)])
+
+          # Write the compiled CSS to the output file
+          File.write(output_file, result.css)
+
+          @logger.info("Successfully compiled #{relative_path}")
+        rescue StandardError => e
+          @logger.error("Error compiling #{relative_path}: #{e.message}")
+          @logger.error(e.backtrace.join("\n"))
+        end
+      end
+
+      private
+
+      def source_dir
+        @source_dir ||= File.expand_path('public/styles', __dir__)
+      end
+
+      def output_dir
+        @output_dir ||= File.expand_path('public/css', __dir__)
+      end
+    end
+  end
+end

data/lib/legate/web/views/_active_session_info.slim

@@ -0,0 +1,25 @@
+/ File: lib/legate/web/views/_active_session_info.slim
+/ Renders the Run Details "session" block inside the chat inspector.
+/ Keeps id + hx-swap-oob so session new/switch/delete can update it out-of-band.
+
+div#active-session-info.inspector-session(hx-swap-oob="outerHTML")
+  - if active_session_details
+    .inspector-section
+      .inspector-label Session ID
+      .inspector-session-id
+        span.inspector-session-mono(title=active_session_details.id)= active_session_details.id
+        button.inspector-copy(type="button" title="Copy session ID" onclick="navigator.clipboard && navigator.clipboard.writeText('#{active_session_details.id}')")
+          i.fas.fa-copy
+    .inspector-section
+      .inspector-meta-row
+        span.inspector-meta-key Created
+        span.inspector-meta-val= active_session_details.created_at.strftime("%b %d, %H:%M")
+      .inspector-meta-row
+        span.inspector-meta-key Last activity
+        span.inspector-meta-val= active_session_details.updated_at.strftime("%b %d, %H:%M")
+      .inspector-meta-row
+        span.inspector-meta-key Events
+        span.inspector-meta-val= active_session_details.events&.count || 0
+  - else
+    .inspector-section
+      p.inspector-empty No active session.

data/lib/legate/web/views/_activity_list.slim

@@ -0,0 +1,55 @@
+/ File: lib/legate/web/views/_activity_list.slim
+/ Partial for rendering the activity stream list
+
+- if @recent_activity && @recent_activity.any?
+  .activity-list
+    - @recent_activity.each do |event|
+      .activity-item
+        - icon_class = case event[:type]
+        - when :agent_started then 'fa-play-circle has-text-success'
+        - when :agent_stopped then 'fa-stop-circle has-text-danger'
+        - when :agent_created then 'fa-plus-circle has-text-info'
+        - when :agent_deleted then 'fa-trash has-text-danger'
+        - when :task_executed then 'fa-bolt has-text-warning'
+        - when :app_started then 'fa-rocket has-text-primary'
+        - else 'fa-info-circle has-text-grey'
+        span.activity-icon
+          i.fas(class=icon_class)
+        span.activity-text
+          - case event[:type]
+          - when :agent_started
+            | Agent 
+            strong= event[:details][:name]
+            |  started
+          - when :agent_stopped
+            | Agent 
+            strong= event[:details][:name]
+            |  stopped
+          - when :agent_created
+            | Agent 
+            strong= event[:details][:name]
+            |  created
+          - when :agent_deleted
+            | Agent 
+            strong= event[:details][:name]
+            |  deleted
+          - when :task_executed
+            | Task executed on 
+            strong= event[:details][:agent]
+          - when :app_started
+            | Application started
+          - else
+            = event[:type].to_s.tr('_', ' ').capitalize
+        span.activity-time= time_ago_in_words(event[:timestamp])
+- else
+  .has-text-centered.has-text-grey.py-5
+    span.icon.is-large
+      i.fas.fa-clock.fa-2x style="opacity: 0.3;"
+    p.mt-3 No recent activity
+    p.is-size-7 Activity will appear here as you interact with agents
+
+
+
+
+
+

data/lib/legate/web/views/_agent_card.slim

@@ -0,0 +1,56 @@
+/ File: lib/legate/web/views/_agent_card.slim
+/ Renders one agent as a "Legion" command-console card.
+/ Expects 'agent_info' (hash: :name, :description, :running, :configured_tools,
+/ :agent_type, :model) and 'available_tools' (list). Replaces the old table row;
+/ HTMX start/stop/delete swap `closest .agent-card` with this same partial.
+
+- agent_name = agent_info[:name]
+- encoded_agent_name = URI.encode_www_form_component(agent_name.to_s).gsub('+', '%20')
+- safe_agent_id = agent_name.to_s.gsub(/[^a-zA-Z0-9_-]/, '-')
+- is_running = agent_info[:running]
+- model_display = (agent_info[:model] && !agent_info[:model].to_s.empty?) ? agent_info[:model] : Legate::Agent::DEFAULT_MODEL
+- card_id = "agent-card-#{safe_agent_id}"
+- is_new_card = locals.fetch(:agent_info, {}).fetch(:is_new, false)
+- agent_type = agent_info[:agent_type]&.to_sym || :llm
+- configured_tools = agent_info[:configured_tools] || []
+- find_tool_desc = lambda { |name| available_tools&.find { |t| t[:name].to_s == name.to_s }&.[](:description) || name.to_s }
+- type_label = { sequential: 'Sequential', parallel: 'Parallel', loop: 'Loop' }[agent_type] || 'LLM'
+- search_blob = [agent_name, agent_info[:description], configured_tools.join(' '), model_display].join(' ').downcase
+
+article.agent-card(id=card_id data-agent-name=agent_name data-search=search_blob class=("is-running" if is_running) class=("is-newly-added" if is_new_card))
+  header.agent-card-head
+    .agent-card-titles
+      a.agent-card-name(href="/agents/#{encoded_agent_name}")= agent_name
+      span.agent-type-chip= type_label
+    span.status-pill(class=(is_running ? 'is-running' : 'is-idle'))
+      span.status-dot
+      span= is_running ? 'Running' : 'Idle'
+
+  p.agent-card-desc= agent_info[:description]
+
+  .agent-card-meta
+    span.mono-chip.model-chip(title="Language model")
+      span.icon.is-small
+        i.fas.fa-microchip
+      span= model_display
+
+  .agent-card-tools
+    - if configured_tools.any?
+      - configured_tools.each do |tool_name|
+        a.tool-chip(href="/tools/#{tool_name}" title=find_tool_desc.call(tool_name))= tool_name
+    - else
+      span.tool-chip.is-empty no tools configured
+
+  footer.agent-card-foot
+    - unless is_running
+      button.legion-action.is-run(type="button" title="Start agent" hx-post="/agents/#{encoded_agent_name}/start" hx-target="closest .agent-card" hx-swap="outerHTML")
+        i.fas.fa-play
+        span Run
+    - if is_running
+      button.legion-action.is-stop(type="button" title="Stop agent" hx-post="/agents/#{encoded_agent_name}/stop" hx-target="closest .agent-card" hx-swap="outerHTML")
+        i.fas.fa-stop
+        span Stop
+    a.legion-action.is-icon.is-details(href="/agents/#{encoded_agent_name}" title="View details")
+      i.fas.fa-external-link-alt
+    button.legion-action.is-icon.is-danger(type="button" title="Delete agent" hx-delete="/agents/#{encoded_agent_name}" hx-target="closest .agent-card" hx-swap="outerHTML" hx-confirm="Are you sure you want to delete '#{agent_name}'?")
+      i.fas.fa-trash-alt

data/lib/legate/web/views/_agent_generator_modal.slim

@@ -0,0 +1,382 @@
+/ File: lib/legate/web/views/_agent_generator_modal.slim
+/ AI agent generator: describe → review editable fields → Add to Legion (live).
+/ Generates a STRUCTURED definition (no file/restart); .rb export kept for power users.
+
+#agent-generator-modal.modal
+  .modal-background onclick="closeAgentGeneratorModal()"
+  .modal-card style="width: 92%; max-width: 920px; max-height: 92vh;"
+    header.modal-card-head
+      p.modal-card-title
+        span.icon.mr-2
+          i.fas.fa-wand-magic-sparkles
+        | Generate Agent with AI
+      button.delete aria-label="close" onclick="closeAgentGeneratorModal()"
+
+    section.modal-card-body style="display: flex; flex-direction: column; gap: 1.25rem;"
+      / Input
+      #agent-generator-input-section
+        .field
+          label.label
+            span.icon.is-small.mr-1
+              i.fas.fa-comment-dots
+            | Describe your agent
+          .control
+            textarea#agent-generator-description.textarea(
+              rows="4"
+              placeholder="e.g. 'An agent that summarizes customer feedback', 'A support assistant that can echo and look things up'"
+            )
+          p.help Describe what the agent should do. The AI fills in a configuration you can review and tweak before adding it.
+        .field
+          .control
+            button#agent-generator-btn.button.is-primary(onclick="generateAgentDefinition()")
+              span.icon
+                i.fas.fa-wand-magic-sparkles
+              span Generate
+            span#agent-generator-loading.ml-3 style="display: none;"
+              span.icon.has-text-primary
+                i.fas.fa-spinner.fa-spin
+              span.has-text-grey  Generating…
+
+      / Error
+      #agent-generator-error.notification.is-danger.is-light style="display: none;"
+        button.delete onclick="this.parentElement.style.display='none'"
+        span#agent-generator-error-message
+
+      / Review (editable, hidden until generated)
+      #agent-generator-review-section style="display: none;"
+        .agent-gen-review-banner
+          span.icon.has-text-primary
+            i.fas.fa-circle-check
+          span Review and tweak the configuration, then add it to your legion.
+
+        .field
+          label.label Name
+          .control.has-icons-left
+            input#agent-gen-name.input type="text" placeholder="snake_case_name"
+            span.icon.is-small.is-left
+              i.fas.fa-robot
+        .columns.is-variable.is-3
+          .column.is-half
+            .field
+              label.label Model
+              .control
+                .select.is-fullwidth
+                  select#agent-gen-model
+                    - (@available_models || []).each do |m|
+                      option value=m = m
+          .column.is-half
+            .field
+              label.label Type
+              .control
+                .select.is-fullwidth
+                  select#agent-gen-type
+                    option value="llm" LLM Agent
+                    option value="sequential" Sequential Workflow
+                    option value="parallel" Parallel Workflow
+                    option value="loop" Loop Workflow
+        .field
+          label.label Description
+          .control
+            textarea#agent-gen-description-field.textarea rows="2"
+        .field
+          label.label Instruction (System Prompt)
+          .control
+            textarea#agent-gen-instruction.textarea rows="5"
+        .field
+          label.label Tools
+          .agent-gen-tools
+            - if @available_tools && !@available_tools.empty?
+              - @available_tools.each do |t|
+                label.checkbox.agent-gen-tool-item
+                  input.agent-gen-tool type="checkbox" value=t[:name]
+                  span.agent-gen-tool-name= t[:name]
+            - else
+              p.has-text-grey No tools available to select.
+        .field
+          label.label Output Key (optional)
+          .control
+            input#agent-gen-output-key.input type="text" placeholder="result_key"
+
+        / Suggested tools to create (capabilities no installed tool provides)
+        .field#agent-gen-suggested-field style="display: none;"
+          label.label
+            span.icon.is-small.mr-1
+              i.fas.fa-lightbulb
+            | Suggested tools to create
+          p.help.mb-2 This agent could use capabilities no installed tool provides yet. Build them with the tool generator — they’ll be available to add next time.
+          #agent-gen-suggested.agent-gen-suggested
+
+        details.agent-gen-code-details
+          summary
+            span.icon.is-small
+              i.fas.fa-code
+            |  View / export generated Ruby
+          .buttons.mt-2
+            button.button.is-small.is-light(onclick="copyAgentCode()" title="Copy code")
+              span.icon.is-small
+                i.fas.fa-copy
+              span Copy
+            button.button.is-small.is-light(onclick="downloadAgentCode()" title="Download as .rb")
+              span.icon.is-small
+                i.fas.fa-download
+              span Export .rb
+          .code-preview-container style="max-height: 280px; overflow: auto; border-radius: 6px;"
+            pre
+              code#agent-generator-code.language-ruby
+
+    footer.modal-card-foot style="justify-content: space-between;"
+      button.button onclick="closeAgentGeneratorModal()" Close
+      .buttons.mb-0
+        button#agent-gen-regenerate.button.is-light style="display: none;" onclick="generateAgentDefinition()"
+          span.icon.is-small
+            i.fas.fa-sync
+          span Regenerate
+        button#agent-gen-add-btn.button.is-primary style="display: none;" onclick="addAgentToLegion()"
+          span.icon
+            i.fas.fa-circle-plus
+          span Add to Legion
+
+javascript:
+  let generatedAgentCode = '';
+  let suggestedAgentName = 'generated_agent';
+
+  function openAgentGeneratorModal() {
+    document.getElementById('agent-generator-modal').classList.add('is-active');
+    document.getElementById('agent-generator-description').focus();
+  }
+
+  function closeAgentGeneratorModal() {
+    document.getElementById('agent-generator-modal').classList.remove('is-active');
+    document.getElementById('agent-generator-error').style.display = 'none';
+  }
+
+  function showAgentGeneratorError(message) {
+    document.getElementById('agent-generator-error-message').textContent = message;
+    document.getElementById('agent-generator-error').style.display = 'block';
+  }
+
+  function agSetSelect(id, value) {
+    const sel = document.getElementById(id);
+    if (!sel) return;
+    if (Array.from(sel.options).some(o => o.value === value)) sel.value = value;
+  }
+
+  async function generateAgentDefinition() {
+    const description = document.getElementById('agent-generator-description').value.trim();
+    if (!description) {
+      showAgentGeneratorError('Please describe the agent you want to create.');
+      return;
+    }
+    const btn = document.getElementById('agent-generator-btn');
+    const loading = document.getElementById('agent-generator-loading');
+    btn.disabled = true;
+    loading.style.display = 'inline';
+    document.getElementById('agent-generator-error').style.display = 'none';
+
+    try {
+      const tokenEl = document.querySelector('meta[name="csrf-token"]');
+      const response = await fetch('/agents/generate/definition', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-CSRF-Token': tokenEl ? tokenEl.content : ''
+        },
+        body: JSON.stringify({ description })
+      });
+      const data = await response.json();
+      if (!response.ok) throw new Error(data.error || 'Generation failed');
+      populateAgentReview(data);
+      document.getElementById('agent-generator-review-section').style.display = 'block';
+      document.getElementById('agent-gen-add-btn').style.display = '';
+      document.getElementById('agent-gen-regenerate').style.display = '';
+    } catch (error) {
+      showAgentGeneratorError(error.message);
+    } finally {
+      btn.disabled = false;
+      loading.style.display = 'none';
+    }
+  }
+
+  function populateAgentReview(data) {
+    document.getElementById('agent-gen-name').value = data.name || '';
+    agSetSelect('agent-gen-model', data.model);
+    agSetSelect('agent-gen-type', data.agent_type || 'llm');
+    document.getElementById('agent-gen-description-field').value = data.description || '';
+    document.getElementById('agent-gen-instruction').value = data.instruction || '';
+    document.getElementById('agent-gen-output-key').value = data.output_key || '';
+
+    const tools = data.tools || [];
+    document.querySelectorAll('.agent-gen-tool').forEach(cb => { cb.checked = tools.includes(cb.value); });
+
+    renderSuggestedTools(data.suggested_tools || []);
+
+    generatedAgentCode = data.code || '';
+    suggestedAgentName = data.name || 'generated_agent';
+    const codeEl = document.getElementById('agent-generator-code');
+    codeEl.classList.remove('hljs');
+    delete codeEl.dataset.highlighted;
+    codeEl.textContent = generatedAgentCode;
+    if (typeof hljs !== 'undefined') hljs.highlightElement(codeEl);
+  }
+
+  function renderSuggestedTools(suggested) {
+    const field = document.getElementById('agent-gen-suggested-field');
+    const list = document.getElementById('agent-gen-suggested');
+    list.innerHTML = '';
+    if (!suggested.length) { field.style.display = 'none'; return; }
+
+    suggested.forEach(t => {
+      const item = document.createElement('div');
+      item.className = 'agent-gen-suggested-item';
+
+      const info = document.createElement('div');
+      info.className = 'agent-gen-suggested-info';
+      const nm = document.createElement('span');
+      nm.className = 'agent-gen-suggested-name';
+      nm.textContent = t.name;
+      info.appendChild(nm);
+      if (t.description) {
+        const d = document.createElement('span');
+        d.className = 'agent-gen-suggested-desc';
+        d.textContent = t.description;
+        info.appendChild(d);
+      }
+
+      const btn = document.createElement('button');
+      btn.type = 'button';
+      btn.className = 'button is-small is-primary is-light agent-gen-build-btn';
+      btn.innerHTML = '<span class="icon is-small"><i class="fas fa-wand-magic-sparkles"></i></span><span>Build&nbsp;→</span>';
+      btn.addEventListener('click', () => buildSuggestedTool(t.name, t.description));
+
+      item.appendChild(info);
+      item.appendChild(btn);
+      list.appendChild(item);
+    });
+    field.style.display = 'block';
+  }
+
+  function buildSuggestedTool(name, description) {
+    if (typeof openToolGeneratorModal !== 'function') {
+      showAgentGeneratorError('The tool generator is not available here.');
+      return;
+    }
+    // Remember to come back to the agent builder once this tool is installed,
+    // so the new tool gets added + checked (it didn't exist at page load).
+    window.legateReturnToAgentBuilder = name;
+    closeAgentGeneratorModal();
+    const field = document.getElementById('tool-generator-description');
+    if (field) {
+      const base = (description && description.trim()) ? description.trim() : ('A tool named "' + name + '"');
+      field.value = base + (name ? ('\n\nName it "' + name + '".') : '');
+    }
+    openToolGeneratorModal();
+  }
+
+  // Called by the tool modal after a suggested tool is installed live. Adds the
+  // newly-registered tool to the review form (checked), drops the suggestion, and
+  // re-opens the agent builder so "Add to Legion" includes the new tool.
+  function returnToAgentBuilderWithTool(installedName, originalSuggestion) {
+    const list = document.querySelector('.agent-gen-tools');
+    if (installedName && list) {
+      let cb = Array.from(document.querySelectorAll('.agent-gen-tool')).find(c => c.value === installedName);
+      if (!cb) {
+        const label = document.createElement('label');
+        label.className = 'checkbox agent-gen-tool-item';
+        cb = document.createElement('input');
+        cb.type = 'checkbox';
+        cb.className = 'agent-gen-tool';
+        cb.value = installedName;
+        const span = document.createElement('span');
+        span.className = 'agent-gen-tool-name';
+        span.textContent = installedName;
+        label.appendChild(cb);
+        label.appendChild(document.createTextNode(' '));
+        label.appendChild(span);
+        list.appendChild(label);
+      }
+      cb.checked = true;
+    }
+    // Remove the suggestion we just satisfied (match the original suggestion name).
+    document.querySelectorAll('.agent-gen-suggested-item').forEach(item => {
+      const nm = item.querySelector('.agent-gen-suggested-name');
+      if (nm && (nm.textContent === originalSuggestion || nm.textContent === installedName)) item.remove();
+    });
+    const field = document.getElementById('agent-gen-suggested-field');
+    if (field && !document.querySelector('.agent-gen-suggested-item')) field.style.display = 'none';
+
+    if (typeof openAgentGeneratorModal === 'function') openAgentGeneratorModal();
+  }
+
+  async function addAgentToLegion() {
+    const name = document.getElementById('agent-gen-name').value.trim();
+    if (!name) { showAgentGeneratorError('The agent needs a name.'); return; }
+
+    const params = new URLSearchParams();
+    params.append('name', name);
+    params.append('description', document.getElementById('agent-gen-description-field').value.trim());
+    params.append('instruction', document.getElementById('agent-gen-instruction').value);
+    params.append('model', document.getElementById('agent-gen-model').value);
+    params.append('agent_type', document.getElementById('agent-gen-type').value);
+    const ok = document.getElementById('agent-gen-output-key').value.trim();
+    if (ok) params.append('output_key', ok);
+    document.querySelectorAll('.agent-gen-tool:checked').forEach(cb => params.append('tools[]', cb.value));
+
+    const addBtn = document.getElementById('agent-gen-add-btn');
+    addBtn.classList.add('is-loading');
+    try {
+      const tokenEl = document.querySelector('meta[name="csrf-token"]');
+      const response = await fetch('/agents', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded',
+          'X-CSRF-Token': tokenEl ? tokenEl.content : ''
+        },
+        body: params.toString()
+      });
+      const html = await response.text();
+      if (!response.ok) throw new Error('Could not add the agent. ' + (html.replace(/<[^>]*>/g, '').trim() || ''));
+
+      const grid = document.getElementById('agent-list-grid');
+      if (grid) {
+        const tmp = document.createElement('div');
+        tmp.innerHTML = html;
+        const card = tmp.querySelector('.agent-card');
+        if (card) grid.appendChild(card);
+      }
+      const empty = document.getElementById('no-agents-state');
+      if (empty) empty.classList.add('is-hidden');
+      if (typeof filterAgents === 'function') filterAgents();
+      closeAgentGeneratorModal();
+    } catch (error) {
+      showAgentGeneratorError(error.message);
+    } finally {
+      addBtn.classList.remove('is-loading');
+    }
+  }
+
+  async function copyAgentCode() {
+    try {
+      await navigator.clipboard.writeText(generatedAgentCode);
+    } catch (err) {
+      showAgentGeneratorError('Failed to copy to clipboard');
+    }
+  }
+
+  function downloadAgentCode() {
+    const blob = new Blob([generatedAgentCode], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${suggestedAgentName}.rb`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }
+
+  document.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape') {
+      const modal = document.getElementById('agent-generator-modal');
+      if (modal && modal.classList.contains('is-active')) closeAgentGeneratorModal();
+    }
+  });

data/lib/legate/web/views/_agent_status_controls.slim

@@ -0,0 +1,71 @@
+/ File: lib/legate/web/views/_agent_status_controls.slim
+- agent_name = agent_data.is_a?(Hash) ? agent_data[:name] : agent_data.name
+- is_running = agent_data.is_a?(Hash) ? agent_data[:running] : agent_data.running?
+- tool_count = agent_data.is_a?(Hash) ? (agent_data[:tool_count] || 0) : 0
+- container_id = "agent-status-controls-#{agent_name.gsub(/[^a-zA-Z0-9_-]/, '-')}"
+- encoded_agent_name = URI.encode_www_form_component(agent_name.to_s).gsub('+', '%20')
+
+div.agent-header-controls(id=container_id)
+  / Status and action on same row
+  .agent-status-action-row
+    / Status badge
+    span.tag.is-medium.is-rounded.agent-status-badge class=(is_running ? 'is-success is-running' : 'is-danger')
+      span.icon.is-small
+        i(class="fas #{is_running ? 'fa-circle' : 'fa-circle'}")
+      span= is_running ? 'Running' : 'Stopped'
+
+    / Action button - compact
+    - if is_running
+      button.button.is-danger.agent-action-btn(
+        hx-post="/agents/#{encoded_agent_name}/stop/detail"
+        hx-target="##{container_id}"
+        hx-swap="innerHTML")
+        span.icon.is-small.htmx-indicator
+          i.fas.fa-spinner.fa-spin
+        span.icon.is-small
+          i.fas.fa-stop
+        span Stop
+    - else
+      button.button.is-success.agent-action-btn(
+        hx-post="/agents/#{encoded_agent_name}/start/detail"
+        hx-target="##{container_id}"
+        hx-swap="innerHTML")
+        span.icon.is-small.htmx-indicator
+          i.fas.fa-spinner.fa-spin
+        span.icon.is-small
+          i.fas.fa-play
+        span Start
+
+    / Quick actions menu
+    .dropdown.is-right.agent-quick-actions-dropdown
+      .dropdown-trigger
+        button.button.is-light.agent-quick-actions-btn(type="button" aria-haspopup="true" aria-controls="agent-actions-menu")
+          span.icon.is-small
+            i.fas.fa-ellipsis-v
+      .dropdown-menu#agent-actions-menu(role="menu")
+        .dropdown-content
+          a.dropdown-item(href="#config" data-tab-link="config")
+            span.icon.is-small
+              i.fas.fa-cog
+            span Edit Configuration
+          a.dropdown-item(href="/agents/#{encoded_agent_name}/duplicate" hx-post="/agents/#{encoded_agent_name}/duplicate" hx-swap="none")
+            span.icon.is-small
+              i.fas.fa-copy
+            span Duplicate Agent
+          a.dropdown-item(href="/agents/#{encoded_agent_name}/export" download="#{agent_name}.json")
+            span.icon.is-small
+              i.fas.fa-download
+            span Export JSON
+          a.dropdown-item(href="/agents/#{encoded_agent_name}/download" download="#{agent_name}.rb")
+            span.icon.is-small
+              i.fas.fa-file-code
+            span Download Ruby
+          a.dropdown-item(onclick="saveAgentToDisk('#{encoded_agent_name}')" style="cursor: pointer;" title="Write agents/#{agent_name}.rb so this agent survives a restart")
+            span.icon.is-small
+              i.fas.fa-hard-drive
+            span Save to agents/
+          hr.dropdown-divider
+          a.dropdown-item.has-text-danger(href="#" data-action="delete-agent" data-agent-name=agent_name)
+            span.icon.is-small
+              i.fas.fa-trash-alt
+            span Delete Agent