@mndrk/agx 2.0.55 → 2.1.0

package/cloud-runtime/standalone/apps/local/components/terminal/ProjectTerminal.tsx

@@ -1,6 +1,8 @@
 "use client";
 
 import { useEffect, useRef, useState, type PointerEvent as ReactPointerEvent } from "react";
+import { useParams } from "next/navigation";
+import { useInputCapabilities } from "@/hooks/useInputCapabilities";
 import { useTerminalTabsStore } from "@/state/terminalTabs";
 import { useUrlSelection } from "@/hooks/useUrlSelection";
 import TerminalSessionList from "./TerminalSessionList";
@@ -17,6 +19,8 @@ const GRID_MAX_ROW_SPAN = 4;
 const GRID_MIN_ROW_HEIGHT_PX = 320;
 const GRID_MAX_ROW_HEIGHT_PX = 520;
 
+const DEFAULT_PROJECT_KEY = "__global__";
+
 type EditingTerminal = {
   sessionId: string;
   terminalId: string;
@@ -37,7 +41,11 @@ type ResizeState = {
 type TerminalLayoutMode = "single" | "split" | "grid";
 
 export default function ProjectTerminal() {
-  const sessions = useTerminalTabsStore((s) => s.sessions);
+  const params = useParams<{ slug?: string }>();
+  const projectId = params?.slug ?? DEFAULT_PROJECT_KEY;
+
+  const { isTouchLayout } = useInputCapabilities();
+  const sessions = useTerminalTabsStore((s) => s.getProjectSessions(projectId));
   const createSession = useTerminalTabsStore((s) => s.createSession);
   const closeSession = useTerminalTabsStore((s) => s.closeSession);
   const renameSession = useTerminalTabsStore((s) => s.renameSession);
@@ -56,6 +64,8 @@ export default function ProjectTerminal() {
   const [editingTerminal, setEditingTerminal] = useState<EditingTerminal | null>(null);
   const [editingTitle, setEditingTitle] = useState("");
   const [resizeState, setResizeState] = useState<ResizeState | null>(null);
+  const [touchSessionListOpen, setTouchSessionListOpen] = useState(false);
+  const [touchActiveTerminalId, setTouchActiveTerminalId] = useState<string | null>(null);
 
   function clamp(value: number, min: number, max: number): number {
     return Math.max(min, Math.min(max, value));
@@ -74,10 +84,10 @@ export default function ProjectTerminal() {
   // Auto-create first session if none exist
   useEffect(() => {
     if (sessions.length === 0) {
-      const id = createSession();
+      const id = createSession(projectId);
       replaceSelection({ session: id });
     }
-  }, [sessions.length, createSession, replaceSelection]);
+  }, [sessions.length, createSession, replaceSelection, projectId]);
 
   // Auto-select first session if none selected but sessions exist
   useEffect(() => {
@@ -95,6 +105,23 @@ export default function ProjectTerminal() {
 
   const selectedSession = sessions.find((s) => s.id === selectedId);
 
+  useEffect(() => {
+    if (!isTouchLayout) {
+      return;
+    }
+
+    const nextTerminalId = selectedSession?.terminals[0]?.id ?? null;
+    setTouchActiveTerminalId((current) => {
+      if (!selectedSession) {
+        return null;
+      }
+      if (current && selectedSession.terminals.some((terminal) => terminal.id === current)) {
+        return current;
+      }
+      return nextTerminalId;
+    });
+  }, [isTouchLayout, selectedSession]);
+
   useEffect(() => {
     const grid = gridRef.current;
     if (!grid) return;
@@ -150,7 +177,7 @@ export default function ProjectTerminal() {
         ),
       );
 
-      updateTerminalLayout(resizeState.sessionId, resizeState.terminalId, {
+      updateTerminalLayout(projectId, resizeState.sessionId, resizeState.terminalId, {
         colSpan: nextColSpan,
         rowSpan: nextRowSpan,
       });
@@ -169,11 +196,12 @@ export default function ProjectTerminal() {
       window.removeEventListener("pointermove", onPointerMove);
       window.removeEventListener("pointerup", onPointerUp);
     };
-  }, [resizeState, updateTerminalLayout]);
+  }, [resizeState, updateTerminalLayout, projectId]);
 
   function handleCreate() {
-    const id = createSession();
+    const id = createSession(projectId);
     replaceSelection({ session: id });
+    setTouchSessionListOpen(false);
   }
 
   function handleClose(id: string) {
@@ -188,12 +216,12 @@ export default function ProjectTerminal() {
         // Best-effort cleanup. The session is still removed from the UI.
       });
     });
-    closeSession(id);
+    closeSession(projectId, id);
   }
 
   function handleAddTerminal() {
     if (!selectedSession) return;
-    addTerminal(selectedSession.id);
+    addTerminal(projectId, selectedSession.id);
   }
 
   function handleCloseTerminal(sessionId: string, terminalId: string) {
@@ -209,7 +237,7 @@ export default function ProjectTerminal() {
     ).catch(() => {
       // Best-effort cleanup. The terminal is still removed from the UI.
     });
-    closeTerminal(sessionId, terminalId);
+    closeTerminal(projectId, sessionId, terminalId);
   }
 
   function handleStartRenameTerminal(sessionId: string, terminal: TerminalInstance) {
@@ -221,7 +249,7 @@ export default function ProjectTerminal() {
     if (!editingTerminal) return;
     const nextTitle = editingTitle.trim();
     if (nextTitle) {
-      renameTerminal(editingTerminal.sessionId, editingTerminal.terminalId, nextTitle);
+      renameTerminal(projectId, editingTerminal.sessionId, editingTerminal.terminalId, nextTitle);
     }
     setEditingTerminal(null);
     setEditingTitle("");
@@ -229,6 +257,11 @@ export default function ProjectTerminal() {
 
   function handleSelect(id: string) {
     replaceSelection({ session: id });
+    setTouchSessionListOpen(false);
+  }
+
+  function handleRenameSession(id: string, title: string) {
+    renameSession(projectId, id, title);
   }
 
   function terminalStatusDotClass(status: TerminalStatus): string {
@@ -349,10 +382,10 @@ export default function ProjectTerminal() {
             key={terminal.id}
             tabId={terminal.id}
             onSessionReady={(backendSessionId) =>
-              setTerminalSessionId(sessionId, terminal.id, backendSessionId)
+              setTerminalSessionId(projectId, sessionId, terminal.id, backendSessionId)
             }
             onStatusChange={(status) =>
-              updateTerminalStatus(sessionId, terminal.id, status)
+              updateTerminalStatus(projectId, sessionId, terminal.id, status)
             }
           />
         </div>
@@ -373,96 +406,207 @@ export default function ProjectTerminal() {
 
   return (
     <div className="flex h-full bg-[var(--background)]">
-      {/* Left panel — session list */}
-      <div className="flex w-[320px] shrink-0 flex-col border-r border-[var(--card-border)] overflow-hidden">
-        <TerminalSessionList
-          sessions={sessions}
-          selectedId={selectedId}
-          onSelect={handleSelect}
-          onCreate={handleCreate}
-          onClose={handleClose}
-          onRename={renameSession}
-        />
-      </div>
+      {isTouchLayout ? (
+        <div className="relative flex min-h-0 flex-1 flex-col">
+          {touchSessionListOpen ? (
+            <>
+              <button
+                type="button"
+                className="absolute inset-0 z-20 bg-black/40"
+                onClick={() => setTouchSessionListOpen(false)}
+                aria-label="Close terminal sessions"
+              />
+              <div className="absolute inset-y-0 left-0 z-30 w-[min(360px,88vw)] overflow-hidden border-r border-[var(--card-border)] bg-[var(--background)] shadow-2xl">
+                <TerminalSessionList
+                  sessions={sessions}
+                  selectedId={selectedId}
+                  onSelect={handleSelect}
+                  onCreate={handleCreate}
+                  onClose={handleClose}
+                  onRename={handleRenameSession}
+                />
+              </div>
+            </>
+          ) : null}
 
-      {/* Right panel — terminal output */}
-      <div className="flex-1 min-w-0 min-h-0 relative">
-        {selectedSession ? (
-          <div className="flex h-full min-h-0 flex-col">
-            <div className="flex items-center justify-between border-b border-[var(--app-shell-border)] px-4 py-3">
-              <div className="min-w-0">
-                <div className="truncate text-sm font-semibold text-[var(--foreground)]">
-                  {selectedSession.title}
-                </div>
-                <div className="text-xs text-[var(--muted-foreground)]">
-                  {selectedSession.terminals.length} terminal
-                  {selectedSession.terminals.length === 1 ? "" : "s"} in this session
-                </div>
+          <div className="flex items-center justify-between border-b border-[var(--app-shell-border)] px-4 py-3">
+            <div className="min-w-0">
+              <div className="truncate text-sm font-semibold text-[var(--foreground)]">
+                {selectedSession?.title ?? "Terminal"}
               </div>
+              <div className="text-xs text-[var(--muted-foreground)]">
+                {selectedSession
+                  ? `${selectedSession.terminals.length} terminal${selectedSession.terminals.length === 1 ? "" : "s"} in this session`
+                  : "Select a session or create a new one"}
+              </div>
+            </div>
 
+            <div className="flex items-center gap-2">
               <button
                 type="button"
-                onClick={handleAddTerminal}
+                onClick={() => setTouchSessionListOpen(true)}
                 className="inline-flex items-center gap-2 rounded-md border border-[var(--app-shell-border)] bg-[var(--app-shell-surface)] px-3 py-1.5 text-sm text-[var(--foreground)] transition-colors hover:bg-[var(--muted)]/15"
               >
-                <Plus size={14} />
-                Add terminal
+                <Terminal size={14} />
+                Sessions
               </button>
+              {selectedSession ? (
+                <button
+                  type="button"
+                  onClick={handleAddTerminal}
+                  className="inline-flex items-center gap-2 rounded-md border border-[var(--app-shell-border)] bg-[var(--app-shell-surface)] px-3 py-1.5 text-sm text-[var(--foreground)] transition-colors hover:bg-[var(--muted)]/15"
+                >
+                  <Plus size={14} />
+                  Add terminal
+                </button>
+              ) : null}
             </div>
+          </div>
 
-            {(() => {
-              const terminalCount = selectedSession.terminals.length;
-              const layoutMode: TerminalLayoutMode =
-                terminalCount === 1
-                  ? "single"
-                  : terminalCount === 2
-                    ? "split"
-                    : "grid";
-
-              return (
-                <div
-                  className={`min-h-0 flex-1 p-3 ${
-                    layoutMode === "grid" ? "overflow-auto" : "overflow-hidden"
-                  }`}
-                >
-                  <div
-                    ref={gridRef}
-                    className={`grid gap-3 ${
-                      layoutMode === "single" ? "h-full grid-cols-1" : ""
-                    } ${
-                      layoutMode === "split" ? "h-full grid-cols-2" : ""
-                    }`}
-                    style={
-                      layoutMode === "grid"
-                        ? {
-                            gridTemplateColumns: `repeat(${gridColumns}, minmax(0, 1fr))`,
-                            gridAutoRows: `${gridRowHeight}px`,
-                          }
-                        : {
-                            gridTemplateRows: "minmax(0, 1fr)",
-                          }
-                    }
-                  >
-                    {selectedSession.terminals.map((terminal) =>
-                      renderTerminalCard(
-                        selectedSession.id,
-                        terminal,
-                        selectedSession.terminals.length,
-                        layoutMode,
-                      ),
-                    )}
-                  </div>
+          {selectedSession ? (
+            <>
+              {selectedSession.terminals.length > 1 ? (
+                <div className="flex gap-2 overflow-x-auto border-b border-[var(--app-shell-border)] px-3 py-2">
+                  {selectedSession.terminals.map((terminal) => (
+                    <button
+                      key={terminal.id}
+                      type="button"
+                      onClick={() => setTouchActiveTerminalId(terminal.id)}
+                      className={`shrink-0 rounded-full px-3 py-1.5 text-xs font-medium transition-colors ${
+                        touchActiveTerminalId === terminal.id
+                          ? "bg-[var(--card-bg)] text-[var(--foreground)]"
+                          : "text-[var(--muted-foreground)] hover:bg-[var(--card-bg)] hover:text-[var(--foreground)]"
+                      }`}
+                    >
+                      {terminal.title}
+                    </button>
+                  ))}
                 </div>
-              );
-            })()}
+              ) : null}
+
+              <div className="min-h-0 flex-1 p-3">
+                {(() => {
+                  const terminal =
+                    selectedSession.terminals.find((item) => item.id === touchActiveTerminalId) ??
+                    selectedSession.terminals[0];
+                  if (!terminal) {
+                    return (
+                      <div className="flex h-full items-center justify-center text-sm text-[var(--muted-foreground)]">
+                        No terminals in this session yet.
+                      </div>
+                    );
+                  }
+
+                  return renderTerminalCard(
+                    selectedSession.id,
+                    terminal,
+                    selectedSession.terminals.length,
+                    "single",
+                  );
+                })()}
+              </div>
+            </>
+          ) : (
+            <div className="flex flex-1 flex-col items-center justify-center text-[var(--muted-foreground)] gap-3">
+              <Terminal size={32} className="opacity-30" />
+              <p className="text-sm">Select a session or create a new one</p>
+            </div>
+          )}
+        </div>
+      ) : (
+        <>
+          {/* Left panel — session list */}
+          <div className="flex w-[320px] shrink-0 flex-col border-r border-[var(--card-border)] overflow-hidden">
+            <TerminalSessionList
+              sessions={sessions}
+              selectedId={selectedId}
+              onSelect={handleSelect}
+              onCreate={handleCreate}
+              onClose={handleClose}
+              onRename={handleRenameSession}
+            />
           </div>
-        ) : (
-          <div className="flex flex-col items-center justify-center h-full text-[var(--muted-foreground)] gap-3">
-            <Terminal size={32} className="opacity-30" />
-            <p className="text-sm">Select a session or create a new one</p>
+
+          {/* Right panel — terminal output */}
+          <div className="flex-1 min-w-0 min-h-0 relative">
+            {selectedSession ? (
+              <div className="flex h-full min-h-0 flex-col">
+                <div className="flex items-center justify-between border-b border-[var(--app-shell-border)] px-4 py-3">
+                  <div className="min-w-0">
+                    <div className="truncate text-sm font-semibold text-[var(--foreground)]">
+                      {selectedSession.title}
+                    </div>
+                    <div className="text-xs text-[var(--muted-foreground)]">
+                      {selectedSession.terminals.length} terminal
+                      {selectedSession.terminals.length === 1 ? "" : "s"} in this session
+                    </div>
+                  </div>
+
+                  <button
+                    type="button"
+                    onClick={handleAddTerminal}
+                    className="inline-flex items-center gap-2 rounded-md border border-[var(--app-shell-border)] bg-[var(--app-shell-surface)] px-3 py-1.5 text-sm text-[var(--foreground)] transition-colors hover:bg-[var(--muted)]/15"
+                  >
+                    <Plus size={14} />
+                    Add terminal
+                  </button>
+                </div>
+
+                {(() => {
+                  const terminalCount = selectedSession.terminals.length;
+                  const layoutMode: TerminalLayoutMode =
+                    terminalCount === 1
+                      ? "single"
+                      : terminalCount === 2
+                        ? "split"
+                        : "grid";
+
+                  return (
+                    <div
+                      className={`min-h-0 flex-1 p-3 ${
+                        layoutMode === "grid" ? "overflow-auto" : "overflow-hidden"
+                      }`}
+                    >
+                      <div
+                        ref={gridRef}
+                        className={`grid gap-3 ${
+                          layoutMode === "single" ? "h-full grid-cols-1" : ""
+                        } ${
+                          layoutMode === "split" ? "h-full grid-cols-2" : ""
+                        }`}
+                        style={
+                          layoutMode === "grid"
+                            ? {
+                                gridTemplateColumns: `repeat(${gridColumns}, minmax(0, 1fr))`,
+                                gridAutoRows: `${gridRowHeight}px`,
+                              }
+                            : {
+                                gridTemplateRows: "minmax(0, 1fr)",
+                              }
+                        }
+                      >
+                        {selectedSession.terminals.map((terminal) =>
+                          renderTerminalCard(
+                            selectedSession.id,
+                            terminal,
+                            selectedSession.terminals.length,
+                            layoutMode,
+                          ),
+                        )}
+                      </div>
+                    </div>
+                  );
+                })()}
+              </div>
+            ) : (
+              <div className="flex flex-col items-center justify-center h-full text-[var(--muted-foreground)] gap-3">
+                <Terminal size={32} className="opacity-30" />
+                <p className="text-sm">Select a session or create a new one</p>
+              </div>
+            )}
           </div>
-        )}
-      </div>
+        </>
+      )}
     </div>
   );
 }

package/cloud-runtime/standalone/apps/local/components/terminal/TerminalSessionList.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useRef, useEffect, useMemo } from "react";
 import { Plus, X, Terminal, Search } from "lucide-react";
+import { useInputCapabilities } from "@/hooks/useInputCapabilities";
 import {
   getTerminalSessionStatus,
   type TerminalStatus,
@@ -45,6 +46,7 @@ export default function TerminalSessionList({
   onRename,
   onCreate,
 }: TerminalSessionListProps) {
+  const { isTouchLayout } = useInputCapabilities();
   const [editingId, setEditingId] = useState<string | null>(null);
   const [editValue, setEditValue] = useState("");
   const [search, setSearch] = useState("");
@@ -195,7 +197,7 @@ export default function TerminalSessionList({
                         onClose(session.id);
                       }}
                       className={`mt-0.5 shrink-0 rounded p-0.5 text-[var(--muted-foreground)] transition-colors hover:bg-[var(--app-shell-border)] hover:text-[var(--foreground)] ${
-                        isSelected
+                        isSelected || isTouchLayout
                           ? "opacity-100"
                           : "opacity-0 group-hover:opacity-100"
                       }`}