@mndrk/agx 2.3.3 → 2.4.2

package/cloud-runtime/standalone/apps/local/components/tracker/GroupPanel.tsx

@@ -0,0 +1,306 @@
+"use client";
+
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import dynamic from "next/dynamic";
+import { FolderOpen, Pencil, Trash2 } from "lucide-react";
+import type { TrackerItem } from "@/lib/tracker/types";
+import type { TaskGroup } from "@/hooks/useTaskGroups";
+import type { Participant } from "@/lib/types";
+import type { ComposerRoutingMetadata } from "@/lib/chat/composer-routing";
+import { useTrackerRuns } from "@/hooks/useTrackerRuns";
+import { useGroupChat } from "@/hooks/useGroupChat";
+import { useProcessPolling } from "@/hooks/useProcessPolling";
+import { TicketRow } from "./TicketRow";
+import { TicketRecapSection } from "./TicketRecapSection";
+import { TicketSessionList } from "./TicketSessionList";
+
+const Composer = dynamic(
+  () => import("@/components/chat-ui/Composer").then((m) => m.Composer),
+  { ssr: false }
+);
+
+function createThreadId() {
+  return (
+    globalThis.crypto?.randomUUID?.() ??
+    `thread-${Date.now()}-${Math.random().toString(36).slice(2)}`
+  );
+}
+
+interface GroupPanelProps {
+  group: TaskGroup;
+  items: TrackerItem[];
+  trackerType: string;
+  participants: Participant[];
+  projectId?: string;
+  projectSlug?: string;
+  onUpdateName: (name: string) => void;
+  onDelete: () => void;
+  onSelectItem: (itemId: string) => void;
+  onRunCreated: (runId: string) => void;
+  onSelectRun: (runId: string) => void;
+}
+
+export function GroupPanel({
+  group,
+  items,
+  trackerType,
+  participants,
+  projectId,
+  projectSlug,
+  onUpdateName,
+  onDelete,
+  onSelectItem,
+  onRunCreated,
+  onSelectRun,
+}: GroupPanelProps) {
+  const [editing, setEditing] = useState(false);
+  const [editName, setEditName] = useState(group.name);
+
+  const handleSaveName = useCallback(() => {
+    const trimmed = editName.trim();
+    if (trimmed && trimmed !== group.name) {
+      onUpdateName(trimmed);
+    }
+    setEditing(false);
+  }, [editName, group.name, onUpdateName]);
+
+  const groupItems = items.filter((item) =>
+    group.task_ids.includes(item.id)
+  );
+
+  const { runs, createRun, updateRun } = useTrackerRuns(
+    trackerType,
+    group.id,
+    projectId ?? null
+  );
+
+  const defaultAgent = participants[0];
+
+  const threadIdRef = useRef<string | null>(null);
+  if (!threadIdRef.current) {
+    threadIdRef.current = createThreadId();
+  }
+  const { messages, setMessages, chatRuns } = useGroupChat(threadIdRef.current);
+  const { processes } = useProcessPolling(
+    { workspaceId: threadIdRef.current },
+    { messages, setMessages }
+  );
+
+  const activeRunStatuses = useMemo(
+    () => new Set(["queued", "running", "awaiting_user", "blocked"]),
+    []
+  );
+  const isWorking =
+    chatRuns.some((entry) => activeRunStatuses.has(entry.status)) ||
+    processes.some((p) => p.state === "spawning" || p.state === "running");
+  const activityStatus: "ready" | "queued" | "working" = isWorking
+    ? chatRuns.some((e) => e.status === "queued")
+      ? "queued"
+      : "working"
+    : "ready";
+
+  const creatingRef = useRef(false);
+
+  const handleSend = useCallback(
+    async (
+      message: string,
+      _maxRounds: number,
+      _attachmentIds?: string[],
+      _attachments?: unknown[],
+      pinnedParticipantId?: string,
+      promptPrefix?: string,
+      routing?: ComposerRoutingMetadata
+    ) => {
+      if (creatingRef.current) return;
+      creatingRef.current = true;
+
+      const agent =
+        (pinnedParticipantId
+          ? participants.find((p) => p.id === pinnedParticipantId)
+          : null) ?? defaultAgent;
+      if (!agent) {
+        creatingRef.current = false;
+        return;
+      }
+
+      try {
+        const { run } = await createRun({
+          projectId: projectId ?? null,
+          projectSlug: projectSlug ?? null,
+          issueId: group.id,
+          issueIdentifier: group.name,
+          issueTitle: group.name,
+          issueStatus: "active",
+          issueAssignee: null,
+          agentId: agent.id,
+          agentName: agent.name,
+          mode: "chat",
+        });
+
+        const ticketList =
+          groupItems.length > 0
+            ? groupItems
+                .map(
+                  (item) =>
+                    `- ${item.identifier}: ${item.title} (${item.status})`
+                )
+                .join("\n")
+            : "- (no tickets assigned to this group)";
+
+        const groupPrefix =
+          [
+            "GROUP SESSION",
+            `You are working on a group of related tickets named "${group.name}".`,
+            `TICKETS IN THIS GROUP:\n${ticketList}`,
+            "Work through these tickets as a coherent unit of work.",
+          ].join("\n\n") +
+          "\n\n" +
+          (promptPrefix ?? "");
+
+        const response = await fetch("/api/chat", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            prompt: message,
+            promptPrefix: groupPrefix,
+            threadId: run.threadId,
+            activeParticipantIds: [agent.id],
+            projectSlug: projectSlug ?? undefined,
+            routing,
+          }),
+        });
+
+        const payload = (await response.json().catch(() => ({}))) as {
+          error?: string;
+          chatRunId?: string;
+          userMessageId?: string;
+        };
+
+        if (!response.ok || !payload.chatRunId || !payload.userMessageId) {
+          throw new Error(payload.error || "Failed to start chat session");
+        }
+
+        await updateRun(run.id, {
+          chatRunId: payload.chatRunId,
+          rootMessageId: payload.userMessageId,
+        });
+
+        onRunCreated(run.id);
+      } catch (error) {
+        console.error("Failed to create group chat session:", error);
+        creatingRef.current = false;
+        if (error instanceof Error) {
+          window.alert(error.message);
+        }
+      }
+    },
+    [
+      group,
+      groupItems,
+      participants,
+      defaultAgent,
+      projectId,
+      projectSlug,
+      createRun,
+      updateRun,
+      onRunCreated,
+    ]
+  );
+
+  return (
+    <div className="relative flex min-w-0 flex-1 flex-col overflow-hidden">
+      {/* Header */}
+      <div className="flex h-12 shrink-0 items-center gap-2 border-b border-[var(--card-border)] px-4">
+        <FolderOpen
+          size={16}
+          className="shrink-0 text-[var(--muted-foreground)]"
+        />
+        {editing ? (
+          <input
+            type="text"
+            value={editName}
+            onChange={(e) => setEditName(e.target.value)}
+            onBlur={handleSaveName}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") handleSaveName();
+              if (e.key === "Escape") {
+                setEditName(group.name);
+                setEditing(false);
+              }
+            }}
+            autoFocus
+            className="min-w-0 flex-1 bg-transparent text-sm font-medium text-[var(--foreground)] outline-none border-b border-[var(--primary)]"
+          />
+        ) : (
+          <h3 className="min-w-0 flex-1 truncate text-sm font-medium text-[var(--foreground)]">
+            {group.name}
+          </h3>
+        )}
+        <button
+          type="button"
+          className="flex h-6 w-6 items-center justify-center rounded text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-colors"
+          onClick={() => {
+            setEditName(group.name);
+            setEditing(true);
+          }}
+          title="Rename group"
+        >
+          <Pencil size={12} />
+        </button>
+        <button
+          type="button"
+          className="flex h-6 w-6 items-center justify-center rounded text-[var(--muted-foreground)] hover:text-red-400 transition-colors"
+          onClick={onDelete}
+          title="Delete group (ungroups tickets)"
+        >
+          <Trash2 size={12} />
+        </button>
+      </div>
+
+      {/* Scrollable content */}
+      <div className="min-h-0 flex-1 overflow-y-auto pb-64">
+        {/* Ticket list */}
+        <section className="border-b border-[var(--card-border)]">
+          <div className="px-4 py-2 text-[10px] font-semibold uppercase tracking-wider text-[var(--muted-foreground)]">
+            Tickets ({groupItems.length})
+          </div>
+          {groupItems.length === 0 ? (
+            <div className="px-4 pb-4 text-center text-xs text-[var(--muted-foreground)]">
+              No tickets in this group.
+            </div>
+          ) : (
+            groupItems.map((item) => (
+              <TicketRow
+                key={item.id}
+                item={item}
+                selected={false}
+                onSelect={() => onSelectItem(item.id)}
+              />
+            ))
+          )}
+        </section>
+
+        <TicketRecapSection issueId={group.id} trackerType={trackerType} projectId={projectId} />
+        <TicketSessionList runs={runs} onSelect={onSelectRun} />
+      </div>
+
+      {/* Composer */}
+      {participants.length > 0 && (
+        <div className="absolute bottom-3 left-3 right-3 p-2">
+          <Composer
+            onSend={handleSend}
+            onStop={() => {}}
+            participants={participants}
+            projectId={projectId ?? undefined}
+            projectSlug={projectSlug ?? undefined}
+            loading={activityStatus !== "ready"}
+            commands={[]}
+            activityStatus={activityStatus}
+            placeholder={`Work on tickets in "${group.name}"...`}
+            initialPinnedParticipantId={defaultAgent?.id}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

package/cloud-runtime/standalone/apps/local/components/tracker/NoteSticker.tsx

@@ -0,0 +1,161 @@
+"use client";
+
+import React, { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { Check, Trash2, X } from "lucide-react";
+import { useEditor, EditorContent } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Placeholder from "@tiptap/extension-placeholder";
+import { Markdown } from "tiptap-markdown";
+
+interface NoteStickerProps {
+  anchorRef: React.RefObject<HTMLElement | null>;
+  value: string;
+  onChange: (value: string) => void;
+  onClose: () => void;
+  onSave: (value: string) => void;
+}
+
+export function NoteSticker({ anchorRef, value, onChange, onClose, onSave }: NoteStickerProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [pos, setPos] = useState<{ top: number; left: number } | null>(null);
+
+  // Compute position centered below the anchor button
+  useEffect(() => {
+    if (!anchorRef.current) return;
+    const rect = anchorRef.current.getBoundingClientRect();
+    setPos({
+      top: rect.bottom + window.scrollY + 6,
+      left: rect.left + window.scrollX + rect.width / 2,
+    });
+  }, [anchorRef]);
+
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Placeholder.configure({
+        placeholder: "Add a note…",
+        emptyEditorClass:
+          "is-editor-empty before:content-[attr(data-placeholder)] before:text-[var(--muted-foreground)]/50 before:float-left before:pointer-events-none before:h-0",
+      }),
+      Markdown.configure({ html: false, transformPastedText: true }),
+    ],
+    immediatelyRender: false,
+    content: value,
+    editorProps: {
+      attributes: {
+        class: "outline-none min-h-[80px] px-3 py-2 text-xs text-[var(--foreground)] prose prose-sm max-w-none",
+      },
+    },
+    onUpdate: ({ editor }) => {
+      onChange((editor.storage as Record<string, any>).markdown?.getMarkdown() ?? value);
+    },
+  });
+
+  // Focus on mount
+  useEffect(() => {
+    if (editor) {
+      setTimeout(() => editor.commands.focus("end"), 0);
+    }
+  }, [editor]);
+
+  // Close + save on outside click or Escape
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(e.target as Node) &&
+        !anchorRef.current?.contains(e.target as Node)
+      ) {
+        const md = editor
+          ? (editor.storage as Record<string, any>).markdown?.getMarkdown() ?? value
+          : value;
+        onSave(md);
+        onClose();
+      }
+    }
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === "Escape") {
+        const md = editor
+          ? (editor.storage as Record<string, any>).markdown?.getMarkdown() ?? value
+          : value;
+        onSave(md);
+        onClose();
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [editor, value, anchorRef, onSave, onClose]);
+
+  if (!pos) return null;
+
+  return createPortal(
+    <div
+      ref={containerRef}
+      style={{
+        position: "absolute",
+        top: pos.top,
+        left: pos.left,
+        transform: "translateX(-50%)",
+        zIndex: 9999,
+        width: 288,
+      }}
+      onClick={(e) => e.stopPropagation()}
+      onKeyDown={(e) => e.stopPropagation()}
+    >
+      <div className="rounded-lg border border-[var(--card-border)] bg-[var(--card-bg)] shadow-xl">
+        <div className="flex h-6 w-full items-center justify-end gap-0.5 rounded-t-lg bg-[var(--primary)]/40 px-1.5">
+          <button
+            type="button"
+            onMouseDown={(e) => {
+              e.preventDefault();
+              const md = editor
+                ? (editor.storage as Record<string, any>).markdown?.getMarkdown() ?? value
+                : value;
+              onSave(md);
+              onClose();
+            }}
+            className="flex h-4 w-4 items-center justify-center rounded text-[var(--foreground)]/60 hover:text-emerald-400 transition-colors"
+            title="Save"
+          >
+            <Check size={11} />
+          </button>
+          <button
+            type="button"
+            onMouseDown={(e) => {
+              e.preventDefault();
+              onClose();
+            }}
+            className="flex h-4 w-4 items-center justify-center rounded text-[var(--foreground)]/60 hover:text-red-400 transition-colors"
+            title="Discard"
+          >
+            <X size={11} />
+          </button>
+        </div>
+        <EditorContent editor={editor} />
+        <div className="flex justify-end px-1.5 pb-1.5">
+          <button
+            type="button"
+            onMouseDown={(e) => {
+              e.preventDefault();
+              onSave("");
+              onClose();
+            }}
+            className="flex h-4 w-4 items-center justify-center rounded text-[var(--foreground)]/40 hover:text-red-400 transition-colors"
+            title="Delete note"
+          >
+            <Trash2 size={11} />
+          </button>
+        </div>
+      </div>
+      <style>{`
+        .ProseMirror { outline: none !important; }
+      `}</style>
+    </div>,
+    document.body
+  );
+}

