feat(desktop): add SSH server connections (#47753)

Author: Brendonovich

packages/app/component-tests/ssh-reconnect.spec.ts

@@ -0,0 +1,67 @@
+import { expect, story } from "../../storybook/playwright/story"
+
+story("settings menu reconnect retains its prompt handler across server updates", async ({ mount, page }) => {
+  const component = await mount("app-dialog-ssh--settings-reconnect")
+  await component.getByRole("button", { name: "More options" }).click()
+  await page.getByRole("menuitem", { name: "Connect", exact: true }).click()
+  const dialog = page.getByRole("dialog")
+  await expect(dialog.getByRole("textbox")).toBeVisible()
+  await dialog.getByRole("textbox").fill("fixture-password")
+  await dialog.getByRole("button", { name: "Continue" }).click()
+  await expect(dialog.getByRole("textbox", { name: "Verification code:" })).toBeVisible()
+  await dialog.getByRole("textbox").fill("123456")
+  await dialog.getByRole("button", { name: "Continue" }).click()
+  await expect(dialog).toHaveCount(0)
+  await expect(component.getByRole("button", { name: "Authenticate", exact: true })).toHaveCount(0)
+})
+
+story("cancelling a version mismatch permits reconnecting again", async ({ mount, page }) => {
+  const component = await mount("app-dialog-ssh--incompatible-session")
+  await component.getByRole("button", { name: "Reconnect", exact: true }).click()
+  const dialog = page.getByRole("dialog")
+  await expect(dialog.getByRole("alert")).toBeVisible()
+  await dialog.getByRole("button", { name: "Cancel", exact: true }).click()
+  await expect(dialog).toHaveCount(0)
+  await component.getByRole("button", { name: "Reconnect", exact: true }).click()
+  await expect(dialog.getByRole("alert")).toBeVisible()
+  await dialog.getByRole("button", { name: "Cancel", exact: true }).click()
+  await expect(dialog).toHaveCount(0)
+})
+
+story("adding a server keeps all SSH challenges in the original connection dialog", async ({ mount, page }) => {
+  await mount("app-dialog-ssh--host")
+  const dialog = page.getByRole("dialog")
+  await dialog.getByRole("textbox", { name: "Host or SSH command" }).fill("ssh devbox")
+  await dialog.getByRole("button", { name: "Add server", exact: true }).click()
+  await expect(dialog).toHaveCount(1)
+  await expect(dialog.getByRole("button", { name: "Cancel", exact: true })).toBeFocused()
+  await dialog.getByRole("button", { name: "Trust and connect" }).click()
+  await dialog.getByRole("textbox").fill("fixture-password")
+  await dialog.getByRole("button", { name: "Continue", exact: true }).click()
+  await dialog.getByRole("textbox", { name: "Verification code:" }).fill("123456")
+  await dialog.getByRole("button", { name: "Continue", exact: true }).click()
+  await expect(dialog).toHaveCount(0)
+})
+
+story("updating an incompatible connection continues authentication in the same dialog", async ({ mount, page }) => {
+  const component = await mount("app-dialog-ssh--incompatible-session")
+  await component.getByRole("button", { name: "Reconnect", exact: true }).click()
+  const dialog = page.getByRole("dialog")
+  await dialog.getByRole("button", { name: "Update and reconnect", exact: true }).click()
+  await expect(dialog).toHaveCount(1)
+  await dialog.getByRole("textbox").fill("fixture-password")
+  await dialog.getByRole("button", { name: "Continue", exact: true }).click()
+  await dialog.getByRole("textbox", { name: "Verification code:" }).fill("123456")
+  await dialog.getByRole("button", { name: "Continue", exact: true }).click()
+  await expect(dialog).toHaveCount(0)
+  await expect(component.getByText("Session connected")).toBeVisible()
+})
+
+story("key-based reconnect completes without opening an authentication dialog", async ({ mount, page }) => {
+  const component = await mount("app-dialog-ssh--key-reconnect")
+  await component.getByRole("button", { name: "Reconnect", exact: true }).click()
+  await expect(component.getByRole("button", { name: "Connecting to SSH server" })).toBeDisabled()
+  await expect(page.getByRole("dialog")).toHaveCount(0)
+  await expect(component.getByText("Session connected")).toBeVisible()
+  await expect(page.getByRole("dialog")).toHaveCount(0)
+})

packages/app/package.json

@@ -10,6 +10,7 @@
     "./i18n/desktop-native": "./src/runtime/i18n/desktop-native.ts",
     "./updater": "./src/shell/updates/types.ts",
     "./wsl/types": "./src/servers/wsl/types.ts",
+    "./ssh": "./src/servers/ssh/types.ts",
     "./vite": "./vite.js",
     "./index.css": "./src/index.css"
   },

