From 8f6f1df05927a0d5917e0ffd57dd35a17f5f75e8 Mon Sep 17 00:00:00 2001
From: Michael <articulatedesigns@gmail.com>
Date: Fri, 29 May 2026 12:05:22 -0700
Subject: [PATCH] feat(web): restore Orchestrator settings tab + Telegram link
 UI in Profile

Restores two surfaces orphaned in the Phase-12 nav restructure.

Orchestrator: moved web/src/components/OrchestratorTab.tsx ->
web/src/pages/settings/OrchestratorTab.tsx, refactored hand-rolled
markup onto shared ui primitives (Card, Button, Field, StatusPill,
Modal). Data logic (GET/PUT /api/orchestrator, POST start/stop)
preserved verbatim. Wired into SettingsPage as a new "orchestrator"
sub-tab.

Telegram: new TelegramCard in ProfileTab covering all three states
(bot not configured / unlinked / linked) over GET /api/telegram/status,
POST /link-code, DELETE /link, PUT /default-session. Sessions read via
useSessions for the default-session select, array-guarded.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 web/src/components/OrchestratorTab.tsx     | 188 --------------------
 web/src/pages/SettingsPage.tsx             |  16 +-
 web/src/pages/settings/OrchestratorTab.tsx | 189 +++++++++++++++++++++
 web/src/pages/settings/ProfileTab.tsx      | 170 +++++++++++++++++-
 4 files changed, 371 insertions(+), 192 deletions(-)
 delete mode 100644 web/src/components/OrchestratorTab.tsx
 create mode 100644 web/src/pages/settings/OrchestratorTab.tsx

