@hienlh/ppm 0.10.5 → 0.11.0

package/src/web/components/jira/jira-ticket-card.tsx

@@ -0,0 +1,144 @@
+import { Play, RotateCcw, Square, ExternalLink, Trash2, Loader2, MoreHorizontal } from "lucide-react";
+import {
+  DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { cn } from "@/lib/utils";
+import type { JiraWatchResult, JiraResultStatus } from "../../../../src/types/jira";
+
+/** Status dot color */
+const DOT_COLORS: Record<JiraResultStatus, string> = {
+  pending: "bg-yellow-500",
+  queued: "bg-orange-500",
+  running: "bg-blue-500 animate-pulse",
+  done: "bg-green-500",
+  failed: "bg-red-500",
+};
+
+/** Relative time helper */
+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`;
+  const days = Math.floor(hrs / 24);
+  return `${days}d`;
+}
+
+interface Props {
+  result: JiraWatchResult;
+  onDebug: (r: JiraWatchResult) => void;
+  onResume: (r: JiraWatchResult) => void;
+  onCancel: (r: JiraWatchResult) => void;
+  onOpenSession: (r: JiraWatchResult) => void;
+  onDelete: (id: number) => void;
+  onClick: (r: JiraWatchResult) => void;
+}
+
+export function JiraTicketCard({ result, onDebug, onResume, onCancel, onOpenSession, onDelete, onClick }: Props) {
+  const r = result;
+  const isUnread = r.status === "done" && !r.readAt;
+  const hasSession = !!r.sessionId;
+  const canResume = r.status === "failed" && hasSession;
+  const canDebug = r.status === "pending" || (r.status === "failed" && !hasSession);
+  const canCancel = r.status === "queued" || r.status === "running";
+  const status = r.status as JiraResultStatus;
+
+  return (
+    <div
+      className={cn(
+        "group rounded bg-card shadow-sm hover:shadow-md hover:bg-accent/50 hover:-translate-y-px cursor-pointer transition-all duration-150",
+        "px-2.5 py-2 space-y-1",
+        isUnread && "ring-1 ring-primary/30",
+      )}
+      onClick={() => onClick(r)}
+    >
+      {/* Line 1: issue key + summary + time */}
+      <div className="flex items-center gap-1.5 min-w-0">
+        <span className="text-xs font-mono font-semibold text-foreground shrink-0">{r.issueKey}</span>
+        {isUnread && <span className="size-1.5 rounded-full bg-primary shrink-0" />}
+        <span className="text-xs text-muted-foreground truncate flex-1 min-w-0">
+          {r.issueSummary || "No summary"}
+        </span>
+        <span className="text-[10px] text-muted-foreground/60 tabular-nums shrink-0">
+          {timeAgo(r.createdAt)}
+        </span>
+      </div>
+
+      {/* Line 2: status dot + label + action buttons */}
+      <div className="flex items-center justify-between min-w-0">
+        <span className="inline-flex items-center gap-1.5 text-[11px] text-muted-foreground">
+          <span className={cn("size-1.5 rounded-full shrink-0", DOT_COLORS[status])} />
+          {status}
+        </span>
+
+        <div
+          className="flex items-center gap-0.5 shrink-0"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {canResume && (
+            <button
+              type="button"
+              className="flex items-center gap-1 h-6 px-1.5 rounded text-[10px] font-medium text-primary hover:bg-primary/10 active:scale-95 transition-colors"
+              onClick={() => onResume(r)}
+              title="Resume debug session"
+            >
+              <RotateCcw className="size-3" />
+              <span>Resume</span>
+            </button>
+          )}
+          {canDebug && (
+            <button
+              type="button"
+              className="flex items-center justify-center size-6 rounded text-muted-foreground hover:text-primary active:scale-95 transition-colors"
+              onClick={() => onDebug(r)}
+              title="Debug"
+            >
+              <Play className="size-3" />
+            </button>
+          )}
+          {canCancel && (
+            <button
+              type="button"
+              className="flex items-center justify-center size-6 rounded text-muted-foreground hover:text-destructive active:scale-95 transition-colors"
+              onClick={() => onCancel(r)}
+              title="Stop debug"
+            >
+              <Square className="size-3" />
+            </button>
+          )}
+          {r.status === "running" && (
+            <Loader2 className="size-3 animate-spin text-primary" />
+          )}
+          {hasSession && (
+            <button
+              type="button"
+              className="flex items-center gap-1 h-6 px-1.5 rounded text-[10px] font-medium text-primary hover:bg-primary/10 active:scale-95 transition-colors"
+              onClick={() => onOpenSession(r)}
+              title="Open session"
+            >
+              <ExternalLink className="size-3" />
+              <span>Open</span>
+            </button>
+          )}
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <button
+                type="button"
+                className="flex items-center justify-center size-6 rounded text-muted-foreground hover:text-foreground active:scale-95 transition-colors"
+              >
+                <MoreHorizontal className="size-3" />
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem className="text-destructive" onClick={() => onDelete(r.id)}>
+                <Trash2 className="size-3.5 mr-2" /> Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/web/components/jira/jira-ticket-detail.tsx

@@ -0,0 +1,153 @@
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { api } from "@/lib/api-client";
+import { ExternalLink, Loader2 } from "lucide-react";
+import type { JiraIssue, JiraTransition } from "../../../../src/types/jira";
+
+interface Props {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  configId: number;
+  issueKey: string;
+  baseUrl?: string;
+}
+
+export function JiraTicketDetail({ open, onOpenChange, configId, issueKey, baseUrl }: Props) {
+  const [issue, setIssue] = useState<JiraIssue | null>(null);
+  const [transitions, setTransitions] = useState<JiraTransition[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [editSummary, setEditSummary] = useState("");
+  const [editing, setEditing] = useState(false);
+
+  useEffect(() => {
+    if (!open || !issueKey) return;
+    setLoading(true);
+    Promise.all([
+      api.get<JiraIssue>(`/api/jira/ticket/${configId}/${issueKey}`),
+      api.get<JiraTransition[]>(`/api/jira/ticket/${configId}/${issueKey}/transitions`),
+    ]).then(([iss, trans]) => {
+      setIssue(iss);
+      setEditSummary(iss.fields.summary);
+      setTransitions(trans);
+    }).catch(() => {}).finally(() => setLoading(false));
+  }, [open, issueKey, configId]);
+
+  const handleSaveSummary = async () => {
+    if (!issue || editSummary === issue.fields.summary) { setEditing(false); return; }
+    setSaving(true);
+    try {
+      await api.put(`/api/jira/ticket/${configId}/${issueKey}`, { fields: { summary: editSummary } });
+      setIssue({ ...issue, fields: { ...issue.fields, summary: editSummary } });
+      setEditing(false);
+    } catch {}
+    setSaving(false);
+  };
+
+  const handleTransition = async (transitionId: string) => {
+    setSaving(true);
+    try {
+      await api.post(`/api/jira/ticket/${configId}/${issueKey}/transition`, { transitionId });
+      // Refresh issue
+      const iss = await api.get<JiraIssue>(`/api/jira/ticket/${configId}/${issueKey}`);
+      setIssue(iss);
+    } catch {}
+    setSaving(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-lg max-h-[80vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            {issueKey}
+            {baseUrl && (
+              <a href={`${baseUrl}/browse/${issueKey}`} target="_blank" rel="noopener noreferrer"
+                className="text-muted-foreground hover:text-foreground">
+                <ExternalLink className="size-4" />
+              </a>
+            )}
+          </DialogTitle>
+        </DialogHeader>
+
+        {loading ? (
+          <div className="flex justify-center py-8"><Loader2 className="size-6 animate-spin" /></div>
+        ) : issue ? (
+          <div className="space-y-3 text-sm">
+            {/* Summary */}
+            <div>
+              <label className="text-xs text-muted-foreground">Summary</label>
+              {editing ? (
+                <div className="flex gap-1">
+                  <Input value={editSummary} onChange={(e) => setEditSummary(e.target.value)} className="h-8 text-sm" />
+                  <Button size="sm" onClick={handleSaveSummary} disabled={saving} className="h-8">
+                    {saving ? <Loader2 className="size-3 animate-spin" /> : "Save"}
+                  </Button>
+                </div>
+              ) : (
+                <p className="cursor-pointer hover:bg-muted/50 rounded px-1 py-0.5" onClick={() => setEditing(true)}>
+                  {issue.fields.summary}
+                </p>
+              )}
+            </div>
+
+            {/* Status + transition */}
+            <div className="flex gap-4">
+              <div className="flex-1">
+                <label className="text-xs text-muted-foreground">Status</label>
+                <p className="font-medium">{issue.fields.status.name}</p>
+              </div>
+              {transitions.length > 0 && (
+                <div className="flex-1">
+                  <label className="text-xs text-muted-foreground">Transition to</label>
+                  <Select onValueChange={handleTransition} disabled={saving}>
+                    <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="Change status..." /></SelectTrigger>
+                    <SelectContent>
+                      {transitions.map((t) => (
+                        <SelectItem key={t.id} value={t.id}>{t.name} → {t.to.name}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              )}
+            </div>
+
+            {/* Priority & Assignee */}
+            <div className="flex gap-4">
+              <div className="flex-1">
+                <label className="text-xs text-muted-foreground">Priority</label>
+                <p>{issue.fields.priority?.name ?? "None"}</p>
+              </div>
+              <div className="flex-1">
+                <label className="text-xs text-muted-foreground">Assignee</label>
+                <p>{issue.fields.assignee?.displayName ?? "Unassigned"}</p>
+              </div>
+            </div>
+
+            {/* Description */}
+            {issue.fields.description && (
+              <div>
+                <label className="text-xs text-muted-foreground">Description</label>
+                <p className="text-xs text-muted-foreground whitespace-pre-wrap bg-muted/30 rounded p-2 max-h-40 overflow-y-auto">
+                  {typeof issue.fields.description === "string"
+                    ? issue.fields.description
+                    : JSON.stringify(issue.fields.description, null, 2)}
+                </p>
+              </div>
+            )}
+
+            {/* Timestamps */}
+            <div className="text-xs text-muted-foreground">
+              Updated: {new Date(issue.fields.updated).toLocaleString()}
+            </div>
+          </div>
+        ) : (
+          <p className="text-sm text-muted-foreground text-center py-4">Failed to load issue.</p>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/web/components/jira/jira-watcher-form.tsx

@@ -0,0 +1,154 @@
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { useJiraStore } from "@/stores/jira-store";
+import { JiraFilterBuilder } from "./jira-filter-builder";
+import { Loader2, Search } from "lucide-react";
+import type { JiraWatcher, JiraWatcherMode, JiraIssue } from "../../../../src/types/jira";
+
+const INTERVALS = [
+  { label: "30s", value: 30000 }, { label: "1m", value: 60000 },
+  { label: "2m", value: 120000 }, { label: "5m", value: 300000 },
+  { label: "10m", value: 600000 }, { label: "30m", value: 1800000 },
+  { label: "1h", value: 3600000 },
+];
+
+interface Props {
+  configId: number;
+  existing?: JiraWatcher;
+  onDone: () => void;
+}
+
+export function JiraWatcherForm({ configId, existing, onDone }: Props) {
+  const { createWatcher, updateWatcher, testJql } = useJiraStore();
+  const [name, setName] = useState(existing?.name ?? "");
+  const [jql, setJql] = useState(existing?.jql ?? "");
+  const [intervalMs, setIntervalMs] = useState(existing?.intervalMs ?? 120000);
+  const [mode, setMode] = useState<JiraWatcherMode>(existing?.mode ?? "debug");
+  const [prompt, setPrompt] = useState(existing?.promptTemplate ?? "");
+  const [saving, setSaving] = useState(false);
+
+  // Test JQL state
+  const [testing, setTesting] = useState(false);
+  const [testResults, setTestResults] = useState<JiraIssue[] | null>(null);
+  const [testTotal, setTestTotal] = useState(0);
+  const [testError, setTestError] = useState<string | null>(null);
+
+  const isEdit = !!existing;
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!name || !jql) return;
+    setSaving(true);
+    try {
+      if (isEdit) {
+        await updateWatcher(existing.id, {
+          name, jql, intervalMs, mode,
+          promptTemplate: prompt || null,
+        });
+      } else {
+        await createWatcher({ configId, name, jql, intervalMs, mode, promptTemplate: prompt || undefined });
+      }
+      onDone();
+    } catch {}
+    setSaving(false);
+  };
+
+  const handleTestJql = async () => {
+    if (!jql) return;
+    setTesting(true);
+    setTestError(null);
+    setTestResults(null);
+    try {
+      const res = await testJql(configId, jql);
+      setTestResults(res.issues);
+      setTestTotal(res.total);
+    } catch (e: any) {
+      setTestError(e.message ?? "Test failed");
+    }
+    setTesting(false);
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-3 min-w-0">
+      <div>
+        <label className="text-xs text-muted-foreground">Name</label>
+        <Input value={name} onChange={(e) => setName(e.target.value)} placeholder="Bug watcher" className="h-9" />
+      </div>
+      <JiraFilterBuilder value={jql} onChange={setJql} configId={configId} />
+
+      {/* Test JQL button */}
+      <Button
+        type="button" size="sm" variant="outline"
+        className="w-full min-h-[44px]"
+        disabled={!jql || testing}
+        onClick={handleTestJql}
+      >
+        {testing ? <Loader2 className="size-4 animate-spin mr-1.5" /> : <Search className="size-4 mr-1.5" />}
+        Test Filter
+      </Button>
+
+      {/* Test results preview */}
+      {testError && (
+        <p className="text-xs text-destructive bg-destructive/10 rounded-md px-3 py-2">{testError}</p>
+      )}
+      {testResults && (
+        <div className="border rounded-md max-h-48 overflow-hidden">
+          <div className="px-3 py-1.5 border-b bg-muted/50 text-xs text-muted-foreground font-medium">
+            {testTotal} ticket{testTotal !== 1 ? "s" : ""} found
+            {testTotal > testResults.length && ` (showing ${testResults.length})`}
+          </div>
+          <div className="overflow-y-auto max-h-[calc(12rem-30px)]">
+            {testResults.length === 0 ? (
+              <p className="text-xs text-muted-foreground text-center py-4">No tickets match this filter.</p>
+            ) : (
+              testResults.map((issue) => (
+                <div key={issue.key} className="flex items-center gap-2 px-3 py-1.5 border-b last:border-b-0 text-xs min-w-0">
+                  <span className="font-mono font-medium shrink-0">{issue.key}</span>
+                  <span className="truncate text-muted-foreground flex-1 min-w-0">{issue.fields.summary}</span>
+                  <span className="shrink-0 text-[10px] text-muted-foreground px-1.5 py-0.5 bg-muted rounded whitespace-nowrap">
+                    {issue.fields.status.name}
+                  </span>
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+      )}
+
+      <div className="flex gap-2">
+        <div className="flex-1">
+          <label className="text-xs text-muted-foreground">Interval</label>
+          <Select value={String(intervalMs)} onValueChange={(v) => setIntervalMs(Number(v))}>
+            <SelectTrigger className="h-9"><SelectValue /></SelectTrigger>
+            <SelectContent>
+              {INTERVALS.map((i) => <SelectItem key={i.value} value={String(i.value)}>{i.label}</SelectItem>)}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="flex-1">
+          <label className="text-xs text-muted-foreground">Mode</label>
+          <Select value={mode} onValueChange={(v) => setMode(v as JiraWatcherMode)}>
+            <SelectTrigger className="h-9"><SelectValue /></SelectTrigger>
+            <SelectContent>
+              <SelectItem value="debug">Debug + Notify</SelectItem>
+              <SelectItem value="notify">Notify only</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+      <div>
+        <label className="text-xs text-muted-foreground">Prompt template (optional)</label>
+        <textarea
+          value={prompt} onChange={(e) => setPrompt(e.target.value)}
+          className="w-full h-16 rounded-md border border-input bg-background px-3 py-2 text-xs font-mono resize-none focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          placeholder="Debug Jira issue {issue_key}: {summary}"
+        />
+      </div>
+      <Button type="submit" size="sm" disabled={saving || !name || !jql} className="min-h-[44px] w-full">
+        {saving ? <Loader2 className="size-4 animate-spin" /> : isEdit ? "Save Changes" : "Create Watcher"}
+      </Button>
+    </form>
+  );
+}

package/src/web/components/jira/jira-watcher-list.tsx

@@ -0,0 +1,98 @@
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Switch } from "@/components/ui/switch";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import { useJiraStore } from "@/stores/jira-store";
+import { JiraWatcherForm } from "./jira-watcher-form";
+import { Plus, Trash2, Play, Loader2, Pencil } from "lucide-react";
+import { toast } from "sonner";
+import type { JiraWatcher } from "../../../../src/types/jira";
+
+interface Props { configId: number }
+
+export function JiraWatcherList({ configId }: Props) {
+  const { watchers, deleteWatcher, toggleWatcher, pullWatcher } = useJiraStore();
+  const [addOpen, setAddOpen] = useState(false);
+  const [editingWatcher, setEditingWatcher] = useState<JiraWatcher | null>(null);
+  const [pulling, setPulling] = useState<number | null>(null);
+
+  const handlePull = async (id: number) => {
+    setPulling(id);
+    try {
+      const res = await pullWatcher(id);
+      toast.success(`Pulled ${res.newIssues} new issue${res.newIssues !== 1 ? "s" : ""}`);
+    } catch (e: any) {
+      toast.error(e.message ?? "Pull failed");
+    }
+    setPulling(null);
+  };
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between">
+        <h4 className="text-sm font-medium">Watchers</h4>
+        <Dialog open={addOpen} onOpenChange={setAddOpen}>
+          <DialogTrigger asChild>
+            <Button size="sm" variant="outline" className="min-h-[44px]">
+              <Plus className="size-4 mr-1" /> Add
+            </Button>
+          </DialogTrigger>
+          <DialogContent className="max-w-md overflow-hidden">
+            <DialogHeader><DialogTitle>New Watcher</DialogTitle></DialogHeader>
+            <JiraWatcherForm configId={configId} onDone={() => setAddOpen(false)} />
+          </DialogContent>
+        </Dialog>
+      </div>
+
+      {watchers.length === 0 && (
+        <p className="text-sm text-muted-foreground py-4 text-center">No watchers yet.</p>
+      )}
+
+      {watchers.map((w) => (
+        <div key={w.id} className="flex items-center gap-2 p-2 rounded-md border text-sm">
+          <Switch
+            checked={w.enabled}
+            onCheckedChange={(val) => toggleWatcher(w.id, val)}
+            className="shrink-0"
+          />
+          <div className="flex-1 min-w-0">
+            <div className="font-medium truncate">{w.name}</div>
+            <div className="text-xs text-muted-foreground truncate font-mono">{w.jql}</div>
+          </div>
+          <span className="text-xs text-muted-foreground shrink-0">
+            {w.mode === "notify" ? "notify" : "debug"} · {formatInterval(w.intervalMs)}
+          </span>
+          <Button size="icon" variant="ghost" className="size-8" onClick={() => setEditingWatcher(w)}>
+            <Pencil className="size-3.5" />
+          </Button>
+          <Button size="icon" variant="ghost" className="size-8" onClick={() => handlePull(w.id)} disabled={pulling === w.id}>
+            {pulling === w.id ? <Loader2 className="size-3.5 animate-spin" /> : <Play className="size-3.5" />}
+          </Button>
+          <Button size="icon" variant="ghost" className="size-8 text-destructive" onClick={() => deleteWatcher(w.id)}>
+            <Trash2 className="size-3.5" />
+          </Button>
+        </div>
+      ))}
+
+      {/* Edit dialog */}
+      <Dialog open={!!editingWatcher} onOpenChange={(open) => { if (!open) setEditingWatcher(null); }}>
+        <DialogContent className="max-w-md overflow-hidden">
+          <DialogHeader><DialogTitle>Edit Watcher</DialogTitle></DialogHeader>
+          {editingWatcher && (
+            <JiraWatcherForm
+              configId={configId}
+              existing={editingWatcher}
+              onDone={() => setEditingWatcher(null)}
+            />
+          )}
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+function formatInterval(ms: number): string {
+  if (ms >= 3600000) return `${ms / 3600000}h`;
+  if (ms >= 60000) return `${ms / 60000}m`;
+  return `${ms / 1000}s`;
+}

package/src/web/components/layout/mobile-drawer.tsx

@@ -1,6 +1,6 @@
-import { useState, useCallback, useEffect } from "react";
+import { useState, useCallback, useEffect, useMemo } from "react";
 import {
-  X, Bug, FolderOpen, GitBranch, Settings, Database,
+  X, Bug as BugIcon, FolderOpen, GitBranch, Settings, Database,
 } from "lucide-react";
 import { useShallow } from "zustand/react/shallow";
 import { useProjectStore } from "@/stores/project-store";
@@ -9,12 +9,13 @@ import { FileTree } from "@/components/explorer/file-tree";
 import { GitStatusPanel } from "@/components/git/git-status-panel";
 import { SettingsTab } from "@/components/settings/settings-tab";
 import { DatabaseSidebar } from "@/components/database/database-sidebar";
+import { JiraPanel } from "@/components/jira/jira-panel";
 import { openBugReportPopup } from "@/lib/report-bug";
 import { cn } from "@/lib/utils";
 
-type DrawerTab = "explorer" | "git" | "settings" | "database";
+type DrawerTab = "explorer" | "git" | "settings" | "database" | "jira";
 
-const TABS: { id: DrawerTab; label: string; icon: React.ElementType }[] = [
+const BASE_TABS: { id: DrawerTab; label: string; icon: React.ElementType }[] = [
   { id: "explorer", label: "Explorer", icon: FolderOpen },
   { id: "git", label: "Git", icon: GitBranch },
   { id: "database", label: "Database", icon: Database },
@@ -31,8 +32,17 @@ interface MobileDrawerProps {
 export function MobileDrawer({ isOpen, onClose, initialTab }: MobileDrawerProps) {
   const { activeProject } = useProjectStore(useShallow((s) => ({ activeProject: s.activeProject })));
   const version = useSettingsStore((s) => s.version);
+  const jiraEnabled = useSettingsStore((s) => s.jiraEnabled);
   const [activeTab, setActiveTab] = useState<DrawerTab>(initialTab ?? "explorer");
 
+  const TABS = useMemo(() => {
+    if (!jiraEnabled) return BASE_TABS;
+    const tabs = [...BASE_TABS];
+    const settingsIdx = tabs.findIndex((t) => t.id === "settings");
+    tabs.splice(settingsIdx, 0, { id: "jira", label: "Jira", icon: BugIcon });
+    return tabs;
+  }, [jiraEnabled]);
+
   // Sync when initialTab changes (e.g. settings button opens drawer)
   useEffect(() => {
     if (initialTab) setActiveTab(initialTab);
@@ -92,6 +102,9 @@ export function MobileDrawer({ isOpen, onClose, initialTab }: MobileDrawerProps)
           {activeTab === "database" && (
             <DatabaseSidebar />
           )}
+          {activeTab === "jira" && (
+            <JiraPanel />
+          )}
           {activeTab === "settings" && (
             <SettingsTab />
           )}
@@ -126,7 +139,7 @@ export function MobileDrawer({ isOpen, onClose, initialTab }: MobileDrawerProps)
               onClick={handleReportBug}
               className="flex items-center gap-1 text-[10px] text-text-subtle hover:text-text-secondary transition-colors"
             >
-              <Bug className="size-3" />
+              <BugIcon className="size-3" />
               <span>Report Bug</span>
             </button>
           </div>