@agent-native/core 0.7.80 → 0.7.82

package/dist/client/integrations/IntegrationsPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"IntegrationsPanel.js","sourceRoot":"","sources":["../../../src/client/integrations/IntegrationsPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useCallback } from \"react\";\nimport {\n  IconPlus,\n  IconBrandSlack,\n  IconBrandTelegram,\n  IconBrandWhatsapp,\n  IconBrandGoogleDrive,\n  IconTerminal2,\n  IconBuildingSkyscraper,\n  IconMessageCircle,\n  IconCopy,\n  IconCheck,\n  IconChevronLeft,\n  IconExternalLink,\n  IconCircleCheck,\n} from \"@tabler/icons-react\";\nimport {\n  useIntegrationStatus,\n  type IntegrationStatus,\n} from \"./useIntegrationStatus.js\";\nimport { agentNativePath } from \"../api-path.js\";\n\n// ─── Platform config ─────────────────────────────────────────────────────────\n\ninterface PlatformInfo {\n  id: string;\n  label: string;\n  icon: React.ComponentType<any>;\n  description: string;\n  envVars: string[];\n  setupSteps: string[];\n  docsUrl?: string;\n  /** If true, this is a \"client\" integration (user connects TO the agent) rather than a webhook */\n  isClient?: boolean;\n}\n\nconst PLATFORMS: PlatformInfo[] = [\n  {\n    id: \"slack\",\n    label: \"Slack\",\n    icon: IconBrandSlack,\n    description: \"Message your agent from any Slack channel or DM.\",\n    envVars: [\"SLACK_BOT_TOKEN\", \"SLACK_SIGNING_SECRET\"],\n    setupSteps: [\n      \"Create a Slack app at api.slack.com/apps\",\n      'Enable \"Event Subscriptions\" and point to your webhook URL',\n      \"Subscribe to message.im and app_mention events\",\n      \"Install the app to your workspace\",\n      \"Copy the Bot Token and Signing Secret into your environment\",\n    ],\n    docsUrl: \"https://api.slack.com/apps\",\n  },\n  {\n    id: \"telegram\",\n    label: \"Telegram\",\n    icon: IconBrandTelegram,\n    description: \"Chat with your agent via a Telegram bot.\",\n    envVars: [\"TELEGRAM_BOT_TOKEN\"],\n    setupSteps: [\n      \"Message @BotFather on Telegram to create a new bot\",\n      \"Copy the bot token into your environment\",\n      'Click \"Setup webhook\" below to register automatically',\n    ],\n  },\n  {\n    id: \"whatsapp\",\n    label: \"WhatsApp\",\n    icon: IconBrandWhatsapp,\n    description: \"Connect your agent to WhatsApp Business.\",\n    envVars: [\"WHATSAPP_TOKEN\", \"WHATSAPP_VERIFY_TOKEN\"],\n    setupSteps: [\n      \"Create a Meta Business app at developers.facebook.com\",\n      \"Set up WhatsApp Business API\",\n      \"Configure the webhook URL and verify token\",\n      \"Copy the access token into your environment\",\n    ],\n    docsUrl: \"https://developers.facebook.com/docs/whatsapp\",\n  },\n  {\n    id: \"google-docs\",\n    label: \"Google Docs\",\n    icon: IconBrandGoogleDrive,\n    description: \"Tag the agent in Google Doc comments to get responses.\",\n    envVars: [\"GOOGLE_SERVICE_ACCOUNT_KEY\"],\n    setupSteps: [\n      \"Create a Google Cloud service account and download the JSON key\",\n      \"Set GOOGLE_SERVICE_ACCOUNT_KEY in your environment (JSON string or file path)\",\n      \"Share your Google Docs with the service account email\",\n      'Write a comment containing \"@Agent\" to trigger the agent',\n    ],\n  },\n  {\n    id: \"openclaw\",\n    label: \"OpenClaw\",\n    icon: IconTerminal2,\n    description: \"Access this agent from OpenClaw's unified agent interface.\",\n    envVars: [],\n    isClient: true,\n    setupSteps: [\n      \"Install OpenClaw: npm install -g openclaw\",\n      \"Add this agent's URL as a provider in your OpenClaw config\",\n      \"OpenClaw discovers your agent's capabilities via the A2A protocol\",\n    ],\n  },\n  {\n    id: \"claude-code\",\n    label: \"Claude Code\",\n    icon: IconTerminal2,\n    description:\n      \"Let Claude Code call this agent via A2A for data and actions.\",\n    envVars: [],\n    isClient: true,\n    setupSteps: [\n      \"Your agent exposes an A2A endpoint at /.well-known/agent-card.json\",\n      \"In Claude Code, reference your agent's URL when asking for data\",\n      \"Claude Code will discover and call your agent's skills automatically\",\n    ],\n  },\n  {\n    id: \"builder\",\n    label: \"Builder.io\",\n    icon: IconBuildingSkyscraper,\n    description:\n      \"One chat interface that orchestrates all your agents together.\",\n    envVars: [],\n    isClient: true,\n    setupSteps: [\n      \"Connect your agent-native apps in your Builder.io workspace\",\n      \"Builder.io discovers each agent's skills via A2A\",\n      \"Chat with one agent that can trigger actions across all your apps\",\n    ],\n    docsUrl: \"https://www.builder.io\",\n  },\n];\n\n// ─── Integration detail view ─────────────────────────────────────────────────\n\nfunction IntegrationDetail({\n  platform,\n  serverStatus,\n  onBack,\n  onRefresh,\n}: {\n  platform: PlatformInfo;\n  serverStatus?: IntegrationStatus;\n  onBack: () => void;\n  onRefresh: () => void;\n}) {\n  const [toggling, setToggling] = useState(false);\n  const [copied, setCopied] = useState(false);\n\n  const handleToggle = useCallback(async () => {\n    setToggling(true);\n    try {\n      const action = serverStatus?.enabled ? \"disable\" : \"enable\";\n      const res = await fetch(\n        agentNativePath(`/_agent-native/integrations/${platform.id}/${action}`),\n        { method: \"POST\" },\n      );\n      if (res.ok) onRefresh();\n    } finally {\n      setToggling(false);\n    }\n  }, [platform.id, serverStatus?.enabled, onRefresh]);\n\n  const handleCopy = useCallback(async (text: string) => {\n    await navigator.clipboard.writeText(text);\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n  }, []);\n\n  const isConfigured = serverStatus?.configured ?? false;\n  const isEnabled = serverStatus?.enabled ?? false;\n\n  return (\n    <div>\n      <button\n        onClick={onBack}\n        className=\"flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground mb-2\"\n      >\n        <IconChevronLeft size={12} />\n        Back\n      </button>\n\n      <div className=\"flex items-center gap-2 mb-2\">\n        <platform.icon size={18} className=\"text-foreground shrink-0\" />\n        <div>\n          <div className=\"text-xs font-medium text-foreground\">\n            {platform.label}\n          </div>\n          <div className=\"text-[10px] text-muted-foreground\">\n            {platform.description}\n          </div>\n        </div>\n      </div>\n\n      {/* Setup steps */}\n      <div className=\"mb-3\">\n        <div className=\"text-[10px] font-medium text-muted-foreground mb-1.5\">\n          Setup\n        </div>\n        <ol className=\"space-y-1\">\n          {platform.setupSteps.map((step, i) => (\n            <li\n              key={i}\n              className=\"flex gap-1.5 text-[10px] text-muted-foreground leading-relaxed\"\n            >\n              <span className=\"shrink-0 text-muted-foreground/50\">\n                {i + 1}.\n              </span>\n              {step}\n            </li>\n          ))}\n        </ol>\n      </div>\n\n      {/* Required secrets */}\n      {platform.envVars.length > 0 && (\n        <div className=\"mb-3\">\n          <div className=\"text-[10px] font-medium text-muted-foreground mb-1\">\n            Required secrets\n          </div>\n          <div className=\"space-y-0.5\">\n            {platform.envVars.map((v) => (\n              <div key={v} className=\"flex items-center gap-1\">\n                <code className=\"text-[10px] text-foreground bg-muted px-1 py-0.5 rounded\">\n                  {v}\n                </code>\n                {isConfigured && (\n                  <IconCircleCheck\n                    size={11}\n                    className=\"text-green-500 shrink-0\"\n                  />\n                )}\n              </div>\n            ))}\n          </div>\n          {!isConfigured && (\n            <p className=\"text-[10px] text-amber-500 mt-1\">\n              Set these in your .env file or environment to connect.\n            </p>\n          )}\n        </div>\n      )}\n\n      {/* Webhook URL */}\n      {serverStatus?.webhookUrl && !platform.isClient && (\n        <div className=\"mb-3\">\n          <div className=\"text-[10px] font-medium text-muted-foreground mb-1\">\n            Webhook URL\n          </div>\n          <div className=\"flex items-center gap-1\">\n            <code className=\"flex-1 truncate rounded bg-muted px-1.5 py-0.5 text-[10px] text-foreground\">\n              {serverStatus.webhookUrl}\n            </code>\n            <button\n              onClick={() => handleCopy(serverStatus.webhookUrl!)}\n              className=\"shrink-0 rounded p-0.5 text-muted-foreground hover:text-foreground hover:bg-accent/50\"\n              title=\"Copy\"\n            >\n              {copied ? <IconCheck size={12} /> : <IconCopy size={12} />}\n            </button>\n          </div>\n        </div>\n      )}\n\n      {/* Docs link */}\n      {platform.docsUrl && (\n        <a\n          href={platform.docsUrl}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          className=\"flex items-center gap-1 text-[10px] text-blue-400 hover:text-blue-300 mb-3\"\n        >\n          Documentation\n          <IconExternalLink size={10} />\n        </a>\n      )}\n\n      {/* Enable/disable for server integrations */}\n      {serverStatus && !platform.isClient && isConfigured && (\n        <button\n          onClick={handleToggle}\n          disabled={toggling}\n          className={`w-full rounded-md border px-2 py-1.5 text-[11px] font-medium disabled:opacity-50 ${\n            isEnabled\n              ? \"border-border text-foreground hover:bg-accent/50\"\n              : \"border-green-600/50 text-green-400 hover:bg-green-900/20\"\n          }`}\n        >\n          {toggling ? \"...\" : isEnabled ? \"Disable\" : \"Enable\"}\n        </button>\n      )}\n\n      {/* Status for client integrations */}\n      {platform.isClient && (\n        <div className=\"rounded-md border border-border bg-muted/30 px-2.5 py-2 text-[10px] text-muted-foreground\">\n          This agent's A2A endpoint is automatically available. No configuration\n          needed.\n        </div>\n      )}\n\n      {serverStatus?.error && (\n        <p className=\"text-[10px] text-destructive mt-2\">\n          {serverStatus.error}\n        </p>\n      )}\n    </div>\n  );\n}\n\n// ─── Add integration picker ──────────────────────────────────────────────────\n\nfunction AddIntegrationPicker({\n  connectedIds,\n  onSelect,\n}: {\n  connectedIds: Set<string>;\n  onSelect: (platform: PlatformInfo) => void;\n}) {\n  return (\n    <div className=\"space-y-1\">\n      {PLATFORMS.filter((p) => !connectedIds.has(p.id)).map((platform) => (\n        <button\n          key={platform.id}\n          onClick={() => onSelect(platform)}\n          className=\"flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left hover:bg-accent/50\"\n        >\n          <platform.icon size={14} className=\"shrink-0 text-muted-foreground\" />\n          <div className=\"flex-1 min-w-0\">\n            <div className=\"text-[11px] font-medium text-foreground\">\n              {platform.label}\n            </div>\n            <div className=\"text-[10px] text-muted-foreground truncate\">\n              {platform.description}\n            </div>\n          </div>\n        </button>\n      ))}\n    </div>\n  );\n}\n\n// ─── Main panel ──────────────────────────────────────────────────────────────\n\nexport function IntegrationsPanel() {\n  const { statuses, loading, refetch } = useIntegrationStatus();\n  const [selectedPlatform, setSelectedPlatform] = useState<PlatformInfo | null>(\n    null,\n  );\n  const [showPicker, setShowPicker] = useState(false);\n\n  const statusMap = new Map(statuses.map((s) => [s.platform, s]));\n\n  // Show connected (enabled or configured) integrations\n  const connectedPlatforms = PLATFORMS.filter((p) => {\n    const s = statusMap.get(p.id);\n    return s?.configured || s?.enabled;\n  });\n\n  const connectedIds = new Set(connectedPlatforms.map((p) => p.id));\n\n  if (selectedPlatform) {\n    return (\n      <IntegrationDetail\n        platform={selectedPlatform}\n        serverStatus={statusMap.get(selectedPlatform.id)}\n        onBack={() => setSelectedPlatform(null)}\n        onRefresh={refetch}\n      />\n    );\n  }\n\n  if (showPicker) {\n    return (\n      <div>\n        <button\n          onClick={() => setShowPicker(false)}\n          className=\"flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground mb-2\"\n        >\n          <IconChevronLeft size={12} />\n          Back\n        </button>\n        <div className=\"text-[10px] font-medium text-muted-foreground mb-1.5\">\n          Add a chat integration\n        </div>\n        <AddIntegrationPicker\n          connectedIds={connectedIds}\n          onSelect={(p) => {\n            setSelectedPlatform(p);\n            setShowPicker(false);\n          }}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div>\n      <div className=\"flex items-center justify-between mb-1.5\">\n        <div>\n          <div className=\"text-xs font-medium text-foreground\">\n            Chat Integrations\n          </div>\n          <div className=\"text-[10px] text-muted-foreground\">\n            Talk to this agent from other platforms\n          </div>\n        </div>\n        <button\n          onClick={() => setShowPicker(true)}\n          className=\"flex h-5 w-5 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50\"\n          title=\"Add integration\"\n        >\n          <IconPlus size={12} />\n        </button>\n      </div>\n\n      {loading ? (\n        <div className=\"space-y-1.5\">\n          <div className=\"h-6 w-full rounded bg-muted/50 animate-pulse\" />\n          <div className=\"h-6 w-3/4 rounded bg-muted/50 animate-pulse\" />\n        </div>\n      ) : connectedPlatforms.length === 0 ? (\n        <div className=\"space-y-2\">\n          <button\n            onClick={() => setShowPicker(true)}\n            className=\"flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-[11px] text-muted-foreground hover:text-foreground hover:bg-accent/30\"\n          >\n            <IconPlus size={12} className=\"shrink-0\" />\n            Add integration\n          </button>\n          <div className=\"rounded-md border border-border bg-muted/30 px-2.5 py-2 text-[10px] text-muted-foreground\">\n            For a central Slack or Telegram entrypoint that can route work\n            across multiple apps, use the{\" \"}\n            <a\n              href=\"https://dispatch.agent-native.com\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              className=\"no-underline font-medium text-foreground hover:text-foreground/80\"\n            >\n              dispatch template\n            </a>\n            .\n          </div>\n        </div>\n      ) : (\n        <div className=\"space-y-2\">\n          {connectedPlatforms.map((platform) => {\n            const s = statusMap.get(platform.id);\n            return (\n              <button\n                key={platform.id}\n                onClick={() => setSelectedPlatform(platform)}\n                className=\"flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left hover:bg-accent/50\"\n              >\n                <platform.icon\n                  size={14}\n                  className=\"shrink-0 text-muted-foreground\"\n                />\n                <span className=\"flex-1 text-[11px] font-medium text-foreground truncate\">\n                  {platform.label}\n                </span>\n                {s && (\n                  <span\n                    className={`inline-block h-1.5 w-1.5 rounded-full shrink-0 ${\n                      s.enabled && s.configured\n                        ? \"bg-green-500\"\n                        : s.configured\n                          ? \"bg-yellow-500\"\n                          : \"bg-gray-400\"\n                    }`}\n                  />\n                )}\n              </button>\n            );\n          })}\n          <div className=\"rounded-md border border-border bg-muted/30 px-2.5 py-2 text-[10px] text-muted-foreground\">\n            Need one shared messaging surface for your workspace? Connect Slack\n            or Telegram to a dispatch app and let it delegate to other agents\n            over A2A.\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"IntegrationsPanel.js","sourceRoot":"","sources":["../../../src/client/integrations/IntegrationsPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useCallback } from \"react\";\nimport {\n  IconPlus,\n  IconBrandSlack,\n  IconBrandTelegram,\n  IconBrandWhatsapp,\n  IconBrandGoogleDrive,\n  IconTerminal2,\n  IconBuildingSkyscraper,\n  IconMessageCircle,\n  IconCopy,\n  IconCheck,\n  IconChevronLeft,\n  IconExternalLink,\n  IconCircleCheck,\n} from \"@tabler/icons-react\";\nimport {\n  useIntegrationStatus,\n  type IntegrationStatus,\n} from \"./useIntegrationStatus.js\";\nimport { agentNativePath } from \"../api-path.js\";\n\n// ─── Platform config ─────────────────────────────────────────────────────────\n\ninterface PlatformInfo {\n  id: string;\n  label: string;\n  icon: React.ComponentType<any>;\n  description: string;\n  envVars: string[];\n  setupSteps: string[];\n  docsUrl?: string;\n  /** If true, this is a \"client\" integration (user connects TO the agent) rather than a webhook */\n  isClient?: boolean;\n}\n\nconst PLATFORMS: PlatformInfo[] = [\n  {\n    id: \"slack\",\n    label: \"Slack\",\n    icon: IconBrandSlack,\n    description: \"Message your agent from any Slack channel or DM.\",\n    envVars: [\"SLACK_BOT_TOKEN\", \"SLACK_SIGNING_SECRET\"],\n    setupSteps: [\n      \"Create a Slack app at api.slack.com/apps\",\n      'Enable \"Event Subscriptions\" and point to your webhook URL',\n      \"Subscribe to message.im and app_mention events\",\n      \"Install the app to your workspace\",\n      \"Copy the Bot Token and Signing Secret into your environment\",\n    ],\n    docsUrl: \"https://api.slack.com/apps\",\n  },\n  {\n    id: \"telegram\",\n    label: \"Telegram\",\n    icon: IconBrandTelegram,\n    description: \"Chat with your agent via a Telegram bot.\",\n    envVars: [\"TELEGRAM_BOT_TOKEN\"],\n    setupSteps: [\n      \"Message @BotFather on Telegram to create a new bot\",\n      \"Copy the bot token into your environment\",\n      'Click \"Setup webhook\" below to register automatically',\n    ],\n  },\n  {\n    id: \"whatsapp\",\n    label: \"WhatsApp\",\n    icon: IconBrandWhatsapp,\n    description: \"Connect your agent to WhatsApp Business.\",\n    envVars: [\"WHATSAPP_TOKEN\", \"WHATSAPP_VERIFY_TOKEN\"],\n    setupSteps: [\n      \"Create a Meta Business app at developers.facebook.com\",\n      \"Set up WhatsApp Business API\",\n      \"Configure the webhook URL and verify token\",\n      \"Copy the access token into your environment\",\n    ],\n    docsUrl: \"https://developers.facebook.com/docs/whatsapp\",\n  },\n  {\n    id: \"google-docs\",\n    label: \"Google Docs\",\n    icon: IconBrandGoogleDrive,\n    description: \"Tag the agent in Google Doc comments to get responses.\",\n    envVars: [\"GOOGLE_SERVICE_ACCOUNT_KEY\"],\n    setupSteps: [\n      \"Create a Google Cloud service account and download the JSON key\",\n      \"Set GOOGLE_SERVICE_ACCOUNT_KEY in your environment (JSON string or file path)\",\n      \"Share your Google Docs with the service account email\",\n      'Write a comment containing \"@Agent\" to trigger the agent',\n    ],\n  },\n  {\n    id: \"openclaw\",\n    label: \"OpenClaw\",\n    icon: IconTerminal2,\n    description: \"Access this agent from OpenClaw's unified agent interface.\",\n    envVars: [],\n    isClient: true,\n    setupSteps: [\n      \"Install OpenClaw: npm install -g openclaw\",\n      \"Add this agent's URL as a provider in your OpenClaw config\",\n      \"OpenClaw discovers your agent's capabilities via the A2A protocol\",\n    ],\n  },\n  {\n    id: \"claude-code\",\n    label: \"Claude Code\",\n    icon: IconTerminal2,\n    description:\n      \"Let Claude Code call this agent via A2A for data and actions.\",\n    envVars: [],\n    isClient: true,\n    setupSteps: [\n      \"Your agent exposes an A2A endpoint at /.well-known/agent-card.json\",\n      \"In Claude Code, reference your agent's URL when asking for data\",\n      \"Claude Code will discover and call your agent's skills automatically\",\n    ],\n  },\n  {\n    id: \"builder\",\n    label: \"Builder.io\",\n    icon: IconBuildingSkyscraper,\n    description:\n      \"One chat interface that orchestrates all your agents together.\",\n    envVars: [],\n    isClient: true,\n    setupSteps: [\n      \"Connect your agent-native apps in your Builder.io workspace\",\n      \"Builder.io discovers each agent's skills via A2A\",\n      \"Chat with one agent that can trigger actions across all your apps\",\n    ],\n    docsUrl: \"https://www.builder.io\",\n  },\n];\n\n// ─── Integration detail view ─────────────────────────────────────────────────\n\nfunction IntegrationDetail({\n  platform,\n  serverStatus,\n  onBack,\n  onRefresh,\n}: {\n  platform: PlatformInfo;\n  serverStatus?: IntegrationStatus;\n  onBack: () => void;\n  onRefresh: () => void;\n}) {\n  const [toggling, setToggling] = useState(false);\n  const [copied, setCopied] = useState(false);\n  const [toggleError, setToggleError] = useState<string | null>(null);\n\n  const handleToggle = useCallback(async () => {\n    setToggling(true);\n    setToggleError(null);\n    try {\n      const action = serverStatus?.enabled ? \"disable\" : \"enable\";\n      const res = await fetch(\n        agentNativePath(`/_agent-native/integrations/${platform.id}/${action}`),\n        { method: \"POST\" },\n      );\n      if (res.ok) {\n        onRefresh();\n        return;\n      }\n      // Surface the real reason instead of silently doing nothing.\n      // The endpoint returns `{ error }` for known failures (admin gating,\n      // missing secrets, etc.); fall back to status text otherwise.\n      const data = (await res.json().catch(() => null)) as {\n        error?: string;\n      } | null;\n      setToggleError(\n        data?.error ||\n          res.statusText ||\n          `Couldn't ${action} ${platform.label} (HTTP ${res.status})`,\n      );\n    } catch (err) {\n      setToggleError(\n        err instanceof Error\n          ? err.message\n          : \"Network error reaching the server\",\n      );\n    } finally {\n      setToggling(false);\n    }\n  }, [platform.id, platform.label, serverStatus?.enabled, onRefresh]);\n\n  const handleCopy = useCallback(async (text: string) => {\n    await navigator.clipboard.writeText(text);\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n  }, []);\n\n  const isConfigured = serverStatus?.configured ?? false;\n  const isEnabled = serverStatus?.enabled ?? false;\n\n  return (\n    <div>\n      <button\n        onClick={onBack}\n        className=\"flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground mb-2\"\n      >\n        <IconChevronLeft size={12} />\n        Back\n      </button>\n\n      <div className=\"flex items-center gap-2 mb-2\">\n        <platform.icon size={18} className=\"text-foreground shrink-0\" />\n        <div>\n          <div className=\"text-xs font-medium text-foreground\">\n            {platform.label}\n          </div>\n          <div className=\"text-[10px] text-muted-foreground\">\n            {platform.description}\n          </div>\n        </div>\n      </div>\n\n      {/* Setup steps */}\n      <div className=\"mb-3\">\n        <div className=\"text-[10px] font-medium text-muted-foreground mb-1.5\">\n          Setup\n        </div>\n        <ol className=\"space-y-1\">\n          {platform.setupSteps.map((step, i) => (\n            <li\n              key={i}\n              className=\"flex gap-1.5 text-[10px] text-muted-foreground leading-relaxed\"\n            >\n              <span className=\"shrink-0 text-muted-foreground/50\">\n                {i + 1}.\n              </span>\n              {step}\n            </li>\n          ))}\n        </ol>\n      </div>\n\n      {/* Required secrets */}\n      {platform.envVars.length > 0 && (\n        <div className=\"mb-3\">\n          <div className=\"text-[10px] font-medium text-muted-foreground mb-1\">\n            Required secrets\n          </div>\n          <div className=\"space-y-0.5\">\n            {platform.envVars.map((v) => (\n              <div key={v} className=\"flex items-center gap-1\">\n                <code className=\"text-[10px] text-foreground bg-muted px-1 py-0.5 rounded\">\n                  {v}\n                </code>\n                {isConfigured && (\n                  <IconCircleCheck\n                    size={11}\n                    className=\"text-green-500 shrink-0\"\n                  />\n                )}\n              </div>\n            ))}\n          </div>\n          {!isConfigured && (\n            <p className=\"text-[10px] text-amber-500 mt-1\">\n              Set these in your .env file or environment to connect.\n            </p>\n          )}\n        </div>\n      )}\n\n      {/* Webhook URL */}\n      {serverStatus?.webhookUrl && !platform.isClient && (\n        <div className=\"mb-3\">\n          <div className=\"text-[10px] font-medium text-muted-foreground mb-1\">\n            Webhook URL\n          </div>\n          <div className=\"flex items-center gap-1\">\n            <code className=\"flex-1 truncate rounded bg-muted px-1.5 py-0.5 text-[10px] text-foreground\">\n              {serverStatus.webhookUrl}\n            </code>\n            <button\n              onClick={() => handleCopy(serverStatus.webhookUrl!)}\n              className=\"shrink-0 rounded p-0.5 text-muted-foreground hover:text-foreground hover:bg-accent/50\"\n              title=\"Copy\"\n            >\n              {copied ? <IconCheck size={12} /> : <IconCopy size={12} />}\n            </button>\n          </div>\n        </div>\n      )}\n\n      {/* Docs link */}\n      {platform.docsUrl && (\n        <a\n          href={platform.docsUrl}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          className=\"flex items-center gap-1 text-[10px] text-blue-400 hover:text-blue-300 mb-3\"\n        >\n          Documentation\n          <IconExternalLink size={10} />\n        </a>\n      )}\n\n      {/* Enable/disable for server integrations */}\n      {serverStatus && !platform.isClient && isConfigured && (\n        <button\n          onClick={handleToggle}\n          disabled={toggling}\n          className={`w-full rounded-md border px-2 py-1.5 text-[11px] font-medium disabled:opacity-50 ${\n            isEnabled\n              ? \"border-border text-foreground hover:bg-accent/50\"\n              : \"border-green-600/50 text-green-400 hover:bg-green-900/20\"\n          }`}\n        >\n          {toggling ? \"...\" : isEnabled ? \"Disable\" : \"Enable\"}\n        </button>\n      )}\n\n      {/* Status for client integrations */}\n      {platform.isClient && (\n        <div className=\"rounded-md border border-border bg-muted/30 px-2.5 py-2 text-[10px] text-muted-foreground\">\n          This agent's A2A endpoint is automatically available. No configuration\n          needed.\n        </div>\n      )}\n\n      {serverStatus?.error && (\n        <p className=\"text-[10px] text-destructive mt-2\">\n          {serverStatus.error}\n        </p>\n      )}\n\n      {toggleError && (\n        <p className=\"text-[10px] text-destructive mt-2\">{toggleError}</p>\n      )}\n    </div>\n  );\n}\n\n// ─── Add integration picker ──────────────────────────────────────────────────\n\nfunction AddIntegrationPicker({\n  connectedIds,\n  onSelect,\n}: {\n  connectedIds: Set<string>;\n  onSelect: (platform: PlatformInfo) => void;\n}) {\n  return (\n    <div className=\"space-y-1\">\n      {PLATFORMS.filter((p) => !connectedIds.has(p.id)).map((platform) => (\n        <button\n          key={platform.id}\n          onClick={() => onSelect(platform)}\n          className=\"flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left hover:bg-accent/50\"\n        >\n          <platform.icon size={14} className=\"shrink-0 text-muted-foreground\" />\n          <div className=\"flex-1 min-w-0\">\n            <div className=\"text-[11px] font-medium text-foreground\">\n              {platform.label}\n            </div>\n            <div className=\"text-[10px] text-muted-foreground truncate\">\n              {platform.description}\n            </div>\n          </div>\n        </button>\n      ))}\n    </div>\n  );\n}\n\n// ─── Main panel ──────────────────────────────────────────────────────────────\n\nexport function IntegrationsPanel() {\n  const { statuses, loading, refetch } = useIntegrationStatus();\n  const [selectedPlatform, setSelectedPlatform] = useState<PlatformInfo | null>(\n    null,\n  );\n  const [showPicker, setShowPicker] = useState(false);\n\n  const statusMap = new Map(statuses.map((s) => [s.platform, s]));\n\n  // Show connected (enabled or configured) integrations\n  const connectedPlatforms = PLATFORMS.filter((p) => {\n    const s = statusMap.get(p.id);\n    return s?.configured || s?.enabled;\n  });\n\n  const connectedIds = new Set(connectedPlatforms.map((p) => p.id));\n\n  if (selectedPlatform) {\n    return (\n      <IntegrationDetail\n        platform={selectedPlatform}\n        serverStatus={statusMap.get(selectedPlatform.id)}\n        onBack={() => setSelectedPlatform(null)}\n        onRefresh={refetch}\n      />\n    );\n  }\n\n  if (showPicker) {\n    return (\n      <div>\n        <button\n          onClick={() => setShowPicker(false)}\n          className=\"flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground mb-2\"\n        >\n          <IconChevronLeft size={12} />\n          Back\n        </button>\n        <div className=\"text-[10px] font-medium text-muted-foreground mb-1.5\">\n          Add a chat integration\n        </div>\n        <AddIntegrationPicker\n          connectedIds={connectedIds}\n          onSelect={(p) => {\n            setSelectedPlatform(p);\n            setShowPicker(false);\n          }}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div>\n      <div className=\"flex items-center justify-between mb-1.5\">\n        <div>\n          <div className=\"text-xs font-medium text-foreground\">\n            Chat Integrations\n          </div>\n          <div className=\"text-[10px] text-muted-foreground\">\n            Talk to this agent from other platforms\n          </div>\n        </div>\n        <button\n          onClick={() => setShowPicker(true)}\n          className=\"flex h-5 w-5 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50\"\n          title=\"Add integration\"\n        >\n          <IconPlus size={12} />\n        </button>\n      </div>\n\n      {loading ? (\n        <div className=\"space-y-1.5\">\n          <div className=\"h-6 w-full rounded bg-muted/50 animate-pulse\" />\n          <div className=\"h-6 w-3/4 rounded bg-muted/50 animate-pulse\" />\n        </div>\n      ) : connectedPlatforms.length === 0 ? (\n        <div className=\"space-y-2\">\n          <button\n            onClick={() => setShowPicker(true)}\n            className=\"flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-[11px] text-muted-foreground hover:text-foreground hover:bg-accent/30\"\n          >\n            <IconPlus size={12} className=\"shrink-0\" />\n            Add integration\n          </button>\n          <div className=\"rounded-md border border-border bg-muted/30 px-2.5 py-2 text-[10px] text-muted-foreground\">\n            For a central Slack or Telegram entrypoint that can route work\n            across multiple apps, use the{\" \"}\n            <a\n              href=\"https://dispatch.agent-native.com\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              className=\"no-underline font-medium text-foreground hover:text-foreground/80\"\n            >\n              dispatch template\n            </a>\n            .\n          </div>\n        </div>\n      ) : (\n        <div className=\"space-y-2\">\n          {connectedPlatforms.map((platform) => {\n            const s = statusMap.get(platform.id);\n            return (\n              <button\n                key={platform.id}\n                onClick={() => setSelectedPlatform(platform)}\n                className=\"flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left hover:bg-accent/50\"\n              >\n                <platform.icon\n                  size={14}\n                  className=\"shrink-0 text-muted-foreground\"\n                />\n                <span className=\"flex-1 text-[11px] font-medium text-foreground truncate\">\n                  {platform.label}\n                </span>\n                {s && (\n                  <span\n                    className={`inline-block h-1.5 w-1.5 rounded-full shrink-0 ${\n                      s.enabled && s.configured\n                        ? \"bg-green-500\"\n                        : s.configured\n                          ? \"bg-yellow-500\"\n                          : \"bg-gray-400\"\n                    }`}\n                  />\n                )}\n              </button>\n            );\n          })}\n          <div className=\"rounded-md border border-border bg-muted/30 px-2.5 py-2 text-[10px] text-muted-foreground\">\n            Need one shared messaging surface for your workspace? Connect Slack\n            or Telegram to a dispatch app and let it delegate to other agents\n            over A2A.\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/client/notifications/NotificationsBell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationsBell.d.ts","sourceRoot":"","sources":["../../../src/client/notifications/NotificationsBell.tsx"],"names":[],"mappings":"AAcA,UAAU,sBAAsB;IAC9B,wEAAwE;IACxE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAMD;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,MAAwB,EACxB,SAAS,EACT,oBAA4B,GAC7B,EAAE,sBAAsB,2CAoTxB"}
+{"version":3,"file":"NotificationsBell.d.ts","sourceRoot":"","sources":["../../../src/client/notifications/NotificationsBell.tsx"],"names":[],"mappings":"AAmBA,UAAU,sBAAsB;IAC9B,wEAAwE;IACxE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAMD;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,MAAwB,EACxB,SAAS,EACT,oBAA4B,GAC7B,EAAE,sBAAsB,2CAmQxB"}

