arkaos 3.67.0 → 3.68.0

package/VERSION

@@ -1 +1 @@
-3.67.0
+3.68.0

package/dashboard/app/components/Terminal.vue

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+// PR99b v3.68.0 — xterm.js terminal mount.
+//
+// Glues @xterm/xterm to a single PTY session from useTerminalSession.
+// One terminal per component instance; the multi-tab page in PR99c
+// will spawn N of these.
+
+import { Terminal as XTerm } from '@xterm/xterm'
+import { FitAddon } from '@xterm/addon-fit'
+import { WebLinksAddon } from '@xterm/addon-web-links'
+import { SearchAddon } from '@xterm/addon-search'
+import '@xterm/xterm/css/xterm.css'
+
+const container = ref<HTMLDivElement | null>(null)
+const session = useTerminalSession()
+const term = shallowRef<XTerm | null>(null)
+const fit = shallowRef<FitAddon | null>(null)
+const search = shallowRef<SearchAddon | null>(null)
+
+const decoder = new TextDecoder('utf-8', { fatal: false })
+
+const themeArkaOSDark = {
+  background: '#0a0a0f',
+  foreground: '#e6e6f0',
+  cursor: '#7dd3fc',
+  cursorAccent: '#0a0a0f',
+  selectionBackground: '#1e3a5f',
+  black: '#0a0a0f',
+  red: '#f87171',
+  green: '#86efac',
+  yellow: '#fde68a',
+  blue: '#7dd3fc',
+  magenta: '#f0abfc',
+  cyan: '#67e8f9',
+  white: '#e6e6f0',
+  brightBlack: '#3f3f46',
+  brightRed: '#fca5a5',
+  brightGreen: '#bbf7d0',
+  brightYellow: '#fef3c7',
+  brightBlue: '#bae6fd',
+  brightMagenta: '#f5d0fe',
+  brightCyan: '#a5f3fc',
+  brightWhite: '#fafafa',
+}
+
+let unsubscribeOutput: (() => void) | null = null
+let resizeObserver: ResizeObserver | null = null
+
+onMounted(async () => {
+  if (!container.value) return
+
+  const t = new XTerm({
+    cursorBlink: true,
+    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+    fontSize: 13,
+    lineHeight: 1.2,
+    scrollback: 5000,
+    theme: themeArkaOSDark,
+    allowProposedApi: true,
+  })
+  const fitAddon = new FitAddon()
+  const searchAddon = new SearchAddon()
+  t.loadAddon(fitAddon)
+  t.loadAddon(new WebLinksAddon())
+  t.loadAddon(searchAddon)
+  t.open(container.value)
+  fitAddon.fit()
+
+  term.value = t
+  fit.value = fitAddon
+  search.value = searchAddon
+
+  await session.open()
+
+  unsubscribeOutput = session.onOutput((chunk) => {
+    const text = decoder.decode(chunk, { stream: true })
+    t.write(text)
+  })
+
+  t.onData((data) => {
+    session.sendInput(data)
+  })
+
+  // Initial size sync once the WS is open.
+  watch(session.status, (s) => {
+    if (s === 'open') {
+      const { cols, rows } = t
+      session.sendResize(cols, rows)
+    }
+  }, { immediate: true })
+
+  resizeObserver = new ResizeObserver(() => {
+    try {
+      fitAddon.fit()
+      session.sendResize(t.cols, t.rows)
+    } catch (_e) {
+      // dom may have unmounted
+    }
+  })
+  resizeObserver.observe(container.value)
+})
+
+onBeforeUnmount(async () => {
+  unsubscribeOutput?.()
+  resizeObserver?.disconnect()
+  await session.close()
+  term.value?.dispose()
+})
+
+defineExpose({
+  status: session.status,
+  error: session.error,
+  meta: session.meta,
+})
+</script>
+
+<template>
+  <div class="relative h-full w-full bg-[#0a0a0f] rounded-lg overflow-hidden border border-default">
+    <div
+      v-if="session.status.value === 'connecting'"
+      class="absolute inset-0 z-10 grid place-items-center text-muted text-sm bg-[#0a0a0f]/80 backdrop-blur"
+    >
+      <div class="flex items-center gap-2">
+        <UIcon name="i-lucide-loader" class="animate-spin size-4" />
+        Spawning PTY…
+      </div>
+    </div>
+    <div
+      v-else-if="session.status.value === 'error' || session.status.value === 'closed'"
+      class="absolute top-2 right-2 z-10 text-xs rounded-md bg-elevated/90 px-2 py-1 border border-default"
+    >
+      <span v-if="session.status.value === 'error'" class="text-red-400">
+        {{ session.error.value || 'error' }}
+      </span>
+      <span v-else class="text-muted">closed</span>
+    </div>
+    <div ref="container" class="absolute inset-0 p-2" />
+  </div>
+</template>
+
+<style scoped>
+:deep(.xterm) {
+  height: 100%;
+  width: 100%;
+  padding: 4px;
+}
+:deep(.xterm-viewport) {
+  background-color: transparent !important;
+}
+</style>

