@mndrk/agx 2.0.55 → 2.1.0

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,51 +145,58 @@ export default function NodeDetailPanel({
   onShowLogs,
   onRefetch,
 }: NodeDetailPanelProps) {
+  const { isTouchLayout } = useInputCapabilities();
   const selectedNodeId = useGraphUIStore((state) => state.selectedNodeId);
   const triggeringNodeId = useGraphUIStore((state) => state.triggeringNodeId);
   
   const [activeTab, setActiveTab] = useState<TabId>("execution");
-  const [width, setWidth] = useState(DEFAULT_WIDTH);
   const [isResizing, setIsResizing] = useState(false);
   const [diffRunA, setDiffRunA] = useState<string | null>(null);
   const [diffRunB, setDiffRunB] = useState<string | null>(null);
-  
+
   const panelRef = useRef<HTMLDivElement>(null);
   const resizeHandleRef = useRef<HTMLDivElement>(null);
-  
+
   // Get node data
   const node = selectedNodeId ? graph.nodes[selectedNodeId] : null;
   const nodeRuns = useMemo(
     () => selectedNodeId ? extractNodeRuns(graph, selectedNodeId) : [],
     [graph, selectedNodeId]
   );
-  
-  // Resize handling
+
+  // Resize handling — direct DOM manipulation to avoid re-renders
   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 newWidth = window.innerWidth - e.clientX;
-      setWidth(Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, newWidth)));
+      const clamped = Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, newWidth));
+      panelRef.current.style.width = `${clamped}px`;
     };
-    
+
     const handleMouseUp = () => {
       setIsResizing(false);
     };
-    
+
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
-    
+    document.body.style.cursor = "ew-resize";
+    document.body.style.userSelect = "none";
+
     return () => {
       document.removeEventListener("mousemove", handleMouseMove);
       document.removeEventListener("mouseup", handleMouseUp);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
     };
