@stacksjs/defaults 0.75.74 → 0.75.75

package/functions/remote-terminal-element.ts

@@ -0,0 +1,287 @@
+import type { FitAddon } from '@xterm/addon-fit'
+import type { Terminal } from '@xterm/xterm'
+import { DashboardApiError } from './dashboard-api'
+import { closeTerminalSession, openTerminalSession, resizeTerminalSession, sendTerminalInput, streamTerminal } from './remote'
+
+/**
+ * `<stacks-remote-terminal host="app">` - an interactive terminal session on a
+ * configured host, rendered with xterm.js (stacksjs/stacks#960).
+ *
+ * The session opens when the element is attached and closes when it is
+ * removed, so leaving the page ends the remote shell instead of leaving it
+ * running for the server's detach grace. Output arrives as server-sent events
+ * read through `fetch`; keystrokes go out as small POSTs, batched and sent one
+ * at a time so they arrive in the order they were typed.
+ *
+ * Fires `terminal-open` with `{ id }` and `terminal-exit` with
+ * `{ reason, exitCode, message }`.
+ *
+ * Everything browser-only - xterm, its stylesheet, the `HTMLElement` subclass -
+ * is loaded inside {@link registerRemoteTerminal}. This module is also loaded
+ * on the server, by the auto-import barrel for this directory: a class
+ * extending `HTMLElement` at the top level threw there and took every function
+ * in the barrel down with it, and xterm left a handle open that would keep a
+ * CLI process from exiting.
+ */
+
+const STYLE_ID = 'stacks-xterm-styles'
+const MAX_RECONNECTS = 5
+
+interface Xterm {
+  Terminal: typeof Terminal
+  FitAddon: typeof FitAddon
+  styles: string
+}
+
+function ensureStyles(styles: string): void {
+  if (document.getElementById(STYLE_ID))
+    return
+  const style = document.createElement('style')
+  style.id = STYLE_ID
+  style.textContent = styles
+  document.head.append(style)
+}
+
+function defineElement(xterm: Xterm) {
+  return class StacksRemoteTerminal extends HTMLElement {
+    static observedAttributes = ['host']
+
+    /**
+     * Bumped by every start and teardown. Opening a session is asynchronous,
+     * and the element can be detached, re-attached or pointed at another host
+     * meanwhile; a continuation from an older lifetime sees the number has
+     * moved on and closes what it opened instead of adopting it.
+     */
+    private generation = 0
+    private running?: string
+    private terminal?: Terminal
+    private fit?: FitAddon
+    private session?: string
+    private abort = new AbortController()
+    private observer?: ResizeObserver
+    private seq = 0
+    private pending = ''
+    private sending = false
+    private ended = false
+    private resizeTimer?: ReturnType<typeof setTimeout>
+
+    connectedCallback(): void {
+      void this.start()
+    }
+
+    /**
+     * A template may set `host` after inserting the element, so this starts it
+     * too; and a different host on a running element is a new session there.
+     */
+    attributeChangedCallback(_name: string, previous: string | null, next: string | null): void {
+      if (this.running !== undefined && previous !== next)
+        this.teardown()
+      void this.start()
+    }
+
+    /**
+     * A template may detach an element and attach it again - stx's `:if` keeps
+     * the hidden nodes and re-inserts the same ones. So a removal is acted on
+     * a tick later, and only if the element is still out of the document; and
+     * once torn down, the next attach starts a fresh session.
+     */
+    disconnectedCallback(): void {
+      setTimeout(() => {
+        if (!this.isConnected)
+          this.teardown()
+      }, 0)
+    }
+
+    private async start(): Promise<void> {
+      const host = this.getAttribute('host')
+      if (this.running !== undefined || !this.isConnected || !host)
+        return
+      this.running = host
+      const generation = ++this.generation
+      this.abort = new AbortController()
+      this.seq = 0
+      this.pending = ''
+      this.sending = false
+      this.ended = false
+      this.session = undefined
+      ensureStyles(xterm.styles)
+
+      const surface = document.createElement('div')
+      surface.style.width = '100%'
+      surface.style.height = '100%'
+      this.replaceChildren(surface)
+
+      const terminal = new xterm.Terminal({
+        cursorBlink: true,
+        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
+        fontSize: 13,
+        scrollback: 5000,
+        theme: { background: '#0a0a0a' },
+      })
+      const fit = new xterm.FitAddon()
+      terminal.loadAddon(fit)
+      terminal.open(surface)
+      fit.fit()
+      this.terminal = terminal
+      this.fit = fit
+
+      let id: string
+      try {
+        id = (await openTerminalSession(host, terminal.cols, terminal.rows)).id
+      }
+      catch (error) {
+        if (generation === this.generation)
+          this.finish('refused', null, error instanceof Error ? error.message : String(error))
+        return
+      }
+
+      // Torn down or re-hosted while the session was opening: close it rather
+      // than leave a shell nobody is attached to.
+      if (generation !== this.generation) {
+        void closeTerminalSession(id).catch(() => {})
+        return
+      }
+      this.session = id
+
+      terminal.onData(data => this.type(data))
+      terminal.onResize(({ cols, rows }) => {
+        clearTimeout(this.resizeTimer)
+        this.resizeTimer = setTimeout(() => {
+          if (this.session && !this.ended)
+            void resizeTerminalSession(this.session, cols, rows).catch(() => {})
+        }, 150)
+      })
+      this.observer = new ResizeObserver(() => this.fit?.fit())
+      this.observer.observe(this)
+
+      this.dispatchEvent(new CustomEvent('terminal-open', { detail: { id } }))
+      terminal.focus()
+      void this.pump()
+    }
+
+    private teardown(): void {
+      this.generation++
+      this.abort.abort()
+      this.observer?.disconnect()
+      this.observer = undefined
+      clearTimeout(this.resizeTimer)
+      if (this.session && !this.ended)
+        void closeTerminalSession(this.session).catch(() => {})
+      this.session = undefined
+      this.ended = true
+      this.terminal?.dispose()
+      this.terminal = undefined
+      this.fit = undefined
+      this.running = undefined
+      this.replaceChildren()
+    }
+
+    /**
+     * Read output until the session ends, reconnecting from the last sequence
+     * seen. Bound to the lifetime that started it: a restart gives the next
+     * session its own pump, and this one stops.
+     */
+    private async pump(): Promise<void> {
+      const generation = this.generation
+      const { signal } = this.abort
+      const session = this.session!
+      const current = () => generation === this.generation && !this.ended
+      let failures = 0
+      while (current()) {
+        try {
+          for await (const event of streamTerminal(session, this.seq, signal)) {
+            failures = 0
+            if (event.type === 'output') {
+              this.seq = event.seq
+              this.terminal?.write(event.data)
+            }
+            else {
+              this.finish(event.reason, event.exitCode)
+              return
+            }
+          }
+        }
+        catch (error) {
+          if (signal.aborted || !current())
+            return
+          if (error instanceof DashboardApiError && error.status === 404) {
+            this.finish('ended', null)
+            return
+          }
+        }
+
+        if (!current())
+          return
+        if (++failures > MAX_RECONNECTS) {
+          this.finish('disconnected', null, 'The connection to the server was lost.')
+          return
+        }
+        await new Promise(resolve => setTimeout(resolve, Math.min(500 * 2 ** failures, 8000)))
+      }
+    }
+
+    /** Batch keystrokes, one request in flight at a time, so they arrive in order. */
+    private type(data: string): void {
+      if (this.ended || !this.session)
+        return
+      this.pending += data
+      if (!this.sending)
+        void this.flush()
+    }
+
+    private async flush(): Promise<void> {
+      const generation = this.generation
+      const session = this.session!
+      this.sending = true
+      try {
+        while (this.pending && !this.ended && generation === this.generation) {
+          const data = this.pending
+          this.pending = ''
+          try {
+            await sendTerminalInput(session, data)
+          }
+          catch (error) {
+            if (error instanceof DashboardApiError && error.status === 404 && generation === this.generation)
+              this.finish('ended', null)
+          }
+        }
+      }
+      finally {
+        if (generation === this.generation)
+          this.sending = false
+      }
+    }
+
+    private finish(reason: string, exitCode: number | null, message?: string): void {
+      if (this.ended)
+        return
+      this.ended = true
+      this.abort.abort()
+      const note = message ?? (exitCode === null ? `session ${reason}` : `session ${reason}, exit ${exitCode}`)
+      this.terminal?.write(`\r\n\x1B[2m[${note}]\x1B[0m\r\n`)
+      this.dispatchEvent(new CustomEvent('terminal-exit', { detail: { reason, exitCode, message } }))
+    }
+  }
+}
+
+let registering: Promise<void> | undefined
+
+/**
+ * Load xterm and define the element, once. Safe to call from every component
+ * that uses it, and a no-op outside a browser. Elements already in the page
+ * upgrade when the definition lands.
+ */
+export function registerRemoteTerminal(): Promise<void> {
+  if (typeof customElements === 'undefined')
+    return Promise.resolve()
+  registering ??= (async () => {
+    const [{ Terminal }, { FitAddon }, styles] = await Promise.all([
+      import('@xterm/xterm'),
+      import('@xterm/addon-fit'),
+      import('@xterm/xterm/css/xterm.css', { with: { type: 'text' } }).then(module => module.default as string),
+    ])
+    if (!customElements.get('stacks-remote-terminal'))
+      customElements.define('stacks-remote-terminal', defineElement({ Terminal, FitAddon, styles }))
+  })()
+  return registering
+}

