@mndrk/agx 2.0.47 → 2.0.49

package/cloud-runtime/standalone/components/linear/RunScriptManager.tsx

@@ -0,0 +1,356 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { Check, Plus, Save, Trash2 } from "lucide-react";
+import ConfirmDialog from "@/components/ConfirmDialog";
+import RichTextEditor from "@/components/RichTextEditor";
+import type { LinearRunScript } from "@/state/linearRunScripts";
+
+type EditorMode =
+  | { type: "new" }
+  | { type: "edit"; scriptId: string };
+
+interface RunScriptManagerProps {
+  projectSlug?: string | null;
+  scripts: LinearRunScript[];
+  activeScriptId: string | null;
+  onSetActiveScriptId: (scriptId: string | null) => void;
+  onSaveScript: (input: { id?: string; name: string; prompt: string }) => LinearRunScript;
+  onDeleteScript: (scriptId: string) => void;
+}
+
+function formatUpdatedAt(iso: string): string {
+  try {
+    return new Date(iso).toLocaleString([], {
+      month: "short",
+      day: "numeric",
+      hour: "numeric",
+      minute: "2-digit",
+    });
+  } catch {
+    return iso;
+  }
+}
+
+function buildProjectLabel(projectSlug?: string | null): string {
+  return String(projectSlug ?? "").trim() || "global Linear board";
+}
+
+export default function RunScriptManager({
+  projectSlug,
+  scripts,
+  activeScriptId,
+  onSetActiveScriptId,
+  onSaveScript,
+  onDeleteScript,
+}: RunScriptManagerProps) {
+  const activeScript = useMemo(
+    () => scripts.find((script) => script.id === activeScriptId) ?? null,
+    [activeScriptId, scripts]
+  );
+  const [editorMode, setEditorMode] = useState<EditorMode>(() =>
+    activeScriptId ? { type: "edit", scriptId: activeScriptId } : { type: "new" }
+  );
+  const [draftName, setDraftName] = useState("");
+  const [draftPrompt, setDraftPrompt] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [deleteTarget, setDeleteTarget] = useState<LinearRunScript | null>(null);
+  const editingScriptId = editorMode.type === "edit" ? editorMode.scriptId : null;
+
+  useEffect(() => {
+    if (editorMode.type === "edit") {
+      const script = scripts.find((entry) => entry.id === editorMode.scriptId);
+      if (script) {
+        setDraftName(script.name);
+        setDraftPrompt(script.prompt);
+        return;
+      }
+    }
+
+    if (activeScript && editorMode.type !== "new") {
+      if (editorMode.type !== "edit" || editorMode.scriptId !== activeScript.id) {
+        setEditorMode({ type: "edit", scriptId: activeScript.id });
+      }
+      setDraftName(activeScript.name);
+      setDraftPrompt(activeScript.prompt);
+      return;
+    }
+
+    if (scripts.length === 0) {
+      if (editorMode.type !== "new") {
+        setEditorMode({ type: "new" });
+        setDraftName("");
+        setDraftPrompt("");
+      }
+    }
+  }, [activeScript, editingScriptId, editorMode, scripts]);
+
+  const selectScript = (script: LinearRunScript) => {
+    setEditorMode({ type: "edit", scriptId: script.id });
+    setDraftName(script.name);
+    setDraftPrompt(script.prompt);
+    setError(null);
+    onSetActiveScriptId(script.id);
+  };
+
+  const startNewScript = () => {
+    setEditorMode({ type: "new" });
+    setDraftName("");
+    setDraftPrompt("");
+    setError(null);
+  };
+
+  const handleSaveNew = () => {
+    try {
+      const saved = onSaveScript({
+        name: draftName,
+        prompt: draftPrompt,
+      });
+      setEditorMode({ type: "edit", scriptId: saved.id });
+      setError(null);
+    } catch (saveError) {
+      setError(saveError instanceof Error ? saveError.message : "Failed to save run script.");
+    }
+  };
+
+  const handleUpdate = () => {
+    if (editorMode.type !== "edit") {
+      handleSaveNew();
+      return;
+    }
+
+    try {
+      const saved = onSaveScript({
+        id: editorMode.scriptId,
+        name: draftName,
+        prompt: draftPrompt,
+      });
+      setEditorMode({ type: "edit", scriptId: saved.id });
+      setError(null);
+    } catch (saveError) {
+      setError(saveError instanceof Error ? saveError.message : "Failed to update run script.");
+    }
+  };
+
+  const confirmDelete = () => {
+    if (!deleteTarget) {
+      return;
+    }
+
+    onDeleteScript(deleteTarget.id);
+    if (editorMode.type === "edit" && editorMode.scriptId === deleteTarget.id) {
+      setEditorMode({ type: "new" });
+      setDraftName("");
+      setDraftPrompt("");
+    }
+    setDeleteTarget(null);
+    setError(null);
+  };
+
+  return (
+    <div className="flex flex-col gap-5">
+      <div className="flex flex-col gap-1">
+        <h3 className="text-sm font-semibold text-[var(--foreground)]">Run Scripts</h3>
+        <p className="text-xs leading-relaxed text-[var(--muted-foreground)]">
+          Save reusable execution prompts for the {buildProjectLabel(projectSlug)}. These scripts are stored locally on this device and layered on top of the built-in ticket context when you run a Linear task.
+        </p>
+      </div>
+
+      <div className="grid gap-5 md:grid-cols-[240px_minmax(0,1fr)]">
+        <aside className="rounded-xl border border-[var(--card-border)] bg-[var(--card-bg)] p-3">
+          <div className="mb-3 flex items-center justify-between">
+            <span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-[var(--muted-foreground)]">
+              Library
+            </span>
+            <button
+              type="button"
+              className="inline-flex items-center gap-1 rounded-md border border-[var(--card-border)] px-2 py-1 text-[11px] font-medium text-[var(--foreground)] transition-colors hover:bg-[var(--background)]"
+              onClick={startNewScript}
+            >
+              <Plus size={12} />
+              New
+            </button>
+          </div>
+
+          <div className="flex flex-col gap-1.5">
+            <button
+              type="button"
+              className={`flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-xs transition-colors ${
+                activeScriptId === null
+                  ? "bg-[var(--background)] text-[var(--foreground)]"
+                  : "text-[var(--muted-foreground)] hover:bg-[var(--background)] hover:text-[var(--foreground)]"
+              }`}
+              onClick={() => onSetActiveScriptId(null)}
+            >
+              <span
+                className={`flex h-4 w-4 shrink-0 items-center justify-center rounded-full border ${
+                  activeScriptId === null
+                    ? "border-blue-500 bg-blue-500 text-white"
+                    : "border-[var(--card-border)]"
+                }`}
+              >
+                {activeScriptId === null ? <Check size={10} /> : null}
+              </span>
+              <span className="min-w-0 flex-1 truncate font-medium">AGX default</span>
+            </button>
+
+            {scripts.length === 0 ? (
+              <div className="rounded-lg border border-dashed border-[var(--card-border)] px-3 py-4 text-xs leading-relaxed text-[var(--muted-foreground)]">
+                No saved scripts yet. Create one to reuse your preferred Linear execution prompt.
+              </div>
+            ) : (
+              scripts.map((script) => {
+                const isActive = script.id === activeScriptId;
+                const isEditing = editorMode.type === "edit" && editorMode.scriptId === script.id;
+                return (
+                  <button
+                    key={script.id}
+                    type="button"
+                    className={`rounded-lg border px-3 py-2 text-left transition-colors ${
+                      isEditing
+                        ? "border-blue-500/50 bg-[var(--background)]"
+                        : "border-transparent hover:border-[var(--card-border)] hover:bg-[var(--background)]"
+                    }`}
+                    onClick={() => selectScript(script)}
+                  >
+                    <div className="flex items-start gap-2">
+                      <span
+                        className={`mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border ${
+                          isActive
+                            ? "border-blue-500 bg-blue-500 text-white"
+                            : "border-[var(--card-border)]"
+                        }`}
+                      >
+                        {isActive ? <Check size={10} /> : null}
+                      </span>
+                      <div className="min-w-0 flex-1">
+                        <div className="truncate text-xs font-medium text-[var(--foreground)]">
+                          {script.name}
+                        </div>
+                        <div className="mt-1 line-clamp-2 text-[11px] leading-relaxed text-[var(--muted-foreground)]">
+                          {script.prompt}
+                        </div>
+                        <div className="mt-2 text-[10px] uppercase tracking-[0.14em] text-[var(--muted-foreground)]">
+                          Updated {formatUpdatedAt(script.updatedAt)}
+                        </div>
+                      </div>
+                    </div>
+                  </button>
+                );
+              })
+            )}
+          </div>
+        </aside>
+
+        <section className="rounded-xl border border-[var(--card-border)] bg-[var(--card-bg)] p-4">
+          <div className="mb-4 flex items-start justify-between gap-3">
+            <div>
+              <h4 className="text-sm font-semibold text-[var(--foreground)]">
+                {editorMode.type === "edit" ? "Edit Run Script" : "New Run Script"}
+              </h4>
+              <p className="mt-1 text-xs leading-relaxed text-[var(--muted-foreground)]">
+                Use placeholders like <code>{"{{ticket.identifier}}"}</code>, <code>{"{{ticket.title}}"}</code>, <code>{"{{ticket.status}}"}</code>, <code>{"{{ticket.assignee}}"}</code>, <code>{"{{project.slug}}"}</code>, <code>{"{{knowledge_base.root}}"}</code>, <code>{"{{knowledge_base.issue_path}}"}</code>, and <code>{"{{worktree.path}}"}</code>.
+              </p>
+            </div>
+            {activeScript ? (
+              <span className="rounded-full border border-blue-500/30 bg-blue-500/10 px-2.5 py-1 text-[11px] font-medium text-blue-400">
+                Active: {activeScript.name}
+              </span>
+            ) : (
+              <span className="rounded-full border border-[var(--card-border)] px-2.5 py-1 text-[11px] font-medium text-[var(--muted-foreground)]">
+                Active: AGX default
+              </span>
+            )}
+          </div>
+
+          <div className="flex flex-col gap-3">
+            <label className="flex flex-col gap-1.5">
+              <span className="text-[11px] font-semibold uppercase tracking-[0.14em] text-[var(--muted-foreground)]">
+                Name
+              </span>
+              <input
+                type="text"
+                className="rounded-lg border border-[var(--card-border)] bg-[var(--background)] px-3 py-2 text-sm text-[var(--foreground)] outline-none transition-colors focus:border-blue-500"
+                placeholder="Investigation-first"
+                value={draftName}
+                onChange={(event) => setDraftName(event.target.value)}
+              />
+            </label>
+
+            <div className="flex flex-col gap-1.5">
+              <span className="text-[11px] font-semibold uppercase tracking-[0.14em] text-[var(--muted-foreground)]">
+                Prompt
+              </span>
+              <div className="overflow-hidden rounded-lg border border-[var(--card-border)] bg-[var(--background)] transition-colors focus-within:border-blue-500 [&_.rich-text-editor_.ProseMirror]:min-h-[220px]">
+                <RichTextEditor
+                  content={draftPrompt}
+                  onChange={setDraftPrompt}
+                  placeholder={"Read {{ticket.identifier}} and the full comment thread in Linear before changing code.\nWrite your investigation to {{knowledge_base.issue_path}} and stop after posting a plan unless the issue is already approved for implementation."}
+                />
+              </div>
+            </div>
+
+            {error ? (
+              <div className="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-xs text-red-300">
+                {error}
+              </div>
+            ) : null}
+
+            <div className="flex flex-wrap items-center gap-2">
+              <button
+                type="button"
+                className="inline-flex items-center gap-1.5 rounded-lg bg-blue-500 px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-600"
+                onClick={handleSaveNew}
+              >
+                <Save size={14} />
+                Save as new
+              </button>
+              {editorMode.type === "edit" ? (
+                <button
+                  type="button"
+                  className="inline-flex items-center gap-1.5 rounded-lg border border-[var(--card-border)] px-3 py-2 text-sm font-medium text-[var(--foreground)] transition-colors hover:bg-[var(--background)]"
+                  onClick={handleUpdate}
+                >
+                  <Save size={14} />
+                  Update
+                </button>
+              ) : null}
+              {editorMode.type === "edit" ? (
+                <button
+                  type="button"
+                  className="inline-flex items-center gap-1.5 rounded-lg border border-red-500/30 px-3 py-2 text-sm font-medium text-red-300 transition-colors hover:bg-red-500/10"
+                  onClick={() => {
+                    const script = scripts.find((entry) => entry.id === editorMode.scriptId) ?? null;
+                    setDeleteTarget(script);
+                  }}
+                >
+                  <Trash2 size={14} />
+                  Delete
+                </button>
+              ) : null}
+              <button
+                type="button"
+                className="inline-flex items-center gap-1.5 rounded-lg border border-[var(--card-border)] px-3 py-2 text-sm font-medium text-[var(--muted-foreground)] transition-colors hover:bg-[var(--background)] hover:text-[var(--foreground)]"
+                onClick={startNewScript}
+              >
+                <Plus size={14} />
+                Clear editor
+              </button>
+            </div>
+          </div>
+        </section>
+      </div>
+
+      <ConfirmDialog
+        isOpen={Boolean(deleteTarget)}
+        title="Delete run script?"
+        message="This removes the saved script from this device for the current project."
+        preview={deleteTarget?.name}
+        confirmLabel="Delete"
+        variant="danger"
+        onConfirm={confirmDelete}
+        onCancel={() => setDeleteTarget(null)}
+      />
+    </div>
+  );
+}

