@mndrk/agx 2.1.0 → 2.3.0

package/cloud-runtime/standalone/apps/local/components/linear/LinearBoardFilters.tsx

@@ -0,0 +1,343 @@
+"use client";
+
+import React, { useState, useRef, useEffect, useCallback } from "react";
+import { Check, ChevronDown, RefreshCw } from "lucide-react";
+
+export interface FilterOption {
+  value: string;
+  label: string;
+}
+
+export interface FilterSelectProps {
+  label: string;
+  value: string;
+  options: FilterOption[];
+  activeClasses: string;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+}
+
+export interface FilterPopdownProps extends FilterSelectProps {
+  emptyLabel?: string;
+}
+
+export interface MultiFilterPopdownProps {
+  label: string;
+  values: string[];
+  options: FilterOption[];
+  activeClasses: string;
+  onChange: (value: string[]) => void;
+  emptyLabel?: string;
+}
+
+export 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>
+  );
+}
+
+export 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>
+  );
+}
+
+export 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>
+  );
+}
+
+export 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>
+  );
+}

package/cloud-runtime/standalone/apps/local/components/linear/LinearSettingsModal.tsx

@@ -1,9 +1,10 @@
 "use client";
 
 import { useState, type ComponentProps } from "react";
-import { Bot, Link2, X } from "lucide-react";
+import { Bot, Link2, ScrollText, X } from "lucide-react";
 import LinearSetup from "@/components/LinearSetup";
 import LinearWorkerConfig from "@/components/linear/LinearWorkerConfig";
+import LinearWorkerRunLog from "@/components/linear/LinearWorkerRunLog";
 
 type LinearSetupProps = ComponentProps<typeof LinearSetup>;
 
@@ -20,7 +21,7 @@ interface LinearSettingsModalProps {
   projectId?: string;
 }
 
