fix(app): open task manager inside ssh session

Author: skulidropek

docs/pr-screenshots/issue-239/ssh-session-taskmanager-button.png

@@ -11,7 +11,28 @@ import { deleteProjectTerminalSession } from "./api.js"
 import type { createActionContext } from "./app-ready-actions.js"
 import type { ReadyState } from "./app-ready-hooks.js"
 import { browserMenuIndex } from "./menu.js"
-import { projectPickerScreen } from "./screen.js"
+
+type TerminalTaskManagerState = Pick<
+  ReadyState,
+  | "setProjectTaskLogs"
+  | "setProjectTasks"
+  | "setProjectTasksIncludeDefault"
+  | "setSelectedMenuIndex"
+  | "setSelectedProjectId"
+>
+
+export const openTerminalTaskManager = (
+  actionContext: ReturnType<typeof createActionContext>,
+  state: TerminalTaskManagerState,
+  projectId: string
+): void => {
+  state.setSelectedProjectId(projectId)
+  state.setSelectedMenuIndex(browserMenuIndex("Tasks"))
+  state.setProjectTasks(null)
+  state.setProjectTaskLogs("")
+  state.setProjectTasksIncludeDefault(false)
+  loadProjectTasksById(actionContext, projectId, { includeDefault: false })
+}
 
 export const bindTerminalActions = (
   actionContext: ReturnType<typeof createActionContext>,
@@ -30,15 +51,7 @@ export const bindTerminalActions = (
     connectProjectById(projectId, actionContext, projectKey)
   },
   onOpenProjectTaskManagerById: (projectId: string) => {
-    state.setSelectedProjectId(projectId)
-    state.setSelectedMenuIndex(browserMenuIndex("Tasks"))
-    state.setProjectNavigationArmed(true)
-    state.setActiveScreen(projectPickerScreen())
-    state.deactivateTerminalWorkspace()
-    state.setProjectTasks(null)
-    state.setProjectTaskLogs("")
-    state.setProjectTasksIncludeDefault(false)
-    loadProjectTasksById(actionContext, projectId, { includeDefault: false })
+    openTerminalTaskManager(actionContext, state, projectId)
   },
   onAttachProjectTerminalSession: (
     projectId: string,

docs/pr-screenshots/issue-239/ssh-session-taskmanager-open.png

@@ -1,28 +1,40 @@
 import { Effect } from "effect"
-import type { CSSProperties, JSX } from "react"
+import { type CSSProperties, type JSX, useEffect, useState } from "react"
 
 import { deleteTerminalSessionByPath } from "./api.js"
 import { canOpenProjectBrowser } from "./app-ready-browser-openable.js"
 import type { ReadyLayoutProps } from "./app-ready-layout.js"
 import { Box, Text } from "./elements.js"
+import { TaskPanel } from "./panel-tasks.js"
 import { TerminalPanel } from "./panel-terminal.js"
 import { type BrowserScreen, projectPickerScreen } from "./screen.js"
 import { shouldShowTerminalTabs } from "./terminal-mobile-layout.js"
 import { terminalSessionId } from "./terminal-state.js"
 import type { ActiveTerminalSession } from "./terminal.js"
 
+type TerminalWorkspaceView = "terminal" | "tasks"
+
 type TerminalScreenProps = Pick<
   ReadyLayoutProps,
   | "activeTerminalSessionId"
   | "onApplyProjectById"
   | "onOpenProjectBrowserById"
   | "onOpenProjectTaskManagerById"
   | "onOpenProjectTerminalById"
+  | "onLoadProjectTaskLogs"
+  | "onProjectTasksIncludeDefaultChange"
+  | "onRefreshProjectTasks"
   | "onSelectTerminal"
   | "onSetActiveScreen"
+  | "onStopProjectTask"
   | "onTerminalClose"
   | "onTerminalMessage"
+  | "project"
   | "projectBrowser"
+  | "projectTaskLogs"
+  | "projectTasks"
+  | "projectTasksIncludeDefault"
+  | "selectedProjectSummary"
   | "terminalSessions"
   | "viewportLayout"
 >
@@ -34,13 +46,24 @@ type TerminalPaneProps =
     | "onOpenProjectBrowserById"
     | "onOpenProjectTaskManagerById"
     | "onOpenProjectTerminalById"
+    | "onLoadProjectTaskLogs"
+    | "onProjectTasksIncludeDefaultChange"
+    | "onRefreshProjectTasks"
     | "onSetActiveScreen"
+    | "onStopProjectTask"
     | "onTerminalClose"
     | "onTerminalMessage"
+    | "project"
     | "projectBrowser"
+    | "projectTaskLogs"
+    | "projectTasks"
+    | "projectTasksIncludeDefault"
+    | "selectedProjectSummary"
     | "viewportLayout"
   >
   & {
+    readonly taskManagerOpen: boolean
+    readonly onCloseTaskManager: () => void
     readonly singleSession: boolean
     readonly terminalSession: ActiveTerminalSession
   }
@@ -72,8 +95,83 @@ const activeTerminalPaneStyle: CSSProperties = {
   overflow: "hidden"
 }
 
+const taskManagerBodyStyle: CSSProperties = {
+  background: "#080a0d",
+  boxSizing: "border-box",
+  color: "#d6e5f7",
+  height: "100%",
+  overflow: "auto",
+  padding: "10px"
+}
+
+const taskManagerToolbarStyle: CSSProperties = {
+  alignItems: "center",
+  display: "flex",
+  justifyContent: "flex-end",
+  marginBottom: "10px"
+}
+
+const taskManagerReturnButtonStyle: CSSProperties = {
+  background: "#171d24",
+  border: "1px solid #3a4652",
+  borderRadius: "8px",
+  color: "#d6e5f7",
+  cursor: "pointer",
+  font: "inherit",
+  padding: "6px 10px"
+}
+
 const terminalTabLabel = (session: ActiveTerminalSession): string => session.browserProjectName ?? session.header
 
+const TerminalTaskManagerBody = (
+  {
+    onClose,
+    onLoadProjectTaskLogs,
+    onProjectTasksIncludeDefaultChange,
+    onRefreshProjectTasks,
+    onStopProjectTask,
+    project,
+    projectTaskLogs,
+    projectTasks,
+    projectTasksIncludeDefault,
+    selectedProjectSummary
+  }:
+    & Pick<
+      TerminalScreenProps,
+      | "onLoadProjectTaskLogs"
+      | "onProjectTasksIncludeDefaultChange"
+      | "onRefreshProjectTasks"
+      | "onStopProjectTask"
+      | "project"
+      | "projectTaskLogs"
+      | "projectTasks"
+      | "projectTasksIncludeDefault"
+      | "selectedProjectSummary"
+    >
+    & {
+      readonly onClose: () => void
+    }
+): JSX.Element => (
+  <div style={taskManagerBodyStyle}>
+    <div style={taskManagerToolbarStyle}>
+      <button onClick={onClose} style={taskManagerReturnButtonStyle} type="button">
+        Terminal
+      </button>
+    </div>
+    <TaskPanel
+      includeDefault={projectTasksIncludeDefault}
+      logs={projectTaskLogs}
+      onIncludeDefaultChange={onProjectTasksIncludeDefaultChange}
+      onLoadLogs={onLoadProjectTaskLogs}
+      onRefreshTasks={onRefreshProjectTasks}
+      onStopTask={onStopProjectTask}
+      project={project}
+      selectedProjectSummary={selectedProjectSummary}
+      snapshot={projectTasks}
+    />
+  </div>
+)
+
 const TerminalTab = (
   {
     active,
@@ -211,14 +309,25 @@ const TerminalTabs = (
 const TerminalPane = (
   {
     onApplyProjectById,
+    onCloseTaskManager,
+    onLoadProjectTaskLogs,
     onOpenProjectBrowserById,
     onOpenProjectTaskManagerById,
     onOpenProjectTerminalById,
+    onProjectTasksIncludeDefaultChange,
+    onRefreshProjectTasks,
     onSetActiveScreen,
+    onStopProjectTask,
     onTerminalClose,
     onTerminalMessage,
+    project,
     projectBrowser,
+    projectTaskLogs,
+    projectTasks,
+    projectTasksIncludeDefault,
+    selectedProjectSummary,
     singleSession,
+    taskManagerOpen,
     terminalSession,
     viewportLayout
   }: TerminalPaneProps
@@ -227,6 +336,22 @@ const TerminalPane = (
   const browserProjectId = terminalSession.browserProjectId
   const browserProjectKey = terminalSession.browserProjectKey
   const canOpenBrowser = canOpenProjectBrowser(projectBrowser, browserProjectId)
+  const bodyContent = taskManagerOpen && browserProjectId !== undefined
+    ? (
+      <TerminalTaskManagerBody
+        onClose={onCloseTaskManager}
+        onLoadProjectTaskLogs={onLoadProjectTaskLogs}
+        onProjectTasksIncludeDefaultChange={onProjectTasksIncludeDefaultChange}
+        onRefreshProjectTasks={onRefreshProjectTasks}
+        onStopProjectTask={onStopProjectTask}
+        project={project}
+        projectTaskLogs={projectTaskLogs}
+        projectTasks={projectTasks}
+        projectTasksIncludeDefault={projectTasksIncludeDefault}
+        selectedProjectSummary={selectedProjectSummary}
+      />
+    )
+    : undefined
   const detachTerminalSession = (): void => {
     onTerminalClose(sessionId)
     if (singleSession) {
@@ -236,6 +361,7 @@ const TerminalPane = (
   return (
     <div style={activeTerminalPaneStyle}>
       <TerminalPanel
+        bodyContent={bodyContent}
         keyboardOpen={viewportLayout.keyboardOpen}
         mobileMode={viewportLayout.mode === "mobile"}
         onAttachFailure={() => {
@@ -279,12 +405,16 @@ const TerminalPane = (
 }
 
 export const TerminalScreen = (props: TerminalScreenProps): JSX.Element | null => {
-  if (props.terminalSessions.length === 0) {
-    return null
-  }
+  const [terminalView, setTerminalView] = useState<TerminalWorkspaceView>("terminal")
   const mobileMode = props.viewportLayout.mode === "mobile"
   const activeSessionId = resolveActiveTerminalSessionId(props.terminalSessions, props.activeTerminalSessionId)
   const activeSession = props.terminalSessions.find((session) => terminalSessionId(session) === activeSessionId)
+  useEffect(() => {
+    setTerminalView("terminal")
+  }, [activeSession?.browserProjectId, activeSessionId])
+  if (props.terminalSessions.length === 0) {
+    return null
+  }
   return (
     <Box flexDirection="column" flexGrow={1} gap={mobileMode ? "4px" : 1} minHeight={0} overflow="hidden">
       {shouldShowTerminalTabs(mobileMode, props.terminalSessions.length)
@@ -305,14 +435,30 @@ export const TerminalScreen = (props: TerminalScreenProps): JSX.Element | null =
             <TerminalPane
               key={terminalSessionId(activeSession)}
               onApplyProjectById={props.onApplyProjectById}
+              onCloseTaskManager={() => {
+                setTerminalView("terminal")
+              }}
+              onLoadProjectTaskLogs={props.onLoadProjectTaskLogs}
               onOpenProjectBrowserById={props.onOpenProjectBrowserById}
-              onOpenProjectTaskManagerById={props.onOpenProjectTaskManagerById}
+              onOpenProjectTaskManagerById={(projectId) => {
+                setTerminalView("tasks")
+                props.onOpenProjectTaskManagerById(projectId)
+              }}
               onOpenProjectTerminalById={props.onOpenProjectTerminalById}
+              onProjectTasksIncludeDefaultChange={props.onProjectTasksIncludeDefaultChange}
+              onRefreshProjectTasks={props.onRefreshProjectTasks}
               onSetActiveScreen={props.onSetActiveScreen}
+              onStopProjectTask={props.onStopProjectTask}
               onTerminalClose={props.onTerminalClose}
               onTerminalMessage={props.onTerminalMessage}
+              project={props.project}
               projectBrowser={props.projectBrowser}
+              projectTaskLogs={props.projectTaskLogs}
+              projectTasks={props.projectTasks}
+              projectTasksIncludeDefault={props.projectTasksIncludeDefault}
+              selectedProjectSummary={props.selectedProjectSummary}
               singleSession={props.terminalSessions.length === 1}
+              taskManagerOpen={terminalView === "tasks"}
               terminalSession={activeSession}
               viewportLayout={props.viewportLayout}
             />

packages/app/src/web/app-ready-terminal-actions.ts

@@ -29,6 +29,7 @@ type TerminalPanelProps = {
   readonly onOpenTaskManager?: (() => void) | undefined
   readonly onOpenTerminal?: (() => void) | undefined
   readonly session: ActiveTerminalSession
+  readonly bodyContent?: JSX.Element | undefined
 }
 
 const panelStyle: CSSProperties = {
@@ -88,6 +89,31 @@ const terminalBodyStyle = (compactTypingMode: boolean, mobileMode: boolean): CSS
   return mobileMode ? bodyStyleMobile : bodyStyle
 }
 
+const terminalBodyFrameStyle = (compactTypingMode: boolean, mobileMode: boolean): CSSProperties => ({
+  ...terminalBodyStyle(compactTypingMode, mobileMode),
+  boxSizing: "border-box",
+  overflow: "hidden",
+  position: "relative"
+})
+
+const terminalHostStyle: CSSProperties = {
+  height: "100%",
+  minHeight: 0,
+  overflow: "hidden"
+}
+
+const terminalBodyContentStyle: CSSProperties = {
+  bottom: 0,
+  height: "100%",
+  left: 0,
+  minHeight: 0,
+  overflow: "auto",
+  position: "absolute",
+  right: 0,
+  top: 0,
+  zIndex: 1
+}
+
 const closeButtonStyle: CSSProperties = {
   background: "#171d24",
   border: "1px solid #3a4652",
@@ -504,6 +530,7 @@ const MobileTerminalControls = (
 
 export const TerminalPanel = (
   {
+    bodyContent,
     keyboardOpen,
     mobileMode,
     onApplyProject,
@@ -539,6 +566,7 @@ export const TerminalPanel = (
   }, [])
   const compactHeaderMode = resolveTerminalCompactHeaderMode(mobileMode)
   const compactTypingMode = resolveTerminalTypingMode(mobileMode, keyboardOpen)
+  const hasBodyContent = bodyContent !== undefined
 
   useEffect(() => {
     if (!mobileMode) {
@@ -611,10 +639,12 @@ export const TerminalPanel = (
         status={status}
       />
       <div
-        ref={hostRef}
-        style={terminalBodyStyle(compactTypingMode, mobileMode)}
-      />
-      {mobileMode
+        style={terminalBodyFrameStyle(compactTypingMode, mobileMode)}
+      >
+        <div ref={hostRef} style={terminalHostStyle} />
+        {hasBodyContent ? <div style={terminalBodyContentStyle}>{bodyContent}</div> : null}
+      </div>
+      {mobileMode && !hasBodyContent
         ? (
           <MobileTerminalControls
             collapsed={mobileControlsCollapsed}