@mndrk/agx 2.2.0 → 2.3.0

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

@@ -2,7 +2,7 @@
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import dynamic from "next/dynamic";
-import { ArrowDown, ArrowUp, Check, ChevronDown, Clock, ExternalLink, FileText, Link2, Play, Plus, RefreshCw, Search, Settings, User, X } from "lucide-react";
+import { ArrowDown, ArrowUp, Clock, FileText, Play, Plus, RefreshCw, Search, Settings, User, X } from "lucide-react";
 import { useUrlSelection } from "@/hooks/useUrlSelection";
 import { useLinearIssues, type LinearIssue } from "@/hooks/useLinearIssues";
 import { useLinearConnection } from "@/hooks/useLinearConnection";
@@ -18,6 +18,10 @@ import {
   loadLinearBoardFilters,
   persistLinearBoardFilters,
 } from "@/state/linearBoardFilters";
+import {
+  loadPinnedIssueIds,
+  persistPinnedIssueIds,
+} from "@/state/linearBoardPins";
 import {
   loadLinearTicketPanelWidth,
   persistLinearTicketPanelWidth,
@@ -32,6 +36,24 @@ import { buildLinearExecutionPrompt } from "@/lib/linear-execution-prompt";
 import type { Participant } from "@/lib/types";
 import LinearSetup from "@/components/LinearSetup";
 import LinearSettingsModal from "@/components/linear/LinearSettingsModal";
+import {
+  getRunDisplayState,
+  getRunTitle,
+  STATUS_BADGE_STYLES,
+  STATUS_DOT_COLORS,
+  STATUS_TEXT_COLORS,
+} from "@/lib/linear-run-status";
+import { ResizeHandle } from "@/components/ui/ResizeHandle";
+import {
+  FilterSelect,
+  IssueStatusSelect,
+  MultiFilterPopdown,
+  type FilterOption,
+} from "@/components/linear/LinearBoardFilters";
+import { TicketRow } from "@/components/linear/TicketRow";
+import { useLinearParticipants } from "@/hooks/useLinearParticipants";
+import { useLinearActiveAgents } from "@/hooks/useLinearActiveAgents";
+import { agentAvatarUrl } from "@/lib/linear-board-utils";
 
 const Composer = dynamic(
   () => import("@/components/chat-ui/Composer").then((module) => module.Composer),
@@ -42,60 +64,6 @@ function createThreadId() {
   return globalThis.crypto?.randomUUID?.() ?? `thread-${Date.now()}-${Math.random().toString(36).slice(2)}`;
 }
 
-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",
@@ -103,439 +71,8 @@ function formatRunTime(iso: string): string {
   });
 }
 
-function openLinearIssueTab(issueUrl: string): void {
-  const opened = window.open(issueUrl, "_blank", "noopener,noreferrer");
-  opened?.focus();
-}
-
-type RunDisplayTone = LinearRun["status"] | "ready";
-
-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;
-  }
-}
-
-function getRunDisplayState(run: LinearRun): {
-  label: string;
-  tone: RunDisplayTone;
-} {
-  if (run.mode === "chat") {
-    switch (run.status) {
-      case "queued":
-        return { label: "starting", tone: "queued" };
-      case "running":
-        return { label: "thinking", tone: "running" };
-      case "success":
-        return { label: "ready", tone: "ready" };
-      case "failed":
-        return { label: "error", tone: "failed" };
-      case "cancelled":
-        return { label: "stopped", tone: "cancelled" };
-      default:
-        return { label: formatRunStatus(run.status), tone: run.status };
-    }
-  }
-
-  return { label: formatRunStatus(run.status), tone: run.status };
-}
-
-function getRunTitle(run: LinearRun): string {
-  const title = run.sessionTitle?.trim();
-  if (title) {
-    return title;
-  }
-  return run.mode === "scripted" ? "Scripted session" : "Chat session";
-}
-
-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<RunDisplayTone, 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",
-  ready: "bg-sky-500/10 border-sky-500/20 text-sky-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<RunDisplayTone, string> = {
-  queued: "bg-amber-400",
-  running: "bg-yellow-400",
-  ready: "bg-sky-400",
-  success: "bg-emerald-400",
-  failed: "bg-red-400",
-  cancelled: "bg-zinc-400",
-};
-
-const STATUS_TEXT_COLORS: Record<RunDisplayTone, string> = {
-  queued: "text-amber-500",
-  running: "text-yellow-500",
-  ready: "text-sky-500",
-  success: "text-green-500",
-  failed: "text-red-500",
-  cancelled: "text-[var(--muted-foreground)]",
-};
-
 const NEW_SESSION_PANEL_ID = "new";
 
