arkaos 3.67.0 → 3.69.0

package/VERSION

@@ -1 +1 @@
-3.67.0
+3.69.0

package/dashboard/app/components/Terminal.vue

@@ -0,0 +1,174 @@
+<script setup lang="ts">
+// PR99b v3.68.0 — xterm.js terminal mount.
+// PR99c v3.69.0 — accepts an external session via prop so the tab
+// manager in /terminal can mount N instances, each bound to its own
+// PTY session.
+
+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'
+
+interface Props {
+  session?: ReturnType<typeof useTerminalSession>
+  onInputLine?: (line: string) => void
+}
+const props = defineProps<Props>()
+
+const container = ref<HTMLDivElement | null>(null)
+const session = props.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)
+  })
+
+  // PR99c v3.69.0 — line-buffer for command history without server-
+  // side audit. Captures only printable chars up to Enter; ignores
+  // arrow keys, ctrl combos, escape sequences.
+  let lineBuf = ''
+  t.onData((data) => {
+    for (const ch of data) {
+      if (ch === '\r' || ch === '\n') {
+        const cmd = lineBuf.trim()
+        if (cmd) props.onInputLine?.(cmd)
+        lineBuf = ''
+      } else if (ch === '\x7f' || ch === '\b') {
+        lineBuf = lineBuf.slice(0, -1)
+      } else if (ch >= ' ' && ch < '\x7f') {
+        lineBuf += ch
+      }
+    }
+    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()
+  // PR99c: only close the session if we created it. When the parent
+  // owns the session (props.session), parent is responsible for close.
+  if (!props.session) {
+    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,143 @@
+// 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(
+  apiBaseOverride?: string,
+): TerminalSessionHandle {
+  // PR99c v3.69.0 — apiBaseOverride lets useTerminalTabs construct
+  // sessions from user-event handlers without re-entering Nuxt's
+  // composable context.
+  const apiBase = apiBaseOverride ?? useApi().apiBase
+  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/composables/useTerminalTabs.ts

@@ -0,0 +1,130 @@
+// PR99c v3.69.0 — multi-session tab manager for /terminal.
+//
+// Owns an array of `useTerminalSession()` handles plus the active tab
+// id. Persists tab titles (not PTYs — those are re-created fresh on
+// reload) to localStorage. Enforces an 8-tab cap (matching the backend
+// default).
+
+export interface TerminalTab {
+  id: string
+  title: string
+  session: ReturnType<typeof useTerminalSession>
+  createdAt: number
+  hasActivity: boolean
+}
+
+const STORAGE_KEY = 'arka-terminal-tab-titles'
+const MAX_TABS = 8
+
+interface PersistedTitle {
+  id: string
+  title: string
+}
+
+function loadPersistedTitles(): Record<string, string> {
+  if (typeof localStorage === 'undefined') return {}
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY)
+    if (!raw) return {}
+    const parsed = JSON.parse(raw) as PersistedTitle[]
+    return Object.fromEntries(parsed.map(p => [p.id, p.title]))
+  } catch {
+    return {}
+  }
+}
+
+function persistTitles(tabs: TerminalTab[]) {
+  if (typeof localStorage === 'undefined') return
+  try {
+    const payload: PersistedTitle[] = tabs.map(t => ({ id: t.id, title: t.title }))
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(payload))
+  } catch {
+    // quota / private mode — swallow
+  }
+}
+
+export function useTerminalTabs() {
+  const { apiBase } = useApi()
+  const tabs = ref<TerminalTab[]>([])
+  const activeId = ref<string | null>(null)
+  const capReached = computed(() => tabs.value.length >= MAX_TABS)
+
+  function makeId(): string {
+    return Math.random().toString(36).slice(2, 10)
+  }
+
+  function newTab(): TerminalTab | null {
+    if (tabs.value.length >= MAX_TABS) return null
+    const id = makeId()
+    const persistedTitles = loadPersistedTitles()
+    const titleFromStorage = persistedTitles[id]
+    const tab: TerminalTab = {
+      id,
+      title: titleFromStorage || `Session ${tabs.value.length + 1}`,
+      session: useTerminalSession(apiBase),
+      createdAt: Date.now(),
+      hasActivity: false,
+    }
+    tabs.value.push(tab)
+    activeId.value = id
+    persistTitles(tabs.value)
+    return tab
+  }
+
+  async function closeTab(id: string) {
+    const idx = tabs.value.findIndex(t => t.id === id)
+    if (idx < 0) return
+    const tab = tabs.value[idx]
+    if (!tab) return
+    await tab.session.close()
+    tabs.value.splice(idx, 1)
+    if (activeId.value === id) {
+      const next = tabs.value[Math.min(idx, tabs.value.length - 1)]
+      activeId.value = next ? next.id : null
+    }
+    persistTitles(tabs.value)
+  }
+
+  function switchTab(id: string) {
+    const t = tabs.value.find(t => t.id === id)
+    if (!t) return
+    activeId.value = id
+    t.hasActivity = false
+  }
+
+  function renameTab(id: string, title: string) {
+    const t = tabs.value.find(t => t.id === id)
+    if (!t) return
+    t.title = title.trim() || t.title
+    persistTitles(tabs.value)
+  }
+
+  function markActivity(id: string) {
+    if (activeId.value === id) return
+    const t = tabs.value.find(t => t.id === id)
+    if (t) t.hasActivity = true
+  }
+
+  async function closeAll() {
+    await Promise.all(tabs.value.map(t => t.session.close()))
+    tabs.value = []
+    activeId.value = null
+    persistTitles([])
+  }
+
+  const activeTab = computed(() => tabs.value.find(t => t.id === activeId.value) ?? null)
+
+  return {
+    tabs,
+    activeId,
+    activeTab,
+    capReached,
+    maxTabs: MAX_TABS,
+    newTab,
+    closeTab,
+    switchTab,
+    renameTab,
+    markActivity,
+    closeAll,
+  }
+}

