arkaos 3.70.9 → 3.71.0

package/dashboard/app/composables/useTerminalDock.ts

@@ -0,0 +1,88 @@
+// v3.71.0 — app-wide terminal dock UI state. Module-level singleton so
+// open/maximized/height survive route navigation, and persisted to
+// localStorage so the dock restores "as you left it" across a reload.
+// The dock itself (TerminalDock.vue) is mounted once in the default
+// layout.
+
+const STATE_KEY = 'arka-terminal-dock'
+
+interface DockState {
+  open: boolean
+  maximized: boolean
+  height: number
+}
+
+function loadState(): DockState {
+  const fallback: DockState = { open: false, maximized: false, height: 45 }
+  if (typeof localStorage === 'undefined') return fallback
+  try {
+    const s = JSON.parse(localStorage.getItem(STATE_KEY) || '{}')
+    return {
+      open: Boolean(s.open),
+      maximized: Boolean(s.maximized),
+      height: s.height >= 20 && s.height <= 95 ? s.height : 45
+    }
+  } catch {
+    return fallback
+  }
+}
+
+const _initial = loadState()
+const isOpen = ref(_initial.open)
+const isMaximized = ref(_initial.maximized)
+const heightVh = ref(_initial.height)
+
+function save() {
+  if (typeof localStorage === 'undefined') return
+  try {
+    localStorage.setItem(
+      STATE_KEY,
+      JSON.stringify({
+        open: isOpen.value,
+        maximized: isMaximized.value,
+        height: heightVh.value
+      })
+    )
+  } catch {
+    // quota / private mode
+  }
+}
+
+export function useTerminalDock() {
+  function open(opts?: { maximized?: boolean }) {
+    isOpen.value = true
+    if (opts?.maximized) isMaximized.value = true
+    save()
+  }
+
+  function close() {
+    isOpen.value = false
+    save()
+  }
+
+  function toggle() {
+    if (isOpen.value) close()
+    else open()
+  }
+
+  function toggleMaximize() {
+    isMaximized.value = !isMaximized.value
+    save()
+  }
+
+  function setHeight(vh: number) {
+    heightVh.value = Math.min(95, Math.max(20, Math.round(vh)))
+    save()
+  }
+
+  return {
+    isOpen,
+    isMaximized,
+    heightVh,
+    open,
+    close,
+    toggle,
+    toggleMaximize,
+    setHeight
+  }
+}

package/dashboard/app/composables/useTerminalSession.ts

@@ -1,4 +1,7 @@
 // PR99b v3.68.0 — single PTY session lifecycle.
+// v3.71.0 — added attach(): reconnect to an EXISTING backend session
+// (no POST). The WS connect triggers the server-side scrollback replay,
+// so a client reattaching after a browser reload restores its view.
 //
 // Encapsulates the REST + WebSocket handshake against /api/terminal/*.
 // The composable owns no DOM and no xterm instance — it just produces
