Files
kandev/apps/web/hooks/domains/session/use-session-actions.ts
T
José Almeida 7ec639bf2f feat(web): mobile parity (session/terminal/repo pickers + multi-terminal) (#840)
* refactor(web): extract shared use-session-actions hook from SessionTab

Move WS-level session lifecycle handlers (set primary, stop, resume,
delete) into hooks/domains/session/use-session-actions so the same logic
can power both the dockview tab context menu and upcoming mobile
controls. Dockview-specific panel removal stays local in SessionTab via
the onDeleted callback.

* feat(web): humanize task and session state labels

Mobile task sheet was rendering raw enum values like "IN_PROGRESS".
Add formatTaskStateLabel + formatTaskSessionStateLabel helpers and use
them in the mobile task sheet badge. Session state badge in the new
mobile sessions picker also reuses the formatter.

* feat(web): mobile session/terminal/repo pickers + multi-terminal support

Address parity gaps on mobile by introducing per-pane header pills that
open bottom-sheet pickers, scoped to the relevant view rather than
overloading the left task sheet.

Pickers:
- Sessions pill in chat header → bottom sheet with launch / set-primary
  / stop / resume / delete (with confirm). Pill shows agent label +
  idx/total badge.
- Terminals pill in terminal header → bottom sheet with add / close
  (with confirm) / switch. Replaces an earlier chip-strip prototype.
- Repos pill on the top bar (multi-repo only) → bottom sheet listing
  task repositories; switching jumps to a session on that repo.

Each pill renders with a chevron-down icon + count badge so the
trigger reads as a button, not a status badge.

Multi-terminal:
- New useMobileTerminals hook wraps useTerminals and auto-creates a
  first shell when the env reports zero.
- MobileTerminalPane multi-mounts PassthroughTerminal instances keyed
  by terminalId so switching preserves scrollback. Active xterm
  registers itself in a small mobile-active-terminal sender registry;
  the existing key-bar reroutes input through xterm.paste() so Ctrl /
  ^C / arrows reach whichever terminal is currently visible, not just
  the per-session default shell.
- Skip the WebGL renderer addon on mobile (new disableWebgl prop on
  PassthroughTerminal). The WebGL atlas miscomputed glyph scaling
  after the desktop→mobile responsive switch and rendered text at
  several times the intended font size; the canvas renderer is correct
  and fast enough for shell use.

Refactors:
- Left sheet reverts to a single-purpose task list (the sectioned-hub
  variant was rolled back in favour of per-pane pickers).
- session-task-switcher-sheet-hooks extracted from the sheet to keep
  it under the file-size lint cap.

* fix(web): address review feedback on mobile pickers + multi-terminal

Bots flagged a real first-mount bug and a handful of smaller items;
addressed each:

- mobile-terminal-pane: track xterm in state instead of a ref so the
  active-sender registration effect re-runs once xterm is ready. With
  the ref, the effect ran once on mount, found xtermRef.current === null
  while PassthroughTerminal was still initializing (notably under the
  ResizeObserver fallback path when the container starts at 0×0), and
  silently never registered — leaving the key-bar wired to the default
  shell instead of the visible terminal.
- send-shell-input: wrap the activeSender call in try/catch so a stale
  registry entry (xterm GC'd mid-frame) falls back to the WS path
  instead of dropping the keystroke and silently consuming modifiers.
  Added tests for the activeSender routing branch (success, modifier
  consumption, fallback on throw).
- mobile-sessions-section: remove the dead `showCloseConfirm ? "Delete" : "Delete"`
  ternary and the unused prop on SessionActionsMenu.
- use-mobile-terminals: clear the auto-create guard when addTerminal()
  rejects so the user gets a retry instead of an empty terminal list.
- mobile-repo-pill: sort taskRepos by position before falling back to
  the first repo, so the pill label matches the picker's ordering when
  no session is active yet.
- session-task-switcher-sheet-hooks: catch loadTaskSessionsForTask
  rejection in handleSelectTask (was an unhandled rejection that left
  the sheet open on backend errors), and stabilize useCallback deps in
  handleWorkspaceChange by spreading the SheetNavOptions fields so a
  fresh literal each render doesn't defeat memoization. Extracted
  selectTaskWithoutPrimarySession to keep useSheetActions under the
  function-size lint cap.

* fix(web): preserve task.repositories in sheet-hooks kanban mappers

mapSnapshotToKanban (workspace switch) and handleTaskCreated (newly
created task) only carried the first repository_id, dropping the full
TaskRepository array. The mobile repo picker (useTaskRepoCount +
MobileReposSection) reads task.repositories.length, so it silently
disappeared after a workspace switch and for freshly created
multi-repo tasks. Map the array with the same shape the SSR mapper
uses (id, repository_id, base_branch, checkout_branch, position).

Also address a small nit: wrap addTerminal in an arrow at the New
terminal button so the click MouseEvent isn't passed as the (unused)
first argument.

* fix(web): de-dup mobile terminal auto-create + add state-label tests + repo-tap toast

- use-mobile-terminals: move the auto-create-first-shell guard from
  per-instance refs to a module-level Set keyed by environmentId.
  MobileTerminalPane mounts useMobileTerminals three times for the
  same session (the pane itself, the picker pill via
  useActiveTerminalPillLabel, and the picker sheet content via
  MobileTerminalsList — Vaul keeps it mounted while closed). With per-
  instance guards, all three effects ran on first commit and each
  fired createUserShell, racing into up to three shells. The shared
  Set ensures only the first effect to observe an empty list creates,
  with retry-on-failure preserved (delete + next render re-checks).
- mobile-repos-section: tapping a repo with no sessions now toasts a
  hint to open the session picker, instead of silently doing nothing.
- state-labels: add tests covering known mappings, null/undefined
  fallbacks, and unknown-state passthrough for both formatters.

* fix(web): single useMobileTerminals via context + tests + drop dead export

Address two follow-up review items:

- Lift useMobileTerminals to a single MobileTerminalsProvider owned by
  MobileTerminalPane. The picker pill and the picker sheet's list now
  read state from useMobileTerminalsContext instead of calling
  useMobileTerminals themselves. The previous setup had three
  independent useState-backed lists that drifted out of sync after
  addTerminal/removeTerminal — the pane could show a stale active
  terminal and the pill count could lag until a server WS push
  reconciled them. The module-level guard (added in 9488bb0c) fixed
  the creation race; this fix ensures the live list stays consistent
  too.
- Drop the dead `subscribeActiveTerminalSender` export from the mobile
  active-terminal registry. The keybar reads via getActiveTerminalSender;
  notify/subscribe was speculative scaffolding with no production
  consumer. Test trimmed accordingly.
- Add use-mobile-terminals.test.ts covering the auto-create logic
  (initial create, skip when shells exist, skip while loading,
  multiple instances trigger only one creation, retry after failure).
  Module-level guard exposes a __resetAutoCreatedEnvironmentsForTest
  helper so tests start from a clean slate.

* test(web): capture binary AttachAddon frames in mobile keybar e2e helper

The mobile-terminal-keybar Playwright spec asserted on captured
shell.input WS frames. After this PR, the on-screen mobile terminal is
a PassthroughTerminal with its own AttachAddon WebSocket, and the
keybar routes input through xterm.paste() — bytes go on the binary
terminal WS, not the kandev gateway's shell.input action. The capture
helper missed those frames and every keybar-asserts-on-frame test
failed (Ctrl+L, Shift+Tab, Esc, arrows, symbols, etc.).

Extend attachShellInputCapture to also decode binary terminal frames
(skipping the resize tag 0x01 prefix used by useSendResize) so the
existing assertions on `data` continue to work regardless of which
transport carried them.

* fix(web): keybar control chars + session pill propagation + terminal close ordering

Round-3 review feedback. Several real bugs that the previous rounds'
mocks hadn't caught:

- mobile-terminal-pane: switch from xterm.paste(data) to
  xterm.input(data, true). paste() wraps the payload in bracketed-paste
  escapes (\\e[200~…\\e[201~) under bash/zsh/fish, so every control
  byte from the keybar (^C, arrow keys, Esc, ^D, Tab) was landing in
  the shell as literal pasted text instead of as a control signal.
- session-mobile-layout: TaskChatPanel and the agent PassthroughTerminal
  were rendering with the URL-derived `sessionId` prop instead of the
  store-driven `effectiveSessionId`. The session picker would update
  the top bar and terminal pane (which already read effectiveSessionId)
  but the chat content and passthrough agent stayed on the old session
  until a navigation refresh. Both consumers now follow
  effectiveSessionId; the now-unused `sessionId` prop is removed from
  MobileChatPanelContent + MobilePanelArea.
- mobile-terminals-section: rework handleConfirmClose. Stop the remote
  shell first (and only mutate the picker on success), advance
  setRightPanelActiveTab to a remaining terminal when the closed one
  was active so terminalTabValue doesn't dangle, and call
  releaseAutoCreatedEnvironment when terminals drop to 0 so the pane
  recreates a default shell on next render instead of getting stuck
  on "Starting terminal…". Extracted as a useTerminalCloseHandler hook
  to keep the list under the function-size lint cap.
- session-task-switcher-sheet-hooks: handleTaskCreated now merges
  session-derived fields (primarySessionId, sessionCount, etc.) from
  the existing kanban entry, with meta.taskSessionId as the priority
  source — so an "edit" call doesn't wipe the existing session and a
  "create with session" call sets primarySessionId correctly.
  Extracted into buildKanbanTaskUpsert + mergeSessionFields +
  mapTaskRepositories helpers.
- session-task-switcher-sheet-hooks: mapSnapshotToKanban now carries
  optional step fields (allow_manual_move, prompt, is_start_step,
  show_in_command_panel, agent_profile_id) so the kanban store keeps
  step capabilities after a workspace switch.
- use-mobile-terminals: add releaseAutoCreatedEnvironment(envId) — a
  runtime API to clear the module-level guard for one env, used by the
  picker when the user closes the last terminal.
- use-mobile-terminals.test: extract SESSION_ID constant.

* fix(web): restore mobile keybar modifier transforms with manual input routing

Round-3 swapped mobile from ShellTerminal → PassthroughTerminal, which
made AttachAddon auto-send xterm.onData straight to the WebSocket.
That bypassed sendShellInput's modifier transform — so OS-keyboard
input on mobile (e.g. tap Ctrl on the key-bar, then press "l") sent
the raw "l" instead of "\\x0c" (form feed). Multiple e2e keybar tests
caught this; my prior xterm.input(data, true) attempt only fixed the
key-bar tap path, not OS-keyboard typing.

Add `manualInputRouting` + `onWsReady` props to PassthroughTerminal
(plumbed through useWebSocketConnection / startReconnectLoop /
connectWebSocket). When `manualInputRouting` is true, AttachAddon is
constructed with `bidirectional: false` so it only handles PTY → screen,
and the consumer is responsible for forwarding xterm.onData itself.

Mobile TerminalSlot now:
- passes manualInputRouting=true and an onWsReady callback that
  registers an active-terminal sender writing raw bytes to that
  terminal's dedicated WS (replacing the prior xterm.input registry).
- attaches its own xterm.onData listener that calls sendShellInput,
  which applies the key-bar's sticky Ctrl/Shift transforms before
  forwarding via the registered sender.

Net effect: both key-bar taps AND OS-keyboard typing flow through
sendShellInput on mobile, so modifiers apply uniformly. Desktop
unaffected (default bidirectional AttachAddon path unchanged).

Also extracted teardownWebSocket into ws-reconnect to keep the
use-passthrough-terminal file under the line-count cap after the
new options.

* fix(web): tighten mobile sender registration + Set Primary + launch return

- mobile-sessions-section: drop the borrowed isSessionStoppable guard
  on the "Set as Primary" item. The backend session.set_primary action
  has no such restriction, so a COMPLETED or FAILED session was being
  silently grayed out. Disable only when isPrimary or state isn't
  loaded yet.
- mobile-terminal-pane: register the active key-bar sender only while
  the dedicated WebSocket is OPEN. Previously the sender went into the
  registry as soon as the tab became active, so during connect /
  reconnect it would silently no-op instead of letting sendShellInput
  fall through to its WS path. Track ws in state, drop it on close,
  and gate registration on readyState === OPEN.
- session-task-switcher-sheet-hooks: early-return after a successful
  launchSession so we don't redundantly call setActiveTask after
  setActiveSession. Mirrors the existing "sessions exist" branch.
2026-05-06 19:05:21 +01:00

113 lines
3.8 KiB
TypeScript

"use client";
import { useCallback } from "react";
import { useAppStore, useAppStoreApi } from "@/components/state-provider";
import { useToast } from "@/components/toast-provider";
import { getWebSocketClient } from "@/lib/ws/connection";
import type { TaskSessionState } from "@/lib/types/http";
export function isSessionStoppable(s: TaskSessionState): boolean {
return s === "RUNNING" || s === "STARTING" || s === "WAITING_FOR_INPUT";
}
export function isSessionDeletable(s: TaskSessionState): boolean {
return s !== "RUNNING" && s !== "STARTING";
}
export function isSessionResumable(s: TaskSessionState): boolean {
return s === "COMPLETED" || s === "FAILED" || s === "CANCELLED";
}
type SessionActionsArgs = {
sessionId: string | null | undefined;
taskId: string | null;
/** Optional callback after a successful delete (e.g. close a tab/panel). */
onDeleted?: () => void;
};
type WsActionFn = (
action: string,
label: string,
payload: Record<string, unknown>,
timeout?: number,
) => Promise<boolean>;
function useWsAction(): WsActionFn {
const { toast, updateToast } = useToast();
return useCallback(
async (action, label, payload, timeout = 15000) => {
const client = getWebSocketClient();
if (!client) return false;
const toastId = toast({ title: `${label}...`, variant: "loading" });
try {
await client.request(action, payload, timeout);
updateToast(toastId, { title: `${label} successful`, variant: "success" });
return true;
} catch (error) {
const msg = error instanceof Error ? error.message : "Unknown error";
updateToast(toastId, { title: `${label} failed`, description: msg, variant: "error" });
return false;
}
},
[toast, updateToast],
);
}
/**
* Shared lifecycle actions for a session (set-primary, stop, resume, delete).
* Handles backend coordination + local store cleanup. Caller can pass
* `onDeleted` to perform UI-specific teardown (e.g. dockview panel removal).
*/
export function useSessionActions({ sessionId, taskId, onDeleted }: SessionActionsArgs) {
const wsAction = useWsAction();
const removeTaskSession = useAppStore((state) => state.removeTaskSession);
const appStoreApi = useAppStoreApi();
const setPrimary = useCallback(
() => sessionId && wsAction("session.set_primary", "Set primary", { session_id: sessionId }),
[sessionId, wsAction],
);
const stop = useCallback(
() => sessionId && wsAction("session.stop", "Stopping session", { session_id: sessionId }),
[sessionId, wsAction],
);
const resume = useCallback(
() =>
sessionId &&
taskId &&
wsAction(
"session.launch",
"Resuming session",
{ task_id: taskId, intent: "resume", session_id: sessionId },
30000,
),
[sessionId, taskId, wsAction],
);
const remove = useCallback(async () => {
if (!sessionId || !taskId) return;
const ok = await wsAction("session.delete", "Deleting session", { session_id: sessionId });
if (!ok) return;
// Switch the active session BEFORE removing from the store so callers
// observing activeSessionId don't briefly point at a deleted session.
const state = appStoreApi.getState();
if (state.tasks.activeSessionId === sessionId) {
const sessions = state.taskSessionsByTask.itemsByTaskId[taskId] ?? [];
const remaining = sessions
.filter((s) => s.id !== sessionId)
.sort((a, b) => new Date(b.started_at).getTime() - new Date(a.started_at).getTime());
if (remaining.length > 0) {
state.setActiveSessionAuto(taskId, remaining[0].id);
} else {
state.clearActiveSession();
}
}
removeTaskSession(taskId, sessionId);
onDeleted?.();
}, [sessionId, taskId, wsAction, removeTaskSession, appStoreApi, onDeleted]);
return { setPrimary, stop, resume, remove };
}