package/cloud-runtime/standalone/components/thread/WorkspaceSidebar.tsx

@@ -45,6 +45,8 @@ interface WorkspaceSidebarProps {
   isRestoringActiveThread?: boolean;
   onToggle?: () => void;
   onSearch?: () => void;
+  width?: number;
+  onWidthChange?: (width: number) => void;
   // Projects
   projects?: ProjectWithAgents[];
   onCreateProject?: (payload: { name: string; description?: string; repos?: Array<{ name: string; path?: string; notes?: string }> }, threadId?: string) => Promise<unknown>;
@@ -90,7 +92,11 @@ export function WorkspaceSidebar({
   onSelectProject,
   activeProjectId = null,
   activeProjectView = null,
+  width,
+  onWidthChange,
 }: WorkspaceSidebarProps) {
+  const resizing = useRef(false);
+  const lastX = useRef(0);
   const emptyCtaRef = useRef<HTMLButtonElement | null>(null);
   const [hasMounted, setHasMounted] = useState(false);
   const [expandedProjects, setExpandedProjects] = useState<Set<string>>(new Set());
@@ -362,6 +368,7 @@ export function WorkspaceSidebar({
       className="workspace-sidebar"
       aria-label="Workspace sidebar"
       aria-busy={isLoading ? "true" : undefined}
+      style={width ? { width: `${width}px`, minWidth: `${width}px` } : undefined}
     >
       <div className="workspace-sidebar__brand">
           <div className="workspace-sidebar__brand-content flex items-center gap-2 px-1">
@@ -1262,6 +1269,34 @@ export function WorkspaceSidebar({
           />
         );
       })(), document.body)}
+      {onWidthChange && (
+        <div
+          className="absolute right-0 top-0 bottom-0 z-20 w-1 cursor-col-resize group"
+          onMouseDown={(e) => {
+            e.preventDefault();
+            resizing.current = true;
+            const startX = e.clientX;
+            const startWidth = width ?? 368;
+            document.body.style.cursor = "col-resize";
+            document.body.style.userSelect = "none";
+            const onMouseMove = (ev: MouseEvent) => {
+              const newWidth = Math.max(200, Math.min(600, startWidth + ev.clientX - startX));
+              onWidthChange(newWidth);
+            };
+            const onMouseUp = () => {
+              resizing.current = false;
+              document.body.style.cursor = "";
+              document.body.style.userSelect = "";
+              window.removeEventListener("mousemove", onMouseMove);
+              window.removeEventListener("mouseup", onMouseUp);
+            };
+            window.addEventListener("mousemove", onMouseMove);
+            window.addEventListener("mouseup", onMouseUp);
+          }}
+        >
+          <div className="absolute inset-y-0 right-0 w-1 transition-colors hover:bg-[var(--primary)]/40 group-hover:bg-[var(--primary)]/40" />
+        </div>
+      )}
     </aside>
   );
 }