@@ -20,6 +23,7 @@ export interface TerminalSessionHandle {
   status: Ref<'idle' | 'connecting' | 'open' | 'closed' | 'error'>
   error: Ref<string | null>
   open: () => Promise<void>
+  attach: (sessionId: string) => Promise<void>
   sendInput: (data: string) => void
   sendResize: (cols: number, rows: number) => void
   close: () => Promise<void>
@@ -27,9 +31,9 @@ export interface TerminalSessionHandle {
 }
 
 export function useTerminalSession(
-  apiBaseOverride?: string,
+  apiBaseOverride?: string
 ): TerminalSessionHandle {
-  // PR99c v3.69.0 — apiBaseOverride lets useTerminalTabs construct
+  // PR99c v3.69.0 — apiBaseOverride lets the tab store construct
   // sessions from user-event handlers without re-entering Nuxt's
   // composable context.
   const apiBase = apiBaseOverride ?? useApi().apiBase
@@ -49,7 +53,7 @@ export function useTerminalSession(
     const r = await fetch(`${apiBase}/api/terminal/sessions`, {
       method: 'POST',
       headers: { 'content-type': 'application/json' },
-      body: JSON.stringify({ cols: 120, rows: 32 }),
+      body: JSON.stringify({ cols: 120, rows: 32 })
     })
     if (!r.ok) {
       const body = await r.text()
@@ -58,6 +62,40 @@ export function useTerminalSession(
     return await r.json()
   }
 
+  async function fetchToken(): Promise<string> {
+    const r = await fetch(`${apiBase}/api/terminal/token`)
+    if (!r.ok) throw new Error(`token fetch failed: ${r.status}`)
+    const body = await r.json()
+    return String(body.token || '')
+  }
+
+  function connect(wsPath: string, token: string) {
+    ws = new WebSocket(wsUrl(wsPath, 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()
+      }
+    }
+  }
+
   async function open() {
     if (status.value === 'open' || status.value === 'connecting') return
     status.value = 'connecting'
@@ -65,30 +103,30 @@ export function useTerminalSession(
     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()
-        }
+      connect(m.ws_path, m.token)
+    } catch (e) {
+      status.value = 'error'
+      error.value = e instanceof Error ? e.message : String(e)
+    }
+  }
+
+  async function attach(sessionId: string) {
+    if (status.value === 'open' || status.value === 'connecting') return
+    status.value = 'connecting'
+    error.value = null
+    try {
+      const token = await fetchToken()
+      const wsPath = `/ws/terminal/${sessionId}`
+      meta.value = {
+        session_id: sessionId,
+        shell: '',
+        cwd: '',
+        token,
+        ws_path: wsPath,
+        max_sessions: 0,
+        active_count: 0
       }
+      connect(wsPath, token)
     } catch (e) {
       status.value = 'error'
       error.value = e instanceof Error ? e.message : String(e)
@@ -108,14 +146,14 @@ export function useTerminalSession(
   async function close() {
     try {
       ws?.close(1000, 'client close')
-    } catch (_e) {
+    } catch {
       // ignore
     }
     const id = meta.value?.session_id
     if (id) {
       try {
         await fetch(`${apiBase}/api/terminal/sessions/${id}`, { method: 'DELETE' })
-      } catch (_e) {
+      } catch {
         // ignore — best-effort cleanup; backend reaper will catch it
       }
     }
@@ -135,9 +173,10 @@ export function useTerminalSession(
     status,
     error,
     open,
+    attach,
     sendInput,
     sendResize,
     close,
-    onOutput,
+    onOutput
   }
 }

package/dashboard/app/composables/useTerminalTabs.ts

@@ -1,88 +1,134 @@
-// PR99c v3.69.0 — multi-session tab manager for /terminal.
+// PR99c v3.69.0 — multi-session tab manager for the terminal.
+// v3.71.0 — state is now a MODULE-LEVEL singleton (not page-scoped), so
+// tabs + their live PTY sessions survive route navigation. The terminal
+// UI lives in the app-wide dock (TerminalDock.vue), mounted once in the
+// default layout outside <NuxtPage>, so navigating never unmounts it.
+// On a full browser reload the singleton is gone, so reattachOnLoad()
+// reconciles persisted session IDs against the live backend sessions and
+// reconnects (the WS connect replays scrollback — see PR-T1 v3.71.0).
 //
-// 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).
+// Live session handles (which carry refs) are kept in a NON-reactive Map,
+// separate from the reactive `tabs` metadata, so Vue never deep-unwraps
+// their inner refs. SSR-safe: the dashboard runs with ssr:false.
+
+import {
+  useTerminalSession,
+  type TerminalSessionHandle
+} from '~/composables/useTerminalSession'
 
 export interface TerminalTab {
   id: string
   title: string
-  session: ReturnType<typeof useTerminalSession>
   createdAt: number
   hasActivity: boolean
 }
 
-const STORAGE_KEY = 'arka-terminal-tab-titles'
+const STORAGE_KEY = 'arka-terminal-tabs'
 const MAX_TABS = 8
 
-interface PersistedTitle {
+interface PersistedTab {
   id: string
   title: string
+  sessionId?: string
 }
 
-function loadPersistedTitles(): Record<string, string> {
-  if (typeof localStorage === 'undefined') return {}
+// ─── Module-level singleton state (survives navigation) ──────────────────
+const tabs = ref<TerminalTab[]>([])
+const activeId = ref<string | null>(null)
+const sessions = new Map<string, TerminalSessionHandle>()
+const stopWatchers = new Map<string, () => void>()
+let _apiBase = ''
+let _reattached = false
+
+function loadPersisted(): PersistedTab[] {
+  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]))
+    const parsed = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
+    return Array.isArray(parsed) ? parsed : []
   } catch {
-    return {}
+    return []
   }
 }
 
-function persistTitles(tabs: TerminalTab[]) {
+function persist() {
   if (typeof localStorage === 'undefined') return
   try {
-    const payload: PersistedTitle[] = tabs.map(t => ({ id: t.id, title: t.title }))
+    const payload: PersistedTab[] = tabs.value.map(t => ({
+      id: t.id,
+      title: t.title,
+      sessionId: sessions.get(t.id)?.meta.value?.session_id
+    }))
     localStorage.setItem(STORAGE_KEY, JSON.stringify(payload))
   } catch {
     // quota / private mode — swallow
   }
 }
 
+// Light the activity dot on an inactive tab when its session emits output.
+function markActivity(id: string) {
+  if (activeId.value === id) return
+  const t = tabs.value.find(t => t.id === id)
+  if (t) t.hasActivity = true
+}
+
+// Register a handle: persist again once its backend session_id lands (it
+// arrives asynchronously after the WS connects), and flag background tabs
+// that produce output. Both subscriptions are torn down in unregister().
+function register(id: string, handle: TerminalSessionHandle) {
+  sessions.set(id, handle)
+  const stopWatch = watch(() => handle.meta.value?.session_id, () => persist())
+  const stopOutput = handle.onOutput(() => markActivity(id))
+  stopWatchers.set(id, () => {
+    stopWatch()
+    stopOutput()
+  })
+}
+
+function unregister(id: string) {
+  stopWatchers.get(id)?.()
+  stopWatchers.delete(id)
+  sessions.delete(id)
+}
+
 export function useTerminalTabs() {
-  const { apiBase } = useApi()
-  const tabs = ref<TerminalTab[]>([])
-  const activeId = ref<string | null>(null)
+  if (!_apiBase) _apiBase = useApi().apiBase
   const capReached = computed(() => tabs.value.length >= MAX_TABS)
 
   function makeId(): string {
     return Math.random().toString(36).slice(2, 10)
   }
 
+  function sessionFor(id: string): TerminalSessionHandle | undefined {
+    return sessions.get(id)
+  }
+
   function newTab(): TerminalTab | null {
     if (tabs.value.length >= MAX_TABS) return null
     const id = makeId()
-    const persistedTitles = loadPersistedTitles()
-    const titleFromStorage = persistedTitles[id]
+    register(id, useTerminalSession(_apiBase))
     const tab: TerminalTab = {
       id,
-      title: titleFromStorage || `Session ${tabs.value.length + 1}`,
-      session: useTerminalSession(apiBase),
+      title: `Session ${tabs.value.length + 1}`,
       createdAt: Date.now(),
-      hasActivity: false,
+      hasActivity: false
     }
     tabs.value.push(tab)
     activeId.value = id
-    persistTitles(tabs.value)
+    persist()
     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()
+    await sessions.get(id)?.close()
+    unregister(id)
     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)
+    persist()
   }
 
   function switchTab(id: string) {
@@ -96,35 +142,64 @@ export function useTerminalTabs() {
     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
+    persist()
   }
 
-  async function closeAll() {
-    await Promise.all(tabs.value.map(t => t.session.close()))
-    tabs.value = []
-    activeId.value = null
-    persistTitles([])
+  // After a full browser reload the singleton is empty. Reconcile the
+  // persisted session IDs against the live backend sessions and reattach
+  // the survivors; the WS connect replays their scrollback. Dead IDs are
+  // dropped. Runs at most once per page load.
+  async function reattachOnLoad() {
+    if (_reattached) return
+    _reattached = true
+    const persisted = loadPersisted()
+    if (persisted.length === 0) return
+    const alive = new Set<string>()
+    try {
+      const r = await fetch(`${_apiBase}/api/terminal/sessions`)
+      if (!r.ok) return
+      const data = await r.json()
+      for (const s of data.sessions || []) alive.add(s.session_id)
+    } catch {
+      return
+    }
+    const restore = persisted
+      .filter(p => p.sessionId && alive.has(p.sessionId))
+      .slice(0, MAX_TABS)
+    for (const p of restore) {
+      const handle = useTerminalSession(_apiBase)
+      register(p.id, handle)
+      tabs.value.push({
+        id: p.id,
+        title: p.title,
+        createdAt: Date.now(),
+        hasActivity: false
+      })
+      // Sets status to 'connecting' synchronously, so Terminal.vue's
+      // auto-open() no-ops and we reuse the live PTY instead of spawning.
+      void handle.attach(p.sessionId as string)
+    }
+    if (tabs.value.length > 0 && !activeId.value) {
+      activeId.value = tabs.value[0]!.id
+    }
+    persist()
   }
 
-  const activeTab = computed(() => tabs.value.find(t => t.id === activeId.value) ?? null)
+  const activeSession = computed(() =>
+    activeId.value ? sessions.get(activeId.value) ?? null : null
+  )
 
   return {
     tabs,
     activeId,
-    activeTab,
+    activeSession,
     capReached,
     maxTabs: MAX_TABS,
+    sessionFor,
     newTab,
     closeTab,
     switchTab,
     renameTab,
-    markActivity,
-    closeAll,
+    reattachOnLoad
   }
 }

package/dashboard/app/layouts/default.vue

@@ -176,5 +176,11 @@ const links = [[{
     <KeyboardShortcutsHelp />
     <GlobalSearch />
     <OnboardingTour />
+    <!-- v3.71.0 — app-wide terminal dock. Mounted once here (outside
+         <NuxtPage>) so PTY sessions survive route navigation. Client-only
+         because xterm.js + WebSocket have no SSR. -->
+    <ClientOnly>
+      <TerminalDock />
+    </ClientOnly>
   </UDashboardGroup>
 </template>