omni-notify-mcp 1.3.0 → 1.3.2

package/dist/index.js

@@ -181,7 +181,10 @@ const server = new McpServer({ name: "notify-mcp", version: "1.2.0" }, {
         "ALWAYS echo the COMPLETE, UNTRUNCATED message in your chat output — never " +
         "shorten it with '…' or a summary. NEVER mention delivery channels (Telegram, " +
         "SMS, desktop, etc.) or echo 'Sent via: …' — those are server internals. " +
-        "Say 'notif' or 'notification' if you need to refer to the act of notifying.",
+        "Say 'notif' or 'notification' if you need to refer to the act of notifying.\n\n" +
+        "When the user asks you to remember a behavioral rule or change how you should act, " +
+        "call `update_instructions` with the full updated rules block. This writes to CLAUDE.md " +
+        "so the instructions persist across sessions and context compaction.",
 });
 // Thin proxy: forward a tool call to the HTTP server and return its content
 // block array verbatim. Error shape matches what the SDK expects from tool
@@ -213,6 +216,13 @@ server.tool("wait_for_inbox", "Block until an unsolicited user message arrives o
 server.tool("get_idle_seconds", "Seconds since user's last keyboard/mouse input. Drains inbox as a side-effect.", {}, async () => proxyToolCall("get_idle_seconds", {}));
 server.tool("get_idle_config", "Server's idle gating policy. Drains inbox as a side-effect.", {}, async () => proxyToolCall("get_idle_config", {}));
 server.tool("get_dnd_status", "Current DND state. Drains inbox as a side-effect.", {}, async () => proxyToolCall("get_dnd_status", {}));
+server.tool("update_instructions", "Persist behavioral instructions for this client into CLAUDE.md so they survive " +
+    "session restarts and context compaction. Call when the user asks you to remember " +
+    "a rule or change how you should behave. Pass the full desired block; it replaces " +
+    "the previous one atomically.", {
+    instructions: z.string().max(4000),
+    target: z.enum(["global", "project"]).default("global"),
+}, async (args) => proxyToolCall("update_instructions", args));
 // `reply` is the Channels return-path: Claude Code invokes it when the agent
 // has produced a response to a channel-delivered user message. We just funnel
 // it straight through `notify` so it flows to whatever channel the user is

package/dist/ui/server.js

@@ -1664,6 +1664,63 @@ function createMcpServer(clientId, sessionTag) {
             content: [{ type: "text", text: appendInbox(JSON.stringify({ active, reason }), sessionTag, clientId) }],
         };
     });
+    server.tool("update_instructions", "Persist a block of behavioral instructions for this client into its CLAUDE.md " +
+        "(or equivalent config file) so they survive session restarts and context compaction. " +
+        "Call this whenever the user asks you to remember a rule, change a behavior, or update " +
+        "how you should act — the instructions will be reloaded on every future session. " +
+        "Pass the full desired instructions block; it replaces the previous block atomically.", {
+        instructions: z.string().max(4000).describe("The full instructions block to persist"),
+        target: z.enum(["global", "project"]).default("global").describe("global = ~/.claude/CLAUDE.md (all projects); project = .claude/CLAUDE.md in cwd"),
+    }, async ({ instructions, target }) => {
+        try {
+            const MARKER_START = "<!-- omni-notify-mcp:instructions:start -->";
+            const MARKER_END = "<!-- omni-notify-mcp:instructions:end -->";
+            const block = `${MARKER_START}\n## omni-notify-mcp behavioral rules\n\n${instructions.trim()}\n${MARKER_END}`;
+            let claudeMdPath;
+            if (target === "global") {
+                const claudeDir = join(homedir(), ".claude");
+                if (!existsSync(claudeDir))
+                    mkdirSync(claudeDir, { recursive: true });
+                claudeMdPath = join(claudeDir, "CLAUDE.md");
+            }
+            else {
+                const projectClaudeDir = join(process.cwd(), ".claude");
+                if (!existsSync(projectClaudeDir))
+                    mkdirSync(projectClaudeDir, { recursive: true });
+                claudeMdPath = join(projectClaudeDir, "CLAUDE.md");
+            }
+            let existing = "";
+            if (existsSync(claudeMdPath)) {
+                existing = readFileSync(claudeMdPath, "utf8");
+            }
+            let updated;
+            if (existing.includes(MARKER_START)) {
+                // Replace existing block
+                const startIdx = existing.indexOf(MARKER_START);
+                const endIdx = existing.indexOf(MARKER_END);
+                if (endIdx !== -1) {
+                    updated = existing.slice(0, startIdx) + block + existing.slice(endIdx + MARKER_END.length);
+                }
+                else {
+                    updated = existing.slice(0, startIdx) + block;
+                }
+            }
+            else {
+                // Append
+                updated = existing + (existing.endsWith("\n") || existing === "" ? "" : "\n") + "\n" + block + "\n";
+            }
+            writeFileSync(claudeMdPath, updated, "utf8");
+            return {
+                content: [{ type: "text", text: `Instructions persisted to ${claudeMdPath}` }],
+            };
+        }
+        catch (err) {
+            return {
+                content: [{ type: "text", text: `Failed to persist instructions: ${err instanceof Error ? err.message : String(err)}` }],
+                isError: true,
+            };
+        }
+    });
     return server;
 }
 const httpTransports = {};
