@hienlh/ppm 0.10.5 → 0.11.0

package/src/web/components/jira/jira-filter-builder.tsx

@@ -0,0 +1,197 @@
+import { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { X, Loader2 } from "lucide-react";
+import { api } from "@/lib/api-client";
+
+interface FilterState {
+  project: string[];
+  issueType: string[];
+  priority: string[];
+  status: string[];
+  assignee: string[];
+}
+
+function filtersToJql(filters: FilterState): string {
+  const clauses: string[] = [];
+  if (filters.project.length) clauses.push(`project IN (${filters.project.join(", ")})`);
+  if (filters.issueType.length) clauses.push(`issuetype IN (${filters.issueType.map((v) => `"${v}"`).join(", ")})`);
+  if (filters.priority.length) clauses.push(`priority IN (${filters.priority.map((v) => `"${v}"`).join(", ")})`);
+  if (filters.status.length) clauses.push(`status IN (${filters.status.map((v) => `"${v}"`).join(", ")})`);
+  if (filters.assignee.length) clauses.push(`assignee IN (${filters.assignee.map((v) => `"${v}"`).join(", ")})`);
+  return (clauses.join(" AND ") || "ORDER BY updated DESC") + (clauses.length ? " ORDER BY updated DESC" : "");
+}
+
+const EMPTY_FILTERS: FilterState = { project: [], issueType: [], priority: [], status: [], assignee: [] };
+
+interface FieldOption { id?: string; key?: string; name: string }
+
+interface Props {
+  value: string;
+  onChange: (jql: string) => void;
+  configId: number;
+}
+
+export function JiraFilterBuilder({ value, onChange, configId }: Props) {
+  const [mode, setMode] = useState<"builder" | "raw">(value ? "raw" : "builder");
+  const [filters, setFilters] = useState<FilterState>(EMPTY_FILTERS);
+  const [rawJql, setRawJql] = useState(value);
+
+  // Metadata options fetched from Jira API
+  const [projects, setProjects] = useState<FieldOption[]>([]);
+  const [issueTypes, setIssueTypes] = useState<FieldOption[]>([]);
+  const [priorities, setPriorities] = useState<FieldOption[]>([]);
+  const [statuses, setStatuses] = useState<FieldOption[]>([]);
+  const [assignees, setAssignees] = useState<FieldOption[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  // Fetch metadata when configId changes
+  useEffect(() => {
+    if (!configId) return;
+    setLoading(true);
+    Promise.all([
+      api.get<FieldOption[]>(`/api/jira/metadata/${configId}/projects`).catch(() => []),
+      api.get<FieldOption[]>(`/api/jira/metadata/${configId}/issuetype`).catch(() => []),
+      api.get<FieldOption[]>(`/api/jira/metadata/${configId}/priority`).catch(() => []),
+      api.get<FieldOption[]>(`/api/jira/metadata/${configId}/status`).catch(() => []),
+      api.get<Array<{ accountId: string; displayName: string }>>(`/api/jira/metadata/${configId}/assignees`).catch(() => []),
+    ]).then(([p, it, pr, st, as_]) => {
+      setProjects(p);
+      setIssueTypes(it);
+      setPriorities(pr);
+      setStatuses(st);
+      setAssignees(as_.map((u) => ({ id: u.accountId, name: u.displayName })));
+    }).finally(() => setLoading(false));
+  }, [configId]);
+
+  // Sync builder → JQL
+  useEffect(() => {
+    if (mode === "builder") {
+      const jql = filtersToJql(filters);
+      onChange(jql);
+    }
+  }, [filters, mode]);
+
+  const handleRawChange = useCallback((val: string) => {
+    setRawJql(val);
+    onChange(val);
+  }, [onChange]);
+
+  const addValue = (field: keyof FilterState, val: string) => {
+    if (!val || filters[field].includes(val)) return;
+    setFilters((f) => ({ ...f, [field]: [...f[field], val] }));
+  };
+
+  const removeValue = (field: keyof FilterState, val: string) => {
+    setFilters((f) => ({ ...f, [field]: f[field].filter((v) => v !== val) }));
+  };
+
+  return (
+    <div className="space-y-2 min-w-0">
+      <div className="flex items-center gap-2">
+        <Button
+          type="button" size="sm" variant={mode === "builder" ? "default" : "outline"}
+          onClick={() => setMode("builder")} className="min-h-[44px] text-xs"
+        >Builder</Button>
+        <Button
+          type="button" size="sm" variant={mode === "raw" ? "default" : "outline"}
+          onClick={() => setMode("raw")} className="min-h-[44px] text-xs"
+        >Raw JQL</Button>
+        {loading && <Loader2 className="size-3.5 animate-spin text-muted-foreground" />}
+      </div>
+
+      {mode === "raw" ? (
+        <textarea
+          value={rawJql}
+          onChange={(e) => handleRawChange(e.target.value)}
+          className="w-full h-20 rounded-md border border-input bg-background px-3 py-2 text-sm font-mono resize-none focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          placeholder='e.g. project = MYPROJ AND status = "In Progress"'
+        />
+      ) : (
+        <div className="space-y-2">
+          <FilterField
+            label="Project" field="project" filters={filters}
+            onAdd={addValue} onRemove={removeValue}
+            options={projects.map((p) => ({ value: p.key ?? p.name, label: `${p.key ?? p.name} — ${p.name}` }))}
+            placeholder="Select project..."
+          />
+          <FilterField
+            label="Issue Type" field="issueType" filters={filters}
+            onAdd={addValue} onRemove={removeValue}
+            options={issueTypes.map((t) => ({ value: t.name, label: t.name }))}
+            placeholder="Select issue type..."
+          />
+          <FilterField
+            label="Priority" field="priority" filters={filters}
+            onAdd={addValue} onRemove={removeValue}
+            options={priorities.map((p) => ({ value: p.name, label: p.name }))}
+            placeholder="Select priority..."
+          />
+          <FilterField
+            label="Status" field="status" filters={filters}
+            onAdd={addValue} onRemove={removeValue}
+            options={statuses.map((s) => ({ value: s.name, label: s.name }))}
+            placeholder="Select status..."
+          />
+          <FilterField
+            label="Assignee" field="assignee" filters={filters}
+            onAdd={addValue} onRemove={removeValue}
+            options={assignees.map((a) => ({ value: a.id ?? a.name, label: a.name }))}
+            placeholder="Select assignee..."
+          />
+        </div>
+      )}
+
+      {/* JQL preview */}
+      <div className="text-xs text-muted-foreground bg-muted/50 rounded px-2 py-1 font-mono break-all">
+        {mode === "builder" ? filtersToJql(filters) : rawJql || "(empty)"}
+      </div>
+    </div>
+  );
+}
+
+function FilterField({ label, field, filters, onAdd, onRemove, options, placeholder }: {
+  label: string; field: keyof FilterState; filters: FilterState;
+  onAdd: (f: keyof FilterState, v: string) => void;
+  onRemove: (f: keyof FilterState, v: string) => void;
+  options: Array<{ value: string; label: string }>;
+  placeholder: string;
+}) {
+  // Filter out already-selected options
+  const available = options.filter((o) => !filters[field].includes(o.value));
+
+  return (
+    <div>
+      <label className="text-xs text-muted-foreground">{label}</label>
+      <div className="flex items-center gap-1 flex-wrap">
+        {filters[field].map((v) => {
+          const displayLabel = options.find((o) => o.value === v)?.label ?? v;
+          return (
+            <span key={v} className="inline-flex items-center gap-0.5 px-2 py-0.5 rounded-full bg-primary/10 text-xs">
+              {displayLabel}
+              <button type="button" onClick={() => onRemove(field, v)} className="hover:text-destructive">
+                <X className="size-3" />
+              </button>
+            </span>
+          );
+        })}
+        {available.length > 0 ? (
+          <Select onValueChange={(v) => onAdd(field, v)}>
+            <SelectTrigger className="h-7 w-auto min-w-[120px] text-xs">
+              <SelectValue placeholder={placeholder} />
+            </SelectTrigger>
+            <SelectContent>
+              {available.map((o) => (
+                <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        ) : options.length > 0 ? (
+          <span className="text-xs text-muted-foreground italic">All selected</span>
+        ) : (
+          <span className="text-xs text-muted-foreground italic">Loading...</span>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/web/components/jira/jira-panel.tsx

@@ -0,0 +1,201 @@
+import { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { useProjectStore } from "@/stores/project-store";
+import { useJiraStore } from "@/stores/jira-store";
+import { useTabStore } from "@/stores/tab-store";
+import { JiraTicketCard } from "./jira-ticket-card";
+import { JiraWatcherList } from "./jira-watcher-list";
+import { JiraConfigForm } from "./jira-config-form";
+import { JiraDebugPromptDialog } from "./jira-debug-prompt-dialog";
+import { ArrowLeft, Settings2, Plus, ListFilter, RefreshCw, Loader2 } from "lucide-react";
+import { toast } from "sonner";
+import type { JiraWatchResult } from "../../../../src/types/jira";
+
+type SubView = "tickets" | "watchers" | "credentials";
+
+export function JiraPanel() {
+  const activeProject = useProjectStore((s) => s.activeProject);
+  const openTab = useTabStore((s) => s.openTab);
+  const {
+    configs, watchers, results, loadConfigs, loadWatchers, loadResults,
+    loadProjectsWithIds, projectsWithIds, softDeleteResult, resumeDebug, cancelDebug,
+    markRead, unreadCount, loadUnreadCount,
+  } = useJiraStore();
+
+  const [subView, setSubView] = useState<SubView>("tickets");
+  const [loading, setLoading] = useState(false);
+  const [debugTarget, setDebugTarget] = useState<JiraWatchResult | null>(null);
+
+  // Resolve current project → config
+  const projectEntry = projectsWithIds.find((p) => p.name === activeProject?.name);
+  const config = configs.find((c) => c.projectId === projectEntry?.id);
+
+  // Load data on mount and when project changes
+  useEffect(() => {
+    loadConfigs();
+    loadProjectsWithIds();
+  }, []);
+
+  useEffect(() => {
+    if (config) loadWatchers(config.id);
+  }, [config?.id]);
+
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    try { await loadResults(); } catch {}
+    setLoading(false);
+  }, [loadResults]);
+
+  useEffect(() => { refresh(); loadUnreadCount(); }, [config?.id]);
+
+  // WS events for live status updates
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const detail = (e as CustomEvent).detail;
+      if (!detail) return;
+      refresh();
+      if (detail.status === "done") {
+        loadUnreadCount();
+        toast.success(`Debug complete: ${detail.issueKey}`, {
+          action: detail.sessionId ? {
+            label: "View",
+            onClick: () => openTab({
+              type: "chat",
+              title: `[Jira] ${detail.issueKey}`,
+              projectId: activeProject?.name ?? null,
+              metadata: { projectName: activeProject?.name, sessionId: detail.sessionId },
+              closable: true,
+            }),
+          } : undefined,
+        });
+      } else if (detail.status === "failed") {
+        toast.error(`Debug failed: ${detail.issueKey}`);
+      }
+    };
+    window.addEventListener("jira:status_change", handler);
+    return () => window.removeEventListener("jira:status_change", handler);
+  }, [refresh, loadUnreadCount]);
+
+  const openSession = useCallback((r: JiraWatchResult) => {
+    if (!r.sessionId) return;
+    if (r.status === "done" && !r.readAt) markRead(r.id);
+    openTab({
+      type: "chat",
+      title: `[Jira] ${r.issueKey}`,
+      projectId: activeProject?.name ?? null,
+      metadata: { projectName: activeProject?.name, sessionId: r.sessionId },
+      closable: true,
+    });
+  }, [openTab, markRead, activeProject]);
+
+  const handleRowClick = (r: JiraWatchResult) => {
+    if (r.sessionId) openSession(r);
+  };
+
+  // No project selected
+  if (!activeProject) {
+    return (
+      <div className="flex items-center justify-center h-32 p-4">
+        <p className="text-xs text-muted-foreground text-center">Select a project to use Jira</p>
+      </div>
+    );
+  }
+
+  // Sub-views: watchers / credentials
+  if (subView !== "tickets") {
+    const title = subView === "watchers" ? "Watchers" : "Jira Credentials";
+    return (
+      <div className="h-full flex flex-col">
+        <div className="shrink-0 px-2 py-2 flex items-center gap-1.5 border-b border-border/50">
+          <Button size="icon" variant="ghost" className="size-7" onClick={() => setSubView("tickets")}>
+            <ArrowLeft className="size-4" />
+          </Button>
+          <h2 className="text-sm font-semibold truncate">{title}</h2>
+        </div>
+        <ScrollArea className="flex-1 min-h-0">
+          <div className="p-3">
+            {subView === "watchers" ? (
+              config ? <JiraWatcherList configId={config.id} /> : <p className="text-xs text-muted-foreground text-center py-4">Configure Jira credentials first.</p>
+            ) : (
+              projectEntry ? <JiraConfigForm projectId={projectEntry.id} existing={config ? { baseUrl: config.baseUrl, email: config.email, hasToken: config.hasToken } : null} /> : <p className="text-xs text-muted-foreground text-center py-4">Project not found in database.</p>
+            )}
+          </div>
+        </ScrollArea>
+      </div>
+    );
+  }
+
+  // Default: ticket list
+  return (
+    <div className="h-full flex flex-col">
+      {/* Header */}
+      <div className="shrink-0 px-3 py-2 flex items-center gap-1.5 border-b border-border/50">
+        <h2 className="text-sm font-semibold flex-1 truncate">Jira</h2>
+        {unreadCount > 0 && (
+          <span className="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full bg-primary text-primary-foreground text-[10px] font-bold">
+            {unreadCount}
+          </span>
+        )}
+        <Button size="icon" variant="ghost" className="size-7" onClick={refresh} disabled={loading} title="Refresh">
+          {loading ? <Loader2 className="size-3.5 animate-spin" /> : <RefreshCw className="size-3.5" />}
+        </Button>
+        <Button size="icon" variant="ghost" className="size-7" onClick={() => setSubView("watchers")} title="Watchers">
+          <ListFilter className="size-3.5" />
+        </Button>
+        <Button size="icon" variant="ghost" className="size-7" onClick={() => setSubView("credentials")} title="Credentials">
+          <Settings2 className="size-3.5" />
+        </Button>
+      </div>
+
+      {/* Ticket list */}
+      <ScrollArea className="flex-1 min-h-0">
+        <div className="p-1.5 space-y-1.5">
+          {!config ? (
+            <EmptyState
+              message="No Jira credentials configured"
+              action="Set up Jira"
+              onAction={() => setSubView("credentials")}
+            />
+          ) : results.length === 0 && watchers.length === 0 ? (
+            <EmptyState
+              message="No watchers yet"
+              action="Add Watcher"
+              onAction={() => setSubView("watchers")}
+            />
+          ) : results.length === 0 ? (
+            <EmptyState message="No tickets yet. Watchers will pick up new issues." />
+          ) : (
+            results.map((r) => (
+              <JiraTicketCard
+                key={r.id}
+                result={r}
+                onDebug={setDebugTarget}
+                onResume={(r) => resumeDebug(r.id)}
+                onCancel={(r) => cancelDebug(r.id)}
+                onOpenSession={openSession}
+                onDelete={softDeleteResult}
+                onClick={handleRowClick}
+              />
+            ))
+          )}
+        </div>
+      </ScrollArea>
+
+      <JiraDebugPromptDialog result={debugTarget} onClose={() => setDebugTarget(null)} />
+    </div>
+  );
+}
+
+function EmptyState({ message, action, onAction }: { message: string; action?: string; onAction?: () => void }) {
+  return (
+    <div className="flex flex-col items-center justify-center py-12 gap-3">
+      <p className="text-xs text-muted-foreground text-center">{message}</p>
+      {action && onAction && (
+        <Button size="sm" variant="outline" className="min-h-[44px]" onClick={onAction}>
+          <Plus className="size-4 mr-1.5" /> {action}
+        </Button>
+      )}
+    </div>
+  );
+}

package/src/web/components/jira/jira-results-panel.tsx

@@ -0,0 +1,184 @@
+import { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { useJiraStore } from "@/stores/jira-store";
+import { JiraStatusBadge } from "./jira-status-badge";
+import { JiraTicketDetail } from "./jira-ticket-detail";
+import { JiraDebugPromptDialog } from "./jira-debug-prompt-dialog";
+import { cn } from "@/lib/utils";
+import { RefreshCw, Trash2, Loader2, Play } from "lucide-react";
+import { toast } from "sonner";
+import type { JiraWatchResult, JiraResultStatus } from "../../../../src/types/jira";
+
+export function JiraResultsPanel() {
+  const {
+    results, watchers, configs, loadResults, loadConfigs,
+    softDeleteResult, markRead, unreadCount, loadUnreadCount,
+  } = useJiraStore();
+  const [filterWatcher, setFilterWatcher] = useState<string>("all");
+  const [filterStatus, setFilterStatus] = useState<string>("all");
+  const [loading, setLoading] = useState(false);
+  const [ticketOpen, setTicketOpen] = useState(false);
+  const [selectedIssue, setSelectedIssue] = useState<{ configId: number; issueKey: string } | null>(null);
+  const [debugTarget, setDebugTarget] = useState<JiraWatchResult | null>(null);
+
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    try {
+      await loadResults(
+        filterWatcher !== "all" ? Number(filterWatcher) : undefined,
+        filterStatus !== "all" ? filterStatus : undefined,
+      );
+    } catch {}
+    setLoading(false);
+  }, [filterWatcher, filterStatus, loadResults]);
+
+  useEffect(() => { loadConfigs(); loadUnreadCount(); refresh(); }, []);
+  useEffect(() => { refresh(); }, [filterWatcher, filterStatus]);
+
+  // Listen for jira:status_change WS events dispatched as CustomEvents
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const detail = (e as CustomEvent).detail;
+      if (!detail) return;
+      refresh();
+      if (detail.status === "done") {
+        loadUnreadCount();
+        toast.success(`Debug complete: ${detail.issueKey}`, {
+          action: detail.sessionId ? {
+            label: "View",
+            onClick: () => window.dispatchEvent(
+              new CustomEvent("ppm:open-session", { detail: { sessionId: detail.sessionId } }),
+            ),
+          } : undefined,
+        });
+      } else if (detail.status === "failed") {
+        toast.error(`Debug failed: ${detail.issueKey}`);
+      }
+    };
+    window.addEventListener("jira:status_change", handler);
+    return () => window.removeEventListener("jira:status_change", handler);
+  }, [refresh, loadUnreadCount]);
+
+  const handleRowClick = (r: JiraWatchResult) => {
+    // Mark as read if done + unread
+    if (r.status === "done" && !r.readAt) markRead(r.id);
+
+    if (r.status === "done" && r.sessionId) {
+      window.dispatchEvent(new CustomEvent("ppm:open-session", { detail: { sessionId: r.sessionId } }));
+      return;
+    }
+    const watcher = watchers.find((w) => w.id === r.watcherId);
+    const config = configs.find((c) => c.id === watcher?.jiraConfigId);
+    if (config) {
+      setSelectedIssue({ configId: config.id, issueKey: r.issueKey });
+      setTicketOpen(true);
+    }
+  };
+
+  const selectedConfig = selectedIssue
+    ? configs.find((c) => c.id === selectedIssue.configId)
+    : null;
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Filter bar */}
+      <div className="shrink-0 px-3 py-2 flex items-center gap-2 border-b">
+        <Select value={filterWatcher} onValueChange={setFilterWatcher}>
+          <SelectTrigger className="h-8 w-32 text-xs"><SelectValue placeholder="Watcher" /></SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All watchers</SelectItem>
+            {watchers.map((w) => <SelectItem key={w.id} value={String(w.id)}>{w.name}</SelectItem>)}
+          </SelectContent>
+        </Select>
+        <Select value={filterStatus} onValueChange={setFilterStatus}>
+          <SelectTrigger className="h-8 w-28 text-xs"><SelectValue placeholder="Status" /></SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All</SelectItem>
+            <SelectItem value="pending">Pending</SelectItem>
+            <SelectItem value="queued">Queued</SelectItem>
+            <SelectItem value="running">Running</SelectItem>
+            <SelectItem value="done">Done</SelectItem>
+            <SelectItem value="failed">Failed</SelectItem>
+          </SelectContent>
+        </Select>
+        {unreadCount > 0 && (
+          <span className="inline-flex items-center justify-center size-5 rounded-full bg-primary text-primary-foreground text-[10px] font-bold">
+            {unreadCount}
+          </span>
+        )}
+        <Button size="icon" variant="ghost" className="size-8 ml-auto" onClick={refresh} disabled={loading}>
+          {loading ? <Loader2 className="size-3.5 animate-spin" /> : <RefreshCw className="size-3.5" />}
+        </Button>
+      </div>
+
+      {/* Results list */}
+      <div className="flex-1 overflow-y-auto">
+        {results.length === 0 ? (
+          <p className="text-sm text-muted-foreground text-center py-8">
+            No results yet. Configure a watcher to start.
+          </p>
+        ) : (
+          results.map((r) => (
+            <div
+              key={r.id}
+              className={cn(
+                "flex items-center gap-2 px-3 py-2 border-b hover:bg-muted/50 cursor-pointer",
+                r.status === "done" && !r.readAt && "bg-primary/5 font-medium border-l-2 border-l-primary",
+              )}
+              onClick={() => handleRowClick(r)}
+            >
+              <JiraStatusBadge status={r.status as JiraResultStatus} />
+              <span className="text-xs font-mono font-medium shrink-0">{r.issueKey}</span>
+              <span className="text-xs text-muted-foreground truncate flex-1">
+                {r.issueSummary ?? ""}
+              </span>
+              {r.status === "queued" && <Loader2 className="size-3.5 text-muted-foreground" />}
+              {r.status === "running" && <Loader2 className="size-3.5 animate-spin text-primary" />}
+              {r.status === "pending" && (
+                <Button size="icon" variant="ghost" className="size-8 shrink-0"
+                  onClick={(e) => { e.stopPropagation(); setDebugTarget(r); }}>
+                  <Play className="size-3.5 text-primary" />
+                </Button>
+              )}
+              <span className="text-[10px] text-muted-foreground shrink-0">
+                {timeAgo(r.createdAt)}
+              </span>
+              <Button
+                size="icon" variant="ghost"
+                className="size-6 shrink-0 text-muted-foreground hover:text-destructive"
+                onClick={(e) => { e.stopPropagation(); softDeleteResult(r.id); }}
+              >
+                <Trash2 className="size-3" />
+              </Button>
+            </div>
+          ))
+        )}
+      </div>
+
+      {/* Debug prompt dialog */}
+      <JiraDebugPromptDialog result={debugTarget} onClose={() => setDebugTarget(null)} />
+
+      {/* Ticket detail dialog */}
+      {selectedIssue && (
+        <JiraTicketDetail
+          open={ticketOpen}
+          onOpenChange={setTicketOpen}
+          configId={selectedIssue.configId}
+          issueKey={selectedIssue.issueKey}
+          baseUrl={selectedConfig?.baseUrl}
+        />
+      )}
+    </div>
+  );
+}
+
+function timeAgo(dateStr: string): string {
+  const diff = Date.now() - new Date(dateStr).getTime();
+  const mins = Math.floor(diff / 60000);
+  if (mins < 1) return "now";
+  if (mins < 60) return `${mins}m`;
+  const hrs = Math.floor(mins / 60);
+  if (hrs < 24) return `${hrs}h`;
+  return `${Math.floor(hrs / 24)}d`;
+}