package/dashboard/app/pages/terminal.vue

@@ -1,278 +1,245 @@
 <script setup lang="ts">
-// PR95a v3.51.0 — Dashboard terminal (allowlist mode).
+// PR99b v3.68.0 — Real-shell terminal (single session).
+// PR99c v3.69.0 — Multi-session tabs + browser-local command history.
 //
-// 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.
+// Each tab owns its own PTY session. PTYs are NOT persisted across
+// reloads (they're per-process); only tab titles are. The 8-tab cap
+// matches the backend default.
+
+definePageMeta({ layout: 'default' })
+
+const {
+  tabs,
+  activeId,
+  activeTab,
+  capReached,
+  maxTabs,
+  newTab,
+  closeTab,
+  switchTab,
+  renameTab,
+} = useTerminalTabs()
+
+const HISTORY_KEY = 'arka-terminal-command-history'
+const HISTORY_MAX = 500
 
-interface CommandArg {
-  name: string
-  label: string
-  choices: string[]
-  default: string
+interface HistoryEntry {
+  ts: number
+  cmd: string
 }
 
-interface CommandEntry {
-  id: string
-  label: string
-  description: string
-  args?: CommandArg[]
+function loadHistory(): HistoryEntry[] {
+  if (typeof localStorage === 'undefined') return []
+  try {
+    const raw = localStorage.getItem(HISTORY_KEY)
+    return raw ? (JSON.parse(raw) as HistoryEntry[]) : []
+  } catch {
+    return []
+  }
 }
 
-interface ExecResult {
-  stdout: string
-  stderr: string
-  exit_code: number
-  duration_ms: number
-  command: string
-}
+const history = ref<HistoryEntry[]>(loadHistory())
 
-interface HistoryEntry {
-  id: string
-  label: string
-  result: ExecResult
-  ts: string
+function recordCommand(cmd: string) {
+  const trimmed = cmd.trim()
+  if (!trimmed || trimmed.length < 2) return
+  history.value.unshift({ ts: Date.now(), cmd: trimmed })
+  if (history.value.length > HISTORY_MAX) {
+    history.value = history.value.slice(0, HISTORY_MAX)
+  }
+  try {
+    localStorage.setItem(HISTORY_KEY, JSON.stringify(history.value))
+  } catch {
+    // quota — silently truncate further
+    history.value = history.value.slice(0, 200)
+  }
 }
 
-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 editingTabId = ref<string | null>(null)
+const renameDraft = ref('')
 
-const running = ref<string | null>(null)
-const history = ref<HistoryEntry[]>([])
-
-// 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>>>({})
+function startRename(tabId: string, currentTitle: string) {
+  editingTabId.value = tabId
+  renameDraft.value = currentTitle
+}
 
-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
-    }
+function commitRename() {
+  if (editingTabId.value) {
+    renameTab(editingTabId.value, renameDraft.value)
   }
+  editingTabId.value = null
 }
 
-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) {
+const toast = useToast()
+
+function tryNewTab() {
+  if (capReached.value) {
     toast.add({
-      title: 'Run failed',
-      description: err instanceof Error ? err.message : 'unknown error',
-      color: 'error',
+      title: 'Maximum sessions reached',
+      description: `You can have up to ${maxTabs} sessions open at once. Close one to open a new one.`,
+      color: 'warning',
+      icon: 'i-lucide-alert-triangle',
     })
-  } finally {
-    running.value = null
+    return
   }
+  newTab()
 }
 
-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' })
+// Keyboard shortcuts.
+defineShortcuts({
+  meta_t: { handler: tryNewTab, usingInput: false },
+  meta_w: {
+    handler: () => {
+      if (activeId.value) closeTab(activeId.value)
+    },
+    usingInput: false,
+  },
+  meta_1: { handler: () => switchByIndex(0), usingInput: false },
+  meta_2: { handler: () => switchByIndex(1), usingInput: false },
+  meta_3: { handler: () => switchByIndex(2), usingInput: false },
+  meta_4: { handler: () => switchByIndex(3), usingInput: false },
+  meta_5: { handler: () => switchByIndex(4), usingInput: false },
+  meta_6: { handler: () => switchByIndex(5), usingInput: false },
+  meta_7: { handler: () => switchByIndex(6), usingInput: false },
+  meta_8: { handler: () => switchByIndex(7), usingInput: false },
+})
+
+function switchByIndex(idx: number) {
+  const t = tabs.value[idx]
+  if (t) switchTab(t.id)
 }
 
-function clearHistory() {
-  history.value = []
-}
+// First-visit: open one tab automatically.
+onMounted(() => {
+  if (tabs.value.length === 0) newTab()
+})
 
-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`
-}
+onBeforeUnmount(async () => {
+  // Don't proactively close tabs — operator may navigate back. Backend
+  // reaper will GC after the idle timeout (30 min).
+})
+
+const showHistory = 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" />
+  <div class="flex flex-col gap-3 h-full">
+    <header class="flex items-center justify-between gap-3 flex-wrap">
+      <div>
+        <h1 class="text-2xl font-semibold">Terminal</h1>
+        <p class="text-sm text-muted">
+          Real PTY shell — run claude, codex, git, anything. ⌘T new ·
+          ⌘W close · ⌘1–8 switch.
+        </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="showHistory ? 'i-lucide-x' : 'i-lucide-history'"
+          @click="showHistory = !showHistory"
+        >
+          History ({{ history.length }})
+        </UButton>
+      </div>
+    </header>
+
+    <div class="flex items-center gap-1 border-b border-default pb-2 overflow-x-auto">
+      <div
+        v-for="(tab, idx) in tabs"
+        :key="tab.id"
+        :class="[
+          'group flex items-center gap-1 px-3 py-1.5 rounded-t-md cursor-pointer text-sm shrink-0 border-b-2 transition-colors',
+          activeId === tab.id
+            ? 'bg-elevated/60 border-primary text-default'
+            : 'border-transparent text-muted hover:text-default hover:bg-elevated/30',
+        ]"
+        @click="switchTab(tab.id)"
+        @dblclick="startRename(tab.id, tab.title)"
+      >
+        <span class="text-xs text-muted">{{ idx + 1 }}</span>
+        <UInput
+          v-if="editingTabId === tab.id"
+          v-model="renameDraft"
+          size="xs"
+          autofocus
+          @keydown.enter="commitRename"
+          @keydown.esc="editingTabId = null"
+          @blur="commitRename"
+        />
+        <span v-else>{{ tab.title }}</span>
+        <UIcon
+          v-if="tab.hasActivity && activeId !== tab.id"
+          name="i-lucide-circle"
+          class="size-2 text-amber-400 fill-current"
+        />
+        <button
+          class="ml-1 size-4 grid place-items-center rounded text-muted hover:bg-default/50 hover:text-default opacity-0 group-hover:opacity-100"
+          @click.stop="closeTab(tab.id)"
+        >
+          <UIcon name="i-lucide-x" class="size-3" />
+        </button>
+      </div>
+      <UButton
+        size="xs"
+        variant="ghost"
+        icon="i-lucide-plus"
+        :disabled="capReached"
+        :title="capReached ? `Max ${maxTabs} sessions` : 'New session'"
+        @click="tryNewTab"
+      >
+        New
+      </UButton>
+    </div>
+
+    <div class="flex-1 min-h-[480px] flex gap-3">
+      <div class="flex-1 relative">
+        <template v-for="tab in tabs" :key="tab.id">
+          <Terminal
+            v-show="activeId === tab.id"
+            :session="tab.session"
+            :on-input-line="recordCommand"
+            class="absolute inset-0"
+          />
         </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
+          v-if="tabs.length === 0"
+          class="absolute inset-0 grid place-items-center text-muted text-sm"
+        >
+          No active sessions. Press ⌘T or click "+ New" to open one.
+        </div>
+      </div>
+      <aside
+        v-if="showHistory"
+        class="w-72 shrink-0 rounded-lg border border-default bg-elevated/10 overflow-hidden flex flex-col"
       >
-        <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 class="px-3 py-2 border-b border-default text-xs uppercase tracking-wide text-muted">
+          Command history
+        </div>
+        <div class="flex-1 overflow-auto text-xs font-mono">
+          <button
+            v-for="(entry, i) in history"
+            :key="i"
+            class="w-full text-left px-3 py-1.5 hover:bg-default/40 truncate"
+            :title="entry.cmd"
+            @click="activeTab?.session.sendInput(entry.cmd)"
+          >
+            {{ entry.cmd }}
+          </button>
+          <div v-if="history.length === 0" class="px-3 py-4 text-muted text-center">
+            No commands yet
+          </div>
         </div>
-      </DashboardState>
-    </template>
-  </UDashboardPanel>
+      </aside>
+    </div>
+
+    <footer class="text-xs text-muted">
+      Sessions live on the backend until you close them or 30 min idle.
+      History stays in this browser only.
+    </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.69.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.69.0"
 description = "Core engine for ArkaOS — The Operating System for AI Agent Teams"
 readme = "README.md"
 license = {text = "MIT"}