@@ -1845,8 +1902,35 @@ app.all("/mcp", async (req, res) => {
             clientVersion: initBody?.params?.clientInfo?.version,
             workspaceName,
         };
+        trackReconnect(clientId);
     }
 });
+// ── Reconnect tracker ─────────────────────────────────────────────────────────
+// After server restart, collect clients that reconnect within RECONNECT_WINDOW_MS
+// then send a single notify confirming they received updated instructions.
+const RECONNECT_WINDOW_MS = 20_000;
+const reconnectedClients = [];
+let reconnectNotifScheduled = false;
+const serverStartedAt = Date.now();
+function trackReconnect(clientId) {
+    if (Date.now() - serverStartedAt > RECONNECT_WINDOW_MS)
+        return;
+    if (reconnectedClients.includes(clientId))
+        return;
+    reconnectedClients.push(clientId);
+    if (!reconnectNotifScheduled) {
+        reconnectNotifScheduled = true;
+        setTimeout(async () => {
+            const list = reconnectedClients.join(", ");
+            const count = reconnectedClients.length;
+            const msg = `${count} client${count === 1 ? "" : "s"} reconnected and received updated instructions: ${list}`;
+            try {
+                await sendNotification(msg, "low", "omni-notify-mcp");
+            }
+            catch { /* best effort */ }
+        }, RECONNECT_WINDOW_MS);
+    }
+}
 // ── Start ─────────────────────────────────────────────────────────────────────
 const httpServer = app.listen(PORT, "0.0.0.0", () => {
     const ip = getLocalIp();

package/package.json

@@ -1,74 +1,74 @@
-{
-  "name": "omni-notify-mcp",
-  "version": "1.3.0",
-  "description": "An MCP server that lets AI agents (Claude, Cursor, etc.) reach you on any channel — desktop, Telegram, SMS, email — with two-way ask/reply, real-time inbox push, Do Not Disturb, idle gating, multi-session routing, and a one-page web UI for setup. Zero config code; configure once, agents call notify/ask.",
-  "main": "dist/index.js",
-  "type": "module",
-  "bin": {
-    "omni-notify-mcp": "dist/index.js",
-    "omni-notify-ui": "dist/ui/server.js"
-  },
-  "files": [
-    "dist/",
-    "ui/public/",
-    "assets/",
-    "config.example.json",
-    "LICENSE",
-    "README.md"
-  ],
-  "keywords": [
-    "mcp",
-    "model-context-protocol",
-    "notifications",
-    "ai-agent",
-    "claude",
-    "cursor",
-    "telegram",
-    "sms",
-    "email",
-    "desktop-notifications",
-    "do-not-disturb",
-    "idle-detection",
-    "human-in-the-loop",
-    "ask-tool",
-    "two-way",
-    "sse"
-  ],
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/menih/notify-mcp"
-  },
-  "engines": {
-    "node": ">=18"
-  },
-  "scripts": {
-    "build": "tsc && tsc -p ui/tsconfig.json",
-    "build:mcp": "tsc",
-    "build:ui": "tsc -p ui/tsconfig.json",
-    "start": "node dist/index.js",
-    "ui": "npm run build:ui && node dist/ui/server.js",
-    "test": "npm run build && node --test tests/*.test.mjs",
-    "prepublishOnly": "npm run build:mcp"
-  },
-  "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.0.0",
-    "express": "^4.19.2",
-    "googleapis": "^144.0.0",
-    "msedge-tts": "^2.0.5",
-    "node-notifier": "^10.0.1",
-    "nodemailer": "^6.9.9",
-    "open": "^10.1.0",
-    "twilio": "^5.3.0",
-    "zod": "^3.22.4"
-  },
-  "devDependencies": {
-    "@types/express": "^4.17.21",
-    "@types/node": "^20.0.0",
-    "@types/node-notifier": "^8.0.5",
-    "@types/nodemailer": "^6.4.14",
-    "playwright": "^1.59.1",
-    "ts-node": "^10.9.2",
-    "typescript": "^5.4.0"
-  }
-}
+{
+  "name": "omni-notify-mcp",
+  "version": "1.3.2",
+  "description": "An MCP server that lets AI agents (Claude, Cursor, etc.) reach you on any channel — desktop, Telegram, SMS, email — with two-way ask/reply, real-time inbox push, Do Not Disturb, idle gating, multi-session routing, and a one-page web UI for setup. Zero config code; configure once, agents call notify/ask.",
+  "main": "dist/index.js",
+  "type": "module",
+  "bin": {
+    "omni-notify-mcp": "dist/index.js",
+    "omni-notify-ui": "dist/ui/server.js"
+  },
+  "files": [
+    "dist/",
+    "ui/public/",
+    "assets/",
+    "config.example.json",
+    "LICENSE",
+    "README.md"
+  ],
+  "keywords": [
+    "mcp",
+    "model-context-protocol",
+    "notifications",
+    "ai-agent",
+    "claude",
+    "cursor",
+    "telegram",
+    "sms",
+    "email",
+    "desktop-notifications",
+    "do-not-disturb",
+    "idle-detection",
+    "human-in-the-loop",
+    "ask-tool",
+    "two-way",
+    "sse"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/menih/notify-mcp"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "build": "tsc && tsc -p ui/tsconfig.json",
+    "build:mcp": "tsc",
+    "build:ui": "tsc -p ui/tsconfig.json",
+    "start": "node dist/index.js",
+    "ui": "npm run build:ui && node dist/ui/server.js",
+    "test": "npm run build && node --test tests/*.test.mjs",
+    "prepublishOnly": "npm run build:mcp"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.0.0",
+    "express": "^4.19.2",
+    "googleapis": "^144.0.0",
+    "msedge-tts": "^2.0.5",
+    "node-notifier": "^10.0.1",
+    "nodemailer": "^6.9.9",
+    "open": "^10.1.0",
+    "twilio": "^5.3.0",
+    "zod": "^3.22.4"
+  },
+  "devDependencies": {
+    "@types/express": "^4.17.21",
+    "@types/node": "^20.0.0",
+    "@types/node-notifier": "^8.0.5",
+    "@types/nodemailer": "^6.4.14",
+    "playwright": "^1.59.1",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.4.0"
+  }
+}