package/src/web/components/jira/jira-settings-section.tsx

@@ -0,0 +1,58 @@
+import { useEffect } from "react";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import { useJiraStore } from "@/stores/jira-store";
+import { JiraConfigForm } from "./jira-config-form";
+import { JiraWatcherList } from "./jira-watcher-list";
+import { JiraResultsPanel } from "./jira-results-panel";
+
+export function JiraSettingsSection() {
+  const {
+    configs, selectedProjectId, setSelectedProjectId,
+    loadConfigs, loadWatchers, projectsWithIds, loadProjectsWithIds,
+  } = useJiraStore();
+
+  useEffect(() => { loadConfigs(); loadProjectsWithIds(); }, []);
+
+  const selectedConfig = configs.find((c) => c.projectId === selectedProjectId);
+
+  useEffect(() => {
+    if (selectedConfig) loadWatchers(selectedConfig.id);
+  }, [selectedConfig?.id]);
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <label className="text-xs text-muted-foreground">Project</label>
+        <Select
+          value={selectedProjectId ? String(selectedProjectId) : ""}
+          onValueChange={(v) => setSelectedProjectId(Number(v))}
+        >
+          <SelectTrigger className="h-9"><SelectValue placeholder="Select project..." /></SelectTrigger>
+          <SelectContent>
+            {projectsWithIds.map((p) => (
+              <SelectItem key={p.id} value={String(p.id)}>{p.name}</SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {selectedProjectId && (
+        <>
+          <JiraConfigForm
+            projectId={selectedProjectId}
+            existing={selectedConfig ? { baseUrl: selectedConfig.baseUrl, email: selectedConfig.email, hasToken: selectedConfig.hasToken } : null}
+          />
+          {selectedConfig && (
+            <>
+              <Separator />
+              <JiraWatcherList configId={selectedConfig.id} />
+              <Separator />
+              <JiraResultsPanel />
+            </>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

package/src/web/components/jira/jira-status-badge.tsx

@@ -0,0 +1,18 @@
+import { Badge } from "@/components/ui/badge";
+import type { JiraResultStatus } from "../../../../src/types/jira";
+
+const STATUS_STYLES: Record<JiraResultStatus, string> = {
+  pending: "bg-yellow-500/15 text-yellow-600 border-yellow-500/30",
+  queued: "bg-orange-500/15 text-orange-600 border-orange-500/30",
+  running: "bg-blue-500/15 text-blue-600 border-blue-500/30",
+  done: "bg-green-500/15 text-green-600 border-green-500/30",
+  failed: "bg-red-500/15 text-red-600 border-red-500/30",
+};
+
+export function JiraStatusBadge({ status }: { status: JiraResultStatus }) {
+  return (
+    <Badge variant="outline" className={`text-[10px] px-1.5 py-0 ${STATUS_STYLES[status] ?? ""}`}>
+      {status}
+    </Badge>
+  );
+}