package/dashboard/app/composables/useTerminalSession.ts

@@ -0,0 +1,138 @@
+// PR99b v3.68.0 — single PTY session lifecycle.
+//
+// Encapsulates the REST + WebSocket handshake against /api/terminal/*.
+// The composable owns no DOM and no xterm instance — it just produces
+// the bytes-in/bytes-out duplex. The Terminal.vue component glues this
+// to an xterm.js canvas.
+
+export interface TerminalSessionMeta {
+  session_id: string
+  shell: string
+  cwd: string
+  token: string
+  ws_path: string
+  max_sessions: number
+  active_count: number
+}
+
+export interface TerminalSessionHandle {
+  meta: Ref<TerminalSessionMeta | null>
+  status: Ref<'idle' | 'connecting' | 'open' | 'closed' | 'error'>
+  error: Ref<string | null>
+  open: () => Promise<void>
+  sendInput: (data: string) => void
+  sendResize: (cols: number, rows: number) => void
+  close: () => Promise<void>
+  onOutput: (cb: (chunk: Uint8Array) => void) => () => void
+}
+
+export function useTerminalSession(): TerminalSessionHandle {
+  const { apiBase } = useApi()
+  const meta = ref<TerminalSessionMeta | null>(null)
+  const status = ref<'idle' | 'connecting' | 'open' | 'closed' | 'error'>('idle')
+  const error = ref<string | null>(null)
+
+  let ws: WebSocket | null = null
+  const listeners: Array<(chunk: Uint8Array) => void> = []
+
+  function wsUrl(path: string, token: string): string {
+    const base = apiBase.replace(/^http/, 'ws')
+    return `${base}${path}?token=${encodeURIComponent(token)}`
+  }
+
+  async function createSession(): Promise<TerminalSessionMeta> {
+    const r = await fetch(`${apiBase}/api/terminal/sessions`, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ cols: 120, rows: 32 }),
+    })
+    if (!r.ok) {
+      const body = await r.text()
+      throw new Error(`create session failed: ${r.status} ${body}`)
+    }
+    return await r.json()
+  }
+
+  async function open() {
+    if (status.value === 'open' || status.value === 'connecting') return
+    status.value = 'connecting'
+    error.value = null
+    try {
+      const m = await createSession()
+      meta.value = m
+      ws = new WebSocket(wsUrl(m.ws_path, m.token))
+      ws.binaryType = 'arraybuffer'
+      ws.onopen = () => {
+        status.value = 'open'
+      }
+      ws.onmessage = (ev) => {
+        if (ev.data instanceof ArrayBuffer) {
+          const chunk = new Uint8Array(ev.data)
+          for (const cb of listeners) cb(chunk)
+        } else if (typeof ev.data === 'string') {
+          const enc = new TextEncoder().encode(ev.data)
+          for (const cb of listeners) cb(enc)
+        }
+      }
+      ws.onerror = () => {
+        status.value = 'error'
+        error.value = 'websocket error'
+      }
+      ws.onclose = (ev) => {
+        status.value = 'closed'
+        if (ev.code !== 1000 && ev.code !== 1005) {
+          error.value = `closed (${ev.code}) ${ev.reason || ''}`.trim()
+        }
+      }
+    } catch (e) {
+      status.value = 'error'
+      error.value = e instanceof Error ? e.message : String(e)
+    }
+  }
+
+  function sendInput(data: string) {
+    if (!ws || ws.readyState !== WebSocket.OPEN) return
+    ws.send(JSON.stringify({ type: 'input', data }))
+  }
+
+  function sendResize(cols: number, rows: number) {
+    if (!ws || ws.readyState !== WebSocket.OPEN) return
+    ws.send(JSON.stringify({ type: 'resize', cols, rows }))
+  }
+
+  async function close() {
+    try {
+      ws?.close(1000, 'client close')
+    } catch (_e) {
+      // ignore
+    }
+    const id = meta.value?.session_id
+    if (id) {
+      try {
+        await fetch(`${apiBase}/api/terminal/sessions/${id}`, { method: 'DELETE' })
+      } catch (_e) {
+        // ignore — best-effort cleanup; backend reaper will catch it
+      }
+    }
+    status.value = 'closed'
+  }
+
+  function onOutput(cb: (chunk: Uint8Array) => void) {
+    listeners.push(cb)
+    return () => {
+      const idx = listeners.indexOf(cb)
+      if (idx >= 0) listeners.splice(idx, 1)
+    }
+  }
+
+  return {
+    meta,
+    status,
+    error,
+    open,
+    sendInput,
+    sendResize,
+    close,
+    onOutput,
+  }
+}