package/functions/remote.test.ts

@@ -0,0 +1,52 @@
+import { describe, expect, test } from 'bun:test'
+import { encodeTerminalEvent } from '../app/Actions/Dashboard/Remote/terminal-sessions'
+import { parseTerminalEvents } from './remote'
+
+/**
+ * The dashboard reads a terminal's server-sent events through `fetch`, because
+ * `EventSource` cannot send its bearer token, so it parses the stream itself.
+ * Encoded by the server's own encoder, split anywhere the network might.
+ */
+function streamOf(text: string, chunkSize: number): ReadableStream<Uint8Array> {
+  const bytes = new TextEncoder().encode(text)
+  let offset = 0
+  return new ReadableStream({
+    pull(controller) {
+      if (offset >= bytes.length)
+        return controller.close()
+      controller.enqueue(bytes.slice(offset, offset + chunkSize))
+      offset += chunkSize
+    },
+  })
+}
+
+async function collect(stream: ReadableStream<Uint8Array>) {
+  const events = []
+  for await (const event of parseTerminalEvents(stream))
+    events.push(event)
+  return events
+}
+
+describe('parseTerminalEvents', () => {
+  // "é" is two bytes, delivered in two output events, as a PTY can.
+  const wire = [
+    ': connected\n\n',
+    encodeTerminalEvent({ type: 'output', seq: 1, data: new Uint8Array([0x68, 0x69, 0x20, 0xC3]) }),
+    ': ping\n\n',
+    encodeTerminalEvent({ type: 'output', seq: 2, data: new Uint8Array([0xA9]) }),
+    encodeTerminalEvent({ type: 'exit', reason: 'exited', exitCode: 3 }),
+  ].join('')
+
+  test('reads output, skips heartbeats, and ends on exit, however the bytes are split', async () => {
+    for (const chunkSize of [1, 3, 7, 64, wire.length]) {
+      const events = await collect(streamOf(wire, chunkSize))
+      expect(events.map(event => event.type)).toEqual(['output', 'output', 'exit'])
+      expect(events[2]).toEqual({ type: 'exit', reason: 'exited', exitCode: 3 })
+
+      const [first, second] = events as Array<{ seq: number, data: Uint8Array }>
+      expect([first!.seq, second!.seq]).toEqual([1, 2])
+      const joined = new Uint8Array([...first!.data, ...second!.data])
+      expect(new TextDecoder().decode(joined)).toBe('hi é')
+    }
+  })
+})

