@mndrk/agx 2.0.55 → 2.0.56

package/cloud-runtime/standalone/apps/local/components/projects/home/ObjectivesSection.tsx

@@ -46,7 +46,7 @@ export function ObjectivesSection({ projectId, projectSlug }: ObjectivesSectionP
     return (
       <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
         {[1, 2].map((i) => (
-          <div key={i} className="h-28 rounded-2xl bg-zinc-800 animate-pulse" />
+          <div key={i} className="h-28 animate-pulse rounded-2xl bg-[var(--muted)]" />
         ))}
       </div>
     );
@@ -57,10 +57,10 @@ export function ObjectivesSection({ projectId, projectSlug }: ObjectivesSectionP
       <button
         type="button"
         onClick={() => router.push(`/projects/${projectSlug}/objectives`)}
-        className="w-full rounded-2xl border border-dashed border-zinc-700 bg-zinc-900/30 p-6 text-center transition-colors hover:border-zinc-600 hover:bg-zinc-800/30"
+        className="w-full rounded-2xl border border-dashed border-[var(--border)] bg-[var(--card-bg)] p-6 text-center transition-colors hover:border-[var(--card-hover-border)] hover:bg-[var(--secondary)]"
       >
-        <Target className="w-5 h-5 text-zinc-500 mx-auto mb-2" />
-        <span className="text-sm text-zinc-400">Add your first objective</span>
+        <Target className="mx-auto mb-2 h-5 w-5 text-[var(--muted-foreground)]" />
+        <span className="text-sm text-[var(--muted-foreground)]">Add your first objective</span>
       </button>
     );
   }