package/cloud-runtime/standalone/hooks/useLinearRunScripts.ts

@@ -0,0 +1,115 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  loadLinearRunScripts,
+  persistLinearRunScripts,
+  type LinearRunScript,
+} from "@/state/linearRunScripts";
+
+interface SaveLinearRunScriptInput {
+  id?: string;
+  name: string;
+  prompt: string;
+}
+
+function buildTimestamp(): string {
+  return new Date().toISOString();
+}
+
+function sortScripts(scripts: LinearRunScript[]): LinearRunScript[] {
+  return [...scripts].sort((left, right) => right.updatedAt.localeCompare(left.updatedAt));
+}
+
+export function useLinearRunScripts(projectSlug?: string | null) {
+  const [scripts, setScripts] = useState<LinearRunScript[]>([]);
+  const [activeScriptId, setActiveScriptIdState] = useState<string | null>(null);
+
+  useEffect(() => {
+    const state = loadLinearRunScripts(projectSlug);
+    setScripts(state.scripts);
+    setActiveScriptIdState(state.activeScriptId);
+  }, [projectSlug]);
+
+  const persistState = useCallback(
+    (nextScripts: LinearRunScript[], nextActiveScriptId: string | null) => {
+      setScripts(nextScripts);
+      setActiveScriptIdState(nextActiveScriptId);
+      persistLinearRunScripts(projectSlug, {
+        scripts: nextScripts,
+        activeScriptId: nextActiveScriptId,
+      });
+    },
+    [projectSlug]
+  );
+
+  const setActiveScriptId = useCallback(
+    (nextActiveScriptId: string | null) => {
+      const normalizedId =
+        nextActiveScriptId && scripts.some((script) => script.id === nextActiveScriptId)
+          ? nextActiveScriptId
+          : null;
+      persistState(scripts, normalizedId);
+    },
+    [persistState, scripts]
+  );
+
+  const saveScript = useCallback(
+    (input: SaveLinearRunScriptInput): LinearRunScript => {
+      const now = buildTimestamp();
+      const name = input.name.trim();
+      const prompt = input.prompt.trim();
+      if (!name || !prompt) {
+        throw new Error("Run script name and prompt are required.");
+      }
+
+      const existing = input.id ? scripts.find((script) => script.id === input.id) : null;
+      const nextScript: LinearRunScript = existing
+        ? {
+            ...existing,
+            name,
+            prompt,
+            updatedAt: now,
+          }
+        : {
+            id: crypto.randomUUID(),
+            name,
+            prompt,
+            createdAt: now,
+            updatedAt: now,
+          };
+
+      const nextScripts = sortScripts(
+        existing
+          ? scripts.map((script) => (script.id === existing.id ? nextScript : script))
+          : [nextScript, ...scripts]
+      );
+      persistState(nextScripts, nextScript.id);
+      return nextScript;
+    },
+    [persistState, scripts]
+  );
+
+  const deleteScript = useCallback(
+    (scriptId: string) => {
+      const nextScripts = scripts.filter((script) => script.id !== scriptId);
+      const nextActiveScriptId = activeScriptId === scriptId ? null : activeScriptId;
+      persistState(nextScripts, nextActiveScriptId);
+    },
+    [activeScriptId, persistState, scripts]
+  );
+
+  const activeScript = useMemo(
+    () => scripts.find((script) => script.id === activeScriptId) ?? null,
+    [activeScriptId, scripts]
+  );
+
+  return {
+    scripts,
+    activeScriptId,
+    activeScript,
+    setActiveScriptId,
+    saveScript,
+    deleteScript,
+  };
+}