package/functions/remote.ts

@@ -0,0 +1,136 @@
+import { dashboardApi, dashboardStream } from './dashboard-api'
+
+/**
+ * The dashboard's remote hosts: named commands, and interactive terminals on
+ * the hosts that allow them (stacksjs/stacks#960).
+ */
+
+export interface RemoteHostSummary {
+  key: string
+  host: string
+  user: string
+  port: number
+  terminal: boolean
+}
+
+export interface RemoteCommandSummary {
+  key: string
+  description: string
+  argv: string[]
+  hosts: string[] | null
+}
+
+export interface RemoteRegistry {
+  hosts: RemoteHostSummary[]
+  commands: RemoteCommandSummary[]
+}
+
+export interface RemoteCommandResult {
+  host: string
+  command: string
+  exitCode: number
+  stdout: string
+  stderr: string
+  durationMs: number
+  timedOut: boolean
+}
+
+export type TerminalStreamEvent =
+  | { type: 'output', seq: number, data: Uint8Array }
+  | { type: 'exit', reason: string, exitCode: number | null }
+
+export function fetchRemoteRegistry(): Promise<RemoteRegistry> {
+  return dashboardApi<RemoteRegistry>('/api/dashboard/remote/commands')
+}
+
+export function requestRemoteCommand(host: string, command: string): Promise<RemoteCommandResult> {
+  return dashboardApi<RemoteCommandResult>('/api/dashboard/remote/run', { method: 'POST', body: { host, command } })
+}
+
+export function openTerminalSession(host: string, cols: number, rows: number): Promise<{ id: string, host: string }> {
+  return dashboardApi('/api/dashboard/remote/terminals', { method: 'POST', body: { host, cols, rows } })
+}
+
+export function sendTerminalInput(id: string, data: string): Promise<unknown> {
+  return dashboardApi(`/api/dashboard/remote/terminals/${encodeURIComponent(id)}/input`, { method: 'POST', body: { data } })
+}
+
+export function resizeTerminalSession(id: string, cols: number, rows: number): Promise<unknown> {
+  return dashboardApi(`/api/dashboard/remote/terminals/${encodeURIComponent(id)}/resize`, { method: 'POST', body: { cols, rows } })
+}
+
+export function closeTerminalSession(id: string): Promise<unknown> {
+  return dashboardApi(`/api/dashboard/remote/terminals/${encodeURIComponent(id)}`, { method: 'DELETE' })
+}
+
+/**
+ * A session's events, from after sequence `after`, until the session ends or
+ * `signal` aborts. Ends without an exit event when the connection drops, so
+ * the caller can reconnect from the last sequence it saw.
+ */
+export async function* streamTerminal(id: string, after: number, signal: AbortSignal): AsyncGenerator<TerminalStreamEvent> {
+  const res = await dashboardStream(`/api/dashboard/remote/terminals/${encodeURIComponent(id)}/stream?after=${after}`, { signal })
+  if (!res.body)
+    return
+  yield* parseTerminalEvents(res.body)
+}
+
+function decodeBase64(value: string): Uint8Array {
+  const binary = atob(value)
+  const bytes = new Uint8Array(binary.length)
+  for (let i = 0; i < binary.length; i++)
+    bytes[i] = binary.charCodeAt(i)
+  return bytes
+}
+
+/**
+ * Server-sent events from a byte stream, however the network splits them.
+ * Comments (the heartbeat) and unknown events are skipped.
+ */
+export async function* parseTerminalEvents(body: ReadableStream<Uint8Array>): AsyncGenerator<TerminalStreamEvent> {
+  const decoder = new TextDecoder()
+  const reader = body.getReader()
+  let buffer = ''
+
+  try {
+    while (true) {
+      const { value, done } = await reader.read()
+      if (done)
+        return
+      buffer += decoder.decode(value, { stream: true })
+
+      let boundary = buffer.indexOf('\n\n')
+      while (boundary !== -1) {
+        const block = buffer.slice(0, boundary)
+        buffer = buffer.slice(boundary + 2)
+        boundary = buffer.indexOf('\n\n')
+
+        let event = 'message'
+        let id = ''
+        const data: string[] = []
+        for (const line of block.split('\n')) {
+          if (line.startsWith(':'))
+            continue
+          const colon = line.indexOf(':')
+          const field = colon === -1 ? line : line.slice(0, colon)
+          const raw = colon === -1 ? '' : line.slice(colon + 1)
+          const content = raw.startsWith(' ') ? raw.slice(1) : raw
+          if (field === 'event')
+            event = content
+          else if (field === 'id')
+            id = content
+          else if (field === 'data')
+            data.push(content)
+        }
+
+        if (event === 'output')
+          yield { type: 'output', seq: Number(id), data: decodeBase64(data.join('')) }
+        else if (event === 'exit')
+          yield { type: 'exit', ...(JSON.parse(data.join('\n')) as { reason: string, exitCode: number | null }) }
+      }
+    }
+  }
+  finally {
+    reader.releaseLock()
+  }
+}

