@mndrk/agx 2.0.46 → 2.0.48

package/cloud-runtime/standalone/components/LinearBoard.tsx

@@ -2,19 +2,35 @@
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import dynamic from "next/dynamic";
-import { Check, ChevronDown, Clock, Link2, Play, RefreshCw, Search, Settings, User } from "lucide-react";
+import { Check, ChevronDown, Clock, FileText, Link2, Play, RefreshCw, Search, Settings, User } from "lucide-react";
 import { useLinearIssues, type LinearIssue } from "@/hooks/useLinearIssues";
 import { useLinearConnection } from "@/hooks/useLinearConnection";
 import { useLinearRuns, type LinearRun } from "@/hooks/useLinearRuns";
+import { useLinearRunScripts } from "@/hooks/useLinearRunScripts";
 import { useGroupChat } from "@/hooks/useGroupChat";
 import { useProcessPolling } from "@/hooks/useProcessPolling";
 import { Markdown } from "@/components/chat-ui/Markdown";
+import RunScriptManager from "@/components/linear/RunScriptManager";
 import { stripMarkers } from "@/lib/chat-utils";
+import {
+  loadLinearBoardFilters,
+  persistLinearBoardFilters,
+} from "@/state/linearBoardFilters";
+import {
+  loadLinearTicketPanelWidth,
+  persistLinearTicketPanelWidth,
+  loadLinearRunsPanelWidth,
+  persistLinearRunsPanelWidth,
+} from "@/state/windowState";
 import {
   orderParticipantIds,
   type ComposerRoutingMetadata,
 } from "@/lib/chat/composer-routing";
-import { buildLinearExecutionPrompt } from "@/lib/linear-execution-prompt";
+import {
+  buildLinearExecutionPrompt,
+  renderLinearExecutionPromptTemplate,
+  type LinearExecutionPromptInput,
+} from "@/lib/linear-execution-prompt";
 import type { Participant } from "@/lib/types";
 import LinearSetup from "@/components/LinearSetup";
 