packages/app/src/app.tsx

@@ -17,6 +17,8 @@ import { ServerConnection, ServersProvider } from "@/runtime/server/registry"
 import { SettingsProvider } from "@/settings/model"
 import { TabsProvider } from "@/shell/tabs/tabs"
 import { WslServersProvider } from "@/servers/wsl/context"
+import { SshProvider } from "@/servers/ssh/context"
+import { SshRestore } from "@/servers/ssh/restore"
 import { ErrorPage } from "@/shell/errors/error"
 import { AppRoutes, File, preloadRoute } from "@/shell/routes/routes"
 
@@ -81,7 +83,9 @@ export function AppBaseProviders(
               <QueryProvider>
                 <WslServersProvider>
                   <DialogProvider>
-                    <FileComponentProvider component={File}>{props.children}</FileComponentProvider>
+                    <SshProvider>
+                      <FileComponentProvider component={File}>{props.children}</FileComponentProvider>
+                    </SshProvider>
                   </DialogProvider>
                 </WslServersProvider>
               </QueryProvider>
@@ -109,6 +113,7 @@ export function AppInterface(props: {
         <BodyTypography />
         <CommandProvider>
           <DesktopCommands />
+          <SshRestore />
           <HighlightsProvider>
             {props.children}
             {rootProps.children}

packages/app/src/composer/editor/interaction.ts

@@ -37,6 +37,7 @@ export type ComposerEditorView = {
   agent?: ComposerSelectControl
   variant?: ComposerSelectControl
   submit: {
+    available?: Accessor<boolean>
     stopping: Accessor<boolean>
     working?: Accessor<boolean>
     queue?: ComposerQueue
@@ -333,6 +334,7 @@ export function createComposerEditor(input: {
       draft.removeAttachment(id)
     },
     canSubmit() {
+      if (input.view.submit.available?.() === false) return false
       if (input.view.draftOnly) return false
       const persisted = draft.state
       if (state.mode === "shell") {
@@ -365,6 +367,7 @@ export function createComposerEditor(input: {
       dispatch({ type: "mode.shell" })
     },
     submit(options?: { alternate?: boolean }) {
+      if (input.view.submit.available?.() === false) return
       if (input.view.draftOnly) return
       input.view.submit.onSubmit(options)
       dispatch({ type: "popover.close" })

packages/app/src/composer/model.ts

@@ -11,7 +11,7 @@ import { useLanguage } from "@/runtime/i18n/language"
 import { useLayout } from "@/shell/state/layout"
 import { usePlatform } from "@/runtime/platform/platform"
 import { useWorkspaceLocation } from "@/workspaces/location"
-import { useData } from "@/runtime/server/current"
+import { useData, useServer } from "@/runtime/server/current"
 import { createSessionTabs } from "@/session/helpers"
 import { showToast } from "@/shell/notifications/toast"
 import { formatServerError } from "@/runtime/server/errors"
@@ -30,6 +30,8 @@ export type ComposerModel = ComposerEditorModel & {
 export function createComposerModel(adapter: ComposerAdapter, options?: { queue?: ComposerQueue }): ComposerModel {
   const sdk = useWorkspaceLocation()
   const data = useData()
+  const server = useServer()
+  const available = () => server.conn.type !== "ssh" || server.ctx.sdk.connection.status() === "connected"
   const files = useFile()
   const layout = useLayout()
   const comments = useComments()
@@ -394,10 +396,12 @@ export function createComposerModel(adapter: ComposerAdapter, options?: { queue?
         keybind: () => command.keybindParts("model.variant.cycle"),
       },
       submit: {
+        available,
         stopping,
         working: adapter.working,
         queue: options?.queue,
         onSubmit: (submitOptions) => {
+          if (!available()) return
           const queue = options?.queue
           // Confirming an edit re-admits the queued prompt instead of sending
           // the composer value as a new prompt. Enter keeps it queued in

packages/app/src/desktop.ts

@@ -20,4 +20,5 @@ export { createDraftStore } from "./runtime/persistence/drafts"
 export { createNamespaceStorage, type NamespaceStorage } from "./runtime/persistence/namespace"
 export { flushPersisted } from "./runtime/persistence/persist"
 export { useWslServers } from "./servers/wsl/context"
+export { useSsh } from "./servers/ssh/context"
 export { type UpdaterPlatform, type UpdaterState } from "./shell/updates/types"

packages/app/src/home/projects/controller.tsx

@@ -15,6 +15,7 @@ import { Persistence } from "@/runtime/persistence/schema"
 import type { HomeController } from "../model"
 import { useGlobal } from "@/runtime/server/runtime"
 import { SessionTransfer } from "@opencode/schema/session-transfer"
+import { useSshAuthenticate } from "@/servers/ssh/authenticate"
 
 export const HomeServersSchema = Schema.Struct({
   collapsed: Persistence.record(Persistence.fallback(Schema.Boolean, () => false)),
@@ -28,6 +29,7 @@ export function createHomeProjectsController(home: HomeController) {
   const openSettings = useSettingsCommand()
   const serverManagement = useServerActionsController()
   const global = useGlobal()
+  const authenticate = useSshAuthenticate()
   const [_state, setState, _, ready] = persisted(Persist.global("home.servers"), HomeServersSchema, { collapsed: {} })
   const [state] = createResource(
     () => ready.promise ?? Promise.resolve(),
@@ -42,6 +44,15 @@ export function createHomeProjectsController(home: HomeController) {
     return platform.platform === "desktop" && !!platform.openPath && ServerConnection.local(conn)
   }
 
+  function choose(conn: ServerConnection.Any) {
+    pickDirectory({
+      server: conn,
+      title: language.t("command.project.open"),
+      multiple: true,
+      onSelect: (result) => home.project.add(conn, homeProjectDirectories(result)),
+    })
+  }
+
   return {
     copy: {
       language,
@@ -71,15 +82,25 @@ export function createHomeProjectsController(home: HomeController) {
           void dialog.show(() => <DialogServer mode="edit" server={conn} />)
         })
       },
-      focus: home.selection.focusServer,
+      authenticate: (conn: ServerConnection.Any) => authenticate(conn),
+      focus: (conn: ServerConnection.Any) => {
+        if (authenticate(conn, () => home.selection.focusServer(conn))) return
+        home.selection.focusServer(conn)
+      },
     },
     project: {
       list: home.project.list,
       recentlyClosed: home.project.recentlyClosed,
       homedir: home.project.homedir,
-      select: home.project.select,
+      select: (conn: ServerConnection.Any, directory: string) => {
+        if (authenticate(conn, () => home.project.select(conn, directory))) return
+        home.project.select(conn, directory)
+      },
       add: home.project.add,
-      openNewSession: home.project.openProjectNewSession,
+      openNewSession: (conn: ServerConnection.Any, directory: string) => {
+        if (authenticate(conn, () => home.project.openProjectNewSession(conn, directory))) return
+        home.project.openProjectNewSession(conn, directory)
+      },
       canImportSession: !!platform.openAttachmentPickerDialog,
       importSession: (conn: ServerConnection.Any, project: LocalProject) => {
         if (!platform.openAttachmentPickerDialog) return
@@ -125,13 +146,9 @@ export function createHomeProjectsController(home: HomeController) {
           .forEach((directory) => notification.project.markViewed(directory))
       },
       choose: (conn: ServerConnection.Any) => {
+        if (authenticate(conn, () => choose(conn))) return
         if (home.server.health(conn)?.healthy === false) return
-        pickDirectory({
-          server: conn,
-          title: language.t("command.project.open"),
-          multiple: true,
-          onSelect: (result) => home.project.add(conn, homeProjectDirectories(result)),
-        })
+        choose(conn)
       },
       close: (conn: ServerConnection.Any, directory: string) => {
         const next = closeHomeProject(

packages/app/src/home/projects/region.tsx

@@ -26,6 +26,7 @@ export function HomeProjects(props: {
       onWheel={props.scroll.viewport.containWheel}
       onChooseProject={props.projects.project.choose}
       onFocusServer={props.projects.server.focus}
+      onAuthenticateServer={props.projects.server.authenticate}
       onToggleCollapsed={props.projects.server.toggleCollapsed}
       onEditServer={props.projects.server.edit}
       onSetDefaultServer={props.projects.server.setDefault}

packages/app/src/home/projects/view.css

@@ -0,0 +1,59 @@
+/* Home server/project rows keep the label underneath the hover actions.
+   The actions carry a tab-style background with a fade on the left, and the
+   label fades out where it slides underneath. Mirrors tab-nav.css. */
+[data-home-row] {
+  --home-row-surface: var(--v2-background-bg-base);
+  --home-row-background: color-mix(
+    in srgb,
+    var(--home-row-surface) var(--home-row-opacity, 100%),
+    var(--v2-background-bg-base)
+  );
+  background: var(--home-row-background);
+}
+
+[data-home-row]:is(:hover, :focus-within, [data-dragging="true"], :has([data-menu="true"])) {
+  --home-row-surface: var(--v2-background-bg-layer-01);
+}
+
+[data-home-row][data-selected] {
+  --home-row-surface: var(--v2-background-bg-layer-03);
+}
+
+[data-home-row][data-dimmed="true"] {
+  --home-row-opacity: 60%;
+}
+
+/* Keep the background outside the button's disabled-content opacity. */
+[data-home-row] > button {
+  background: transparent;
+}
+
+[data-home-row] [data-slot="home-row-actions"] {
+  background: linear-gradient(to right, transparent, var(--home-row-background) 8px);
+}
+
+[data-home-row]:dir(rtl) [data-slot="home-row-actions"] {
+  background: linear-gradient(to left, transparent, var(--home-row-background) 8px);
+}
+
+[data-home-row]:is(:hover, :focus-within, :has([data-menu="true"])) [data-slot="home-row-label"] {
+  -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 44px), transparent calc(100% - 36px));
+  mask-image: linear-gradient(to right, black 0, black calc(100% - 44px), transparent calc(100% - 36px));
+}
+
+[data-home-row]:is(:hover, :focus-within, :has([data-menu="true"])):dir(rtl) [data-slot="home-row-label"] {
+  -webkit-mask-image: linear-gradient(to left, black 0, black calc(100% - 44px), transparent calc(100% - 36px));
+  mask-image: linear-gradient(to left, black 0, black calc(100% - 44px), transparent calc(100% - 36px));
+}
+
+@media (hover: none) {
+  [data-home-row] [data-slot="home-row-label"] {
+    -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 44px), transparent calc(100% - 36px));
+    mask-image: linear-gradient(to right, black 0, black calc(100% - 44px), transparent calc(100% - 36px));
+  }
+
+  [data-home-row]:dir(rtl) [data-slot="home-row-label"] {
+    -webkit-mask-image: linear-gradient(to left, black 0, black calc(100% - 44px), transparent calc(100% - 36px));
+    mask-image: linear-gradient(to left, black 0, black calc(100% - 44px), transparent calc(100% - 36px));
+  }
+}