@@ -68,14 +68,14 @@ export function ObjectivesSection({ projectId, projectSlug }: ObjectivesSectionP
   return (
     <div>
       <div className="flex items-center justify-between mb-3">
-        <div className="flex items-center gap-3 text-xs text-zinc-500">
+        <div className="flex items-center gap-3 text-xs text-[var(--muted-foreground)]">
           <span>{objectives.length} {objectives.length === 1 ? "objective" : "objectives"}</span>
-          <span className="text-zinc-700">|</span>
+          <span className="text-[var(--border)]">|</span>
           <span>{completeCount}/{objectives.length} complete</span>
         </div>
         <button
           onClick={() => router.push(`/projects/${projectSlug}/objectives`)}
-          className="flex items-center gap-1 text-xs text-zinc-500 hover:text-zinc-300"
+          className="flex items-center gap-1 text-xs text-[var(--muted-foreground)] transition-colors hover:text-[var(--foreground)]"
         >
           View all <ArrowRight className="w-3 h-3" />
         </button>

package/cloud-runtime/standalone/apps/local/components/projects/home/ToolPathCard.tsx

@@ -16,12 +16,12 @@ export function ToolPathCard({ icon, title, accentClass, onClick, badge, childre
     <button
       type="button"
       onClick={onClick}
-      className="w-full text-left rounded-2xl border border-zinc-800 bg-zinc-900/50 p-4 transition-colors hover:bg-zinc-800/50"
+      className="w-full rounded-2xl border border-[var(--card-border)] bg-[var(--card-bg)] p-4 text-left transition-colors hover:bg-[var(--secondary)]"
     >
       <div className="flex items-center justify-between mb-3">
         <div className="flex items-center gap-2">
           <span className={accentClass}>{icon}</span>
-          <span className="text-sm font-medium text-zinc-200">{title}</span>
+          <span className="text-sm font-medium text-[var(--foreground)]">{title}</span>
         </div>
         {badge}
       </div>

package/cloud-runtime/standalone/apps/local/components/projects/home/ToolPathsSection.tsx

@@ -66,7 +66,7 @@ export function ToolPathsSection({ projectId, projectSlug, primaryThreadId }: To
         onClick={navigateToChat}
         badge={
           threadCount > 0 ? (
-            <span className="rounded-full bg-zinc-800 px-2 py-0.5 text-xs text-zinc-400">
+            <span className="rounded-full bg-[var(--secondary)] px-2 py-0.5 text-xs text-[var(--muted-foreground)]">
               {threadCount}
             </span>
           ) : undefined
@@ -74,15 +74,15 @@ export function ToolPathsSection({ projectId, projectSlug, primaryThreadId }: To
       >
         {threads === null ? (
           <div className="space-y-1.5">
-            {[1, 2].map((i) => <div key={i} className="h-5 rounded bg-zinc-800 animate-pulse" />)}
+            {[1, 2].map((i) => <div key={i} className="h-5 animate-pulse rounded bg-[var(--muted)]" />)}
           </div>
         ) : threads.length === 0 ? (
-          <p className="text-zinc-500">No threads yet</p>
+          <p className="text-[var(--muted-foreground)]">No threads yet</p>
         ) : (
           <div className="space-y-1">
             {threads.map((t) => (
-              <div key={t.id} className="flex items-center gap-2 text-zinc-400 truncate">
-                <MessageSquare className="w-3 h-3 text-zinc-600 shrink-0" />
+              <div key={t.id} className="flex items-center gap-2 truncate text-[var(--foreground)]">
+                <MessageSquare className="h-3 w-3 shrink-0 text-[var(--muted-foreground)]" />
                 <span className="truncate">{t.title}</span>
               </div>
             ))}
@@ -97,7 +97,7 @@ export function ToolPathsSection({ projectId, projectSlug, primaryThreadId }: To
         accentClass="text-emerald-400"
         onClick={() => router.push(`/projects/${projectSlug}/terminal`)}
       >
-        <p className="text-zinc-500">No sessions yet</p>
+        <p className="text-[var(--muted-foreground)]">No sessions yet</p>
       </ToolPathCard>
 
       {/* Linear */}
@@ -109,11 +109,11 @@ export function ToolPathsSection({ projectId, projectSlug, primaryThreadId }: To
         badge={
           !linearLoading ? (
             connected ? (
-              <span className="rounded-full border border-emerald-700/60 bg-emerald-500/10 px-2 py-0.5 text-[11px] text-emerald-400">
+              <span className="rounded-full border border-[var(--status-completed-border)] bg-[var(--status-completed-bg)] px-2 py-0.5 text-[11px] text-[var(--status-completed-text)]">
                 Connected
               </span>
             ) : (
-              <span className="rounded-full border border-zinc-700 bg-zinc-800 px-2 py-0.5 text-[11px] text-zinc-400">
+              <span className="rounded-full border border-[var(--border)] bg-[var(--secondary)] px-2 py-0.5 text-[11px] text-[var(--muted-foreground)]">
                 Connect
               </span>
             )
@@ -121,7 +121,7 @@ export function ToolPathsSection({ projectId, projectSlug, primaryThreadId }: To
         }
       >
         {!linearLoading && !connected && (
-          <p className="text-zinc-500">Connect to see issues</p>
+          <p className="text-[var(--muted-foreground)]">Connect to see issues</p>
         )}
       </ToolPathCard>
     </div>

package/cloud-runtime/standalone/apps/local/components/scheduling/ScheduleConditionPicker.tsx

@@ -224,14 +224,14 @@ function SimpleDropdown<T extends string | number>({
   useEffect(() => {
     if (!open) return;
 
-    const handlePointerDown = (event: MouseEvent) => {
+    const handlePointerDown = (event: PointerEvent) => {
       if (!containerRef.current?.contains(event.target as Node)) {
         setOpen(false);
       }
     };
 
-    document.addEventListener("mousedown", handlePointerDown);
-    return () => document.removeEventListener("mousedown", handlePointerDown);
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => document.removeEventListener("pointerdown", handlePointerDown);
   }, [open]);
 
   return (

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

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useRef, useState, type PointerEvent as ReactPointerEvent } from "react";
+import { useInputCapabilities } from "@/hooks/useInputCapabilities";
 import { useTerminalTabsStore } from "@/state/terminalTabs";
 import { useUrlSelection } from "@/hooks/useUrlSelection";
 import TerminalSessionList from "./TerminalSessionList";
@@ -37,6 +38,7 @@ type ResizeState = {
 type TerminalLayoutMode = "single" | "split" | "grid";
 
 export default function ProjectTerminal() {
+  const { isTouchLayout } = useInputCapabilities();
   const sessions = useTerminalTabsStore((s) => s.sessions);
   const createSession = useTerminalTabsStore((s) => s.createSession);
   const closeSession = useTerminalTabsStore((s) => s.closeSession);
@@ -56,6 +58,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));
@@ -95,6 +99,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;
@@ -174,6 +195,7 @@ export default function ProjectTerminal() {
   function handleCreate() {
     const id = createSession();
     replaceSelection({ session: id });
+    setTouchSessionListOpen(false);
   }
 
   function handleClose(id: string) {
@@ -229,6 +251,7 @@ export default function ProjectTerminal() {
 
   function handleSelect(id: string) {
     replaceSelection({ session: id });
+    setTouchSessionListOpen(false);
   }
 
   function terminalStatusDotClass(status: TerminalStatus): string {
@@ -373,96 +396,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={renameSession}
+                />
+              </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={renameSession}
+            />
           </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"
                       }`}