package/functions/xterm-styles.d.ts

@@ -0,0 +1,9 @@
+/**
+ * xterm's stylesheet, imported as text by `remote-terminal-element.ts` (Bun's
+ * `with { type: 'text' }`). Declared for this one module rather than every
+ * `*.css`, so it does not claim anything about how other stylesheets load.
+ */
+declare module '@xterm/xterm/css/xterm.css' {
+  const styles: string
+  export default styles
+}

package/ide/vscode/package.json

@@ -2,7 +2,7 @@
   "publisher": "Stacks",
   "name": "vscode-stacks",
   "displayName": "Stacks",
-  "version": "0.75.74",
+  "version": "0.75.75",
   "description": "Stacks, built into VS Code: stx templates, pickier linting and formatting, encrypted env files, the dev server preview and every buddy command. No other extensions required.",
   "license": "MIT",
   "funding": "https://github.com/sponsors/chrisbbreuer",

package/package.json

@@ -2,7 +2,7 @@
   "name": "@stacksjs/defaults",
   "type": "module",
   "sideEffects": false,
-  "version": "0.75.74",
+  "version": "0.75.75",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/stacksjs/stacks.git",
@@ -55,8 +55,10 @@
   "dependencies": {
     "@iconify-json/f7": "^1.2.2",
     "@iconify-json/hugeicons": "^1.2.35",
-    "@stacksjs/mobile": "^0.75.74",
-    "@stacksjs/sanitizer": "^0.2.374",
+    "@stacksjs/mobile": "^0.75.75",
+    "@stacksjs/sanitizer": "^0.2.378",
+    "@xterm/addon-fit": "^0.11.0",
+    "@xterm/xterm": "^6.0.0",
     "ts-qr-codes": "^0.1.8"
   }
 }

