@mndrk/agx 2.0.55 → 2.0.56

package/cloud-runtime/standalone/apps/local/components/LogTimeline.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { Markdown } from "@/components/chat-ui/Markdown";
 
 interface TaskComment {
   id: string;
@@ -177,7 +178,9 @@ export default function LogTimeline({ comments, onAddComment, onDeleteComment }:
                       </button>
                     )}
                   </div>
-                  <p className="text-sm whitespace-pre-wrap leading-relaxed">{comment.content}</p>
+                  <div className="text-sm leading-relaxed">
+                    <Markdown content={comment.content} isUser={comment.author_type === "user"} />
+                  </div>
                 </div>
               </div>
             ))}

package/cloud-runtime/standalone/apps/local/components/NowRunningPanel.tsx

@@ -5,6 +5,7 @@ import { useEffect, useState, useMemo } from "react";
 import { UI_POLL_TASK_DURATION_MS } from "@/lib/constants/timing";
 import type { AgentProcessEntry } from "@/lib/agent-process-registry";
 import FloatingPanel from "@/components/FloatingPanel";
+import { useInputCapabilities } from "@/hooks/useInputCapabilities";
 
 const MAX_WORKERS = Number(process.env.NEXT_PUBLIC_AGX_MAX_WORKERS) || 10;
 