-  }, [isResizing]);
+  }, [isResizing, isTouchLayout]);
   
   // Reset diff selection when node changes
   useEffect(() => {
@@ -235,17 +243,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: `${DEFAULT_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 +511,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/linear/LinearSettingsModal.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { useState, type ComponentProps } from "react";
+import { Bot, Link2, X } from "lucide-react";
+import LinearSetup from "@/components/LinearSetup";
+import LinearWorkerConfig from "@/components/linear/LinearWorkerConfig";
+
+type LinearSetupProps = ComponentProps<typeof LinearSetup>;
+
+interface LinearSettingsModalProps {
+  connected: LinearSetupProps["connected"];
+  user: LinearSetupProps["user"];
+  clis: LinearSetupProps["clis"];
+  mcpConfigured: LinearSetupProps["mcpConfigured"];
+  onConnect: LinearSetupProps["onConnect"];
+  onConnectWithKey: LinearSetupProps["onConnectWithKey"];
+  onDisconnect: LinearSetupProps["onDisconnect"];
+  onConfigureMcp: LinearSetupProps["onConfigureMcp"];
+  onClose: () => void;
+  projectId?: string;
+}
+
+type SettingsTab = "connection" | "worker";
+
+export default function LinearSettingsModal({
+  connected,
+  user,
+  clis,
+  mcpConfigured,
+  onConnect,
+  onConnectWithKey,
+  onDisconnect,
+  onConfigureMcp,
+  onClose,
+  projectId,
+}: LinearSettingsModalProps) {
+  const [tab, setTab] = useState<SettingsTab>(connected ? "worker" : "connection");
+
+  const tabs: Array<{ id: SettingsTab; label: string; icon: React.ReactNode; disabled?: boolean }> = [
+    { id: "connection", label: "Connection", icon: <Link2 size={14} /> },
+    { id: "worker", label: "Linear Worker", icon: <Bot size={14} />, disabled: !connected },
+  ];
+
+  return (
+    <div className="absolute inset-0 z-30 flex items-center justify-center bg-black/50">
+      <div className="relative flex w-full max-w-6xl flex-col rounded-lg border border-[var(--card-border)] bg-[var(--background)] shadow-xl">
+        {/* Header with tabs */}
+        <div className="flex items-center justify-between border-b border-[var(--card-border)] px-6">
+          <div className="flex items-center gap-6">
+            {tabs.map((t) => {
+              const isActive = tab === t.id;
+              return (
+                <button
+                  key={t.id}
+                  onClick={() => !t.disabled && setTab(t.id)}
+                  disabled={t.disabled}
+                  className={`relative flex items-center gap-2 py-4 text-sm font-semibold transition-colors ${
+                    isActive
+                      ? "text-[var(--foreground)]"
+                      : t.disabled
+                        ? "cursor-not-allowed text-[var(--muted-foreground)]/40"
+                        : "text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
+                  }`}
+                >
+                  {t.icon}
+                  {t.label}
+                  {isActive && (
+                    <span className="absolute bottom-0 left-0 right-0 h-[2px] rounded-full bg-[var(--foreground)]" />
+                  )}
+                </button>
+              );
+            })}
+          </div>
+          <button
+            type="button"
+            className="rounded p-1.5 text-[var(--muted-foreground)] transition-colors hover:bg-[var(--card-bg)] hover:text-[var(--foreground)]"
+            onClick={onClose}
+          >
+            <X size={18} />
+          </button>
+        </div>
+
+        {/* Tab content */}
+        <div className="flex-1 min-h-0 max-h-[80vh] overflow-y-auto p-6">
+          {tab === "connection" && (
+            <LinearSetup
+              connected={connected}
+              user={user}
+              clis={clis}
+              mcpConfigured={mcpConfigured}
+              onConnect={onConnect}
+              onConnectWithKey={onConnectWithKey}
+              onDisconnect={onDisconnect}
+              onConfigureMcp={onConfigureMcp}
+              onContinue={onClose}
+            />
+          )}
+          {tab === "worker" && connected && (
+            <LinearWorkerConfig projectId={projectId} />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/cloud-runtime/standalone/apps/local/components/linear/LinearWorkerConfig.tsx

@@ -0,0 +1,367 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import dynamic from "next/dynamic";
+import { ChevronDown, ChevronRight, Pause, Play, RefreshCw } from "lucide-react";
+import { ScheduleConditionPicker, SimpleDropdown } from "@/components/scheduling/ScheduleConditionPicker";
+import {
+  LINEAR_WORKER_DEFAULT_PROMPT,
+  LINEAR_WORKER_DEFAULT_SCRIPT_PROMPT,
+} from "@/src/prompt-scheduler/linear-worker-constants";
+import type { PromptJob } from "@/src/prompt-scheduler/types";
+
+const RichTextEditor = dynamic(() => import("@/components/RichTextEditor"), {
+  ssr: false,
+});
+
+interface TeamOption {
+  id: string;
+  name: string;
+}
+
+interface LinearWorkerConfigProps {
+  projectId?: string;
+}
+
+function formatNextRun(
+  epochMs: number | null,
+  state: PromptJob["state"]
+): 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 < 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`;
+  return `in ${Math.round(diff / 86_400_000)}d`;
+}
+
+function formatLastRun(epochMs: number | null): string {
+  if (!epochMs) return "Never";
+  const diff = Date.now() - epochMs;
+  if (diff < 60_000) return "Just now";
+  if (diff < 3_600_000) return `${Math.round(diff / 60_000)}m ago`;
+  if (diff < 86_400_000) return `${Math.round(diff / 3_600_000)}h ago`;
+  return `${Math.round(diff / 86_400_000)}d ago`;
+}
+
+function Label({ children }: { children: React.ReactNode }) {
+  return (
+    <label className="block text-[10px] font-semibold text-[var(--muted-foreground)] uppercase tracking-widest mb-2">
+      {children}
+    </label>
+  );
+}
+
+function CollapsibleSection({
+  title,
+  expanded,
+  onToggle,
+  children,
+}: {
+  title: string;
+  expanded: boolean;
+  onToggle: () => void;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="rounded-xl border border-[var(--card-border)] bg-[var(--card-bg)] overflow-hidden">
+      <button
+        type="button"
+        onClick={onToggle}
+        className="flex w-full items-center gap-2 px-4 py-3 text-left text-xs font-semibold text-[var(--muted-foreground)] uppercase tracking-widest hover:text-[var(--foreground)] transition-colors"
+      >
+        {expanded ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
+        {title}
+      </button>
+      {expanded && (
+        <div className="border-t border-[var(--card-border)]">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function LinearWorkerConfig({
+  projectId,
+}: LinearWorkerConfigProps) {
+  const [job, setJob] = useState<PromptJob | null>(null);
+  const [teams, setTeams] = useState<TeamOption[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+
+  // Form state
+  const [prompt, setPrompt] = useState(LINEAR_WORKER_DEFAULT_PROMPT);
+  const [scriptPrompt, setScriptPrompt] = useState(LINEAR_WORKER_DEFAULT_SCRIPT_PROMPT);
+  const [cadence, setCadence] = useState("*/30 * * * *");
+  const [condition, setCondition] = useState("");
+  const [teamId, setTeamId] = useState("");
+
+  // Collapsible sections
+  const [selectionExpanded, setSelectionExpanded] = useState(false);
+  const [executionExpanded, setExecutionExpanded] = useState(true);
+
+  const initialFetch = useRef(false);
+
+  const fetchWorker = useCallback(async () => {
+    try {
+      const params = new URLSearchParams();
+      if (projectId) params.set("projectId", projectId);
+      const res = await fetch(`/api/linear/worker?${params}`);
+      if (!res.ok) return;
+      const data = await res.json();
+      if (data.job) {
+        setJob(data.job);
+        setPrompt(data.job.prompt || LINEAR_WORKER_DEFAULT_PROMPT);
+        setScriptPrompt(data.job.scriptPrompt || LINEAR_WORKER_DEFAULT_SCRIPT_PROMPT);
+        setCadence(data.job.cronExpr || data.job.cadence || "*/30 * * * *");
+        setCondition(data.job.condition || "");
+        setTeamId(data.job.teamId || "");
+      }
+    } catch {
+      // ignore
+    } finally {
+      setLoading(false);
+    }
+  }, [projectId]);
+
+  const fetchTeams = useCallback(async () => {
+    if (!projectId) return;
+    try {
+      const res = await fetch(`/api/projects/${projectId}/teams`);
+      if (!res.ok) return;
+      const data = await res.json();
+      const fetchedTeams: TeamOption[] = (data.teams ?? []).map((t: any) => ({
+        id: t.id,
+        name: t.name,
+      }));
+      setTeams(fetchedTeams);
+    } catch {
+      // ignore
+    }
+  }, [projectId]);
+
+  useEffect(() => {
+    if (!initialFetch.current) {
+      initialFetch.current = true;
+      fetchWorker();
+      fetchTeams();
+    }
+  }, [fetchWorker, fetchTeams]);
+
+  // Poll for status updates
+  useEffect(() => {
+    const interval = setInterval(fetchWorker, 15_000);
+    return () => clearInterval(interval);
+  }, [fetchWorker]);
+
+  const handleSave = useCallback(async () => {
+    setSaving(true);
+    try {
+      const body: Record<string, unknown> = {
+        prompt,
+        scriptPrompt,
+        cadence,
+        condition,
+        teamId,
+      };
+      if (projectId) body.projectId = projectId;
+
+      const res = await fetch("/api/linear/worker", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body),
+      });
+
+      if (res.ok) {
+        const data = await res.json();
+        setJob(data.job);
+      }
+    } catch {
+      // ignore
+    } finally {
+      setSaving(false);
+    }
+  }, [prompt, scriptPrompt, cadence, condition, teamId, projectId]);
+
+  const handleToggle = useCallback(async () => {
+    if (!job) {
+      await handleSave();
+      return;
+    }
+
+    setSaving(true);
+    try {
+      const nextState = job.state === "active" ? "paused" : "active";
+      const res = await fetch("/api/linear/worker", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          projectId,
+          state: nextState,
+        }),
+      });
+
+      if (res.ok) {
+        const data = await res.json();
+        setJob(data.job);
+      }
+    } catch {
+      // ignore
+    } finally {
+      setSaving(false);
+    }
+  }, [job, projectId, handleSave]);
+
+  if (loading) {
+    return (
+      <div className="flex items-center gap-2 py-12 justify-center text-sm text-[var(--muted-foreground)]">
+        <RefreshCw size={14} className="animate-spin" />
+        Loading Linear Worker...
+      </div>
+    );
+  }
+
+  const isActive = job?.state === "active";
+
+  return (
+    <div className="flex flex-col gap-4 h-full">
+      {/* Status bar */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-4 text-xs text-[var(--muted-foreground)]">
+          {job && (
+            <>
+              <span
+                className={`rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.16em] ${
+                  isActive
+                    ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-400"
+                    : "border-yellow-500/30 bg-yellow-500/10 text-yellow-400"
+                }`}
+              >
+                {job.state}
+              </span>
+              <span>
+                Next: <span className="text-[var(--foreground)]">{formatNextRun(job.nextRunAt, job.state)}</span>
+              </span>
+              <span>
+                Last: <span className="text-[var(--foreground)]">{formatLastRun(job.lastRunAt)}</span>
+              </span>
+              {job.lastOutcome && (
+                <span>
+                  Outcome:{" "}
+                  <span className={job.lastOutcome === "success" ? "text-emerald-400" : job.lastOutcome === "failed" ? "text-red-400" : "text-[var(--foreground)]"}>
+                    {job.lastOutcome}
+                  </span>
+                </span>
+              )}
+            </>
+          )}
+        </div>
+        <button
+          type="button"
+          disabled={saving}
+          onClick={handleToggle}
+          className={`flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors ${
+            isActive
+              ? "border-yellow-500/30 bg-yellow-500/10 text-yellow-400 hover:bg-yellow-500/20"
+              : "border-emerald-500/30 bg-emerald-500/10 text-emerald-400 hover:bg-emerald-500/20"
+          }`}
+        >
+          {isActive ? (
+            <>
+              <Pause size={12} /> Pause
+            </>
+          ) : (
+            <>
+              <Play size={12} /> {job ? "Resume" : "Enable"}
+            </>
+          )}
+        </button>
+      </div>
+
+      {/* Main layout: Left (prompts) | Right (config) */}
+      <div className="flex flex-1 min-h-0 gap-6 overflow-y-auto">
+        {/* Left: Collapsible prompt sections */}
+        <div className="flex flex-1 min-w-0 flex-col gap-4">
+          {/* Ticket Selection — collapsible */}
+          <CollapsibleSection
+            title="How to pick a ticket"
+            expanded={selectionExpanded}
+            onToggle={() => setSelectionExpanded(!selectionExpanded)}
+          >
+            <div className="min-h-[120px] overflow-y-auto resize-y" style={{ height: 320 }}>
+              <RichTextEditor
+                content={prompt}
+                onChange={(md) => setPrompt(md)}
+                placeholder="Describe how to pick which ticket to work on..."
+              />
+            </div>
+          </CollapsibleSection>
+
+          {/* Execution Prompt — collapsible */}
+          <CollapsibleSection
+            title="How to work a ticket"
+            expanded={executionExpanded}
+            onToggle={() => setExecutionExpanded(!executionExpanded)}
+          >
+            <div className="min-h-[300px] max-h-[50vh] overflow-y-auto">
+              <RichTextEditor
+                content={scriptPrompt}
+                onChange={(md) => setScriptPrompt(md)}
+                placeholder="Instructions injected into the agent session when working a ticket..."
+              />
+            </div>
+          </CollapsibleSection>
+        </div>
+
+        {/* Right: Team + Agent + Schedule */}
+        <div className="w-[340px] shrink-0 space-y-6">
+          {/* Team selector */}
+          {teams.length > 0 && (
+            <div>
+              <Label>Team</Label>
+              <SimpleDropdown
+                value={teamId || ""}
+                options={[
+                  { value: "", label: "Select a team" },
+                  ...teams.map((t) => ({ value: t.id, label: t.name })),
+                ]}
+                onChange={(v) => setTeamId(v)}
+                ariaLabel="Select team"
+              />
+              <p className="mt-1.5 text-[10px] text-[var(--muted-foreground)]">
+                Agents in this team become default participants of the linear chat.
+              </p>
+            </div>
+          )}
+
+          {/* Schedule */}
+          <ScheduleConditionPicker
+            value={{ cadence, condition }}
+            onChange={(next) => {
+              setCadence(next.cadence);
+              setCondition(next.condition);
+            }}
+            scheduleLabel="Schedule"
+            conditionLabel="Condition"
+          />
+        </div>
+      </div>
+
+      {/* Save button */}
+      <div className="flex shrink-0 justify-end pt-2">
+        <button
+          type="button"
+          disabled={saving}
+          onClick={handleSave}
+          className="rounded-lg bg-[var(--foreground)] px-5 py-2 text-sm font-medium text-[var(--background)] transition-opacity hover:opacity-90 disabled:opacity-40"
+        >
+          {saving ? "Saving..." : "Save configuration"}
+        </button>
+      </div>
+    </div>
+  );
+}