package/dashboard/app/pages/terminal.vue

@@ -1,278 +1,51 @@
 <script setup lang="ts">
-// PR95a v3.51.0 — Dashboard terminal (allowlist mode).
+// PR99b v3.68.0 — Real-shell terminal (single session).
 //
-// Operator picks one of the allowlisted commands; backend runs it via
-// subprocess.run (no shell). Output streams into the history block.
-//
-// Note: vue-termui is for building Vue TUI apps that RUN in a terminal,
-// not for embedding an arbitrary shell in a browser. The dashboard
-// instead ships a controlled command runner with allowlist + capped
-// output. xterm.js-style PTY can be a later upgrade if needed.
-
-interface CommandArg {
-  name: string
-  label: string
-  choices: string[]
-  default: string
-}
-
-interface CommandEntry {
-  id: string
-  label: string
-  description: string
-  args?: CommandArg[]
-}
-
-interface ExecResult {
-  stdout: string
-  stderr: string
-  exit_code: number
-  duration_ms: number
-  command: string
-}
-
-interface HistoryEntry {
-  id: string
-  label: string
-  result: ExecResult
-  ts: string
-}
-
-const { fetchApi, apiBase } = useApi()
-const toast = useToast()
-
-const { data: cmdData, status } = await fetchApi<{ commands: CommandEntry[] }>(
-  '/api/terminal/commands',
-)
-const commands = computed<CommandEntry[]>(() => cmdData.value?.commands ?? [])
-
-const running = ref<string | null>(null)
-const history = ref<HistoryEntry[]>([])
+// Replaces the v3.51.0 allowlist UI. Each visit spawns a fresh PTY
+// session on the backend, wired to xterm.js. Multi-session tabs and
+// history land in PR99c. The old allowlist endpoints stay in parallel
+// until PR99d, but the UI is gone as of this release.
 
-// PR96b v3.56.0 — per-command arg state. Keyed by command id, holds
-// the operator's current selection for each arg.
-const argState = reactive<Record<string, Record<string, string>>>({})
+definePageMeta({ layout: 'default' })
 
-function ensureArgState(cmd: CommandEntry) {
-  if (!cmd.args || cmd.args.length === 0) return
-  if (!argState[cmd.id]) argState[cmd.id] = {}
-  for (const arg of cmd.args) {
-    if (argState[cmd.id][arg.name] === undefined) {
-      argState[cmd.id][arg.name] = arg.default
-    }
-  }
-}
-
-async function run(cmd: CommandEntry) {
-  running.value = cmd.id
-  ensureArgState(cmd)
-  try {
-    const res = await $fetch<ExecResult & { error?: string }>(
-      `${apiBase}/api/terminal/exec`,
-      {
-        method: 'POST',
-        body: {
-          command_id: cmd.id,
-          args: cmd.args ? argState[cmd.id] : undefined,
-        },
-      },
-    )
-    if (res.error) throw new Error(res.error)
-    history.value = [
-      {
-        id: cmd.id,
-        label: cmd.label,
-        result: res,
-        ts: new Date().toISOString(),
-      },
-      ...history.value,
-    ].slice(0, 20)
-    if (res.exit_code === 0) {
-      toast.add({
-        title: `${cmd.label} · ok`,
-        description: `${res.duration_ms}ms`,
-        color: 'success',
-        icon: 'i-lucide-check',
-      })
-    } else {
-      toast.add({
-        title: `${cmd.label} · exit ${res.exit_code}`,
-        description: `${res.duration_ms}ms · ${res.stderr.slice(0, 80) || 'no stderr'}`,
-        color: 'warning',
-      })
-    }
-  } catch (err) {
-    toast.add({
-      title: 'Run failed',
-      description: err instanceof Error ? err.message : 'unknown error',
-      color: 'error',
-    })
-  } finally {
-    running.value = null
-  }
-}
-
-function copyOutput(entry: HistoryEntry) {
-  if (typeof navigator === 'undefined' || !navigator.clipboard) return
-  const body = entry.result.stdout || entry.result.stderr
-  void navigator.clipboard.writeText(body)
-  toast.add({ title: 'Copied to clipboard', color: 'success', icon: 'i-lucide-clipboard-check' })
-}
-
-function clearHistory() {
-  history.value = []
-}
-
-function relative(iso: string): string {
-  const ts = Date.parse(iso)
-  if (Number.isNaN(ts)) return iso
-  const diff = Date.now() - ts
-  const s = Math.floor(diff / 1000)
-  if (s < 60) return `${s}s ago`
-  const m = Math.floor(s / 60)
-  if (m < 60) return `${m}m ago`
-  return `${Math.floor(m / 60)}h ago`
-}
+const terminalRef = ref<InstanceType<typeof import('~/components/Terminal.vue').default> | null>(null)
+const expanded = ref(false)
 </script>
 
 <template>
