@hienlh/ppm 0.10.4 → 0.11.0

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>

package/src/web/components/layout/sidebar.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useRef, useMemo, memo } from "react";
-import { PanelLeftClose, PanelLeftOpen, FolderOpen, GitBranch, Settings, Database, Search, Puzzle } from "lucide-react";
+import { PanelLeftClose, PanelLeftOpen, FolderOpen, GitBranch, Settings, Database, Search, Puzzle, Bug } from "lucide-react";
 import { useShallow } from "zustand/react/shallow";
 import { useProjectStore } from "@/stores/project-store";
 import { useSettingsStore, type SidebarActiveTab } from "@/stores/settings-store";
@@ -10,7 +10,9 @@ import { SettingsTab } from "@/components/settings/settings-tab";
 import { DatabaseSidebar } from "@/components/database/database-sidebar";
 import { SearchPanel } from "@/components/explorer/search-panel";
 import { ExtensionTreeView } from "@/components/extensions/extension-tree-view";
+import { JiraPanel } from "@/components/jira/jira-panel";
 import { useGitStatusStore, useGitChangesPoller } from "@/stores/git-status-store";
+import { useJiraStore } from "@/stores/jira-store";
 import { cn } from "@/lib/utils";
 
 const BUILTIN_TABS: { id: SidebarActiveTab; label: string; icon: React.ElementType }[] = [
@@ -67,15 +69,22 @@ export const Sidebar = memo(function Sidebar() {
   const setSidebarWidth = useSettingsStore((s) => s.setSidebarWidth);
   const sidebarActiveTab = useSettingsStore((s) => s.sidebarActiveTab);
   const setSidebarActiveTab = useSettingsStore((s) => s.setSidebarActiveTab);
+  const jiraEnabled = useSettingsStore((s) => s.jiraEnabled);
   const contributions = useExtensionStore((s) => s.contributions);
   const gitChangesCount = useGitStatusStore((s) =>
     activeProject?.name ? (s.counts.get(activeProject.name) ?? 0) : 0,
   );
+  const jiraUnreadCount = useJiraStore((s) => s.unreadCount);
   useGitChangesPoller(activeProject?.name, sidebarActiveTab === "git");
 
-  // Build tabs list: built-in + extension-contributed sidebar views
+  // Build tabs list: built-in + jira (conditional) + extension-contributed sidebar views
   const TABS = useMemo(() => {
     const tabs: { id: SidebarActiveTab; label: string; icon: React.ElementType }[] = [...BUILTIN_TABS];
+    if (jiraEnabled) {
+      // Insert Jira before Settings
+      const settingsIdx = tabs.findIndex((t) => t.id === "settings");
+      tabs.splice(settingsIdx, 0, { id: "jira", label: "Jira", icon: Bug });
+    }
     if (contributions?.views) {
       const sidebarViews = contributions.views["sidebar"] ?? contributions.views["explorer"] ?? [];
       for (const view of sidebarViews) {
@@ -83,7 +92,7 @@ export const Sidebar = memo(function Sidebar() {
       }
     }
     return tabs;
-  }, [contributions]);
+  }, [contributions, jiraEnabled]);
 
   if (sidebarCollapsed) {
     return (
@@ -126,6 +135,11 @@ export const Sidebar = memo(function Sidebar() {
                   {gitChangesCount > 99 ? "99+" : gitChangesCount}
                 </span>
               )}
+              {tab.id === "jira" && jiraUnreadCount > 0 && (
+                <span className="absolute top-1 right-1 min-w-[16px] h-4 px-1 flex items-center justify-center rounded-full bg-primary text-primary-foreground text-[10px] font-medium leading-none">
+                  {jiraUnreadCount > 99 ? "99+" : jiraUnreadCount}
+                </span>
+              )}
             </button>
           );
         })}
@@ -158,6 +172,9 @@ export const Sidebar = memo(function Sidebar() {
         {sidebarActiveTab === "database" && (
           <DatabaseSidebar />
         )}
+        {sidebarActiveTab === "jira" && (
+          <JiraPanel />
+        )}
         {sidebarActiveTab === "settings" && (
           <SettingsTab />
         )}

package/src/web/components/settings/settings-tab.tsx

@@ -1,10 +1,11 @@
 import { useState, useCallback, useRef } from "react";
 import {
   Moon, Sun, Monitor, Bell, BellOff, Check, ChevronRight, ArrowLeft,
-  Bot, BellRing, Keyboard, Globe, Plug, Puzzle,
+  Bot, BellRing, Keyboard, Globe, Plug, Puzzle, Bug,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Separator } from "@/components/ui/separator";
 import { useShallow } from "zustand/react/shallow";
@@ -29,12 +30,13 @@ const pushSupported = "PushManager" in window && "serviceWorker" in navigator;
 const isIosNonPwa = /iPhone|iPad/.test(navigator.userAgent) &&
   !window.matchMedia("(display-mode: standalone)").matches;
 
-type SettingsCategory = "ai" | "notifications" | "clawbot" | "proxy" | "shortcuts" | "mcp" | "extensions";
+type SettingsCategory = "ai" | "notifications" | "clawbot" | "jira" | "proxy" | "shortcuts" | "mcp" | "extensions";
 
 const CATEGORIES: { value: SettingsCategory; label: string; subtitle: string; icon: React.ElementType }[] = [
   { value: "ai", label: "AI Provider", subtitle: "Model, execution mode, limits", icon: Bot },
   { value: "notifications", label: "Notifications", subtitle: "Push & Telegram alerts", icon: BellRing },
   { value: "clawbot", label: "PPMBot", subtitle: "Telegram AI bot", icon: Bot },
+  // Jira is now a toggle, not a full settings category
   { value: "proxy", label: "API Proxy", subtitle: "Expose accounts as Anthropic API", icon: Globe },
   { value: "shortcuts", label: "Keyboard Shortcuts", subtitle: "Customize key bindings", icon: Keyboard },
   { value: "mcp", label: "MCP Servers", subtitle: "Model Context Protocol tools", icon: Plug },
@@ -42,7 +44,7 @@ const CATEGORIES: { value: SettingsCategory; label: string; subtitle: string; ic
 ];
 
 export function SettingsTab() {
-  const { theme, setTheme, deviceName, setDeviceName, version } = useSettingsStore(useShallow((s) => ({ theme: s.theme, setTheme: s.setTheme, deviceName: s.deviceName, setDeviceName: s.setDeviceName, version: s.version })));
+  const { theme, setTheme, deviceName, setDeviceName, version, jiraEnabled, setJiraEnabled } = useSettingsStore(useShallow((s) => ({ theme: s.theme, setTheme: s.setTheme, deviceName: s.deviceName, setDeviceName: s.setDeviceName, version: s.version, jiraEnabled: s.jiraEnabled, setJiraEnabled: s.setJiraEnabled })));
   const { permission, isSubscribed, loading, error: pushError, subscribe, unsubscribe } = usePushNotification();
   const [activeCategory, setActiveCategory] = useState<SettingsCategory | null>(null);
   const [nameInput, setNameInput] = useState(deviceName ?? "");
@@ -90,6 +92,7 @@ export function SettingsTab() {
             {activeCategory === "ai" && <AISettingsSection compact />}
             {activeCategory === "notifications" && <NotificationsContent isSubscribed={isSubscribed} loading={loading} permission={permission} pushError={pushError} subscribe={subscribe} unsubscribe={unsubscribe} />}
             {activeCategory === "clawbot" && <PPMBotSettingsSection />}
+            {/* Jira is now a sidebar tab with a toggle below */}
             {activeCategory === "proxy" && <ProxySettingsSection />}
             {activeCategory === "shortcuts" && <KeyboardShortcutsSection />}
             {activeCategory === "mcp" && <McpSettingsSection />}
@@ -163,6 +166,20 @@ export function SettingsTab() {
             </div>
           </section>
 
+          {/* Jira toggle */}
+          <section className="space-y-1">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <Bug className="size-4 text-muted-foreground" />
+                <div>
+                  <p className="text-xs font-medium">Jira Watcher</p>
+                  <p className="text-[11px] text-muted-foreground">Auto-debug Jira tickets</p>
+                </div>
+              </div>
+              <Switch checked={jiraEnabled} onCheckedChange={setJiraEnabled} />
+            </div>
+          </section>
+
           <Separator />
 
           {/* Category navigation list */}

package/src/web/components/shared/markdown-code-block.tsx

@@ -41,8 +41,10 @@ export function MdPre({ children, node, ...rest }: any) {
   const isBash = /^(bash|sh|shell|zsh)$/.test(lang || "") || (!lang && text.startsWith("$"));
 
   return (
-    <pre {...rest} className={`relative group ${rest.className || ""}`}>
-      {children}
+    <div className="relative group">
+      <pre {...rest}>
+        {children}
+      </pre>
       {codeActions && (
         <div className="code-actions absolute top-1 right-1 flex gap-1">
           <ActionBtn title="Copy" icon={<CopyIcon />} activeIcon={<CheckIcon />} onClick={() => navigator.clipboard.writeText(text)} />
@@ -58,7 +60,7 @@ export function MdPre({ children, node, ...rest }: any) {
           )}
         </div>
       )}
-    </pre>
+    </div>
   );
 }