@phenx-inc/ctlsurf 0.12.0 → 0.13.1

package/out/renderer/assets/{javascript-C8T_SdLC.js → javascript-XyDWi6dC.js}

@@ -1,5 +1,5 @@
-import { conf as conf$1, language as language$1 } from "./typescript-HhQUr1Rb.js";
-import "./index-kkG56aKv.js";
+import { conf as conf$1, language as language$1 } from "./typescript-CB71AtAT.js";
+import "./index-MqgBcJzy.js";
 const conf = conf$1;
 const language = {
   // Set defaultToken to invalid to see what you do not tokenize yet

package/out/renderer/assets/{jsonMode-D1zR4VVU.js → jsonMode-DZT5gBVW.js}

@@ -1,6 +1,6 @@
-import { c as createWebWorker, l as languages, e as editor } from "./index-kkG56aKv.js";
-import { f as DocumentFormattingEditProvider, g as DocumentRangeFormattingEditProvider, C as CompletionAdapter, H as HoverAdapter, b as DocumentSymbolAdapter, d as DocumentColorAdapter, F as FoldingRangeAdapter, S as SelectionRangeAdapter, e as DiagnosticsAdapter } from "./lspLanguageFeatures-CXGfrtzl.js";
-import { a, D, h, R, c, i, j, t, k } from "./lspLanguageFeatures-CXGfrtzl.js";
+import { c as createWebWorker, l as languages, e as editor } from "./index-MqgBcJzy.js";
+import { f as DocumentFormattingEditProvider, g as DocumentRangeFormattingEditProvider, C as CompletionAdapter, H as HoverAdapter, b as DocumentSymbolAdapter, d as DocumentColorAdapter, F as FoldingRangeAdapter, S as SelectionRangeAdapter, e as DiagnosticsAdapter } from "./lspLanguageFeatures-BYkg2Yc-.js";
+import { a, D, h, R, c, i, j, t, k } from "./lspLanguageFeatures-BYkg2Yc-.js";
 const STOP_WHEN_IDLE_FOR = 2 * 60 * 1e3;
 class WorkerManager {
   constructor(defaults) {

package/out/renderer/assets/{liquid-COSMe9Uf.js → liquid-BuajCNJ9.js}

@@ -1,4 +1,4 @@
-import { l as languages } from "./index-kkG56aKv.js";
+import { l as languages } from "./index-MqgBcJzy.js";
 const EMPTY_ELEMENTS = [
   "area",
   "base",

package/out/renderer/assets/{lspLanguageFeatures-CXGfrtzl.js → lspLanguageFeatures-BYkg2Yc-.js}

@@ -1,4 +1,4 @@
-import { R as Range$1, l as languages, e as editor, U as Uri, M as MarkerSeverity } from "./index-kkG56aKv.js";
+import { R as Range$1, l as languages, e as editor, U as Uri, M as MarkerSeverity } from "./index-MqgBcJzy.js";
 var DocumentUri;
 (function(DocumentUri2) {
   function is(value) {

package/out/renderer/assets/{mdx-RfS44T-L.js → mdx-D0Qx2GMS.js}

@@ -1,4 +1,4 @@
-import { l as languages } from "./index-kkG56aKv.js";
+import { l as languages } from "./index-MqgBcJzy.js";
 const conf = {
   comments: {
     blockComment: ["{/*", "*/}"]

package/out/renderer/assets/{python-DFSWKHUu.js → python-ChncNy6S.js}

@@ -1,4 +1,4 @@
-import { l as languages } from "./index-kkG56aKv.js";
+import { l as languages } from "./index-MqgBcJzy.js";
 const conf = {
   comments: {
     lineComment: "#",

package/out/renderer/assets/{razor-DtH2_uvo.js → razor-C6MUtfaS.js}

@@ -1,4 +1,4 @@
-import { l as languages } from "./index-kkG56aKv.js";
+import { l as languages } from "./index-MqgBcJzy.js";
 const EMPTY_ELEMENTS = [
   "area",
   "base",

package/out/renderer/assets/{tsMode-BYIQ-S9Z.js → tsMode-C2aMdzdU.js}

@@ -1,4 +1,4 @@
-import { c as createWebWorker, e as editor, U as Uri, a as MarkerTag, M as MarkerSeverity, l as languages, t as typescriptDefaults, R as Range } from "./index-kkG56aKv.js";
+import { c as createWebWorker, e as editor, U as Uri, a as MarkerTag, M as MarkerSeverity, l as languages, t as typescriptDefaults, R as Range } from "./index-MqgBcJzy.js";
 class WorkerManager {
   constructor(_modeId, _defaults) {
     this._modeId = _modeId;

package/out/renderer/assets/{typescript-HhQUr1Rb.js → typescript-CB71AtAT.js}

@@ -1,4 +1,4 @@
-import { l as languages } from "./index-kkG56aKv.js";
+import { l as languages } from "./index-MqgBcJzy.js";
 const conf = {
   wordPattern: /(-?\d*\.\d\w*)|([^\`\~\!\@\#\%\^\&\*\(\)\-\=\+\[\{\]\}\\\|\;\:\'\"\,\.\<\>\/\?\s]+)/g,
   comments: {

package/out/renderer/assets/{xml-KuhgdKfD.js → xml-tHS1Ec9w.js}

@@ -1,4 +1,4 @@
-import { l as languages } from "./index-kkG56aKv.js";
+import { l as languages } from "./index-MqgBcJzy.js";
 const conf = {
   comments: {
     blockComment: ["<!--", "-->"]

package/out/renderer/assets/{yaml-W_kzCFH7.js → yaml-CZcp5ueF.js}

@@ -1,4 +1,4 @@
-import { l as languages } from "./index-kkG56aKv.js";
+import { l as languages } from "./index-MqgBcJzy.js";
 const conf = {
   comments: {
     lineComment: "#"

package/out/renderer/index.html

@@ -49,8 +49,8 @@
       color: #565f89;
     }
   </style>
-  <script type="module" crossorigin src="./assets/index-kkG56aKv.js"></script>
-  <link rel="stylesheet" crossorigin href="./assets/index-BL9njXIL.css">
+  <script type="module" crossorigin src="./assets/index-MqgBcJzy.js"></script>
+  <link rel="stylesheet" crossorigin href="./assets/index-Bi_MjBqs.css">
 </head>
 <body>
   <div id="boot-splash">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phenx-inc/ctlsurf",
-  "version": "0.12.0",
+  "version": "0.13.1",
   "description": "Agent-agnostic terminal and desktop app for ctlsurf — run Claude Code, Codex, or any coding agent with live session logging and remote control",
   "main": "out/main/index.js",
   "bin": {

package/src/main/index.ts

@@ -220,7 +220,10 @@ const orchestrator = new Orchestrator(
     },
     onCwdChanged: () => {
       mainWindow?.webContents.send('app:cwdChanged')
-      updateProjectBadge(orchestrator.cwd)
+      // Reflect the active tab's bound project (remote SSH sessions bind to a
+      // chosen ctlsurf project whose root_path is meaningful), falling back to
+      // the local launch cwd for unbound/local tabs.
+      updateProjectBadge(orchestrator.getActiveTabProjectPath() || orchestrator.cwd)
     },
   }
 )
@@ -251,6 +254,15 @@ function createWindow(): void {
     callback(true)
   })
 
+  // Keep links opened from inside the embedded ctlsurf webview (target=_blank,
+  // window.open) in the panel instead of spawning a detached popup window.
+  mainWindow.webContents.on('did-attach-webview', (_e, contents) => {
+    contents.setWindowOpenHandler(({ url }) => {
+      setImmediate(() => contents.loadURL(url))
+      return { action: 'deny' }
+    })
+  })
+
   if (process.env.ELECTRON_RENDERER_URL) {
     mainWindow.loadURL(process.env.ELECTRON_RENDERER_URL)
   } else {

package/src/main/orchestrator.ts

@@ -627,12 +627,19 @@ export class Orchestrator {
   }
 
   setActiveTab(tabId: string): void {
+    const prevProjectPath = this.getActiveTabProjectPath()
     this.activeTabId = tabId
     const tab = this.tabs.get(tabId)
     if (tab) {
       this.currentAgent = tab.agent
       this.currentCwd = tab.cwd
     }
+    // Switching tabs changes which project the dock badge / window title and
+    // the renderer's ticket/ctlsurf panels should reflect. Only signal when the
+    // effective project path actually changed to avoid needless renderer churn.
+    if (this.getActiveTabProjectPath() !== prevProjectPath) {
+      this.events.onCwdChanged()
+    }
   }
 
   getTabIds(): string[] {
@@ -701,7 +708,7 @@ export class Orchestrator {
     return this.ticketStore.updateTicket(cwd, rowId, input)
   }
 
-  async listTicketsForActiveTab(): Promise<{ ok: boolean; tickets: import('./ticketStore').Ticket[]; error?: string }> {
+  async listTicketsForActiveTab(): Promise<{ ok: boolean; tickets: import('./ticketStore').Ticket[]; blockId?: string; pageId?: string; error?: string }> {
     const cwd = this.getActiveTabProjectPath()
     if (!cwd) return { ok: false, tickets: [], error: 'No active terminal tab' }
     if (!this.ctlsurfApi.getApiKey()) {

package/src/main/ticketStore.ts

@@ -69,7 +69,10 @@ function findPageByTitle(pages: any[], title: string): any | null {
  */
 export class TicketStore {
   private api: CtlsurfApi
-  private blockCache = new Map<string, string>()
+  // Per-cwd cache of the resolved Tickets datastore: the block (the datastore
+  // element) and the Agent Datastore page it lives on. Both ids are handed to
+  // the coding agent so it can read/update tickets via the ctlsurf MCP tools.
+  private dsCache = new Map<string, { blockId: string; pageId: string }>()
 
   constructor(api: CtlsurfApi) {
     this.api = api
@@ -80,11 +83,11 @@ export class TicketStore {
     const title = input.title?.trim()
     if (!title) return { ok: false, error: 'Title is required' }
     try {
-      const blockId = await this.ensureDatastore(cwd, true)
-      if (!blockId) {
+      const ds = await this.ensureDatastore(cwd, true)
+      if (!ds) {
         return { ok: false, error: 'No ctlsurf project found for this folder' }
       }
-      await this.api.addRow(blockId, {
+      await this.api.addRow(ds.blockId, {
         Title: title,
         Description: input.description?.trim() || '',
         Status: input.status || 'Open',
@@ -104,9 +107,9 @@ export class TicketStore {
     const title = input.title?.trim()
     if (!title) return { ok: false, error: 'Title is required' }
     try {
-      const blockId = await this.ensureDatastore(cwd, false)
-      if (!blockId) return { ok: false, error: 'No Tickets datastore for this project' }
-      await this.api.updateRow(blockId, rowId, {
+      const ds = await this.ensureDatastore(cwd, false)
+      if (!ds) return { ok: false, error: 'No Tickets datastore for this project' }
+      await this.api.updateRow(ds.blockId, rowId, {
         Title: title,
         Description: input.description?.trim() || '',
         Status: input.status || 'Open',
@@ -122,11 +125,11 @@ export class TicketStore {
 
   /** Lists existing tickets for the project, newest first. Does not create the
    * datastore — an unconfigured project simply has no tickets yet. */
-  async listTickets(cwd: string): Promise<{ ok: boolean; tickets: Ticket[]; error?: string }> {
+  async listTickets(cwd: string): Promise<{ ok: boolean; tickets: Ticket[]; blockId?: string; pageId?: string; error?: string }> {
     try {
-      const blockId = await this.ensureDatastore(cwd, false)
-      if (!blockId) return { ok: true, tickets: [] }
-      const res = await this.api.queryRows(blockId, { orderBy: 'Created', order: 'desc', limit: 200 })
+      const ds = await this.ensureDatastore(cwd, false)
+      if (!ds) return { ok: true, tickets: [] }
+      const res = await this.api.queryRows(ds.blockId, { orderBy: 'Created', order: 'desc', limit: 200 })
       const tickets: Ticket[] = (res?.rows || []).map(r => ({
         id: r.id,
         title: String(r.data?.Title ?? ''),
@@ -135,15 +138,15 @@ export class TicketStore {
         priority: String(r.data?.Priority ?? 'Med'),
         created: (r.data?.Created as string) ?? r.created_at ?? null,
       }))
-      return { ok: true, tickets }
+      return { ok: true, tickets, blockId: ds.blockId, pageId: ds.pageId }
     } catch (err: any) {
       log(`listTickets failed for ${cwd}: ${err?.message || err}`)
       return { ok: false, tickets: [], error: err?.message || String(err) }
     }
   }
 
-  private async ensureDatastore(cwd: string, create: boolean): Promise<string | null> {
-    const cached = this.blockCache.get(cwd)
+  private async ensureDatastore(cwd: string, create: boolean): Promise<{ blockId: string; pageId: string } | null> {
+    const cached = this.dsCache.get(cwd)
     if (cached) return cached
 
     let folder: any = null
@@ -157,12 +160,14 @@ export class TicketStore {
     const folderDetail = await this.api.getFolder(folder.id)
     const agentPage = findPageByTitle(folderDetail?.pages || [], AGENT_DATASTORE_PAGE_TITLE)
     if (!agentPage?.id) return null
+    const pageId: string = agentPage.id
 
-    const blockId = await this.findOrAdoptBlock(agentPage.id)
+    const blockId = await this.findOrAdoptBlock(pageId)
     if (blockId) {
       await this.ensureColumns(blockId)
-      this.blockCache.set(cwd, blockId)
-      return blockId
+      const ds = { blockId, pageId }
+      this.dsCache.set(cwd, ds)
+      return ds
     }
 
     if (!create) return null
@@ -173,15 +178,16 @@ export class TicketStore {
       type: c.type,
       ...(c.options ? { options: c.options } : {}),
     }))
-    const created = await this.api.createBlock(agentPage.id, {
+    const created = await this.api.createBlock(pageId, {
       type: 'datastore',
       title: DATASTORE_TITLE,
       props: { columns, system_key: SYSTEM_KEY },
     })
     if (created?.id) {
       log(`Created "${DATASTORE_TITLE}" datastore on Agent Datastore page for ${cwd}`)
-      this.blockCache.set(cwd, created.id)
-      return created.id
+      const ds = { blockId: created.id, pageId }
+      this.dsCache.set(cwd, ds)
+      return ds
     }
     return null
   }

package/src/renderer/App.tsx

@@ -60,7 +60,7 @@ declare global {
       getTicketProject: () => Promise<{ cwd: string | null; name: string | null }>
       addTicket: (input: { title: string; description?: string; status?: string; priority?: string }) => Promise<{ ok: boolean; error?: string }>
       updateTicket: (rowId: string, input: { title: string; description?: string; status?: string; priority?: string }) => Promise<{ ok: boolean; error?: string }>
-      listTickets: () => Promise<{ ok: boolean; tickets: Array<{ id: string; title: string; description: string; status: string; priority: string; created: string | null }>; error?: string }>
+      listTickets: () => Promise<{ ok: boolean; tickets: Array<{ id: string; title: string; description: string; status: string; priority: string; created: string | null }>; blockId?: string; pageId?: string; error?: string }>
       getTracking: () => Promise<{ active: boolean }>
       setTracking: (enabled: boolean) => Promise<{ active: boolean }>
       getLogChat: () => Promise<{ enabled: boolean }>
@@ -269,6 +269,18 @@ export default function App() {
     setTimeout(() => window.worker.writePty(activeTabId, '\r'), 80)
   }, [activeTabId])
 
+  // Send a prepared prompt (e.g. a ticket) into the active terminal and submit
+  // it, so the coding agent can start working immediately. Same paste-then-
+  // delayed-\r dance as voice typing — a slightly longer delay since ticket
+  // prompts are multi-line and take a touch longer to drain before the Enter.
+  const handleSendToTerminal = useCallback((text: string) => {
+    const trimmed = text.trim()
+    if (!trimmed) return
+    window.worker.writePty(activeTabId, trimmed)
+    focusTerminal(activeTabId)
+    setTimeout(() => window.worker.writePty(activeTabId, '\r'), 120)
+  }, [activeTabId])
+
   const cwdRef = useRef<string | null>(null)
 
   const handleSpawn = useCallback(async (tabId: string, agent: AgentConfig) => {
@@ -438,6 +450,10 @@ export default function App() {
     return () => window.removeEventListener('ctlsurf-open-url', onOpen)
   }, [layout, togglePane])
 
+  // The active tab's agent — remote SSH sessions (id `remote-…`) can't have
+  // their replies spoken, so the speaker toggle is disabled for them.
+  const activeAgentIsRemote = !!tabs.find(t => t.id === activeTabId)?.agent?.id?.startsWith('remote-')
+
   // Build pane contents (always rendered, layout controls visibility)
   const panes: PaneContent[] = [
     { id: 'editor', label: 'Editor', content: <EditorPanel cwd={cwd} /> },
@@ -506,7 +522,7 @@ export default function App() {
       ),
     },
     { id: 'ctlsurf', label: 'ctlsurf', content: <CtlsurfPanel navigate={ctlsurfNav} /> },
-    { id: 'tickets', label: 'Tickets', content: <TicketPane /> },
+    { id: 'tickets', label: 'Tickets', content: <TicketPane onSendToTerminal={handleSendToTerminal} /> },
   ]
 
   return (
@@ -562,7 +578,7 @@ export default function App() {
               <line x1="8" y1="23" x2="16" y2="23" />
             </svg>
           </button>
-          <SpeakControls />
+          <SpeakControls remote={activeAgentIsRemote} />
           <span className="titlebar-separator" />
           {agents.map(a => {
             const activeTab = tabs.find(t => t.id === activeTabId)

package/src/renderer/components/CtlsurfPanel.tsx

@@ -1,65 +1,199 @@
-import { useRef, useEffect, useState } from 'react'
+import { useRef, useEffect, useState, useCallback } from 'react'
 
 interface CtlsurfPanelProps {
-  // An authenticated ctlsurf URL to load (e.g. from a terminal link click).
-  // `n` bumps per request so repeat navigations to the same URL still apply.
+  // A URL to load (e.g. from a terminal link click). `n` bumps per request so
+  // repeat navigations to the same URL still apply.
   navigate?: { url: string; n: number } | null
 }
 
+// The <webview> element exposes navigation methods at runtime that aren't in
+// React's typings — narrow the ref to the bits we use.
+type WebviewEl = HTMLElement & {
+  loadURL: (url: string) => void
+  goBack: () => void
+  goForward: () => void
+  reload: () => void
+  stop: () => void
+  canGoBack: () => boolean
+  canGoForward: () => boolean
+}
+
+// Strip the noisy auth/embed params so the address bar shows a clean URL.
+function displayUrl(raw: string): string {
+  try {
+    const u = new URL(raw)
+    u.searchParams.delete('_code')
+    u.searchParams.delete('embed')
+    return u.toString()
+  } catch {
+    return raw
+  }
+}
+
 export function CtlsurfPanel({ navigate }: CtlsurfPanelProps) {
-  const webviewRef = useRef<HTMLWebViewElement>(null)
-  const [url, setUrl] = useState<string | null>(null)
-  const [key, setKey] = useState(0) // force remount on cwd change / navigation
+  const webviewRef = useRef<WebviewEl | null>(null)
+  const [src, setSrc] = useState<string | null>(null) // initial webview src
+  const [address, setAddress] = useState('')          // editable address-bar text
+  const [loading, setLoading] = useState(false)
+  const [nav, setNav] = useState({ back: false, forward: false })
+  const [key, setKey] = useState(0)                   // remount on cwd change
+
+  const hasSrcRef = useRef(false)                // has the webview been seeded?
+  const readyRef = useRef(false)                 // is the webview dom-ready?
+  const pendingRef = useRef<string | null>(null) // url queued before dom-ready
+
+  // Resolve a raw URL to an authenticated ctlsurf embed URL when it points at
+  // ctlsurf, else return it unchanged.
+  const resolve = useCallback(async (raw: string): Promise<string> => {
+    try {
+      return (await window.worker.getEmbedUrl(raw)) || raw
+    } catch {
+      return raw
+    }
+  }, [])
+
+  // Load a URL into the webview. The first load seeds the `src` attribute (the
+  // element doesn't exist yet); later loads call loadURL so in-webview history
+  // stays intact for the back/forward buttons.
+  const load = useCallback((url: string) => {
+    if (!url) return
+    setAddress(displayUrl(url))
+    if (!hasSrcRef.current) {
+      hasSrcRef.current = true
+      setSrc(url)
+      return
+    }
+    const wv = webviewRef.current
+    if (wv && readyRef.current) wv.loadURL(url)
+    else pendingRef.current = url
+  }, [])
 
-  const loadUrl = async () => {
+  // Default-load the project page, preferring the authenticated page URL.
+  const loadProject = useCallback(async () => {
     try {
       const info = await window.worker.getWebviewInfo()
-      setUrl(info.pageUrl || info.frontendUrl)
+      load(info.pageUrl || info.frontendUrl)
     } catch (err) {
       console.error('[ctlsurf] Failed to get webview info:', err)
-      setUrl('https://app.ctlsurf.com')
+      load('https://app.ctlsurf.com')
     }
-  }
+  }, [load])
 
-  // Default-load the project page on mount, unless a navigation is already
-  // queued (e.g. the pane was just revealed to show a clicked link).
-  useEffect(() => { if (!navigate?.url) loadUrl() }, [])
+  // On mount, load the project page unless a navigation is already queued (e.g.
+  // the pane was just revealed to show a clicked link).
+  useEffect(() => { if (!navigate?.url) loadProject() }, [])
 
-  // Navigate to a specific authenticated URL when requested.
+  // Navigate to a specific URL when requested (terminal / external link click).
   useEffect(() => {
-    if (navigate?.url) {
-      setUrl(navigate.url)
-      setKey(k => k + 1)
-    }
+    if (navigate?.url) resolve(navigate.url).then(load)
   }, [navigate?.n])
 
-  // Reload webview when cwd changes
+  // Reload (remount) when the cwd changes — new project context.
   useEffect(() => {
     const unsub = window.worker.onCwdChanged(() => {
-      setUrl(null)
+      hasSrcRef.current = false
+      readyRef.current = false
+      pendingRef.current = null
+      setSrc(null)
       setKey(k => k + 1)
-      loadUrl()
+      loadProject()
     })
     return unsub
-  }, [])
+  }, [loadProject])
 
-  if (!url) {
-    return (
-      <div className="ctlsurf-panel" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-        <span style={{ color: '#565f89', fontSize: '13px' }}>Loading ctlsurf...</span>
-      </div>
-    )
+  // Wire webview lifecycle + navigation events to the address bar.
+  useEffect(() => {
+    const wv = webviewRef.current
+    if (!wv) return
+    const syncNav = () =>
+      setNav({ back: wv.canGoBack?.() ?? false, forward: wv.canGoForward?.() ?? false })
+    const onReady = () => {
+      readyRef.current = true
+      if (pendingRef.current) {
+        wv.loadURL(pendingRef.current)
+        pendingRef.current = null
+      }
+      syncNav()
+    }
+    const onNavigate = (e: Event) => {
+      const url = (e as Event & { url?: string }).url
+      if (url) setAddress(displayUrl(url))
+      syncNav()
+    }
+    const onStart = () => setLoading(true)
+    const onStop = () => { setLoading(false); syncNav() }
+    wv.addEventListener('dom-ready', onReady)
+    wv.addEventListener('did-navigate', onNavigate)
+    wv.addEventListener('did-navigate-in-page', onNavigate)
+    wv.addEventListener('did-start-loading', onStart)
+    wv.addEventListener('did-stop-loading', onStop)
+    return () => {
+      wv.removeEventListener('dom-ready', onReady)
+      wv.removeEventListener('did-navigate', onNavigate)
+      wv.removeEventListener('did-navigate-in-page', onNavigate)
+      wv.removeEventListener('did-start-loading', onStart)
+      wv.removeEventListener('did-stop-loading', onStop)
+    }
+  }, [src, key])
+
+  const onSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    let target = address.trim()
+    if (!target) return
+    // Bare hostnames (no scheme) default to https.
+    if (!/^[a-z][a-z0-9+.-]*:\/\//i.test(target)) target = 'https://' + target
+    resolve(target).then(load)
   }
 
   return (
     <div className="ctlsurf-panel">
-      <webview
-        key={key}
-        ref={webviewRef as any}
-        src={url}
-        style={{ width: '100%', height: '100%' }}
-        allowpopups={'true' as any}
-      />
+      <div className="ctlsurf-addressbar">
+        <button
+          type="button"
+          className="ctlsurf-nav-btn"
+          title="Back"
+          disabled={!nav.back}
+          onClick={() => webviewRef.current?.goBack?.()}
+        >‹</button>
+        <button
+          type="button"
+          className="ctlsurf-nav-btn"
+          title="Forward"
+          disabled={!nav.forward}
+          onClick={() => webviewRef.current?.goForward?.()}
+        >›</button>
+        <button
+          type="button"
+          className="ctlsurf-nav-btn"
+          title={loading ? 'Stop' : 'Reload'}
+          onClick={() => (loading ? webviewRef.current?.stop?.() : webviewRef.current?.reload?.())}
+        >{loading ? '×' : '⟳'}</button>
+        <form className="ctlsurf-address-form" onSubmit={onSubmit}>
+          <input
+            className="ctlsurf-address-input"
+            value={address}
+            spellCheck={false}
+            placeholder="Enter a URL"
+            onChange={e => setAddress(e.target.value)}
+            onFocus={e => e.currentTarget.select()}
+          />
+        </form>
+      </div>
+      <div className="ctlsurf-webview-host">
+        {src ? (
+          <webview
+            key={key}
+            ref={webviewRef as any}
+            src={src}
+            style={{ width: '100%', height: '100%' }}
+            allowpopups={'true' as any}
+          />
+        ) : (
+          <div className="ctlsurf-webview-loading">
+            <span style={{ color: '#565f89', fontSize: '13px' }}>Loading ctlsurf...</span>
+          </div>
+        )}
+      </div>
     </div>
   )
 }

package/src/renderer/components/SpeakControls.tsx

@@ -18,7 +18,10 @@ import {
 
 const SAMPLE = 'This is how spoken agent replies will sound.'
 
-export function SpeakControls() {
+// `remote` is true while the active tab is a remote SSH session, where spoken
+// replies can't work: the agent's transcript is written on the remote machine,
+// so there's nothing local to read aloud. The toggle is disabled in that case.
+export function SpeakControls({ remote = false }: { remote?: boolean }) {
   const [enabled, setEnabled] = useState(false)
   const [engine, setEngineState] = useState<TtsEngineId>(getEngine)
   const [voices, setVoices] = useState<SpeechSynthesisVoice[]>([])
@@ -124,7 +127,9 @@ export function SpeakControls() {
     speech.enqueue(SAMPLE)
   }, [])
 
-  const title = enabled ? 'Spoken replies on — click to mute' : 'Speak agent replies (off)'
+  const title = remote
+    ? "Spoken replies aren't available for remote SSH sessions — the agent's transcript lives on the remote machine"
+    : enabled ? 'Spoken replies on — click to mute' : 'Speak agent replies (off)'
 
   return (
     <div className="speak-controls" ref={wrapRef}>
@@ -133,6 +138,7 @@ export function SpeakControls() {
         className={`titlebar-btn titlebar-icon-btn speak-btn ${enabled ? 'active' : ''}`}
         onClick={toggle}
         title={title}
+        disabled={remote}
         aria-label="Toggle spoken agent replies"
         aria-pressed={enabled}
       >