@@ -289,10 +305,14 @@ function MultiFilterPopdown({
     if (selectedOptions.length === 0) {
       return emptyLabel ?? label;
     }
+    if (selectedOptions.length === options.length) {
+      return emptyLabel ?? label;
+    }
     if (selectedOptions.length === 1) {
       return selectedOptions[0]?.label ?? (emptyLabel ?? label);
     }
-    return `${selectedOptions.length} assignees`;
+    const lowerLabel = label.toLowerCase();
+    return `${selectedOptions.length} ${lowerLabel}${lowerLabel.endsWith("s") ? "es" : "s"}`;
   })();
 
   useEffect(() => {
@@ -920,7 +940,7 @@ function TicketRow({
   const shortStatus = STATUS_LABELS[issue.status] ?? issue.status.slice(0, 6);
   return (
     <div
-      className={`group relative flex items-center gap-3 px-4 py-2.5 text-sm transition-colors ${
+      className={`group relative flex cursor-pointer items-center gap-3 px-4 py-2.5 text-sm transition-colors ${
         selected
           ? "bg-[var(--card-bg)]"
           : "hover:bg-[var(--card-bg)]/50"
@@ -999,13 +1019,17 @@ export default function LinearBoard({ projectId, projectSlug, initialShowSetting
 
   const [setupDismissed, setSetupDismissed] = useState(false);
   const [showSettings, setShowSettings] = useState(initialShowSettings ?? false);
-  const [ticketPanelWidth, setTicketPanelWidth] = useState(576);
-  const [runsPanelWidth, setRunsPanelWidth] = useState(224);
+  const [showRunScripts, setShowRunScripts] = useState(false);
+  const [ticketPanelWidth, setTicketPanelWidth] = useState(() => loadLinearTicketPanelWidth() || 576);
+  const [runsPanelWidth, setRunsPanelWidth] = useState(() => loadLinearRunsPanelWidth() || 224);
   const [search, setSearch] = useState("");
   const [debouncedSearch, setDebouncedSearch] = useState("");
+  const [filterOptionsLoaded, setFilterOptionsLoaded] = useState(false);
   const [assignees, setAssignees] = useState<LinearEntityOption[]>([]);
+  const [statuses, setStatuses] = useState<string[]>([]);
   const [workspaces, setWorkspaces] = useState<LinearEntityOption[]>([]);
   const [selectedAssigneeIds, setSelectedAssigneeIds] = useState<string[]>([]);
+  const [selectedStatuses, setSelectedStatuses] = useState<string[]>([]);
   const [cycles, setCycles] = useState<CycleOption[]>([]);
   const [selectedCycleId, setSelectedCycleId] = useState("");
   const [selectedWorkspaceId, setSelectedWorkspaceId] = useState("");
@@ -1015,6 +1039,9 @@ export default function LinearBoard({ projectId, projectSlug, initialShowSetting
   const [pickerIssue, setPickerIssue] = useState<LinearIssue | null>(null);
   const [pickerAnchor, setPickerAnchor] = useState<{ top: number; left: number } | null>(null);
   const searchDebounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const skipNextFilterPersistRef = useRef(true);
+  const runScriptsButtonRef = useRef<HTMLButtonElement | null>(null);
+  const runScriptsPanelRef = useRef<HTMLDivElement | null>(null);
 
   const handleSearchChange = useCallback((value: string) => {
     setSearch(value);
@@ -1032,42 +1059,94 @@ export default function LinearBoard({ projectId, projectSlug, initialShowSetting
     };
   }, []);
 
+  useEffect(() => {
+    const storedFilters = loadLinearBoardFilters(projectSlug);
+    skipNextFilterPersistRef.current = true;
+    setSearch(storedFilters.search);
+    setDebouncedSearch(storedFilters.search);
+    setSelectedAssigneeIds(storedFilters.assigneeIds);
+    setSelectedStatuses(storedFilters.statuses);
+    setSelectedWorkspaceId(storedFilters.teamId);
+    setSelectedCycleId(storedFilters.cycleId);
+  }, [projectSlug]);
+
+  useEffect(() => {
+    if (skipNextFilterPersistRef.current) {
+      skipNextFilterPersistRef.current = false;
+      return;
+    }
+
+    persistLinearBoardFilters(projectSlug, {
+      search,
+      assigneeIds: selectedAssigneeIds,
+      statuses: selectedStatuses,
+      teamId: selectedWorkspaceId,
+      cycleId: selectedCycleId,
+    });
+  }, [projectSlug, search, selectedAssigneeIds, selectedStatuses, selectedWorkspaceId, selectedCycleId]);
+
   // Fetch filter options when connected
   useEffect(() => {
     if (!connected) return;
     let cancelled = false;
-    fetch("/api/linear/options")
+    setFilterOptionsLoaded(false);
+    const params = new URLSearchParams();
+    if (projectSlug) {
+      params.set("projectSlug", projectSlug);
+    }
+    const url = params.size > 0 ? `/api/linear/options?${params.toString()}` : "/api/linear/options";
+    fetch(url)
       .then((res) => res.json())
       .then((data) => {
         if (cancelled) {
           return;
         }
         setAssignees(Array.isArray(data.assignees) ? data.assignees : []);
+        setStatuses(Array.isArray(data.statuses) ? data.statuses : []);
         setWorkspaces(Array.isArray(data.teams) ? data.teams : []);
         setCycles(Array.isArray(data.cycles) ? data.cycles : []);
+        setFilterOptionsLoaded(true);
       })
       .catch(() => {
         if (!cancelled) {
           setAssignees([]);
+          setStatuses([]);
           setWorkspaces([]);
           setCycles([]);
+          setFilterOptionsLoaded(true);
         }
       });
     return () => {
       cancelled = true;
     };
-  }, [connected]);
+  }, [connected, projectSlug]);
 
   useEffect(() => {
+    if (!filterOptionsLoaded) {
+      return;
+    }
     const validAssigneeIds = selectedAssigneeIds.filter((assigneeId) =>
       assignees.some((assignee) => assignee.id === assigneeId)
     );
     if (validAssigneeIds.length !== selectedAssigneeIds.length) {
       setSelectedAssigneeIds(validAssigneeIds);
     }
-  }, [assignees, selectedAssigneeIds]);
+  }, [assignees, filterOptionsLoaded, selectedAssigneeIds]);
+
+  useEffect(() => {
+    if (!filterOptionsLoaded) {
+      return;
+    }
+    const validStatuses = selectedStatuses.filter((status) => statuses.includes(status));
+    if (validStatuses.length !== selectedStatuses.length) {
+      setSelectedStatuses(validStatuses);
+    }
+  }, [filterOptionsLoaded, selectedStatuses, statuses]);
 
   useEffect(() => {
+    if (!filterOptionsLoaded) {
+      return;
+    }
     if (workspaces.length <= 1 && selectedWorkspaceId) {
       setSelectedWorkspaceId("");
       return;
@@ -1076,22 +1155,29 @@ export default function LinearBoard({ projectId, projectSlug, initialShowSetting
     if (selectedWorkspaceId && !workspaces.some((workspace) => workspace.id === selectedWorkspaceId)) {
       setSelectedWorkspaceId("");
     }
-  }, [selectedWorkspaceId, workspaces]);
+  }, [filterOptionsLoaded, selectedWorkspaceId, workspaces]);
 
   useEffect(() => {
+    if (!filterOptionsLoaded) {
+      return;
+    }
     if (selectedCycleId && !cycles.some((cycle) => cycle.id === selectedCycleId)) {
       setSelectedCycleId("");
     }
-  }, [cycles, selectedCycleId]);
+  }, [cycles, filterOptionsLoaded, selectedCycleId]);
 
   const filters = useMemo(
     () => ({
       search: debouncedSearch || undefined,
+      statuses:
+        selectedStatuses.length > 0 && selectedStatuses.length < statuses.length
+          ? selectedStatuses
+          : undefined,
       assigneeIds: selectedAssigneeIds.length > 0 ? selectedAssigneeIds : undefined,
       teamId: selectedWorkspaceId || undefined,
       cycleId: selectedCycleId || undefined,
     }),
-    [debouncedSearch, selectedAssigneeIds, selectedCycleId, selectedWorkspaceId]
+    [debouncedSearch, selectedAssigneeIds, selectedCycleId, selectedStatuses, selectedWorkspaceId, statuses.length]
   );
 
   const {
@@ -1107,12 +1193,24 @@ export default function LinearBoard({ projectId, projectSlug, initialShowSetting
     createRun,
     updateRun,
   } = useLinearRuns(selectedIssue?.id, projectId ?? null);
+  const {
+    scripts: runScripts,
+    activeScriptId,
+    activeScript,
+    setActiveScriptId,
+    saveScript,
+    deleteScript,
+  } = useLinearRunScripts(projectSlug);
 
   const selectedRun = runs.find((run) => run.id === selectedRunId) ?? null;
   const assigneeOptions = useMemo<FilterOption[]>(
     () => assignees.map((assignee) => ({ value: assignee.id, label: assignee.name })),
     [assignees]
   );
+  const statusOptions = useMemo<FilterOption[]>(
+    () => statuses.map((status) => ({ value: status, label: status })),
+    [statuses]
+  );
   const workspaceOptions = useMemo<FilterOption[]>(
     () => [{ value: "", label: "Workspace" }, ...workspaces.map((workspace) => ({ value: workspace.id, label: workspace.name }))],
     [workspaces]
@@ -1127,8 +1225,10 @@ export default function LinearBoard({ projectId, projectSlug, initialShowSetting
     ],
     [cycles]
   );
+  const showStatusFilter = statusOptions.length > 0;
   const showCycleFilter = cycleOptions.length > 1;
   const showWorkspaceFilter = workspaceOptions.length > 2;
+  const activeRunScriptLabel = activeScript?.name ?? "AGX default";
 
   useEffect(() => {
     if (issues.length === 0) {
@@ -1210,8 +1310,39 @@ export default function LinearBoard({ projectId, projectSlug, initialShowSetting
     };
   }, [projectId]);
 
+  useEffect(() => {
+    if (!showRunScripts) {
+      return;
+    }
+
+    const handlePointerDown = (event: MouseEvent) => {
+      const target = event.target as Node;
+      if (runScriptsPanelRef.current?.contains(target)) {
+        return;
+      }
+      if (runScriptsButtonRef.current?.contains(target)) {
+        return;
+      }
+      setShowRunScripts(false);
+    };
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setShowRunScripts(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [showRunScripts]);
+
   const handleExecute = useCallback(
     (issue: LinearIssue, event?: React.MouseEvent) => {
+      setShowRunScripts(false);
       if (participants.length === 0) {
         window.alert("Add at least one agent to this project before running a Linear ticket.");
         return;
@@ -1250,7 +1381,7 @@ export default function LinearBoard({ projectId, projectSlug, initialShowSetting
         });
         setSelectedRunId(createdRun.id);
 
-        const { prompt, promptPrefix } = buildLinearExecutionPrompt({
+        const executionPromptInput: LinearExecutionPromptInput = {
           issue: {
             identifier: issue.identifier,
             title: issue.title,
@@ -1258,14 +1389,21 @@ export default function LinearBoard({ projectId, projectSlug, initialShowSetting
             assignee: issue.assignee,
           },
           project: projectSlug ? { slug: projectSlug } : null,
-        });
+        };
+        const { prompt: defaultPrompt, promptPrefix } = buildLinearExecutionPrompt(executionPromptInput);
+        const prompt = activeScript
+          ? renderLinearExecutionPromptTemplate(activeScript.prompt, executionPromptInput).trim() || defaultPrompt
+          : defaultPrompt;
+        const effectivePromptPrefix = activeScript
+          ? `${promptPrefix}ACTIVE RUN SCRIPT\n- Name: ${activeScript.name}\n\n`
+          : promptPrefix;
 
         const response = await fetch("/api/chat", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({
             prompt,
-            promptPrefix,
+            promptPrefix: effectivePromptPrefix,
             threadId: createdRun.threadId,
             activeParticipantIds: [agent.id],
             projectSlug: projectSlug ?? undefined,
@@ -1299,7 +1437,7 @@ export default function LinearBoard({ projectId, projectSlug, initialShowSetting
         }
       }
     },
-    [createRun, projectId, projectSlug, updateRun]
+    [activeScript, createRun, projectId, projectSlug, updateRun]
   );
 
   const sentinelRef = useRef<HTMLDivElement | null>(null);
@@ -1373,13 +1511,26 @@ export default function LinearBoard({ projectId, projectSlug, initialShowSetting
             <button
               type="button"
               className="shrink-0 rounded p-1.5 text-[var(--muted-foreground)] transition-colors hover:bg-[var(--card-bg)] hover:text-[var(--foreground)]"
-              onClick={() => setShowSettings(true)}
+              onClick={() => {
+                setShowRunScripts(false);
+                setShowSettings(true);
+              }}
               title="Linear settings"
             >
               <Settings size={16} />
             </button>
           </div>
           <div className="flex items-center gap-1.5 px-3 pb-2">
+            {showStatusFilter ? (
+              <MultiFilterPopdown
+                label="Status"
+                values={selectedStatuses}
+                options={statusOptions}
+                activeClasses="border-amber-500/30 bg-amber-500/10 text-amber-300"
+                onChange={setSelectedStatuses}
+                emptyLabel="All statuses"
+              />
+            ) : null}
             <MultiFilterPopdown
               label="Assignee"
               values={selectedAssigneeIds}
@@ -1442,22 +1593,54 @@ export default function LinearBoard({ projectId, projectSlug, initialShowSetting
         </div>
       </div>
 
-      <ResizeHandle onResize={(delta) => setTicketPanelWidth((w) => Math.max(180, Math.min(600, w + delta)))} />
+      <ResizeHandle onResize={(delta) => setTicketPanelWidth((w) => { const next = Math.max(180, Math.min(600, w + delta)); persistLinearTicketPanelWidth(next); return next; })} />
 
       <div className="flex shrink-0 flex-col border-r border-[var(--card-border)]" style={{ width: runsPanelWidth }}>
-        <div className="flex items-center justify-between border-b border-[var(--card-border)] px-3 py-2">
+        <div className="relative flex items-center justify-between border-b border-[var(--card-border)] px-3 py-2">
           <h3 className="text-xs font-semibold text-[var(--foreground)]">Runs</h3>
-          {selectedIssue && (
+          <div className="flex items-center gap-1">
             <button
+              ref={runScriptsButtonRef}
               type="button"
-              className="flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] font-medium text-[var(--muted-foreground)] transition-colors hover:bg-[var(--card-bg)] hover:text-[var(--foreground)]"
-              onClick={(event) => handleExecute(selectedIssue, event)}
-              title="Run agent on selected ticket"
+              className={`flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] font-medium transition-colors ${
+                showRunScripts
+                  ? "bg-[var(--card-bg)] text-[var(--foreground)]"
+                  : "text-[var(--muted-foreground)] hover:bg-[var(--card-bg)] hover:text-[var(--foreground)]"
+              }`}
+              onClick={() => setShowRunScripts((current) => !current)}
+              title={`Run script: ${activeRunScriptLabel}`}
             >
-              <Play size={10} />
-              <span>Run now</span>
+              <FileText size={10} />
+              <span className="max-w-[88px] truncate">{activeRunScriptLabel}</span>
             </button>
-          )}
+            {selectedIssue && (
+              <button
+                type="button"
+                className="flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] font-medium text-[var(--muted-foreground)] transition-colors hover:bg-[var(--card-bg)] hover:text-[var(--foreground)]"
+                onClick={(event) => handleExecute(selectedIssue, event)}
+                title="Run agent on selected ticket"
+              >
+                <Play size={10} />
+                <span>Run now</span>
+              </button>
+            )}
+          </div>
+          {showRunScripts ? (
+            <div
+              ref={runScriptsPanelRef}
+              className="absolute right-3 top-full z-20 mt-2 max-h-[80vh] overflow-y-auto rounded-2xl border border-[var(--card-border)] bg-[var(--background)] p-4 shadow-2xl"
+              style={{ width: "min(760px, calc(100vw - 32px))" }}
+            >
+              <RunScriptManager
+                projectSlug={projectSlug}
+                scripts={runScripts}
+                activeScriptId={activeScriptId}
+                onSetActiveScriptId={setActiveScriptId}
+                onSaveScript={saveScript}
+                onDeleteScript={deleteScript}
+              />
+            </div>
+          ) : null}
         </div>
 
         <div className="flex-1 overflow-y-auto">
@@ -1517,7 +1700,7 @@ export default function LinearBoard({ projectId, projectSlug, initialShowSetting
         </div>
       </div>
 
-      <ResizeHandle onResize={(delta) => setRunsPanelWidth((w) => Math.max(140, Math.min(500, w + delta)))} />
+      <ResizeHandle onResize={(delta) => setRunsPanelWidth((w) => { const next = Math.max(140, Math.min(500, w + delta)); persistLinearRunsPanelWidth(next); return next; })} />
 
       <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
         {selectedRun ? (
@@ -1553,7 +1736,7 @@ export default function LinearBoard({ projectId, projectSlug, initialShowSetting
             >
               &times;
             </button>
-            <div className="p-6">
+            <div className="max-h-[80vh] overflow-y-auto p-6">
               <LinearSetup
                 connected={connected}
                 user={user}

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

@@ -15,6 +15,7 @@ import {
   loadWorkspaceSidebarVisible,
   persistWorkspaceSidebarVisible,
 } from "@/state/uiSettings";
+import { loadWorkspaceWidth, persistWorkspaceWidth } from "@/state/windowState";
 import {
   loadStoredActiveParticipantIds,
   persistStoredActiveParticipantIds,
@@ -357,6 +358,7 @@ export function ChatContainer({
     return document.documentElement.classList.contains("dark") ? "dark" : "light";
   });
   const [workspaceSidebarVisible, setWorkspaceSidebarVisible] = useState(false);
+  const [workspaceSidebarWidth, setWorkspaceSidebarWidth] = useState(368);
   const workspaceSidebarHydratedRef = useRef(false);
 
   // Sync sidebar visibility from localStorage after hydration to avoid SSR mismatch
@@ -364,6 +366,7 @@ export function ChatContainer({
     const stored = loadWorkspaceSidebarVisible();
     workspaceSidebarHydratedRef.current = true;
     setWorkspaceSidebarVisible(stored);
+    setWorkspaceSidebarWidth(loadWorkspaceWidth() || 368);
   }, []);
   useEffect(() => {
     if (typeof window === "undefined") return;
@@ -1566,6 +1569,11 @@ export function ChatContainer({
     });
   }, [persistSidebarPreference]);
 
+  const handleWorkspaceSidebarWidthChange = useCallback((w: number) => {
+    setWorkspaceSidebarWidth(w);
+    persistWorkspaceWidth(w);
+  }, []);
+
   const handleAdd = async (p: Participant) => {
     const res = await fetch("/api/participants", {
       method: "POST",
@@ -1776,6 +1784,8 @@ export function ChatContainer({
             onToggleParticipantActive={handleToggleParticipantActive}
             visible={workspaceSidebarVisible}
             onToggle={toggleWorkspaceSidebar}
+            width={workspaceSidebarWidth}
+            onWidthChange={handleWorkspaceSidebarWidthChange}
             projects={projects}
             onCreateProject={createProject}
             onUpdateProject={updateProject}