Terminal: a shell on the agent chat's computer, before the first message too

The Terminal panel opens a shell on the device an agent chat works on, in its
folder: for a new agent chat as soon as the device and folder are chosen (the
server's /api/v2/devices/{device}/terminal/ws?directory=, which the chat's first
message takes over -- the same socket carries on), and for an open agent chat
from the header (/api/v2/chats/{chat}/terminal/ws, the web page's shell).
Offered where GET /devices says the device opens a terminal.

The socket is Rust's (src-tauri/src/terminal.rs, tungstenite on the rustls
ureq already brings): the bearer token goes in the handshake and never reaches
the page, which gets the frames as `terminal` events and sends keys, sizes and
close through commands. 4401 signs the app out as a 401 does.

xterm and its fit addon are the server's vendored build, pinned through
fetch-vendor.sh like CodeMirror and loaded on the first open. Send to chat puts
the selection, the last marked command and its output, or the screen into the
composer, never sent. The terminal and the activity panel take turns in the
panel column. Continue in a terminal stays in the chat's menu.

tests/ui: seven B3 cases with a mocked socket, at 1280 and 390 px.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

ui/js/main.js

@@ -12,7 +12,8 @@ import { renderSettings, initSettings, scrollToSection } from "./settings.js"
 import { initViewer, onViewer, closeViewer } from "./viewer.js"
 import { initExplorer, showLocal, showFilesTab } from "./explorer.js"
 import { initList, refreshList, markCurrent } from "./list.js"
-import { initChat, openChat, newChat, closeChat, openChatId, chatMenu, statusChanged, draftKind, onThisComputer, modelsChanged } from "./chat.js"
+import { initChat, openChat, newChat, closeChat, openChatId, chatMenu, statusChanged, draftKind, onThisComputer, modelsChanged, intoComposer } from "./chat.js"
+import { initTerminal, showTerminal, terminalOpen, terminalAvailable, toggleTerminal, terminalThemeChanged } from "./terminal.js"
 import { initAttach, allowAttach } from "./attach.js"
 import { initPalette, openPalette } from "./palette.js"
 import { initActivity, showPanel, togglePanel, panelOpen } from "./activity.js"
@@ -67,6 +68,7 @@ function applyTheme(name) {
   const root = document.documentElement
   root.dataset.theme = name
   root.dataset.base = name
+  terminalThemeChanged()
 }
 
 // --- Views ------------------------------------------------------------------------------------
@@ -162,7 +164,10 @@ function showPage(name) {
   $("page-scheduled").hidden = name !== "scheduled"
   $("settings").hidden = name !== "settings"
   for (const b of document.querySelectorAll(".navrow[data-view]")) b.setAttribute("aria-current", String(b.dataset.view === name))
-  if (name !== "chat") showPanel(false)
+  if (name !== "chat") {
+    showPanel(false)
+    showTerminal(false)
+  }
   if (narrow()) sideOpen(false)
 }
 
@@ -221,6 +226,7 @@ function commands() {
     { label: t("Settings"), run: () => showSettings(true) },
   ]
   if (openChatId()) out.push({ label: panelOpen() ? t("Close the activity panel") : t("Open the activity panel"), run: togglePanel })
+  if (terminalAvailable()) out.push({ label: terminalOpen() ? t("Close terminal") : t("Terminal"), run: toggleTerminal })
   if (status?.linked) out.push({ label: status.agent_wanted ? t("Stop the agent") : t("Start the agent"), run: () => invoke("set_agent", { on: !status.agent_wanted }) })
   out.push(
     { label: status?.linked ? t("Link again") : t("Link this computer"), run: link },
@@ -265,6 +271,7 @@ async function boot() {
   initChat({
     status: () => status,
     thisDevices,
+    devices: () => devices,
     models: () => models,
     me: () => me,
     changed: () => refreshList(),
@@ -289,9 +296,18 @@ async function boot() {
   onViewer((on) => {
     $("shell").dataset.viewer = String(on)
   })
+  // One panel column: the activity panel and the terminal take turns in it (the shell stays open).
+  initTerminal({
+    onLayout: (on) => {
+      $("shell").dataset.terminal = String(on)
+      if (on && panelOpen()) showPanel(false)
+    },
+    composer: intoComposer,
+  })
   initActivity({
     onLayout: (on) => {
       $("shell").dataset.activity = String(on)
+      if (on && terminalOpen()) showTerminal(false)
     },
     here: onThisComputer,
     // The conversation as it now stands: the summary's divider, read again, if it is still open.
@@ -353,7 +369,7 @@ async function boot() {
     renderBar(status)
     route()
     // The agent came up or went: which devices are linked changes with it.
-    if (started && before && before.agent.state !== status.agent.state) loadDevices().then(refreshList)
+    if (started && before && before.agent.state !== status.agent.state) loadDevices().then(() => (refreshList(), statusChanged()))
   })
   listen("open-settings", () => {
     if (view === "app") showSettings(true)