-  <UDashboardPanel id="terminal">
-    <template #header>
-      <UDashboardNavbar title="Terminal">
-        <template #leading>
-          <UDashboardSidebarCollapse />
-        </template>
-        <template #trailing>
-          <UBadge label="Allowlist mode" variant="subtle" color="primary" size="sm" />
-        </template>
-      </UDashboardNavbar>
-    </template>
-
-    <template #body>
-      <DashboardState
-        :status="status"
-        :empty="commands.length === 0"
-        empty-title="No allowlisted commands"
-        empty-description="The backend exposes no terminal commands. Add to TERMINAL_ALLOWLIST."
-        empty-icon="i-lucide-terminal"
-      >
-        <div class="space-y-5 max-w-4xl">
-          <UCard>
-            <template #header>
-              <div>
-                <h3 class="text-lg font-bold">Commands</h3>
-                <p class="text-xs text-muted mt-0.5">
-                  Server-enforced allowlist. Each command runs via
-                  <code class="font-mono">subprocess.run</code> with explicit argv —
-                  no shell, no globbing, no pipes. Cap: 15s timeout, 20K chars per stream.
-                </p>
-              </div>
-            </template>
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
-              <div
-                v-for="cmd in commands"
-                :key="cmd.id"
-                class="rounded-lg border border-default p-3 space-y-2"
-              >
-                <div>
-                  <p class="text-sm font-semibold">{{ cmd.label }}</p>
-                  <p class="text-xs text-muted">{{ cmd.description }}</p>
-                </div>
-                <!-- PR96b v3.56.0 — arg pickers for parameterised commands -->
-                <div v-if="cmd.args && cmd.args.length > 0" class="grid grid-cols-2 gap-2">
-                  <UFormField
-                    v-for="arg in cmd.args"
-                    :key="arg.name"
-                    :label="arg.label"
-                    size="xs"
-                  >
-                    <USelect
-                      :model-value="(argState[cmd.id] || {})[arg.name] || arg.default"
-                      :items="arg.choices.map((c) => ({ label: c, value: c }))"
-                      size="xs"
-                      class="w-full"
-                      @update:model-value="(v) => {
-                        ensureArgState(cmd)
-                        argState[cmd.id][arg.name] = String(v)
-                      }"
-                    />
-                  </UFormField>
-                </div>
-                <UButton
-                  label="Run"
-                  icon="i-lucide-play"
-                  color="primary"
-                  size="sm"
-                  block
-                  :loading="running === cmd.id"
-                  :disabled="running !== null && running !== cmd.id"
-                  @click="run(cmd)"
-                />
-              </div>
-            </div>
-          </UCard>
-
-          <UCard v-if="history.length > 0">
-            <template #header>
-              <div class="flex items-center justify-between gap-3">
-                <div>
-                  <h3 class="text-lg font-bold">Recent runs</h3>
-                  <p class="text-xs text-muted mt-0.5">
-                    Last {{ history.length }} commands · most recent first
-                  </p>
-                </div>
-                <UButton label="Clear" variant="ghost" size="xs" @click="clearHistory" />
-              </div>
-            </template>
-            <ul class="space-y-4">
-              <li
-                v-for="entry in history"
-                :key="`${entry.ts}-${entry.id}`"
-                class="rounded-lg border border-default overflow-hidden"
-              >
-                <div class="px-3 py-2 bg-elevated/30 flex items-center justify-between gap-3 text-xs">
-                  <div class="min-w-0 flex items-center gap-2">
-                    <UBadge
-                      :label="entry.result.exit_code === 0 ? 'ok' : `exit ${entry.result.exit_code}`"
-                      :color="entry.result.exit_code === 0 ? 'success' : 'warning'"
-                      variant="subtle"
-                      size="xs"
-                    />
-                    <span class="font-mono truncate">{{ entry.result.command }}</span>
-                  </div>
-                  <div class="flex items-center gap-2 shrink-0">
-                    <span class="text-muted font-mono">{{ entry.result.duration_ms }}ms</span>
-                    <span class="text-muted">{{ relative(entry.ts) }}</span>
-                    <UButton
-                      icon="i-lucide-clipboard-copy"
-                      variant="ghost"
-                      size="xs"
-                      aria-label="Copy output"
-                      @click="copyOutput(entry)"
-                    />
-                  </div>
-                </div>
-                <pre
-                  v-if="entry.result.stdout"
-                  class="p-3 text-xs font-mono whitespace-pre overflow-x-auto"
-                >{{ entry.result.stdout }}</pre>
-                <pre
-                  v-if="entry.result.stderr"
-                  class="p-3 text-xs font-mono whitespace-pre overflow-x-auto text-rose-500 border-t border-default"
-                >{{ entry.result.stderr }}</pre>
-              </li>
-            </ul>
-          </UCard>
-
-          <p class="text-xs text-muted">
-            Want a different command? Add it to
-            <code class="font-mono">TERMINAL_ALLOWLIST</code> in
-            <code class="font-mono">scripts/dashboard-api.py</code> and
-            restart the backend. Arbitrary shell execution from the
-            dashboard is intentionally not supported.
-          </p>
-        </div>
-      </DashboardState>
-    </template>
-  </UDashboardPanel>
+  <div class="flex flex-col gap-3 h-full">
+    <header class="flex items-center justify-between">
+      <div>
+        <h1 class="text-2xl font-semibold">Terminal</h1>
+        <p class="text-sm text-muted">
+          Real shell, PTY-backed. Runs the same commands as your local zsh —
+          claude, codex, git, anything. Session ends when you leave this page.
+        </p>
+      </div>
+      <div class="flex items-center gap-2">
+        <UBadge color="warning" variant="soft" size="sm">
+          <UIcon name="i-lucide-shield" class="size-3 mr-1" />
+          localhost only
+        </UBadge>
+        <UButton
+          size="xs"
+          variant="ghost"
+          :icon="expanded ? 'i-lucide-minimize-2' : 'i-lucide-maximize-2'"
+          @click="expanded = !expanded"
+        >
+          {{ expanded ? 'Restore' : 'Expand' }}
+        </UButton>
+      </div>
+    </header>
+
+    <Terminal
+      ref="terminalRef"
+      :class="expanded ? 'fixed inset-4 z-40' : 'flex-1 min-h-[520px]'"
+    />
+
+    <footer class="text-xs text-muted">
+      Multi-session tabs, command history search and theme picker arrive in
+      PR99c / PR99d. PR99a (backend PTY) is live.
+    </footer>
+  </div>
 </template>

package/dashboard/package.json

@@ -20,6 +20,10 @@
     "@unovis/vue": "^1.6.4",
     "@vueuse/core": "^14.2.1",
     "@vueuse/nuxt": "^14.2.1",
+    "@xterm/addon-fit": "^0.11.0",
+    "@xterm/addon-search": "^0.16.0",
+    "@xterm/addon-web-links": "^0.12.0",
+    "@xterm/xterm": "^6.0.0",
     "date-fns": "^4.1.0",
     "marked": "^15.0.0",
     "nuxt": "^4.4.2",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "arkaos",
-  "version": "3.67.0",
+  "version": "3.68.0",
   "description": "The Operating System for AI Agent Teams",
   "type": "module",
   "bin": {

package/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "arkaos-core"
-version = "3.67.0"
+version = "3.68.0"
 description = "Core engine for ArkaOS — The Operating System for AI Agent Teams"
 readme = "README.md"
 license = {text = "MIT"}