-interface FilterOption {
-  value: string;
-  label: string;
-}
-
-interface FilterSelectProps {
-  label: string;
-  value: string;
-  options: FilterOption[];
-  activeClasses: string;
-  onChange: (value: string) => void;
-  disabled?: boolean;
-}
-
-interface FilterPopdownProps extends FilterSelectProps {
-  emptyLabel?: string;
-}
-
-interface MultiFilterPopdownProps {
-  label: string;
-  values: string[];
-  options: FilterOption[];
-  activeClasses: string;
-  onChange: (value: string[]) => void;
-  emptyLabel?: string;
-}
-
-function FilterSelect({
-  label,
-  value,
-  options,
-  activeClasses,
-  onChange,
-  disabled = false,
-}: FilterSelectProps) {
-  const isActive = value.trim().length > 0;
-
-  return (
-    <div className="relative">
-      <select
-        aria-label={label}
-        className={`max-w-[160px] appearance-none rounded-full border bg-transparent px-2.5 py-0.5 pr-6 text-[11px] font-medium outline-none transition-colors disabled:cursor-not-allowed disabled:opacity-60 ${
-          isActive
-            ? activeClasses
-            : "border-[var(--card-border)] text-[var(--muted-foreground)] hover:bg-[var(--card-bg)]"
-        }`}
-        value={value}
-        disabled={disabled}
-        onChange={(event) => onChange(event.target.value)}
-      >
-        {options.map((option) => (
-          <option key={`${label}-${option.value || "all"}`} value={option.value}>
-            {option.label}
-          </option>
-        ))}
-      </select>
-      <ChevronDown
-        size={12}
-        className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-current"
-      />
-    </div>
-  );
-}
-
-function IssueStatusSelect({
-  status,
-  options,
-  onChange,
-  disabled = false,
-  updating = false,
-}: {
-  status: string;
-  options: FilterOption[];
-  onChange: (value: string) => void;
-  disabled?: boolean;
-  updating?: boolean;
-}) {
-  return (
-    <div className="relative">
-      <select
-        aria-label="Ticket status"
-        className="max-w-[160px] appearance-none rounded-md border border-[var(--card-border)] bg-[var(--card-bg)] px-2.5 py-1 pr-8 text-xs font-medium text-[var(--foreground)] outline-none transition-colors hover:border-[var(--muted-foreground)] disabled:cursor-not-allowed disabled:opacity-60"
-        value={status}
-        disabled={disabled || updating}
-        onChange={(event) => onChange(event.target.value)}
-      >
-        {options.map((option) => (
-          <option key={`ticket-status-${option.value}`} value={option.value}>
-            {option.label}
-          </option>
-        ))}
-      </select>
-      {updating ? (
-        <RefreshCw
-          size={12}
-          className="pointer-events-none absolute right-6 top-1/2 -translate-y-1/2 animate-spin text-[var(--muted-foreground)]"
-        />
-      ) : null}
-      <ChevronDown
-        size={12}
-        className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-[var(--muted-foreground)]"
-      />
-    </div>
-  );
-}
-
-function FilterPopdown({
-  label,
-  value,
-  options,
-  activeClasses,
-  onChange,
-  emptyLabel,
-}: FilterPopdownProps) {
-  const [open, setOpen] = useState(false);
-  const wrapperRef = useRef<HTMLDivElement | null>(null);
-  const selectedOption = options.find((option) => option.value === value) ?? null;
-  const isActive = value.trim().length > 0;
-  const buttonLabel = selectedOption?.label ?? emptyLabel ?? label;
-
-  useEffect(() => {
-    if (!open) {
-      return;
-    }
-
-    const handlePointerDown = (event: PointerEvent) => {
-      if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {
-        setOpen(false);
-      }
-    };
-
-    document.addEventListener("pointerdown", handlePointerDown);
-    return () => document.removeEventListener("pointerdown", handlePointerDown);
-  }, [open]);
-
-  useEffect(() => {
-    setOpen(false);
-  }, [value]);
-
-  return (
-    <div className="relative" ref={wrapperRef}>
-      <button
-        type="button"
-        aria-label={label}
-        aria-haspopup="listbox"
-        aria-expanded={open}
-        className={`flex max-w-[180px] items-center gap-1 rounded-full border px-2.5 py-0.5 text-[11px] font-medium transition-colors ${
-          isActive
-            ? activeClasses
-            : "border-[var(--card-border)] text-[var(--muted-foreground)] hover:bg-[var(--card-bg)]"
-        }`}
-        onClick={() => setOpen((current) => !current)}
-      >
-        <span className="max-w-[132px] truncate">{buttonLabel}</span>
-        <ChevronDown size={12} className={`shrink-0 transition-transform ${open ? "rotate-180" : ""}`} />
-      </button>
-      {open ? (
-        <div
-          role="listbox"
-          aria-label={`${label} options`}
-          className="absolute left-0 top-full z-50 mt-1 min-w-[220px] overflow-hidden rounded-xl border border-[var(--card-border)] bg-[var(--card-bg)] p-1 shadow-lg backdrop-blur-sm"
-        >
-          {options.map((option) => {
-            const isSelected = option.value === value;
-            return (
-              <button
-                key={`${label}-${option.value || "all"}`}
-                type="button"
-                role="option"
-                aria-selected={isSelected}
-                className={`flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-xs transition-colors ${
-                  isSelected
-                    ? "bg-[var(--background)] font-medium text-[var(--foreground)]"
-                    : "text-[var(--muted-foreground)] hover:bg-[var(--background)] hover:text-[var(--foreground)]"
-                }`}
-                onClick={() => onChange(option.value)}
-              >
-                <span
-                  className={`flex h-4 w-4 shrink-0 items-center justify-center rounded-full border ${
-                    isSelected
-                      ? "border-blue-500 bg-blue-500 text-white"
-                      : "border-[var(--card-border)]"
-                  }`}
-                >
-                  {isSelected ? <Check size={10} /> : null}
-                </span>
-                <span className="min-w-0 flex-1 truncate">{option.label}</span>
-              </button>
-            );
-          })}
-        </div>
-      ) : null}
-    </div>
-  );
-}
-
-function MultiFilterPopdown({
-  label,
-  values,
-  options,
-  activeClasses,
-  onChange,
-  emptyLabel,
-}: MultiFilterPopdownProps) {
-  const [open, setOpen] = useState(false);
-  const wrapperRef = useRef<HTMLDivElement | null>(null);
-  const selectedOptions = options.filter(
-    (option) => option.value && values.includes(option.value)
-  );
-  const isActive = selectedOptions.length > 0;
-  const buttonLabel = (() => {
-    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);
-    }
-    const lowerLabel = label.toLowerCase();
-    return `${selectedOptions.length} ${lowerLabel}${lowerLabel.endsWith("s") ? "es" : "s"}`;
-  })();
-
-  useEffect(() => {
-    if (!open) {
-      return;
-    }
-
-    const handlePointerDown = (event: PointerEvent) => {
-      if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {
-        setOpen(false);
-      }
-    };
-
-    document.addEventListener("pointerdown", handlePointerDown);
-    return () => document.removeEventListener("pointerdown", handlePointerDown);
-  }, [open]);
-
-  const toggleValue = useCallback(
-    (nextValue: string) => {
-      if (!nextValue) {
-        onChange([]);
-        return;
-      }
-
-      const nextValues = values.includes(nextValue)
-        ? values.filter((value) => value !== nextValue)
-        : [...values, nextValue];
-      onChange(nextValues);
-    },
-    [onChange, values]
-  );
-
-  return (
-    <div className="relative" ref={wrapperRef}>
-      <button
-        type="button"
-        aria-label={label}
-        aria-haspopup="listbox"
-        aria-expanded={open}
-        className={`flex max-w-[180px] items-center gap-1 rounded-full border px-2.5 py-0.5 text-[11px] font-medium transition-colors ${
-          isActive
-            ? activeClasses
-            : "border-[var(--card-border)] text-[var(--muted-foreground)] hover:bg-[var(--card-bg)]"
-        }`}
-        onClick={() => setOpen((current) => !current)}
-      >
-        <span className="max-w-[132px] truncate">{buttonLabel}</span>
-        <ChevronDown size={12} className={`shrink-0 transition-transform ${open ? "rotate-180" : ""}`} />
-      </button>
-      {open ? (
-        <div
-          role="listbox"
-          aria-label={`${label} options`}
-          aria-multiselectable="true"
-          className="absolute left-0 top-full z-50 mt-1 min-w-[240px] overflow-hidden rounded-xl border border-[var(--card-border)] bg-[var(--card-bg)] p-1 shadow-lg backdrop-blur-sm"
-        >
-          <button
-            type="button"
-            role="option"
-            aria-selected={!isActive}
-            className={`flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-xs transition-colors ${
-              !isActive
-                ? "bg-[var(--background)] font-medium text-[var(--foreground)]"
-                : "text-[var(--muted-foreground)] hover:bg-[var(--background)] hover:text-[var(--foreground)]"
-            }`}
-            onClick={() => onChange([])}
-          >
-            <span
-              className={`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>
-            <span className="min-w-0 flex-1 truncate">{emptyLabel ?? label}</span>
-          </button>
-          {selectedOptions.length > 0 ? (
-            <div className="px-3 pb-1 pt-2 text-[10px] font-medium uppercase tracking-[0.12em] text-[var(--muted-foreground)]">
-              Selected
-            </div>
-          ) : null}
-          {options.filter((option) => option.value).map((option) => {
-            const isSelected = values.includes(option.value);
-            return (
-              <button
-                key={`${label}-${option.value}`}
-                type="button"
-                role="option"
-                aria-selected={isSelected}
-                className={`flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-xs transition-colors ${
-                  isSelected
-                    ? "bg-[var(--background)] font-medium text-[var(--foreground)]"
-                    : "text-[var(--muted-foreground)] hover:bg-[var(--background)] hover:text-[var(--foreground)]"
-                }`}
-                onClick={() => toggleValue(option.value)}
-              >
-                <span
-                  className={`flex h-4 w-4 shrink-0 items-center justify-center rounded border ${
-                    isSelected
-                      ? "border-blue-500 bg-blue-500 text-white"
-                      : "border-[var(--card-border)]"
-                  }`}
-                >
-                  {isSelected ? <Check size={10} /> : null}
-                </span>
-                <span className="min-w-0 flex-1 truncate">{option.label}</span>
-              </button>
-            );
-          })}
-        </div>
-      ) : null}
-    </div>
-  );
-}
-
 interface CycleOption {
   id: string;
   number: number;
@@ -1075,134 +612,6 @@ function ThreadMessageList({
   );
 }
 
-function TicketRow({
-  issue,
-  selected,
-  onSelect,
-  activeAgents,
-  participants,
-}: {
-  issue: LinearIssue;
-  selected: boolean;
-  onSelect: () => void;
-  activeAgents?: Array<{ agentId: string; agentName: string }>;
-  participants?: Participant[];
-}) {
-  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 handleOpenIssue = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
-    event.stopPropagation();
-    if (!issue.url) {
-      return;
-    }
-    openLinearIssueTab(issue.url);
-  }, [issue.url]);
-
-  const shortStatus = STATUS_LABELS[issue.status] ?? issue.status.slice(0, 6);
-  return (
-    <div
-      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"
-      }`}
-      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-24 shrink-0 whitespace-nowrap font-mono text-xs text-[var(--muted-foreground)]">
-        {issue.identifier}
-      </span>
-      <span className={`min-w-0 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>
-      {activeAgents && activeAgents.length > 0 && (
-        <span className="inline-flex items-center -space-x-1 shrink-0">
-          {activeAgents.slice(0, 3).map((agent) => {
-            const participant = participants?.find((p) => p.id === agent.agentId);
-            return (
-              <span key={agent.agentId} className="relative inline-block" title={participant?.name ?? agent.agentName}>
-                <img src={agentAvatarUrl(agent.agentId, participant?.color, 16)} alt={participant?.name ?? agent.agentName} className="h-3 w-3 rounded-full ring-[1.5px] ring-[var(--app-shell-pane)]" />
-                <span className="absolute -bottom-px -right-px h-1.5 w-1.5 rounded-full bg-green-500 ring-[1px] ring-[var(--app-shell-pane)]" />
-              </span>
-            );
-          })}
-        </span>
-      )}
-      <div className="flex shrink-0 items-center gap-1">
-        <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"
-          } ${issue.url ? "" : "cursor-not-allowed opacity-40 hover:bg-transparent hover:text-[var(--muted-foreground)]"}`}
-          onClick={handleOpenIssue}
-          title={issue.url ? "Open this Linear ticket in a new tab" : "This ticket does not have a Linear URL"}
-          aria-label={issue.url ? "Open this Linear ticket in a new tab" : "This ticket does not have a Linear URL"}
-          disabled={!issue.url}
-        >
-          <ExternalLink size={10} />
-        </button>
-      </div>
-    </div>
-  );
-}
-
 interface LinearBoardProps {
   projectId?: string;
   projectSlug?: string;
@@ -1242,10 +651,11 @@ export default function LinearBoard({ projectId, projectSlug, initialShowSetting
   const [sortBy, setSortBy] = useState<"activity" | "identifier" | "status" | "created">("activity");
   const [sortDir, setSortDir] = useState<"asc" | "desc">("desc");
   const [hasActivity, setHasActivity] = useState(false);
+  const [pinnedIssueIds, setPinnedIssueIds] = useState<Set<string>>(() => loadPinnedIssueIds(projectSlug));
   const [selectedIssueFallback, setSelectedIssueFallback] = useState<LinearIssue | null>(null);
   const [updatingIssueId, setUpdatingIssueId] = useState<string | null>(null);
-  const [participants, setParticipants] = useState<Participant[]>([]);
-  const [issueActiveAgents, setIssueActiveAgents] = useState<Map<string, Array<{ agentId: string; agentName: string }>>>(new Map());
+  const { participants } = useLinearParticipants(projectId);
+  const { issueActiveAgents } = useLinearActiveAgents(projectId);
   const [pickerIssue, setPickerIssue] = useState<LinearIssue | null>(null);
   const [pickerAnchor, setPickerAnchor] = useState<{ top: number; left: number } | null>(null);
   const [touchPanelTab, setTouchPanelTab] = useState<"runs" | "ticket">("runs");
@@ -1265,6 +675,19 @@ export default function LinearBoard({ projectId, projectSlug, initialShowSetting
     searchDebounceRef.current = setTimeout(() => setDebouncedSearch(value), 300);
   }, []);
 
+  const togglePin = useCallback((issueId: string) => {
+    setPinnedIssueIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(issueId)) {
+        next.delete(issueId);
+      } else {
+        next.add(issueId);
+      }
+      persistPinnedIssueIds(projectSlug, next);
+      return next;
+    });
+  }, [projectSlug]);
+
   useEffect(() => {
     return () => {
       if (searchDebounceRef.current) {
@@ -1285,6 +708,7 @@ export default function LinearBoard({ projectId, projectSlug, initialShowSetting
     setSortBy(storedFilters.sortBy);
     setSortDir(storedFilters.sortDir);
     setHasActivity(storedFilters.hasActivity);
+    setPinnedIssueIds(loadPinnedIssueIds(projectSlug));
   }, [projectSlug]);
 
   useEffect(() => {
@@ -1411,7 +835,7 @@ export default function LinearBoard({ projectId, projectSlug, initialShowSetting
     loadMore,
     refresh: refreshIssues,
     updateIssue,
-  } = useLinearIssues(filters, connected, { projectSlug });
+  } = useLinearIssues(filters, connected && filterOptionsLoaded, { projectSlug });
   const selectedIssueFromList = useMemo(
     () => (selectedIssueId ? issues.find((issue) => issue.id === selectedIssueId) ?? null : null),
     [issues, selectedIssueId],
@@ -1419,6 +843,21 @@ export default function LinearBoard({ projectId, projectSlug, initialShowSetting
   const selectedIssue =
     selectedIssueFromList ??
     (selectedIssueFallback?.id === selectedIssueId ? selectedIssueFallback : null);
+
+  const sortedIssues = useMemo(() => {
+    if (pinnedIssueIds.size === 0) return issues;
+    const pinned: LinearIssue[] = [];
+    const unpinned: LinearIssue[] = [];
+    for (const issue of issues) {
+      if (pinnedIssueIds.has(issue.id)) {
+        pinned.push(issue);
+      } else {
+        unpinned.push(issue);
+      }
+    }
+    return [...pinned, ...unpinned];
+  }, [issues, pinnedIssueIds]);
+
   const {
     runs,
     loading: runsLoading,
@@ -1604,128 +1043,6 @@ export default function LinearBoard({ projectId, projectSlug, initialShowSetting
     setTouchPanelTab("runs");
   }, [isTouchLayout, runs.length, selectedIssue, selectedRun, 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;
-        }
-
-        // Check if the linear worker has a team configured
-        const workerParams = new URLSearchParams();
-        workerParams.set("projectId", projectId);
-        const workerResponse = await fetch(`/api/linear/worker?${workerParams}`).catch(() => null);
-        const workerData = workerResponse?.ok ? await workerResponse.json().catch(() => null) : null;
-        const workerTeamId: string | undefined = workerData?.job?.teamId || undefined;
-
-        if (workerTeamId) {
-          // Use the team's agents as participants
-          const teamAgentsResponse = await fetch(
-            `/api/projects/${encodeURIComponent(projectId)}/teams/${encodeURIComponent(workerTeamId)}/agents`
-          );
-          if (teamAgentsResponse.ok) {
-            const teamData = await teamAgentsResponse.json();
-            const teamAgentIds: string[] = Array.isArray(teamData.agents)
-              ? teamData.agents
-                  .sort((a: { routing_order?: number }, b: { routing_order?: number }) =>
-                    (a.routing_order ?? 0) - (b.routing_order ?? 0)
-                  )
-                  .map((agent: { agent_id?: string }) => agent.agent_id)
-                  .filter((value: unknown): value is string => typeof value === "string" && value.trim().length > 0)
-              : [];
-            if (teamAgentIds.length > 0) {
-              const teamOrderIndex = new Map(teamAgentIds.map((id, index) => [id, index]));
-              const teamParticipants = allParticipants
-                .filter((participant) => teamOrderIndex.has(participant.id))
-                .sort(
-                  (left, right) =>
-                    (teamOrderIndex.get(left.id) ?? Number.MAX_SAFE_INTEGER) -
-                    (teamOrderIndex.get(right.id) ?? Number.MAX_SAFE_INTEGER)
-                );
-              if (!cancelled && teamParticipants.length > 0) {
-                setParticipants(teamParticipants);
-                return;
-              }
-            }
-          }
-        }
-
-        // Fallback: use project agents
-        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]);
-
-  useEffect(() => {
-    let cancelled = false;
-
-    async function fetchActiveAgents() {
-      try {
-        const params = new URLSearchParams();
-        if (projectId) params.set("projectId", projectId);
-        const res = await fetch(`/api/linear/issues/active-agents?${params}`);
-        if (!res.ok || cancelled) return;
-        const data = await res.json();
-        const map = new Map<string, Array<{ agentId: string; agentName: string }>>();
-        for (const entry of data.agents ?? []) {
-          const list = map.get(entry.issueId) ?? [];
-          list.push({ agentId: entry.agentId, agentName: entry.agentName });
-          map.set(entry.issueId, list);
-        }
-        if (!cancelled) setIssueActiveAgents(map);
-      } catch {
-        // ignore
-      }
-    }
-
-    void fetchActiveAgents();
-    const interval = setInterval(() => void fetchActiveAgents(), 5000);
-    return () => { cancelled = true; clearInterval(interval); };
-  }, [projectId]);
-
   useEffect(() => {
     if (!showRunScripts) {
       return;
@@ -1986,21 +1303,29 @@ export default function LinearBoard({ projectId, projectSlug, initialShowSetting
                 </div>
               ) : (
                 <>
-                  {issues.map((issue) => (
-                    <TicketRow
-                      key={issue.id}
-                      issue={issue}
-                      selected={selectedIssue?.id === issue.id}
-                      activeAgents={issueActiveAgents.get(issue.id)}
-                      participants={participants}
-                      onSelect={() => {
-                        setTouchPanelTab("runs");
-                        pushSelection({
-                          issue: issue.id,
-                          run: null,
-                        });
-                      }}
-                    />
+                  {sortedIssues.map((issue, idx) => (
+                    <React.Fragment key={issue.id}>
+                      {pinnedIssueIds.size > 0 &&
+                        !pinnedIssueIds.has(issue.id) &&
+                        (idx === 0 || pinnedIssueIds.has(sortedIssues[idx - 1].id)) && (
+                          <div className="mx-4 border-t border-amber-500/20" />
+                        )}
+                      <TicketRow
+                        issue={issue}
+                        selected={selectedIssue?.id === issue.id}
+                        pinned={pinnedIssueIds.has(issue.id)}
+                        activeAgents={issueActiveAgents.get(issue.id)}
+                        participants={participants}
+                        onSelect={() => {
+                          setTouchPanelTab("runs");
+                          pushSelection({
+                            issue: issue.id,
+                            run: null,
+                          });
+                        }}
+                        onTogglePin={() => togglePin(issue.id)}
+                      />
+                    </React.Fragment>
                   ))}
                   {hasMore ? (
                     <div
@@ -2304,20 +1629,28 @@ export default function LinearBoard({ projectId, projectSlug, initialShowSetting
             </div>
           ) : (
             <>
-              {issues.map((issue) => (
-                <TicketRow
-                  key={issue.id}
-                  issue={issue}
-                  selected={selectedIssue?.id === issue.id}
-                  activeAgents={issueActiveAgents.get(issue.id)}
-                  participants={participants}
-                  onSelect={() =>
-                    pushSelection({
-                      issue: issue.id,
-                      run: null,
-                    })
-                  }
-                />
+              {sortedIssues.map((issue, idx) => (
+                <React.Fragment key={issue.id}>
+                  {pinnedIssueIds.size > 0 &&
+                    !pinnedIssueIds.has(issue.id) &&
+                    (idx === 0 || pinnedIssueIds.has(sortedIssues[idx - 1].id)) && (
+                      <div className="mx-4 border-t border-amber-500/20" />
+                    )}
+                  <TicketRow
+                    issue={issue}
+                    selected={selectedIssue?.id === issue.id}
+                    pinned={pinnedIssueIds.has(issue.id)}
+                    activeAgents={issueActiveAgents.get(issue.id)}
+                    participants={participants}
+                    onSelect={() =>
+                      pushSelection({
+                        issue: issue.id,
+                        run: null,
+                      })
+                    }
+                    onTogglePin={() => togglePin(issue.id)}
+                  />
+                </React.Fragment>
               ))}
               {hasMore ? (
                 <div
@@ -2549,8 +1882,8 @@ export default function LinearBoard({ projectId, projectSlug, initialShowSetting
                 />
                 <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>
+                  {agent.role ? (
+                    <span className="text-[10px] text-[var(--muted-foreground)]">{agent.role}</span>
                   ) : null}
                 </span>
               </button>