@mndrk/agx 2.4.1 → 2.4.3

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

@@ -0,0 +1,41 @@
+"use client";
+
+import React from "react";
+import { X } from "lucide-react";
+
+const FIBONACCI = [1, 2, 3, 5, 8, 13, 21] as const;
+
+interface FibonacciPickerProps {
+  value?: number | null;
+  onSelect: (value: number | null) => void;
+}
+
+export function FibonacciPicker({ value, onSelect }: FibonacciPickerProps) {
+  return (
+    <div className="flex items-center gap-1">
+      {FIBONACCI.map((n) => (
+        <button
+          key={n}
+          type="button"
+          className={`flex h-7 w-7 items-center justify-center rounded-md text-xs font-medium transition-colors ${
+            value === n
+              ? "bg-[var(--primary)] text-[var(--primary-foreground)]"
+              : "bg-[var(--background)] text-[var(--muted-foreground)] hover:bg-[var(--card-bg)] hover:text-[var(--foreground)]"
+          }`}
+          onClick={() => onSelect(n)}
+        >
+          {n}
+        </button>
+      ))}
+      <button
+        type="button"
+        className="flex h-7 items-center gap-1 rounded-md px-2 text-xs text-[var(--muted-foreground)] transition-colors hover:bg-[var(--card-bg)] hover:text-[var(--foreground)]"
+        onClick={() => onSelect(null)}
+        title="Clear estimate"
+      >
+        <X size={10} />
+        Clear
+      </button>
+    </div>
+  );
+}

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

