feat: tracker config UI with visual AND/OR filter builder

Adds FilterBuilder, TrackerConfig, TrackerList components and routes
the /projects/:projectId/trackers/new path to TrackerConfig.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/App.tsx

@@ -3,6 +3,7 @@ import AppLayout from "./components/layout/AppLayout";
 import ProjectForm from "./components/projects/ProjectForm";
 import ProjectDashboard from "./components/projects/ProjectDashboard";
 import SettingsPage from "./components/settings/SettingsPage";
+import TrackerConfig from "./components/trackers/TrackerConfig";
 
 function EmptyState() {
   return (
@@ -21,6 +22,7 @@ function App() {
           <Route path="/projects/new" element={<ProjectForm />} />
           <Route path="/projects/:projectId" element={<ProjectDashboard />} />
           <Route path="/projects/:projectId/edit" element={<ProjectForm />} />
+          <Route path="/projects/:projectId/trackers/new" element={<TrackerConfig />} />
           <Route path="/settings" element={<SettingsPage />} />
           <Route path="*" element={<Navigate to="/" replace />} />
         </Route>

src/components/trackers/FilterBuilder.tsx

@@ -0,0 +1,182 @@
+import type { FilterGroup, Filter, TrackerField } from "../../lib/types";
+
+const OPERATORS = ["In", "NotIn", "Equals", "NotEquals"] as const;
+
+interface Props {
+  groups: FilterGroup[];
+  onChange: (groups: FilterGroup[]) => void;
+  availableFields: TrackerField[];
+}
+
+export default function FilterBuilder({ groups, onChange, availableFields }: Props) {
+  function updateGroup(groupIndex: number, group: FilterGroup) {
+    const next = groups.map((g, i) => (i === groupIndex ? group : g));
+    onChange(next);
+  }
+
+  function removeGroup(groupIndex: number) {
+    onChange(groups.filter((_, i) => i !== groupIndex));
+  }
+
+  function addGroup() {
+    onChange([...groups, { conditions: [{ field: "", operator: "In", value: [] }] }]);
+  }
+
+  function updateCondition(groupIndex: number, condIndex: number, cond: Filter) {
+    const group = groups[groupIndex];
+    const conditions = group.conditions.map((c, i) => (i === condIndex ? cond : c));
+    updateGroup(groupIndex, { conditions });
+  }
+
+  function removeCondition(groupIndex: number, condIndex: number) {
+    const group = groups[groupIndex];
+    const conditions = group.conditions.filter((_, i) => i !== condIndex);
+    updateGroup(groupIndex, { conditions });
+  }
+
+  function addCondition(groupIndex: number) {
+    const group = groups[groupIndex];
+    updateGroup(groupIndex, {
+      conditions: [...group.conditions, { field: "", operator: "In", value: [] }],
+    });
+  }
+
+  function toggleValue(groupIndex: number, condIndex: number, val: string) {
+    const cond = groups[groupIndex].conditions[condIndex];
+    const next = cond.value.includes(val)
+      ? cond.value.filter((v) => v !== val)
+      : [...cond.value, val];
+    updateCondition(groupIndex, condIndex, { ...cond, value: next });
+  }
+
+  return (
+    <div className="space-y-3">
+      {groups.map((group, gi) => (
+        <div key={gi}>
+          {gi > 0 && (
+            <div className="flex items-center gap-2 my-2">
+              <div className="flex-1 border-t border-gray-200" />
+              <span className="text-xs font-semibold text-gray-500 uppercase tracking-wide">AND</span>
+              <div className="flex-1 border-t border-gray-200" />
+            </div>
+          )}
+          <div className="bg-white rounded-lg border border-gray-200 p-4">
+            <div className="flex items-center justify-between mb-3">
+              <span className="text-sm font-medium text-gray-700">Group {gi + 1}</span>
+              <button
+                type="button"
+                onClick={() => removeGroup(gi)}
+                className="text-xs text-red-500 hover:text-red-700"
+              >
+                Remove group
+              </button>
+            </div>
+
+            <div className="space-y-3">
+              {group.conditions.map((cond, ci) => {
+                const fieldDef = availableFields.find((f) => f.label === cond.field);
+                return (
+                  <div key={ci}>
+                    {ci > 0 && (
+                      <div className="flex items-center gap-2 my-2">
+                        <div className="flex-1 border-t border-dashed border-gray-200" />
+                        <span className="text-xs font-semibold text-blue-400 uppercase tracking-wide">OR</span>
+                        <div className="flex-1 border-t border-dashed border-gray-200" />
+                      </div>
+                    )}
+                    <div className="space-y-2">
+                      <div className="flex items-center gap-2">
+                        {/* Field dropdown */}
+                        <select
+                          value={cond.field}
+                          onChange={(e) =>
+                            updateCondition(gi, ci, {
+                              ...cond,
+                              field: e.target.value,
+                              value: [],
+                            })
+                          }
+                          className="border border-gray-300 rounded px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 flex-1"
+                        >
+                          <option value="">Select field...</option>
+                          {availableFields.map((f) => (
+                            <option key={f.field_id} value={f.label}>
+                              {f.label}
+                            </option>
+                          ))}
+                        </select>
+
+                        {/* Operator dropdown */}
+                        <select
+                          value={cond.operator}
+                          onChange={(e) =>
+                            updateCondition(gi, ci, { ...cond, operator: e.target.value })
+                          }
+                          className="border border-gray-300 rounded px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        >
+                          {OPERATORS.map((op) => (
+                            <option key={op} value={op}>
+                              {op}
+                            </option>
+                          ))}
+                        </select>
+
+                        {/* Remove condition */}
+                        <button
+                          type="button"
+                          onClick={() => removeCondition(gi, ci)}
+                          className="text-xs text-red-400 hover:text-red-600 whitespace-nowrap"
+                        >
+                          Remove
+                        </button>
+                      </div>
+
+                      {/* Value pills */}
+                      {fieldDef && fieldDef.values.length > 0 && (
+                        <div className="flex flex-wrap gap-1 pl-1">
+                          {fieldDef.values.map((v) => {
+                            const selected = cond.value.includes(String(v.id));
+                            return (
+                              <button
+                                key={v.id}
+                                type="button"
+                                onClick={() => toggleValue(gi, ci, String(v.id))}
+                                className={`px-2 py-0.5 rounded-full text-xs border transition-colors ${
+                                  selected
+                                    ? "bg-blue-600 text-white border-blue-600"
+                                    : "bg-white text-gray-700 border-gray-300 hover:border-blue-400"
+                                }`}
+                              >
+                                {v.label}
+                              </button>
+                            );
+                          })}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+
+            <button
+              type="button"
+              onClick={() => addCondition(gi)}
+              className="mt-3 text-xs text-blue-600 hover:text-blue-800"
+            >
+              + Add OR condition
+            </button>
+          </div>
+        </div>
+      ))}
+
+      <button
+        type="button"
+        onClick={addGroup}
+        className="w-full px-4 py-2 border-2 border-dashed border-gray-300 rounded text-sm text-gray-500 hover:border-blue-400 hover:text-blue-600 transition-colors"
+      >
+        + Add filter group (AND)
+      </button>
+    </div>
+  );
+}

src/components/trackers/TrackerConfig.tsx

@@ -0,0 +1,190 @@
+import { useState } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { addTracker, getTrackerFields } from "../../lib/api";
+import type { FilterGroup, TrackerField, AgentConfig } from "../../lib/types";
+import FilterBuilder from "./FilterBuilder";
+
+export default function TrackerConfig() {
+  const { projectId } = useParams<{ projectId: string }>();
+  const navigate = useNavigate();
+
+  const [trackerId, setTrackerId] = useState<number | "">("");
+  const [trackerLabel, setTrackerLabel] = useState("");
+  const [pollingInterval, setPollingInterval] = useState(10);
+  const [fields, setFields] = useState<TrackerField[]>([]);
+  const [fieldsLoaded, setFieldsLoaded] = useState(false);
+  const [fieldsLoading, setFieldsLoading] = useState(false);
+  const [filters, setFilters] = useState<FilterGroup[]>([]);
+  const [analystCommand, setAnalystCommand] = useState("claude");
+  const [developerCommand, setDeveloperCommand] = useState("claude");
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  async function handleLoadFields() {
+    if (!trackerId) return;
+    setFieldsLoading(true);
+    setError(null);
+    try {
+      const result = await getTrackerFields(Number(trackerId));
+      setFields(result);
+      setFieldsLoaded(true);
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setFieldsLoading(false);
+    }
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!projectId || trackerId === "") return;
+    setError(null);
+    setLoading(true);
+
+    const agentConfig: AgentConfig = {
+      analyst_command: analystCommand,
+      analyst_args: [],
+      developer_command: developerCommand,
+      developer_args: [],
+    };
+
+    try {
+      await addTracker(projectId, Number(trackerId), trackerLabel, pollingInterval, agentConfig, filters);
+      navigate(`/projects/${projectId}`);
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="max-w-2xl mx-auto p-8">
+      <h2 className="text-xl font-bold mb-6">Add tracker</h2>
+
+      <form onSubmit={handleSubmit} className="space-y-6">
+        {/* Basic fields */}
+        <div className="bg-white rounded-lg border border-gray-200 p-4 space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Tracker ID
+            </label>
+            <div className="flex gap-2">
+              <input
+                type="number"
+                value={trackerId}
+                onChange={(e) => {
+                  setTrackerId(e.target.value === "" ? "" : Number(e.target.value));
+                  setFieldsLoaded(false);
+                  setFields([]);
+                }}
+                required
+                min={1}
+                className="w-40 border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                placeholder="e.g. 42"
+              />
+              <button
+                type="button"
+                onClick={handleLoadFields}
+                disabled={!trackerId || fieldsLoading}
+                className="px-4 py-2 bg-blue-600 text-white rounded text-sm hover:bg-blue-700 disabled:opacity-50"
+              >
+                {fieldsLoading ? "Loading..." : "Load tracker fields"}
+              </button>
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Label
+            </label>
+            <input
+              type="text"
+              value={trackerLabel}
+              onChange={(e) => setTrackerLabel(e.target.value)}
+              required
+              placeholder="e.g. Bugs"
+              className="w-full border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Polling interval (minutes)
+            </label>
+            <input
+              type="number"
+              value={pollingInterval}
+              onChange={(e) => setPollingInterval(Number(e.target.value))}
+              required
+              min={1}
+              className="w-40 border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+        </div>
+
+        {/* Filter builder */}
+        {fieldsLoaded && (
+          <div>
+            <h3 className="text-sm font-semibold text-gray-700 mb-2">Filters</h3>
+            <FilterBuilder
+              groups={filters}
+              onChange={setFilters}
+              availableFields={fields}
+            />
+          </div>
+        )}
+
+        {/* Agent config */}
+        <div className="bg-white rounded-lg border border-gray-200 p-4 space-y-4">
+          <h3 className="text-sm font-semibold text-gray-700">Agent configuration</h3>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Analyst command
+            </label>
+            <input
+              type="text"
+              value={analystCommand}
+              onChange={(e) => setAnalystCommand(e.target.value)}
+              className="w-full border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Developer command
+            </label>
+            <input
+              type="text"
+              value={developerCommand}
+              onChange={(e) => setDeveloperCommand(e.target.value)}
+              className="w-full border border-gray-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+        </div>
+
+        {error && (
+          <div className="text-red-600 text-sm bg-red-50 border border-red-200 rounded p-2">
+            {error}
+          </div>
+        )}
+
+        <div className="flex gap-2">
+          <button
+            type="submit"
+            disabled={loading}
+            className="px-4 py-2 bg-blue-600 text-white rounded text-sm hover:bg-blue-700 disabled:opacity-50"
+          >
+            {loading ? "Adding..." : "Add tracker"}
+          </button>
+          <button
+            type="button"
+            onClick={() => navigate(`/projects/${projectId}`)}
+            className="px-4 py-2 bg-gray-200 rounded text-sm hover:bg-gray-300"
+          >
+            Cancel
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}

src/components/trackers/TrackerList.tsx

@@ -0,0 +1,112 @@
+import { Link } from "react-router-dom";
+import { manualPoll, updateTracker, removeTracker } from "../../lib/api";
+import type { WatchedTracker } from "../../lib/types";
+
+interface Props {
+  trackers: WatchedTracker[];
+  projectId: string;
+  onRefresh: () => void;
+}
+
+export default function TrackerList({ trackers, projectId, onRefresh }: Props) {
+  async function handlePollNow(tracker: WatchedTracker) {
+    try {
+      await manualPoll(tracker.id);
+      onRefresh();
+    } catch (err) {
+      console.error("Poll failed:", err);
+    }
+  }
+
+  async function handleToggleEnabled(tracker: WatchedTracker) {
+    try {
+      await updateTracker(
+        tracker.id,
+        tracker.polling_interval,
+        tracker.agent_config,
+        tracker.filters,
+        !tracker.enabled
+      );
+      onRefresh();
+    } catch (err) {
+      console.error("Update failed:", err);
+    }
+  }
+
+  async function handleRemove(tracker: WatchedTracker) {
+    if (!window.confirm(`Remove tracker "${tracker.tracker_label}"?`)) return;
+    try {
+      await removeTracker(tracker.id);
+      onRefresh();
+    } catch (err) {
+      console.error("Remove failed:", err);
+    }
+  }
+
+  return (
+    <div className="space-y-3">
+      {trackers.length === 0 && (
+        <div className="text-sm text-gray-400">No trackers configured.</div>
+      )}
+
+      {trackers.map((tracker) => (
+        <div
+          key={tracker.id}
+          className="bg-white rounded-lg border border-gray-200 p-4 flex items-center justify-between gap-4"
+        >
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2">
+              <span className="font-medium text-sm">{tracker.tracker_label}</span>
+              <span className="text-xs text-gray-400">#{tracker.tracker_id}</span>
+              <span
+                className={`text-xs px-2 py-0.5 rounded-full font-medium ${
+                  tracker.enabled
+                    ? "bg-green-100 text-green-700"
+                    : "bg-gray-100 text-gray-500"
+                }`}
+              >
+                {tracker.enabled ? "Active" : "Paused"}
+              </span>
+            </div>
+            <div className="text-xs text-gray-400 mt-1">
+              {tracker.last_polled_at
+                ? `Last poll: ${new Date(tracker.last_polled_at).toLocaleString()}`
+                : "Never polled"}
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2 shrink-0">
+            <button
+              type="button"
+              onClick={() => handlePollNow(tracker)}
+              className="px-3 py-1 bg-blue-600 text-white rounded text-xs hover:bg-blue-700"
+            >
+              Poll now
+            </button>
+            <button
+              type="button"
+              onClick={() => handleToggleEnabled(tracker)}
+              className="px-3 py-1 bg-gray-200 text-gray-700 rounded text-xs hover:bg-gray-300"
+            >
+              {tracker.enabled ? "Pause" : "Resume"}
+            </button>
+            <button
+              type="button"
+              onClick={() => handleRemove(tracker)}
+              className="px-3 py-1 bg-red-100 text-red-700 rounded text-xs hover:bg-red-200"
+            >
+              Remove
+            </button>
+          </div>
+        </div>
+      ))}
+
+      <Link
+        to={`/projects/${projectId}/trackers/new`}
+        className="inline-block px-4 py-2 bg-blue-600 text-white rounded text-sm hover:bg-blue-700"
+      >
+        Add tracker
+      </Link>
+    </div>
+  );
+}