@mndrk/agx 2.0.41 → 2.0.44

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

@@ -0,0 +1,1321 @@
+"use client";
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import dynamic from "next/dynamic";
+import { Check, ChevronDown, Clock, Link2, Play, 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 { useGroupChat } from "@/hooks/useGroupChat";
+import { useProcessPolling } from "@/hooks/useProcessPolling";
+import { Markdown } from "@/components/chat-ui/Markdown";
+import { stripMarkers } from "@/lib/chat-utils";
+import {
+  orderParticipantIds,
+  type ComposerRoutingMetadata,
+} from "@/lib/chat/composer-routing";
+import { buildLinearExecutionPrompt } from "@/lib/linear-execution-prompt";
+import type { Participant } from "@/lib/types";
+import LinearSetup from "@/components/LinearSetup";
+
+const Composer = dynamic(
+  () => import("@/components/chat-ui/Composer").then((module) => module.Composer),
+  { ssr: false }
+);
+
+function ResizeHandle({
+  onResize,
+}: {
+  onResize: (delta: number) => void;
+}) {
+  const dragging = useRef(false);
+  const lastX = useRef(0);
+
+  useEffect(() => {
+    if (!dragging.current) return;
+
+    const onMouseMove = (e: MouseEvent) => {
+      const delta = e.clientX - lastX.current;
+      lastX.current = e.clientX;
+      onResize(delta);
+    };
+
+    const onMouseUp = () => {
+      dragging.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);
+    return () => {
+      window.removeEventListener("mousemove", onMouseMove);
+      window.removeEventListener("mouseup", onMouseUp);
+    };
+  });
+
+  return (
+    <div
+      className="group relative z-10 w-0 shrink-0 cursor-col-resize"
+      onMouseDown={(e) => {
+        e.preventDefault();
+        dragging.current = true;
+        lastX.current = e.clientX;
+        document.body.style.cursor = "col-resize";
+        document.body.style.userSelect = "none";
+      }}
+    >
+      <div className="absolute inset-y-0 -left-0.5 w-1 transition-colors group-hover:bg-[var(--primary)]/40" />
+    </div>
+  );
+}
+
+function agentAvatarUrl(id: string, color?: string, size = 20): string {
+  const bg = color ? color.replace("#", "") : "e2e8f0";
+  return `https://api.dicebear.com/9.x/bottts-neutral/svg?seed=${encodeURIComponent(id)}&size=${size}&backgroundColor=${bg}`;
+}
+
+function formatRunTime(iso: string): string {
+  return new Date(iso).toLocaleTimeString([], {
+    hour: "numeric",
+    minute: "2-digit",
+  });
+}
+
+function formatRunStatus(status: LinearRun["status"]): string {
+  switch (status) {
+    case "queued":
+      return "queued";
+    case "running":
+      return "running";
+    case "success":
+      return "success";
+    case "failed":
+      return "failed";
+    case "cancelled":
+      return "cancelled";
+    default:
+      return status;
+  }
+}
+
+const STATUS_LABELS: Record<string, string> = {
+  "In Progress": "In Prog",
+  "In Review": "Review",
+  Backlog: "Backlog",
+  Todo: "Todo",
+  Done: "Done",
+  Cancelled: "Cancl.",
+};
+
+const STATUS_BADGE_STYLES: Record<LinearRun["status"], string> = {
+  queued: "bg-amber-500/10 border-amber-500/20 text-amber-400",
+  running: "bg-yellow-500/10 border-yellow-500/20 text-yellow-400",
+  success: "bg-emerald-500/10 border-emerald-500/20 text-emerald-400",
+  failed: "bg-red-500/10 border-red-500/20 text-red-400",
+  cancelled: "bg-zinc-500/10 border-zinc-500/20 text-zinc-400",
+};
+
+const STATUS_DOT_COLORS: Record<LinearRun["status"], string> = {
+  queued: "bg-amber-400",
+  running: "bg-yellow-400",
+  success: "bg-emerald-400",
+  failed: "bg-red-400",
+  cancelled: "bg-zinc-400",
+};
+
+function TicketChatStarter({
+  issue,
+  participants,
+  projectId,
+  projectSlug,
+  createRun,
+  updateRun,
+  onRunCreated,
+}: {
+  issue: LinearIssue;
+  participants: Participant[];
+  projectId?: string;
+  projectSlug?: string;
+  createRun: (input: {
+    projectId: string | null;
+    projectSlug: string | null;
+    issueId: string;
+    issueIdentifier: string;
+    issueTitle: string;
+    issueStatus: string;
+    issueAssignee: string | null;
+    agentId: string;
+    agentName: string;
+  }) => Promise<LinearRun>;
+  updateRun: (id: string, input: {
+    rootMessageId?: string | null;
+    chatRunId?: string | null;
+    status?: LinearRun["status"];
+    error?: string | null;
+  }) => Promise<LinearRun>;
+  onRunCreated: (runId: string) => void;
+}) {
+  const defaultAgent = participants[0];
+  const threadIdRef = useRef(crypto.randomUUID());
+  const { messages, setMessages, sendMessage, chatRuns } = useGroupChat(threadIdRef.current);
+  const { processes, streaming } = useProcessPolling(
+    { workspaceId: threadIdRef.current },
+    { messages, setMessages }
+  );
+
+  const activeRunStatuses = new Set(["queued", "running", "awaiting_user", "blocked"]);
+  const isWorking =
+    chatRuns.some((entry) => activeRunStatuses.has(entry.status)) ||
+    processes.some((process) => process.state === "spawning" || process.state === "running");
+  const activityStatus: "ready" | "queued" | "working" = isWorking
+    ? chatRuns.some((entry) => entry.status === "queued")
+      ? "queued"
+      : "working"
+    : "ready";
+
+  const participantMap = useMemo(
+    () => new Map(participants.map((p) => [p.id, p])),
+    [participants]
+  );
+
+  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) return;
+
+      try {
+        const { promptPrefix: ticketPrefix } = buildLinearExecutionPrompt({
+          issue: {
+            identifier: issue.identifier,
+            title: issue.title,
+            status: issue.status,
+            assignee: issue.assignee,
+          },
+          project: projectSlug ? { slug: projectSlug } : null,
+        });
+
+        const combinedPrefix = ticketPrefix + (promptPrefix ? `\n${promptPrefix}` : "");
+
+        const run = await createRun({
+          projectId: projectId ?? null,
+          projectSlug: projectSlug ?? null,
+          issueId: issue.id,
+          issueIdentifier: issue.identifier,
+          issueTitle: issue.title,
+          issueStatus: issue.status,
+          issueAssignee: issue.assignee ?? null,
+          agentId: agent.id,
+          agentName: agent.name,
+        });
+
+        const response = await fetch("/api/chat", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            prompt: message,
+            promptPrefix: combinedPrefix,
+            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 chat session:", error);
+        creatingRef.current = false;
+        if (error instanceof Error) {
+          window.alert(error.message);
+        }
+      }
+    },
+    [issue, participants, defaultAgent, projectId, projectSlug, createRun, updateRun, onRunCreated]
+  );
+
+  return (
+    <div className="relative flex min-w-0 flex-1 flex-col overflow-hidden">
+      <header className="flex h-12 shrink-0 items-center justify-between border-b border-[var(--card-border)] px-6">
+        <div className="flex min-w-0 items-center gap-3">
+          <span className="shrink-0 font-mono text-sm text-[var(--muted-foreground)]">
+            {issue.identifier}
+          </span>
+          <div className="h-1 w-1 shrink-0 rounded-full bg-[var(--card-border)]" />
+          <span className="truncate text-sm font-medium text-[var(--foreground)]">
+            {issue.title}
+          </span>
+        </div>
+        <span className="shrink-0 rounded-md border border-[var(--card-border)] px-2 py-0.5 text-xs text-[var(--muted-foreground)]">
+          {issue.status}
+        </span>
+      </header>
+
+      <div className="min-h-0 flex-1 overflow-y-auto px-6 py-6 pb-64">
+        {messages.length === 0 ? (
+          <div className="flex h-full flex-col items-center justify-center gap-2 text-[var(--muted-foreground)]">
+            <span className="text-sm">Chat about this ticket</span>
+            <span className="text-xs">Your message will start a new session</span>
+          </div>
+        ) : (
+          <div className="mx-auto max-w-4xl space-y-8">
+            {messages.map((msg) => {
+              const participant = msg.participantId ? participantMap.get(msg.participantId) : null;
+              const content = stripMarkers(msg.content);
+              if (!content.trim()) return null;
+              return (
+                <div key={msg.id} className="flex gap-3">
+                  {msg.role === "user" ? (
+                    <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-[var(--app-shell-subtle,var(--card-bg))]">
+                      <User className="h-3.5 w-3.5 text-[var(--muted-foreground)]" />
+                    </div>
+                  ) : (
+                    <img
+                      src={agentAvatarUrl(msg.participantId ?? "", participant?.color)}
+                      alt={participant?.name ?? "Agent"}
+                      className="h-7 w-7 shrink-0 rounded-full object-cover"
+                    />
+                  )}
+                  <div className="min-w-0 flex-1 flex flex-col gap-1.5">
+                    <span className="text-sm font-semibold text-[var(--foreground)]">
+                      {msg.role === "user" ? "You" : participant?.name ?? "Agent"}
+                    </span>
+                    <div className="text-sm text-[var(--foreground)]">
+                      <Markdown content={content} isUser={msg.role === "user"} />
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+            {Object.entries(streaming).map(([participantId]) => {
+              const participant = participantMap.get(participantId);
+              return (
+                <div key={`stream-${participantId}`} className="flex items-center gap-3 text-sm text-[var(--muted-foreground)]">
+                  <img
+                    src={agentAvatarUrl(participantId, participant?.color)}
+                    alt={participant?.name ?? "Agent"}
+                    className="h-7 w-7 shrink-0 rounded-full object-cover"
+                  />
+                  {participant?.name ?? "Agent"} is thinking...
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      <div className="absolute bottom-3 left-3 right-3 p-2">
+        <Composer
+          onSend={handleSend}
+          onStop={() => {}}
+          participants={participants}
+          loading={activityStatus !== "ready"}
+          commands={[]}
+          activityStatus={activityStatus}
+          placeholder={`Ask about ${issue.identifier}...`}
+          initialPinnedParticipantId={defaultAgent?.id}
+        />
+      </div>
+    </div>
+  );
+}
+
+function ThreadMessageList({
+  run,
+  participants,
+}: {
+  run: LinearRun;
+  participants: Participant[];
+}) {
+  const { messages, setMessages, sendMessage, loadHistory, stop } = useGroupChat(
+    run.threadId
+  );
+  const { processes, streaming, chatRuns } = useProcessPolling(
+    run.rootMessageId
+      ? { workspaceId: run.threadId, threadId: run.rootMessageId }
+      : { workspaceId: run.threadId },
+    { messages, setMessages }
+  );
+
+  useEffect(() => {
+    void loadHistory();
+  }, [loadHistory, run.threadId]);
+
+  const participantMap = useMemo(
+    () => new Map(participants.map((participant) => [participant.id, participant])),
+    [participants]
+  );
+
+  const activeRunStatuses = new Set(["queued", "running", "awaiting_user", "blocked"]);
+  const isWorking =
+    chatRuns.some((entry) => activeRunStatuses.has(entry.status)) ||
+    processes.some((process) => process.state === "spawning" || process.state === "running");
+  const activityStatus: "ready" | "queued" | "working" = isWorking
+    ? chatRuns.some((entry) => entry.status === "queued")
+      ? "queued"
+      : "working"
+    : "ready";
+
+  const handleSend = useCallback(
+    (
+      message: string,
+      maxRounds: number,
+      attachmentIds?: string[],
+      _attachments?: unknown[],
+      pinnedParticipantId?: string,
+      promptPrefix?: string,
+      routing?: ComposerRoutingMetadata
+    ) => {
+      if (!run.rootMessageId) {
+        return;
+      }
+
+      void sendMessage(
+        message,
+        maxRounds,
+        undefined,
+        run.rootMessageId,
+        attachmentIds,
+        undefined,
+        orderParticipantIds(
+          participants.map((participant) => participant.id),
+          pinnedParticipantId
+        ),
+        run.projectSlug ?? undefined,
+        promptPrefix,
+        routing
+      );
+    },
+    [participants, run.projectSlug, run.rootMessageId, sendMessage]
+  );
+
+  return (
+    <div className="relative flex min-w-0 flex-1 flex-col overflow-hidden">
+      {/* Merged header: ticket info + run status */}
+      <header className="flex h-12 shrink-0 items-center justify-between border-b border-[var(--card-border)] px-6">
+        <div className="flex min-w-0 items-center gap-3">
+          <span className="shrink-0 font-mono text-sm text-[var(--muted-foreground)]">
+            {run.issueIdentifier}
+          </span>
+          <div className="h-1 w-1 shrink-0 rounded-full bg-[var(--card-border)]" />
+          <span className="truncate text-sm font-medium text-[var(--foreground)]">
+            {run.issueTitle ?? ""}
+          </span>
+        </div>
+
+        <div className="flex shrink-0 items-center gap-4">
+          <div
+            className={`flex items-center gap-2 rounded-md border px-2.5 py-1 ${STATUS_BADGE_STYLES[run.status]}`}
+          >
+            <div className={`h-1.5 w-1.5 rounded-full ${STATUS_DOT_COLORS[run.status]}`} />
+            <span className="text-xs font-semibold uppercase tracking-wider">
+              {formatRunStatus(run.status)}
+            </span>
+          </div>
+
+          {run.durationMs != null && (
+            <div className="flex items-center gap-1.5 text-sm text-[var(--muted-foreground)]">
+              <Clock size={14} />
+              <span>{(run.durationMs / 1000).toFixed(1)}s</span>
+            </div>
+          )}
+
+          <div className="flex items-center gap-2 rounded-full border border-[var(--card-border)] bg-[var(--card-bg)] px-2 py-1">
+            <img
+              src={agentAvatarUrl(run.agentId, participantMap.get(run.agentId)?.color)}
+              alt={run.agentName}
+              className="h-5 w-5 rounded-full object-cover"
+            />
+            <span className="pr-1 text-xs font-medium">{run.agentName}</span>
+          </div>
+        </div>
+      </header>
+
+      <div className="min-h-0 flex-1 overflow-y-auto px-6 py-6 pb-64">
+        {messages.length === 0 ? (
+          <div className="py-8 text-center text-xs text-[var(--muted-foreground)]">
+            {run.status === "queued" || run.status === "running"
+              ? "Starting run..."
+              : "No thread messages yet."}
+          </div>
+        ) : (
+          <div className="mx-auto max-w-4xl space-y-8">
+            {messages.map((message) => {
+              const participant = message.participantId
+                ? participantMap.get(message.participantId)
+                : null;
+              const content = stripMarkers(message.content);
+              if (!content.trim()) return null;
+
+              const agentId = message.participantId ?? run.agentId;
+
+              return (
+                <div key={message.id} className="flex gap-3">
+                  {/* Avatar */}
+                  {message.role === "user" ? (
+                    <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-[var(--app-shell-subtle,var(--card-bg))]">
+                      <User className="h-3.5 w-3.5 text-[var(--muted-foreground)]" />
+                    </div>
+                  ) : (
+                    <img
+                      src={agentAvatarUrl(agentId, participant?.color)}
+                      alt={participant?.name ?? run.agentName}
+                      className="h-7 w-7 shrink-0 rounded-full object-cover"
+                    />
+                  )}
+
+                  <div className="min-w-0 flex-1 flex flex-col gap-1.5">
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-2">
+                        {message.role === "user" ? (
+                          <span className="text-sm font-semibold text-[var(--foreground)]">You</span>
+                        ) : (
+                          <>
+                            <span
+                              className="text-sm font-semibold"
+                              style={{ color: participant?.color ?? "var(--foreground)" }}
+                            >
+                              {participant?.name ?? run.agentName}
+                            </span>
+                            <span className="rounded bg-[var(--card-bg)] px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wider text-[var(--muted-foreground)]">
+                              Agent
+                            </span>
+                          </>
+                        )}
+                      </div>
+                      <span className="text-xs text-[var(--muted-foreground)]">
+                        {new Date(message.timestamp).toLocaleTimeString([], {
+                          hour: "numeric",
+                          minute: "2-digit",
+                        })}
+                      </span>
+                    </div>
+                    {message.role === "user" ? (
+                      <div className="w-fit max-w-[85%] rounded-xl rounded-tl-sm border border-[var(--card-border)] bg-[var(--card-bg)] px-4 py-3 text-sm text-[var(--foreground)]">
+                        <Markdown content={content} isUser />
+                      </div>
+                    ) : (
+                      <div className="text-sm text-[var(--foreground)]">
+                        <Markdown content={content} isUser={false} />
+                      </div>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+
+            {Object.entries(streaming)
+              .filter(([, entry]) => !run.rootMessageId || entry.rootMessageId === run.rootMessageId)
+              .map(([participantId]) => {
+                const participant = participantMap.get(participantId);
+                return (
+                  <div key={`stream-${participantId}`} className="flex items-center gap-3 text-sm text-[var(--muted-foreground)]">
+                    <img
+                      src={agentAvatarUrl(participantId, participant?.color)}
+                      alt={participant?.name ?? run.agentName}
+                      className="h-7 w-7 shrink-0 rounded-full object-cover"
+                    />
+                    {participant?.name ?? run.agentName} is thinking...
+                  </div>
+                );
+              })}
+          </div>
+        )}
+      </div>
+
+      <div className="absolute bottom-3 left-3 right-3 p-2">
+        {run.rootMessageId ? (
+          <Composer
+            onSend={handleSend}
+            onStop={stop}
+            participants={participants}
+            loading={activityStatus !== "ready"}
+            commands={[]}
+            activityStatus={activityStatus}
+            placeholder="Steer this run..."
+            initialPinnedParticipantId={run.agentId}
+          />
+        ) : (
+          <div className="px-2 py-1 text-xs text-[var(--muted-foreground)]">
+            Waiting for the run to start...
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function TicketRow({
+  issue,
+  selected,
+  onSelect,
+  onExecute,
+}: {
+  issue: LinearIssue;
+  selected: boolean;
+  onSelect: () => void;
+  onExecute: (issue: LinearIssue, event?: React.MouseEvent) => void;
+}) {
+  const [copied, setCopied] = useState(false);
+  const copyResetTimeoutRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (copyResetTimeoutRef.current) {
+        window.clearTimeout(copyResetTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  const handleCopyUrl = useCallback(async (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+    if (!issue.url) {
+      return;
+    }
+
+    try {
+      await navigator.clipboard.writeText(issue.url);
+      setCopied(true);
+      if (copyResetTimeoutRef.current) {
+        window.clearTimeout(copyResetTimeoutRef.current);
+      }
+      copyResetTimeoutRef.current = window.setTimeout(() => {
+        setCopied(false);
+      }, 1500) as unknown as number;
+    } catch (error) {
+      console.error("Failed to copy Linear issue URL:", error);
+      setCopied(false);
+    }
+  }, [issue.url]);
+
+  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 ${
+        selected
+          ? "bg-[var(--card-bg)]"
+          : "hover:bg-[var(--card-bg)]/50"
+      }`}
+      onClick={onSelect}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          onSelect();
+        }
+      }}
+    >
+      {selected && (
+        <div className="absolute left-0 top-0 bottom-0 w-[3px] rounded-r-full bg-blue-500" />
+      )}
+      <span className="w-14 shrink-0 font-mono text-xs text-[var(--muted-foreground)]">
+        {issue.identifier}
+      </span>
+      <span className={`flex-1 truncate text-xs ${selected ? "font-medium text-[var(--foreground)]" : "text-[var(--muted-foreground)]"}`}>
+        {issue.title}
+      </span>
+      <span className="shrink-0 text-xs text-[var(--muted-foreground)]">
+        {shortStatus}
+      </span>
+      <button
+        type="button"
+        className={`flex h-6 w-6 shrink-0 items-center justify-center rounded text-[var(--muted-foreground)] transition-all hover:bg-zinc-700 hover:text-[var(--foreground)] ${
+          selected ? "opacity-100" : "opacity-0 group-hover:opacity-100"
+        } ${issue.url ? "" : "cursor-not-allowed opacity-40 hover:bg-transparent hover:text-[var(--muted-foreground)]"}`}
+        onClick={(event) => {
+          void handleCopyUrl(event);
+        }}
+        title={copied ? "Copied ticket URL" : "Copy ticket URL"}
+        aria-label={copied ? "Copied ticket URL" : "Copy ticket URL"}
+        disabled={!issue.url}
+      >
+        {copied ? <Check size={10} className="text-emerald-400" /> : <Link2 size={10} />}
+      </button>
+      <button
+        type="button"
+        className={`flex h-6 w-6 shrink-0 items-center justify-center rounded text-[var(--muted-foreground)] transition-all hover:bg-zinc-700 hover:text-[var(--foreground)] ${
+          selected ? "opacity-100" : "opacity-0 group-hover:opacity-100"
+        }`}
+        onClick={(event) => {
+          event.stopPropagation();
+          onExecute(issue, event);
+        }}
+        title="Execute with agent"
+      >
+        <Play size={10} className="ml-0.5" />
+      </button>
+    </div>
+  );
+}
+
+interface LinearBoardProps {
+  projectId?: string;
+  projectSlug?: string;
+  initialShowSettings?: boolean;
+}
+
+export default function LinearBoard({ projectId, projectSlug, initialShowSettings }: LinearBoardProps) {
+  const {
+    connected,
+    loading: connectionLoading,
+    user,
+    clis,
+    mcpConfigured,
+    connect,
+    connectWithKey,
+    disconnect,
+    configureMcp,
+  } = useLinearConnection();
+
+  interface Cycle {
+    id: string;
+    number: number;
+    name: string | null;
+    startsAt: string;
+    endsAt: string;
+  }
+
+  const [setupDismissed, setSetupDismissed] = useState(false);
+  const [showSettings, setShowSettings] = useState(initialShowSettings ?? false);
+  const [ticketPanelWidth, setTicketPanelWidth] = useState(576);
+  const [runsPanelWidth, setRunsPanelWidth] = useState(224);
+  const [search, setSearch] = useState("");
+  const [debouncedSearch, setDebouncedSearch] = useState("");
+  const [assignedToMe, setAssignedToMe] = useState(false);
+  const [cycles, setCycles] = useState<Cycle[]>([]);
+  const [selectedCycleId, setSelectedCycleId] = useState<string | undefined>(undefined);
+  const [showCyclePicker, setShowCyclePicker] = useState(false);
+  const [selectedIssue, setSelectedIssue] = useState<LinearIssue | null>(null);
+  const [selectedRunId, setSelectedRunId] = useState<string | null>(null);
+  const [participants, setParticipants] = useState<Participant[]>([]);
+  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 cyclePickerRef = useRef<HTMLDivElement | null>(null);
+
+  const handleSearchChange = useCallback((value: string) => {
+    setSearch(value);
+    if (searchDebounceRef.current) {
+      clearTimeout(searchDebounceRef.current);
+    }
+    searchDebounceRef.current = setTimeout(() => setDebouncedSearch(value), 300);
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (searchDebounceRef.current) {
+        clearTimeout(searchDebounceRef.current);
+      }
+    };
+  }, []);
+
+  // Fetch cycles when connected
+  useEffect(() => {
+    if (!connected) return;
+    let cancelled = false;
+    fetch("/api/linear/cycles")
+      .then((res) => res.json())
+      .then((data) => {
+        if (!cancelled && Array.isArray(data.cycles)) {
+          setCycles(data.cycles);
+        }
+      })
+      .catch(() => {});
+    return () => { cancelled = true; };
+  }, [connected]);
+
+  // Close cycle picker on outside click
+  useEffect(() => {
+    if (!showCyclePicker) return;
+    const handler = (e: MouseEvent) => {
+      if (cyclePickerRef.current && !cyclePickerRef.current.contains(e.target as Node)) {
+        setShowCyclePicker(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [showCyclePicker]);
+
+  const filters = useMemo(
+    () => ({
+      search: debouncedSearch || undefined,
+      assignedToMe: assignedToMe || undefined,
+      cycleId: selectedCycleId,
+    }),
+    [debouncedSearch, assignedToMe, selectedCycleId]
+  );
+
+  const {
+    issues,
+    loading: issuesLoading,
+    hasMore,
+    loadMore,
+  } = useLinearIssues(filters, connected);
+  const {
+    runs,
+    loading: runsLoading,
+    createRun,
+    updateRun,
+  } = useLinearRuns(selectedIssue?.id, projectId ?? null);
+
+  const selectedRun = runs.find((run) => run.id === selectedRunId) ?? null;
+
+  useEffect(() => {
+    if (issues.length === 0) {
+      setSelectedIssue(null);
+      return;
+    }
+
+    setSelectedIssue((current) => {
+      if (current && issues.some((issue) => issue.id === current.id)) {
+        return issues.find((issue) => issue.id === current.id) ?? current;
+      }
+      return issues[0] ?? null;
+    });
+  }, [issues]);
+
+  useEffect(() => {
+    if (runs.length === 0) {
+      setSelectedRunId(null);
+      return;
+    }
+
+    if (!selectedRunId || !runs.some((run) => run.id === selectedRunId)) {
+      setSelectedRunId(runs[0]?.id ?? null);
+    }
+  }, [runs, selectedRunId]);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function loadParticipants() {
+      try {
+        const participantsResponse = await fetch("/api/participants");
+        const allParticipants = participantsResponse.ok
+          ? ((await participantsResponse.json()) as Participant[])
+          : [];
+
+        if (!projectId) {
+          if (!cancelled) setParticipants(allParticipants);
+          return;
+        }
+
+        const projectAgentsResponse = await fetch(
+          `/api/projects/${encodeURIComponent(projectId)}/agents`
+        );
+        if (!projectAgentsResponse.ok) {
+          if (!cancelled) setParticipants(allParticipants);
+          return;
+        }
+
+        const projectData = await projectAgentsResponse.json();
+        const orderedAgentIds: string[] = Array.isArray(projectData.agents)
+          ? projectData.agents
+              .map((agent: { agent_id?: string }) => agent.agent_id)
+              .filter((value: unknown): value is string => typeof value === "string" && value.trim().length > 0)
+          : [];
+        const orderIndex = new Map(orderedAgentIds.map((id, index) => [id, index]));
+        const scopedParticipants = allParticipants
+          .filter((participant) => orderIndex.has(participant.id))
+          .sort(
+            (left, right) =>
+              (orderIndex.get(left.id) ?? Number.MAX_SAFE_INTEGER) -
+              (orderIndex.get(right.id) ?? Number.MAX_SAFE_INTEGER)
+          );
+
+        if (!cancelled) {
+          setParticipants(scopedParticipants);
+        }
+      } catch {
+        if (!cancelled) {
+          setParticipants([]);
+        }
+      }
+    }
+
+    void loadParticipants();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [projectId]);
+
+  const handleExecute = useCallback(
+    (issue: LinearIssue, event?: React.MouseEvent) => {
+      if (participants.length === 0) {
+        window.alert("Add at least one agent to this project before running a Linear ticket.");
+        return;
+      }
+      if (participants.length === 1) {
+        void executeWithAgent(issue, participants[0]);
+        return;
+      }
+      // Multiple agents — show picker
+      const rect = (event?.currentTarget as HTMLElement)?.getBoundingClientRect();
+      setPickerIssue(issue);
+      setPickerAnchor(rect ? { top: rect.bottom + 4, left: rect.left } : { top: 200, left: 200 });
+    },
+    [participants],
+  );
+
+  const executeWithAgent = useCallback(
+    async (issue: LinearIssue, agent: Participant) => {
+      setPickerIssue(null);
+      setPickerAnchor(null);
+
+      let createdRun: LinearRun | null = null;
+      try {
+        setSelectedIssue(issue);
+
+        createdRun = await createRun({
+          projectId: projectId ?? null,
+          projectSlug: projectSlug ?? null,
+          issueId: issue.id,
+          issueIdentifier: issue.identifier,
+          issueTitle: issue.title,
+          issueStatus: issue.status,
+          issueAssignee: issue.assignee,
+          agentId: agent.id,
+          agentName: agent.name,
+        });
+        setSelectedRunId(createdRun.id);
+
+        const { prompt, promptPrefix } = buildLinearExecutionPrompt({
+          issue: {
+            identifier: issue.identifier,
+            title: issue.title,
+            status: issue.status,
+            assignee: issue.assignee,
+          },
+          project: projectSlug ? { slug: projectSlug } : null,
+        });
+
+        const response = await fetch("/api/chat", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            prompt,
+            promptPrefix,
+            threadId: createdRun.threadId,
+            activeParticipantIds: [agent.id],
+            projectSlug: projectSlug ?? undefined,
+          }),
+        });
+
+        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 Linear run");
+        }
+
+        await updateRun(createdRun.id, {
+          chatRunId: payload.chatRunId,
+          rootMessageId: payload.userMessageId,
+        });
+      } catch (error) {
+        console.error("Failed to execute Linear ticket:", error);
+        if (createdRun) {
+          await updateRun(createdRun.id, {
+            status: "failed",
+            error: error instanceof Error ? error.message : String(error),
+          });
+        }
+        if (error instanceof Error) {
+          window.alert(error.message);
+        }
+      }
+    },
+    [createRun, projectId, projectSlug, updateRun]
+  );
+
+  const sentinelRef = useRef<HTMLDivElement | null>(null);
+  useEffect(() => {
+    const sentinel = sentinelRef.current;
+    if (!sentinel || !hasMore) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting) {
+          void loadMore();
+        }
+      },
+      { threshold: 0.1 }
+    );
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [hasMore, loadMore]);
+
+  if (connectionLoading) {
+    return (
+      <div className="flex h-full items-center justify-center text-xs text-[var(--muted-foreground)]">
+        Loading...
+      </div>
+    );
+  }
+
+  const needsMcpSetup = connected && !setupDismissed && !Object.values(mcpConfigured).some(Boolean);
+
+  if (!connected || needsMcpSetup) {
+    return (
+      <LinearSetup
+        connected={connected}
+        user={user}
+        clis={clis}
+        mcpConfigured={mcpConfigured}
+        onConnect={connect}
+        onConnectWithKey={connectWithKey}
+        onDisconnect={disconnect}
+        onConfigureMcp={configureMcp}
+        onContinue={() => setSetupDismissed(true)}
+      />
+    );
+  }
+
+  return (
+    <div className="relative flex h-full overflow-hidden">
+      <div className="flex shrink-0 flex-col border-r border-[var(--card-border)]" style={{ width: ticketPanelWidth }}>
+        <div className="shrink-0 border-b border-[var(--card-border)]">
+          <div className="flex h-12 items-center gap-2 px-3">
+            <div className="flex flex-1 items-center gap-2 rounded-md border border-[var(--card-border)] bg-[var(--background)] px-2.5 py-1.5 transition-all focus-within:border-[var(--muted-foreground)] focus-within:ring-1 focus-within:ring-[var(--muted-foreground)]">
+              <Search size={14} className="shrink-0 text-[var(--muted-foreground)]" />
+              <input
+                type="text"
+                className="flex-1 bg-transparent text-sm outline-none placeholder:text-[var(--muted-foreground)]"
+                placeholder="Search tickets..."
+                value={search}
+                onChange={(event) => handleSearchChange(event.target.value)}
+              />
+            </div>
+            <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)}
+              title="Linear settings"
+            >
+              <Settings size={16} />
+            </button>
+          </div>
+          <div className="flex items-center gap-1.5 px-3 pb-2">
+            <button
+              type="button"
+              className={`rounded-full border px-2.5 py-0.5 text-[11px] font-medium transition-colors ${
+                assignedToMe
+                  ? "border-blue-500/30 bg-blue-500/10 text-blue-400"
+                  : "border-[var(--card-border)] text-[var(--muted-foreground)] hover:bg-[var(--card-bg)]"
+              }`}
+              onClick={() => setAssignedToMe((v) => !v)}
+            >
+              My Issues
+            </button>
+            <div className="relative" ref={cyclePickerRef}>
+              <button
+                type="button"
+                className={`flex items-center gap-1 rounded-full border px-2.5 py-0.5 text-[11px] font-medium transition-colors ${
+                  selectedCycleId
+                    ? "border-purple-500/30 bg-purple-500/10 text-purple-400"
+                    : "border-[var(--card-border)] text-[var(--muted-foreground)] hover:bg-[var(--card-bg)]"
+                }`}
+                onClick={() => setShowCyclePicker((v) => !v)}
+              >
+                <span className="truncate max-w-[120px]">
+                  {selectedCycleId
+                    ? (() => {
+                        const c = cycles.find((cy) => cy.id === selectedCycleId);
+                        return c ? (c.name || `Cycle ${c.number}`) : "Cycle";
+                      })()
+                    : "Cycle"}
+                </span>
+                <ChevronDown size={12} />
+              </button>
+              {showCyclePicker && (
+                <div className="absolute left-0 top-full z-50 mt-1 min-w-[200px] rounded-md border border-[var(--card-border)] bg-[var(--card-bg)] py-1 shadow-lg">
+                  <button
+                    type="button"
+                    className={`flex w-full items-center px-3 py-1.5 text-left text-xs transition-colors hover:bg-[var(--background)] ${
+                      !selectedCycleId ? "font-medium text-[var(--foreground)]" : "text-[var(--muted-foreground)]"
+                    }`}
+                    onClick={() => {
+                      setSelectedCycleId(undefined);
+                      setShowCyclePicker(false);
+                    }}
+                  >
+                    All cycles
+                  </button>
+                  {cycles.map((cycle) => {
+                    const now = new Date();
+                    const start = new Date(cycle.startsAt);
+                    const end = new Date(cycle.endsAt);
+                    const isCurrent = now >= start && now <= end;
+                    const label = cycle.name || `Cycle ${cycle.number}`;
+                    return (
+                      <button
+                        key={cycle.id}
+                        type="button"
+                        className={`flex w-full items-center justify-between px-3 py-1.5 text-left text-xs transition-colors hover:bg-[var(--background)] ${
+                          selectedCycleId === cycle.id ? "font-medium text-[var(--foreground)]" : "text-[var(--muted-foreground)]"
+                        }`}
+                        onClick={() => {
+                          setSelectedCycleId(cycle.id);
+                          setShowCyclePicker(false);
+                        }}
+                      >
+                        <span className="flex items-center gap-1.5">
+                          {label}
+                          {isCurrent && (
+                            <span className="rounded bg-green-500/10 px-1 py-0.5 text-[9px] font-bold uppercase text-green-400">
+                              current
+                            </span>
+                          )}
+                        </span>
+                        {selectedCycleId === cycle.id && <Check size={12} />}
+                      </button>
+                    );
+                  })}
+                  {cycles.length === 0 && (
+                    <div className="px-3 py-2 text-xs text-[var(--muted-foreground)]">No cycles found</div>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <div className="flex-1 overflow-y-auto">
+          {issuesLoading && issues.length === 0 ? (
+            <div className="px-3 py-4 text-xs text-[var(--muted-foreground)]">
+              Loading tickets...
+            </div>
+          ) : issues.length === 0 ? (
+            <div className="px-3 py-4 text-xs text-[var(--muted-foreground)]">
+              No tickets found.
+            </div>
+          ) : (
+            <>
+              {issues.map((issue) => (
+                <TicketRow
+                  key={issue.id}
+                  issue={issue}
+                  selected={selectedIssue?.id === issue.id}
+                  onSelect={() => setSelectedIssue(issue)}
+                  onExecute={handleExecute}
+                />
+              ))}
+              {hasMore ? (
+                <div
+                  ref={sentinelRef}
+                  className="py-2 text-center text-xs text-[var(--muted-foreground)]"
+                >
+                  {issuesLoading ? "Loading..." : "Load more"}
+                </div>
+              ) : null}
+            </>
+          )}
+        </div>
+      </div>
+
+      <ResizeHandle onResize={(delta) => setTicketPanelWidth((w) => Math.max(180, Math.min(600, w + delta)))} />
+
+      <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">
+          <h3 className="text-xs font-semibold text-[var(--foreground)]">Runs</h3>
+          {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>
+
+        <div className="flex-1 overflow-y-auto">
+          {!selectedIssue ? (
+            <div className="px-3 py-4 text-xs text-[var(--muted-foreground)]">
+              Select a ticket to see runs.
+            </div>
+          ) : runsLoading && runs.length === 0 ? (
+            <div className="px-3 py-4 text-xs text-[var(--muted-foreground)]">
+              Loading runs...
+            </div>
+          ) : runs.length === 0 ? (
+            <div className="px-3 py-4 text-xs text-[var(--muted-foreground)]">
+              No runs yet. Click <Play size={10} className="inline" /> to execute.
+            </div>
+          ) : (
+            runs.map((run) => {
+              const statusColors: Record<LinearRun["status"], string> = {
+                queued: "text-amber-500",
+                running: "text-yellow-500",
+                success: "text-green-500",
+                failed: "text-red-500",
+                cancelled: "text-[var(--muted-foreground)]",
+              };
+
+              return (
+                <button
+                  key={run.id}
+                  type="button"
+                  className={`w-full px-3 py-2 text-left text-xs transition-colors ${
+                    selectedRun?.id === run.id
+                      ? "bg-[var(--card-bg)]"
+                      : "hover:bg-[var(--card-bg)]"
+                  }`}
+                  onClick={() => setSelectedRunId(run.id)}
+                >
+                  <div className="flex items-center justify-between gap-1">
+                    <span className={`font-medium ${statusColors[run.status]}`}>
+                      {formatRunStatus(run.status)}
+                    </span>
+                    <span className="text-[10px] text-[var(--muted-foreground)]">
+                      {formatRunTime(run.startedAt)}
+                    </span>
+                  </div>
+                  <div className="mt-0.5 truncate text-[10px] text-[var(--muted-foreground)]">
+                    {run.agentName}
+                  </div>
+                  {run.durationMs != null ? (
+                    <div className="text-[10px] text-[var(--muted-foreground)]">
+                      {(run.durationMs / 1000).toFixed(1)}s
+                    </div>
+                  ) : null}
+                </button>
+              );
+            })
+          )}
+        </div>
+      </div>
+
+      <ResizeHandle onResize={(delta) => setRunsPanelWidth((w) => Math.max(140, Math.min(500, w + delta)))} />
+
+      <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
+        {selectedRun ? (
+          <ThreadMessageList run={selectedRun} participants={participants} />
+        ) : selectedIssue && participants.length > 0 ? (
+          <TicketChatStarter
+            key={selectedIssue.id}
+            issue={selectedIssue}
+            participants={participants}
+            projectId={projectId}
+            projectSlug={projectSlug}
+            createRun={createRun}
+            updateRun={updateRun}
+            onRunCreated={(runId) => setSelectedRunId(runId)}
+          />
+        ) : (
+          <div className="flex h-full items-center justify-center text-xs text-[var(--muted-foreground)]">
+            {selectedIssue
+              ? "Add at least one agent to this project to chat."
+              : "Select a ticket from the list."}
+          </div>
+        )}
+      </div>
+
+      {/* Settings overlay */}
+      {showSettings && (
+        <div className="absolute inset-0 z-30 flex items-center justify-center bg-black/50">
+          <div className="relative w-full max-w-lg rounded-lg border border-[var(--card-border)] bg-[var(--background)] shadow-xl">
+            <button
+              type="button"
+              className="absolute right-3 top-3 rounded p-1 text-[var(--muted-foreground)] transition-colors hover:bg-[var(--card-bg)] hover:text-[var(--foreground)]"
+              onClick={() => setShowSettings(false)}
+            >
+              &times;
+            </button>
+            <div className="p-6">
+              <LinearSetup
+                connected={connected}
+                user={user}
+                clis={clis}
+                mcpConfigured={mcpConfigured}
+                onConnect={connect}
+                onConnectWithKey={connectWithKey}
+                onDisconnect={disconnect}
+                onConfigureMcp={configureMcp}
+                onContinue={() => setShowSettings(false)}
+              />
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Agent picker popover */}
+      {pickerIssue && pickerAnchor && (
+        <>
+          <div
+            className="fixed inset-0 z-40"
+            onClick={() => {
+              setPickerIssue(null);
+              setPickerAnchor(null);
+            }}
+          />
+          <div
+            className="fixed z-50 min-w-[180px] rounded border border-[var(--card-border)] bg-[var(--card-bg)] py-1 shadow-lg"
+            style={{ top: pickerAnchor.top, left: pickerAnchor.left }}
+          >
+            <div className="px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-[var(--muted-foreground)]">
+              Pick an agent
+            </div>
+            {participants.map((agent) => (
+              <button
+                key={agent.id}
+                type="button"
+                className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs transition-colors hover:bg-[var(--card-bg)]"
+                onClick={() => void executeWithAgent(pickerIssue, agent)}
+              >
+                <img
+                  src={agentAvatarUrl(agent.id, agent.color, 20)}
+                  alt=""
+                  className="h-5 w-5 shrink-0 rounded-full"
+                />
+                <span className="flex flex-col">
+                  <span className="font-medium text-[var(--foreground)]">{agent.name}</span>
+                  {agent.title ? (
+                    <span className="text-[10px] text-[var(--muted-foreground)]">{agent.title}</span>
+                  ) : null}
+                </span>
+              </button>
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}