@hienlh/ppm 0.6.7 → 0.7.1

package/src/web/components/layout/draggable-tab.tsx

@@ -3,12 +3,15 @@ import { X } from "lucide-react";
 import type { Tab, TabType } from "@/stores/tab-store";
 import { cn } from "@/lib/utils";
 import { isDarkColor } from "@/lib/color-utils";
+import { notificationColor } from "@/stores/notification-store";
 
 interface DraggableTabProps {
   tab: Tab;
   isActive: boolean;
   icon: React.ElementType;
   showDropBefore: boolean;
+  /** Notification type if unread (null = no unread). Controls badge color. */
+  notificationType?: string | null;
   onSelect: () => void;
   onClose: () => void;
   onDragStart: (e: React.DragEvent) => void;
@@ -20,7 +23,7 @@ interface DraggableTabProps {
 }
 
 export function DraggableTab({
-  tab, isActive, icon: Icon, showDropBefore, onSelect, onClose,
+  tab, isActive, icon: Icon, showDropBefore, notificationType, onSelect, onClose,
   onDragStart, onDragOver, onDragEnd, tabRef, onRename,
 }: DraggableTabProps) {
   const [editing, setEditing] = useState(false);
@@ -74,7 +77,12 @@ export function DraggableTab({
           colorStyle && "border-transparent",
         )}
       >
-        <Icon className="size-4" />
+        <span className="relative">
+          <Icon className="size-4" />
+          {notificationType && !isActive && (
+            <span className={cn("absolute -top-1 -right-1 size-2 rounded-full", notificationColor(notificationType))} />
+          )}
+        </span>
         {editing ? (
           <input
             ref={inputRef}

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

@@ -2,6 +2,7 @@ import { useState, useEffect, useRef, useCallback } from "react";
 import {
   Terminal, MessageSquare, GitBranch, Database,
   FileDiff, FileCode, Settings, Menu, X, ArrowLeft, ArrowRight, SplitSquareVertical, MoveVertical, Layers, Plus,
+  ChevronLeft, ChevronRight,
 } from "lucide-react";
 import { usePanelStore } from "@/stores/panel-store";
 import { useProjectStore, resolveOrder } from "@/stores/project-store";
@@ -11,6 +12,8 @@ import { getProjectInitials } from "@/lib/project-avatar";
 import type { TabType } from "@/stores/tab-store";
 import { cn } from "@/lib/utils";
 import { openCommandPalette } from "@/hooks/use-global-keybindings";
+import { useNotificationStore, notificationColor } from "@/stores/notification-store";
+import { useTabOverflow, getHiddenUnreadDirection } from "@/hooks/use-tab-overflow";
 
 const NEW_TAB_OPTIONS: { type: TabType; label: string }[] = [
   { type: "terminal", label: "Terminal" },
@@ -35,7 +38,12 @@ export function MobileNav({ onMenuPress, onProjectsPress }: MobileNavProps) {
   const tabs = panel?.tabs ?? [];
   const activeTabId = panel?.activeTabId ?? null;
   const tabRefs = useRef<Map<string, HTMLButtonElement>>(new Map());
+  const mobileScrollRef = useRef<HTMLDivElement>(null);
   const prevTabCount = useRef(tabs.length);
+  const notifications = useNotificationStore((s) => s.notifications);
+  const { canScrollLeft, canScrollRight, scrollLeft: doScrollLeft, scrollRight: doScrollRight } =
+    useTabOverflow(mobileScrollRef);
+  const hiddenUnread = getHiddenUnreadDirection(mobileScrollRef.current, tabRefs.current as Map<string, HTMLElement>, tabs, notifications);
 
   const [menuTabId, setMenuTabId] = useState<string | null>(null);
   const [newTabSheetOpen, setNewTabSheetOpen] = useState(false);
@@ -109,15 +117,31 @@ export function MobileNav({ onMenuPress, onProjectsPress }: MobileNavProps) {
           <Menu className="size-5" />
         </button>
 
-        <div className="flex-1 flex items-center h-12 overflow-x-auto">
+        <div className="flex-1 relative flex items-center h-12">
+          {/* Left scroll arrow */}
+          {canScrollLeft && (
+            <button onClick={doScrollLeft} className="absolute left-0 z-10 flex items-center justify-center size-8 bg-gradient-to-r from-background via-background to-transparent">
+              <span className="relative">
+                <ChevronLeft className="size-3.5 text-text-secondary" />
+                {hiddenUnread.left && <span className={cn("absolute -top-1 -right-0.5 size-1.5 rounded-full", notificationColor(hiddenUnread.left))} />}
+              </span>
+            </button>
+          )}
+          <div ref={mobileScrollRef} className="flex-1 flex items-center h-12 overflow-x-auto scrollbar-none">
           {tabs.map((tab) => {
             const Icon = TAB_ICONS[tab.type];
             const isActive = tab.id === activeTabId;
+            const sessionId = tab.type === "chat" ? (tab.metadata?.sessionId as string) : undefined;
+            const entry = sessionId ? notifications.get(sessionId) : undefined;
+            const notiType = entry && entry.count > 0 ? entry.type : null;
             return (
               <button
                 key={tab.id}
                 ref={(el) => { if (el) tabRefs.current.set(tab.id, el); else tabRefs.current.delete(tab.id); }}
-                onClick={() => usePanelStore.getState().setActiveTab(tab.id)}
+                onClick={() => {
+                  usePanelStore.getState().setActiveTab(tab.id);
+                  if (sessionId) useNotificationStore.getState().clearForSession(sessionId);
+                }}
                 onTouchStart={() => startLongPress(tab.id)}
                 onTouchEnd={cancelLongPress}
                 onTouchMove={cancelLongPress}
@@ -127,7 +151,12 @@ export function MobileNav({ onMenuPress, onProjectsPress }: MobileNavProps) {
                   isActive ? "border-primary bg-surface text-primary" : "border-transparent text-text-secondary",
                 )}
               >
-                <Icon className="size-4" />
+                <span className="relative">
+                  <Icon className="size-4" />
+                  {notiType && !isActive && (
+                    <span className={cn("absolute -top-1 -right-1 size-2 rounded-full", notificationColor(notiType))} />
+                  )}
+                </span>
                 <span className="max-w-[80px] truncate">{tab.title}</span>
                 {tab.closable && (
                   <span role="button" tabIndex={0} onClick={(e) => { e.stopPropagation(); usePanelStore.getState().closeTab(tab.id); }}
@@ -138,6 +167,16 @@ export function MobileNav({ onMenuPress, onProjectsPress }: MobileNavProps) {
               </button>
             );
           })}
+          </div>
+          {/* Right scroll arrow */}
+          {canScrollRight && (
+            <button onClick={doScrollRight} className="absolute right-0 z-10 flex items-center justify-center size-8 bg-gradient-to-l from-background via-background to-transparent">
+              <span className="relative">
+                <ChevronRight className="size-3.5 text-text-secondary" />
+                {hiddenUnread.right && <span className={cn("absolute -top-1 -left-0.5 size-1.5 rounded-full", notificationColor(hiddenUnread.right))} />}
+              </span>
+            </button>
+          )}
         </div>
 
         {/* Add tab — opens command palette */}

package/src/web/components/layout/project-bar.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback, useRef, useEffect } from "react";
+import { useState, useCallback, useMemo, useRef, useEffect } from "react";
 import { createPortal } from "react-dom";
 import { Plus, Settings, Pencil, Trash2, Palette, Bug, Share2, Loader2, Copy, Check, X } from "lucide-react";
 import { QRCodeSVG } from "qrcode.react";
@@ -25,6 +25,7 @@ import {
 } from "@/components/ui/dialog";
 import { AddProjectForm } from "@/components/layout/add-project-form";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { useNotificationStore, selectProjectUrgentType, notificationColor } from "@/stores/notification-store";
 import { cn } from "@/lib/utils";
 
 // ---------------------------------------------------------------------------
@@ -34,15 +35,22 @@ function ProjectAvatar({ name, color, active, allNames }: {
   name: string; color: string; active: boolean; allNames: string[];
 }) {
   const initials = getProjectInitials(name, allNames);
+  const selector = useMemo(() => selectProjectUrgentType(name), [name]);
+  const urgentType = useNotificationStore(selector);
   return (
-    <div
-      className={cn(
-        "size-10 rounded-full flex items-center justify-center text-xs font-bold text-white select-none shrink-0",
-        active && "ring-2 ring-primary ring-offset-2 ring-offset-background",
+    <div className="relative">
+      <div
+        className={cn(
+          "size-10 rounded-full flex items-center justify-center text-xs font-bold text-white select-none shrink-0",
+          active && "ring-2 ring-primary ring-offset-2 ring-offset-background",
+        )}
+        style={{ background: color }}
+      >
+        {initials}
+      </div>
+      {urgentType && (
+        <div className={cn("absolute -top-0.5 -right-0.5 size-2.5 rounded-full border-2 border-background", notificationColor(urgentType))} />
       )}
-      style={{ background: color }}
-    >
-      {initials}
     </div>
   );
 }

package/src/web/components/layout/tab-bar.tsx

@@ -8,6 +8,8 @@ import {
   Settings,
   FileCode,
   Database,
+  ChevronLeft,
+  ChevronRight,
 } from "lucide-react";
 import { useTabStore, type TabType } from "@/stores/tab-store";
 import { usePanelStore } from "@/stores/panel-store";
@@ -15,7 +17,10 @@ import { useProjectStore } from "@/stores/project-store";
 import { useTabDrag } from "@/hooks/use-tab-drag";
 import { openCommandPalette } from "@/hooks/use-global-keybindings";
 import { api, projectUrl } from "@/lib/api-client";
+import { useNotificationStore, notificationColor } from "@/stores/notification-store";
+import { useTabOverflow, getHiddenUnreadDirection } from "@/hooks/use-tab-overflow";
 import { DraggableTab } from "./draggable-tab";
+import { cn } from "@/lib/utils";
 import type { Tab } from "@/stores/tab-store";
 
 const TAB_ICONS: Record<TabType, React.ElementType> = {
@@ -49,6 +54,13 @@ export function TabBar({ panelId }: TabBarProps) {
   const { dropIndex, handleDragStart, handleDragOver, handleDragOverBar, handleDrop, handleDragEnd } =
     useTabDrag(effectivePanelId);
 
+  const notifications = useNotificationStore((s) => s.notifications);
+  const { canScrollLeft, canScrollRight, scrollLeft: doScrollLeft, scrollRight: doScrollRight } =
+    useTabOverflow(scrollRef);
+
+  // Hidden unread direction — recomputed when notifications or scroll changes
+  const hiddenUnread = getHiddenUnreadDirection(scrollRef.current, tabRefs.current as Map<string, HTMLElement>, tabs, notifications);
+
   // Auto-scroll to new tab
   useEffect(() => {
     if (tabs.length > prevTabCount.current && activeTabId) {
@@ -86,26 +98,49 @@ export function TabBar({ panelId }: TabBarProps) {
 
   return (
     <div
-      className="hidden md:flex items-center h-10 border-b border-border bg-background"
+      className="hidden md:flex items-center h-10 border-b border-border bg-background relative"
       onDragOver={handleDragOverBar}
       onDrop={handleDrop}
       onDoubleClick={handleBarDoubleClick}
       onContextMenu={handleBarContextMenu}
     >
+      {/* Left scroll arrow */}
+      {canScrollLeft && (
+        <button
+          onClick={doScrollLeft}
+          className="absolute left-0 z-10 flex items-center justify-center size-8 bg-gradient-to-r from-background via-background to-transparent"
+        >
+          <span className="relative">
+            <ChevronLeft className="size-4 text-text-secondary" />
+            {hiddenUnread.left && (
+              <span className={cn("absolute -top-1 -right-0.5 size-2 rounded-full", notificationColor(hiddenUnread.left))} />
+            )}
+          </span>
+        </button>
+      )}
+
       {/* Scrollable tabs + sticky + button */}
       <div
         ref={scrollRef}
         className="flex-1 overflow-x-auto overflow-y-hidden min-w-0 scrollbar-none"
       >
         <div className="flex items-center h-10">
-          {tabs.map((tab, i) => (
+          {tabs.map((tab, i) => {
+            const sessionId = tab.type === "chat" ? (tab.metadata?.sessionId as string) : undefined;
+            const entry = sessionId ? notifications.get(sessionId) : undefined;
+            const notiType = entry && entry.count > 0 ? entry.type : null;
+            return (
             <DraggableTab
               key={tab.id}
               tab={tab}
               isActive={tab.id === activeTabId}
               icon={TAB_ICONS[tab.type]}
               showDropBefore={dropIndex === i}
-              onSelect={() => usePanelStore.getState().setActiveTab(tab.id, effectivePanelId)}
+              notificationType={notiType}
+              onSelect={() => {
+                usePanelStore.getState().setActiveTab(tab.id, effectivePanelId);
+                if (sessionId) useNotificationStore.getState().clearForSession(sessionId);
+              }}
               onClose={() => usePanelStore.getState().closeTab(tab.id, effectivePanelId)}
               onDragStart={(e) => handleDragStart(e, tab.id)}
               onDragOver={(e) => handleDragOver(e, tab.id, i)}
@@ -116,7 +151,8 @@ export function TabBar({ panelId }: TabBarProps) {
               }}
               onRename={tab.type === "chat" ? (title) => handleRenameTab(tab, title) : undefined}
             />
-          ))}
+            );
+          })}
           {/* Show drop indicator at the end */}
           {dropIndex !== null && dropIndex >= tabs.length && (
             <div className="w-0.5 h-6 bg-primary rounded-full" />
@@ -132,6 +168,21 @@ export function TabBar({ panelId }: TabBarProps) {
           </button>
         </div>
       </div>
+
+      {/* Right scroll arrow */}
+      {canScrollRight && (
+        <button
+          onClick={doScrollRight}
+          className="absolute right-10 z-10 flex items-center justify-center size-8 bg-gradient-to-l from-background via-background to-transparent"
+        >
+          <span className="relative">
+            <ChevronRight className="size-4 text-text-secondary" />
+            {hiddenUnread.right && (
+              <span className={cn("absolute -top-1 -left-0.5 size-2 rounded-full", notificationColor(hiddenUnread.right))} />
+            )}
+          </span>
+        </button>
+      )}
     </div>
   );
 }

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

@@ -1,10 +1,11 @@
 import { Moon, Sun, Monitor, Bell, BellOff } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { Separator } from "@/components/ui/separator";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
 import { useSettingsStore, type Theme } from "@/stores/settings-store";
 import { cn } from "@/lib/utils";
 import { AISettingsSection } from "./ai-settings-section";
 import { KeyboardShortcutsSection } from "./keyboard-shortcuts-section";
+import { TelegramSettingsSection } from "./telegram-settings-section";
 import { usePushNotification } from "@/hooks/use-push-notification";
 
 const THEME_OPTIONS: { value: Theme; label: string; icon: React.ElementType }[] = [
@@ -23,107 +24,147 @@ export function SettingsTab() {
 
   return (
     <div className="h-full w-full overflow-auto">
-    <div className="p-3 space-y-4">
-      <h2 className="text-sm font-semibold">Settings</h2>
+      <div className="p-3 space-y-2">
+        <h2 className="text-sm font-semibold">Settings</h2>
 
-      <div className="space-y-2">
-        <h3 className="text-xs font-medium text-text-secondary">Theme</h3>
-        <div className="flex gap-1.5">
-          {THEME_OPTIONS.map((opt) => {
-            const Icon = opt.icon;
-            return (
-              <Button
-                key={opt.value}
-                variant={theme === opt.value ? "default" : "outline"}
-                size="sm"
-                onClick={() => setTheme(opt.value)}
-                className={cn(
-                  "flex-1 gap-1.5 text-xs h-8",
-                  theme === opt.value && "ring-2 ring-primary",
-                )}
-              >
-                <Icon className="size-3.5" />
-                {opt.label}
-              </Button>
-            );
-          })}
-        </div>
-      </div>
-
-      <Separator />
-
-      <AISettingsSection />
+        <Accordion type="multiple" defaultValue={["notifications"]}>
+          {/* Theme */}
+          <AccordionItem value="theme">
+            <AccordionTrigger className="py-2 text-xs font-medium text-text-secondary hover:no-underline">
+              Theme
+            </AccordionTrigger>
+            <AccordionContent className="pb-2">
+              <div className="flex gap-1.5">
+                {THEME_OPTIONS.map((opt) => {
+                  const Icon = opt.icon;
+                  return (
+                    <Button
+                      key={opt.value}
+                      variant={theme === opt.value ? "default" : "outline"}
+                      size="sm"
+                      onClick={() => setTheme(opt.value)}
+                      className={cn(
+                        "flex-1 gap-1.5 text-xs h-8",
+                        theme === opt.value && "ring-2 ring-primary",
+                      )}
+                    >
+                      <Icon className="size-3.5" />
+                      {opt.label}
+                    </Button>
+                  );
+                })}
+              </div>
+            </AccordionContent>
+          </AccordionItem>
 
-      <Separator />
+          {/* AI Settings */}
+          <AccordionItem value="ai">
+            <AccordionTrigger className="py-2 text-xs font-medium text-text-secondary hover:no-underline">
+              AI Settings
+            </AccordionTrigger>
+            <AccordionContent className="pb-2">
+              <AISettingsSection />
+            </AccordionContent>
+          </AccordionItem>
 
-      <div className="space-y-2">
-        <h3 className="text-xs font-medium text-text-secondary">Notifications</h3>
-        {!pushSupported ? (
-          <p className="text-xs text-text-subtle">
-            Push notifications not supported in this browser.
-          </p>
-        ) : (
-          <>
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-1.5">
-                {isSubscribed ? <Bell className="size-3.5" /> : <BellOff className="size-3.5" />}
-                <span className="text-xs">Push notifications</span>
+          {/* Notifications */}
+          <AccordionItem value="notifications">
+            <AccordionTrigger className="py-2 text-xs font-medium text-text-secondary hover:no-underline">
+              Notifications
+            </AccordionTrigger>
+            <AccordionContent className="pb-2">
+              <div className="space-y-2">
+                {/* Push notifications */}
+                {!pushSupported ? (
+                  <p className="text-xs text-text-subtle">
+                    Push notifications not supported in this browser.
+                  </p>
+                ) : (
+                  <>
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-1.5">
+                        {isSubscribed ? <Bell className="size-3.5" /> : <BellOff className="size-3.5" />}
+                        <span className="text-xs">Push notifications</span>
+                      </div>
+                      <Button
+                        variant={isSubscribed ? "default" : "outline"}
+                        size="sm"
+                        className="h-7 text-xs"
+                        disabled={loading || permission === "denied"}
+                        onClick={() => (isSubscribed ? unsubscribe() : subscribe())}
+                      >
+                        {loading ? "..." : isSubscribed ? "On" : "Off"}
+                      </Button>
+                    </div>
+                    {isSubscribed && (
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="h-7 text-xs w-full"
+                        onClick={() => {
+                          new Notification("PPM Test", { body: "Push notifications are working!" });
+                        }}
+                      >
+                        Test notification
+                      </Button>
+                    )}
+                    {pushError && (
+                      <p className="text-[11px] text-destructive">{pushError}</p>
+                    )}
+                    {permission === "denied" && (
+                      <p className="text-[11px] text-destructive">
+                        Notifications blocked. Enable in browser settings.
+                      </p>
+                    )}
+                    {isIosNonPwa && (
+                      <p className="text-[11px] text-text-subtle">
+                        On iOS, install PPM to Home Screen for push notifications.
+                      </p>
+                    )}
+                  </>
+                )}
               </div>
-              <Button
-                variant={isSubscribed ? "default" : "outline"}
-                size="sm"
-                className="h-7 text-xs"
-                disabled={loading || permission === "denied"}
-                onClick={() => (isSubscribed ? unsubscribe() : subscribe())}
-              >
-                {loading ? "..." : isSubscribed ? "On" : "Off"}
-              </Button>
-            </div>
-            {isSubscribed && (
-              <Button
-                variant="outline"
-                size="sm"
-                className="h-7 text-xs w-full"
-                onClick={() => {
-                  new Notification("PPM Test", { body: "Push notifications are working!" });
-                }}
-              >
-                Test notification
-              </Button>
-            )}
-            {pushError && (
-              <p className="text-[11px] text-destructive">{pushError}</p>
-            )}
-            {permission === "denied" && (
-              <p className="text-[11px] text-destructive">
-                Notifications blocked. Enable in browser settings.
-              </p>
-            )}
-            {isIosNonPwa && (
-              <p className="text-[11px] text-text-subtle">
-                On iOS, install PPM to Home Screen for push notifications.
-              </p>
-            )}
-          </>
-        )}
-      </div>
-
-      <Separator />
+            </AccordionContent>
+          </AccordionItem>
 
-      <KeyboardShortcutsSection />
+          {/* Telegram */}
+          <AccordionItem value="telegram">
+            <AccordionTrigger className="py-2 text-xs font-medium text-text-secondary hover:no-underline">
+              Telegram
+            </AccordionTrigger>
+            <AccordionContent className="pb-2">
+              <TelegramSettingsSection />
+            </AccordionContent>
+          </AccordionItem>
 
-      <Separator />
+          {/* Keyboard Shortcuts */}
+          <AccordionItem value="shortcuts">
+            <AccordionTrigger className="py-2 text-xs font-medium text-text-secondary hover:no-underline">
+              Keyboard Shortcuts
+            </AccordionTrigger>
+            <AccordionContent className="pb-2">
+              <KeyboardShortcutsSection />
+            </AccordionContent>
+          </AccordionItem>
 
-      <div className="space-y-1.5">
-        <h3 className="text-xs font-medium text-text-secondary">About</h3>
-        <p className="text-xs text-text-secondary">
-          PPM — Personal Project Manager
-        </p>
-        <p className="text-[11px] text-text-subtle">
-          A mobile-first web IDE for managing your projects.
-        </p>
+          {/* About */}
+          <AccordionItem value="about">
+            <AccordionTrigger className="py-2 text-xs font-medium text-text-secondary hover:no-underline">
+              About
+            </AccordionTrigger>
+            <AccordionContent className="pb-2">
+              <div className="space-y-1.5">
+                <p className="text-xs text-text-secondary">
+                  PPM — Personal Project Manager
+                </p>
+                <p className="text-[11px] text-text-subtle">
+                  A mobile-first web IDE for managing your projects.
+                </p>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
       </div>
     </div>
-    </div>
   );
 }

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

@@ -0,0 +1,113 @@
+import { useState, useEffect } from "react";
+import { Send } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { api } from "@/lib/api-client";
+
+interface TelegramConfig {
+  bot_token: string;
+  chat_id: string;
+}
+
+export function TelegramSettingsSection() {
+  const [config, setConfig] = useState<TelegramConfig>({ bot_token: "", chat_id: "" });
+  const [tokenInput, setTokenInput] = useState("");
+  const [chatIdInput, setChatIdInput] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [testing, setTesting] = useState(false);
+  const [status, setStatus] = useState<{ type: "ok" | "err"; msg: string } | null>(null);
+
+  useEffect(() => {
+    api.get<TelegramConfig>("/api/settings/telegram").then((data) => {
+      setConfig(data);
+      setChatIdInput(data.chat_id);
+    }).catch(() => {});
+  }, []);
+
+  const save = async () => {
+    setSaving(true);
+    setStatus(null);
+    try {
+      const body: Record<string, string> = { chat_id: chatIdInput };
+      if (tokenInput) body.bot_token = tokenInput;
+      const data = await api.put<TelegramConfig>("/api/settings/telegram", body);
+      setConfig(data);
+      setTokenInput("");
+      setStatus({ type: "ok", msg: "Saved" });
+    } catch (e) {
+      setStatus({ type: "err", msg: (e as Error).message });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const test = async () => {
+    setTesting(true);
+    setStatus(null);
+    try {
+      // Send current input values; backend falls back to saved config for empty fields
+      await api.post("/api/settings/telegram/test", {
+        ...(tokenInput ? { bot_token: tokenInput } : {}),
+        ...(chatIdInput ? { chat_id: chatIdInput } : {}),
+      });
+      setStatus({ type: "ok", msg: "Test message sent!" });
+    } catch (e) {
+      setStatus({ type: "err", msg: (e as Error).message });
+    } finally {
+      setTesting(false);
+    }
+  };
+
+  const isConfigured = !!config.bot_token;
+
+  return (
+    <div className="space-y-2">
+      <div className="space-y-1.5">
+        <label className="text-[11px] text-text-subtle">Bot Token</label>
+        <Input
+          type="password"
+          placeholder={isConfigured ? "••••••  (saved)" : "123456:ABC-DEF..."}
+          value={tokenInput}
+          onChange={(e) => setTokenInput(e.target.value)}
+          className="h-7 text-xs"
+        />
+      </div>
+      <div className="space-y-1.5">
+        <label className="text-[11px] text-text-subtle">Chat ID</label>
+        <Input
+          placeholder="-1001234567890"
+          value={chatIdInput}
+          onChange={(e) => setChatIdInput(e.target.value)}
+          className="h-7 text-xs"
+        />
+        <p className="text-[10px] text-text-subtle">Personal or group chat ID</p>
+      </div>
+      <div className="flex gap-1.5">
+        <Button
+          variant="default"
+          size="sm"
+          className="h-7 text-xs flex-1"
+          disabled={saving || (!tokenInput && !chatIdInput)}
+          onClick={save}
+        >
+          {saving ? "..." : "Save"}
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-7 text-xs gap-1"
+          disabled={testing || !isConfigured}
+          onClick={test}
+        >
+          <Send className="size-3" />
+          {testing ? "..." : "Test"}
+        </Button>
+      </div>
+      {status && (
+        <p className={`text-[11px] ${status.type === "ok" ? "text-green-600 dark:text-green-400" : "text-destructive"}`}>
+          {status.msg}
+        </p>
+      )}
+    </div>
+  );
+}