package/dist/client/notifications/NotificationsBell.js

@@ -3,6 +3,7 @@ import { agentNativePath } from "../api-path.js";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { IconBell, IconBellRinging, IconLoader2, IconX, } from "@tabler/icons-react";
 import { usePausingInterval } from "../use-pausing-interval.js";
+import { Popover, PopoverContent, PopoverTrigger, } from "../components/ui/popover.js";
 const POLL_MS_DEFAULT = 10_000;
 const SUPPORTS_NOTIFICATION = typeof window !== "undefined" && "Notification" in window;
 /**
@@ -16,7 +17,6 @@ export function NotificationsBell({ pollMs = POLL_MS_DEFAULT, className, browser
     const [unreadCount, setUnreadCount] = useState(0);
     const [open, setOpen] = useState(false);
     const [items, setItems] = useState(null);
-    const [menuPosition, setMenuPosition] = useState(null);
     // Init to "default" unconditionally so server and client render the same
     // HTML — reading Notification.permission at init would diverge between SSR
     // ("denied", no API) and hydration ("default"/"granted"), causing a mismatch
@@ -27,8 +27,6 @@ export function NotificationsBell({ pollMs = POLL_MS_DEFAULT, className, browser
         if (SUPPORTS_NOTIFICATION)
             setPermission(Notification.permission);
     }, []);
-    const menuRef = useRef(null);
-    const triggerRef = useRef(null);
     // Ids already popped as browser notifications. Seeded on first run so
     // existing unread don't pop retroactively on page load.
     const seenIdsRef = useRef(null);
@@ -105,39 +103,6 @@ export function NotificationsBell({ pollMs = POLL_MS_DEFAULT, className, browser
             return;
         loadItems();
     }, [open, loadItems]);
-    useEffect(() => {
-        if (!open)
-            return;
-        const updatePosition = () => {
-            const rect = triggerRef.current?.getBoundingClientRect();
-            if (!rect)
-                return;
-            const width = 320;
-            const margin = 12;
-            setMenuPosition({
-                top: rect.bottom + 8,
-                left: Math.min(Math.max(rect.right - width, margin), window.innerWidth - width - margin),
-            });
-        };
-        updatePosition();
-        window.addEventListener("resize", updatePosition);
-        window.addEventListener("scroll", updatePosition, true);
-        return () => {
-            window.removeEventListener("resize", updatePosition);
-            window.removeEventListener("scroll", updatePosition, true);
-        };
-    }, [open]);
-    useEffect(() => {
-        if (!open)
-            return;
-        const onDocClick = (e) => {
-            if (menuRef.current && !menuRef.current.contains(e.target)) {
-                setOpen(false);
-            }
-        };
-        document.addEventListener("mousedown", onDocClick);
-        return () => document.removeEventListener("mousedown", onDocClick);
-    }, [open]);
     const markRead = async (id) => {
         try {
             await fetch(agentNativePath(`/_agent-native/notifications/${id}/read`), {
@@ -180,11 +145,8 @@ export function NotificationsBell({ pollMs = POLL_MS_DEFAULT, className, browser
     };
     const hasUnread = unreadCount > 0;
     const Icon = hasUnread ? IconBellRinging : IconBell;
-    return (_jsxs("div", { ref: menuRef, className: "an-notifications-bell relative inline-flex" +
-            (className ? ` ${className}` : ""), children: [_jsxs("button", { ref: triggerRef, type: "button", "aria-label": hasUnread ? `${unreadCount} unread notifications` : "Notifications", onClick: () => setOpen((v) => !v), className: "an-notifications-bell__trigger relative inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent/40 hover:text-foreground", children: [_jsx(Icon, { size: 18, "aria-hidden": true }), hasUnread ? (_jsx("span", { "aria-hidden": true, className: "an-notifications-bell__badge absolute -right-0.5 -top-0.5 rounded-full bg-destructive px-1 text-[10px] leading-[14px] font-medium text-destructive-foreground", children: unreadCount > 99 ? "99+" : unreadCount })) : null] }), open ? (_jsxs("div", { role: "menu", className: "an-notifications-bell__menu fixed z-[2100] w-80 rounded-md border border-border bg-popover text-popover-foreground shadow-lg", style: {
-                    top: menuPosition?.top ?? 48,
-                    left: menuPosition?.left ?? 12,
-                }, children: [_jsxs("div", { className: "flex items-center justify-between border-b border-border px-3 py-2 text-sm font-medium", children: [_jsx("span", { children: "Notifications" }), hasUnread ? (_jsx("button", { type: "button", onClick: markAllRead, className: "text-xs text-primary hover:underline", children: "Mark all read" })) : null] }), browserNotifications &&
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", "aria-label": hasUnread ? `${unreadCount} unread notifications` : "Notifications", className: "an-notifications-bell__trigger relative inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent/40 hover:text-foreground" +
+                        (className ? ` ${className}` : ""), children: [_jsx(Icon, { size: 18, "aria-hidden": true }), hasUnread ? (_jsx("span", { "aria-hidden": true, className: "an-notifications-bell__badge absolute -right-0.5 -top-0.5 rounded-full bg-destructive px-1 text-[10px] leading-[14px] font-medium text-destructive-foreground", children: unreadCount > 99 ? "99+" : unreadCount })) : null] }) }), _jsxs(PopoverContent, { align: "end", sideOffset: 8, className: "an-notifications-bell__menu w-80 p-0", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-border px-3 py-2 text-sm font-medium", children: [_jsx("span", { children: "Notifications" }), hasUnread ? (_jsx("button", { type: "button", onClick: markAllRead, className: "text-xs text-primary hover:underline", children: "Mark all read" })) : null] }), browserNotifications &&
                         SUPPORTS_NOTIFICATION &&
                         permission === "default" ? (_jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-border bg-accent/40 px-3 py-2 text-xs text-foreground", children: [_jsx("span", { children: "Get a system popup for new notifications." }), _jsx("button", { type: "button", onClick: async () => {
                                     const result = await Notification.requestPermission();
@@ -193,7 +155,7 @@ export function NotificationsBell({ pollMs = POLL_MS_DEFAULT, className, browser
                                 (n.readAt ? "opacity-60" : ""), children: [_jsxs("button", { type: "button", onClick: () => (n.readAt ? undefined : markRead(n.id)), className: "flex w-full flex-col items-start gap-0.5 px-3 py-2 pr-8 text-left", children: [_jsxs("div", { className: "flex w-full items-center justify-between gap-2", children: [_jsx("span", { className: "truncate text-sm font-medium text-foreground", children: n.title }), _jsx(SeverityBadge, { severity: n.severity })] }), n.body ? (_jsx("span", { className: "line-clamp-2 text-xs text-muted-foreground", children: n.body })) : null, _jsx("span", { className: "text-[10px] text-muted-foreground/70", children: new Date(n.createdAt).toLocaleString() })] }), _jsx("button", { type: "button", "aria-label": "Dismiss notification", onClick: (e) => {
                                         e.stopPropagation();
                                         void dismiss(n.id);
-                                    }, className: "absolute right-2 top-2 hidden rounded p-0.5 text-muted-foreground hover:bg-accent hover:text-foreground group-hover:flex", children: _jsx(IconX, { size: 12 }) })] }, n.id)))) : (_jsx("div", { className: "p-4 text-sm text-muted-foreground", children: "No notifications." })) })] })) : null] }));
+                                    }, className: "absolute right-2 top-2 hidden rounded p-0.5 text-muted-foreground hover:bg-accent hover:text-foreground group-hover:flex", children: _jsx(IconX, { size: 12 }) })] }, n.id)))) : (_jsx("div", { className: "p-4 text-sm text-muted-foreground", children: "No notifications." })) })] })] }));
 }
 // Severity color pairs — use /20 opacity backdrops that work against both
 // light and dark theme backgrounds; text uses 700/300 so it stays readable

package/dist/client/notifications/NotificationsBell.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationsBell.js","sourceRoot":"","sources":["../../../src/client/notifications/NotificationsBell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAc,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,EACL,QAAQ,EACR,eAAe,EACf,WAAW,EACX,KAAK,GACN,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAoBhE,MAAM,eAAe,GAAG,MAAM,CAAC;AAC/B,MAAM,qBAAqB,GACzB,OAAO,MAAM,KAAK,WAAW,IAAI,cAAc,IAAI,MAAM,CAAC;AAE5D;;;;;;GAMG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAChC,MAAM,GAAG,eAAe,EACxB,SAAS,EACT,oBAAoB,GAAG,KAAK,GACL;IACvB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAClD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAA2B,IAAI,CAAC,CAAC;IACnE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAGtC,IAAI,CAAC,CAAC;IAChB,yEAAyE;IACzE,2EAA2E;IAC3E,6EAA6E;IAC7E,0EAA0E;IAC1E,0CAA0C;IAC1C,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAC/B,QAAQ,CAAyB,SAAS,CAAC,CAAC;IAE9C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,qBAAqB;YAAE,aAAa,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IACpE,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,OAAO,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACpD,MAAM,UAAU,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IAC1D,sEAAsE;IACtE,wDAAwD;IACxD,MAAM,UAAU,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IAEpD,MAAM,SAAS,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QACvC,IAAI,CAAC;YACH,MAAM,GAAG,GAAG,MAAM,KAAK,CACrB,eAAe,CAAC,uCAAuC,CAAC,CACzD,CAAC;YACF,IAAI,CAAC,GAAG,CAAC,EAAE;gBAAE,OAAO;YACpB,MAAM,IAAI,GAAG,CAAC,MAAM,GAAG,CAAC,IAAI,EAAE,CAAsB,CAAC;YACrD,QAAQ,CAAC,IAAI,CAAC,CAAC;QACjB,CAAC;QAAC,MAAM,CAAC;YACP,cAAc;QAChB,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,2EAA2E;IAC3E,yEAAyE;IACzE,yEAAyE;IACzE,2EAA2E;IAC3E,2EAA2E;IAC3E,MAAM,OAAO,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QACrC,IAAI,oBAAoB,EAAE,CAAC;YACzB,IAAI,CAAC;gBACH,MAAM,GAAG,GAAG,MAAM,KAAK,CACrB,eAAe,CAAC,mDAAmD,CAAC,CACrE,CAAC;gBACF,IAAI,CAAC,GAAG,CAAC,EAAE;oBAAE,OAAO;gBACpB,MAAM,IAAI,GAAG,CAAC,MAAM,GAAG,CAAC,IAAI,EAAE,CAAsB,CAAC;gBACrD,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;gBAC5B,8DAA8D;gBAC9D,mEAAmE;gBACnE,iEAAiE;gBACjE,+CAA+C;gBAC/C,MAAM,IAAI,GAAG,UAAU,CAAC,OAAO,CAAC;gBAChC,MAAM,IAAI,GAAG,IAAI,GAAG,EAAU,CAAC;gBAC/B,KAAK,MAAM,CAAC,IAAI,IAAI,EAAE,CAAC;oBACrB,MAAM,WAAW,GAAG,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC;oBAC5C,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;oBACf,IAAI,WAAW;wBAAE,SAAS;oBAC1B,IAAI,CAAC,qBAAqB;wBAAE,SAAS;oBACrC,IAAI,YAAY,CAAC,UAAU,KAAK,SAAS;wBAAE,SAAS;oBACpD,IAAI,CAAC;wBACH,IAAI,YAAY,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;oBACzD,CAAC;oBAAC,MAAM,CAAC;wBACP,8DAA8D;wBAC9D,uCAAuC;oBACzC,CAAC;gBACH,CAAC;gBACD,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;YAC5B,CAAC;YAAC,MAAM,CAAC;gBACP,cAAc;YAChB,CAAC;YACD,OAAO;QACT,CAAC;QACD,IAAI,CAAC;YACH,MAAM,GAAG,GAAG,MAAM,KAAK,CACrB,eAAe,CAAC,oCAAoC,CAAC,CACtD,CAAC;YACF,IAAI,CAAC,GAAG,CAAC,EAAE;gBAAE,OAAO;YACpB,MAAM,IAAI,GAAG,CAAC,MAAM,GAAG,CAAC,IAAI,EAAE,CAAsB,CAAC;YACrD,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC7B,CAAC;QAAC,MAAM,CAAC;YACP,cAAc;QAChB,CAAC;IACH,CAAC,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAC;IAE3B,kBAAkB,CAChB,OAAO,EACP,MAAM;IACN,qBAAqB,CAAC,CAAC,oBAAoB,CAC5C,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,IAAI;YAAE,OAAO;QAClB,SAAS,EAAE,CAAC;IACd,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;IAEtB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,IAAI;YAAE,OAAO;QAClB,MAAM,cAAc,GAAG,GAAG,EAAE;YAC1B,MAAM,IAAI,GAAG,UAAU,CAAC,OAAO,EAAE,qBAAqB,EAAE,CAAC;YACzD,IAAI,CAAC,IAAI;gBAAE,OAAO;YAClB,MAAM,KAAK,GAAG,GAAG,CAAC;YAClB,MAAM,MAAM,GAAG,EAAE,CAAC;YAClB,eAAe,CAAC;gBACd,GAAG,EAAE,IAAI,CAAC,MAAM,GAAG,CAAC;gBACpB,IAAI,EAAE,IAAI,CAAC,GAAG,CACZ,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,EAAE,MAAM,CAAC,EACpC,MAAM,CAAC,UAAU,GAAG,KAAK,GAAG,MAAM,CACnC;aACF,CAAC,CAAC;QACL,CAAC,CAAC;QACF,cAAc,EAAE,CAAC;QACjB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;QAClD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,cAAc,EAAE,IAAI,CAAC,CAAC;QACxD,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;YACrD,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,cAAc,EAAE,IAAI,CAAC,CAAC;QAC7D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,IAAI;YAAE,OAAO;QAClB,MAAM,UAAU,GAAG,CAAC,CAAa,EAAE,EAAE;YACnC,IAAI,OAAO,CAAC,OAAO,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC,EAAE,CAAC;gBACnE,OAAO,CAAC,KAAK,CAAC,CAAC;YACjB,CAAC;QACH,CAAC,CAAC;QACF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC;QACnD,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC;IACrE,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,QAAQ,GAAG,KAAK,EAAE,EAAU,EAAE,EAAE;QACpC,IAAI,CAAC;YACH,MAAM,KAAK,CAAC,eAAe,CAAC,gCAAgC,EAAE,OAAO,CAAC,EAAE;gBACtE,MAAM,EAAE,MAAM;aACf,CAAC,CAAC;YACH,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,CAChB,IAAI;gBACF,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CACb,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,MAAM,EAAE,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAC7D;gBACH,CAAC,CAAC,IAAI,CACT,CAAC;YACF,OAAO,EAAE,CAAC;QACZ,CAAC;QAAC,MAAM,CAAC;YACP,cAAc;QAChB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,KAAK,IAAI,EAAE;QAC7B,IAAI,CAAC;YACH,MAAM,KAAK,CAAC,eAAe,CAAC,uCAAuC,CAAC,EAAE;gBACpE,MAAM,EAAE,MAAM;aACf,CAAC,CAAC;YACH,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,CAChB,IAAI;gBACF,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CACb,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,MAAM,EAAE,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,EAAE,CAC1D;gBACH,CAAC,CAAC,IAAI,CACT,CAAC;YACF,cAAc,CAAC,CAAC,CAAC,CAAC;QACpB,CAAC;QAAC,MAAM,CAAC;YACP,cAAc;QAChB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,KAAK,EAAE,EAAU,EAAE,EAAE;QACnC,IAAI,CAAC;YACH,MAAM,KAAK,CAAC,eAAe,CAAC,gCAAgC,EAAE,EAAE,CAAC,EAAE;gBACjE,MAAM,EAAE,QAAQ;aACjB,CAAC,CAAC;YACH,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;YACpE,OAAO,EAAE,CAAC;QACZ,CAAC;QAAC,MAAM,CAAC;YACP,cAAc;QAChB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,WAAW,GAAG,CAAC,CAAC;IAClC,MAAM,IAAI,GAAG,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,QAAQ,CAAC;IAEpD,OAAO,CACL,eACE,GAAG,EAAE,OAAO,EACZ,SAAS,EACP,4CAA4C;YAC5C,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,aAGpC,kBACE,GAAG,EAAE,UAAU,EACf,IAAI,EAAC,QAAQ,gBAEX,SAAS,CAAC,CAAC,CAAC,GAAG,WAAW,uBAAuB,CAAC,CAAC,CAAC,eAAe,EAErE,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EACjC,SAAS,EAAC,mKAAmK,aAE7K,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,wBAAgB,EAC7B,SAAS,CAAC,CAAC,CAAC,CACX,oCAEE,SAAS,EAAC,+JAA+J,YAExK,WAAW,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,GAClC,CACR,CAAC,CAAC,CAAC,IAAI,IACD,EACR,IAAI,CAAC,CAAC,CAAC,CACN,eACE,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,8HAA8H,EACxI,KAAK,EAAE;oBACL,GAAG,EAAE,YAAY,EAAE,GAAG,IAAI,EAAE;oBAC5B,IAAI,EAAE,YAAY,EAAE,IAAI,IAAI,EAAE;iBAC/B,aAED,eAAK,SAAS,EAAC,wFAAwF,aACrG,2CAA0B,EACzB,SAAS,CAAC,CAAC,CAAC,CACX,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,WAAW,EACpB,SAAS,EAAC,sCAAsC,8BAGzC,CACV,CAAC,CAAC,CAAC,IAAI,IACJ,EACL,oBAAoB;wBACrB,qBAAqB;wBACrB,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,CACzB,eAAK,SAAS,EAAC,+GAA+G,aAC5H,uEAAsD,EACtD,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,KAAK,IAAI,EAAE;oCAClB,MAAM,MAAM,GAAG,MAAM,YAAY,CAAC,iBAAiB,EAAE,CAAC;oCACtD,aAAa,CAAC,MAAM,CAAC,CAAC;gCACxB,CAAC,EACD,SAAS,EAAC,iGAAiG,uBAGpG,IACL,CACP,CAAC,CAAC,CAAC,IAAI,EACR,cAAK,SAAS,EAAC,0BAA0B,YACtC,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,CAChB,eAAK,SAAS,EAAC,2DAA2D,aACxE,KAAC,WAAW,IAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAC,cAAc,GAAG,sBAC9C,CACP,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACrB,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CACf,eAEE,SAAS,EACP,2EAA2E;gCAC3E,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,aAGhC,kBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EACtD,SAAS,EAAC,mEAAmE,aAE7E,eAAK,SAAS,EAAC,gDAAgD,aAC7D,eAAM,SAAS,EAAC,8CAA8C,YAC3D,CAAC,CAAC,KAAK,GACH,EACP,KAAC,aAAa,IAAC,QAAQ,EAAE,CAAC,CAAC,QAAQ,GAAI,IACnC,EACL,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACR,eAAM,SAAS,EAAC,4CAA4C,YACzD,CAAC,CAAC,IAAI,GACF,CACR,CAAC,CAAC,CAAC,IAAI,EACR,eAAM,SAAS,EAAC,sCAAsC,YACnD,IAAI,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,cAAc,EAAE,GAClC,IACA,EACT,iBACE,IAAI,EAAC,QAAQ,gBACF,sBAAsB,EACjC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;wCACb,CAAC,CAAC,eAAe,EAAE,CAAC;wCACpB,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;oCACrB,CAAC,EACD,SAAS,EAAC,0HAA0H,YAEpI,KAAC,KAAK,IAAC,IAAI,EAAE,EAAE,GAAI,GACZ,KApCJ,CAAC,CAAC,EAAE,CAqCL,CACP,CAAC,CACH,CAAC,CAAC,CAAC,CACF,cAAK,SAAS,EAAC,mCAAmC,kCAE5C,CACP,GACG,IACF,CACP,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC;AAED,0EAA0E;AAC1E,2EAA2E;AAC3E,2EAA2E;AAC3E,4EAA4E;AAC5E,SAAS,aAAa,CAAC,EAAE,QAAQ,EAAsC;IACrE,MAAM,KAAK,GACT,QAAQ,KAAK,UAAU;QACrB,CAAC,CAAC,8CAA8C;QAChD,CAAC,CAAC,QAAQ,KAAK,SAAS;YACtB,CAAC,CAAC,oDAAoD;YACtD,CAAC,CAAC,gCAAgC,CAAC;IACzC,OAAO,CACL,eAAM,SAAS,EAAE,iDAAiD,KAAK,EAAE,YACtE,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC","sourcesContent":["import { agentNativePath } from \"../api-path.js\";\nimport React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport {\n  IconBell,\n  IconBellRinging,\n  IconLoader2,\n  IconX,\n} from \"@tabler/icons-react\";\nimport { usePausingInterval } from \"../use-pausing-interval.js\";\nimport type {\n  Notification as NotificationDto,\n  NotificationSeverity,\n} from \"../../notifications/types.js\";\n\ninterface NotificationsBellProps {\n  /** Poll interval in ms. Set to 0 to disable polling. Default: 10000. */\n  pollMs?: number;\n  /** Optional className for the outer container. */\n  className?: string;\n  /**\n   * When true, fires a system-level `new Notification(...)` popup for each\n   * new unread notification — handy when the tab is in the background.\n   * Renders an \"Enable browser notifications\" prompt in the dropdown until\n   * the user grants permission. Silently no-ops on denied or unsupported.\n   */\n  browserNotifications?: boolean;\n}\n\nconst POLL_MS_DEFAULT = 10_000;\nconst SUPPORTS_NOTIFICATION =\n  typeof window !== \"undefined\" && \"Notification\" in window;\n\n/**\n * Header-bar bell that shows the unread-notification count and a dropdown of\n * recent entries. Polling keeps it in sync (the framework poll loop already\n * bumps a version counter so notifications ride on that signal, but we poll\n * the count endpoint directly so the bell updates even outside an app-state\n * change).\n */\nexport function NotificationsBell({\n  pollMs = POLL_MS_DEFAULT,\n  className,\n  browserNotifications = false,\n}: NotificationsBellProps) {\n  const [unreadCount, setUnreadCount] = useState(0);\n  const [open, setOpen] = useState(false);\n  const [items, setItems] = useState<NotificationDto[] | null>(null);\n  const [menuPosition, setMenuPosition] = useState<{\n    top: number;\n    left: number;\n  } | null>(null);\n  // Init to \"default\" unconditionally so server and client render the same\n  // HTML — reading Notification.permission at init would diverge between SSR\n  // (\"denied\", no API) and hydration (\"default\"/\"granted\"), causing a mismatch\n  // in templates that mount the bell outside a ClientOnly boundary. We sync\n  // to the real value in a useEffect below.\n  const [permission, setPermission] =\n    useState<NotificationPermission>(\"default\");\n\n  useEffect(() => {\n    if (SUPPORTS_NOTIFICATION) setPermission(Notification.permission);\n  }, []);\n  const menuRef = useRef<HTMLDivElement | null>(null);\n  const triggerRef = useRef<HTMLButtonElement | null>(null);\n  // Ids already popped as browser notifications. Seeded on first run so\n  // existing unread don't pop retroactively on page load.\n  const seenIdsRef = useRef<Set<string> | null>(null);\n\n  const loadItems = useCallback(async () => {\n    try {\n      const res = await fetch(\n        agentNativePath(\"/_agent-native/notifications?limit=20\"),\n      );\n      if (!res.ok) return;\n      const rows = (await res.json()) as NotificationDto[];\n      setItems(rows);\n    } catch {\n      // best-effort\n    }\n  }, []);\n\n  // One polling callback used by both paths. When browserNotifications is on\n  // we fetch the unread list (source of truth for both the badge count AND\n  // the popup loop — no second /count request), and pop Notification() for\n  // any new ids. When off, we fetch just /count. The unread-list branch also\n  // opts out of visibility pause so popups still fire for backgrounded tabs.\n  const refresh = useCallback(async () => {\n    if (browserNotifications) {\n      try {\n        const res = await fetch(\n          agentNativePath(\"/_agent-native/notifications?unread=true&limit=20\"),\n        );\n        if (!res.ok) return;\n        const rows = (await res.json()) as NotificationDto[];\n        setUnreadCount(rows.length);\n        // First run: treat everything as already seen so we don't pop\n        // retroactively on page load. After that, rebuild from the current\n        // unread list so ids for read/archived rows drop out — keeps the\n        // set bounded to the unread fetch limit (~20).\n        const prev = seenIdsRef.current;\n        const seen = new Set<string>();\n        for (const n of rows) {\n          const alreadySeen = prev?.has(n.id) ?? true;\n          seen.add(n.id);\n          if (alreadySeen) continue;\n          if (!SUPPORTS_NOTIFICATION) continue;\n          if (Notification.permission !== \"granted\") continue;\n          try {\n            new Notification(n.title, { body: n.body, tag: n.id });\n          } catch {\n            // Safari / restricted contexts may throw even when permission\n            // claims to be granted — silent no-op.\n          }\n        }\n        seenIdsRef.current = seen;\n      } catch {\n        // best-effort\n      }\n      return;\n    }\n    try {\n      const res = await fetch(\n        agentNativePath(\"/_agent-native/notifications/count\"),\n      );\n      if (!res.ok) return;\n      const data = (await res.json()) as { count: number };\n      setUnreadCount(data.count);\n    } catch {\n      // best-effort\n    }\n  }, [browserNotifications]);\n\n  usePausingInterval(\n    refresh,\n    pollMs,\n    /* pauseWhenHidden */ !browserNotifications,\n  );\n\n  useEffect(() => {\n    if (!open) return;\n    loadItems();\n  }, [open, loadItems]);\n\n  useEffect(() => {\n    if (!open) return;\n    const updatePosition = () => {\n      const rect = triggerRef.current?.getBoundingClientRect();\n      if (!rect) return;\n      const width = 320;\n      const margin = 12;\n      setMenuPosition({\n        top: rect.bottom + 8,\n        left: Math.min(\n          Math.max(rect.right - width, margin),\n          window.innerWidth - width - margin,\n        ),\n      });\n    };\n    updatePosition();\n    window.addEventListener(\"resize\", updatePosition);\n    window.addEventListener(\"scroll\", updatePosition, true);\n    return () => {\n      window.removeEventListener(\"resize\", updatePosition);\n      window.removeEventListener(\"scroll\", updatePosition, true);\n    };\n  }, [open]);\n\n  useEffect(() => {\n    if (!open) return;\n    const onDocClick = (e: MouseEvent) => {\n      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {\n        setOpen(false);\n      }\n    };\n    document.addEventListener(\"mousedown\", onDocClick);\n    return () => document.removeEventListener(\"mousedown\", onDocClick);\n  }, [open]);\n\n  const markRead = async (id: string) => {\n    try {\n      await fetch(agentNativePath(`/_agent-native/notifications/${id}/read`), {\n        method: \"POST\",\n      });\n      setItems((prev) =>\n        prev\n          ? prev.map((n) =>\n              n.id === id ? { ...n, readAt: new Date().toISOString() } : n,\n            )\n          : prev,\n      );\n      refresh();\n    } catch {\n      // best-effort\n    }\n  };\n\n  const markAllRead = async () => {\n    try {\n      await fetch(agentNativePath(`/_agent-native/notifications/read-all`), {\n        method: \"POST\",\n      });\n      setItems((prev) =>\n        prev\n          ? prev.map((n) =>\n              n.readAt ? n : { ...n, readAt: new Date().toISOString() },\n            )\n          : prev,\n      );\n      setUnreadCount(0);\n    } catch {\n      // best-effort\n    }\n  };\n\n  const dismiss = async (id: string) => {\n    try {\n      await fetch(agentNativePath(`/_agent-native/notifications/${id}`), {\n        method: \"DELETE\",\n      });\n      setItems((prev) => (prev ? prev.filter((n) => n.id !== id) : prev));\n      refresh();\n    } catch {\n      // best-effort\n    }\n  };\n\n  const hasUnread = unreadCount > 0;\n  const Icon = hasUnread ? IconBellRinging : IconBell;\n\n  return (\n    <div\n      ref={menuRef}\n      className={\n        \"an-notifications-bell relative inline-flex\" +\n        (className ? ` ${className}` : \"\")\n      }\n    >\n      <button\n        ref={triggerRef}\n        type=\"button\"\n        aria-label={\n          hasUnread ? `${unreadCount} unread notifications` : \"Notifications\"\n        }\n        onClick={() => setOpen((v) => !v)}\n        className=\"an-notifications-bell__trigger relative inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent/40 hover:text-foreground\"\n      >\n        <Icon size={18} aria-hidden />\n        {hasUnread ? (\n          <span\n            aria-hidden\n            className=\"an-notifications-bell__badge absolute -right-0.5 -top-0.5 rounded-full bg-destructive px-1 text-[10px] leading-[14px] font-medium text-destructive-foreground\"\n          >\n            {unreadCount > 99 ? \"99+\" : unreadCount}\n          </span>\n        ) : null}\n      </button>\n      {open ? (\n        <div\n          role=\"menu\"\n          className=\"an-notifications-bell__menu fixed z-[2100] w-80 rounded-md border border-border bg-popover text-popover-foreground shadow-lg\"\n          style={{\n            top: menuPosition?.top ?? 48,\n            left: menuPosition?.left ?? 12,\n          }}\n        >\n          <div className=\"flex items-center justify-between border-b border-border px-3 py-2 text-sm font-medium\">\n            <span>Notifications</span>\n            {hasUnread ? (\n              <button\n                type=\"button\"\n                onClick={markAllRead}\n                className=\"text-xs text-primary hover:underline\"\n              >\n                Mark all read\n              </button>\n            ) : null}\n          </div>\n          {browserNotifications &&\n          SUPPORTS_NOTIFICATION &&\n          permission === \"default\" ? (\n            <div className=\"flex items-center justify-between gap-2 border-b border-border bg-accent/40 px-3 py-2 text-xs text-foreground\">\n              <span>Get a system popup for new notifications.</span>\n              <button\n                type=\"button\"\n                onClick={async () => {\n                  const result = await Notification.requestPermission();\n                  setPermission(result);\n                }}\n                className=\"shrink-0 rounded bg-primary px-2 py-0.5 font-medium text-primary-foreground hover:bg-primary/90\"\n              >\n                Enable\n              </button>\n            </div>\n          ) : null}\n          <div className=\"max-h-96 overflow-y-auto\">\n            {items === null ? (\n              <div className=\"flex items-center gap-2 p-4 text-sm text-muted-foreground\">\n                <IconLoader2 size={14} className=\"animate-spin\" /> Loading…\n              </div>\n            ) : items.length > 0 ? (\n              items.map((n) => (\n                <div\n                  key={n.id}\n                  className={\n                    \"group relative border-b border-border last:border-b-0 hover:bg-accent/40 \" +\n                    (n.readAt ? \"opacity-60\" : \"\")\n                  }\n                >\n                  <button\n                    type=\"button\"\n                    onClick={() => (n.readAt ? undefined : markRead(n.id))}\n                    className=\"flex w-full flex-col items-start gap-0.5 px-3 py-2 pr-8 text-left\"\n                  >\n                    <div className=\"flex w-full items-center justify-between gap-2\">\n                      <span className=\"truncate text-sm font-medium text-foreground\">\n                        {n.title}\n                      </span>\n                      <SeverityBadge severity={n.severity} />\n                    </div>\n                    {n.body ? (\n                      <span className=\"line-clamp-2 text-xs text-muted-foreground\">\n                        {n.body}\n                      </span>\n                    ) : null}\n                    <span className=\"text-[10px] text-muted-foreground/70\">\n                      {new Date(n.createdAt).toLocaleString()}\n                    </span>\n                  </button>\n                  <button\n                    type=\"button\"\n                    aria-label=\"Dismiss notification\"\n                    onClick={(e) => {\n                      e.stopPropagation();\n                      void dismiss(n.id);\n                    }}\n                    className=\"absolute right-2 top-2 hidden rounded p-0.5 text-muted-foreground hover:bg-accent hover:text-foreground group-hover:flex\"\n                  >\n                    <IconX size={12} />\n                  </button>\n                </div>\n              ))\n            ) : (\n              <div className=\"p-4 text-sm text-muted-foreground\">\n                No notifications.\n              </div>\n            )}\n          </div>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\n// Severity color pairs — use /20 opacity backdrops that work against both\n// light and dark theme backgrounds; text uses 700/300 so it stays readable\n// in each mode (the `dark:` prefix is one of the few places where explicit\n// variants are necessary since these are brand-color tokens, not semantic).\nfunction SeverityBadge({ severity }: { severity: NotificationSeverity }) {\n  const color =\n    severity === \"critical\"\n      ? \"bg-red-500/20 text-red-700 dark:text-red-300\"\n      : severity === \"warning\"\n        ? \"bg-amber-500/20 text-amber-700 dark:text-amber-300\"\n        : \"bg-muted text-muted-foreground\";\n  return (\n    <span className={`rounded px-1.5 py-0.5 text-[10px] font-medium ${color}`}>\n      {severity}\n    </span>\n  );\n}\n"]}
+{"version":3,"file":"NotificationsBell.js","sourceRoot":"","sources":["../../../src/client/notifications/NotificationsBell.tsx"],"names":[],"mappings":"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","sourcesContent":["import { agentNativePath } from \"../api-path.js\";\nimport React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport {\n  IconBell,\n  IconBellRinging,\n  IconLoader2,\n  IconX,\n} from \"@tabler/icons-react\";\nimport { usePausingInterval } from \"../use-pausing-interval.js\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"../components/ui/popover.js\";\nimport type {\n  Notification as NotificationDto,\n  NotificationSeverity,\n} from \"../../notifications/types.js\";\n\ninterface NotificationsBellProps {\n  /** Poll interval in ms. Set to 0 to disable polling. Default: 10000. */\n  pollMs?: number;\n  /** Optional className for the outer container. */\n  className?: string;\n  /**\n   * When true, fires a system-level `new Notification(...)` popup for each\n   * new unread notification — handy when the tab is in the background.\n   * Renders an \"Enable browser notifications\" prompt in the dropdown until\n   * the user grants permission. Silently no-ops on denied or unsupported.\n   */\n  browserNotifications?: boolean;\n}\n\nconst POLL_MS_DEFAULT = 10_000;\nconst SUPPORTS_NOTIFICATION =\n  typeof window !== \"undefined\" && \"Notification\" in window;\n\n/**\n * Header-bar bell that shows the unread-notification count and a dropdown of\n * recent entries. Polling keeps it in sync (the framework poll loop already\n * bumps a version counter so notifications ride on that signal, but we poll\n * the count endpoint directly so the bell updates even outside an app-state\n * change).\n */\nexport function NotificationsBell({\n  pollMs = POLL_MS_DEFAULT,\n  className,\n  browserNotifications = false,\n}: NotificationsBellProps) {\n  const [unreadCount, setUnreadCount] = useState(0);\n  const [open, setOpen] = useState(false);\n  const [items, setItems] = useState<NotificationDto[] | null>(null);\n  // Init to \"default\" unconditionally so server and client render the same\n  // HTML — reading Notification.permission at init would diverge between SSR\n  // (\"denied\", no API) and hydration (\"default\"/\"granted\"), causing a mismatch\n  // in templates that mount the bell outside a ClientOnly boundary. We sync\n  // to the real value in a useEffect below.\n  const [permission, setPermission] =\n    useState<NotificationPermission>(\"default\");\n\n  useEffect(() => {\n    if (SUPPORTS_NOTIFICATION) setPermission(Notification.permission);\n  }, []);\n  // Ids already popped as browser notifications. Seeded on first run so\n  // existing unread don't pop retroactively on page load.\n  const seenIdsRef = useRef<Set<string> | null>(null);\n\n  const loadItems = useCallback(async () => {\n    try {\n      const res = await fetch(\n        agentNativePath(\"/_agent-native/notifications?limit=20\"),\n      );\n      if (!res.ok) return;\n      const rows = (await res.json()) as NotificationDto[];\n      setItems(rows);\n    } catch {\n      // best-effort\n    }\n  }, []);\n\n  // One polling callback used by both paths. When browserNotifications is on\n  // we fetch the unread list (source of truth for both the badge count AND\n  // the popup loop — no second /count request), and pop Notification() for\n  // any new ids. When off, we fetch just /count. The unread-list branch also\n  // opts out of visibility pause so popups still fire for backgrounded tabs.\n  const refresh = useCallback(async () => {\n    if (browserNotifications) {\n      try {\n        const res = await fetch(\n          agentNativePath(\"/_agent-native/notifications?unread=true&limit=20\"),\n        );\n        if (!res.ok) return;\n        const rows = (await res.json()) as NotificationDto[];\n        setUnreadCount(rows.length);\n        // First run: treat everything as already seen so we don't pop\n        // retroactively on page load. After that, rebuild from the current\n        // unread list so ids for read/archived rows drop out — keeps the\n        // set bounded to the unread fetch limit (~20).\n        const prev = seenIdsRef.current;\n        const seen = new Set<string>();\n        for (const n of rows) {\n          const alreadySeen = prev?.has(n.id) ?? true;\n          seen.add(n.id);\n          if (alreadySeen) continue;\n          if (!SUPPORTS_NOTIFICATION) continue;\n          if (Notification.permission !== \"granted\") continue;\n          try {\n            new Notification(n.title, { body: n.body, tag: n.id });\n          } catch {\n            // Safari / restricted contexts may throw even when permission\n            // claims to be granted — silent no-op.\n          }\n        }\n        seenIdsRef.current = seen;\n      } catch {\n        // best-effort\n      }\n      return;\n    }\n    try {\n      const res = await fetch(\n        agentNativePath(\"/_agent-native/notifications/count\"),\n      );\n      if (!res.ok) return;\n      const data = (await res.json()) as { count: number };\n      setUnreadCount(data.count);\n    } catch {\n      // best-effort\n    }\n  }, [browserNotifications]);\n\n  usePausingInterval(\n    refresh,\n    pollMs,\n    /* pauseWhenHidden */ !browserNotifications,\n  );\n\n  useEffect(() => {\n    if (!open) return;\n    loadItems();\n  }, [open, loadItems]);\n\n  const markRead = async (id: string) => {\n    try {\n      await fetch(agentNativePath(`/_agent-native/notifications/${id}/read`), {\n        method: \"POST\",\n      });\n      setItems((prev) =>\n        prev\n          ? prev.map((n) =>\n              n.id === id ? { ...n, readAt: new Date().toISOString() } : n,\n            )\n          : prev,\n      );\n      refresh();\n    } catch {\n      // best-effort\n    }\n  };\n\n  const markAllRead = async () => {\n    try {\n      await fetch(agentNativePath(`/_agent-native/notifications/read-all`), {\n        method: \"POST\",\n      });\n      setItems((prev) =>\n        prev\n          ? prev.map((n) =>\n              n.readAt ? n : { ...n, readAt: new Date().toISOString() },\n            )\n          : prev,\n      );\n      setUnreadCount(0);\n    } catch {\n      // best-effort\n    }\n  };\n\n  const dismiss = async (id: string) => {\n    try {\n      await fetch(agentNativePath(`/_agent-native/notifications/${id}`), {\n        method: \"DELETE\",\n      });\n      setItems((prev) => (prev ? prev.filter((n) => n.id !== id) : prev));\n      refresh();\n    } catch {\n      // best-effort\n    }\n  };\n\n  const hasUnread = unreadCount > 0;\n  const Icon = hasUnread ? IconBellRinging : IconBell;\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <button\n          type=\"button\"\n          aria-label={\n            hasUnread ? `${unreadCount} unread notifications` : \"Notifications\"\n          }\n          className={\n            \"an-notifications-bell__trigger relative inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent/40 hover:text-foreground\" +\n            (className ? ` ${className}` : \"\")\n          }\n        >\n          <Icon size={18} aria-hidden />\n          {hasUnread ? (\n            <span\n              aria-hidden\n              className=\"an-notifications-bell__badge absolute -right-0.5 -top-0.5 rounded-full bg-destructive px-1 text-[10px] leading-[14px] font-medium text-destructive-foreground\"\n            >\n              {unreadCount > 99 ? \"99+\" : unreadCount}\n            </span>\n          ) : null}\n        </button>\n      </PopoverTrigger>\n      <PopoverContent\n        align=\"end\"\n        sideOffset={8}\n        className=\"an-notifications-bell__menu w-80 p-0\"\n      >\n        <div className=\"flex items-center justify-between border-b border-border px-3 py-2 text-sm font-medium\">\n          <span>Notifications</span>\n          {hasUnread ? (\n            <button\n              type=\"button\"\n              onClick={markAllRead}\n              className=\"text-xs text-primary hover:underline\"\n            >\n              Mark all read\n            </button>\n          ) : null}\n        </div>\n        {browserNotifications &&\n        SUPPORTS_NOTIFICATION &&\n        permission === \"default\" ? (\n          <div className=\"flex items-center justify-between gap-2 border-b border-border bg-accent/40 px-3 py-2 text-xs text-foreground\">\n            <span>Get a system popup for new notifications.</span>\n            <button\n              type=\"button\"\n              onClick={async () => {\n                const result = await Notification.requestPermission();\n                setPermission(result);\n              }}\n              className=\"shrink-0 rounded bg-primary px-2 py-0.5 font-medium text-primary-foreground hover:bg-primary/90\"\n            >\n              Enable\n            </button>\n          </div>\n        ) : null}\n        <div className=\"max-h-96 overflow-y-auto\">\n          {items === null ? (\n            <div className=\"flex items-center gap-2 p-4 text-sm text-muted-foreground\">\n              <IconLoader2 size={14} className=\"animate-spin\" /> Loading…\n            </div>\n          ) : items.length > 0 ? (\n            items.map((n) => (\n              <div\n                key={n.id}\n                className={\n                  \"group relative border-b border-border last:border-b-0 hover:bg-accent/40 \" +\n                  (n.readAt ? \"opacity-60\" : \"\")\n                }\n              >\n                <button\n                  type=\"button\"\n                  onClick={() => (n.readAt ? undefined : markRead(n.id))}\n                  className=\"flex w-full flex-col items-start gap-0.5 px-3 py-2 pr-8 text-left\"\n                >\n                  <div className=\"flex w-full items-center justify-between gap-2\">\n                    <span className=\"truncate text-sm font-medium text-foreground\">\n                      {n.title}\n                    </span>\n                    <SeverityBadge severity={n.severity} />\n                  </div>\n                  {n.body ? (\n                    <span className=\"line-clamp-2 text-xs text-muted-foreground\">\n                      {n.body}\n                    </span>\n                  ) : null}\n                  <span className=\"text-[10px] text-muted-foreground/70\">\n                    {new Date(n.createdAt).toLocaleString()}\n                  </span>\n                </button>\n                <button\n                  type=\"button\"\n                  aria-label=\"Dismiss notification\"\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    void dismiss(n.id);\n                  }}\n                  className=\"absolute right-2 top-2 hidden rounded p-0.5 text-muted-foreground hover:bg-accent hover:text-foreground group-hover:flex\"\n                >\n                  <IconX size={12} />\n                </button>\n              </div>\n            ))\n          ) : (\n            <div className=\"p-4 text-sm text-muted-foreground\">\n              No notifications.\n            </div>\n          )}\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n\n// Severity color pairs — use /20 opacity backdrops that work against both\n// light and dark theme backgrounds; text uses 700/300 so it stays readable\n// in each mode (the `dark:` prefix is one of the few places where explicit\n// variants are necessary since these are brand-color tokens, not semantic).\nfunction SeverityBadge({ severity }: { severity: NotificationSeverity }) {\n  const color =\n    severity === \"critical\"\n      ? \"bg-red-500/20 text-red-700 dark:text-red-300\"\n      : severity === \"warning\"\n        ? \"bg-amber-500/20 text-amber-700 dark:text-amber-300\"\n        : \"bg-muted text-muted-foreground\";\n  return (\n    <span className={`rounded px-1.5 py-0.5 text-[10px] font-medium ${color}`}>\n      {severity}\n    </span>\n  );\n}\n"]}

