@mndrk/agx 2.0.55 → 2.1.0

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

@@ -32,6 +32,25 @@ function formatCadence(schedule: GraphSchedule): string {
   return `Every ${Math.round(ms / 86_400_000)}d`;
 }
 
+function isScheduleOverdue(schedule: GraphSchedule): boolean {
+  if (schedule.state !== "active" || schedule.tickInProgress) return false;
+  // Case 1: next tick is in the past and hasn't run yet
+  if (schedule.nextTickAt) {
+    if (schedule.nextTickAt - Date.now() >= 0) return false;
+    if (schedule.lastTickAt && schedule.lastTickAt >= schedule.nextTickAt) {
+      // Task ran, but check if it ran late vs previous scheduled time
+      if (schedule.prevScheduledAt && schedule.lastTickAt > schedule.prevScheduledAt + 5 * 60_000) {
+        return true;
+      }
+      return false;
+    }
+    return true;
+  }
+  // Case 2: interval-based — check if overdue
+  if (schedule.lastTickAt) return schedule.lastTickAt + schedule.intervalMs - Date.now() < 0;
+  return false;
+}
+
 function formatNextRun(schedule: GraphSchedule): string {
   if (schedule.state === "paused") return "Paused";
   if (schedule.state === "stopped") return "Stopped";
@@ -262,6 +281,7 @@ export default function AutomationsBoard() {
                     const isSelected = selectedId === item.taskId;
                     const hasFails =
                       (item.schedule.consecutiveFailures ?? 0) > 0;
+                    const overdue = isScheduleOverdue(item.schedule);
                     const isRunning = busy[item.taskId];
 
                     return (
@@ -273,6 +293,8 @@ export default function AutomationsBoard() {
                             ? "border-[var(--foreground)] shadow-sm"
                             : hasFails
                             ? "border-red-200 bg-red-50/30 hover:border-red-300"
+                            : overdue
+                            ? "border-amber-500/40 bg-amber-500/5 hover:border-amber-500/60"
                             : "border-[var(--card-border)] bg-[var(--card-bg)] hover:border-[var(--card-hover-border)]"
                         }`}
                       >
@@ -298,6 +320,12 @@ export default function AutomationsBoard() {
                                   paused
                                 </span>
                               )}
+                              {overdue && (
+                                <span className="shrink-0 text-[11px] font-medium text-amber-400 bg-amber-500/10 px-2 py-0.5 rounded-md border border-amber-500/20 flex items-center gap-1">
+                                  <Clock size={10} />
+                                  overdue
+                                </span>
+                              )}
                             </div>
                             {item.schedule.description && (
                               <p className="text-[13px] text-[var(--muted-foreground)] leading-relaxed truncate">
@@ -339,7 +367,7 @@ export default function AutomationsBoard() {
                             <Clock size={12} />{" "}
                             {formatCadence(item.schedule)}
                           </span>
-                          <span className="flex items-center gap-1.5">
+                          <span className={`flex items-center gap-1.5 ${overdue ? "text-amber-400 font-medium" : ""}`}>
                             <CalIcon size={12} />{" "}
                             {formatNextRun(item.schedule)}
                           </span>
@@ -563,8 +591,12 @@ function ScheduleInspector({
               total runs
             </div>
           </div>
-          <div className="bg-[var(--muted)] border border-[var(--card-border)] rounded-xl p-3 flex flex-col items-center justify-center">
-            <div className="font-mono text-lg font-semibold mb-0.5">
+          <div className={`rounded-xl p-3 flex flex-col items-center justify-center border ${
+            isScheduleOverdue(schedule)
+              ? "bg-amber-500/10 border-amber-500/30"
+              : "bg-[var(--muted)] border-[var(--card-border)]"
+          }`}>
+            <div className={`font-mono text-lg font-semibold mb-0.5 ${isScheduleOverdue(schedule) ? "text-amber-400" : ""}`}>
               {formatNextRun(schedule)}
             </div>
             <div className="text-[10px] text-[var(--muted-foreground)]">

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

@@ -56,10 +56,10 @@ export function ContextMenu({ items, children }: ContextMenuProps) {
       }
     };
 
-    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("pointerdown", handleClickOutside);
     document.addEventListener("keydown", handleKeyDown);
     return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("pointerdown", handleClickOutside);
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [isOpen, close, focusIndex, items]);

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

@@ -2,6 +2,7 @@
 
 import { useEffect, useMemo, useRef, useState } from "react";
 
+import { useInputCapabilities } from "@/hooks/useInputCapabilities";
 import { loadFloatingPanelBounds, persistFloatingPanelBounds, type FloatingPanelBounds } from "@/state/floatingPanels";
 
 interface FloatingPanelProps {
@@ -59,8 +60,11 @@ export default function FloatingPanel({
   className,
   bodyClassName,
 }: FloatingPanelProps) {
+  const { isTouchLayout } = useInputCapabilities();
   const dragRef = useRef<{ startX: number; startY: number; originX: number; originY: number } | null>(null);
   const resizeRef = useRef<{ startX: number; startY: number; originWidth: number; originHeight: number } | null>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const boundsRef = useRef<FloatingPanelBounds | null>(null);
 
   const initialBounds = useMemo(
     () => normalizeBounds(loadFloatingPanelBounds(panelId) ?? defaultBounds, minWidth, minHeight),
@@ -69,6 +73,10 @@ export default function FloatingPanel({
 
   const [bounds, setBounds] = useState<FloatingPanelBounds>(initialBounds);
   const [hydrated, setHydrated] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+
+  // Keep boundsRef in sync for use during drag/resize
+  boundsRef.current = bounds;
 
   useEffect(() => {
     setBounds(normalizeBounds(loadFloatingPanelBounds(panelId) ?? defaultBounds, minWidth, minHeight));
@@ -81,49 +89,76 @@ export default function FloatingPanel({
   }, [bounds, hydrated, panelId]);
 
   useEffect(() => {
+    if (isTouchLayout) {
+      return;
+    }
+
     const onResize = () => {
       setBounds((current) => normalizeBounds(current, minWidth, minHeight));
     };
 
     window.addEventListener("resize", onResize);
     return () => window.removeEventListener("resize", onResize);
-  }, [minHeight, minWidth]);
+  }, [isTouchLayout, minHeight, minWidth]);
 
+  // Attach drag/resize listeners only when actively dragging — no dependency on bounds
   useEffect(() => {
+    if (isTouchLayout || !isDragging) {
+      return;
+    }
+
+    const applyBoundsToDOM = (b: FloatingPanelBounds) => {
+      const el = panelRef.current;
+      if (!el) return;
+      el.style.left = `${b.x}px`;
+      el.style.top = `${b.y}px`;
+      el.style.width = `${b.width}px`;
+      el.style.height = `${b.height}px`;
+    };
+
     const onMouseMove = (event: MouseEvent) => {
       if (dragRef.current) {
-        const nextBounds = normalizeBounds(
+        const current = boundsRef.current!;
+        const next = normalizeBounds(
           {
-            ...bounds,
+            ...current,
             x: dragRef.current.originX + (event.clientX - dragRef.current.startX),
             y: dragRef.current.originY + (event.clientY - dragRef.current.startY),
           },
           minWidth,
           minHeight,
         );
-        setBounds(nextBounds);
+        boundsRef.current = next;
+        applyBoundsToDOM(next);
         return;
       }
 
       if (resizeRef.current) {
-        const nextBounds = normalizeBounds(
+        const current = boundsRef.current!;
+        const next = normalizeBounds(
           {
-            ...bounds,
+            ...current,
             width: resizeRef.current.originWidth + (event.clientX - resizeRef.current.startX),
             height: resizeRef.current.originHeight + (event.clientY - resizeRef.current.startY),
           },
           minWidth,
           minHeight,
         );
-        setBounds(nextBounds);
+        boundsRef.current = next;
+        applyBoundsToDOM(next);
       }
     };
 
     const onMouseUp = () => {
+      // Commit final position to React state (single re-render)
+      if (boundsRef.current) {
+        setBounds(boundsRef.current);
+      }
       dragRef.current = null;
       resizeRef.current = null;
       document.body.style.userSelect = "";
       document.body.style.cursor = "";
+      setIsDragging(false);
     };
 
     window.addEventListener("mousemove", onMouseMove);
@@ -135,9 +170,13 @@ export default function FloatingPanel({
       document.body.style.userSelect = "";
       document.body.style.cursor = "";
     };
-  }, [bounds, minHeight, minWidth]);
+  }, [isDragging, isTouchLayout, minHeight, minWidth]);
 
   const handleDragStart = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (isTouchLayout) {
+      return;
+    }
+
     const target = event.target as HTMLElement | null;
     if (target?.closest("button, a, input, textarea, select, [data-no-panel-drag='true']")) {
       return;
@@ -151,9 +190,14 @@ export default function FloatingPanel({
     };
     document.body.style.userSelect = "none";
     document.body.style.cursor = "grabbing";
+    setIsDragging(true);
   };
 
   const handleResizeStart = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (isTouchLayout) {
+      return;
+    }
+
     event.preventDefault();
     event.stopPropagation();
 
@@ -165,35 +209,41 @@ export default function FloatingPanel({
     };
     document.body.style.userSelect = "none";
     document.body.style.cursor = "nwse-resize";
+    setIsDragging(true);
   };
 
   return (
     <div
+      ref={panelRef}
       className={className}
       style={{
         position: "fixed",
-        left: bounds.x,
-        top: bounds.y,
-        width: bounds.width,
-        height: bounds.height,
+        left: isTouchLayout ? "50%" : bounds.x,
+        right: isTouchLayout ? "auto" : undefined,
+        top: isTouchLayout ? "max(16px, 8vh)" : bounds.y,
+        width: isTouchLayout ? `min(${Math.max(bounds.width, minWidth)}px, calc(100vw - 32px))` : bounds.width,
+        height: isTouchLayout ? `min(${Math.max(bounds.height, minHeight)}px, calc(100vh - 48px))` : bounds.height,
+        transform: isTouchLayout ? "translateX(-50%)" : undefined,
         zIndex: 40,
       }}
     >
       <div className="flex h-full flex-col overflow-hidden rounded-2xl border border-[var(--border)] bg-[var(--card-bg)] shadow-2xl backdrop-blur-md">
         <div
           onMouseDown={handleDragStart}
-          className="cursor-grab active:cursor-grabbing border-b border-[var(--border)] bg-[var(--card-bg)]/95"
+          className={`${isTouchLayout ? "cursor-default" : "cursor-grab active:cursor-grabbing"} border-b border-[var(--border)] bg-[var(--card-bg)]/95`}
         >
           {titleBar}
         </div>
         <div className={bodyClassName}>{children}</div>
-        <div
-          onMouseDown={handleResizeStart}
-          className="absolute bottom-0 right-0 h-5 w-5 cursor-nwse-resize"
-          aria-hidden="true"
-        >
-          <div className="absolute bottom-1.5 right-1.5 h-2.5 w-2.5 rounded-sm border-r-2 border-b-2 border-[var(--muted-foreground)]/50" />
-        </div>
+        {!isTouchLayout ? (
+          <div
+            onMouseDown={handleResizeStart}
+            className="absolute bottom-0 right-0 h-5 w-5 cursor-nwse-resize"
+            aria-hidden="true"
+          >
+            <div className="absolute bottom-1.5 right-1.5 h-2.5 w-2.5 rounded-sm border-r-2 border-b-2 border-[var(--muted-foreground)]/50" />
+          </div>
+        ) : null}
       </div>
     </div>
   );

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

@@ -1,4 +1,5 @@
 import React, { forwardRef } from 'react';
+import { useInputCapabilities } from "@/hooks/useInputCapabilities";
 
 export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: 'neutral' | 'primary' | 'destructive' | 'ghost';
@@ -7,6 +8,7 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
 
 export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
   ({ className = '', variant = 'neutral', size = 'md', children, ...props }, ref) => {
+    const { isTouchLayout } = useInputCapabilities();
     const baseClasses = "inline-flex items-center justify-center rounded-md transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] disabled:opacity-50 disabled:pointer-events-none";
 
     const sizeClasses = {
@@ -14,6 +16,11 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
       md: "p-1.5 w-8 h-8",
       lg: "p-2 w-10 h-10"
     };
+    const touchSizeClasses = {
+      sm: "h-11 w-11 p-2",
+      md: "h-11 w-11 p-2",
+      lg: "h-12 w-12 p-2.5",
+    };
 
     const variantClasses = {
       neutral: "text-[var(--app-shell-muted)] hover:text-[var(--foreground)] hover:bg-[var(--app-shell-subtle)]",
@@ -22,10 +29,11 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
       destructive: "text-[var(--app-shell-muted)] hover:text-[var(--destructive)] hover:bg-[var(--destructive-muted)]"
     };
 
-    const classes = `${baseClasses} ${sizeClasses[size]} ${variantClasses[variant]} ${className}`.trim();
+    const effectiveSizeClasses = isTouchLayout ? touchSizeClasses[size] : sizeClasses[size];
+    const classes = `${baseClasses} ${effectiveSizeClasses} ${variantClasses[variant]} ${className}`.trim();
 
     return (
-      <button ref={ref} className={classes} {...props}>
+      <button ref={ref} className={classes} data-touch-target={isTouchLayout ? "true" : undefined} {...props}>
         {children}
       </button>
     );

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

@@ -26,6 +26,7 @@ import {
   FALLBACK_STAGE_CONFIG,
   type StageConfig
 } from "@/hooks/useWorkflows";
+import { useInputCapabilities } from "@/hooks/useInputCapabilities";
 
 // Re-export for backward compatibility
 export const STAGES = FALLBACK_STAGES;
@@ -60,6 +61,7 @@ export default function KanbanBoard({
   creatingStage,
   graphColumnFn,
 }: KanbanBoardProps) {
+  const { isTouchLayout } = useInputCapabilities();
   // Use props or fallbacks
   const stages = propStages || FALLBACK_STAGES;
   const stageConfigMap = propStageConfig || FALLBACK_STAGE_CONFIG;
@@ -387,6 +389,46 @@ export default function KanbanBoard({
     }
   }
 
+  const handleStageMove = useCallback(async (task: Task, targetStage: string) => {
+    const originalStage = getColumn(task);
+    if (!checkTransition(originalStage || "", targetStage)) {
+      return;
+    }
+
+    const targetTasks = localTasks.filter((entry) => entry.id !== task.id && getColumn(entry) === targetStage);
+    const nextPriority =
+      targetTasks.length > 0
+        ? Math.max(...targetTasks.map((entry) => entry.priority || 0)) + 1
+        : 0;
+
+    const nextTasks = localTasks.map((entry) =>
+      entry.id === task.id
+        ? {
+            ...entry,
+            stage: targetStage as Task["stage"],
+            priority: nextPriority,
+          }
+        : entry
+    );
+
+    setLocalTasks(nextTasks);
+    onTasksChange?.(nextTasks);
+
+    if (!onTaskUpdate) {
+      return;
+    }
+
+    try {
+      await onTaskUpdate(task.id, {
+        stage: targetStage as Task["stage"],
+        priority: nextPriority,
+      });
+    } catch (error) {
+      console.error("Failed to update task:", error);
+      setLocalTasks(tasks);
+    }
+  }, [checkTransition, localTasks, onTaskUpdate, onTasksChange, tasks]);
+
   return (
     <DndContext
       sensors={sensors}
@@ -443,10 +485,13 @@ export default function KanbanBoard({
                 stage={stage}
                 tasks={grouped[stage] || []}
                 allTasks={localTasks}
+                stages={stages}
+                isTouchLayout={isTouchLayout}
                 selectedTaskId={selectedTaskId}
                 setSelectedTaskId={setSelectedTaskId}
                 onSelectTask={onSelectTask}
                 onTaskUpdate={onTaskUpdate}
+                onStageMove={handleStageMove}
                 index={index}
                 onAddTask={onAddTask}
                 config={stageConfigMap[stage] || { icon: '📌', label: stage, color: 'var(--primary)' }}
@@ -471,10 +516,13 @@ interface StageColumnProps {
   stage: string;
   tasks: Task[];
   allTasks: Task[];
+  stages: readonly string[];
+  isTouchLayout: boolean;
   selectedTaskId: string | null;
   setSelectedTaskId: (id: string | null) => void;
   onSelectTask?: (task: Task) => void;
   onTaskUpdate?: (taskId: string, updates: Partial<Task>) => Promise<void>;
+  onStageMove?: (task: Task, targetStage: string) => void | Promise<void>;
   index: number;
   onAddTask?: (title: string, stage: string) => void;
   config: StageConfig;
@@ -485,10 +533,13 @@ function StageColumn({
   stage,
   tasks,
   allTasks,
+  stages,
+  isTouchLayout,
   selectedTaskId,
   setSelectedTaskId,
   onSelectTask,
   onTaskUpdate,
+  onStageMove,
   index,
   onAddTask,
   config,
@@ -527,10 +578,13 @@ function StageColumn({
         stage={stage}
         tasks={tasks}
         allTasks={allTasks}
+        stages={stages}
+        isTouchLayout={isTouchLayout}
         selectedTaskId={selectedTaskId}
         setSelectedTaskId={setSelectedTaskId}
         onSelectTask={onSelectTask}
         onTaskUpdate={onTaskUpdate}
+        onStageMove={onStageMove}
         config={config}
         onAddTask={onAddTask}
         isCreating={isCreating}
@@ -543,16 +597,33 @@ interface FlatColumnContentProps {
   stage: string;
   tasks: Task[];
   allTasks: Task[];
+  stages: readonly string[];
+  isTouchLayout: boolean;
   selectedTaskId: string | null;
   setSelectedTaskId: (id: string | null) => void;
   onSelectTask?: (task: Task) => void;
   onTaskUpdate?: (taskId: string, updates: Partial<Task>) => Promise<void>;
+  onStageMove?: (task: Task, targetStage: string) => void | Promise<void>;
   config: StageConfig;
   onAddTask?: (title: string, stage: string) => void;
   isCreating?: boolean;
 }
 
-function FlatColumnContent({ stage, tasks, allTasks, selectedTaskId, setSelectedTaskId, onSelectTask, onTaskUpdate, config, onAddTask, isCreating }: FlatColumnContentProps) {
+function FlatColumnContent({
+  stage,
+  tasks,
+  allTasks,
+  stages,
+  isTouchLayout,
+  selectedTaskId,
+  setSelectedTaskId,
+  onSelectTask,
+  onTaskUpdate,
+  onStageMove,
+  config,
+  onAddTask,
+  isCreating,
+}: FlatColumnContentProps) {
   const allIds = useMemo(() => tasks.map(t => t.id), [tasks]);
   const [isAdding, setIsAdding] = useState(false);
   const [newTitle, setNewTitle] = useState('');
@@ -655,6 +726,18 @@ function FlatColumnContent({ stage, tasks, allTasks, selectedTaskId, setSelected
                 onClick={() => onSelectTask?.(task)}
                 onStatusChange={onTaskUpdate ? (s) => onTaskUpdate(task.id, { status: s }) : undefined}
                 onApprovalModeChange={onTaskUpdate ? (m) => onTaskUpdate(task.id, { approval_mode: m }) : undefined}
+                onStageChange={
+                  isTouchLayout && onStageMove
+                    ? (nextStage) => {
+                        if (nextStage) {
+                          void onStageMove(task, nextStage);
+                        }
+                      }
+                    : undefined
+                }
+                stageOptions={isTouchLayout ? stages : undefined}
+                currentStage={stage}
+                dragDisabled={isTouchLayout}
                 allTasks={allTasks}
                 relationship={rel}
               />
@@ -677,5 +760,3 @@ function FlatColumnContent({ stage, tasks, allTasks, selectedTaskId, setSelected
     </SortableContext>
   );
 }
-
-