diff --git a/web/src/components/OrchestratorTab.tsx b/web/src/components/OrchestratorTab.tsx
deleted file mode 100644
index 1ce24cd..0000000
--- a/web/src/components/OrchestratorTab.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-import { useEffect, useState } from 'react'
-import { hubFetch } from '../lib/api'
-
-type OrchestratorSnapshot = {
-  enabled: boolean
-  name: string
-  custom_instructions: string | null
-  session_id: string | null
-  status: 'disabled' | 'enabled_idle' | 'running'
-}
-
-export function OrchestratorTab({ token }: { token: string }) {
-  const [snap, setSnap] = useState<OrchestratorSnapshot | null>(null)
-  const [name, setName] = useState('Orchestrator')
-  const [instructions, setInstructions] = useState('')
-  const [err, setErr] = useState<string | null>(null)
-  const [busy, setBusy] = useState(false)
-  const [showEnableModal, setShowEnableModal] = useState(false)
-  const [savedFlash, setSavedFlash] = useState(false)
-
-  async function refresh() {
-    try {
-      const r = await hubFetch<OrchestratorSnapshot>(token, '/api/orchestrator')
-      setSnap(r)
-      setName(r.name)
-      setInstructions(r.custom_instructions ?? '')
-    } catch (e: any) {
-      setErr(e?.message ?? 'load failed')
-    }
-  }
-
-  useEffect(() => { void refresh() }, [])
-
-  async function patch(body: Partial<{ enabled: boolean; name: string; custom_instructions: string | null }>) {
-    setBusy(true); setErr(null)
-    try {
-      const r = await hubFetch<OrchestratorSnapshot>(token, '/api/orchestrator', { method: 'PUT', json: body })
-      setSnap(r)
-      setName(r.name)
-      setInstructions(r.custom_instructions ?? '')
-      setSavedFlash(true); setTimeout(() => setSavedFlash(false), 1200)
-    } catch (e: any) {
-      setErr(e?.message ?? 'save failed')
-    } finally {
-      setBusy(false)
-    }
-  }
-
-  async function start() {
-    setBusy(true); setErr(null)
-    try {
-      await hubFetch(token, '/api/orchestrator/start', { method: 'POST', json: {} })
-      await refresh()
-    } catch (e: any) {
-      setErr(e?.message ?? 'start failed')
-    } finally {
-      setBusy(false)
-    }
-  }
-
-  async function stop() {
-    setBusy(true); setErr(null)
-    try {
-      await hubFetch(token, '/api/orchestrator/stop', { method: 'POST', json: {} })
-      await refresh()
-    } catch (e: any) {
-      setErr(e?.message ?? 'stop failed')
-    } finally {
-      setBusy(false)
-    }
-  }
-
-  if (!snap) {
-    return <div className="text-sm text-[var(--text-muted)]">Loading…</div>
-  }
-
-  return (
-    <div className="max-w-3xl space-y-5">
-      <div className="rounded-xl bg-[var(--bg-secondary)]/60 p-5 space-y-4">
-        <div className="flex items-start justify-between gap-4">
-          <div>
-            <h3 className="text-sm font-semibold text-[var(--text-primary)]">Orchestrator session</h3>
-            <p className="text-xs text-[var(--text-muted)] mt-1 leading-relaxed">
-              A pinned Claude session that runs in your repos parent folder and is taught how to read state from
-              and coordinate your other Claude sessions via the hub API. When enabled it auto-launches as soon as
-              your supervisor connects and stays available (it's the default target for Telegram). Disable it any
-              time below — once disabled it won't auto-launch again until you turn it back on.
-            </p>
-          </div>
-          <span className={`text-[10px] uppercase tracking-wide px-2 py-1 rounded font-semibold shrink-0 ${
-            snap.status === 'running' ? 'bg-emerald-500/20 text-emerald-300'
-            : snap.status === 'enabled_idle' ? 'bg-indigo-500/20 text-indigo-300'
-            : 'bg-[var(--bg-tertiary)]/60 text-[var(--text-muted)]'
-          }`}>{snap.status === 'running' ? 'Running' : snap.status === 'enabled_idle' ? 'Idle' : 'Disabled'}</span>
-        </div>
-
-        <div className="flex items-center gap-3">
-          <button
-            disabled={busy}
-            onClick={() => {
-              if (snap.enabled) void patch({ enabled: false })
-              else setShowEnableModal(true)
-            }}
-            className={`px-3 py-2 rounded-lg text-sm font-medium transition-colors disabled:opacity-50 ${
-              snap.enabled
-                ? 'bg-[var(--bg-tertiary)]/80 text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)]'
-                : 'bg-indigo-600 text-white hover:bg-indigo-500'
-            }`}
-          >
-            {snap.enabled ? 'Disable orchestrator' : 'Enable orchestrator'}
-          </button>
-          {snap.enabled && snap.status !== 'running' && (
-            <button
-              disabled={busy}
-              onClick={start}
-              className="px-3 py-2 rounded-lg text-sm font-medium bg-emerald-600 text-white hover:bg-emerald-500 disabled:opacity-50"
-            >
-              Start orchestrator session
-            </button>
-          )}
-          {snap.status === 'running' && (
-            <button
-              disabled={busy}
-              onClick={stop}
-              className="px-3 py-2 rounded-lg text-sm font-medium bg-red-600/80 text-white hover:bg-red-500 disabled:opacity-50"
-            >
-              Stop session
-            </button>
-          )}
-          {savedFlash && <span className="text-[11px] text-emerald-400">Saved</span>}
-        </div>
-
-        {snap.enabled && (
-          <div className="space-y-3 pt-2 border-t border-[var(--border-color)]">
-            <div>
-              <label className="block text-xs text-[var(--text-muted)] mb-1">Name</label>
-              <input
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-                onBlur={() => { if (name.trim() && name !== snap.name) void patch({ name: name.trim() }) }}
-                placeholder="Orchestrator"
-                maxLength={64}
-                className="w-full bg-[var(--bg-tertiary)]/60 text-[var(--text-primary)] rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/40"
-              />
-            </div>
-            <div>
-              <label className="block text-xs text-[var(--text-muted)] mb-1">Custom instructions (appended to the built-in seed)</label>
-              <textarea
-                value={instructions}
-                onChange={(e) => setInstructions(e.target.value)}
-                onBlur={() => { if (instructions !== (snap.custom_instructions ?? '')) void patch({ custom_instructions: instructions || null }) }}
-                rows={10}
-                maxLength={8000}
-                placeholder="e.g. Always summarize the state of all repos before suggesting next actions."
-                className="w-full bg-[var(--bg-tertiary)]/60 text-[var(--text-primary)] rounded-lg px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-indigo-500/40"
-              />
-            </div>
-          </div>
-        )}
-
-        {err && <div className="text-xs text-red-400">{err}</div>}
-      </div>
-
-      {showEnableModal && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4" onClick={() => setShowEnableModal(false)}>
-          <div className="max-w-md w-full rounded-xl bg-[var(--bg-secondary)] ring-1 ring-red-500/40 p-5 space-y-4" onClick={(e) => e.stopPropagation()}>
-            <h3 className="text-sm font-semibold text-[var(--text-primary)]">Enable orchestrator mode?</h3>
-            <p className="text-xs text-[var(--text-secondary)] leading-relaxed">
-              Orchestrator mode gives one Claude session full access to <strong>every repo</strong> under your supervisor's root folder,
-              plus a full-power hub API key that can read messages, start sessions, and dispatch tasks for your account.
-              Only enable if you trust the system prompt and your machine is secure.
-            </p>
-            <div className="flex items-center justify-end gap-2">
-              <button
-                onClick={() => setShowEnableModal(false)}
-                className="px-3 py-2 rounded-lg text-sm text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)]/60"
-              >Cancel</button>
-              <button
-                onClick={async () => { setShowEnableModal(false); await patch({ enabled: true }) }}
-                className="px-3 py-2 rounded-lg text-sm font-medium bg-red-600 text-white hover:bg-red-500"
-              >Enable orchestrator</button>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}
diff --git a/web/src/pages/SettingsPage.tsx b/web/src/pages/SettingsPage.tsx
index 2935290..f154833 100644
--- a/web/src/pages/SettingsPage.tsx
+++ b/web/src/pages/SettingsPage.tsx
@@ -24,12 +24,16 @@ import { CredentialsTab } from "./settings/CredentialsTab";
 import { PromptsTab } from "./settings/PromptsTab";
 import { UsageTab } from "./settings/UsageTab";
 import { ProfileTab } from "./settings/ProfileTab";
+import { OrchestratorTab } from "./settings/OrchestratorTab";
 
-type SettingsTab = "connections" | "credentials" | "prompts" | "usage" | "profile";
+type SettingsTab = "connections" | "credentials" | "prompts" | "orchestrator" | "usage" | "profile";
 
 function readSettingsTab(): SettingsTab {
   const raw = readTabParam();
-  if (raw === "connections" || raw === "credentials" || raw === "prompts" || raw === "usage" || raw === "profile") {
+  if (
+    raw === "connections" || raw === "credentials" || raw === "prompts" ||
+    raw === "orchestrator" || raw === "usage" || raw === "profile"
+  ) {
     return raw;
   }
   return "connections";
@@ -63,7 +67,7 @@ export function SettingsPage({ token, user, profile, signOut, onNavigate, onUpda
   }, []);
 
   const handleTabChange = (next: string) => {
-    const t = (["connections", "credentials", "prompts", "usage", "profile"].includes(next)
+    const t = (["connections", "credentials", "prompts", "orchestrator", "usage", "profile"].includes(next)
       ? next
       : "connections") as SettingsTab;
     setTab(t);
@@ -76,6 +80,7 @@ export function SettingsPage({ token, user, profile, signOut, onNavigate, onUpda
       { key: "connections", label: "Connections" },
       { key: "credentials", label: "Credentials" },
       { key: "prompts", label: "Prompts" },
+      { key: "orchestrator", label: "Orchestrator" },
       { key: "usage", label: "Usage" },
       { key: "profile", label: "Profile" },
     ],
@@ -105,6 +110,11 @@ export function SettingsPage({ token, user, profile, signOut, onNavigate, onUpda
             <PromptsTab token={token} />
           </ErrorBoundary>
         )}
+        {tab === "orchestrator" && (
+          <ErrorBoundary tabKey="settings:orchestrator">
+            <OrchestratorTab token={token} />
+          </ErrorBoundary>
+        )}
         {tab === "usage" && (
           <ErrorBoundary tabKey="settings:usage">
             <UsageTab token={token} profile={profile} onUpdateProfile={onUpdateProfile} />
diff --git a/web/src/pages/settings/OrchestratorTab.tsx b/web/src/pages/settings/OrchestratorTab.tsx
new file mode 100644
index 0000000..ba43725
--- /dev/null
+++ b/web/src/pages/settings/OrchestratorTab.tsx
@@ -0,0 +1,189 @@
+/**
+ * Settings → Orchestrator tab.
+ *
+ * Restored from the orphaned `web/src/components/OrchestratorTab.tsx` (dropped
+ * in the Phase-12 nav restructure) and refactored onto the shared `ui/`
+ * primitives. Data logic (GET/PUT /api/orchestrator, POST start/stop) is
+ * preserved verbatim — only the markup changed.
+ */
+import { useEffect, useState } from "react";
+import { hubFetch } from "../../lib/api";
+import { Card, Button, Field, StatusPill, Modal } from "../../components/ui";
+
+type OrchestratorSnapshot = {
+  enabled: boolean;
+  name: string;
+  custom_instructions: string | null;
+  session_id: string | null;
+  status: "disabled" | "enabled_idle" | "running";
+};
+
+export function OrchestratorTab({ token }: { token: string }) {
+  const [snap, setSnap] = useState<OrchestratorSnapshot | null>(null);
+  const [name, setName] = useState("Orchestrator");
+  const [instructions, setInstructions] = useState("");
+  const [err, setErr] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [showEnableModal, setShowEnableModal] = useState(false);
+  const [savedFlash, setSavedFlash] = useState(false);
+
+  async function refresh() {
+    try {
+      const r = await hubFetch<OrchestratorSnapshot>(token, "/api/orchestrator");
+      setSnap(r);
+      setName(r.name);
+      setInstructions(r.custom_instructions ?? "");
+    } catch (e: any) {
+      setErr(e?.message ?? "load failed");
+    }
+  }
+
+  useEffect(() => { void refresh(); }, []);
+
+  async function patch(body: Partial<{ enabled: boolean; name: string; custom_instructions: string | null }>) {
+    setBusy(true); setErr(null);
+    try {
+      const r = await hubFetch<OrchestratorSnapshot>(token, "/api/orchestrator", { method: "PUT", json: body });
+      setSnap(r);
+      setName(r.name);
+      setInstructions(r.custom_instructions ?? "");
+      setSavedFlash(true); setTimeout(() => setSavedFlash(false), 1200);
+    } catch (e: any) {
+      setErr(e?.message ?? "save failed");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function start() {
+    setBusy(true); setErr(null);
+    try {
+      await hubFetch(token, "/api/orchestrator/start", { method: "POST", json: {} });
+      await refresh();
+    } catch (e: any) {
+      setErr(e?.message ?? "start failed");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function stop() {
+    setBusy(true); setErr(null);
+    try {
+      await hubFetch(token, "/api/orchestrator/stop", { method: "POST", json: {} });
+      await refresh();
+    } catch (e: any) {
+      setErr(e?.message ?? "stop failed");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="px-4 md:px-6 lg:px-8 py-5 w-full max-w-5xl mx-auto space-y-5">
+      {!snap ? (
+        <div className="text-sm text-[var(--text-muted)]">Loading…</div>
+      ) : (
+        <Card className="space-y-4">
+          <div className="flex items-start justify-between gap-4">
+            <div>
+              <h3 className="text-sm font-semibold text-[var(--text-primary)]">Orchestrator session</h3>
+              <p className="text-xs text-[var(--text-muted)] mt-1 leading-relaxed">
+                A pinned Claude session that runs in your repos parent folder and is taught how to read state from
+                and coordinate your other Claude sessions via the hub API. When enabled it auto-launches as soon as
+                your supervisor connects and stays available (it's the default target for Telegram). Disable it any
+                time below — once disabled it won't auto-launch again until you turn it back on.
+              </p>
+            </div>
+            <StatusPill
+              status={snap.status === "running" ? "success" : snap.status === "enabled_idle" ? "info" : "idle"}
+              size="sm"
+              label={snap.status === "running" ? "Running" : snap.status === "enabled_idle" ? "Idle" : "Disabled"}
+              className="shrink-0"
+            />
+          </div>
+
+          <div className="flex items-center gap-3">
+            {snap.enabled ? (
+              <Button variant="danger" size="md" disabled={busy} onClick={() => void patch({ enabled: false })}>
+                Disable orchestrator
+              </Button>
+            ) : (
+              <Button variant="primary" size="md" disabled={busy} onClick={() => setShowEnableModal(true)}>
+                Enable orchestrator
+              </Button>
+            )}
+            {snap.enabled && snap.status !== "running" && (
+              <Button variant="primary" size="md" disabled={busy} onClick={start}>
+                Start orchestrator session
+              </Button>
+            )}
+            {snap.status === "running" && (
+              <Button variant="danger" size="md" disabled={busy} onClick={stop}>
+                Stop session
+              </Button>
+            )}
+            {savedFlash && <StatusPill status="success" size="sm" label="Saved" />}
+          </div>
+
+          {snap.enabled && (
+            <div className="space-y-3 pt-2 border-t border-[var(--border-color)]/40">
+              <Field label="Name">
+                <input
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  onBlur={() => { if (name.trim() && name !== snap.name) void patch({ name: name.trim() }); }}
+                  placeholder="Orchestrator"
+                  maxLength={64}
+                  className="w-full bg-[var(--bg-tertiary)] text-[var(--text-primary)] rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/50"
+                />
+              </Field>
+              <Field label="Custom instructions" helper="Appended to the built-in seed prompt.">
+                <textarea
+                  value={instructions}
+                  onChange={(e) => setInstructions(e.target.value)}
+                  onBlur={() => { if (instructions !== (snap.custom_instructions ?? "")) void patch({ custom_instructions: instructions || null }); }}
+                  rows={10}
+                  maxLength={8000}
+                  placeholder="e.g. Always summarize the state of all repos before suggesting next actions."
+                  className="w-full bg-[var(--bg-tertiary)] text-[var(--text-primary)] rounded-lg px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-indigo-500/50"
+                />
+              </Field>
+            </div>
+          )}
+
+          {err && <p className="text-xs text-red-400">{err}</p>}
+        </Card>
+      )}
+
+      <Modal
+        open={showEnableModal}
+        onClose={() => setShowEnableModal(false)}
+        title="Enable orchestrator mode?"
+        className="ring-red-500/40"
+        footer={
+          <>
+            <Button variant="ghost" size="md" onClick={() => setShowEnableModal(false)}>
+              Cancel
+            </Button>
+            <Button
+              variant="danger"
+              size="md"
+              onClick={async () => { setShowEnableModal(false); await patch({ enabled: true }); }}
+            >
+              Enable orchestrator
+            </Button>
+          </>
+        }
+      >
+        <p className="text-xs text-[var(--text-secondary)] leading-relaxed">
+          Orchestrator mode gives one Claude session full access to <strong>every repo</strong> under your supervisor's root folder,
+          plus a full-power hub API key that can read messages, start sessions, and dispatch tasks for your account.
+          Only enable if you trust the system prompt and your machine is secure.
+        </p>
+      </Modal>
+    </div>
+  );
+}
+
+export default OrchestratorTab;
diff --git a/web/src/pages/settings/ProfileTab.tsx b/web/src/pages/settings/ProfileTab.tsx
index d67dea7..4d00d15 100644
--- a/web/src/pages/settings/ProfileTab.tsx
+++ b/web/src/pages/settings/ProfileTab.tsx
@@ -13,7 +13,8 @@ import { useEffect, useRef, useState } from "react";
 import { hubFetch } from "../../lib/api";
 import type { Profile } from "../../hooks/useProfile";
 import { useWebPushPermission } from "../../hooks/useWebPushPermission";
-import { Card, Field, Button, StatusPill, Toggle } from "../../components/ui";
+import { useSessions, githubOwnerRepo } from "../../hooks/useSessions";
+import { Card, Field, Button, StatusPill, Toggle, LoadingState, EmptyState } from "../../components/ui";
 
 interface Props {
   token: string;
@@ -36,6 +37,7 @@ export function ProfileTab({ token, profile, onUpdateProfile }: Props) {
       <IdentityCard token={token} profile={profile} onUpdateProfile={onUpdateProfile} />
       <TimezoneCard token={token} profile={profile} />
       <NotificationsCard profile={profile} onUpdateProfile={onUpdateProfile} />
+      <TelegramCard token={token} />
     </div>
   );
 }
@@ -384,4 +386,170 @@ function NotificationsCard({
   );
 }
 
+/* ─────────────────────────── Telegram ─────────────────────────── */
+
+type TelegramStatus = {
+  linked: boolean;
+  chat_id: string | null;
+  default_session_id: string | null;
+  bot_username: string | null;
+  bot_configured: boolean;
+};
+
+function TelegramCard({ token }: { token: string }) {
+  const [status, setStatus] = useState<TelegramStatus | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [linkCode, setLinkCode] = useState<{ code: string; deepLink: string; expiresAt: string } | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [confirmUnlink, setConfirmUnlink] = useState(false);
+
+  // Lightweight read of the user's sessions to populate the default-session
+  // select. No `subscribe` passed — a one-shot GET /api/sessions on mount is
+  // enough here; the list is array-guarded inside the hook.
+  const { sessions } = useSessions(token);
+  const safeSessions = Array.isArray(sessions) ? sessions : [];
+
+  const refresh = async () => {
+    try {
+      const r = await hubFetch<TelegramStatus>(token, "/api/telegram/status");
+      setStatus(r);
+    } catch (e: any) {
+      setError(e?.message || "Failed to load Telegram status");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => { void refresh(); }, []);
+
+  const startLink = async () => {
+    setBusy(true);
+    setError(null);
+    try {
+      const r = await hubFetch<{ code: string; deepLink: string; expiresAt: string }>(
+        token,
+        "/api/telegram/link-code",
+        { method: "POST", json: {} },
+      );
+      setLinkCode(r);
+      if (r.deepLink) window.open(r.deepLink, "_blank");
+    } catch (e: any) {
+      setError(e?.status === 503 ? "Telegram bridge isn't configured on this server." : e?.message || "Failed to start link");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const unlink = async () => {
+    setBusy(true);
+    setError(null);
+    try {
+      await hubFetch(token, "/api/telegram/link", { method: "DELETE" });
+      setLinkCode(null);
+      setConfirmUnlink(false);
+      await refresh();
+    } catch (e: any) {
+      setError(e?.message || "Unlink failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const setDefaultSession = async (sessionId: string | null) => {
+    setBusy(true);
+    setError(null);
+    try {
+      await hubFetch(token, "/api/telegram/default-session", {
+        method: "PUT",
+        json: { session_id: sessionId },
+      });
+      setStatus((prev) => (prev ? { ...prev, default_session_id: sessionId } : prev));
+    } catch (e: any) {
+      setError(e?.message || "Failed to set default session");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const sessionLabel = (s: (typeof safeSessions)[number]) =>
+    githubOwnerRepo(s) || s.name || s.project_dir || s.id;
+
+  return (
+    <Card className="space-y-3">
+      <h3 className="text-sm font-semibold text-[var(--text-primary)]">Telegram</h3>
+
+      {loading ? (
+        <LoadingState variant="inline" label="Loading Telegram status…" />
+      ) : !status?.bot_configured ? (
+        <EmptyState
+          title="Telegram not configured"
+          description="The Telegram bridge isn't configured on this server."
+        />
+      ) : !status.linked ? (
+        <div className="space-y-3">
+          <p className="text-xs text-[var(--text-muted)] leading-relaxed">
+            Link your Telegram account to chat with your sessions from Telegram. Tap below to open Telegram
+            and send the code to the bot.
+          </p>
+          <Button variant="primary" size="sm" onClick={startLink} loading={busy}>
+            Link Telegram
+          </Button>
+          {linkCode && (
+            <div className="text-xs text-[var(--text-muted)]">
+              If Telegram didn't open, send this code to{" "}
+              {status.bot_username ? `@${status.bot_username}` : "the bot"}:{" "}
+              <span className="font-mono text-[var(--text-secondary)]">/start {linkCode.code}</span>
+              <span className="ml-1">(expires in 10 min)</span>
+            </div>
+          )}
+        </div>
+      ) : (
+        <div className="space-y-3">
+          <div className="flex items-center gap-2">
+            <StatusPill status="success" size="sm" label="Linked" />
+            {status.chat_id && (
+              <span className="text-xs text-[var(--text-muted)]">chat {status.chat_id}</span>
+            )}
+          </div>
+
+          <Field label="Default session" helper="Inbound Telegram messages route to this session.">
+            <select
+              value={status.default_session_id ?? ""}
+              disabled={busy}
+              onChange={(e) => void setDefaultSession(e.target.value || null)}
+              className="w-full px-3 py-2 rounded-lg bg-[var(--bg-tertiary)] text-[var(--text-primary)] text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/50"
+            >
+              <option value="">None</option>
+              {safeSessions.map((s) => (
+                <option key={s.id} value={s.id}>
+                  {sessionLabel(s)}
+                </option>
+              ))}
+            </select>
+          </Field>
+
+          {confirmUnlink ? (
+            <div className="flex items-center gap-2">
+              <span className="text-xs text-[var(--text-secondary)]">Unlink Telegram?</span>
+              <Button variant="danger" size="sm" onClick={unlink} loading={busy}>
+                Confirm unlink
+              </Button>
+              <Button variant="ghost" size="sm" onClick={() => setConfirmUnlink(false)} disabled={busy}>
+                Cancel
+              </Button>
+            </div>
+          ) : (
+            <Button variant="danger" size="sm" onClick={() => setConfirmUnlink(true)} disabled={busy}>
+              Unlink
+            </Button>
+          )}
+        </div>
+      )}
+
+      {error && <p className="text-xs text-red-400">{error}</p>}
+    </Card>
+  );
+}
+
 export default ProfileTab;