package/dist/client/org/OrgSwitcher.d.ts

@@ -6,12 +6,10 @@ export interface OrgSwitcherProps {
     reserveSpace?: boolean;
 }
 /**
- * Compact org switcher button. Shows the active org name; opens a dropdown
- * with the user's other orgs, pending invitations, and inline forms to
- * create a new org or invite a teammate. Renders nothing in solo / dev
- * mode or when the user has no orgs at all and no invites.
- *
- * Headless DOM (no shadcn deps) so it works in any template.
+ * Compact org switcher button. Shows the active org (or "Personal" when the
+ * user has none); opens a popover with the user's other orgs, pending
+ * invitations, inline forms to create a new org / invite a teammate, and a
+ * sign-out item. Renders nothing in dev / no-auth mode.
  */
 export declare function OrgSwitcher({ className, hideWhenSingle, reserveSpace, }: OrgSwitcherProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=OrgSwitcher.d.ts.map

package/dist/client/org/OrgSwitcher.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OrgSwitcher.d.ts","sourceRoot":"","sources":["../../../src/client/org/OrgSwitcher.tsx"],"names":[],"mappings":"AAkBA,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2EAA2E;IAC3E,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAgBD;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,cAAc,EACd,YAAY,GACb,EAAE,gBAAgB,2CAmTlB"}
+{"version":3,"file":"OrgSwitcher.d.ts","sourceRoot":"","sources":["../../../src/client/org/OrgSwitcher.tsx"],"names":[],"mappings":"AAqBA,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2EAA2E;IAC3E,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAyBD;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,cAAc,EACd,YAAY,GACb,EAAE,gBAAgB,2CAgVlB"}

package/dist/client/org/OrgSwitcher.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import { IconBuilding, IconCheck, IconLoader2, IconPlus, IconSelector, IconUserPlus, } from "@tabler/icons-react";
+import { useState } from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { IconBuilding, IconCheck, IconLoader2, IconLogout, IconPlus, IconSelector, IconUser, IconUserPlus, } from "@tabler/icons-react";
 import { useOrg, useSwitchOrg, useCreateOrg, useInviteMember, useAcceptInvitation, } from "./hooks.js";
-import { DEV_MODE_USER_EMAIL } from "../dev-mode.js";
+import { agentNativePath } from "../api-path.js";
 function personalLabelFromEmail(email) {
     if (!email)
         return "Personal";
@@ -16,13 +17,14 @@ function personalLabelFromEmail(email) {
         .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
         .join(" ");
 }
+const POPOVER_CONTENT_CLASS = "z-50 min-w-[14rem] rounded-md border border-border bg-popover py-1 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2";
+const ITEM_CLASS = "flex w-full items-center gap-2 px-2.5 py-1.5 text-xs text-foreground hover:bg-accent focus-visible:bg-accent focus:outline-none disabled:opacity-50 disabled:pointer-events-none";
+const SECTION_LABEL_CLASS = "px-2.5 pt-1 pb-0.5 text-[10px] uppercase tracking-wide text-muted-foreground";
 /**
- * Compact org switcher button. Shows the active org name; opens a dropdown
- * with the user's other orgs, pending invitations, and inline forms to
- * create a new org or invite a teammate. Renders nothing in solo / dev
- * mode or when the user has no orgs at all and no invites.
- *
- * Headless DOM (no shadcn deps) so it works in any template.
+ * Compact org switcher button. Shows the active org (or "Personal" when the
+ * user has none); opens a popover with the user's other orgs, pending
+ * invitations, inline forms to create a new org / invite a teammate, and a
+ * sign-out item. Renders nothing in dev / no-auth mode.
  */
 export function OrgSwitcher({ className, hideWhenSingle, reserveSpace, }) {
     const { data: org, isLoading } = useOrg();
@@ -34,31 +36,33 @@ export function OrgSwitcher({ className, hideWhenSingle, reserveSpace, }) {
     const [mode, setMode] = useState("list");
     const [newName, setNewName] = useState("");
     const [inviteEmail, setInviteEmail] = useState("");
-    const ref = useRef(null);
-    useEffect(() => {
-        if (!open)
-            return;
-        const onClick = (e) => {
-            if (ref.current && !ref.current.contains(e.target)) {
-                setOpen(false);
-            }
-        };
-        document.addEventListener("mousedown", onClick);
-        return () => document.removeEventListener("mousedown", onClick);
-    }, [open]);
-    useEffect(() => {
-        if (!open) {
+    const [signingOut, setSigningOut] = useState(false);
+    const handleOpenChange = (next) => {
+        setOpen(next);
+        if (!next) {
             setMode("list");
             setNewName("");
             setInviteEmail("");
         }
-    }, [open]);
+    };
+    const handleSignOut = async () => {
+        if (signingOut)
+            return;
+        setSigningOut(true);
+        try {
+            await fetch(agentNativePath("/_agent-native/auth/logout"), {
+                method: "POST",
+                credentials: "include",
+            });
+        }
+        catch {
+            /* fall through to reload — server may already have cleared the cookie */
+        }
+        window.location.reload();
+    };
     if (!org) {
         return reserveSpace && isLoading ? (_jsx("div", { "aria-hidden": "true", className: `h-8 ${className ?? ""}` })) : null;
     }
-    if (org.email === DEV_MODE_USER_EMAIL) {
-        return reserveSpace ? (_jsx("div", { "aria-hidden": "true", className: `h-8 ${className ?? ""}` })) : null;
-    }
     const orgs = org.orgs ?? [];
     const pendingInvitations = org.pendingInvitations ?? [];
     const orgCount = orgs.length;
@@ -71,53 +75,59 @@ export function OrgSwitcher({ className, hideWhenSingle, reserveSpace, }) {
     }
     const canInvite = !!org.orgId && (org.role === "owner" || org.role === "admin");
     const personalLabel = personalLabelFromEmail(org.email);
-    const label = org.orgName ?? personalLabel;
-    return (_jsxs("div", { ref: ref, className: `relative ${className ?? ""}`, children: [_jsxs("button", { type: "button", onClick: () => setOpen((v) => !v), className: "flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-xs font-medium text-muted-foreground hover:bg-accent/50 hover:text-foreground border border-border/50", children: [_jsx(IconBuilding, { className: "h-3.5 w-3.5 shrink-0" }), _jsx("span", { className: "truncate flex-1 text-left", children: label }), _jsx(IconSelector, { className: "h-3 w-3 shrink-0 opacity-50" })] }), open && (_jsxs("div", { className: "absolute left-0 right-0 bottom-full mb-1 z-50 rounded-md border border-border bg-popover shadow-md py-1 min-w-[14rem]", children: [mode === "list" && (_jsxs(_Fragment, { children: [(orgs.length > 0 || !org.orgId) && (_jsx("div", { className: "px-2.5 pt-1 pb-0.5 text-[10px] uppercase tracking-wide text-muted-foreground", children: "Organization" })), orgs.length === 0 && !org.orgId && (_jsxs("div", { className: "flex w-full items-center gap-2 px-2.5 py-1.5 text-xs text-muted-foreground", "aria-disabled": "true", children: [_jsx(IconBuilding, { className: "h-3.5 w-3.5 shrink-0" }), _jsx("span", { className: "truncate flex-1 text-left", children: personalLabel }), _jsx(IconCheck, { className: "h-3.5 w-3.5 shrink-0 opacity-50" })] })), orgs.map((o) => (_jsxs("button", { type: "button", onClick: async () => {
-                                    if (o.orgId === org.orgId) {
-                                        setOpen(false);
-                                        return;
-                                    }
-                                    try {
-                                        await switchOrg.mutateAsync(o.orgId);
-                                        setOpen(false);
-                                    }
-                                    catch {
-                                        /* error surfaced via switchOrg.error */
-                                    }
-                                }, disabled: switchOrg.isPending, className: "flex w-full items-center gap-2 px-2.5 py-1.5 text-xs text-foreground hover:bg-accent disabled:opacity-50", children: [_jsx(IconBuilding, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }), _jsx("span", { className: "truncate flex-1 text-left", children: o.orgName }), o.orgId === org.orgId && (_jsx(IconCheck, { className: "h-3.5 w-3.5 shrink-0 text-green-500" }))] }, o.orgId))), pendingInvitations.length > 0 && (_jsxs(_Fragment, { children: [orgs.length > 0 && _jsx("div", { className: "my-1 h-px bg-border" }), _jsx("div", { className: "px-2.5 pt-1 pb-0.5 text-[10px] uppercase tracking-wide text-muted-foreground", children: "Invitations" }), pendingInvitations.map((inv) => (_jsxs("div", { className: "flex items-center gap-2 px-2.5 py-1.5 text-xs", children: [_jsx(IconBuilding, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }), _jsx("span", { className: "truncate flex-1 text-foreground", children: inv.orgName }), _jsx("button", { type: "button", onClick: async () => {
-                                                    try {
-                                                        await acceptInvitation.mutateAsync(inv.id);
-                                                        setOpen(false);
-                                                    }
-                                                    catch {
-                                                        /* error surfaced via acceptInvitation.error */
-                                                    }
-                                                }, disabled: acceptInvitation.isPending, className: "rounded px-1.5 py-0.5 text-[11px] font-medium text-green-600 hover:bg-green-500/10 disabled:opacity-50", children: acceptInvitation.isPending ? (_jsx(IconLoader2, { className: "h-3 w-3 animate-spin" })) : ("Join") })] }, inv.id)))] })), _jsx("div", { className: "my-1 h-px bg-border" }), _jsxs("button", { type: "button", onClick: () => setMode("create"), className: "flex w-full items-center gap-2 px-2.5 py-1.5 text-xs text-foreground hover:bg-accent", children: [_jsx(IconPlus, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }), _jsx("span", { className: "flex-1 text-left", children: "Create organization" })] }), canInvite && (_jsxs("button", { type: "button", onClick: () => setMode("invite"), className: "flex w-full items-center gap-2 px-2.5 py-1.5 text-xs text-foreground hover:bg-accent", children: [_jsx(IconUserPlus, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }), _jsx("span", { className: "flex-1 text-left", children: "Invite member" })] })), (switchOrg.error || acceptInvitation.error) && (_jsx("div", { className: "px-2.5 pt-1 text-[11px] text-red-600", children: (switchOrg.error || acceptInvitation.error)
-                                    .message }))] })), mode === "create" && (_jsxs("form", { onSubmit: async (e) => {
-                            e.preventDefault();
-                            const name = newName.trim();
-                            if (!name)
-                                return;
-                            try {
-                                await createOrg.mutateAsync(name);
-                                setOpen(false);
-                            }
-                            catch {
-                                /* error surfaced via createOrg.error */
-                            }
-                        }, className: "px-2 py-1.5", children: [_jsx("div", { className: "px-0.5 pb-1 text-[10px] uppercase tracking-wide text-muted-foreground", children: "New organization" }), _jsx("input", { autoFocus: true, value: newName, onChange: (e) => setNewName(e.target.value), placeholder: "Organization name", disabled: createOrg.isPending, className: "w-full rounded-md border border-input bg-background px-2 py-1.5 text-xs outline-none focus:ring-2 focus:ring-ring disabled:opacity-50" }), createOrg.error && (_jsx("div", { className: "pt-1 text-[11px] text-red-600", children: createOrg.error.message })), _jsxs("div", { className: "flex items-center gap-1.5 pt-1.5", children: [_jsx("button", { type: "button", onClick: () => setMode("list"), disabled: createOrg.isPending, className: "flex-1 rounded-md px-2 py-1 text-xs text-muted-foreground hover:bg-accent disabled:opacity-50", children: "Cancel" }), _jsx("button", { type: "submit", disabled: createOrg.isPending || !newName.trim(), className: "flex-1 rounded-md bg-primary px-2 py-1 text-xs font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50", children: createOrg.isPending ? (_jsx(IconLoader2, { className: "mx-auto h-3 w-3 animate-spin" })) : ("Create") })] })] })), mode === "invite" && (_jsxs("form", { onSubmit: async (e) => {
+    const inOrg = !!org.orgId;
+    const buttonLabel = org.orgName ?? "Personal";
+    const ButtonIcon = inOrg ? IconBuilding : IconUser;
+    return (_jsxs(PopoverPrimitive.Root, { open: open, onOpenChange: handleOpenChange, children: [_jsx(PopoverPrimitive.Trigger, { asChild: true, children: _jsxs("button", { type: "button", className: `flex w-full items-center gap-2 rounded-md border border-border/50 px-2.5 py-1.5 text-xs font-medium text-muted-foreground hover:bg-accent/50 hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring cursor-pointer ${className ?? ""}`, children: [_jsx(ButtonIcon, { className: "h-3.5 w-3.5 shrink-0" }), _jsx("span", { className: "truncate flex-1 text-left", children: buttonLabel }), _jsx(IconSelector, { className: "h-3 w-3 shrink-0 opacity-50" })] }) }), _jsx(PopoverPrimitive.Portal, { children: _jsxs(PopoverPrimitive.Content, { side: "top", align: "start", sideOffset: 6, collisionPadding: 12, className: POPOVER_CONTENT_CLASS, onOpenAutoFocus: (e) => {
+                        // Don't auto-focus the first item — feels heavy on a switcher.
+                        if (mode === "list")
                             e.preventDefault();
-                            const email = inviteEmail.trim();
-                            if (!email)
-                                return;
-                            try {
-                                await inviteMember.mutateAsync(email);
-                                setInviteEmail("");
-                                setMode("list");
-                            }
-                            catch {
-                                /* error surfaced via inviteMember.error */
-                            }
-                        }, className: "px-2 py-1.5", children: [_jsxs("div", { className: "px-0.5 pb-1 text-[10px] uppercase tracking-wide text-muted-foreground", children: ["Invite to ", org.orgName] }), _jsx("input", { autoFocus: true, type: "email", value: inviteEmail, onChange: (e) => setInviteEmail(e.target.value), placeholder: "teammate@company.com", disabled: inviteMember.isPending, className: "w-full rounded-md border border-input bg-background px-2 py-1.5 text-xs outline-none focus:ring-2 focus:ring-ring disabled:opacity-50" }), inviteMember.error && (_jsx("div", { className: "pt-1 text-[11px] text-red-600", children: inviteMember.error.message })), _jsxs("div", { className: "flex items-center gap-1.5 pt-1.5", children: [_jsx("button", { type: "button", onClick: () => setMode("list"), disabled: inviteMember.isPending, className: "flex-1 rounded-md px-2 py-1 text-xs text-muted-foreground hover:bg-accent disabled:opacity-50", children: "Cancel" }), _jsx("button", { type: "submit", disabled: inviteMember.isPending || !inviteEmail.trim(), className: "flex-1 rounded-md bg-primary px-2 py-1 text-xs font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50", children: inviteMember.isPending ? (_jsx(IconLoader2, { className: "mx-auto h-3 w-3 animate-spin" })) : ("Send invite") })] })] }))] }))] }));
+                    }, children: [mode === "list" && (_jsxs(_Fragment, { children: [!inOrg && (_jsxs("div", { className: "flex w-full items-center gap-2 px-2.5 py-1.5 text-xs text-muted-foreground", "aria-disabled": "true", children: [_jsx(IconUser, { className: "h-3.5 w-3.5 shrink-0" }), _jsxs("span", { className: "truncate flex-1 text-left", children: ["Personal (", personalLabel, ")"] })] })), orgs.length > 0 && (_jsx("div", { className: SECTION_LABEL_CLASS, children: "Organizations" })), orgs.map((o) => (_jsxs("button", { type: "button", onClick: async () => {
+                                        if (o.orgId === org.orgId) {
+                                            setOpen(false);
+                                            return;
+                                        }
+                                        try {
+                                            await switchOrg.mutateAsync(o.orgId);
+                                            setOpen(false);
+                                        }
+                                        catch {
+                                            /* error surfaced via switchOrg.error */
+                                        }
+                                    }, disabled: switchOrg.isPending, className: `${ITEM_CLASS} cursor-pointer`, children: [_jsx(IconBuilding, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }), _jsx("span", { className: "truncate flex-1 text-left", children: o.orgName }), o.orgId === org.orgId && (_jsx(IconCheck, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }))] }, o.orgId))), pendingInvitations.length > 0 && (_jsxs(_Fragment, { children: [orgs.length > 0 && _jsx("div", { className: "my-1 h-px bg-border" }), _jsx("div", { className: SECTION_LABEL_CLASS, children: "Invitations" }), pendingInvitations.map((inv) => (_jsxs("div", { className: "flex items-center gap-2 px-2.5 py-1.5 text-xs", children: [_jsx(IconBuilding, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }), _jsx("span", { className: "truncate flex-1 text-foreground", children: inv.orgName }), _jsx("button", { type: "button", onClick: async () => {
+                                                        try {
+                                                            await acceptInvitation.mutateAsync(inv.id);
+                                                            setOpen(false);
+                                                        }
+                                                        catch {
+                                                            /* error surfaced via acceptInvitation.error */
+                                                        }
+                                                    }, disabled: acceptInvitation.isPending, className: "rounded px-1.5 py-0.5 text-[11px] font-medium text-primary hover:bg-primary/10 disabled:opacity-50 cursor-pointer", children: acceptInvitation.isPending ? (_jsx(IconLoader2, { className: "h-3 w-3 animate-spin" })) : ("Join") })] }, inv.id)))] })), _jsx("div", { className: "my-1 h-px bg-border" }), _jsxs("button", { type: "button", onClick: () => setMode("create"), className: `${ITEM_CLASS} cursor-pointer`, children: [_jsx(IconPlus, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }), _jsx("span", { className: "flex-1 text-left", children: "Create organization" })] }), canInvite && (_jsxs("button", { type: "button", onClick: () => setMode("invite"), className: `${ITEM_CLASS} cursor-pointer`, children: [_jsx(IconUserPlus, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }), _jsx("span", { className: "flex-1 text-left", children: "Invite member" })] })), _jsx("div", { className: "my-1 h-px bg-border" }), _jsxs("button", { type: "button", onClick: handleSignOut, disabled: signingOut, className: `${ITEM_CLASS} cursor-pointer`, children: [signingOut ? (_jsx(IconLoader2, { className: "h-3.5 w-3.5 shrink-0 animate-spin text-muted-foreground" })) : (_jsx(IconLogout, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" })), _jsxs("span", { className: "flex-1 text-left", children: ["Sign out", org.email ? (_jsxs("span", { className: "ml-1 text-muted-foreground", children: ["(", org.email, ")"] })) : null] })] }), (switchOrg.error || acceptInvitation.error) && (_jsx("div", { className: "px-2.5 pt-1 text-[11px] text-destructive", children: (switchOrg.error || acceptInvitation.error)
+                                        .message }))] })), mode === "create" && (_jsxs("form", { onSubmit: async (e) => {
+                                e.preventDefault();
+                                const name = newName.trim();
+                                if (!name)
+                                    return;
+                                try {
+                                    await createOrg.mutateAsync(name);
+                                    setOpen(false);
+                                }
+                                catch {
+                                    /* error surfaced via createOrg.error */
+                                }
+                            }, className: "px-2 py-1.5", children: [_jsx("div", { className: "px-0.5 pb-1 text-[10px] uppercase tracking-wide text-muted-foreground", children: "New organization" }), _jsx("input", { autoFocus: true, value: newName, onChange: (e) => setNewName(e.target.value), placeholder: "Organization name", disabled: createOrg.isPending, className: "w-full rounded-md border border-input bg-background px-2 py-1.5 text-xs outline-none focus:ring-2 focus:ring-ring disabled:opacity-50" }), createOrg.error && (_jsx("div", { className: "pt-1 text-[11px] text-destructive", children: createOrg.error.message })), _jsxs("div", { className: "flex items-center gap-1.5 pt-1.5", children: [_jsx("button", { type: "button", onClick: () => setMode("list"), disabled: createOrg.isPending, className: "flex-1 rounded-md px-2 py-1 text-xs text-muted-foreground hover:bg-accent disabled:opacity-50 cursor-pointer", children: "Cancel" }), _jsx("button", { type: "submit", disabled: createOrg.isPending || !newName.trim(), className: "flex-1 rounded-md bg-primary px-2 py-1 text-xs font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50 cursor-pointer", children: createOrg.isPending ? (_jsx(IconLoader2, { className: "mx-auto h-3 w-3 animate-spin" })) : ("Create") })] })] })), mode === "invite" && (_jsxs("form", { onSubmit: async (e) => {
+                                e.preventDefault();
+                                const email = inviteEmail.trim();
+                                if (!email)
+                                    return;
+                                try {
+                                    await inviteMember.mutateAsync(email);
+                                    setInviteEmail("");
+                                    setMode("list");
+                                }
+                                catch {
+                                    /* error surfaced via inviteMember.error */
+                                }
+                            }, className: "px-2 py-1.5", children: [_jsxs("div", { className: "px-0.5 pb-1 text-[10px] uppercase tracking-wide text-muted-foreground", children: ["Invite to ", org.orgName] }), _jsx("input", { autoFocus: true, type: "email", value: inviteEmail, onChange: (e) => setInviteEmail(e.target.value), placeholder: "teammate@company.com", disabled: inviteMember.isPending, className: "w-full rounded-md border border-input bg-background px-2 py-1.5 text-xs outline-none focus:ring-2 focus:ring-ring disabled:opacity-50" }), inviteMember.error && (_jsx("div", { className: "pt-1 text-[11px] text-destructive", children: inviteMember.error.message })), _jsxs("div", { className: "flex items-center gap-1.5 pt-1.5", children: [_jsx("button", { type: "button", onClick: () => setMode("list"), disabled: inviteMember.isPending, className: "flex-1 rounded-md px-2 py-1 text-xs text-muted-foreground hover:bg-accent disabled:opacity-50 cursor-pointer", children: "Cancel" }), _jsx("button", { type: "submit", disabled: inviteMember.isPending || !inviteEmail.trim(), className: "flex-1 rounded-md bg-primary px-2 py-1 text-xs font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50 cursor-pointer", children: inviteMember.isPending ? (_jsx(IconLoader2, { className: "mx-auto h-3 w-3 animate-spin" })) : ("Send invite") })] })] }))] }) })] }));
 }
 //# sourceMappingURL=OrgSwitcher.js.map