@@ -123,7 +123,7 @@ export function FolderRow({
             className={`flex h-5 w-5 shrink-0 items-center justify-center rounded transition-all hover:bg-zinc-700 ${
               hasNote
                 ? "text-amber-400 opacity-100"
-                : "text-[var(--muted-foreground)] opacity-0 group-hover:opacity-100"
+                : `text-[var(--muted-foreground)] ${selected ? "opacity-100" : "opacity-0 group-hover:opacity-100"}`
             }`}
             onClick={handleNoteClick}
             title={hasNote ? "Edit group note" : "Add group note"}

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

@@ -0,0 +1,118 @@
+"use client";
+
+import React, { useState, useCallback, useMemo } from "react";
+import { Check, Minus, Plus } from "lucide-react";
+
+interface LabelEntry {
+  name: string;
+  color: string | null;
+  defined: boolean;
+}
+
+interface LabelPickerProps {
+  labels: LabelEntry[];
+  selectedLabels: string[];
+  labelCounts?: Map<string, number>;
+  totalSelected?: number;
+  onToggle: (label: string) => void;
+  onAdd: (label: string) => void;
+}
+
+export function LabelPicker({
+  labels,
+  selectedLabels,
+  labelCounts,
+  totalSelected,
+  onToggle,
+  onAdd,
+}: LabelPickerProps) {
+  const [input, setInput] = useState("");
+  const selectedSet = useMemo(() => new Set(selectedLabels), [selectedLabels]);
+  const isBulk = totalSelected != null && totalSelected > 0;
+
+  const filteredLabels = useMemo(() => {
+    const q = input.trim().toLowerCase();
+    if (!q) return labels;
+    return labels.filter((l) => l.name.toLowerCase().includes(q));
+  }, [labels, input]);
+
+  const handleAdd = useCallback(() => {
+    const trimmed = input.trim();
+    if (!trimmed) return;
+    if (!labels.some((l) => l.name.toLowerCase() === trimmed.toLowerCase())) {
+      onAdd(trimmed);
+    }
+    onToggle(trimmed);
+    setInput("");
+  }, [input, labels, onAdd, onToggle]);
+
+  return (
+    <div className="flex w-56 flex-col gap-1">
+      <div className="max-h-48 overflow-y-auto">
+        {filteredLabels.map((label) => {
+          const isSelected = selectedSet.has(label.name);
+          const count = labelCounts?.get(label.name) ?? 0;
+          const isMixed = isBulk && count > 0 && count < (totalSelected ?? 0);
+
+          return (
+            <button
+              key={label.name}
+              type="button"
+              className={`flex w-full items-center gap-2 rounded-lg px-3 py-1.5 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={() => onToggle(label.name)}
+            >
+              <span
+                className={`flex h-4 w-4 shrink-0 items-center justify-center rounded border ${
+                  isSelected || isMixed
+                    ? "border-blue-500 bg-blue-500 text-white"
+                    : "border-[var(--card-border)]"
+                }`}
+              >
+                {isMixed ? <Minus size={10} /> : isSelected ? <Check size={10} /> : null}
+              </span>
+              {label.color && (
+                <span
+                  className="h-2.5 w-2.5 shrink-0 rounded-full"
+                  style={{ backgroundColor: label.color }}
+                />
+              )}
+              <span className="min-w-0 flex-1 truncate">{label.name}</span>
+            </button>
+          );
+        })}
+        {filteredLabels.length === 0 && input.trim() && (
+          <div className="px-3 py-2 text-xs text-[var(--muted-foreground)]">
+            No matching labels
+          </div>
+        )}
+      </div>
+      <div className="flex items-center gap-1 border-t border-[var(--card-border)] pt-1">
+        <input
+          type="text"
+          className="min-w-0 flex-1 bg-transparent px-2 py-1 text-xs outline-none placeholder:text-[var(--muted-foreground)]"
+          placeholder="Add label..."
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              handleAdd();
+            }
+          }}
+        />
+        <button
+          type="button"
+          className="flex h-6 w-6 items-center justify-center rounded text-[var(--muted-foreground)] transition-colors hover:bg-[var(--card-bg)] hover:text-[var(--foreground)] disabled:opacity-40"
+          onClick={handleAdd}
+          disabled={!input.trim()}
+        >
+          <Plus size={12} />
+        </button>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,104 @@
+"use client";
+
+import React, { useState } from "react";
+import { Plus, Trash2 } from "lucide-react";
+import type { LabelDefinition } from "@/hooks/useTrackerLabels";
+
+interface LabelSettingsProps {
+  definitions: LabelDefinition[];
+  onCreate: (name: string, color?: string) => Promise<void>;
+  onDelete: (id: string) => Promise<void>;
+}
+
+const PRESET_COLORS = [
+  "#ef4444", "#f97316", "#eab308", "#22c55e",
+  "#06b6d4", "#3b82f6", "#8b5cf6", "#ec4899",
+];
+
+export function LabelSettings({ definitions, onCreate, onDelete }: LabelSettingsProps) {
+  const [name, setName] = useState("");
+  const [color, setColor] = useState<string>(PRESET_COLORS[0]);
+  const [creating, setCreating] = useState(false);
+
+  const handleCreate = async () => {
+    if (!name.trim() || creating) return;
+    setCreating(true);
+    await onCreate(name.trim(), color);
+    setName("");
+    setCreating(false);
+  };
+
+  return (
+    <div className="space-y-4">
+      <h3 className="text-sm font-semibold text-[var(--foreground)]">Local Labels</h3>
+      <p className="text-xs text-[var(--muted-foreground)]">
+        Define labels for local task tracking. These are stored locally and not synced to your tracker.
+      </p>
+
+      {definitions.length > 0 && (
+        <div className="space-y-1">
+          {definitions.map((def) => (
+            <div
+              key={def.id}
+              className="flex items-center gap-3 rounded-lg px-3 py-2 hover:bg-[var(--card-bg)]"
+            >
+              {def.color && (
+                <span
+                  className="h-3 w-3 shrink-0 rounded-full"
+                  style={{ backgroundColor: def.color }}
+                />
+              )}
+              <span className="min-w-0 flex-1 text-sm text-[var(--foreground)]">{def.name}</span>
+              <button
+                type="button"
+                className="shrink-0 rounded p-1 text-[var(--muted-foreground)] transition-colors hover:bg-red-500/10 hover:text-red-400"
+                onClick={() => void onDelete(def.id)}
+                title="Delete label"
+              >
+                <Trash2 size={14} />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <div className="flex items-center gap-2 rounded-lg border border-[var(--card-border)] p-2">
+        <div className="flex gap-1">
+          {PRESET_COLORS.map((c) => (
+            <button
+              key={c}
+              type="button"
+              className={`h-5 w-5 rounded-full transition-all ${
+                color === c ? "ring-2 ring-[var(--foreground)] ring-offset-1 ring-offset-[var(--background)]" : ""
+              }`}
+              style={{ backgroundColor: c }}
+              onClick={() => setColor(c)}
+            />
+          ))}
+        </div>
+        <input
+          type="text"
+          className="min-w-0 flex-1 bg-transparent px-2 py-1 text-sm outline-none placeholder:text-[var(--muted-foreground)]"
+          placeholder="Label name"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              void handleCreate();
+            }
+          }}
+        />
+        <button
+          type="button"
+          className="flex items-center gap-1 rounded-md bg-[var(--primary)] px-2.5 py-1 text-xs font-medium text-[var(--primary-foreground)] transition-opacity hover:opacity-90 disabled:opacity-50"
+          onClick={() => void handleCreate()}
+          disabled={!name.trim() || creating}
+        >
+          <Plus size={12} />
+          Add
+        </button>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,64 @@
+"use client";
+
+import React, { useState, useMemo } from "react";
+import { Play } from "lucide-react";
+import type { Participant } from "@/lib/types";
+import { agentAvatarUrl } from "@/lib/tracker-board-utils";
+
+interface PromptPopoverProps {
+  count: number;
+  participants: Participant[];
+  onSend: (prompt: string, agentId: string) => void;
+}
+
+export function PromptPopover({ count, participants, onSend }: PromptPopoverProps) {
+  const [prompt, setPrompt] = useState("");
+  const [agentId, setAgentId] = useState(participants[0]?.id ?? "");
+  const selectedAgent = useMemo(
+    () => participants.find((p) => p.id === agentId) ?? participants[0],
+    [participants, agentId]
+  );
+
+  return (
+    <div className="flex w-80 flex-col gap-3 p-1">
+      <textarea
+        className="min-h-[80px] w-full resize-none rounded-lg border border-[var(--card-border)] bg-[var(--background)] px-3 py-2 text-xs text-[var(--foreground)] outline-none placeholder:text-[var(--muted-foreground)] focus:border-[var(--muted-foreground)]"
+        placeholder="Enter prompt to send to all selected tickets..."
+        value={prompt}
+        onChange={(e) => setPrompt(e.target.value)}
+        autoFocus
+      />
+      {participants.length > 1 && (
+        <div className="flex items-center gap-2">
+          <span className="text-[10px] font-medium uppercase tracking-wider text-[var(--muted-foreground)]">
+            Agent
+          </span>
+          <select
+            className="flex-1 appearance-none rounded-md border border-[var(--card-border)] bg-[var(--background)] px-2 py-1 text-xs outline-none"
+            value={agentId}
+            onChange={(e) => setAgentId(e.target.value)}
+          >
+            {participants.map((p) => (
+              <option key={p.id} value={p.id}>
+                {p.name}
+              </option>
+            ))}
+          </select>
+        </div>
+      )}
+      <button
+        type="button"
+        className="inline-flex items-center justify-center gap-1.5 rounded-lg bg-blue-500 px-3 py-2 text-xs font-medium text-white transition-colors hover:bg-blue-600 disabled:opacity-50"
+        disabled={!prompt.trim()}
+        onClick={() => {
+          if (prompt.trim()) {
+            onSend(prompt.trim(), agentId);
+          }
+        }}
+      >
+        <Play size={12} />
+        Send to {count} ticket{count !== 1 ? "s" : ""}
+      </button>
+    </div>
+  );
+}

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

@@ -1,38 +1,291 @@
 "use client";
 
-import React from "react";
-import { FolderPlus, X } from "lucide-react";
+import React, { useState, useRef, useEffect, useCallback } from "react";
+import {
+  FileText,
+  FolderPlus,
+  Hash,
+  MessageSquare,
+  RefreshCw,
+  Tag,
+  X,
+} from "lucide-react";
+import { FibonacciPicker } from "./FibonacciPicker";
+import { LabelPicker } from "./LabelPicker";
+import { PromptPopover } from "./PromptPopover";
+import type { FilterOption } from "./TrackerBoardFilters";
+import type { Participant } from "@/lib/types";
+
+interface LabelEntry {
+  name: string;
+  color: string | null;
+  defined: boolean;
+}
+
+interface ItemMetadata {
+  labels: string[];
+  estimate: number | null;
+}
 
 interface SelectionBarProps {
   count: number;
   onGroup: () => void;
   onClear: () => void;
+  onBulkRecap: () => void;
+  onBulkPrompt: (prompt: string, agentId: string) => void;
+  onBulkEstimate: (estimate: number | null) => void;
+  onBulkAddLabel: (label: string) => void;
+  onBulkRemoveLabel: (label: string) => void;
+  onBulkStatus: (status: string) => void;
+  statusOptions: FilterOption[];
+  participants: Participant[];
+  labels: LabelEntry[];
+  onCreateLabel: (name: string) => void;
+  selectedMetadata: Map<string, ItemMetadata>;
+  statusUpdating?: boolean;
+}
+
+type ActivePopover = "estimate" | "label" | "status" | "prompt" | null;
+
+function Popover({
+  open,
+  onClose,
+  anchorRef,
+  children,
+}: {
+  open: boolean;
+  onClose: () => void;
+  anchorRef: React.RefObject<HTMLButtonElement | null>;
+  children: React.ReactNode;
+}) {
+  const panelRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const handlePointerDown = (e: PointerEvent) => {
+      if (panelRef.current?.contains(e.target as Node)) return;
+      if (anchorRef.current?.contains(e.target as Node)) return;
+      onClose();
+    };
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("pointerdown", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open, onClose, anchorRef]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      ref={panelRef}
+      className="absolute bottom-full left-1/2 z-50 mb-2 -translate-x-1/2 rounded-xl border border-[var(--card-border)] bg-[var(--card-bg)] p-2 shadow-lg backdrop-blur-sm"
+    >
+      {children}
+    </div>
+  );
 }
 
-export function SelectionBar({ count, onGroup, onClear }: SelectionBarProps) {
+export function SelectionBar({
+  count,
+  onGroup,
+  onClear,
+  onBulkRecap,
+  onBulkPrompt,
+  onBulkEstimate,
+  onBulkAddLabel,
+  onBulkRemoveLabel,
+  onBulkStatus,
+  statusOptions,
+  participants,
+  labels,
+  onCreateLabel,
+  selectedMetadata,
+  statusUpdating,
+}: SelectionBarProps) {
+  const [activePopover, setActivePopover] = useState<ActivePopover>(null);
+  const estimateRef = useRef<HTMLButtonElement | null>(null);
+  const labelRef = useRef<HTMLButtonElement | null>(null);
+  const statusRef = useRef<HTMLButtonElement | null>(null);
+  const promptRef = useRef<HTMLButtonElement | null>(null);
+
+  const togglePopover = useCallback((popover: ActivePopover) => {
+    setActivePopover((current) => (current === popover ? null : popover));
+  }, []);
+
+  const labelCounts = React.useMemo(() => {
+    const counts = new Map<string, number>();
+    for (const meta of selectedMetadata.values()) {
+      for (const label of meta.labels) {
+        counts.set(label, (counts.get(label) ?? 0) + 1);
+      }
+    }
+    return counts;
+  }, [selectedMetadata]);
+
+  const allSelectedLabels = React.useMemo(() => {
+    const all = new Set<string>();
+    for (const meta of selectedMetadata.values()) {
+      for (const label of meta.labels) all.add(label);
+    }
+    return Array.from(all);
+  }, [selectedMetadata]);
+
   if (count < 2) return null;
 
+  const actionButtonClass =
+    "flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-[11px] font-medium text-[var(--muted-foreground)] transition-colors hover:bg-[var(--background)] hover:text-[var(--foreground)]";
+
   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 className="absolute bottom-4 left-1/2 z-30 -translate-x-1/2">
+      <div className="flex items-center gap-1 rounded-xl border border-[var(--card-border)] bg-[var(--card-bg)] px-3 py-1.5 shadow-2xl">
+        <span className="mr-1 text-xs font-medium text-[var(--foreground)]">
+          {count} selected
+        </span>
+
+        <div className="mx-1 h-4 w-px bg-[var(--card-border)]" />
+
+        {/* Recap */}
+        <button type="button" className={actionButtonClass} onClick={onBulkRecap} title="Recap all selected">
+          <FileText size={12} />
+          Recap
+        </button>
+
+        {/* Prompt */}
+        <div className="relative">
+          <button
+            ref={promptRef}
+            type="button"
+            className={`${actionButtonClass} ${activePopover === "prompt" ? "bg-[var(--background)] text-[var(--foreground)]" : ""}`}
+            onClick={() => togglePopover("prompt")}
+            title="Send prompt to all selected"
+          >
+            <MessageSquare size={12} />
+            Prompt
+          </button>
+          <Popover open={activePopover === "prompt"} onClose={() => setActivePopover(null)} anchorRef={promptRef}>
+            <PromptPopover
+              count={count}
+              participants={participants}
+              onSend={(prompt, agentId) => {
+                onBulkPrompt(prompt, agentId);
+                setActivePopover(null);
+              }}
+            />
+          </Popover>
+        </div>
+
+        {/* Estimate */}
+        <div className="relative">
+          <button
+            ref={estimateRef}
+            type="button"
+            className={`${actionButtonClass} ${activePopover === "estimate" ? "bg-[var(--background)] text-[var(--foreground)]" : ""}`}
+            onClick={() => togglePopover("estimate")}
+            title="Set estimate for all selected"
+          >
+            <Hash size={12} />
+            Estimate
+          </button>
+          <Popover open={activePopover === "estimate"} onClose={() => setActivePopover(null)} anchorRef={estimateRef}>
+            <FibonacciPicker
+              onSelect={(value) => {
+                onBulkEstimate(value);
+                setActivePopover(null);
+              }}
+            />
+          </Popover>
+        </div>
+
+        {/* Label */}
+        <div className="relative">
+          <button
+            ref={labelRef}
+            type="button"
+            className={`${actionButtonClass} ${activePopover === "label" ? "bg-[var(--background)] text-[var(--foreground)]" : ""}`}
+            onClick={() => togglePopover("label")}
+            title="Label all selected"
+          >
+            <Tag size={12} />
+            Label
+          </button>
+          <Popover open={activePopover === "label"} onClose={() => setActivePopover(null)} anchorRef={labelRef}>
+            <LabelPicker
+              labels={labels}
+              selectedLabels={allSelectedLabels}
+              labelCounts={labelCounts}
+              totalSelected={count}
+              onToggle={(label) => {
+                const c = labelCounts.get(label) ?? 0;
+                if (c === count) {
+                  onBulkRemoveLabel(label);
+                } else {
+                  onBulkAddLabel(label);
+                }
+              }}
+              onAdd={onCreateLabel}
+            />
+          </Popover>
+        </div>
+
+        {/* Status */}
+        <div className="relative">
+          <button
+            ref={statusRef}
+            type="button"
+            className={`${actionButtonClass} ${activePopover === "status" ? "bg-[var(--background)] text-[var(--foreground)]" : ""}`}
+            onClick={() => togglePopover("status")}
+            title="Update status for all selected"
+            disabled={statusUpdating}
+          >
+            {statusUpdating ? (
+              <RefreshCw size={12} className="animate-spin" />
+            ) : (
+              <RefreshCw size={12} />
+            )}
+            Status
+          </button>
+          <Popover open={activePopover === "status"} onClose={() => setActivePopover(null)} anchorRef={statusRef}>
+            <div className="flex max-h-48 w-44 flex-col overflow-y-auto">
+              {statusOptions.map((opt) => (
+                <button
+                  key={opt.value}
+                  type="button"
+                  className="w-full rounded-lg px-3 py-1.5 text-left text-xs text-[var(--muted-foreground)] transition-colors hover:bg-[var(--background)] hover:text-[var(--foreground)]"
+                  onClick={() => {
+                    onBulkStatus(opt.value);
+                    setActivePopover(null);
+                  }}
+                >
+                  {opt.label}
+                </button>
+              ))}
+            </div>
+          </Popover>
+        </div>
+
+        {/* Group */}
+        <button type="button" className={actionButtonClass} onClick={onGroup} title="Group selected">
+          <FolderPlus size={12} />
+          Group
+        </button>
+
+        <div className="mx-1 h-4 w-px bg-[var(--card-border)]" />
+
+        {/* Clear */}
+        <button
+          type="button"
+          className="flex h-6 w-6 items-center justify-center rounded text-[var(--muted-foreground)] transition-colors hover:text-[var(--foreground)]"
+          onClick={onClear}
+          aria-label="Clear selection"
+        >
+          <X size={14} />
+        </button>
+      </div>
     </div>
   );
 }