package/ui/public/app.js

@@ -3,6 +3,13 @@
 let config = {};
 const dirty = new Set();
 
+// ── Card collapse/expand ──────────────────────────────────────────────────
+
+function toggleCard(id) {
+  const card = document.getElementById('card-' + id);
+  if (card) card.classList.toggle('expanded');
+}
+
 // ── Bootstrap ─────────────────────────────────────────────────────────────
 
 async function init() {

package/ui/public/index.html

@@ -29,7 +29,7 @@
 
       <!-- ── Desktop ───────────────────────────────────────────────── -->
       <div class="card" id="card-desktop">
-        <div class="card-hd">
+        <div class="card-hd" onclick="toggleCard('desktop')">
           <div class="ch-meta">
             <div class="channel-icon desktop-icon">
               <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
@@ -37,6 +37,7 @@
             <span class="ch-name">Desktop</span>
           </div>
           <span class="badge badge-idle" id="badge-desktop">–</span>
+          <svg class="card-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
         </div>
         <div class="card-body">
           <div class="actions">
@@ -73,7 +74,7 @@
 
       <!-- ── Email ─────────────────────────────────────────────────── -->
       <div class="card" id="card-email">
-        <div class="card-hd">
+        <div class="card-hd" onclick="toggleCard('email')">
           <div class="ch-meta">
             <div class="channel-icon gmail-icon">
               <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
@@ -81,6 +82,7 @@
             <span class="ch-name">Email</span><span class="tag">Gmail</span>
           </div>
           <span class="badge badge-idle" id="badge-email">Not configured</span>
+          <svg class="card-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
         </div>
         <div class="card-body">
           <!-- Connected -->
@@ -122,7 +124,7 @@
 
       <!-- ── Telegram ──────────────────────────────────────────────── -->
       <div class="card" id="card-telegram">
-        <div class="card-hd">
+        <div class="card-hd" onclick="toggleCard('telegram')">
           <div class="ch-meta">
             <div class="channel-icon telegram-icon">
               <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
@@ -130,6 +132,7 @@
             <span class="ch-name">Telegram</span><span class="tag">Bot API</span>
           </div>
           <span class="badge badge-idle" id="badge-telegram">Not configured</span>
+          <svg class="card-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
         </div>
         <div class="card-body">
           <div class="actions">
@@ -163,7 +166,7 @@
 
       <!-- ── SMS ───────────────────────────────────────────────────── -->
       <div class="card" id="card-sms">
-        <div class="card-hd">
+        <div class="card-hd" onclick="toggleCard('sms')">
           <div class="ch-meta">
             <div class="channel-icon sms-icon">
               <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
@@ -171,6 +174,7 @@
             <span class="ch-name">SMS</span><span class="tag">Twilio</span>
           </div>
           <span class="badge badge-idle" id="badge-sms">Not configured</span>
+          <svg class="card-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
         </div>
         <div class="card-body">
           <div class="actions">
@@ -201,7 +205,7 @@
 
       <!-- ── ntfy ─────────────────────────────────────────────────── -->
       <div class="card" id="card-ntfy">
-        <div class="card-hd">
+        <div class="card-hd" onclick="toggleCard('ntfy')">
           <div class="ch-meta">
             <div class="channel-icon ntfy-icon">
               <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
@@ -209,6 +213,7 @@
             <span class="ch-name">ntfy</span><span class="tag">Push</span>
           </div>
           <span class="badge badge-idle" id="badge-ntfy">Not configured</span>
+          <svg class="card-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
         </div>
         <div class="card-body">
           <div class="actions">
@@ -237,7 +242,7 @@
 
       <!-- ── Discord ───────────────────────────────────────────────── -->
       <div class="card" id="card-discord">
-        <div class="card-hd">
+        <div class="card-hd" onclick="toggleCard('discord')">
           <div class="ch-meta">
             <div class="channel-icon discord-icon">
               <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="12" r="1"/><circle cx="15" cy="12" r="1"/><path d="M7.5 7.5c1-.5 2.5-.5 4.5-.5s3.5 0 4.5.5M7.5 16.5c1 .5 2.5.5 4.5.5s3.5 0 4.5-.5"/><path d="M3 3l4.5 1.5M21 3l-4.5 1.5M3 21l4.5-1.5M21 21l-4.5-1.5"/><path d="M3 3c0 9 0 12 9 15 9-3 9-6 9-15"/></svg>
@@ -245,6 +250,7 @@
             <span class="ch-name">Discord</span><span class="tag">Webhook</span>
           </div>
           <span class="badge badge-idle" id="badge-discord">Not configured</span>
+          <svg class="card-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
         </div>
         <div class="card-body">
           <div class="actions">
@@ -270,7 +276,7 @@
 
       <!-- ── Slack ─────────────────────────────────────────────────── -->
       <div class="card" id="card-slack">
-        <div class="card-hd">
+        <div class="card-hd" onclick="toggleCard('slack')">
           <div class="ch-meta">
             <div class="channel-icon slack-icon">
               <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.5 10c-.83 0-1.5-.67-1.5-1.5v-5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5v5c0 .83-.67 1.5-1.5 1.5z"/><path d="M20.5 10H19V8.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/><path d="M9.5 14c.83 0 1.5.67 1.5 1.5v5c0 .83-.67 1.5-1.5 1.5S8 21.33 8 20.5v-5c0-.83.67-1.5 1.5-1.5z"/><path d="M3.5 14H5v1.5c0 .83-.67 1.5-1.5 1.5S2 16.33 2 15.5 2.67 14 3.5 14z"/><path d="M14 14.5c0-.83.67-1.5 1.5-1.5h5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-5c-.83 0-1.5-.67-1.5-1.5z"/><path d="M15.5 19H14v1.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5-.67-1.5-1.5-1.5z"/><path d="M10 9.5C10 8.67 9.33 8 8.5 8h-5C2.67 8 2 8.67 2 9.5S2.67 11 3.5 11h5c.83 0 1.5-.67 1.5-1.5z"/><path d="M8.5 5H10V3.5C10 2.67 9.33 2 8.5 2S7 2.67 7 3.5 7.67 5 8.5 5z"/></svg>
@@ -278,6 +284,7 @@
             <span class="ch-name">Slack</span><span class="tag">Webhook</span>
           </div>
           <span class="badge badge-idle" id="badge-slack">Not configured</span>
+          <svg class="card-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
         </div>
         <div class="card-body">
           <div class="actions">
@@ -302,7 +309,7 @@
 
       <!-- ── Teams ─────────────────────────────────────────────────── -->
       <div class="card" id="card-teams">
-        <div class="card-hd">
+        <div class="card-hd" onclick="toggleCard('teams')">
           <div class="ch-meta">
             <div class="channel-icon teams-icon">
               <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
@@ -310,6 +317,7 @@
             <span class="ch-name">Teams</span><span class="tag">Webhook</span>
           </div>
           <span class="badge badge-idle" id="badge-teams">Not configured</span>
+          <svg class="card-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
         </div>
         <div class="card-body">
           <div class="actions">
@@ -344,7 +352,7 @@
 
       <!-- ── Do Not Disturb ────────────────────────────────────────── -->
       <div class="card" id="card-dnd">
-        <div class="card-hd">
+        <div class="card-hd" onclick="toggleCard('dnd')">
           <div class="ch-meta">
             <div class="channel-icon" style="background:#3b2f12;color:#f59e0b">
               <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M4.93 4.93l14.14 14.14"/></svg>
@@ -352,6 +360,7 @@
             <span class="ch-name">Do Not Disturb</span>
           </div>
           <span class="badge badge-idle" id="badge-dnd">–</span>
+          <svg class="card-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
         </div>
         <div class="card-body">
           <div class="actions">
@@ -391,7 +400,7 @@
 
       <!-- ── Idle gating ───────────────────────────────────────────── -->
       <div class="card" id="card-idle">
-        <div class="card-hd">
+        <div class="card-hd" onclick="toggleCard('idle')">
           <div class="ch-meta">
             <div class="channel-icon" style="background:#12293b;color:#3b82f6">
               <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
@@ -399,6 +408,7 @@
             <span class="ch-name">Idle gating</span>
           </div>
           <span class="badge badge-idle" id="badge-idle">–</span>
+          <svg class="card-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
         </div>
         <div class="card-body">
           <div class="actions">

package/ui/public/style.css

@@ -264,10 +264,14 @@ main {
   align-items: center;
   justify-content: space-between;
   padding: 10px 14px;
-  border-bottom: 2px solid #4a4a5a;
   gap: 8px;
   flex-shrink: 0;
+  cursor: pointer;
+  user-select: none;
+  transition: background .1s;
 }
+.card-hd:hover { background: rgba(255,255,255,0.03); }
+.card.expanded .card-hd { border-bottom: 2px solid #4a4a5a; }
 .ch-meta {
   display: flex;
   align-items: center;
@@ -275,13 +279,23 @@ main {
 }
 .ch-name { font-size: 14px; font-weight: 600; }
 
+.card-chevron {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  color: var(--text-3);
+  transition: transform .2s;
+}
+.card.expanded .card-chevron { transform: rotate(180deg); }
+
 .card-body {
   padding: 12px 14px;
-  display: flex;
+  display: none;
   flex-direction: column;
   gap: 10px;
   flex: 1;
 }
+.card.expanded .card-body { display: flex; }
 
 /* ── Channel icons ───────────────────────────────────────────────────────── */