@hienlh/ppm 0.10.5 → 0.11.1

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>
   );
 }
 

package/src/web/components/ui/file-browser-picker.tsx

@@ -7,7 +7,7 @@ import { ScrollArea } from "@/components/ui/scroll-area";
 import { Input } from "@/components/ui/input";
 import { api } from "@/lib/api-client";
 import {
-  Folder, File, Database, Home, Monitor, FileText,
+  Folder, File, Database, Home, Monitor, FileText, FolderPlus, Trash2,
   Download, ChevronRight, ArrowLeft, Search, Loader2, Clock, Eye, EyeOff,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
@@ -107,6 +107,10 @@ export function FileBrowserPicker({
   const [pathInput, setPathInput] = useState("");
   const [showHidden, setShowHidden] = useState(false);
   const [recentPaths, setRecentPaths] = useState<string[]>([]);
+  const [newFolderName, setNewFolderName] = useState<string | null>(null);
+  const [creatingFolder, setCreatingFolder] = useState(false);
+  const [newFolderError, setNewFolderError] = useState<string | null>(null);
+  const newFolderInputRef = useRef<HTMLInputElement>(null);
   const listRef = useRef<HTMLDivElement>(null);
   const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
 
@@ -185,6 +189,40 @@ export function FileBrowserPicker({
     onSelect(selected);
   };
 
+  const handleCreateFolder = async () => {
+    if (!newFolderName?.trim() || !current) return;
+    const folderPath = `${current}/${newFolderName.trim()}`;
+    setCreatingFolder(true);
+    setNewFolderError(null);
+    try {
+      await api.post("/api/fs/mkdir", { path: folderPath });
+      setNewFolderName(null);
+      setNewFolderError(null);
+      await fetchDir(current, showHidden);
+      setSelected(folderPath);
+    } catch (e) {
+      setNewFolderError((e as Error).message || "Failed to create folder");
+    } finally {
+      setCreatingFolder(false);
+    }
+  };
+
+  const handleDeleteSelected = async () => {
+    if (!selected) return;
+    const entry = entries.find((e) => e.path === selected);
+    if (!entry || entry.type !== "directory") return;
+    if (!window.confirm(`Delete folder "${entry.name}"? This cannot be undone.`)) return;
+    try {
+      await api.del("/api/fs/rmdir", { path: selected });
+      setSelected(null);
+      await fetchDir(current, showHidden);
+    } catch (e) {
+      setError((e as Error).message || "Failed to delete folder");
+    }
+  };
+
+  const selectedIsFolder = selected ? entries.some((e) => e.path === selected && e.type === "directory") : false;
+
   // Filter entries by search + accept
   const visible = entries.filter((e) => {
     if (search && !e.name.toLowerCase().includes(search.toLowerCase())) return false;
@@ -283,6 +321,32 @@ export function FileBrowserPicker({
             </div>
           ) : (
             <div ref={listRef} className="py-1">
+              {newFolderName != null && (
+                <>
+                  <div className="flex items-center gap-2 px-3 py-1.5 bg-primary/5 border-b border-border">
+                    <FolderPlus className="size-4 text-primary shrink-0" />
+                    <Input
+                      ref={newFolderInputRef}
+                      value={newFolderName}
+                      onChange={(e) => setNewFolderName(e.target.value)}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter") handleCreateFolder();
+                        if (e.key === "Escape") setNewFolderName(null);
+                      }}
+                      placeholder="Folder name"
+                      className="h-6 text-xs flex-1"
+                      disabled={creatingFolder}
+                      autoFocus
+                    />
+                    {creatingFolder && <Loader2 className="size-3.5 animate-spin text-primary shrink-0" />}
+                  </div>
+                  {newFolderError && (
+                    <div className="px-3 py-1 text-[11px] text-destructive bg-destructive/5 border-b border-border">
+                      {newFolderError}
+                    </div>
+                  )}
+                </>
+              )}
               {visible.map((entry) => {
                 const selectable = isSelectable(entry);
                 return (
@@ -321,6 +385,29 @@ export function FileBrowserPicker({
 
       {/* Footer */}
       <div className="flex items-center gap-2 px-3 py-2 border-t border-border shrink-0">
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-7 shrink-0"
+          onClick={() => {
+            setNewFolderName("");
+            setNewFolderError(null);
+            setTimeout(() => newFolderInputRef.current?.focus(), 50);
+          }}
+          title="New Folder"
+        >
+          <FolderPlus className="size-3.5" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-7 shrink-0 text-destructive/70 hover:text-destructive disabled:opacity-30"
+          onClick={handleDeleteSelected}
+          disabled={!selectedIsFolder}
+          title="Delete selected folder"
+        >
+          <Trash2 className="size-3.5" />
+        </Button>
         <Button
           variant="ghost"
           size="icon"

package/src/web/hooks/use-chat.ts

@@ -396,6 +396,12 @@ export function useChat(sessionId: string | null, providerId = "claude", project
     // Ignore keepalive pings
     if ((data as any).type === "ping") return;
 
+    // Dispatch global Jira events so components can listen via window events
+    if (typeof (data as any).type === "string" && (data as any).type.startsWith("jira:")) {
+      window.dispatchEvent(new CustomEvent((data as any).type, { detail: data }));
+      return;
+    }
+
     // Handle title updates from SDK summary
     if ((data as any).type === "title_updated") {
       setSessionTitle((data as any).title ?? null);

package/src/web/lib/ws-client.ts

@@ -33,9 +33,16 @@ export class WsClient {
     this.cleanup();
 
     const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
-    const fullUrl = this.url.startsWith("ws")
-      ? this.url
-      : `${protocol}//${window.location.host}${this.url}`;
+    let fullUrl: string;
+    if (this.url.startsWith("ws")) {
+      fullUrl = this.url;
+    } else if (import.meta.env.DEV && this.url.startsWith("/ws/")) {
+      // In dev mode, connect directly to the backend server (port 8081) to
+      // bypass Vite's dev proxy which has unreliable WebSocket upgrade handling.
+      fullUrl = `ws://${window.location.hostname}:8081${this.url}`;
+    } else {
+      fullUrl = `${protocol}//${window.location.host}${this.url}`;
+    }
 
     this.ws = new WebSocket(fullUrl);
 

package/src/web/stores/jira-store.ts

@@ -0,0 +1,198 @@
+import { create } from "zustand";
+import { api } from "@/lib/api-client";
+import type {
+  JiraConfig, JiraWatcher, JiraWatchResult, JiraWatcherMode, JiraIssue,
+} from "../../../src/types/jira";
+
+export interface ProjectWithId {
+  id: number;
+  name: string;
+  path: string;
+  color?: string | null;
+}
+
+interface JiraStore {
+  // Projects (with DB ids)
+  projectsWithIds: ProjectWithId[];
+  loadProjectsWithIds: () => Promise<void>;
+
+  // Config
+  configs: JiraConfig[];
+  selectedProjectId: number | null;
+  loadConfigs: () => Promise<void>;
+  saveConfig: (projectId: number, data: { baseUrl: string; email: string; token: string }) => Promise<void>;
+  deleteConfig: (projectId: number) => Promise<void>;
+  testConnection: (projectId: number) => Promise<boolean>;
+  setSelectedProjectId: (id: number | null) => void;
+
+  // Watchers
+  watchers: JiraWatcher[];
+  loadWatchers: (configId: number) => Promise<void>;
+  createWatcher: (data: { configId: number; name: string; jql: string; promptTemplate?: string; intervalMs?: number; mode?: JiraWatcherMode }) => Promise<void>;
+  updateWatcher: (id: number, data: Partial<{ name: string; jql: string; promptTemplate: string | null; intervalMs: number; enabled: boolean; mode: JiraWatcherMode }>) => Promise<void>;
+  deleteWatcher: (id: number) => Promise<void>;
+  toggleWatcher: (id: number, enabled: boolean) => Promise<void>;
+  pullWatcher: (id: number) => Promise<{ newIssues: number }>;
+  testJql: (configId: number, jql: string) => Promise<{ issues: JiraIssue[]; total: number }>;
+
+  // Results
+  results: JiraWatchResult[];
+  loadResults: (watcherId?: number, status?: string, limit?: number, offset?: number) => Promise<void>;
+  softDeleteResult: (id: number) => Promise<void>;
+
+  // Debug + Unread
+  startDebug: (resultId: number, prompt?: string) => Promise<void>;
+  resumeDebug: (resultId: number) => Promise<void>;
+  cancelDebug: (resultId: number) => Promise<void>;
+  markRead: (resultId: number) => Promise<void>;
+  unreadCount: number;
+  loadUnreadCount: () => Promise<void>;
+}
+
+export const useJiraStore = create<JiraStore>((set, get) => ({
+  projectsWithIds: [],
+  configs: [],
+  selectedProjectId: null,
+  watchers: [],
+  results: [],
+  unreadCount: 0,
+
+  setSelectedProjectId: (id) => set({ selectedProjectId: id }),
+
+  loadProjectsWithIds: async () => {
+    const rows = await api.get<ProjectWithId[]>("/api/jira/config/projects");
+    set({ projectsWithIds: Array.isArray(rows) ? rows : [] });
+  },
+
+  loadConfigs: async () => {
+    const configs = await api.get<JiraConfig[]>("/api/jira/config");
+    set({ configs });
+  },
+
+  saveConfig: async (projectId, data) => {
+    await api.put(`/api/jira/config/${projectId}`, data);
+    await get().loadConfigs();
+  },
+
+  deleteConfig: async (projectId) => {
+    await api.del(`/api/jira/config/${projectId}`);
+    set((s) => ({ configs: s.configs.filter((c) => c.projectId !== projectId), watchers: [] }));
+  },
+
+  testConnection: async (projectId) => {
+    const res = await api.post<{ connected: boolean }>(`/api/jira/config/${projectId}/test`);
+    return res.connected;
+  },
+
+  loadWatchers: async (configId) => {
+    const watchers = await api.get<JiraWatcher[]>(`/api/jira/watchers?configId=${configId}`);
+    set({ watchers });
+  },
+
+  createWatcher: async (data) => {
+    await api.post("/api/jira/watchers", data);
+    if (data.configId) await get().loadWatchers(data.configId);
+  },
+
+  updateWatcher: async (id, data) => {
+    await api.put(`/api/jira/watchers/${id}`, data);
+    // Refresh — find configId from current watchers
+    const w = get().watchers.find((w) => w.id === id);
+    if (w) await get().loadWatchers(w.jiraConfigId);
+  },
+
+  deleteWatcher: async (id) => {
+    const w = get().watchers.find((w) => w.id === id);
+    await api.del(`/api/jira/watchers/${id}`);
+    if (w) await get().loadWatchers(w.jiraConfigId);
+  },
+
+  toggleWatcher: async (id, enabled) => {
+    // Optimistic update
+    set((s) => ({ watchers: s.watchers.map((w) => w.id === id ? { ...w, enabled } : w) }));
+    try {
+      await api.put(`/api/jira/watchers/${id}`, { enabled });
+    } catch {
+      set((s) => ({ watchers: s.watchers.map((w) => w.id === id ? { ...w, enabled: !enabled } : w) }));
+    }
+  },
+
+  pullWatcher: async (id) => {
+    const result = await api.post<{ newIssues: number }>(`/api/jira/watchers/${id}/pull`);
+    // Refresh results so the UI shows newly pulled tickets
+    await get().loadResults();
+    return result;
+  },
+
+  testJql: async (configId, jql) => {
+    return await api.post<{ issues: JiraIssue[]; total: number }>("/api/jira/watchers/test-jql", { configId, jql });
+  },
+
+  loadResults: async (watcherId, status, limit = 50, offset = 0) => {
+    const params = new URLSearchParams();
+    if (watcherId !== undefined) params.set("watcherId", String(watcherId));
+    if (status) params.set("status", status);
+    params.set("limit", String(limit));
+    params.set("offset", String(offset));
+    const results = await api.get<JiraWatchResult[]>(`/api/jira/results?${params}`);
+    set(offset > 0 ? (s) => ({ results: [...s.results, ...results] }) : { results });
+  },
+
+  softDeleteResult: async (id) => {
+    set((s) => ({ results: s.results.filter((r) => r.id !== id) }));
+    try { await api.del(`/api/jira/results/${id}`); } catch {}
+  },
+
+  startDebug: async (resultId, prompt) => {
+    // Optimistic update before API call
+    const prev = get().results.find((r) => r.id === resultId)?.status;
+    set((s) => ({
+      results: s.results.map((r) => r.id === resultId ? { ...r, status: "queued" as const } : r),
+    }));
+    try {
+      await api.post(`/api/jira/results/${resultId}/debug`, prompt ? { prompt } : {});
+    } catch {
+      // Rollback on failure
+      set((s) => ({
+        results: s.results.map((r) => r.id === resultId ? { ...r, status: (prev ?? "pending") as any } : r),
+      }));
+    }
+  },
+
+  resumeDebug: async (resultId) => {
+    const prev = get().results.find((r) => r.id === resultId)?.status;
+    set((s) => ({
+      results: s.results.map((r) => r.id === resultId ? { ...r, status: "queued" as const } : r),
+    }));
+    try {
+      await api.post(`/api/jira/results/${resultId}/resume`);
+    } catch {
+      set((s) => ({
+        results: s.results.map((r) => r.id === resultId ? { ...r, status: (prev ?? "failed") as any } : r),
+      }));
+    }
+  },
+
+  cancelDebug: async (resultId) => {
+    try {
+      await api.post(`/api/jira/results/${resultId}/cancel`);
+      await get().loadResults();
+    } catch {}
+  },
+
+  markRead: async (resultId) => {
+    // Optimistic update
+    set((s) => ({
+      results: s.results.map((r) => r.id === resultId ? { ...r, readAt: new Date().toISOString() } : r),
+      unreadCount: Math.max(0, s.unreadCount - 1),
+    }));
+    try { await api.patch(`/api/jira/results/${resultId}/read`); } catch {}
+  },
+
+  loadUnreadCount: async () => {
+    try {
+      const res = await api.get<{ count: number }>("/api/jira/results/unread-count");
+      set({ unreadCount: res.count });
+    } catch {}
+  },
+}));

package/src/web/stores/settings-store.ts

@@ -3,7 +3,7 @@ import { getAuthToken } from "@/lib/api-client";
 
 export type Theme = "light" | "dark" | "system";
 export type GitStatusViewMode = "flat" | "tree";
-export type SidebarActiveTab = "explorer" | "git" | "settings" | "database" | "search" | `ext:${string}`;
+export type SidebarActiveTab = "explorer" | "git" | "settings" | "database" | "search" | "jira" | `ext:${string}`;
 
 const STORAGE_KEY = "ppm-settings";
 
@@ -14,9 +14,11 @@ interface SettingsState {
   gitStatusViewMode: GitStatusViewMode;
   wordWrap: boolean;
   sidebarActiveTab: SidebarActiveTab;
+  jiraEnabled: boolean;
   deviceName: string | null;
   version: string | null;
   setTheme: (theme: Theme) => void;
+  setJiraEnabled: (enabled: boolean) => void;
   setDeviceName: (name: string) => Promise<void>;
   toggleSidebar: () => void;
   setSidebarWidth: (width: number) => void;
@@ -33,6 +35,7 @@ interface PersistedSettings {
   gitStatusViewMode?: GitStatusViewMode;
   wordWrap?: boolean;
   sidebarActiveTab?: SidebarActiveTab;
+  jiraEnabled?: boolean;
 }
 
 function loadPersistedSettings(): PersistedSettings {
@@ -47,7 +50,7 @@ function loadPersistedSettings(): PersistedSettings {
 
 function isValidSidebarTab(tab: unknown): tab is SidebarActiveTab {
   if (typeof tab !== "string") return false;
-  return ["explorer", "git", "settings", "database", "search"].includes(tab) || tab.startsWith("ext:");
+  return ["explorer", "git", "settings", "database", "search", "jira"].includes(tab) || tab.startsWith("ext:");
 }
 
 function persistSettings(update: Partial<PersistedSettings>) {
@@ -86,6 +89,7 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
   gitStatusViewMode: _initial.gitStatusViewMode === "flat" ? "flat" : "tree",
   wordWrap: _initial.wordWrap ?? false,
   sidebarActiveTab: isValidSidebarTab(_initial.sidebarActiveTab) ? _initial.sidebarActiveTab : "explorer",
+  jiraEnabled: _initial.jiraEnabled ?? false,
   deviceName: null,
   version: null,
 
@@ -116,6 +120,17 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
     } catch {}
   },
 
+  setJiraEnabled: (enabled) => {
+    persistSettings({ jiraEnabled: enabled });
+    set({ jiraEnabled: enabled });
+    // If disabling and currently on jira tab, switch to explorer
+    if (!enabled && get().sidebarActiveTab === "jira") {
+      const tab: SidebarActiveTab = "explorer";
+      persistSettings({ sidebarActiveTab: tab });
+      set({ sidebarActiveTab: tab });
+    }
+  },
+
   toggleSidebar: () => {
     const next = !get().sidebarCollapsed;
     persistSettings({ sidebarCollapsed: next });

package/src/web/styles/globals.css

@@ -192,6 +192,13 @@ html, body {
   padding: 0;
 }
 
+/* Light mode: dark code blocks so github-dark-dimmed syntax colors stay readable */
+.light .markdown-content pre {
+  background: #22272e;
+  color: #adbac7;
+  border-color: #373e47;
+}
+
 .markdown-content :not(pre) > code {
   background: var(--color-background);
   padding: 0.125rem 0.25rem;