package/resources/components/Dashboard/Remote/RemoteConsole.stx

@@ -0,0 +1,162 @@
+<script client>
+import type { RemoteCommandResult, RemoteRegistry } from '../../../../functions/remote'
+import { fetchRemoteRegistry, requestRemoteCommand } from '../../../../functions/remote'
+import { registerRemoteTerminal } from '../../../../functions/remote-terminal-element'
+import { pushToast } from '../../../../functions/toasts'
+
+void registerRemoteTerminal()
+
+const registry = state<RemoteRegistry | null>(null)
+const isLoading = state(true)
+const loadError = state('')
+const selectedHost = state('')
+const selectedCommand = state('')
+const isRunning = state(false)
+const result = state<RemoteCommandResult | null>(null)
+const terminalHost = state('')
+
+// Template expressions are evaluated as JavaScript, not TypeScript: no `!`.
+const hosts = derived(() => registry()?.hosts ?? [])
+const commands = derived(() => registry()?.commands ?? [])
+
+const commandsForHost = derived(() => {
+  const host = selectedHost()
+  return (registry()?.commands ?? []).filter(command => !command.hosts || command.hosts.includes(host))
+})
+
+async function load(): Promise<void> {
+  isLoading.set(true)
+  loadError.set('')
+  try {
+    const data = await fetchRemoteRegistry()
+    registry.set(data)
+    if (data.hosts.length > 0)
+      selectedHost.set(data.hosts[0].key)
+  }
+  catch (error) {
+    loadError.set(error instanceof Error ? error.message : 'The remote hosts could not be loaded.')
+  }
+  finally {
+    isLoading.set(false)
+  }
+}
+
+async function run(): Promise<void> {
+  if (!selectedHost() || !selectedCommand() || isRunning())
+    return
+  isRunning.set(true)
+  result.set(null)
+  try {
+    result.set(await requestRemoteCommand(selectedHost(), selectedCommand()))
+  }
+  catch (error) {
+    pushToast('error', 'The command did not run', { detail: error instanceof Error ? error.message : String(error) })
+  }
+  finally {
+    isRunning.set(false)
+  }
+}
+
+function showTerminal(host: string): void {
+  terminalHost.set(host)
+}
+
+function hideTerminal(): void {
+  terminalHost.set('')
+}
+
+function onTerminalExit(event: CustomEvent<{ reason: string, message?: string }>): void {
+  if (event.detail.reason === 'refused')
+    pushToast('error', 'The terminal could not open', { detail: event.detail.message ?? '' })
+}
+
+onMount(() => {
+  void load()
+})
+</script>
+
+<div class="space-y-6">
+  <header>
+    <h1 class="font-bold text-2xl text-gray-900 dark:text-white">Remote</h1>
+    <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Run configured operations on configured hosts, or open a terminal on a host that allows one. Every run and session is recorded.</p>
+  </header>
+
+  <div :if="loadError()" class="p-4 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">
+    {{ loadError() }}
+  </div>
+
+  <div :if="isLoading()" class="text-gray-500 text-sm dark:text-neutral-400">Loading hosts</div>
+
+  <section :if="!isLoading() && registry() && hosts().length === 0" class="p-6 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
+    <h2 class="font-semibold text-gray-900 dark:text-white">No hosts are configured</h2>
+    <p class="mt-1 max-w-2xl text-gray-500 text-sm dark:text-neutral-400">
+      Declare a host and its pinned host key in <code class="font-mono">config/remote.ts</code>, then define the <code class="font-mono">run-remote-command</code> and <code class="font-mono">open-remote-terminal</code> gates in <code class="font-mono">app/Gates.ts</code>. Until then nobody can reach a server from here, which is the safe default.
+    </p>
+  </section>
+
+  <section :if="hosts().length > 0" class="overflow-hidden bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
+    <div class="px-5 py-3 border-b border-gray-200 dark:border-neutral-700">
+      <h2 class="font-semibold text-gray-900 dark:text-white">Hosts</h2>
+    </div>
+    <ul class="divide-gray-200 divide-y dark:divide-neutral-700">
+      <template :for="entry in hosts()">
+        <li class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between px-5 py-3">
+          <div>
+            <p class="font-medium text-gray-900 dark:text-white">{{ entry.key }}</p>
+            <p class="font-mono text-gray-500 text-xs dark:text-neutral-400">{{ entry.user + '@' + entry.host + ':' + entry.port }}</p>
+          </div>
+          <Button :if="entry.terminal" variant="outline" @click="showTerminal(entry.key)">
+            <span class="h-4 w-4 i-hugeicons-command-line"></span>
+            Open terminal
+          </Button>
+          <span :if="!entry.terminal" class="text-gray-400 text-xs dark:text-neutral-500">Named commands only</span>
+        </li>
+      </template>
+    </ul>
+  </section>
+
+  <section :if="terminalHost()" class="overflow-hidden bg-neutral-950 border border-neutral-800 rounded-lg">
+    <div class="flex items-center justify-between px-4 py-2 border-b border-neutral-800">
+      <p class="font-mono text-neutral-300 text-sm">{{ terminalHost() }}</p>
+      <Button variant="ghost" size="sm" @click="hideTerminal()">
+        <span class="h-4 w-4 i-hugeicons-cancel-01"></span>
+        Close
+      </Button>
+    </div>
+    <div class="p-2 h-[28rem]">
+      <stacks-remote-terminal :host="terminalHost()" class="block h-full" @terminal-exit="onTerminalExit"></stacks-remote-terminal>
+    </div>
+  </section>
+
+  <section :if="commands().length > 0" class="p-5 space-y-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
+    <h2 class="font-semibold text-gray-900 dark:text-white">Run a command</h2>
+    <form class="flex flex-col gap-3 sm:flex-row sm:items-end" @submit.prevent="run">
+      <label class="flex flex-col gap-1 text-gray-700 text-sm dark:text-neutral-200">
+        Host
+        <select x-model="selectedHost" class="px-3 py-2 text-sm dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600">
+          <template :for="entry in hosts()">
+            <option :value="entry.key">{{ entry.key }}</option>
+          </template>
+        </select>
+      </label>
+      <label class="flex flex-1 flex-col gap-1 text-gray-700 text-sm dark:text-neutral-200">
+        Command
+        <select x-model="selectedCommand" class="px-3 py-2 text-sm dark:bg-neutral-700 border border-gray-300 rounded-md dark:border-neutral-600">
+          <option value="">Choose a command</option>
+          <template :for="command in commandsForHost()">
+            <option :value="command.key">{{ command.key }} - {{ command.description }}</option>
+          </template>
+        </select>
+      </label>
+      <Button type="submit" :disabled="!selectedCommand()" :loading="isRunning()">Run</Button>
+    </form>
+
+    <div :if="result()" class="space-y-2">
+      <p class="text-gray-500 text-xs dark:text-neutral-400">
+        {{ result()?.command }} on {{ result()?.host }}: {{ result()?.timedOut ? 'timed out' : 'exit ' + result()?.exitCode }} in {{ result()?.durationMs }} ms
+      </p>
+      <pre :if="result()?.stdout" class="overflow-auto p-3 max-h-80 font-mono text-neutral-100 text-xs bg-neutral-950 rounded-md">{{ result()?.stdout }}</pre>
+      <pre :if="result()?.stderr" class="overflow-auto p-3 max-h-80 font-mono text-red-200 text-xs bg-neutral-950 rounded-md">{{ result()?.stderr }}</pre>
+    </div>
+  </section>
+</div>