package/cloud-runtime/standalone/apps/local/components/{linear → tracker}/RunScriptManager.tsx

@@ -4,7 +4,7 @@ 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";
+import type { TrackerRunScript } from "@/state/trackerRunScripts";
 
 type EditorMode =
   | { type: "new" }
@@ -12,10 +12,10 @@ type EditorMode =
 
 interface RunScriptManagerProps {
   projectSlug?: string | null;
-  scripts: LinearRunScript[];
+  scripts: TrackerRunScript[];
   activeScriptId: string | null;
   onSetActiveScriptId: (scriptId: string | null) => void;
-  onSaveScript: (input: { id?: string; name: string; prompt: string }) => LinearRunScript;
+  onSaveScript: (input: { id?: string; name: string; prompt: string }) => TrackerRunScript;
   onDeleteScript: (scriptId: string) => void;
 }
 
@@ -33,7 +33,7 @@ function formatUpdatedAt(iso: string): string {
 }
 
 function buildProjectLabel(projectSlug?: string | null): string {
-  return String(projectSlug ?? "").trim() || "global Linear board";
+  return String(projectSlug ?? "").trim() || "global tracker board";
 }
 
 export default function RunScriptManager({
@@ -54,7 +54,7 @@ export default function RunScriptManager({
   const [draftName, setDraftName] = useState("");
   const [draftPrompt, setDraftPrompt] = useState("");
   const [error, setError] = useState<string | null>(null);
-  const [deleteTarget, setDeleteTarget] = useState<LinearRunScript | null>(null);
+  const [deleteTarget, setDeleteTarget] = useState<TrackerRunScript | null>(null);
   const editingScriptId = editorMode.type === "edit" ? editorMode.scriptId : null;
 
   useEffect(() => {
@@ -85,7 +85,7 @@ export default function RunScriptManager({
     }
   }, [activeScript, editingScriptId, editorMode, scripts]);
 
-  const selectScript = (script: LinearRunScript) => {
+  const selectScript = (script: TrackerRunScript) => {
     setEditorMode({ type: "edit", scriptId: script.id });
     setDraftName(script.name);
     setDraftPrompt(script.prompt);
@@ -285,7 +285,7 @@ export default function RunScriptManager({
                 <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."}
+                  placeholder={"Read {{ticket.identifier}} and the full comment thread before changing code.\nWrite your investigation to {{knowledge_base.issue_path}} and stop after posting a plan unless the item is already approved for implementation."}
                 />
               </div>
             </div>

package/cloud-runtime/standalone/apps/local/components/tracker/SelectionBar.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import React from "react";
+import { FolderPlus, X } from "lucide-react";
+
+interface SelectionBarProps {
+  count: number;
+  onGroup: () => void;
+  onClear: () => void;
+}
+
+export function SelectionBar({ count, onGroup, onClear }: SelectionBarProps) {
+  if (count < 2) return null;
+
+  return (
+    <div className="absolute bottom-4 left-1/2 z-30 -translate-x-1/2 flex items-center gap-3 rounded-xl border border-[var(--card-border)] bg-[var(--card-bg)] px-4 py-2 shadow-2xl">
+      <span className="text-xs text-[var(--muted-foreground)]">
+        {count} selected
+      </span>
+      <button
+        type="button"
+        className="flex items-center gap-1.5 rounded-lg bg-[var(--primary)] px-3 py-1.5 text-[11px] font-medium text-[var(--primary-foreground)] hover:opacity-90 transition-opacity"
+        onClick={onGroup}
+      >
+        <FolderPlus size={12} />
+        Group
+      </button>
+      <button
+        type="button"
+        className="flex h-6 w-6 items-center justify-center rounded text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-colors"
+        onClick={onClear}
+        aria-label="Clear selection"
+      >
+        <X size={14} />
+      </button>
+    </div>
+  );
+}