-type SettingsTab = "connection" | "worker";
+type SettingsTab = "connection" | "worker" | "run-log";
 
 export default function LinearSettingsModal({
   connected,
@@ -35,10 +36,12 @@ export default function LinearSettingsModal({
   projectId,
 }: LinearSettingsModalProps) {
   const [tab, setTab] = useState<SettingsTab>(connected ? "worker" : "connection");
+  const [workerJobId, setWorkerJobId] = useState<string | null>(null);
 
   const tabs: Array<{ id: SettingsTab; label: string; icon: React.ReactNode; disabled?: boolean }> = [
     { id: "connection", label: "Connection", icon: <Link2 size={14} /> },
     { id: "worker", label: "Linear Worker", icon: <Bot size={14} />, disabled: !connected },
+    { id: "run-log", label: "Run Log", icon: <ScrollText size={14} />, disabled: !connected },
   ];
 
   return (
@@ -96,7 +99,10 @@ export default function LinearSettingsModal({
             />
           )}
           {tab === "worker" && connected && (
-            <LinearWorkerConfig projectId={projectId} />
+            <LinearWorkerConfig projectId={projectId} onJobLoaded={setWorkerJobId} />
+          )}
+          {tab === "run-log" && connected && (
+            <LinearWorkerRunLog jobId={workerJobId} />
           )}
         </div>
       </div>

package/cloud-runtime/standalone/apps/local/components/linear/LinearWorkerConfig.tsx

@@ -2,7 +2,7 @@
 
 import { useCallback, useEffect, useRef, useState } from "react";
 import dynamic from "next/dynamic";
-import { ChevronDown, ChevronRight, Pause, Play, RefreshCw } from "lucide-react";
+import { ChevronDown, ChevronRight, Play, RefreshCw } from "lucide-react";
 import { ScheduleConditionPicker, SimpleDropdown } from "@/components/scheduling/ScheduleConditionPicker";
 import {
   LINEAR_WORKER_DEFAULT_PROMPT,
@@ -21,6 +21,7 @@ interface TeamOption {
 
 interface LinearWorkerConfigProps {
   projectId?: string;
+  onJobLoaded?: (jobId: string | null) => void;
 }
 
 function formatNextRun(
@@ -87,6 +88,7 @@ function CollapsibleSection({
 
 export default function LinearWorkerConfig({
   projectId,
+  onJobLoaded,
 }: LinearWorkerConfigProps) {
   const [job, setJob] = useState<PromptJob | null>(null);
   const [teams, setTeams] = useState<TeamOption[]>([]);
@@ -120,13 +122,16 @@ export default function LinearWorkerConfig({
         setCadence(data.job.cronExpr || data.job.cadence || "*/30 * * * *");
         setCondition(data.job.condition || "");
         setTeamId(data.job.teamId || "");
+        onJobLoaded?.(data.job.id);
+      } else {
+        onJobLoaded?.(null);
       }
     } catch {
       // ignore
     } finally {
       setLoading(false);
     }
-  }, [projectId]);
+  }, [projectId, onJobLoaded]);
 
   const fetchTeams = useCallback(async () => {
     if (!projectId) return;
@@ -216,6 +221,26 @@ export default function LinearWorkerConfig({
     }
   }, [job, projectId, handleSave]);
 
+  const [runningNow, setRunningNow] = useState(false);
+
+  const handleRunNow = useCallback(async () => {
+    if (!job) return;
+    setRunningNow(true);
+    try {
+      await fetch("/api/prompt-jobs/poll", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ jobId: job.id }),
+      });
+      // Refresh status after triggering
+      setTimeout(fetchWorker, 1000);
+    } catch {
+      // ignore
+    } finally {
+      setRunningNow(false);
+    }
+  }, [job, fetchWorker]);
+
   if (loading) {
     return (
       <div className="flex items-center gap-2 py-12 justify-center text-sm text-[var(--muted-foreground)]">
@@ -234,15 +259,6 @@ export default function LinearWorkerConfig({
         <div className="flex items-center gap-4 text-xs text-[var(--muted-foreground)]">
           {job && (
             <>
-              <span
-                className={`rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.16em] ${
-                  isActive
-                    ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-400"
-                    : "border-yellow-500/30 bg-yellow-500/10 text-yellow-400"
-                }`}
-              >
-                {job.state}
-              </span>
               <span>
                 Next: <span className="text-[var(--foreground)]">{formatNextRun(job.nextRunAt, job.state)}</span>
               </span>
@@ -260,26 +276,45 @@ export default function LinearWorkerConfig({
             </>
           )}
         </div>
-        <button
-          type="button"
-          disabled={saving}
-          onClick={handleToggle}
-          className={`flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors ${
-            isActive
-              ? "border-yellow-500/30 bg-yellow-500/10 text-yellow-400 hover:bg-yellow-500/20"
-              : "border-emerald-500/30 bg-emerald-500/10 text-emerald-400 hover:bg-emerald-500/20"
-          }`}
-        >
-          {isActive ? (
-            <>
-              <Pause size={12} /> Pause
-            </>
-          ) : (
-            <>
-              <Play size={12} /> {job ? "Resume" : "Enable"}
-            </>
+        <div className="flex items-center gap-3">
+          {/* Run Now button */}
+          {job && (
+            <button
+              type="button"
+              disabled={runningNow || saving}
+              onClick={handleRunNow}
+              className="flex items-center gap-1.5 rounded-lg border border-blue-500/30 bg-blue-500/10 px-3 py-1.5 text-xs font-medium text-blue-400 transition-colors hover:bg-blue-500/20 disabled:opacity-40"
+            >
+              {runningNow ? (
+                <RefreshCw size={12} className="animate-spin" />
+              ) : (
+                <Play size={12} />
+              )}
+              Run now
+            </button>
           )}
-        </button>
+          {/* Enable / Disable toggle */}
+          <button
+            type="button"
+            disabled={saving}
+            onClick={handleToggle}
+            className="relative flex items-center gap-2.5 rounded-lg border border-[var(--card-border)] bg-[var(--muted)] px-3 py-1.5 text-xs font-medium text-[var(--foreground)] transition-colors hover:border-[var(--muted-foreground)]"
+          >
+            {/* Toggle track */}
+            <span
+              className={`relative inline-flex h-4 w-7 shrink-0 items-center rounded-full transition-colors ${
+                isActive ? "bg-emerald-500" : "bg-[var(--card-border)]"
+              }`}
+            >
+              <span
+                className={`inline-block h-3 w-3 rounded-full bg-white transition-transform ${
+                  isActive ? "translate-x-3.5" : "translate-x-0.5"
+                }`}
+              />
+            </span>
+            {isActive ? "Enabled" : "Disabled"}
+          </button>
+        </div>
       </div>
 
       {/* Main layout: Left (prompts) | Right (config) */}