@mndrk/agx 2.0.55 → 2.0.56

package/cloud-runtime/standalone/apps/local/components/graph/NodeDetailPanel.tsx

@@ -5,6 +5,7 @@ import * as Diff from "diff";
 
 import { useGraphUIStore, resolveNodeActionInGraph, type NodeAction } from "@/components/graph/useGraphUIStore";
 import { formatNodeStatusLabel, getNodeLabel } from "@/components/graph/graph-derived";
+import { useInputCapabilities } from "@/hooks/useInputCapabilities";
 import { sanitizeTaskObjective } from "@/src/graph/objective";
 import type {
   ExecutionGraph,
@@ -144,6 +145,7 @@ export default function NodeDetailPanel({
   onShowLogs,
   onRefetch,
 }: NodeDetailPanelProps) {
+  const { isTouchLayout } = useInputCapabilities();
   const selectedNodeId = useGraphUIStore((state) => state.selectedNodeId);
   const triggeringNodeId = useGraphUIStore((state) => state.triggeringNodeId);
   
@@ -165,12 +167,13 @@ export default function NodeDetailPanel({
   
   // Resize handling
   const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    if (isTouchLayout) return;
     e.preventDefault();
     setIsResizing(true);
-  }, []);
+  }, [isTouchLayout]);
   
   useEffect(() => {
-    if (!isResizing) return;
+    if (!isResizing || isTouchLayout) return;
     
     const handleMouseMove = (e: MouseEvent) => {
       const newWidth = window.innerWidth - e.clientX;
@@ -188,7 +191,7 @@ export default function NodeDetailPanel({
       document.removeEventListener("mousemove", handleMouseMove);
       document.removeEventListener("mouseup", handleMouseUp);
     };
-  }, [isResizing]);
+  }, [isResizing, isTouchLayout]);
   
   // Reset diff selection when node changes
   useEffect(() => {
@@ -235,17 +238,28 @@ export default function NodeDetailPanel({
     : "";
   
   return (
-    <aside
-      ref={panelRef}
-      className={`node-detail-panel ${isOpen ? "node-detail-panel--open" : ""}`}
-      style={{ width: `${width}px` }}
-    >
+    <>
+      {isTouchLayout ? (
+        <button
+          type="button"
+          className="fixed inset-0 z-40 bg-black/40"
+          onClick={onClose}
+          aria-label="Close node details"
+        />
+      ) : null}
+      <aside
+        ref={panelRef}
+        className={`node-detail-panel ${isOpen ? "node-detail-panel--open" : ""}${isTouchLayout ? " node-detail-panel--touch" : ""}`}
+        style={isTouchLayout ? undefined : { width: `${width}px` }}
+      >
       {/* Resize handle */}
-      <div
-        ref={resizeHandleRef}
-        className={`node-detail-panel__resize-handle ${isResizing ? "node-detail-panel__resize-handle--active" : ""}`}
-        onMouseDown={handleMouseDown}
-      />
+      {!isTouchLayout ? (
+        <div
+          ref={resizeHandleRef}
+          className={`node-detail-panel__resize-handle ${isResizing ? "node-detail-panel__resize-handle--active" : ""}`}
+          onMouseDown={handleMouseDown}
+        />
+      ) : null}
       
       {/* Header */}
       <header className="node-detail-panel__header">
@@ -492,7 +506,8 @@ export default function NodeDetailPanel({
           </div>
         )}
       </div>
-    </aside>
+      </aside>
+    </>
   );
 }
 

package/cloud-runtime/standalone/apps/local/components/graph/NodeInspector.tsx

@@ -3,6 +3,7 @@
 import { useState, useRef, useEffect, useCallback } from "react";
 import { formatNodeStatusLabel, getNodeLabel } from "@/components/graph/graph-derived";
 import { useGraphUIStore, resolveNodeActionInGraph, type NodeAction } from "@/components/graph/useGraphUIStore";
+import { useInputCapabilities } from "@/hooks/useInputCapabilities";
 import { sanitizeTaskObjective } from "@/src/graph/objective";
 import type { ExecutionGraph, RootNode, WorkNode, GateNode, NodeStatus } from "@/src/graph/types";
 
@@ -58,6 +59,7 @@ export default function NodeInspector({
   showLogsButton = true,
   onShowLogs,
 }: NodeInspectorProps) {
+  const { isTouchLayout } = useInputCapabilities();
   const selectedNodeId = useGraphUIStore((state) => state.selectedNodeId);
   const triggeringNodeId = useGraphUIStore((state) => state.triggeringNodeId);
   const setSelectedNodeId = useGraphUIStore((state) => state.setSelectedNodeId);
@@ -65,12 +67,13 @@ export default function NodeInspector({
   const panelRef = useRef<HTMLDivElement>(null);
 
   const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    if (isTouchLayout) return;
     e.preventDefault();
     setIsResizing(true);
-  }, []);
+  }, [isTouchLayout]);
 
   useEffect(() => {
-    if (!isResizing) return;
+    if (!isResizing || isTouchLayout) return;
     const handleMouseMove = (e: MouseEvent) => {
       if (!panelRef.current) return;
       const rect = panelRef.current.getBoundingClientRect();
@@ -89,12 +92,12 @@ export default function NodeInspector({
       document.body.style.cursor = "";
       document.body.style.userSelect = "";
     };
-  }, [isResizing]);
+  }, [isResizing, isTouchLayout]);
 
   if (!selectedNodeId || !graph.nodes[selectedNodeId]) {
     return (
       <aside ref={panelRef} className="graph-panel-card node-inspector node-inspector--resizable">
-        <div className="node-inspector__resize-handle" onMouseDown={handleMouseDown} />
+        {!isTouchLayout ? <div className="node-inspector__resize-handle" onMouseDown={handleMouseDown} /> : null}
         <div className="graph-panel-card__title">Node Inspector</div>
         <p className="graph-panel-card__empty">Select a node in the graph to inspect details.</p>
       </aside>
@@ -121,8 +124,8 @@ export default function NodeInspector({
   };
 
   return (
-    <aside ref={panelRef} className="graph-panel-card node-inspector node-inspector--resizable">
-      <div className="node-inspector__resize-handle" onMouseDown={handleMouseDown} />
+    <aside ref={panelRef} className={`graph-panel-card node-inspector ${isTouchLayout ? "node-inspector--touch" : "node-inspector--resizable"}`}>
+      {!isTouchLayout ? <div className="node-inspector__resize-handle" onMouseDown={handleMouseDown} /> : null}
       <div className="graph-panel-card__row">
         <div className="graph-panel-card__title">Node Inspector</div>
         <button

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

@@ -122,13 +122,13 @@ export function FoldersSummaryCard({ projectId, repos, onViewAll }: FoldersSumma
   };
 
   return (
-    <div className="rounded-2xl border border-zinc-800 bg-zinc-900/50 p-4">
+    <div className="rounded-2xl border border-[var(--card-border)] bg-[var(--card-bg)] p-4">
       <div className="flex items-center justify-between mb-3">
         <div className="flex items-center gap-2">
-          <FolderGit2 className="w-4 h-4 text-zinc-400" />
-          <span className="text-sm font-medium text-zinc-200">Folders</span>
+          <FolderGit2 className="h-4 w-4 text-[var(--muted-foreground)]" />
+          <span className="text-sm font-medium text-[var(--foreground)]">Folders</span>
           {items.length > 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)]">
               {items.length}
             </span>
           )}
@@ -137,23 +137,23 @@ export function FoldersSummaryCard({ projectId, repos, onViewAll }: FoldersSumma
           <button
             type="button"
             onClick={startAdd}
-            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)]"
           >
             <Plus className="w-3 h-3" />
             Add
           </button>
           {onViewAll && (
-            <button onClick={onViewAll} className="flex items-center gap-1 text-xs text-zinc-500 hover:text-zinc-300">
+            <button onClick={onViewAll} 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>
           )}
         </div>
       </div>
 
-      {status && <p className="mb-3 text-xs text-zinc-500">{status}</p>}
+      {status && <p className="mb-3 text-xs text-[var(--muted-foreground)]">{status}</p>}
 
       {(isAdding || editingId) && (
-        <div className="mb-3 rounded-xl border border-zinc-800 bg-zinc-950/50 p-3 space-y-2">
+        <div className="mb-3 space-y-2 rounded-xl border border-[var(--border)] bg-[var(--secondary)] p-3">
           <input
             value={draftName}
             onChange={(e) => setDraftName(e.target.value)}
@@ -178,14 +178,14 @@ export function FoldersSummaryCard({ projectId, repos, onViewAll }: FoldersSumma
                 }
               }}
               disabled={!draftName.trim() || !draftPath.trim()}
-              className="rounded-lg bg-zinc-200 px-3 py-1.5 text-xs font-medium text-zinc-950 disabled:opacity-40"
+              className="rounded-lg bg-[var(--foreground)] px-3 py-1.5 text-xs font-medium text-[var(--background)] disabled:opacity-40"
             >
               Save
             </button>
             <button
               type="button"
               onClick={resetDraft}
-              className="flex items-center gap-1 rounded-lg px-2 py-1.5 text-xs text-zinc-500 hover:text-zinc-300"
+              className="flex items-center gap-1 rounded-lg px-2 py-1.5 text-xs text-[var(--muted-foreground)] transition-colors hover:text-[var(--foreground)]"
             >
               <X className="w-3 h-3" />
               Cancel
@@ -195,22 +195,22 @@ export function FoldersSummaryCard({ projectId, repos, onViewAll }: FoldersSumma
       )}
 
       {items.length === 0 ? (
-        <p className="text-sm text-zinc-500">No folders linked</p>
+        <p className="text-sm text-[var(--muted-foreground)]">No folders linked</p>
       ) : (
         <div className="space-y-2">
           {items.slice(0, 5).map((repo) => (
             <div key={repo.id} className="flex items-center gap-2 text-sm">
-              <FolderGit2 className="w-4 h-4 text-zinc-500 shrink-0" />
+              <FolderGit2 className="h-4 w-4 shrink-0 text-[var(--muted-foreground)]" />
               <div className="min-w-0 flex-1">
-                <div className="text-zinc-300 truncate">{repo.name}</div>
+                <div className="truncate text-[var(--foreground)]">{repo.name}</div>
                 {repo.path && (
-                  <div className="text-zinc-500 text-xs truncate">{repo.path}</div>
+                  <div className="truncate text-xs text-[var(--muted-foreground)]">{repo.path}</div>
                 )}
               </div>
               <button
                 type="button"
                 onClick={() => startEdit(repo)}
-                className="p-1 text-zinc-500 hover:text-zinc-300"
+                className="p-1 text-[var(--muted-foreground)] transition-colors hover:text-[var(--foreground)]"
                 aria-label={`Edit ${repo.name}`}
               >
                 <Pencil className="w-3 h-3" />
@@ -218,7 +218,7 @@ export function FoldersSummaryCard({ projectId, repos, onViewAll }: FoldersSumma
               <button
                 type="button"
                 onClick={() => void handleDelete(repo.id)}
-                className="p-1 text-zinc-500 hover:text-red-400"
+                className="p-1 text-[var(--muted-foreground)] transition-colors hover:text-[var(--destructive)]"
                 aria-label={`Delete ${repo.name}`}
               >
                 <Trash2 className="w-3 h-3" />