@@ -27,6 +28,7 @@ export default function NowRunningPanel({
   cancellingTaskId,
   panelId = "now-running-panel",
 }: NowRunningPanelProps) {
+  const { isTouchLayout } = useInputCapabilities();
   // Active processes (spawning or running)
   const activeProcesses = useMemo(
     () => processes.filter((p) => p.state === "spawning" || p.state === "running"),
@@ -148,7 +150,7 @@ export default function NowRunningPanel({
                   </div>
                 </div>
 
-                <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity pl-2 border-l border-[var(--border)]">
+                <div className={`flex items-center gap-1 pl-2 border-l border-[var(--border)] transition-opacity ${isTouchLayout ? "opacity-100" : "opacity-0 group-hover:opacity-100"}`}>
                   <button
                     type="button"
                     onClick={(e) => {

package/cloud-runtime/standalone/apps/local/components/PromptJobBoard.tsx

@@ -46,12 +46,26 @@ const RichTextEditor = dynamic(() => import("@/components/RichTextEditor"), {
 
 // ── Helpers ──────────────────────────────────────────────────────────────────
 
+function isJobOverdue(job: { nextRunAt: number | null; lastRunAt: number | null; prevScheduledAt?: number | null; state: string }): boolean {
+  if (job.state !== "active") return false;
+  // Case 1: next run is in the past and hasn't run yet
+  if (job.nextRunAt !== null && job.nextRunAt - Date.now() < 0) {
+    if (job.lastRunAt && job.lastRunAt >= job.nextRunAt) return false;
+    return true;
+  }
+  // Case 2: task ran, but late — compare last run against previous scheduled time
+  if (job.prevScheduledAt && job.lastRunAt) {
+    return job.lastRunAt > job.prevScheduledAt + 5 * 60_000; // 5 min grace
+  }
+  return false;
+}
+
 function formatNextRun(epochMs: number | null, state: string): string {
   if (state === "paused") return "Paused";
   if (state === "stopped") return "Stopped";
   if (epochMs === null) return "Pending...";
   const diff = epochMs - Date.now();
-  if (diff < 0) return "overdue";
+  if (diff < 0) return "Overdue";
   if (diff < 60_000) return `in ${Math.round(diff / 1000)}s`;
   if (diff < 3_600_000) return `in ${Math.round(diff / 60_000)}m`;
   if (diff < 86_400_000) return `in ${Math.round(diff / 3_600_000)}h`;
@@ -1001,7 +1015,13 @@ function JobDetailView({
                       gated
                     </span>
                   ) : null}
-                  <span className="text-[11px] text-[var(--muted-foreground)]">
+                  {isJobOverdue(job) && (
+                    <span className="rounded-md border border-amber-500/20 bg-amber-500/10 px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-amber-400 inline-flex items-center gap-1">
+                      <Clock size={10} />
+                      overdue
+                    </span>
+                  )}
+                  <span className={`text-[11px] ${isJobOverdue(job) ? "text-amber-400 font-medium" : "text-[var(--muted-foreground)]"}`}>
                     Next run {formatNextRun(job.nextRunAt, job.state)}
                   </span>
                   <span className="text-[11px] text-[var(--muted-foreground)]">
@@ -1374,7 +1394,7 @@ export default function PromptJobBoard({
                               </>
                             )}
                           </span>
-                          <span className="flex items-center gap-1">
+                          <span className={`flex items-center gap-1 ${isJobOverdue(job) ? "text-amber-400 font-medium" : ""}`}>
                             <Clock size={11} />
                             {formatNextRun(job.nextRunAt, job.state)}
                           </span>
@@ -1391,9 +1411,29 @@ export default function PromptJobBoard({
                           ) : null}
                         </div>
                       </div>
-                      <span
-                        className={`mt-1 inline-block size-2 shrink-0 rounded-full ${stateDotClass(job.state)}`}
-                      />
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          void handleToggle(job);
+                        }}
+                        type="button"
+                        role="switch"
+                        aria-checked={job.state === "active"}
+                        title={job.state === "active" ? "Pause" : "Resume"}
+                        className={`relative inline-flex h-[18px] w-[32px] shrink-0 cursor-pointer rounded-full border transition-colors ${
+                          job.state === "active"
+                            ? "border-emerald-400/30 bg-emerald-500/40"
+                            : "border-[var(--card-border)] bg-[var(--muted)]"
+                        }`}
+                      >
+                        <span
+                          className={`pointer-events-none absolute top-[2px] size-[12px] rounded-full bg-white/90 shadow-sm transition-transform ${
+                            job.state === "active"
+                              ? "translate-x-[16px]"
+                              : "translate-x-[2px]"
+                          }`}
+                        />
+                      </button>
                     </div>
                   </div>
                 );

package/cloud-runtime/standalone/apps/local/components/SearchCombo.tsx

@@ -42,13 +42,13 @@ export default function SearchCombo({
 
   const selected = useMemo(() => options.find((o) => o.id === value), [options, value]);
 
-  const handleClickOutside = useCallback((e: MouseEvent) => {
+  const handleClickOutside = useCallback((e: PointerEvent) => {
     if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
   }, []);
 
   useEffect(() => {
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
+    document.addEventListener("pointerdown", handleClickOutside);
+    return () => document.removeEventListener("pointerdown", handleClickOutside);
   }, [handleClickOutside]);
 
   return (

package/cloud-runtime/standalone/apps/local/components/SortableTaskCard.tsx

@@ -3,18 +3,33 @@
 import React from "react";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import TaskCard, { Task, TaskStatus } from "./TaskCard";
+import TaskCard, { Task, TaskStage, TaskStatus } from "./TaskCard";
 
 interface SortableTaskCardProps {
   task: Task;
   onClick?: () => void;
   onStatusChange?: (status: TaskStatus) => void;
   onApprovalModeChange?: (mode: "auto" | "manual") => void;
+  onStageChange?: (stage: Task["stage"]) => void;
+  stageOptions?: readonly TaskStage[];
+  currentStage?: TaskStage;
+  dragDisabled?: boolean;
   allTasks?: Task[];
   relationship?: 'active' | 'blocking' | 'dependent' | 'dimmed' | 'none';
 }
 
-export default function SortableTaskCard({ task, onClick, onStatusChange, onApprovalModeChange, allTasks, relationship = 'none' }: SortableTaskCardProps) {
+export default function SortableTaskCard({
+  task,
+  onClick,
+  onStatusChange,
+  onApprovalModeChange,
+  onStageChange,
+  stageOptions,
+  currentStage,
+  dragDisabled = false,
+  allTasks,
+  relationship = 'none',
+}: SortableTaskCardProps) {
   const {
     attributes,
     listeners,
@@ -22,7 +37,7 @@ export default function SortableTaskCard({ task, onClick, onStatusChange, onAppr
     transform,
     transition,
     isDragging,
-  } = useSortable({ id: task.id });
+  } = useSortable({ id: task.id, disabled: dragDisabled });
 
   const style = {
     transform: CSS.Transform.toString(transform),
@@ -44,6 +59,9 @@ export default function SortableTaskCard({ task, onClick, onStatusChange, onAppr
         onClick={onClick}
         onStatusChange={onStatusChange}
         onApprovalModeChange={onApprovalModeChange}
+        onStageChange={onStageChange}
+        stageOptions={stageOptions}
+        currentStage={currentStage}
         allTasks={allTasks}
         relationship={relationship}
       />

package/cloud-runtime/standalone/apps/local/components/StatusCircle.tsx

@@ -32,7 +32,7 @@ export default function StatusCircle({ status, onStatusChange }: StatusCirclePro
   useEffect(() => {
     if (!open) return;
     updatePosition();
-    const handler = (e: MouseEvent) => {
+    const handler = (e: PointerEvent) => {
       if (
         ref.current && !ref.current.contains(e.target as Node) &&
         dropdownRef.current && !dropdownRef.current.contains(e.target as Node)
@@ -40,8 +40,8 @@ export default function StatusCircle({ status, onStatusChange }: StatusCirclePro
         setOpen(false);
       }
     };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
+    document.addEventListener("pointerdown", handler);
+    return () => document.removeEventListener("pointerdown", handler);
   }, [open, updatePosition]);
 
   // Close dropdown when status changes externally (e.g., realtime update)

package/cloud-runtime/standalone/apps/local/components/TaskCard.tsx

@@ -101,15 +101,36 @@ interface TaskCardProps {
   compact?: boolean;
   onStatusChange?: (status: TaskStatus) => void;
   onApprovalModeChange?: (mode: "auto" | "manual") => void;
+  onStageChange?: (stage: TaskStage) => void;
+  stageOptions?: readonly TaskStage[];
+  currentStage?: TaskStage;
   /** All tasks in the board, used to resolve dependency status */
   allTasks?: Task[];
   relationship?: 'active' | 'blocking' | 'dependent' | 'dimmed' | 'none';
 }
 
-export default function TaskCard({ task, onClick, compact = false, onStatusChange, onApprovalModeChange, allTasks, relationship = 'none' }: TaskCardProps) {
+export default function TaskCard({
+  task,
+  onClick,
+  compact = false,
+  onStatusChange,
+  onApprovalModeChange,
+  onStageChange,
+  stageOptions,
+  currentStage,
+  allTasks,
+  relationship = 'none',
+}: TaskCardProps) {
   const status = statusConfig[task.status || "queued"];
   const stage = task.stage ? stageConfig[task.stage] : null;
   const { summary, isLoading: isGraphSummaryLoading } = useTaskGraphSummary(task.id !== "draft" ? task.id : null);
+  const effectiveStage = currentStage ?? task.stage;
+  const stageIndex = effectiveStage && stageOptions ? stageOptions.indexOf(effectiveStage) : -1;
+  const previousStage = stageIndex > 0 && stageOptions ? stageOptions[stageIndex - 1] : null;
+  const nextStage =
+    stageIndex >= 0 && stageOptions && stageIndex < stageOptions.length - 1
+      ? stageOptions[stageIndex + 1]
+      : null;
 
   // Resolve dependency status
   const deps = task.depends_on?.length ? task.depends_on.map((depId) => {
@@ -197,6 +218,35 @@ export default function TaskCard({ task, onClick, compact = false, onStatusChang
           )}
         </div>
       </div>
+
+      {onStageChange && effectiveStage && (previousStage || nextStage) ? (
+        <div className="flex items-center gap-2 pt-1">
+          {previousStage ? (
+            <button
+              type="button"
+              className="rounded-full border border-[var(--border)] px-2.5 py-1 text-[10px] font-medium text-[var(--muted-foreground)] transition-colors hover:bg-[var(--app-shell-subtle)] hover:text-[var(--foreground)]"
+              onClick={(event) => {
+                event.stopPropagation();
+                onStageChange(previousStage);
+              }}
+            >
+              Back to {previousStage}
+            </button>
+          ) : null}
+          {nextStage ? (
+            <button
+              type="button"
+              className="rounded-full border border-[var(--border)] px-2.5 py-1 text-[10px] font-medium text-[var(--muted-foreground)] transition-colors hover:bg-[var(--app-shell-subtle)] hover:text-[var(--foreground)]"
+              onClick={(event) => {
+                event.stopPropagation();
+                onStageChange(nextStage);
+              }}
+            >
+              Move to {nextStage}
+            </button>
+          ) : null}
+        </div>
+      ) : null}
     </div>
   );
 }

package/cloud-runtime/standalone/apps/local/components/chat-ui/ChatContainer.tsx

@@ -6,6 +6,7 @@ import { useUrlSelection } from "@/hooks/useUrlSelection";
 import { useGroupChat } from "@/hooks/useGroupChat";
 import { useProcessPolling } from "@/hooks/useProcessPolling";
 import { useThreadState } from "@/hooks/useThreadState";
+import { useInputCapabilities } from "@/hooks/useInputCapabilities";
 import { WorkspaceSidebar } from "@/components/thread/WorkspaceSidebar";
 import "@/styles/workspaceSidebar.css";
 import { MessageList } from "./MessageList";
@@ -221,6 +222,7 @@ export function ChatContainer({
   initialRootMessageId,
   showSidebar = true,
 }: ChatContainerProps = {}) {
+  const { isTouchLayout } = useInputCapabilities();
   const { getSelection, pushSelection, replaceSelection } = useUrlSelection();
   const {
     threads,
@@ -1757,9 +1759,9 @@ export function ChatContainer({
             ✕
           </button>
         </div>
-      ) : (
+      ) : !isTouchLayout ? (
         <kbd className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 rounded-md border border-[var(--app-shell-border)] bg-[var(--app-shell-subtle)] px-1.5 py-0.5 font-sans text-[10px] font-bold text-[var(--app-shell-soft-text)]">⌘K</kbd>
-      )}
+      ) : null}
     </div>
   );
 
@@ -1854,6 +1856,17 @@ export function ChatContainer({
                 {openThreadId ? (
                   <div className="desktop-titlebar border-b border-[var(--app-shell-border)] bg-[var(--app-shell-surface)] px-4 py-2.5 backdrop-blur-xl md:px-6 transition-colors duration-200 shrink-0">
                     <div className="mx-auto flex max-w-5xl items-center gap-3 min-w-0">
+                      {showSidebar && !workspaceSidebarVisible ? (
+                        <button
+                          type="button"
+                          onClick={toggleWorkspaceSidebar}
+                          className="inline-flex h-9 w-9 items-center justify-center rounded-xl border border-[var(--app-shell-border)] bg-[var(--app-shell-elevated)] text-[var(--app-shell-muted)] transition hover:border-[var(--app-shell-border-strong)] hover:text-[var(--foreground)]"
+                          title="Show sidebar"
+                          aria-label="Show sidebar"
+                        >
+                          <PanelLeftOpen className="h-4 w-4" strokeWidth={1.75} />
+                        </button>
+                      ) : null}
                       <button
                         onClick={() => navigateToThread(null)}
                         className="p-1.5 text-[var(--app-shell-muted)] hover:text-[var(--primary)] hover:bg-[var(--app-shell-subtle)] rounded-xl transition-all active:scale-95 flex-shrink-0"

package/cloud-runtime/standalone/apps/local/components/chat-ui/Composer.tsx

@@ -211,13 +211,13 @@ export function Composer({
   // Close repo dropdown on click outside
   useEffect(() => {
     if (!repoDropdownOpen) return;
-    const handleClickOutside = (e: MouseEvent) => {
+    const handleClickOutside = (e: PointerEvent) => {
       if (repoDropdownRef.current && !repoDropdownRef.current.contains(e.target as Node)) {
         setRepoDropdownOpen(false);
       }
     };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
+    document.addEventListener("pointerdown", handleClickOutside);
+    return () => document.removeEventListener("pointerdown", handleClickOutside);
   }, [repoDropdownOpen]);
 
   // Clear stale repo selections when available repos change (uncontrolled mode only).

package/cloud-runtime/standalone/apps/local/components/chat-ui/ParticipantBar.tsx

@@ -10,6 +10,7 @@ import {
   Plus,
   FolderOpen,
   ChevronDown,
+  ChevronUp,
   GripVertical,
   Copy,
   Check,
@@ -33,6 +34,7 @@ import {
 import { CSS } from "@dnd-kit/utilities";
 import type { Participant, ChatProvider, SkillBinding } from "@/lib/types";
 import SearchCombo, { type ComboOption } from "@/components/SearchCombo";
+import { useInputCapabilities } from "@/hooks/useInputCapabilities";
 
 const COLORS = ["#D97706", "#2563EB", "#059669", "#DC2626", "#7C3AED", "#DB2777", "#0891B2"];
 
@@ -60,12 +62,22 @@ function SortableAgentItem({
   p,
   isActive,
   isFirst,
+  dragDisabled = false,
+  canMoveUp = false,
+  canMoveDown = false,
+  onMoveUp,
+  onMoveDown,
   onToggleActive,
   onClickEdit,
 }: {
   p: Participant;
   isActive: boolean;
   isFirst: boolean;
+  dragDisabled?: boolean;
+  canMoveUp?: boolean;
+  canMoveDown?: boolean;
+  onMoveUp?: () => void;
+  onMoveDown?: () => void;
   onToggleActive?: (participantId: string, active: boolean) => void;
   onClickEdit: () => void;
 }) {
@@ -76,7 +88,7 @@ function SortableAgentItem({
     transform,
     transition,
     isDragging,
-  } = useSortable({ id: p.id });
+  } = useSortable({ id: p.id, disabled: dragDisabled });
 
   const style = {
     transform: CSS.Transform.toString(transform),
@@ -92,9 +104,10 @@ function SortableAgentItem({
       >
         <button
           type="button"
-          className="flex-shrink-0 cursor-grab active:cursor-grabbing p-1 text-[var(--muted-foreground)] hover:text-[var(--muted-foreground)] transition-colors"
+          className={`flex-shrink-0 p-1 text-[var(--muted-foreground)] transition-colors ${dragDisabled ? "cursor-default opacity-40" : "cursor-grab active:cursor-grabbing hover:text-[var(--muted-foreground)]"}`}
           {...attributes}
           {...listeners}
+          disabled={dragDisabled}
         >
           <GripVertical size={12} />
         </button>
@@ -127,6 +140,36 @@ function SortableAgentItem({
         >
           <span className={`absolute top-[2px] left-[2px] w-2 h-2 bg-[var(--card-bg)] rounded-full shadow-sm transition-transform ${isActive ? "translate-x-2" : "translate-x-0"}`} />
         </button>
+        {dragDisabled && (canMoveUp || canMoveDown) ? (
+          <div className="flex items-center gap-0.5">
+            {canMoveUp ? (
+              <button
+                type="button"
+                onClick={(event) => {
+                  event.stopPropagation();
+                  onMoveUp?.();
+                }}
+                className="rounded p-1 text-[var(--muted-foreground)] transition-colors hover:bg-[var(--muted)]"
+                aria-label={`Move ${p.name} up`}
+              >
+                <ChevronUp size={12} />
+              </button>
+            ) : null}
+            {canMoveDown ? (
+              <button
+                type="button"
+                onClick={(event) => {
+                  event.stopPropagation();
+                  onMoveDown?.();
+                }}
+                className="rounded p-1 text-[var(--muted-foreground)] transition-colors hover:bg-[var(--muted)]"
+                aria-label={`Move ${p.name} down`}
+              >
+                <ChevronDown size={12} />
+              </button>
+            ) : null}
+          </div>
+        ) : null}
       </div>
     </div>
   );
@@ -134,16 +177,16 @@ function SortableAgentItem({
 
 function useClickOutside(ref: React.RefObject<HTMLElement | null>, onClose: () => void) {
   useEffect(() => {
-    const handle = (e: MouseEvent) => {
+    const handle = (e: PointerEvent) => {
       if (ref.current && !ref.current.contains(e.target as Node)) {
         onClose();
       }
     };
     // Use timeout so the current click event finishes before we start listening
-    const id = setTimeout(() => document.addEventListener("mousedown", handle), 0);
+    const id = setTimeout(() => document.addEventListener("pointerdown", handle), 0);
     return () => {
       clearTimeout(id);
-      document.removeEventListener("mousedown", handle);
+      document.removeEventListener("pointerdown", handle);
     };
   }, [ref, onClose]);
 }
@@ -348,13 +391,13 @@ export function AgentForm({
 
   useEffect(() => {
     if (!skillPickerOpen) return;
-    const handle = (event: MouseEvent) => {
+    const handle = (event: PointerEvent) => {
       if (skillPickerRef.current && !skillPickerRef.current.contains(event.target as Node)) {
         setSkillPickerOpen(false);
       }
     };
-    document.addEventListener("mousedown", handle);
-    return () => document.removeEventListener("mousedown", handle);
+    document.addEventListener("pointerdown", handle);
+    return () => document.removeEventListener("pointerdown", handle);
   }, [skillPickerOpen]);
 
   useEffect(() => {
@@ -1011,6 +1054,7 @@ export function ParticipantBar({
   openAddNonce,
   variant = "default",
 }: Props) {
+  const { isTouchLayout } = useInputCapabilities();
   // "add" or participant id being edited, or null
   const [openPanel, setOpenPanel] = useState<string | null>(null);
   const isSidebar = variant === "sidebar";
@@ -1063,10 +1107,33 @@ export function ParticipantBar({
                 {showDivider && (
                   <div className="mx-2 my-1 border-t border-dashed border-[var(--border)]" />
                 )}
-                <SortableAgentItem
+              <SortableAgentItem
                   p={p}
                   isActive={activeSet.has(p.id)}
                   isFirst={index === 0}
+                  dragDisabled={isTouchLayout}
+                  canMoveUp={
+                    Boolean(onReorder) &&
+                    index > 0 &&
+                    activeSet.has(sortedParticipants[index - 1].id) === isActive
+                  }
+                  canMoveDown={
+                    Boolean(onReorder) &&
+                    index < sortedParticipants.length - 1 &&
+                    activeSet.has(sortedParticipants[index + 1].id) === isActive
+                  }
+                  onMoveUp={() => {
+                    if (!onReorder || index === 0) return;
+                    const reordered = [...sortedParticipants];
+                    [reordered[index - 1], reordered[index]] = [reordered[index], reordered[index - 1]];
+                    onReorder(reordered.map((participant) => participant.id));
+                  }}
+                  onMoveDown={() => {
+                    if (!onReorder || index >= sortedParticipants.length - 1) return;
+                    const reordered = [...sortedParticipants];
+                    [reordered[index], reordered[index + 1]] = [reordered[index + 1], reordered[index]];
+                    onReorder(reordered.map((participant) => participant.id));
+                  }}
                   onToggleActive={onToggleActive}
                   onClickEdit={() => setOpenPanel(openPanel === p.id ? null : p.id)}
                 />

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

@@ -28,6 +28,7 @@ import TaskDetailNodeComponent from "@/components/graph/TaskDetailNodeComponent"
 import { getNodeLabel } from "@/components/graph/graph-derived";
 import type { GraphFlowNode, TaskDetailNodeData } from "@/components/graph/graph-flow-types";
 import { useGraphUIStore } from "@/components/graph/useGraphUIStore";
+import { useInputCapabilities } from "@/hooks/useInputCapabilities";
 import type { ExecutionGraph, GraphNode, NodeStatus } from "@/src/graph/types";
 
 const NODE_TYPES = {
@@ -334,6 +335,7 @@ export default function ExecutionGraphPanel({
   taskDetailNode,
   onNodeClick,
 }: ExecutionGraphPanelProps) {
+  const { isTouchLayout } = useInputCapabilities();
   const [direction, setDirection] = useState<"TB" | "LR">("LR");
   const flowRef = useRef<ReactFlowInstance<GraphFlowNode, Edge> | null>(null);
   const initialFitDone = useRef(false);
@@ -423,11 +425,12 @@ export default function ExecutionGraphPanel({
         onNodesChange={onNodesChange}
         onNodeDragStop={onNodeDragStop}
         onNodeClick={handleNodeClick}
+        nodesDraggable={!isTouchLayout}
         panOnScroll
       >
         <Background gap={24} size={1.2} color="rgba(100, 116, 139, 0.25)" />
         <MiniMap pannable zoomable />
-        <Controls>
+        <Controls className={isTouchLayout ? "execution-graph-panel__controls execution-graph-panel__controls--touch" : "execution-graph-panel__controls"}>
           <ControlButton
             title="Fit graph"
             onClick={() => {

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

@@ -11,6 +11,7 @@ import GraphVersionHistory from "@/components/graph/GraphVersionHistory";
 import GraphComparisonModal from "@/components/graph/GraphComparisonModal";
 import { findRootNode } from "@/components/graph/graph-derived";
 import { useGraphUIStore, type NodeAction } from "@/components/graph/useGraphUIStore";
+import { useInputCapabilities } from "@/hooks/useInputCapabilities";
 import type { ExecutionGraph, ExecutionLifecycleState } from "@/src/graph/types";
 import type { Task } from "@/components/TaskCard";
 
@@ -43,6 +44,7 @@ export default function GraphFirstView({
   onDeleteTask,
   isDeletingTask = false,
 }: GraphFirstViewProps) {
+  const { isTouchLayout } = useInputCapabilities();
   const [showLogs, setShowLogs] = useState(false);
   const [logsNodeId, setLogsNodeId] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
@@ -275,7 +277,8 @@ export default function GraphFirstView({
         </div>
         
         {/* Right sidebar - node details */}
-        <aside className="graph-first-view__sidebar">
+        {!isTouchLayout ? (
+          <aside className="graph-first-view__sidebar">
           {/* Collapsible task details */}
           <div className="graph-sidebar-section">
             <button
@@ -402,7 +405,8 @@ export default function GraphFirstView({
           />
 
           <GraphVersionHistory graph={graph} />
-        </aside>
+          </aside>
+        ) : null}
       </div>
       
       {/* Comparison modal */}