@mndrk/agx 2.0.56 → 2.1.0

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

@@ -35,6 +35,27 @@ import type {
 } from "@/src/prompt-scheduler/types";
 import { cronToHuman } from "@/src/graph/nl-schedule";
 import { ScheduleConditionPicker } from "@/components/scheduling/ScheduleConditionPicker";
+import {
+  LINEAR_WORKER_DEFAULT_PROMPT,
+  LINEAR_WORKER_JOB_NAME,
+} from "@/src/prompt-scheduler/linear-worker-constants";
+
+const EXECUTION_MODE_OPTIONS: Array<{
+  value: PromptJobExecutionMode;
+  label: string;
+  description: string;
+}> = [
+  {
+    value: "prompt",
+    label: "Prompt",
+    description: "Run a prompt on a schedule",
+  },
+  {
+    value: "linear_worker",
+    label: "Linear Worker",
+    description: "Observe Linear workspace and decide what to work on",
+  },
+];
 
 const Composer = dynamic(() => import("@/components/chat-ui/Composer").then((m) => m.Composer), {
   ssr: false,
@@ -243,6 +264,9 @@ export function CreateJobModal({
   contextLabel?: string | null;
 }) {
   const [agents, setAgents] = useState<AgentOption[]>([]);
+  const [executionMode, setExecutionMode] = useState<PromptJobExecutionMode>(
+    editingJob?.executionMode ?? createDefaults?.executionMode ?? "prompt"
+  );
   const [name, setName] = useState(editingJob?.name ?? createDefaults?.name ?? "");
   const [prompt, setPrompt] = useState(editingJob?.prompt ?? createDefaults?.prompt ?? "");
   const [agentId, setAgentId] = useState(editingJob?.agentId ?? createDefaults?.agentId ?? "");
@@ -288,6 +312,7 @@ export function CreateJobModal({
       catchUpPolicy,
       cadence: cadence.trim(),
       condition: condition.trim(),
+      executionMode,
     });
     setSubmitting(false);
     onClose();
@@ -353,6 +378,37 @@ export function CreateJobModal({
         </div>
 
         <div className="w-[380px] shrink-0 overflow-y-auto p-6 space-y-6">
+          <div>
+            <Label>Type</Label>
+            <div className="space-y-1.5">
+              {EXECUTION_MODE_OPTIONS.map((opt) => (
+                <button
+                  key={opt.value}
+                  type="button"
+                  onClick={() => {
+                    setExecutionMode(opt.value);
+                    if (opt.value === "linear_worker") {
+                      if (!name.trim()) setName(LINEAR_WORKER_JOB_NAME);
+                      if (!prompt.trim()) setPrompt(LINEAR_WORKER_DEFAULT_PROMPT);
+                    }
+                  }}
+                  className={`w-full text-left px-3 py-2 rounded-lg border transition-all ${
+                    executionMode === opt.value
+                      ? "border-[var(--foreground)] bg-[var(--foreground)]/5"
+                      : "border-[var(--card-border)] bg-[var(--muted)] hover:border-[var(--muted-foreground)]"
+                  }`}
+                >
+                  <div className="text-xs font-medium text-[var(--foreground)]">
+                    {opt.label}
+                  </div>
+                  <div className="text-[10px] text-[var(--muted-foreground)]">
+                    {opt.description}
+                  </div>
+                </button>
+              ))}
+            </div>
+          </div>
+
           <AgentDropdown
             agents={agents}
             value={agentId}
@@ -897,6 +953,18 @@ function JobDetailView({
               <div className="px-6 py-5">
                 <div className="rounded-2xl border border-[var(--card-border)] bg-[var(--card-bg)] px-5 py-4">
                   <div className="grid grid-cols-[96px,minmax(0,1fr)] items-center gap-x-4 gap-y-4">
+                    {job.executionMode && job.executionMode !== "prompt" && (
+                      <>
+                        <div className="text-[11px] uppercase tracking-[0.12em] text-[var(--muted-foreground)]">
+                          Type
+                        </div>
+                        <div className="min-w-0">
+                          <span className="rounded-md border border-violet-400/20 bg-violet-500/10 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-violet-400">
+                            {EXECUTION_MODE_OPTIONS.find((o) => o.value === job.executionMode)?.label ?? job.executionMode}
+                          </span>
+                        </div>
+                      </>
+                    )}
                     <div className="text-[11px] uppercase tracking-[0.12em] text-[var(--muted-foreground)]">
                       Agent
                     </div>
@@ -1404,6 +1472,11 @@ export default function PromptJobBoard({
                           >
                             {scheduleLabel}
                           </span>
+                          {job.executionMode === "linear_worker" ? (
+                            <span className="rounded-md border border-violet-400/20 bg-violet-500/10 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-violet-400">
+                              linear
+                            </span>
+                          ) : null}
                           {job.condition ? (
                             <span className="rounded-md border border-blue-400/20 bg-blue-500/10 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-blue-400">
                               gated

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

@@ -150,46 +150,51 @@ export default function NodeDetailPanel({
   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 || 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, isTouchLayout]);
   
@@ -250,7 +255,7 @@ export default function NodeDetailPanel({
       <aside
         ref={panelRef}
         className={`node-detail-panel ${isOpen ? "node-detail-panel--open" : ""}${isTouchLayout ? " node-detail-panel--touch" : ""}`}
-        style={isTouchLayout ? undefined : { width: `${width}px` }}
+        style={isTouchLayout ? undefined : { width: `${DEFAULT_WIDTH}px` }}
       >
       {/* Resize handle */}
       {!isTouchLayout ? (

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>
+  );
+}