npm - @burdenoff/microfe-vibecontrols - Versions diffs - 2026.623.1 → 2026.623.3 - Mend

@burdenoff/microfe-vibecontrols 2026.623.1 → 2026.623.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (295) hide show

package/dist/components/ai/AIPlanPanel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AIPlanPanel.js","names":[],"sources":["../../../src/components/ai/AIPlanPanel.tsx"],"sourcesContent":["/*\n AIPlanPanel — the body of /ai-tools/plan.\n \n Five UI states gated in order:\n * 1. installing-plugin → vibe-plugin-plan + vibe-plugin-plan-plannotator\n * not installed on the agent. Renders the PluginGate install card.\n * 2. installing-cli → plugins installed but plannotator binary\n * missing on disk. Renders an Install CLI CTA.\n * 3. wizard → CLI installed but no AI-agent hook configured\n * yet. Renders the Claude/OpenCode/Codex/Pi/Gemini wizard.\n * 4. ready → all prereqs satisfied. Renders the tunnel\n * iframe pointing at ${tunnelUrl}/plan/, with postMessage auth\n * handoff on iframe load (mirrors PluginUIPanel.tsx).\n * 5. error → unrecoverable load failure for the status\n * query. Renders an error banner with retry.\n \n Auth handoff (matches PluginUIPanel.tsx:194–210):\n * onLoad → iframe.contentWindow.postMessage({type:'vibe-auth', apiKey},\n * new URL(tunnelUrl).origin)\n \n Surface contracts:\n * GET /api/plan-plannotator/status → PlannotatorStatus\n * POST /api/plan-plannotator/install → install binary\n * GET /api/plan-plannotator/agents/supported → AgentDetectionResult[]\n * POST /api/plan-plannotator/agents/:agent/configure-hook\n /\n\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport {\n AlertCircle,\n CheckCircle2,\n Inbox,\n Loader2,\n PlayCircle,\n RefreshCcw,\n Settings,\n Wifi,\n WifiOff,\n} from 'lucide-react';\n\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { PluginGate } from '@/components/shared';\nimport { PLAN_META_PACKAGE, PLAN_PLANNOTATOR_PACKAGE } from '@/constants/pluginCatalog';\nimport {\n configureAgentHook,\n getPlannotatorStatus,\n installPlannotatorBinary,\n listSupportedAgents,\n type AgentDetectionResult,\n type PlannotatorStatus,\n} from '@/services/planApi';\nimport type { AgentRef } from '@/services/aiApi';\nimport { useMintAgentCapabilityMutation } from '@/generated/wspace-operations';\nimport { AgentCapabilityScope } from '@/generated/wspace-types';\n\ninterface AIPlanPanelProps {\n agent: AgentRef;\n tunnelUrl: string \| null;\n}\n\ntype ConnectionStatus = 'connecting' \| 'connected' \| 'error';\n\nexport function AIPlanPanel({ agent, tunnelUrl }: AIPlanPanelProps) {\n const { t } = useI18n();\n // PluginGate renders eyebrow/title/description verbatim (no i18n lookup of\n // its own), so resolve them here with English fallbacks until plan. keys exist.\n const tr = (key: string, fallback: string): string => {\n const value = t(key);\n return value === key ? fallback : value;\n };\n\n return (\n <PluginGate\n agentId={agent.id}\n required={[PLAN_META_PACKAGE, PLAN_PLANNOTATOR_PACKAGE]}\n mode=\"all\"\n eyebrow={tr('plan.pluginRequiredEyebrow', 'Plan plugin required')}\n title={tr('plan.installPlanProviderTitle', 'Install the plan provider')}\n description={tr(\n 'plan.installPlanProviderDesc',\n 'Plan mode routes plan sessions through a plan provider plugin on your agent. Install the orchestrator and a provider (Plannotator) below to continue.'\n )}\n >\n <PlanPanelInner agent={agent} tunnelUrl={tunnelUrl} />\n </PluginGate>\n );\n}\n\nfunction PlanPanelInner({ agent, tunnelUrl }: AIPlanPanelProps) {\n const { t } = useI18n();\n const tr = useCallback(\n (key: string, fallback: string): string => {\n const value = t(key);\n return value === key ? fallback : value;\n },\n [t]\n );\n\n const [status, setStatus] = useState<PlannotatorStatus \| null>(null);\n const [statusError, setStatusError] = useState<string \| null>(null);\n const [statusLoading, setStatusLoading] = useState(true);\n const [agents, setAgents] = useState<AgentDetectionResult[]>([]);\n const [installing, setInstalling] = useState(false);\n const [configuring, setConfiguring] = useState<string \| null>(null);\n const [actionMessage, setActionMessage] = useState<string \| null>(null);\n const [actionError, setActionError] = useState<string \| null>(null);\n // \"Manage hooks\" forces the wizard back open even when a hook is already\n // configured — the only way to re-write a stale/broken hook (wrong path or\n // a key from a prior agent identity), which otherwise locks the panel into\n // the ready view forever.\n const [forceWizard, setForceWizard] = useState(false);\n\n const refresh = useCallback(\n // `silent` background refreshes (polling) only update session status: they\n // skip the loading/error toggles AND the agent re-detection, so a transient\n // listSupportedAgents failure can't demote the ready view to the wizard.\n async (silent = false) => {\n if (!silent) {\n setStatusLoading(true);\n setStatusError(null);\n }\n try {\n if (silent) {\n setStatus(await getPlannotatorStatus(agent));\n return;\n }\n const [statusResult, agentsResult] = await Promise.all([\n getPlannotatorStatus(agent),\n listSupportedAgents(agent).catch(() => ({ agents: [] })),\n ]);\n setStatus(statusResult);\n setAgents(agentsResult.agents ?? []);\n } catch (err) {\n if (!silent) {\n setStatusError(err instanceof Error ? err.message : 'Failed to load plan status');\n }\n } finally {\n if (!silent) setStatusLoading(false);\n }\n },\n [agent]\n );\n\n useEffect(() => {\n void refresh();\n }, [refresh]);\n\n const handleInstallCli = useCallback(async () => {\n setInstalling(true);\n setActionError(null);\n setActionMessage(null);\n try {\n const result = await installPlannotatorBinary(agent);\n if (result.ok) {\n setActionMessage(tr('plan.cliInstalled', 'Plannotator CLI installed.'));\n await refresh();\n } else {\n setActionError(result.error ?? 'Install failed');\n }\n } catch (err) {\n setActionError(err instanceof Error ? err.message : 'Install failed');\n } finally {\n setInstalling(false);\n }\n }, [agent, refresh, tr]);\n\n const handleConfigureHook = useCallback(\n async (agentKind: AgentDetectionResult['agent']) => {\n setConfiguring(agentKind);\n setActionError(null);\n setActionMessage(null);\n try {\n const result = await configureAgentHook(agent, agentKind);\n if (result.ok) {\n setActionMessage(tr('plan.hookConfigured', `Hook configured for ${agentKind}.`));\n await refresh();\n } else {\n setActionError(result.error ?? 'Hook configure failed');\n }\n } catch (err) {\n setActionError(err instanceof Error ? err.message : 'Hook configure failed');\n } finally {\n setConfiguring(null);\n }\n },\n [agent, refresh, tr]\n );\n\n // Derived render state — guarded ordering means we always render the\n // most prerequisite-bound CTA first.\n const view = useMemo<'loading' \| 'status-error' \| 'install-cli' \| 'wizard' \| 'ready'>(() => {\n if (statusLoading) return 'loading';\n if (statusError) return 'status-error';\n if (!status?.installed) return 'install-cli';\n const anyConfigured = agents.some((a) => a.hookConfigured);\n if (!anyConfigured \|\| forceWizard) return 'wizard';\n return 'ready';\n }, [status, statusError, statusLoading, agents, forceWizard]);\n\n // While the ready panel is shown, poll status in the background so a plan\n // session created by a coding agent's hook (or one that ends) is reflected\n // without a manual reload — `runningSessions` gates the iframe vs the empty\n // state below.\n useEffect(() => {\n if (view !== 'ready') return;\n // Skip ticks while the tab is hidden — no point polling a panel nobody sees.\n const id = setInterval(() => {\n if (!document.hidden) void refresh(true);\n }, 5000);\n return () => clearInterval(id);\n }, [view, refresh]);\n\n if (view === 'loading') {\n return (\n <div className=\"flex items-center gap-2 p-6 text-text-secondary\">\n <Loader2 className=\"size-4 animate-spin\" />\n <span>{tr('plan.loadingStatus', 'Loading plan status…')}</span>\n </div>\n );\n }\n\n if (view === 'status-error') {\n return (\n <div className=\"rounded-md border border-status-error-border bg-status-error-bg p-4 text-sm text-status-error-text\">\n <div className=\"flex items-start gap-2\">\n <AlertCircle className=\"size-4 mt-0.5 shrink-0\" />\n <div className=\"flex-1\">\n <p className=\"font-medium\">\n {tr('plan.statusError', 'Could not load plan status from the agent.')}\n </p>\n <p className=\"text-xs opacity-80 mt-1\">{statusError}</p>\n <button\n type=\"button\"\n onClick={() => void refresh()}\n className=\"mt-3 inline-flex items-center gap-1 text-xs font-medium hover:underline\"\n >\n <RefreshCcw className=\"size-3\" /> {tr('plan.retry', 'Retry')}\n </button>\n </div>\n </div>\n </div>\n );\n }\n\n return (\n <div className=\"space-y-4\">\n {actionMessage && (\n <div\n role=\"status\"\n className=\"rounded-md border border-status-success-border bg-status-success-bg px-3 py-2 text-xs text-status-success-text\"\n >\n {actionMessage}\n </div>\n )}\n {actionError && (\n <div\n role=\"alert\"\n className=\"rounded-md border border-status-error-border bg-status-error-bg px-3 py-2 text-xs text-status-error-text\"\n >\n {actionError}\n </div>\n )}\n\n {view === 'install-cli' && (\n <InstallCliCard installing={installing} onInstall={handleInstallCli} tr={tr} />\n )}\n\n {view === 'wizard' && (\n <WizardCard\n agents={agents}\n configuring={configuring}\n onConfigure={handleConfigureHook}\n // Offer \"Done\" only when a ready view exists to return to — i.e.\n // at least one hook is configured (we got here via Manage hooks),\n // not during the genuine first-run wizard.\n canExit={forceWizard && agents.some((a) => a.hookConfigured)}\n onExit={() => setForceWizard(false)}\n tr={tr}\n />\n )}\n\n {view === 'ready' && (\n <PlanReadyPanel\n agent={agent}\n agents={agents}\n tunnelUrl={tunnelUrl}\n runningSessions={status?.runningSessions ?? []}\n onReconfigure={() => {\n setActionMessage(null);\n setForceWizard(true);\n }}\n tr={tr}\n />\n )}\n </div>\n );\n}\n\ninterface InstallCliCardProps {\n installing: boolean;\n onInstall: () => void;\n tr: (key: string, fallback: string) => string;\n}\n\nfunction InstallCliCard({ installing, onInstall, tr }: InstallCliCardProps) {\n return (\n <div className=\"rounded-lg border border-border-default bg-bg-elevated p-6\">\n <div className=\"flex items-start gap-3\">\n <PlayCircle className=\"size-6 text-action-primary-bg shrink-0\" />\n <div className=\"flex-1\">\n <h3 className=\"text-base font-semibold text-text-primary\">\n {tr('plan.installCliTitle', 'Install the plannotator CLI')}\n </h3>\n <p className=\"text-sm text-text-secondary mt-1\">\n {tr(\n 'plan.installCliDesc',\n 'Plan mode runs a local plannotator binary on the agent and proxies its UI back here. The plugin installs the binary into ~/.local/bin/plannotator (sha256-pinned). Roughly 30 seconds.'\n )}\n </p>\n <button\n type=\"button\"\n onClick={onInstall}\n disabled={installing}\n className=\"mt-4 inline-flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bgHover disabled:opacity-50\"\n >\n {installing ? (\n <>\n <Loader2 className=\"size-4 animate-spin\" />\n {tr('plan.installing', 'Installing…')}\n </>\n ) : (\n tr('plan.installCliCta', 'Install plannotator CLI')\n )}\n </button>\n </div>\n </div>\n </div>\n );\n}\n\ninterface WizardCardProps {\n agents: AgentDetectionResult[];\n configuring: string \| null;\n onConfigure: (agentKind: AgentDetectionResult['agent']) => void;\n canExit?: boolean;\n onExit?: () => void;\n tr: (key: string, fallback: string) => string;\n}\n\nfunction WizardCard({ agents, configuring, onConfigure, canExit, onExit, tr }: WizardCardProps) {\n const installed = agents.filter((a) => a.cliInstalled);\n return (\n <div className=\"rounded-lg border border-border-default bg-bg-elevated p-6\">\n <div className=\"flex items-start gap-3\">\n <Settings className=\"size-6 text-action-primary-bg shrink-0\" />\n <div className=\"flex-1\">\n <div className=\"flex items-center justify-between gap-3\">\n <h3 className=\"text-base font-semibold text-text-primary\">\n {tr('plan.wizardTitle', 'Connect an AI coding agent')}\n </h3>\n {canExit && onExit && (\n <button\n type=\"button\"\n onClick={onExit}\n className=\"shrink-0 inline-flex items-center gap-1 text-xs text-text-secondary hover:text-text-primary\"\n >\n {tr('plan.wizardDone', 'Done')}\n </button>\n )}\n </div>\n <p className=\"text-sm text-text-secondary mt-1\">\n {tr(\n 'plan.wizardDesc',\n 'Configure a plannotator hook for at least one installed AI coding agent. The hook forwards plan content from the agent to plannotator on every plan-finalisation step.'\n )}\n </p>\n {installed.length === 0 && (\n <p className=\"mt-4 text-sm text-status-warning-text\">\n {tr(\n 'plan.wizardNoAgents',\n 'No AI coding agents detected in this sandbox. Install one (Claude Code, OpenCode, Codex, Pi, or Gemini) and refresh.'\n )}\n </p>\n )}\n <ul className=\"mt-4 space-y-2\">\n {agents.map((entry) => (\n <li\n key={entry.agent}\n className=\"flex items-start gap-3 p-3 border border-border-default rounded-md bg-bg-surface\"\n >\n {entry.hookConfigured ? (\n <CheckCircle2 className=\"size-5 text-status-success-text shrink-0 mt-0.5\" />\n ) : (\n <div className=\"size-5 rounded-full border-2 border-border-default shrink-0 mt-0.5\" />\n )}\n <div className=\"flex-1\">\n <p className=\"text-sm font-medium text-text-primary\">{entry.name}</p>\n <p className=\"text-xs text-text-secondary mt-0.5\">{entry.instructions}</p>\n {!entry.cliInstalled && (\n <p className=\"text-xs text-status-warning-text mt-1\">\n {tr('plan.agentCliMissing', 'CLI not detected on this sandbox.')}\n </p>\n )}\n </div>\n <button\n type=\"button\"\n // Re-enabled when already configured: re-writing is the only\n // way to repair a stale hook (wrong path / old agent key).\n disabled={!entry.cliInstalled \|\| configuring === entry.agent}\n onClick={() => onConfigure(entry.agent)}\n className=\"px-3 py-1.5 text-xs rounded-md bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bgHover disabled:opacity-50\"\n >\n {configuring === entry.agent\n ? tr('plan.configuring', 'Configuring…')\n : entry.hookConfigured\n ? tr('plan.reconfigureHook', 'Reconfigure')\n : tr('plan.configureHook', 'Configure hook')}\n </button>\n </li>\n ))}\n </ul>\n </div>\n </div>\n </div>\n );\n}\n\ninterface PlanReadyPanelProps {\n agent: AgentRef;\n agents: AgentDetectionResult[];\n tunnelUrl: string \| null;\n runningSessions: PlannotatorStatus['runningSessions'];\n onReconfigure: () => void;\n tr: (key: string, fallback: string) => string;\n}\n\nfunction PlanReadyPanel({\n agent,\n agents,\n tunnelUrl,\n runningSessions,\n onReconfigure,\n tr,\n}: PlanReadyPanelProps) {\n const iframeRef = useRef<HTMLIFrameElement \| null>(null);\n const [connection, setConnection] = useState<ConnectionStatus>('connecting');\n\n // plannotator is session-scoped — it only serves a plan at /plan/<sessionId>/.\n // A session exists once a connected coding agent finalises a plan (its hook\n // POSTs to the agent). With none running there is nothing to embed (the bare\n // /plan/ root 404s), so we show an empty state instead. The status endpoint\n // doesn't guarantee ordering, so pick the most recently started session.\n const activeSession = useMemo(\n () =>\n runningSessions.length > 0\n ? // `\|\| 0` keeps the sort deterministic if a startedAt is malformed (Date.parse → NaN).\n [...runningSessions].sort(\n (a, b) => (Date.parse(b.startedAt) \|\| 0) - (Date.parse(a.startedAt) \|\| 0)\n )[0]\n : null,\n [runningSessions]\n );\n const activeSessionId = activeSession?.sessionId ?? null;\n\n // F4 Wave B — mint a short-lived IFRAME_PLUGIN capability instead of\n // embedding the deprecated long-lived `agentApiKey` in `?apiKey=`. The\n // agent's `/plan/<sessionId>` bootstrap exchanges the `#vt=` fragment\n // for a scoped HttpOnly cookie before proxying to plannotator.\n const [mintAgentCapability] = useMintAgentCapabilityMutation();\n const [iframeToken, setIframeToken] = useState<string \| null>(null);\n\n useEffect(() => {\n let cancelled = false;\n if (!agent.id \|\| !activeSessionId) {\n setIframeToken(null);\n return undefined;\n }\n mintAgentCapability({\n variables: {\n agentId: agent.id,\n profile: agent.profile ?? 'default',\n // PLAN_SESSION binds the ticket to `/plan/<sessionId>` — the path the\n // iframe actually loads. IFRAME_PLUGIN would scope it to `/ui/<id>`,\n // which never matches the plan proxy URL (the bug that left the iframe\n // 401'd). The agent's `/plan/` shim verifies this `/plan/<sid>` ticket.\n scope: AgentCapabilityScope.PlanSession,\n resourceId: activeSessionId,\n ttlSeconds: 60,\n },\n })\n .then((res) => {\n if (cancelled) return;\n setIframeToken(res.data?.mintAgentCapability?.token ?? null);\n })\n .catch(() => {\n if (!cancelled) setIframeToken(null);\n });\n return () => {\n cancelled = true;\n };\n }, [agent.id, agent.profile, activeSessionId, mintAgentCapability]);\n\n const iframeSrc = useMemo(() => {\n if (!tunnelUrl \|\| !iframeToken \|\| !activeSessionId) return null;\n const base = tunnelUrl.replace(/\\/$/, '');\n return `${base}/plan/${activeSessionId}/#vt=${encodeURIComponent(iframeToken)}`;\n }, [tunnelUrl, iframeToken, activeSessionId]);\n\n // Reset the connection indicator when the embedded session changes so a\n // prior session's 'error'/'connected' state doesn't bleed into the next one.\n useEffect(() => {\n setConnection('connecting');\n }, [activeSessionId]);\n\n const sendAuth = useCallback(() => {\n // No-op post-F4: the iframe authenticates via the `#vt=` fragment +\n // agent-issued cookie. Kept as a stable reference for handleLoad.\n }, []);\n\n const handleLoad = useCallback(() => {\n setConnection('connected');\n sendAuth();\n }, [sendAuth]);\n\n const handleError = useCallback(() => {\n setConnection('error');\n }, []);\n\n const handleRetry = useCallback(() => {\n const iframe = iframeRef.current;\n if (!iframe) return;\n setConnection('connecting');\n const src = iframe.src;\n iframe.src = 'about:blank';\n requestAnimationFrame(() => {\n iframe.src = src;\n });\n }, []);\n\n // Used elsewhere for analytics / breadcrumbs.\n void agent;\n\n if (!tunnelUrl) {\n return (\n <div className=\"rounded-lg border border-status-warning-border bg-status-warning-bg p-4 text-sm text-status-warning-text\">\n {tr(\n 'plan.tunnelMissing',\n 'Agent tunnel URL is missing. Bring the agent online and refresh.'\n )}\n </div>\n );\n }\n\n const configuredAgents = agents.filter((a) => a.hookConfigured);\n\n return (\n <div className=\"space-y-3\">\n <div className=\"flex items-center gap-2 text-xs text-text-secondary\">\n {activeSession && (\n <>\n <span className=\"inline-flex items-center gap-1\">\n {connection === 'connected' && <Wifi className=\"size-3.5 text-status-success-text\" />}\n {connection === 'connecting' && (\n <Loader2 className=\"size-3.5 animate-spin text-status-warning-text\" />\n )}\n {connection === 'error' && <WifiOff className=\"size-3.5 text-status-error-text\" />}\n {tr(`plan.connection.${connection}`, connection)}\n </span>\n <span aria-hidden=\"true\">·</span>\n </>\n )}\n <span>{tr('plan.hookCount', `${configuredAgents.length} hook(s) configured`)}</span>\n <button\n type=\"button\"\n onClick={onReconfigure}\n className=\"ml-auto inline-flex items-center gap-1 hover:text-text-primary\"\n >\n <Settings className=\"size-3.5\" />\n {tr('plan.reopenWizard', 'Manage hooks')}\n </button>\n </div>\n\n <div className=\"border border-border-default rounded-lg overflow-hidden bg-bg-sunken relative h-[calc(100vh-320px)] min-h-[500px]\">\n {!activeSession && (\n <div className=\"absolute inset-0 flex flex-col items-center justify-center gap-2 p-6 text-center\">\n <Inbox className=\"size-8 text-text-muted\" />\n <p className=\"text-sm font-medium text-text-primary\">\n {tr('plan.noSessionTitle', 'No active plan session')}\n </p>\n <p className=\"max-w-md text-xs text-text-secondary\">\n {tr(\n 'plan.noSessionDesc',\n 'Start a plan in a connected coding agent — when it finalises a plan, the configured hook forwards it here for review.'\n )}\n </p>\n </div>\n )}\n {iframeSrc && (\n / The src carries ?apiKey= for the initial auth (an iframe can't set\n request headers). Drop popups/top-navigation and send no referrer\n so that key can't leak out of the frame via a navigation or popup. */\n <iframe\n ref={iframeRef}\n src={iframeSrc}\n title={tr('plan.iframeTitle', 'Plannotator plan workspace')}\n className=\"w-full h-full border-0\"\n allow=\"clipboard-read; clipboard-write\"\n referrerPolicy=\"no-referrer\"\n sandbox=\"allow-same-origin allow-scripts allow-forms\"\n onLoad={handleLoad}\n onError={handleError}\n data-testid=\"plan-iframe\"\n />\n )}\n {activeSession && connection === 'connecting' && (\n <div className=\"absolute inset-0 flex items-center justify-center bg-bg-sunken/80 pointer-events-none\">\n <Loader2 className=\"size-6 animate-spin text-action-primary-bg\" />\n </div>\n )}\n {activeSession && connection === 'error' && (\n <div className=\"absolute inset-0 flex items-center justify-center bg-bg-sunken p-6 text-center\">\n <div>\n <AlertCircle className=\"size-6 text-status-error-text mx-auto\" />\n <p className=\"text-sm font-medium text-text-primary mt-2\">\n {tr('plan.iframeErrorTitle', 'Could not load plannotator.')}\n </p>\n <p className=\"text-xs text-text-secondary mt-1\">\n {tr(\n 'plan.iframeErrorDesc',\n 'The agent reverse proxy returned an error. Check the agent status and try again.'\n )}\n </p>\n <button\n type=\"button\"\n onClick={handleRetry}\n className=\"mt-3 inline-flex items-center gap-1 rounded-md bg-action-primary-bg px-3 py-1.5 text-sm text-action-primary-text hover:bg-action-primary-bgHover\"\n >\n <RefreshCcw className=\"size-3.5\" /> {tr('plan.retry', 'Retry')}\n </button>\n </div>\n </div>\n )}\n </div>\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;AA8DA,SAAgB,EAAY,EAAE,UAAO,gBAA+B;CAClE,IAAM,EAAE,SAAM,GAAS,EAGjB,KAAM,GAAa,MAA6B;EACpD,IAAM,IAAQ,EAAE,EAAI;AACpB,SAAO,MAAU,IAAM,IAAW;;AAGpC,QACE,kBAAC,GAAD;EACE,SAAS,EAAM;EACf,UAAU,CAAC,GAAmB,EAAyB;EACvD,MAAK;EACL,SAAS,EAAG,8BAA8B,uBAAuB;EACjE,OAAO,EAAG,iCAAiC,4BAA4B;EACvE,aAAa,EACX,gCACA,wJACD;YAED,kBAAC,GAAD;GAAuB;GAAkB;GAAa,CAAA;EAC3C,CAAA;;AAIjB,SAAS,EAAe,EAAE,UAAO,gBAA+B;CAC9D,IAAM,EAAE,SAAM,GAAS,EACjB,IAAK,GACR,GAAa,MAA6B;EACzC,IAAM,IAAQ,EAAE,EAAI;AACpB,SAAO,MAAU,IAAM,IAAW;IAEpC,CAAC,EAAE,CACJ,EAEK,CAAC,GAAQ,KAAa,EAAmC,KAAK,EAC9D,CAAC,GAAa,KAAkB,EAAwB,KAAK,EAC7D,CAAC,GAAe,KAAoB,EAAS,GAAK,EAClD,CAAC,GAAQ,KAAa,EAAiC,EAAE,CAAC,EAC1D,CAAC,GAAY,KAAiB,EAAS,GAAM,EAC7C,CAAC,GAAa,KAAkB,EAAwB,KAAK,EAC7D,CAAC,GAAe,KAAoB,EAAwB,KAAK,EACjE,CAAC,GAAa,KAAkB,EAAwB,KAAK,EAK7D,CAAC,GAAa,KAAkB,EAAS,GAAM,EAE/C,IAAU,EAId,OAAO,IAAS,OAAU;AACxB,EAAK,MACH,EAAiB,GAAK,EACtB,EAAe,KAAK;AAEtB,MAAI;AACF,OAAI,GAAQ;AACV,MAAU,MAAM,EAAqB,EAAM,CAAC;AAC5C;;GAEF,IAAM,CAAC,GAAc,KAAgB,MAAM,QAAQ,IAAI,CACrD,EAAqB,EAAM,EAC3B,EAAoB,EAAM,CAAC,aAAa,EAAE,QAAQ,EAAE,EAAE,EAAE,CACzD,CAAC;AAEF,GADA,EAAU,EAAa,EACvB,EAAU,EAAa,UAAU,EAAE,CAAC;WAC7B,GAAK;AACZ,GAAK,KACH,EAAe,aAAe,QAAQ,EAAI,UAAU,6BAA6B;YAE3E;AACR,GAAK,KAAQ,EAAiB,GAAM;;IAGxC,CAAC,EAAM,CACR;AAED,SAAgB;AACT,KAAS;IACb,CAAC,EAAQ,CAAC;CAEb,IAAM,IAAmB,EAAY,YAAY;AAG/C,EAFA,EAAc,GAAK,EACnB,EAAe,KAAK,EACpB,EAAiB,KAAK;AACtB,MAAI;GACF,IAAM,IAAS,MAAM,EAAyB,EAAM;AACpD,GAAI,EAAO,MACT,EAAiB,EAAG,qBAAqB,6BAA6B,CAAC,EACvE,MAAM,GAAS,IAEf,EAAe,EAAO,SAAS,iBAAiB;WAE3C,GAAK;AACZ,KAAe,aAAe,QAAQ,EAAI,UAAU,iBAAiB;YAC7D;AACR,KAAc,GAAM;;IAErB;EAAC;EAAO;EAAS;EAAG,CAAC,EAElB,IAAsB,EAC1B,OAAO,MAA6C;AAGlD,EAFA,EAAe,EAAU,EACzB,EAAe,KAAK,EACpB,EAAiB,KAAK;AACtB,MAAI;GACF,IAAM,IAAS,MAAM,EAAmB,GAAO,EAAU;AACzD,GAAI,EAAO,MACT,EAAiB,EAAG,uBAAuB,uBAAuB,EAAU,GAAG,CAAC,EAChF,MAAM,GAAS,IAEf,EAAe,EAAO,SAAS,wBAAwB;WAElD,GAAK;AACZ,KAAe,aAAe,QAAQ,EAAI,UAAU,wBAAwB;YACpE;AACR,KAAe,KAAK;;IAGxB;EAAC;EAAO;EAAS;EAAG,CACrB,EAIK,IAAO,QACP,IAAsB,YACtB,IAAoB,iBACnB,GAAQ,YAET,CADkB,EAAO,MAAM,MAAM,EAAE,eAAe,IACpC,IAAoB,WACnC,UAHwB,eAI9B;EAAC;EAAQ;EAAa;EAAe;EAAQ;EAAY,CAAC;AA+C7D,QAzCA,QAAgB;AACd,MAAI,MAAS,QAAS;EAEtB,IAAM,IAAK,kBAAkB;AAC3B,GAAK,SAAS,UAAa,EAAQ,GAAK;KACvC,IAAK;AACR,eAAa,cAAc,EAAG;IAC7B,CAAC,GAAM,EAAQ,CAAC,EAEf,MAAS,YAET,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,GAAD,EAAS,WAAU,uBAAwB,CAAA,EAC3C,kBAAC,QAAD,EAAA,UAAO,EAAG,sBAAsB,uBAAuB,EAAQ,CAAA,CAC3D;MAIN,MAAS,iBAET,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,GAAD,EAAa,WAAU,0BAA2B,CAAA,EAClD,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,KAAD;MAAG,WAAU;gBACV,EAAG,oBAAoB,6CAA6C;MACnE,CAAA;KACJ,kBAAC,KAAD;MAAG,WAAU;gBAA2B;MAAgB,CAAA;KACxD,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,KAAK,GAAS;MAC7B,WAAU;gBAHZ;OAKE,kBAAC,GAAD,EAAY,WAAU,UAAW,CAAA;;OAAE,EAAG,cAAc,QAAQ;OACrD;;KACL;MACF;;EACF,CAAA,GAKR,kBAAC,OAAD;EAAK,WAAU;YAAf;GACG,KACC,kBAAC,OAAD;IACE,MAAK;IACL,WAAU;cAET;IACG,CAAA;GAEP,KACC,kBAAC,OAAD;IACE,MAAK;IACL,WAAU;cAET;IACG,CAAA;GAGP,MAAS,iBACR,kBAAC,GAAD;IAA4B;IAAY,WAAW;IAAsB;IAAM,CAAA;GAGhF,MAAS,YACR,kBAAC,GAAD;IACU;IACK;IACb,aAAa;IAIb,SAAS,KAAe,EAAO,MAAM,MAAM,EAAE,eAAe;IAC5D,cAAc,EAAe,GAAM;IAC/B;IACJ,CAAA;GAGH,MAAS,WACR,kBAAC,GAAD;IACS;IACC;IACG;IACX,iBAAiB,GAAQ,mBAAmB,EAAE;IAC9C,qBAAqB;AAEnB,KADA,EAAiB,KAAK,EACtB,EAAe,GAAK;;IAElB;IACJ,CAAA;GAEA;;;AAUV,SAAS,EAAe,EAAE,eAAY,cAAW,SAA2B;AAC1E,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,GAAD,EAAY,WAAU,0CAA2C,CAAA,EACjE,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,MAAD;MAAI,WAAU;gBACX,EAAG,wBAAwB,8BAA8B;MACvD,CAAA;KACL,kBAAC,KAAD;MAAG,WAAU;gBACV,EACC,uBACA,yLACD;MACC,CAAA;KACJ,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,UAAU;MACV,WAAU;gBAET,IACC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAAS,WAAU,uBAAwB,CAAA,EAC1C,EAAG,mBAAmB,cAAc,CACpC,EAAA,CAAA,GAEH,EAAG,sBAAsB,0BAA0B;MAE9C,CAAA;KACL;MACF;;EACF,CAAA;;AAaV,SAAS,EAAW,EAAE,WAAQ,gBAAa,gBAAa,YAAS,WAAQ,SAAuB;CAC9F,IAAM,IAAY,EAAO,QAAQ,MAAM,EAAE,aAAa;AACtD,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,GAAD,EAAU,WAAU,0CAA2C,CAAA,EAC/D,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,MAAD;OAAI,WAAU;iBACX,EAAG,oBAAoB,6BAA6B;OAClD,CAAA,EACJ,KAAW,KACV,kBAAC,UAAD;OACE,MAAK;OACL,SAAS;OACT,WAAU;iBAET,EAAG,mBAAmB,OAAO;OACvB,CAAA,CAEP;;KACN,kBAAC,KAAD;MAAG,WAAU;gBACV,EACC,mBACA,yKACD;MACC,CAAA;KACH,EAAU,WAAW,KACpB,kBAAC,KAAD;MAAG,WAAU;gBACV,EACC,uBACA,uHACD;MACC,CAAA;KAEN,kBAAC,MAAD;MAAI,WAAU;gBACX,EAAO,KAAK,MACX,kBAAC,MAAD;OAEE,WAAU;iBAFZ;QAIG,EAAM,iBACL,kBAAC,GAAD,EAAc,WAAU,mDAAoD,CAAA,GAE5E,kBAAC,OAAD,EAAK,WAAU,sEAAuE,CAAA;QAExF,kBAAC,OAAD;SAAK,WAAU;mBAAf;UACE,kBAAC,KAAD;WAAG,WAAU;qBAAyC,EAAM;WAAS,CAAA;UACrE,kBAAC,KAAD;WAAG,WAAU;qBAAsC,EAAM;WAAiB,CAAA;UACzE,CAAC,EAAM,gBACN,kBAAC,KAAD;WAAG,WAAU;qBACV,EAAG,wBAAwB,oCAAoC;WAC9D,CAAA;UAEF;;QACN,kBAAC,UAAD;SACE,MAAK;SAGL,UAAU,CAAC,EAAM,gBAAgB,MAAgB,EAAM;SACvD,eAAe,EAAY,EAAM,MAAM;SACvC,WAAU;mBAET,MAAgB,EAAM,QACnB,EAAG,oBAAoB,eAAe,GACtC,EAAM,iBACJ,EAAG,wBAAwB,cAAc,GACzC,EAAG,sBAAsB,iBAAiB;SACzC,CAAA;QACN;SA/BE,EAAM,MA+BR,CACL;MACC,CAAA;KACD;MACF;;EACF,CAAA;;AAaV,SAAS,EAAe,EACtB,UACA,WACA,cACA,oBACA,kBACA,SACsB;CACtB,IAAM,IAAY,EAAiC,KAAK,EAClD,CAAC,GAAY,KAAiB,EAA2B,aAAa,EAOtE,IAAgB,QAElB,EAAgB,SAAS,IAErB,CAAC,GAAG,EAAgB,CAAC,MAClB,GAAG,OAAO,KAAK,MAAM,EAAE,UAAU,IAAI,MAAM,KAAK,MAAM,EAAE,UAAU,IAAI,GACxE,CAAC,KACF,MACN,CAAC,EAAgB,CAClB,EACK,IAAkB,GAAe,aAAa,MAM9C,CAAC,KAAuB,GAAgC,EACxD,CAAC,GAAa,KAAkB,EAAwB,KAAK;AAEnE,SAAgB;EACd,IAAI,IAAY;AAChB,MAAI,CAAC,EAAM,MAAM,CAAC,GAAiB;AACjC,KAAe,KAAK;AACpB;;AAsBF,SApBA,EAAoB,EAClB,WAAW;GACT,SAAS,EAAM;GACf,SAAS,EAAM,WAAW;GAK1B,OAAO,EAAqB;GAC5B,YAAY;GACZ,YAAY;GACb,EACF,CAAC,CACC,MAAM,MAAQ;AACT,QACJ,EAAe,EAAI,MAAM,qBAAqB,SAAS,KAAK;IAC5D,CACD,YAAY;AACX,GAAK,KAAW,EAAe,KAAK;IACpC,QACS;AACX,OAAY;;IAEb;EAAC,EAAM;EAAI,EAAM;EAAS;EAAiB;EAAoB,CAAC;CAEnE,IAAM,IAAY,QACZ,CAAC,KAAa,CAAC,KAAe,CAAC,IAAwB,OAEpD,GADM,EAAU,QAAQ,OAAO,GAAG,CAC1B,QAAQ,EAAgB,OAAO,mBAAmB,EAAY,IAC5E;EAAC;EAAW;EAAa;EAAgB,CAAC;AAI7C,SAAgB;AACd,IAAc,aAAa;IAC1B,CAAC,EAAgB,CAAC;CAErB,IAAM,IAAW,QAAkB,IAGhC,EAAE,CAAC,EAEA,IAAa,QAAkB;AAEnC,EADA,EAAc,YAAY,EAC1B,GAAU;IACT,CAAC,EAAS,CAAC,EAER,IAAc,QAAkB;AACpC,IAAc,QAAQ;IACrB,EAAE,CAAC,EAEA,IAAc,QAAkB;EACpC,IAAM,IAAS,EAAU;AACzB,MAAI,CAAC,EAAQ;AACb,IAAc,aAAa;EAC3B,IAAM,IAAM,EAAO;AAEnB,EADA,EAAO,MAAM,eACb,4BAA4B;AAC1B,KAAO,MAAM;IACb;IACD,EAAE,CAAC;AAKN,KAAI,CAAC,EACH,QACE,kBAAC,OAAD;EAAK,WAAU;YACZ,EACC,sBACA,mEACD;EACG,CAAA;CAIV,IAAM,IAAmB,EAAO,QAAQ,MAAM,EAAE,eAAe;AAE/D,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf;IACG,KACC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,QAAD;KAAM,WAAU;eAAhB;MACG,MAAe,eAAe,kBAAC,GAAD,EAAM,WAAU,qCAAsC,CAAA;MACpF,MAAe,gBACd,kBAAC,GAAD,EAAS,WAAU,kDAAmD,CAAA;MAEvE,MAAe,WAAW,kBAAC,GAAD,EAAS,WAAU,mCAAoC,CAAA;MACjF,EAAG,mBAAmB,KAAc,EAAW;MAC3C;QACP,kBAAC,QAAD;KAAM,eAAY;eAAO;KAAQ,CAAA,CAChC,EAAA,CAAA;IAEL,kBAAC,QAAD,EAAA,UAAO,EAAG,kBAAkB,GAAG,EAAiB,OAAO,qBAAqB,EAAQ,CAAA;IACpF,kBAAC,UAAD;KACE,MAAK;KACL,SAAS;KACT,WAAU;eAHZ,CAKE,kBAAC,GAAD,EAAU,WAAU,YAAa,CAAA,EAChC,EAAG,qBAAqB,eAAe,CACjC;;IACL;MAEN,kBAAC,OAAD;GAAK,WAAU;aAAf;IACG,CAAC,KACA,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,GAAD,EAAO,WAAU,0BAA2B,CAAA;MAC5C,kBAAC,KAAD;OAAG,WAAU;iBACV,EAAG,uBAAuB,yBAAyB;OAClD,CAAA;MACJ,kBAAC,KAAD;OAAG,WAAU;iBACV,EACC,sBACA,wHACD;OACC,CAAA;MACA;;IAEP,KAIC,kBAAC,UAAD;KACE,KAAK;KACL,KAAK;KACL,OAAO,EAAG,oBAAoB,6BAA6B;KAC3D,WAAU;KACV,OAAM;KACN,gBAAe;KACf,SAAQ;KACR,QAAQ;KACR,SAAS;KACT,eAAY;KACZ,CAAA;IAEH,KAAiB,MAAe,gBAC/B,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,GAAD,EAAS,WAAU,8CAA+C,CAAA;KAC9D,CAAA;IAEP,KAAiB,MAAe,WAC/B,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,OAAD,EAAA,UAAA;MACE,kBAAC,GAAD,EAAa,WAAU,yCAA0C,CAAA;MACjE,kBAAC,KAAD;OAAG,WAAU;iBACV,EAAG,yBAAyB,8BAA8B;OACzD,CAAA;MACJ,kBAAC,KAAD;OAAG,WAAU;iBACV,EACC,wBACA,mFACD;OACC,CAAA;MACJ,kBAAC,UAAD;OACE,MAAK;OACL,SAAS;OACT,WAAU;iBAHZ;QAKE,kBAAC,GAAD,EAAY,WAAU,YAAa,CAAA;;QAAE,EAAG,cAAc,QAAQ;QACvD;;MACL,EAAA,CAAA;KACF,CAAA;IAEJ;KACF"}
1	+ {"version":3,"file":"AIPlanPanel.js","names":[],"sources":["../../../src/components/ai/AIPlanPanel.tsx"],"sourcesContent":["/*\n AIPlanPanel — the body of /ai-tools/plan.\n \n Five UI states gated in order:\n * 1. installing-plugin → vibe-plugin-plan + vibe-plugin-plan-plannotator\n * not installed on the agent. Renders the PluginGate install card.\n * 2. installing-cli → plugins installed but plannotator binary\n * missing on disk. Renders an Install CLI CTA.\n * 3. wizard → CLI installed but no AI-agent hook configured\n * yet. Renders the Claude/OpenCode/Codex/Pi/Gemini wizard.\n * 4. ready → all prereqs satisfied. Renders the tunnel\n * iframe pointing at ${tunnelUrl}/plan/, with postMessage auth\n * handoff on iframe load (mirrors PluginUIPanel.tsx).\n * 5. error → unrecoverable load failure for the status\n * query. Renders an error banner with retry.\n \n Auth handoff (matches PluginUIPanel.tsx:194–210):\n * onLoad → iframe.contentWindow.postMessage({type:'vibe-auth', apiKey},\n * new URL(tunnelUrl).origin)\n \n Surface contracts:\n * GET /api/plan-plannotator/status → PlannotatorStatus\n * POST /api/plan-plannotator/install → install binary\n * GET /api/plan-plannotator/agents/supported → AgentDetectionResult[]\n * POST /api/plan-plannotator/agents/:agent/configure-hook\n /\n\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport {\n AlertCircle,\n CheckCircle2,\n Inbox,\n Loader2,\n PlayCircle,\n RefreshCcw,\n Settings,\n Wifi,\n WifiOff,\n} from 'lucide-react';\n\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { PluginGate } from '@/components/shared';\nimport { PLAN_META_PACKAGE, PLAN_PLANNOTATOR_PACKAGE } from '@/constants/pluginCatalog';\nimport {\n configureAgentHook,\n getPlannotatorStatus,\n installPlannotatorBinary,\n listSupportedAgents,\n type AgentDetectionResult,\n type PlannotatorStatus,\n} from '@/services/planApi';\nimport type { AgentRef } from '@/services/aiApi';\nimport { useMintAgentCapabilityMutation } from '@/generated/wspace-operations';\nimport { AgentCapabilityScope } from '@/generated/wspace-types';\n\ninterface AIPlanPanelProps {\n agent: AgentRef;\n tunnelUrl: string \| null;\n}\n\ntype ConnectionStatus = 'connecting' \| 'connected' \| 'error';\n\nexport function AIPlanPanel({ agent, tunnelUrl }: AIPlanPanelProps) {\n const { t } = useI18n();\n // PluginGate renders eyebrow/title/description verbatim (no i18n lookup of\n // its own), so resolve them here with English fallbacks until plan. keys exist.\n const tr = (key: string, fallback: string): string => {\n const value = t(key);\n return value === key ? fallback : value;\n };\n\n return (\n <PluginGate\n agentId={agent.id}\n required={[PLAN_META_PACKAGE, PLAN_PLANNOTATOR_PACKAGE]}\n mode=\"all\"\n eyebrow={tr('plan.pluginRequiredEyebrow', 'Plan plugin required')}\n title={tr('plan.installPlanProviderTitle', 'Install the plan provider')}\n description={tr(\n 'plan.installPlanProviderDesc',\n 'Plan mode routes plan sessions through a plan provider plugin on your agent. Install the orchestrator and a provider (Plannotator) below to continue.'\n )}\n >\n <PlanPanelInner agent={agent} tunnelUrl={tunnelUrl} />\n </PluginGate>\n );\n}\n\nfunction PlanPanelInner({ agent, tunnelUrl }: AIPlanPanelProps) {\n const { t } = useI18n();\n const tr = useCallback(\n (key: string, fallback: string): string => {\n const value = t(key);\n return value === key ? fallback : value;\n },\n [t]\n );\n\n const [status, setStatus] = useState<PlannotatorStatus \| null>(null);\n const [statusError, setStatusError] = useState<string \| null>(null);\n const [statusLoading, setStatusLoading] = useState(true);\n const [agents, setAgents] = useState<AgentDetectionResult[]>([]);\n const [installing, setInstalling] = useState(false);\n const [configuring, setConfiguring] = useState<string \| null>(null);\n const [actionMessage, setActionMessage] = useState<string \| null>(null);\n const [actionError, setActionError] = useState<string \| null>(null);\n // \"Manage hooks\" forces the wizard back open even when a hook is already\n // configured — the only way to re-write a stale/broken hook (wrong path or\n // a key from a prior agent identity), which otherwise locks the panel into\n // the ready view forever.\n const [forceWizard, setForceWizard] = useState(false);\n\n const refresh = useCallback(\n // `silent` background refreshes (polling) only update session status: they\n // skip the loading/error toggles AND the agent re-detection, so a transient\n // listSupportedAgents failure can't demote the ready view to the wizard.\n async (silent = false) => {\n if (!silent) {\n setStatusLoading(true);\n setStatusError(null);\n }\n try {\n if (silent) {\n setStatus(await getPlannotatorStatus(agent));\n return;\n }\n const [statusResult, agentsResult] = await Promise.all([\n getPlannotatorStatus(agent),\n listSupportedAgents(agent).catch(() => ({ agents: [] })),\n ]);\n setStatus(statusResult);\n setAgents(agentsResult.agents ?? []);\n } catch (err) {\n if (!silent) {\n setStatusError(err instanceof Error ? err.message : 'Failed to load plan status');\n }\n } finally {\n if (!silent) setStatusLoading(false);\n }\n },\n [agent]\n );\n\n useEffect(() => {\n void refresh();\n }, [refresh]);\n\n const handleInstallCli = useCallback(async () => {\n setInstalling(true);\n setActionError(null);\n setActionMessage(null);\n try {\n const result = await installPlannotatorBinary(agent);\n if (result.ok) {\n setActionMessage(tr('plan.cliInstalled', 'Plannotator CLI installed.'));\n await refresh();\n } else {\n setActionError(result.error ?? 'Install failed');\n }\n } catch (err) {\n setActionError(err instanceof Error ? err.message : 'Install failed');\n } finally {\n setInstalling(false);\n }\n }, [agent, refresh, tr]);\n\n const handleConfigureHook = useCallback(\n async (agentKind: AgentDetectionResult['agent']) => {\n setConfiguring(agentKind);\n setActionError(null);\n setActionMessage(null);\n try {\n const result = await configureAgentHook(agent, agentKind);\n if (result.ok) {\n setActionMessage(tr('plan.hookConfigured', `Hook configured for ${agentKind}.`));\n await refresh();\n } else {\n setActionError(result.error ?? 'Hook configure failed');\n }\n } catch (err) {\n setActionError(err instanceof Error ? err.message : 'Hook configure failed');\n } finally {\n setConfiguring(null);\n }\n },\n [agent, refresh, tr]\n );\n\n // Derived render state — guarded ordering means we always render the\n // most prerequisite-bound CTA first.\n const view = useMemo<'loading' \| 'status-error' \| 'install-cli' \| 'wizard' \| 'ready'>(() => {\n if (statusLoading) return 'loading';\n if (statusError) return 'status-error';\n if (!status?.installed) return 'install-cli';\n const anyConfigured = agents.some((a) => a.hookConfigured);\n if (!anyConfigured \|\| forceWizard) return 'wizard';\n return 'ready';\n }, [status, statusError, statusLoading, agents, forceWizard]);\n\n // While the ready panel is shown, poll status in the background so a plan\n // session created by a coding agent's hook (or one that ends) is reflected\n // without a manual reload — `runningSessions` gates the iframe vs the empty\n // state below.\n useEffect(() => {\n if (view !== 'ready') return;\n // Skip ticks while the tab is hidden — no point polling a panel nobody sees.\n const id = setInterval(() => {\n if (!document.hidden) void refresh(true);\n }, 5000);\n return () => clearInterval(id);\n }, [view, refresh]);\n\n if (view === 'loading') {\n return (\n <div className=\"flex items-center gap-2 p-6 text-text-secondary\">\n <Loader2 className=\"size-4 animate-spin\" />\n <span>{tr('plan.loadingStatus', 'Loading plan status…')}</span>\n </div>\n );\n }\n\n if (view === 'status-error') {\n return (\n <div className=\"rounded-md border border-status-error-border bg-status-error-bg-subtle p-4 text-sm text-status-error-text\">\n <div className=\"flex items-start gap-2\">\n <AlertCircle className=\"size-4 mt-0.5 shrink-0\" />\n <div className=\"flex-1\">\n <p className=\"font-medium\">\n {tr('plan.statusError', 'Could not load plan status from the agent.')}\n </p>\n <p className=\"text-xs opacity-80 mt-1\">{statusError}</p>\n <button\n type=\"button\"\n onClick={() => void refresh()}\n className=\"mt-3 inline-flex items-center gap-1 text-xs font-medium hover:underline\"\n >\n <RefreshCcw className=\"size-3\" /> {tr('plan.retry', 'Retry')}\n </button>\n </div>\n </div>\n </div>\n );\n }\n\n return (\n <div className=\"space-y-4\">\n {actionMessage && (\n <div\n role=\"status\"\n className=\"rounded-md border border-status-success-border bg-status-success-bg-subtle px-3 py-2 text-xs text-status-success-text\"\n >\n {actionMessage}\n </div>\n )}\n {actionError && (\n <div\n role=\"alert\"\n className=\"rounded-md border border-status-error-border bg-status-error-bg-subtle px-3 py-2 text-xs text-status-error-text\"\n >\n {actionError}\n </div>\n )}\n\n {view === 'install-cli' && (\n <InstallCliCard installing={installing} onInstall={handleInstallCli} tr={tr} />\n )}\n\n {view === 'wizard' && (\n <WizardCard\n agents={agents}\n configuring={configuring}\n onConfigure={handleConfigureHook}\n // Offer \"Done\" only when a ready view exists to return to — i.e.\n // at least one hook is configured (we got here via Manage hooks),\n // not during the genuine first-run wizard.\n canExit={forceWizard && agents.some((a) => a.hookConfigured)}\n onExit={() => setForceWizard(false)}\n tr={tr}\n />\n )}\n\n {view === 'ready' && (\n <PlanReadyPanel\n agent={agent}\n agents={agents}\n tunnelUrl={tunnelUrl}\n runningSessions={status?.runningSessions ?? []}\n onReconfigure={() => {\n setActionMessage(null);\n setForceWizard(true);\n }}\n tr={tr}\n />\n )}\n </div>\n );\n}\n\ninterface InstallCliCardProps {\n installing: boolean;\n onInstall: () => void;\n tr: (key: string, fallback: string) => string;\n}\n\nfunction InstallCliCard({ installing, onInstall, tr }: InstallCliCardProps) {\n return (\n <div className=\"rounded-lg border border-border-default bg-bg-elevated p-6\">\n <div className=\"flex items-start gap-3\">\n <PlayCircle className=\"size-6 text-action-primary-bg shrink-0\" />\n <div className=\"flex-1\">\n <h3 className=\"text-base font-semibold text-text-primary\">\n {tr('plan.installCliTitle', 'Install the plannotator CLI')}\n </h3>\n <p className=\"text-sm text-text-secondary mt-1\">\n {tr(\n 'plan.installCliDesc',\n 'Plan mode runs a local plannotator binary on the agent and proxies its UI back here. The plugin installs the binary into ~/.local/bin/plannotator (sha256-pinned). Roughly 30 seconds.'\n )}\n </p>\n <button\n type=\"button\"\n onClick={onInstall}\n disabled={installing}\n className=\"mt-4 inline-flex items-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bgHover disabled:opacity-50\"\n >\n {installing ? (\n <>\n <Loader2 className=\"size-4 animate-spin\" />\n {tr('plan.installing', 'Installing…')}\n </>\n ) : (\n tr('plan.installCliCta', 'Install plannotator CLI')\n )}\n </button>\n </div>\n </div>\n </div>\n );\n}\n\ninterface WizardCardProps {\n agents: AgentDetectionResult[];\n configuring: string \| null;\n onConfigure: (agentKind: AgentDetectionResult['agent']) => void;\n canExit?: boolean;\n onExit?: () => void;\n tr: (key: string, fallback: string) => string;\n}\n\nfunction WizardCard({ agents, configuring, onConfigure, canExit, onExit, tr }: WizardCardProps) {\n const installed = agents.filter((a) => a.cliInstalled);\n return (\n <div className=\"rounded-lg border border-border-default bg-bg-elevated p-6\">\n <div className=\"flex items-start gap-3\">\n <Settings className=\"size-6 text-action-primary-bg shrink-0\" />\n <div className=\"flex-1\">\n <div className=\"flex items-center justify-between gap-3\">\n <h3 className=\"text-base font-semibold text-text-primary\">\n {tr('plan.wizardTitle', 'Connect an AI coding agent')}\n </h3>\n {canExit && onExit && (\n <button\n type=\"button\"\n onClick={onExit}\n className=\"shrink-0 inline-flex items-center gap-1 text-xs text-text-secondary hover:text-text-primary\"\n >\n {tr('plan.wizardDone', 'Done')}\n </button>\n )}\n </div>\n <p className=\"text-sm text-text-secondary mt-1\">\n {tr(\n 'plan.wizardDesc',\n 'Configure a plannotator hook for at least one installed AI coding agent. The hook forwards plan content from the agent to plannotator on every plan-finalisation step.'\n )}\n </p>\n {installed.length === 0 && (\n <p className=\"mt-4 text-sm text-status-warning-text\">\n {tr(\n 'plan.wizardNoAgents',\n 'No AI coding agents detected in this sandbox. Install one (Claude Code, OpenCode, Codex, Pi, or Gemini) and refresh.'\n )}\n </p>\n )}\n <ul className=\"mt-4 space-y-2\">\n {agents.map((entry) => (\n <li\n key={entry.agent}\n className=\"flex items-start gap-3 p-3 border border-border-default rounded-md bg-bg-surface\"\n >\n {entry.hookConfigured ? (\n <CheckCircle2 className=\"size-5 text-status-success-text shrink-0 mt-0.5\" />\n ) : (\n <div className=\"size-5 rounded-full border-2 border-border-default shrink-0 mt-0.5\" />\n )}\n <div className=\"flex-1\">\n <p className=\"text-sm font-medium text-text-primary\">{entry.name}</p>\n <p className=\"text-xs text-text-secondary mt-0.5\">{entry.instructions}</p>\n {!entry.cliInstalled && (\n <p className=\"text-xs text-status-warning-text mt-1\">\n {tr('plan.agentCliMissing', 'CLI not detected on this sandbox.')}\n </p>\n )}\n </div>\n <button\n type=\"button\"\n // Re-enabled when already configured: re-writing is the only\n // way to repair a stale hook (wrong path / old agent key).\n disabled={!entry.cliInstalled \|\| configuring === entry.agent}\n onClick={() => onConfigure(entry.agent)}\n className=\"px-3 py-1.5 text-xs rounded-md bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bgHover disabled:opacity-50\"\n >\n {configuring === entry.agent\n ? tr('plan.configuring', 'Configuring…')\n : entry.hookConfigured\n ? tr('plan.reconfigureHook', 'Reconfigure')\n : tr('plan.configureHook', 'Configure hook')}\n </button>\n </li>\n ))}\n </ul>\n </div>\n </div>\n </div>\n );\n}\n\ninterface PlanReadyPanelProps {\n agent: AgentRef;\n agents: AgentDetectionResult[];\n tunnelUrl: string \| null;\n runningSessions: PlannotatorStatus['runningSessions'];\n onReconfigure: () => void;\n tr: (key: string, fallback: string) => string;\n}\n\nfunction PlanReadyPanel({\n agent,\n agents,\n tunnelUrl,\n runningSessions,\n onReconfigure,\n tr,\n}: PlanReadyPanelProps) {\n const iframeRef = useRef<HTMLIFrameElement \| null>(null);\n const [connection, setConnection] = useState<ConnectionStatus>('connecting');\n\n // plannotator is session-scoped — it only serves a plan at /plan/<sessionId>/.\n // A session exists once a connected coding agent finalises a plan (its hook\n // POSTs to the agent). With none running there is nothing to embed (the bare\n // /plan/ root 404s), so we show an empty state instead. The status endpoint\n // doesn't guarantee ordering, so pick the most recently started session.\n const activeSession = useMemo(\n () =>\n runningSessions.length > 0\n ? // `\|\| 0` keeps the sort deterministic if a startedAt is malformed (Date.parse → NaN).\n [...runningSessions].sort(\n (a, b) => (Date.parse(b.startedAt) \|\| 0) - (Date.parse(a.startedAt) \|\| 0)\n )[0]\n : null,\n [runningSessions]\n );\n const activeSessionId = activeSession?.sessionId ?? null;\n\n // F4 Wave B — mint a short-lived IFRAME_PLUGIN capability instead of\n // embedding the deprecated long-lived `agentApiKey` in `?apiKey=`. The\n // agent's `/plan/<sessionId>` bootstrap exchanges the `#vt=` fragment\n // for a scoped HttpOnly cookie before proxying to plannotator.\n const [mintAgentCapability] = useMintAgentCapabilityMutation();\n const [iframeToken, setIframeToken] = useState<string \| null>(null);\n\n useEffect(() => {\n let cancelled = false;\n if (!agent.id \|\| !activeSessionId) {\n setIframeToken(null);\n return undefined;\n }\n mintAgentCapability({\n variables: {\n agentId: agent.id,\n profile: agent.profile ?? 'default',\n // PLAN_SESSION binds the ticket to `/plan/<sessionId>` — the path the\n // iframe actually loads. IFRAME_PLUGIN would scope it to `/ui/<id>`,\n // which never matches the plan proxy URL (the bug that left the iframe\n // 401'd). The agent's `/plan/` shim verifies this `/plan/<sid>` ticket.\n scope: AgentCapabilityScope.PlanSession,\n resourceId: activeSessionId,\n ttlSeconds: 60,\n },\n })\n .then((res) => {\n if (cancelled) return;\n setIframeToken(res.data?.mintAgentCapability?.token ?? null);\n })\n .catch(() => {\n if (!cancelled) setIframeToken(null);\n });\n return () => {\n cancelled = true;\n };\n }, [agent.id, agent.profile, activeSessionId, mintAgentCapability]);\n\n const iframeSrc = useMemo(() => {\n if (!tunnelUrl \|\| !iframeToken \|\| !activeSessionId) return null;\n const base = tunnelUrl.replace(/\\/$/, '');\n return `${base}/plan/${activeSessionId}/#vt=${encodeURIComponent(iframeToken)}`;\n }, [tunnelUrl, iframeToken, activeSessionId]);\n\n // Reset the connection indicator when the embedded session changes so a\n // prior session's 'error'/'connected' state doesn't bleed into the next one.\n useEffect(() => {\n setConnection('connecting');\n }, [activeSessionId]);\n\n const sendAuth = useCallback(() => {\n // No-op post-F4: the iframe authenticates via the `#vt=` fragment +\n // agent-issued cookie. Kept as a stable reference for handleLoad.\n }, []);\n\n const handleLoad = useCallback(() => {\n setConnection('connected');\n sendAuth();\n }, [sendAuth]);\n\n const handleError = useCallback(() => {\n setConnection('error');\n }, []);\n\n const handleRetry = useCallback(() => {\n const iframe = iframeRef.current;\n if (!iframe) return;\n setConnection('connecting');\n const src = iframe.src;\n iframe.src = 'about:blank';\n requestAnimationFrame(() => {\n iframe.src = src;\n });\n }, []);\n\n // Used elsewhere for analytics / breadcrumbs.\n void agent;\n\n if (!tunnelUrl) {\n return (\n <div className=\"rounded-lg border border-status-warning-border bg-status-warning-bg-subtle p-4 text-sm text-status-warning-text\">\n {tr(\n 'plan.tunnelMissing',\n 'Agent tunnel URL is missing. Bring the agent online and refresh.'\n )}\n </div>\n );\n }\n\n const configuredAgents = agents.filter((a) => a.hookConfigured);\n\n return (\n <div className=\"space-y-3\">\n <div className=\"flex items-center gap-2 text-xs text-text-secondary\">\n {activeSession && (\n <>\n <span className=\"inline-flex items-center gap-1\">\n {connection === 'connected' && <Wifi className=\"size-3.5 text-status-success-text\" />}\n {connection === 'connecting' && (\n <Loader2 className=\"size-3.5 animate-spin text-status-warning-text\" />\n )}\n {connection === 'error' && <WifiOff className=\"size-3.5 text-status-error-text\" />}\n {tr(`plan.connection.${connection}`, connection)}\n </span>\n <span aria-hidden=\"true\">·</span>\n </>\n )}\n <span>{tr('plan.hookCount', `${configuredAgents.length} hook(s) configured`)}</span>\n <button\n type=\"button\"\n onClick={onReconfigure}\n className=\"ml-auto inline-flex items-center gap-1 hover:text-text-primary\"\n >\n <Settings className=\"size-3.5\" />\n {tr('plan.reopenWizard', 'Manage hooks')}\n </button>\n </div>\n\n <div className=\"border border-border-default rounded-lg overflow-hidden bg-bg-sunken relative h-[calc(100vh-320px)] min-h-[500px]\">\n {!activeSession && (\n <div className=\"absolute inset-0 flex flex-col items-center justify-center gap-2 p-6 text-center\">\n <Inbox className=\"size-8 text-text-muted\" />\n <p className=\"text-sm font-medium text-text-primary\">\n {tr('plan.noSessionTitle', 'No active plan session')}\n </p>\n <p className=\"max-w-md text-xs text-text-secondary\">\n {tr(\n 'plan.noSessionDesc',\n 'Start a plan in a connected coding agent — when it finalises a plan, the configured hook forwards it here for review.'\n )}\n </p>\n </div>\n )}\n {iframeSrc && (\n / The src carries ?apiKey= for the initial auth (an iframe can't set\n request headers). Drop popups/top-navigation and send no referrer\n so that key can't leak out of the frame via a navigation or popup. */\n <iframe\n ref={iframeRef}\n src={iframeSrc}\n title={tr('plan.iframeTitle', 'Plannotator plan workspace')}\n className=\"w-full h-full border-0\"\n allow=\"clipboard-read; clipboard-write\"\n referrerPolicy=\"no-referrer\"\n sandbox=\"allow-same-origin allow-scripts allow-forms\"\n onLoad={handleLoad}\n onError={handleError}\n data-testid=\"plan-iframe\"\n />\n )}\n {activeSession && connection === 'connecting' && (\n <div className=\"absolute inset-0 flex items-center justify-center bg-bg-sunken/80 pointer-events-none\">\n <Loader2 className=\"size-6 animate-spin text-action-primary-bg\" />\n </div>\n )}\n {activeSession && connection === 'error' && (\n <div className=\"absolute inset-0 flex items-center justify-center bg-bg-sunken p-6 text-center\">\n <div>\n <AlertCircle className=\"size-6 text-status-error-text mx-auto\" />\n <p className=\"text-sm font-medium text-text-primary mt-2\">\n {tr('plan.iframeErrorTitle', 'Could not load plannotator.')}\n </p>\n <p className=\"text-xs text-text-secondary mt-1\">\n {tr(\n 'plan.iframeErrorDesc',\n 'The agent reverse proxy returned an error. Check the agent status and try again.'\n )}\n </p>\n <button\n type=\"button\"\n onClick={handleRetry}\n className=\"mt-3 inline-flex items-center gap-1 rounded-md bg-action-primary-bg px-3 py-1.5 text-sm text-action-primary-text hover:bg-action-primary-bgHover\"\n >\n <RefreshCcw className=\"size-3.5\" /> {tr('plan.retry', 'Retry')}\n </button>\n </div>\n </div>\n )}\n </div>\n </div>\n );\n}\n"],"mappings":"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"}

package/dist/components/ai/AIPlaygroundTab.js CHANGED Viewed

@@ -206,7 +206,7 @@ function y({ agent: y }) {
 					className: "font-semibold text-text-primary",
 					children: b("vibecontrols.ai.playground.response", "Response")
 				}), F !== null && /* @__PURE__ */ _("span", {
-					className: `px-2 py-0.5 text-xs rounded font-mono ${F >= 200 && F < 300 ? "bg-status-success-bg text-status-success-text" : F >= 400 ? "bg-status-error-bg text-status-error-text" : "bg-status-warning-bg text-status-warning-text"}`,
+					className: `px-2 py-0.5 text-xs rounded font-mono ${F >= 200 && F < 300 ? "bg-status-success-bg-subtle text-status-success-text" : F >= 400 ? "bg-status-error-bg-subtle text-status-error-text" : "bg-status-warning-bg-subtle text-status-warning-text"}`,
 					children: F
 				})]
 			}), N === null ? /* @__PURE__ */ _("div", {

package/dist/components/ai/AIPlaygroundTab.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AIPlaygroundTab.js","names":[],"sources":["../../../src/components/ai/AIPlaygroundTab.tsx"],"sourcesContent":["import { useState, useEffect, useCallback } from 'react';\nimport { Play, Copy, Check, Terminal } from 'lucide-react';\nimport { Card, LoadingState, ErrorState, EmptyState } from '@/components/shared';\nimport type { AIApiEndpoint, AgentRef } from '@/services/aiApi';\nimport { fetchApiDescriptor, agentApiPath } from '@/services/aiApi';\nimport { getStoredAuthToken, getStoredWorkspaceToken } from '@burdenoff/fe-libs/shared/graphql';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface AIPlaygroundTabProps {\n agent: AgentRef;\n}\n\nexport function AIPlaygroundTab({ agent }: AIPlaygroundTabProps) {\n const tr = useTr();\n const [endpoints, setEndpoints] = useState<AIApiEndpoint[]>([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState<string \| null>(null);\n const [selectedEndpoint, setSelectedEndpoint] = useState<AIApiEndpoint \| null>(null);\n const [params, setParams] = useState<Record<string, string>>({});\n const [executing, setExecuting] = useState(false);\n const [response, setResponse] = useState<string \| null>(null);\n const [responseStatus, setResponseStatus] = useState<number \| null>(null);\n const [copied, setCopied] = useState(false);\n\n const loadEndpoints = useCallback(async () => {\n setLoading(true);\n setError(null);\n try {\n const result = await fetchApiDescriptor(agent);\n setEndpoints(result);\n if (result.length > 0) {\n selectEndpoint(result[0]);\n }\n } catch (err) {\n setError(err instanceof Error ? err.message : 'Failed to load API descriptor');\n } finally {\n setLoading(false);\n }\n }, [agent]);\n\n useEffect(() => {\n loadEndpoints();\n }, [loadEndpoints]);\n\n const selectEndpoint = (ep: AIApiEndpoint) => {\n setSelectedEndpoint(ep);\n const newParams: Record<string, string> = {};\n ep.parameters?.forEach((p) => {\n newParams[p.name] = '';\n });\n setParams(newParams);\n setResponse(null);\n setResponseStatus(null);\n };\n\n const handleExecute = async () => {\n if (!selectedEndpoint) return;\n setExecuting(true);\n setResponse(null);\n setResponseStatus(null);\n try {\n // Build path with path params replaced\n let path = selectedEndpoint.path;\n const bodyParams: Record<string, string> = {};\n\n for (const [key, value] of Object.entries(params)) {\n if (path.includes(`:${key}`)) {\n path = path.replace(`:${key}`, encodeURIComponent(value));\n } else if (value) {\n bodyParams[key] = value;\n }\n }\n\n const method = selectedEndpoint.method.toUpperCase();\n const hasBody = method === 'POST' \|\| method === 'PATCH' \|\| method === 'PUT';\n\n const authToken = getStoredAuthToken();\n const workspaceToken = getStoredWorkspaceToken();\n const workspaceId = new URLSearchParams(window.location.search).get('workspace') \|\| '';\n const graphRes = await fetch('/workspaces/graphql', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n ...(authToken ? { Authorization: `Bearer ${authToken}` } : {}),\n ...(workspaceToken ? { 'X-Workspace-Authorization': `Bearer ${workspaceToken}` } : {}),\n ...(workspaceId ? { 'x-workspace-id': workspaceId } : {}),\n },\n body: JSON.stringify({\n query: `mutation AgentAiMutate($agentId: ID!, $path: String!, $method: String!, $body: JSON) {\n agentAiMutate(agentId: $agentId, path: $path, method: $method, body: $body) {\n ok\n status\n data\n text\n error\n }\n }`,\n variables: {\n agentId: agent.id,\n path: agentApiPath(agent.profile, path),\n method,\n body: hasBody && Object.keys(bodyParams).length > 0 ? bodyParams : null,\n },\n }),\n });\n\n const graphJson = await graphRes.json();\n const proxy = graphJson.data?.agentAiMutate;\n if (!proxy) throw new Error(graphJson.errors?.[0]?.message \|\| 'Request failed');\n\n setResponseStatus(proxy.status);\n setResponse(\n JSON.stringify(\n proxy.data ?? (proxy.text ? { text: proxy.text } : { error: proxy.error }),\n null,\n 2\n )\n );\n } catch (err) {\n setResponse(`Error: ${err instanceof Error ? err.message : 'Request failed'}`);\n setResponseStatus(0);\n } finally {\n setExecuting(false);\n }\n };\n\n const getCurlCommand = (): string => {\n if (!selectedEndpoint) return '';\n let path = selectedEndpoint.path;\n const bodyParams: Record<string, string> = {};\n\n for (const [key, value] of Object.entries(params)) {\n if (path.includes(`:${key}`)) {\n path = path.replace(`:${key}`, encodeURIComponent(value \|\| `{${key}}`));\n } else if (value) {\n bodyParams[key] = value;\n }\n }\n\n const method = selectedEndpoint.method.toUpperCase();\n const canonicalPath = agentApiPath(agent.profile, path);\n return `mutation AgentAiMutate {\n agentAiMutate(\n agentId: \"${agent.id}\"\n path: \"${canonicalPath}\"\n method: \"${method}\"\n body: ${Object.keys(bodyParams).length > 0 ? JSON.stringify(bodyParams) : 'null'}\n ) {\n ok\n status\n data\n error\n }\n}`;\n };\n\n const handleCopy = () => {\n navigator.clipboard.writeText(getCurlCommand());\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n };\n\n if (loading)\n return (\n <LoadingState\n message={tr('vibecontrols.ai.playground.loading', 'Loading API descriptor...')}\n />\n );\n if (error)\n return (\n <ErrorState\n title={tr('vibecontrols.ai.playground.loadFailed', 'Failed to load API')}\n message={error}\n onRetry={loadEndpoints}\n />\n );\n if (endpoints.length === 0) {\n return (\n <EmptyState\n icon={<Terminal className=\"size-8 text-text-secondary\" />}\n title={tr('vibecontrols.ai.playground.noEndpoints', 'No API endpoints')}\n description={tr(\n 'vibecontrols.ai.playground.noEndpointsDesc',\n 'The agent does not expose any AI API endpoints'\n )}\n />\n );\n }\n\n return (\n <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n {/* Left: Endpoint selection and params /}\n <div className=\"space-y-4\">\n <Card className=\"p-4\">\n <h3 className=\"font-semibold text-text-primary mb-3\">\n {tr('vibecontrols.ai.playground.endpoint', 'Endpoint')}\n </h3>\n <select\n value={selectedEndpoint?.id ?? ''}\n onChange={(e) => {\n const ep = endpoints.find((ep) => ep.id === e.target.value);\n if (ep) selectEndpoint(ep);\n }}\n className=\"w-full px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-primary text-sm\"\n >\n {endpoints.map((ep) => (\n <option key={ep.id} value={ep.id}>\n {ep.method.toUpperCase()} {ep.path} - {ep.description}\n </option>\n ))}\n </select>\n\n {selectedEndpoint?.description && (\n <p className=\"mt-2 text-xs text-text-secondary\">{selectedEndpoint.description}</p>\n )}\n </Card>\n\n {/ Parameters /}\n {selectedEndpoint?.parameters && selectedEndpoint.parameters.length > 0 && (\n <Card className=\"p-4\">\n <h3 className=\"font-semibold text-text-primary mb-3\">\n {tr('vibecontrols.ai.playground.parameters', 'Parameters')}\n </h3>\n <div className=\"space-y-3\">\n {selectedEndpoint.parameters.map((p) => (\n <div key={p.name}>\n <label className=\"flex items-center gap-1.5 text-sm font-medium text-text-primary mb-1\">\n {p.name}\n {p.required && <span className=\"text-status-error-text text-xs\"></span>}\n <span className=\"text-xs text-text-muted font-normal\">({p.type})</span>\n </label>\n {p.description && (\n <p className=\"text-xs text-text-secondary mb-1\">{p.description}</p>\n )}\n <input\n aria-label=\"control\"\n type=\"text\"\n value={params[p.name] ?? ''}\n onChange={(e) => setParams((prev) => ({ ...prev, [p.name]: e.target.value }))}\n className=\"w-full px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-primary text-sm font-mono focus:outline-none focus:border-border-strong\"\n placeholder={p.required ? 'Required' : 'Optional'}\n />\n </div>\n ))}\n </div>\n </Card>\n )}\n\n <button\n type=\"button\"\n onClick={handleExecute}\n disabled={executing}\n className=\"w-full flex items-center justify-center gap-2 px-4 py-2.5 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50 text-sm font-medium\"\n >\n <Play className=\"size-4\" />\n {executing\n ? tr('vibecontrols.ai.playground.executing', 'Executing...')\n : tr('vibecontrols.ai.playground.execute', 'Execute')}\n </button>\n\n {/* Curl Command /}\n <Card className=\"p-4\">\n <div className=\"mb-2 flex flex-wrap items-center justify-between gap-2\">\n <h3 className=\"text-xs font-semibold text-text-secondary uppercase tracking-wide\">\n cURL\n </h3>\n <button\n type=\"button\"\n onClick={handleCopy}\n className=\"flex items-center gap-1 px-2 py-1 text-xs text-text-secondary hover:bg-bg-sunken rounded transition-colors\"\n >\n {copied ? (\n <>\n <Check className=\"size-3 text-status-success-text\" /> Copied\n </>\n ) : (\n <>\n <Copy className=\"size-3\" /> Copy\n </>\n )}\n </button>\n </div>\n <pre className=\"text-xs text-text-primary bg-bg-sunken rounded p-3 overflow-x-auto whitespace-pre-wrap font-mono\">\n {getCurlCommand()}\n </pre>\n </Card>\n </div>\n\n {/ Right: Response */}\n <div>\n <Card className=\"p-4 h-full\">\n <div className=\"mb-3 flex flex-wrap items-center justify-between gap-2\">\n <h3 className=\"font-semibold text-text-primary\">\n {tr('vibecontrols.ai.playground.response', 'Response')}\n </h3>\n {responseStatus !== null && (\n <span\n className={`px-2 py-0.5 text-xs rounded font-mono ${\n responseStatus >= 200 && responseStatus < 300\n ? 'bg-status-success-bg text-status-success-text'\n : responseStatus >= 400\n ? 'bg-status-error-bg text-status-error-text'\n : 'bg-status-warning-bg text-status-warning-text'\n }`}\n >\n {responseStatus}\n </span>\n )}\n </div>\n {response === null ? (\n <div className=\"flex items-center justify-center h-48 text-sm text-text-secondary\">\n {tr(\n 'vibecontrols.ai.playground.executeToSee',\n 'Execute a request to see the response'\n )}\n </div>\n ) : (\n <pre className=\"text-xs text-text-primary bg-bg-sunken rounded p-3 overflow-auto max-h-[60vh] whitespace-pre-wrap font-mono\">\n {response}\n </pre>\n )}\n </Card>\n </div>\n </div>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"AIPlaygroundTab.js","names":[],"sources":["../../../src/components/ai/AIPlaygroundTab.tsx"],"sourcesContent":["import { useState, useEffect, useCallback } from 'react';\nimport { Play, Copy, Check, Terminal } from 'lucide-react';\nimport { Card, LoadingState, ErrorState, EmptyState } from '@/components/shared';\nimport type { AIApiEndpoint, AgentRef } from '@/services/aiApi';\nimport { fetchApiDescriptor, agentApiPath } from '@/services/aiApi';\nimport { getStoredAuthToken, getStoredWorkspaceToken } from '@burdenoff/fe-libs/shared/graphql';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface AIPlaygroundTabProps {\n agent: AgentRef;\n}\n\nexport function AIPlaygroundTab({ agent }: AIPlaygroundTabProps) {\n const tr = useTr();\n const [endpoints, setEndpoints] = useState<AIApiEndpoint[]>([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState<string \| null>(null);\n const [selectedEndpoint, setSelectedEndpoint] = useState<AIApiEndpoint \| null>(null);\n const [params, setParams] = useState<Record<string, string>>({});\n const [executing, setExecuting] = useState(false);\n const [response, setResponse] = useState<string \| null>(null);\n const [responseStatus, setResponseStatus] = useState<number \| null>(null);\n const [copied, setCopied] = useState(false);\n\n const loadEndpoints = useCallback(async () => {\n setLoading(true);\n setError(null);\n try {\n const result = await fetchApiDescriptor(agent);\n setEndpoints(result);\n if (result.length > 0) {\n selectEndpoint(result[0]);\n }\n } catch (err) {\n setError(err instanceof Error ? err.message : 'Failed to load API descriptor');\n } finally {\n setLoading(false);\n }\n }, [agent]);\n\n useEffect(() => {\n loadEndpoints();\n }, [loadEndpoints]);\n\n const selectEndpoint = (ep: AIApiEndpoint) => {\n setSelectedEndpoint(ep);\n const newParams: Record<string, string> = {};\n ep.parameters?.forEach((p) => {\n newParams[p.name] = '';\n });\n setParams(newParams);\n setResponse(null);\n setResponseStatus(null);\n };\n\n const handleExecute = async () => {\n if (!selectedEndpoint) return;\n setExecuting(true);\n setResponse(null);\n setResponseStatus(null);\n try {\n // Build path with path params replaced\n let path = selectedEndpoint.path;\n const bodyParams: Record<string, string> = {};\n\n for (const [key, value] of Object.entries(params)) {\n if (path.includes(`:${key}`)) {\n path = path.replace(`:${key}`, encodeURIComponent(value));\n } else if (value) {\n bodyParams[key] = value;\n }\n }\n\n const method = selectedEndpoint.method.toUpperCase();\n const hasBody = method === 'POST' \|\| method === 'PATCH' \|\| method === 'PUT';\n\n const authToken = getStoredAuthToken();\n const workspaceToken = getStoredWorkspaceToken();\n const workspaceId = new URLSearchParams(window.location.search).get('workspace') \|\| '';\n const graphRes = await fetch('/workspaces/graphql', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n ...(authToken ? { Authorization: `Bearer ${authToken}` } : {}),\n ...(workspaceToken ? { 'X-Workspace-Authorization': `Bearer ${workspaceToken}` } : {}),\n ...(workspaceId ? { 'x-workspace-id': workspaceId } : {}),\n },\n body: JSON.stringify({\n query: `mutation AgentAiMutate($agentId: ID!, $path: String!, $method: String!, $body: JSON) {\n agentAiMutate(agentId: $agentId, path: $path, method: $method, body: $body) {\n ok\n status\n data\n text\n error\n }\n }`,\n variables: {\n agentId: agent.id,\n path: agentApiPath(agent.profile, path),\n method,\n body: hasBody && Object.keys(bodyParams).length > 0 ? bodyParams : null,\n },\n }),\n });\n\n const graphJson = await graphRes.json();\n const proxy = graphJson.data?.agentAiMutate;\n if (!proxy) throw new Error(graphJson.errors?.[0]?.message \|\| 'Request failed');\n\n setResponseStatus(proxy.status);\n setResponse(\n JSON.stringify(\n proxy.data ?? (proxy.text ? { text: proxy.text } : { error: proxy.error }),\n null,\n 2\n )\n );\n } catch (err) {\n setResponse(`Error: ${err instanceof Error ? err.message : 'Request failed'}`);\n setResponseStatus(0);\n } finally {\n setExecuting(false);\n }\n };\n\n const getCurlCommand = (): string => {\n if (!selectedEndpoint) return '';\n let path = selectedEndpoint.path;\n const bodyParams: Record<string, string> = {};\n\n for (const [key, value] of Object.entries(params)) {\n if (path.includes(`:${key}`)) {\n path = path.replace(`:${key}`, encodeURIComponent(value \|\| `{${key}}`));\n } else if (value) {\n bodyParams[key] = value;\n }\n }\n\n const method = selectedEndpoint.method.toUpperCase();\n const canonicalPath = agentApiPath(agent.profile, path);\n return `mutation AgentAiMutate {\n agentAiMutate(\n agentId: \"${agent.id}\"\n path: \"${canonicalPath}\"\n method: \"${method}\"\n body: ${Object.keys(bodyParams).length > 0 ? JSON.stringify(bodyParams) : 'null'}\n ) {\n ok\n status\n data\n error\n }\n}`;\n };\n\n const handleCopy = () => {\n navigator.clipboard.writeText(getCurlCommand());\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n };\n\n if (loading)\n return (\n <LoadingState\n message={tr('vibecontrols.ai.playground.loading', 'Loading API descriptor...')}\n />\n );\n if (error)\n return (\n <ErrorState\n title={tr('vibecontrols.ai.playground.loadFailed', 'Failed to load API')}\n message={error}\n onRetry={loadEndpoints}\n />\n );\n if (endpoints.length === 0) {\n return (\n <EmptyState\n icon={<Terminal className=\"size-8 text-text-secondary\" />}\n title={tr('vibecontrols.ai.playground.noEndpoints', 'No API endpoints')}\n description={tr(\n 'vibecontrols.ai.playground.noEndpointsDesc',\n 'The agent does not expose any AI API endpoints'\n )}\n />\n );\n }\n\n return (\n <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n {/* Left: Endpoint selection and params /}\n <div className=\"space-y-4\">\n <Card className=\"p-4\">\n <h3 className=\"font-semibold text-text-primary mb-3\">\n {tr('vibecontrols.ai.playground.endpoint', 'Endpoint')}\n </h3>\n <select\n value={selectedEndpoint?.id ?? ''}\n onChange={(e) => {\n const ep = endpoints.find((ep) => ep.id === e.target.value);\n if (ep) selectEndpoint(ep);\n }}\n className=\"w-full px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-primary text-sm\"\n >\n {endpoints.map((ep) => (\n <option key={ep.id} value={ep.id}>\n {ep.method.toUpperCase()} {ep.path} - {ep.description}\n </option>\n ))}\n </select>\n\n {selectedEndpoint?.description && (\n <p className=\"mt-2 text-xs text-text-secondary\">{selectedEndpoint.description}</p>\n )}\n </Card>\n\n {/ Parameters /}\n {selectedEndpoint?.parameters && selectedEndpoint.parameters.length > 0 && (\n <Card className=\"p-4\">\n <h3 className=\"font-semibold text-text-primary mb-3\">\n {tr('vibecontrols.ai.playground.parameters', 'Parameters')}\n </h3>\n <div className=\"space-y-3\">\n {selectedEndpoint.parameters.map((p) => (\n <div key={p.name}>\n <label className=\"flex items-center gap-1.5 text-sm font-medium text-text-primary mb-1\">\n {p.name}\n {p.required && <span className=\"text-status-error-text text-xs\"></span>}\n <span className=\"text-xs text-text-muted font-normal\">({p.type})</span>\n </label>\n {p.description && (\n <p className=\"text-xs text-text-secondary mb-1\">{p.description}</p>\n )}\n <input\n aria-label=\"control\"\n type=\"text\"\n value={params[p.name] ?? ''}\n onChange={(e) => setParams((prev) => ({ ...prev, [p.name]: e.target.value }))}\n className=\"w-full px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-primary text-sm font-mono focus:outline-none focus:border-border-strong\"\n placeholder={p.required ? 'Required' : 'Optional'}\n />\n </div>\n ))}\n </div>\n </Card>\n )}\n\n <button\n type=\"button\"\n onClick={handleExecute}\n disabled={executing}\n className=\"w-full flex items-center justify-center gap-2 px-4 py-2.5 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50 text-sm font-medium\"\n >\n <Play className=\"size-4\" />\n {executing\n ? tr('vibecontrols.ai.playground.executing', 'Executing...')\n : tr('vibecontrols.ai.playground.execute', 'Execute')}\n </button>\n\n {/* Curl Command /}\n <Card className=\"p-4\">\n <div className=\"mb-2 flex flex-wrap items-center justify-between gap-2\">\n <h3 className=\"text-xs font-semibold text-text-secondary uppercase tracking-wide\">\n cURL\n </h3>\n <button\n type=\"button\"\n onClick={handleCopy}\n className=\"flex items-center gap-1 px-2 py-1 text-xs text-text-secondary hover:bg-bg-sunken rounded transition-colors\"\n >\n {copied ? (\n <>\n <Check className=\"size-3 text-status-success-text\" /> Copied\n </>\n ) : (\n <>\n <Copy className=\"size-3\" /> Copy\n </>\n )}\n </button>\n </div>\n <pre className=\"text-xs text-text-primary bg-bg-sunken rounded p-3 overflow-x-auto whitespace-pre-wrap font-mono\">\n {getCurlCommand()}\n </pre>\n </Card>\n </div>\n\n {/ Right: Response */}\n <div>\n <Card className=\"p-4 h-full\">\n <div className=\"mb-3 flex flex-wrap items-center justify-between gap-2\">\n <h3 className=\"font-semibold text-text-primary\">\n {tr('vibecontrols.ai.playground.response', 'Response')}\n </h3>\n {responseStatus !== null && (\n <span\n className={`px-2 py-0.5 text-xs rounded font-mono ${\n responseStatus >= 200 && responseStatus < 300\n ? 'bg-status-success-bg-subtle text-status-success-text'\n : responseStatus >= 400\n ? 'bg-status-error-bg-subtle text-status-error-text'\n : 'bg-status-warning-bg-subtle text-status-warning-text'\n }`}\n >\n {responseStatus}\n </span>\n )}\n </div>\n {response === null ? (\n <div className=\"flex items-center justify-center h-48 text-sm text-text-secondary\">\n {tr(\n 'vibecontrols.ai.playground.executeToSee',\n 'Execute a request to see the response'\n )}\n </div>\n ) : (\n <pre className=\"text-xs text-text-primary bg-bg-sunken rounded p-3 overflow-auto max-h-[60vh] whitespace-pre-wrap font-mono\">\n {response}\n </pre>\n )}\n </Card>\n </div>\n </div>\n );\n}\n"],"mappings":"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"}

package/dist/components/ai/AIPromptsTab.js CHANGED Viewed

@@ -59,7 +59,7 @@ function y({ agent: y }) {
 		className: "space-y-6",
 		children: [
 			k && /* @__PURE__ */ _("div", {
-				className: "bg-status-success-bg text-status-success-text px-4 py-2 rounded-md text-sm",
+				className: "bg-status-success-bg-subtle text-status-success-text px-4 py-2 rounded-md text-sm",
 				children: k
 			}),
 			/* @__PURE__ */ v("div", {
@@ -77,7 +77,7 @@ function y({ agent: y }) {
 								}), /* @__PURE__ */ v("button", {
 									type: "button",
 									onClick: () => M(!j),
-									className: "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-action-primary-bg bg-action-primary-bg/10 rounded-md hover:bg-action-primary-bg/20 transition-colors",
+									className: "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-text-primary bg-[var(--color-accent-soft)] rounded-md hover:bg-[var(--color-accent-soft)] transition-colors",
 									children: [/* @__PURE__ */ _(g, { className: "size-3.5" }), b("vibecontrols.ai.prompts.generateFromTemplate", "Generate from Template")]
 								})]
 							}),

package/dist/components/ai/AIPromptsTab.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AIPromptsTab.js","names":[],"sources":["../../../src/components/ai/AIPromptsTab.tsx"],"sourcesContent":["import { useState, useEffect, useCallback } from 'react';\nimport { Send, FileText, Wand2, Clock } from 'lucide-react';\nimport { Card, LoadingState, ErrorState, EmptyState } from '@/components/shared';\nimport type { AITemplate, AIContext, AISession, AIDispatch, AgentRef } from '@/services/aiApi';\nimport {\n fetchTemplates,\n fetchContexts,\n fetchSessions,\n fetchDispatchHistory,\n renderTemplate,\n recordTemplateUsage,\n sendDispatch,\n} from '@/services/aiApi';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface AIPromptsTabProps {\n agent: AgentRef;\n}\n\nexport function AIPromptsTab({ agent }: AIPromptsTabProps) {\n const tr = useTr();\n const [promptContent, setPromptContent] = useState('');\n const [selectedContextIds, setSelectedContextIds] = useState<string[]>([]);\n const [targetSessionId, setTargetSessionId] = useState('');\n const [sending, setSending] = useState(false);\n const [successMsg, setSuccessMsg] = useState<string \| null>(null);\n\n // Generate from template state\n const [showTemplateGen, setShowTemplateGen] = useState(false);\n const [selectedTemplateId, setSelectedTemplateId] = useState('');\n const [sourceTemplateId, setSourceTemplateId] = useState<string \| null>(null);\n const [templateVars, setTemplateVars] = useState<Record<string, string>>({});\n const [rendering, setRendering] = useState(false);\n\n // Data\n const [templates, setTemplates] = useState<AITemplate[]>([]);\n const [contexts, setContexts] = useState<AIContext[]>([]);\n const [sessions, setSessions] = useState<AISession[]>([]);\n const [history, setHistory] = useState<AIDispatch[]>([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState<string \| null>(null);\n\n const loadData = useCallback(async () => {\n setLoading(true);\n setError(null);\n try {\n const [t, c, s, h] = await Promise.all([\n fetchTemplates(agent.id),\n fetchContexts(agent),\n fetchSessions(agent),\n fetchDispatchHistory(agent, { limit: 20 }),\n ]);\n setTemplates(t);\n setContexts(c);\n setSessions(s);\n setHistory(h);\n } catch (err) {\n setError(err instanceof Error ? err.message : 'Failed to load data');\n } finally {\n setLoading(false);\n }\n }, [agent]);\n\n useEffect(() => {\n loadData();\n }, [loadData]);\n\n const handleTemplateSelect = (templateId: string) => {\n setSelectedTemplateId(templateId);\n const template = templates.find((t) => t.id === templateId);\n if (template?.variables) {\n const vars: Record<string, string> = {};\n for (const key of Object.keys(template.variables)) {\n vars[key] = String(template.variables[key] ?? '');\n }\n setTemplateVars(vars);\n } else {\n setTemplateVars({});\n }\n };\n\n const handleGenerateFromTemplate = async () => {\n if (!selectedTemplateId) return;\n setRendering(true);\n try {\n const result = await renderTemplate(agent.id, selectedTemplateId, templateVars);\n setPromptContent(result.rendered);\n setSourceTemplateId(selectedTemplateId);\n setShowTemplateGen(false);\n } catch (err) {\n console.error('Failed to render template:', err);\n } finally {\n setRendering(false);\n }\n };\n\n const toggleContext = (contextId: string) => {\n setSelectedContextIds((prev) =>\n prev.includes(contextId) ? prev.filter((id) => id !== contextId) : [...prev, contextId]\n );\n };\n\n const handleSendToSession = async () => {\n if (!promptContent.trim() \|\| !targetSessionId) return;\n setSending(true);\n setSuccessMsg(null);\n try {\n await sendDispatch(agent, {\n prompt: promptContent,\n sessionId: targetSessionId,\n contextIds: selectedContextIds.length > 0 ? selectedContextIds : undefined,\n });\n if (sourceTemplateId) {\n await recordTemplateUsage(agent.id, sourceTemplateId);\n }\n setSuccessMsg('Prompt dispatched successfully');\n setPromptContent('');\n setSourceTemplateId(null);\n setSelectedContextIds([]);\n setTimeout(() => setSuccessMsg(null), 3000);\n // Refresh history\n const h = await fetchDispatchHistory(agent, { limit: 20 });\n setHistory(h);\n } catch (err) {\n console.error('Failed to dispatch prompt:', err);\n } finally {\n setSending(false);\n }\n };\n\n if (loading)\n return <LoadingState message={tr('vibecontrols.ai.prompts.loading', 'Loading prompts...')} />;\n if (error)\n return (\n <ErrorState\n title={tr('vibecontrols.ai.prompts.loadFailed', 'Failed to load data')}\n message={error}\n onRetry={loadData}\n />\n );\n\n return (\n <div className=\"space-y-6\">\n {successMsg && (\n <div className=\"bg-status-success-bg text-status-success-text px-4 py-2 rounded-md text-sm\">\n {successMsg}\n </div>\n )}\n\n <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n {/* Prompt Editor /}\n <div className=\"lg:col-span-2 space-y-4\">\n <Card className=\"p-4\">\n <div className=\"flex items-center justify-between mb-3\">\n <h3 className=\"font-semibold text-text-primary\">\n {tr('vibecontrols.ai.prompts.composePrompt', 'Compose Prompt')}\n </h3>\n <button\n type=\"button\"\n onClick={() => setShowTemplateGen(!showTemplateGen)}\n className=\"flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-action-primary-bg bg-action-primary-bg/10 rounded-md hover:bg-action-primary-bg/20 transition-colors\"\n >\n <Wand2 className=\"size-3.5\" />\n {tr('vibecontrols.ai.prompts.generateFromTemplate', 'Generate from Template')}\n </button>\n </div>\n\n {/ Template Generator /}\n {showTemplateGen && (\n <div className=\"mb-4 p-3 bg-bg-sunken rounded-md space-y-3\">\n <select\n value={selectedTemplateId}\n onChange={(e) => handleTemplateSelect(e.target.value)}\n className=\"w-full px-3 py-2 bg-bg-surface border border-border-default rounded-md text-text-primary text-sm\"\n >\n <option value=\"\">\n {tr('vibecontrols.ai.prompts.selectTemplate', 'Select a template...')}\n </option>\n {templates.map((t) => (\n <option key={t.id} value={t.id}>\n {t.name}\n </option>\n ))}\n </select>\n {Object.keys(templateVars).length > 0 && (\n <div className=\"space-y-2\">\n {Object.entries(templateVars).map(([key, val]) => (\n <div key={key}>\n <label className=\"block text-xs font-medium text-text-secondary mb-0.5\">\n {key}\n </label>\n <input\n aria-label=\"control\"\n type=\"text\"\n value={val}\n onChange={(e) =>\n setTemplateVars((prev) => ({ ...prev, [key]: e.target.value }))\n }\n className=\"w-full px-2 py-1.5 bg-bg-surface border border-border-default rounded text-sm text-text-primary focus:outline-none focus:border-border-strong\"\n />\n </div>\n ))}\n </div>\n )}\n <button\n type=\"button\"\n onClick={handleGenerateFromTemplate}\n disabled={rendering \|\| !selectedTemplateId}\n className=\"w-full px-3 py-2 text-sm bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50\"\n >\n {rendering\n ? tr('vibecontrols.ai.prompts.generating', 'Generating...')\n : tr('vibecontrols.ai.prompts.generate', 'Generate')}\n </button>\n </div>\n )}\n\n <textarea\n aria-label=\"control\"\n value={promptContent}\n onChange={(e) => {\n setPromptContent(e.target.value);\n setSourceTemplateId(null);\n }}\n rows={8}\n className=\"w-full px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-primary text-sm font-mono focus:outline-none focus:border-border-strong\"\n placeholder={tr(\n 'vibecontrols.ai.prompts.promptPlaceholder',\n 'Write your prompt here... (Markdown supported)'\n )}\n />\n\n {/ Session Target & Send /}\n <div className=\"flex flex-col sm:flex-row items-stretch sm:items-end gap-3 mt-3\">\n <div className=\"flex-1\">\n <label className=\"block text-xs font-medium text-text-secondary mb-1\">\n {tr('vibecontrols.ai.prompts.targetSession', 'Target Session')}\n </label>\n <select\n value={targetSessionId}\n onChange={(e) => setTargetSessionId(e.target.value)}\n className=\"w-full px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-primary text-sm\"\n >\n <option value=\"\">\n {tr('vibecontrols.ai.prompts.selectSession', 'Select session...')}\n </option>\n {sessions\n .filter((s) => s.status !== 'terminated')\n .map((s) => (\n <option key={s.id} value={s.id}>\n {s.name} ({s.status})\n </option>\n ))}\n </select>\n </div>\n <button\n type=\"button\"\n onClick={handleSendToSession}\n disabled={sending \|\| !promptContent.trim() \|\| !targetSessionId}\n className=\"flex items-center justify-center gap-2 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50 text-sm\"\n >\n <Send className=\"size-4\" />\n {sending\n ? tr('vibecontrols.ai.prompts.sending', 'Sending...')\n : tr('vibecontrols.ai.prompts.sendToSession', 'Send to Session')}\n </button>\n </div>\n </Card>\n </div>\n\n {/ Context Picker /}\n <div className=\"space-y-4\">\n <Card className=\"p-4\">\n <h3 className=\"font-semibold text-text-primary mb-3\">\n {tr('vibecontrols.ai.prompts.attachContexts', 'Attach Contexts')}\n </h3>\n {contexts.length === 0 ? (\n <p className=\"text-sm text-text-secondary\">\n {tr('vibecontrols.ai.prompts.noContexts', 'No contexts available')}\n </p>\n ) : (\n <div className=\"space-y-2 max-h-64 overflow-y-auto\">\n {contexts.map((ctx) => (\n <label\n key={ctx.id}\n className=\"flex items-start gap-2 p-2 rounded hover:bg-bg-sunken cursor-pointer\"\n >\n <input\n aria-label=\"control\"\n type=\"checkbox\"\n checked={selectedContextIds.includes(ctx.id)}\n onChange={() => toggleContext(ctx.id)}\n className=\"mt-0.5 rounded border-border-default\"\n />\n <div className=\"min-w-0 flex-1\">\n <div className=\"text-sm font-medium text-text-primary truncate\">\n {ctx.name}\n </div>\n <div className=\"text-xs text-text-secondary\">{ctx.type}</div>\n </div>\n </label>\n ))}\n </div>\n )}\n </Card>\n </div>\n </div>\n\n {/ Dispatch History */}\n <Card className=\"p-0\">\n <div className=\"px-4 py-3 border-b border-border-default flex items-center gap-2\">\n <Clock className=\"size-4 text-text-secondary\" />\n <h3 className=\"font-semibold text-text-primary\">\n {tr('vibecontrols.ai.prompts.dispatchHistory', 'Dispatch History')}\n </h3>\n </div>\n <div className=\"divide-y divide-border-default\">\n {history.length === 0 ? (\n <EmptyState\n icon={<FileText className=\"size-6 text-text-secondary\" />}\n title={tr('vibecontrols.ai.prompts.noDispatched', 'No dispatched prompts')}\n description={tr(\n 'vibecontrols.ai.prompts.noDispatchedDesc',\n 'Send a prompt to a session to see history here'\n )}\n />\n ) : (\n history.map((d) => (\n <div key={d.id} className=\"px-4 py-3\">\n <div className=\"text-sm text-text-primary line-clamp-2\">{d.prompt}</div>\n <div className=\"mt-1 flex items-center gap-3 text-xs text-text-secondary\">\n <span className=\"font-medium\">{d.status}</span>\n <span>Session: {d.sessionId ? `${d.sessionId.substring(0, 8)}...` : '—'}</span>\n {d.createdAt && <span>{new Date(d.createdAt).toLocaleString()}</span>}\n </div>\n </div>\n ))\n )}\n </div>\n </Card>\n </div>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"AIPromptsTab.js","names":[],"sources":["../../../src/components/ai/AIPromptsTab.tsx"],"sourcesContent":["import { useState, useEffect, useCallback } from 'react';\nimport { Send, FileText, Wand2, Clock } from 'lucide-react';\nimport { Card, LoadingState, ErrorState, EmptyState } from '@/components/shared';\nimport type { AITemplate, AIContext, AISession, AIDispatch, AgentRef } from '@/services/aiApi';\nimport {\n fetchTemplates,\n fetchContexts,\n fetchSessions,\n fetchDispatchHistory,\n renderTemplate,\n recordTemplateUsage,\n sendDispatch,\n} from '@/services/aiApi';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface AIPromptsTabProps {\n agent: AgentRef;\n}\n\nexport function AIPromptsTab({ agent }: AIPromptsTabProps) {\n const tr = useTr();\n const [promptContent, setPromptContent] = useState('');\n const [selectedContextIds, setSelectedContextIds] = useState<string[]>([]);\n const [targetSessionId, setTargetSessionId] = useState('');\n const [sending, setSending] = useState(false);\n const [successMsg, setSuccessMsg] = useState<string \| null>(null);\n\n // Generate from template state\n const [showTemplateGen, setShowTemplateGen] = useState(false);\n const [selectedTemplateId, setSelectedTemplateId] = useState('');\n const [sourceTemplateId, setSourceTemplateId] = useState<string \| null>(null);\n const [templateVars, setTemplateVars] = useState<Record<string, string>>({});\n const [rendering, setRendering] = useState(false);\n\n // Data\n const [templates, setTemplates] = useState<AITemplate[]>([]);\n const [contexts, setContexts] = useState<AIContext[]>([]);\n const [sessions, setSessions] = useState<AISession[]>([]);\n const [history, setHistory] = useState<AIDispatch[]>([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState<string \| null>(null);\n\n const loadData = useCallback(async () => {\n setLoading(true);\n setError(null);\n try {\n const [t, c, s, h] = await Promise.all([\n fetchTemplates(agent.id),\n fetchContexts(agent),\n fetchSessions(agent),\n fetchDispatchHistory(agent, { limit: 20 }),\n ]);\n setTemplates(t);\n setContexts(c);\n setSessions(s);\n setHistory(h);\n } catch (err) {\n setError(err instanceof Error ? err.message : 'Failed to load data');\n } finally {\n setLoading(false);\n }\n }, [agent]);\n\n useEffect(() => {\n loadData();\n }, [loadData]);\n\n const handleTemplateSelect = (templateId: string) => {\n setSelectedTemplateId(templateId);\n const template = templates.find((t) => t.id === templateId);\n if (template?.variables) {\n const vars: Record<string, string> = {};\n for (const key of Object.keys(template.variables)) {\n vars[key] = String(template.variables[key] ?? '');\n }\n setTemplateVars(vars);\n } else {\n setTemplateVars({});\n }\n };\n\n const handleGenerateFromTemplate = async () => {\n if (!selectedTemplateId) return;\n setRendering(true);\n try {\n const result = await renderTemplate(agent.id, selectedTemplateId, templateVars);\n setPromptContent(result.rendered);\n setSourceTemplateId(selectedTemplateId);\n setShowTemplateGen(false);\n } catch (err) {\n console.error('Failed to render template:', err);\n } finally {\n setRendering(false);\n }\n };\n\n const toggleContext = (contextId: string) => {\n setSelectedContextIds((prev) =>\n prev.includes(contextId) ? prev.filter((id) => id !== contextId) : [...prev, contextId]\n );\n };\n\n const handleSendToSession = async () => {\n if (!promptContent.trim() \|\| !targetSessionId) return;\n setSending(true);\n setSuccessMsg(null);\n try {\n await sendDispatch(agent, {\n prompt: promptContent,\n sessionId: targetSessionId,\n contextIds: selectedContextIds.length > 0 ? selectedContextIds : undefined,\n });\n if (sourceTemplateId) {\n await recordTemplateUsage(agent.id, sourceTemplateId);\n }\n setSuccessMsg('Prompt dispatched successfully');\n setPromptContent('');\n setSourceTemplateId(null);\n setSelectedContextIds([]);\n setTimeout(() => setSuccessMsg(null), 3000);\n // Refresh history\n const h = await fetchDispatchHistory(agent, { limit: 20 });\n setHistory(h);\n } catch (err) {\n console.error('Failed to dispatch prompt:', err);\n } finally {\n setSending(false);\n }\n };\n\n if (loading)\n return <LoadingState message={tr('vibecontrols.ai.prompts.loading', 'Loading prompts...')} />;\n if (error)\n return (\n <ErrorState\n title={tr('vibecontrols.ai.prompts.loadFailed', 'Failed to load data')}\n message={error}\n onRetry={loadData}\n />\n );\n\n return (\n <div className=\"space-y-6\">\n {successMsg && (\n <div className=\"bg-status-success-bg-subtle text-status-success-text px-4 py-2 rounded-md text-sm\">\n {successMsg}\n </div>\n )}\n\n <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n {/* Prompt Editor /}\n <div className=\"lg:col-span-2 space-y-4\">\n <Card className=\"p-4\">\n <div className=\"flex items-center justify-between mb-3\">\n <h3 className=\"font-semibold text-text-primary\">\n {tr('vibecontrols.ai.prompts.composePrompt', 'Compose Prompt')}\n </h3>\n <button\n type=\"button\"\n onClick={() => setShowTemplateGen(!showTemplateGen)}\n className=\"flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-text-primary bg-[var(--color-accent-soft)] rounded-md hover:bg-[var(--color-accent-soft)] transition-colors\"\n >\n <Wand2 className=\"size-3.5\" />\n {tr('vibecontrols.ai.prompts.generateFromTemplate', 'Generate from Template')}\n </button>\n </div>\n\n {/ Template Generator /}\n {showTemplateGen && (\n <div className=\"mb-4 p-3 bg-bg-sunken rounded-md space-y-3\">\n <select\n value={selectedTemplateId}\n onChange={(e) => handleTemplateSelect(e.target.value)}\n className=\"w-full px-3 py-2 bg-bg-surface border border-border-default rounded-md text-text-primary text-sm\"\n >\n <option value=\"\">\n {tr('vibecontrols.ai.prompts.selectTemplate', 'Select a template...')}\n </option>\n {templates.map((t) => (\n <option key={t.id} value={t.id}>\n {t.name}\n </option>\n ))}\n </select>\n {Object.keys(templateVars).length > 0 && (\n <div className=\"space-y-2\">\n {Object.entries(templateVars).map(([key, val]) => (\n <div key={key}>\n <label className=\"block text-xs font-medium text-text-secondary mb-0.5\">\n {key}\n </label>\n <input\n aria-label=\"control\"\n type=\"text\"\n value={val}\n onChange={(e) =>\n setTemplateVars((prev) => ({ ...prev, [key]: e.target.value }))\n }\n className=\"w-full px-2 py-1.5 bg-bg-surface border border-border-default rounded text-sm text-text-primary focus:outline-none focus:border-border-strong\"\n />\n </div>\n ))}\n </div>\n )}\n <button\n type=\"button\"\n onClick={handleGenerateFromTemplate}\n disabled={rendering \|\| !selectedTemplateId}\n className=\"w-full px-3 py-2 text-sm bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50\"\n >\n {rendering\n ? tr('vibecontrols.ai.prompts.generating', 'Generating...')\n : tr('vibecontrols.ai.prompts.generate', 'Generate')}\n </button>\n </div>\n )}\n\n <textarea\n aria-label=\"control\"\n value={promptContent}\n onChange={(e) => {\n setPromptContent(e.target.value);\n setSourceTemplateId(null);\n }}\n rows={8}\n className=\"w-full px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-primary text-sm font-mono focus:outline-none focus:border-border-strong\"\n placeholder={tr(\n 'vibecontrols.ai.prompts.promptPlaceholder',\n 'Write your prompt here... (Markdown supported)'\n )}\n />\n\n {/ Session Target & Send /}\n <div className=\"flex flex-col sm:flex-row items-stretch sm:items-end gap-3 mt-3\">\n <div className=\"flex-1\">\n <label className=\"block text-xs font-medium text-text-secondary mb-1\">\n {tr('vibecontrols.ai.prompts.targetSession', 'Target Session')}\n </label>\n <select\n value={targetSessionId}\n onChange={(e) => setTargetSessionId(e.target.value)}\n className=\"w-full px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-primary text-sm\"\n >\n <option value=\"\">\n {tr('vibecontrols.ai.prompts.selectSession', 'Select session...')}\n </option>\n {sessions\n .filter((s) => s.status !== 'terminated')\n .map((s) => (\n <option key={s.id} value={s.id}>\n {s.name} ({s.status})\n </option>\n ))}\n </select>\n </div>\n <button\n type=\"button\"\n onClick={handleSendToSession}\n disabled={sending \|\| !promptContent.trim() \|\| !targetSessionId}\n className=\"flex items-center justify-center gap-2 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50 text-sm\"\n >\n <Send className=\"size-4\" />\n {sending\n ? tr('vibecontrols.ai.prompts.sending', 'Sending...')\n : tr('vibecontrols.ai.prompts.sendToSession', 'Send to Session')}\n </button>\n </div>\n </Card>\n </div>\n\n {/ Context Picker /}\n <div className=\"space-y-4\">\n <Card className=\"p-4\">\n <h3 className=\"font-semibold text-text-primary mb-3\">\n {tr('vibecontrols.ai.prompts.attachContexts', 'Attach Contexts')}\n </h3>\n {contexts.length === 0 ? (\n <p className=\"text-sm text-text-secondary\">\n {tr('vibecontrols.ai.prompts.noContexts', 'No contexts available')}\n </p>\n ) : (\n <div className=\"space-y-2 max-h-64 overflow-y-auto\">\n {contexts.map((ctx) => (\n <label\n key={ctx.id}\n className=\"flex items-start gap-2 p-2 rounded hover:bg-bg-sunken cursor-pointer\"\n >\n <input\n aria-label=\"control\"\n type=\"checkbox\"\n checked={selectedContextIds.includes(ctx.id)}\n onChange={() => toggleContext(ctx.id)}\n className=\"mt-0.5 rounded border-border-default\"\n />\n <div className=\"min-w-0 flex-1\">\n <div className=\"text-sm font-medium text-text-primary truncate\">\n {ctx.name}\n </div>\n <div className=\"text-xs text-text-secondary\">{ctx.type}</div>\n </div>\n </label>\n ))}\n </div>\n )}\n </Card>\n </div>\n </div>\n\n {/ Dispatch History */}\n <Card className=\"p-0\">\n <div className=\"px-4 py-3 border-b border-border-default flex items-center gap-2\">\n <Clock className=\"size-4 text-text-secondary\" />\n <h3 className=\"font-semibold text-text-primary\">\n {tr('vibecontrols.ai.prompts.dispatchHistory', 'Dispatch History')}\n </h3>\n </div>\n <div className=\"divide-y divide-border-default\">\n {history.length === 0 ? (\n <EmptyState\n icon={<FileText className=\"size-6 text-text-secondary\" />}\n title={tr('vibecontrols.ai.prompts.noDispatched', 'No dispatched prompts')}\n description={tr(\n 'vibecontrols.ai.prompts.noDispatchedDesc',\n 'Send a prompt to a session to see history here'\n )}\n />\n ) : (\n history.map((d) => (\n <div key={d.id} className=\"px-4 py-3\">\n <div className=\"text-sm text-text-primary line-clamp-2\">{d.prompt}</div>\n <div className=\"mt-1 flex items-center gap-3 text-xs text-text-secondary\">\n <span className=\"font-medium\">{d.status}</span>\n <span>Session: {d.sessionId ? `${d.sessionId.substring(0, 8)}...` : '—'}</span>\n {d.createdAt && <span>{new Date(d.createdAt).toLocaleString()}</span>}\n </div>\n </div>\n ))\n )}\n </div>\n </Card>\n </div>\n );\n}\n"],"mappings":"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"}

package/dist/components/ai/AIProviderCredentialsCard.js CHANGED Viewed

@@ -137,15 +137,15 @@ function b({ agent: i, provider: c, onAuthSatisfiedChange: l }) {
 				]
 			}),
 			M ? /* @__PURE__ */ g("div", {
-				className: "rounded-lg border border-status-success-border bg-status-success-bg px-3 py-2 text-xs text-status-success-text",
+				className: "rounded-lg border border-status-success-border bg-status-success-bg-subtle px-3 py-2 text-xs text-status-success-text",
 				children: u("ai.providerCredentials.authSatisfied", `${c.label} is ready. The agent will use ${j.join(" / ")} on the next SDK session.`)
 			}) : null,
 			E ? /* @__PURE__ */ g("div", {
-				className: "rounded-lg border border-status-error-border bg-status-error-bg px-3 py-2 text-sm text-status-error-text",
+				className: "rounded-lg border border-status-error-border bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text",
 				children: E
 			}) : null,
 			O ? /* @__PURE__ */ g("div", {
-				className: "rounded-lg border border-status-success-border bg-status-success-bg px-3 py-2 text-sm text-status-success-text",
+				className: "rounded-lg border border-status-success-border bg-status-success-bg-subtle px-3 py-2 text-sm text-status-success-text",
 				children: O
 			}) : null,
 			S ? /* @__PURE__ */ _("div", {
@@ -181,7 +181,7 @@ function b({ agent: i, provider: c, onAuthSatisfiedChange: l }) {
 }
 function x({ label: e, secret: t, value: n, saved: r, placeholder: i, onChange: a, saving: o, visible: s, onToggleVisible: c, onSave: l, onClear: f }) {
 	return /* @__PURE__ */ _("div", {
-		className: "space-y-2 rounded-lg border border-border-default bg-bg-primary p-3",
+		className: "space-y-2 rounded-lg border border-border-default bg-bg-surface p-3",
 		children: [/* @__PURE__ */ g("label", {
 			className: "block text-xs font-medium text-text-secondary",
 			children: e

package/dist/components/ai/AIProviderCredentialsCard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AIProviderCredentialsCard.js","names":[],"sources":["../../../src/components/ai/AIProviderCredentialsCard.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport {\n ArrowLeft,\n ChevronRight,\n Eye,\n EyeOff,\n KeyRound,\n Loader2,\n Save,\n Trash2,\n} from 'lucide-react';\n\nimport { useTr } from '../../shared/hooks/useTr';\nimport {\n deleteAgentConfigValue,\n getAgentConfigValue,\n setAgentConfigValue,\n type AgentRef,\n} from '@/services/aiApi';\n\nimport { AI_PROVIDER_CREDENTIALS, type AIProviderCredentialDef } from './aiProviderCredentials';\n\ninterface AIProviderCredentialsCardProps {\n agent: AgentRef;\n /*\n Optional filter — when present, only render providers whose providerId\n * appears in the list. Lets a future caller scope the card to \"only the\n * providers I have plugins installed for\" without changing the catalog.\n /\n providerIds?: string[];\n /\n When provided, the staged picker preselects this provider so the\n * caller (e.g. the SDK-auth-missing modal) can drop the user straight\n * onto the right form without an extra click.\n /\n initialProviderId?: string;\n /\n Fires whenever the currently-selected provider's saved-state changes\n * on disk. `satisfied` is true when at least one primary (auth-conferring)\n * field has a saved non-empty value. Used by the SDK-auth-missing modal\n * to enable a Continue affordance the moment the user persists any\n * acceptable credential, without forcing them to also fill the others.\n /\n onProviderAuthSatisfiedChange?: (satisfied: boolean) => void;\n}\n\n/\n Staged credentials manager: shows a provider picker first, then on\n * select renders one card with that provider's config keys plus a back\n * button. Keeps the rendered DOM small (and the surrounding modal\n * viewport-friendly) regardless of how many providers are in the catalog.\n \n Replaces the older Claude-only ClaudeCredentialsCard.\n /\nexport function AIProviderCredentialsCard({\n agent,\n providerIds,\n initialProviderId,\n onProviderAuthSatisfiedChange,\n}: AIProviderCredentialsCardProps) {\n const tr = useTr();\n const providers = providerIds\n ? AI_PROVIDER_CREDENTIALS.filter((p) => providerIds.includes(p.providerId))\n : AI_PROVIDER_CREDENTIALS;\n\n // Preselect when the catalog narrows to exactly one provider so the\n // single-provider case (e.g. claude-only filter) skips the picker.\n const [selectedId, setSelectedId] = useState<string \| null>(() => {\n if (initialProviderId && providers.some((p) => p.providerId === initialProviderId)) {\n return initialProviderId;\n }\n return providers.length === 1 ? (providers[0]?.providerId ?? null) : null;\n });\n\n const selected = providers.find((p) => p.providerId === selectedId) ?? null;\n\n if (!selected) {\n return (\n <div className=\"space-y-3\">\n <div className=\"flex items-start gap-3\">\n <div className=\"rounded-lg bg-bg-sunken p-2 text-text-secondary\">\n <KeyRound className=\"size-4\" />\n </div>\n <div className=\"space-y-1\">\n <h3 className=\"text-sm font-semibold text-text-primary\">\n {tr('ai.providerCredentials.pickTitle', 'Choose a provider')}\n </h3>\n <p className=\"text-sm text-text-secondary\">\n {tr(\n 'ai.providerCredentials.pickDescription',\n 'Pick the provider whose credentials you want to manage. Keys are stored on the agent and read at session start.'\n )}\n </p>\n </div>\n </div>\n <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-2\">\n {providers.map((p) => (\n <button\n key={p.providerId}\n type=\"button\"\n onClick={() => setSelectedId(p.providerId)}\n className=\"flex items-center justify-between gap-2 rounded-lg border border-border-default bg-bg-surface px-3 py-2 text-left hover:border-border-strong hover:bg-bg-sunken transition-colors\"\n >\n <div className=\"min-w-0\">\n <div className=\"text-sm font-medium text-text-primary truncate\">{p.label}</div>\n <div className=\"text-xs text-text-secondary truncate\">\n {p.fields.map((f) => f.key).join(', ')}\n </div>\n </div>\n <ChevronRight className=\"size-4 flex-shrink-0 text-text-secondary\" />\n </button>\n ))}\n </div>\n </div>\n );\n }\n\n return (\n <div className=\"space-y-3\">\n <div className=\"flex items-center gap-2\">\n {providers.length > 1 ? (\n <button\n type=\"button\"\n onClick={() => setSelectedId(null)}\n className=\"inline-flex items-center gap-1 rounded-md border border-border-default px-2 py-1 text-xs text-text-secondary hover:text-text-primary hover:border-border-strong\"\n aria-label={tr('ai.providerCredentials.back', 'Back to providers')}\n >\n <ArrowLeft className=\"size-3.5\" />\n {tr('ai.providerCredentials.back', 'Back')}\n </button>\n ) : null}\n <div className=\"rounded-lg bg-bg-sunken p-2 text-text-secondary\">\n <KeyRound className=\"size-4\" />\n </div>\n <div className=\"min-w-0\">\n <h3 className=\"text-sm font-semibold text-text-primary truncate\">{selected.label}</h3>\n <p className=\"text-xs text-text-secondary\">\n {tr(\n 'ai.providerCredentials.scopedDescription',\n 'Keys are stored on the agent and read at session start.'\n )}\n </p>\n </div>\n </div>\n <ProviderCard\n agent={agent}\n provider={selected}\n onAuthSatisfiedChange={onProviderAuthSatisfiedChange}\n />\n </div>\n );\n}\n\nfunction isPrimaryField(f: AIProviderCredentialDef['fields'][number]): boolean {\n // Defaults: secret fields gate auth; URL/host overrides don't.\n return f.primary ?? f.secret ?? false;\n}\n\nfunction ProviderCard({\n agent,\n provider,\n onAuthSatisfiedChange,\n}: {\n agent: AgentRef;\n provider: AIProviderCredentialDef;\n onAuthSatisfiedChange?: (satisfied: boolean) => void;\n}) {\n const tr = useTr();\n const [values, setValues] = useState<Record<string, string>>({});\n // savedValues tracks what's actually on the agent (last successful\n // load/persist), not the unsaved input buffer. This is what drives the\n // \"auth satisfied\" indicator — typing an API key in the field doesn't\n // count until the user hits Save.\n const [savedValues, setSavedValues] = useState<Record<string, string>>({});\n const [visible, setVisible] = useState<Record<string, boolean>>({});\n const [loading, setLoading] = useState(true);\n const [saving, setSaving] = useState<string \| null>(null);\n const [error, setError] = useState<string \| null>(null);\n const [success, setSuccess] = useState<string \| null>(null);\n\n const primaryKeys = provider.fields.filter(isPrimaryField).map((f) => f.key);\n const satisfiedPrimaryKeys = primaryKeys.filter((k) => (savedValues[k] ?? '').trim().length > 0);\n const authSatisfied = satisfiedPrimaryKeys.length > 0;\n\n // Notify parent whenever satisfied flips. Effect (not inline call) so\n // children don't render-during-render of the parent.\n useEffect(() => {\n onAuthSatisfiedChange?.(authSatisfied);\n }, [authSatisfied, onAuthSatisfiedChange]);\n\n const loadValues = useCallback(async () => {\n setLoading(true);\n setError(null);\n try {\n const entries = await Promise.all(\n provider.fields.map(async (f) => [f.key, (await getAgentConfigValue(agent, f.key)) ?? ''])\n );\n const next = Object.fromEntries(entries);\n // Don't seed inputs with masked secrets (\"[redacted]\") — Save would re-persist the mask. Non-secret fields (URLs/hosts) return real values, so keep those editable.\n setValues(\n Object.fromEntries(\n provider.fields.filter((f) => !f.secret).map((f) => [f.key, next[f.key] ?? ''])\n )\n );\n setSavedValues(next);\n } catch (err) {\n setError(\n err instanceof Error\n ? err.message\n : tr('ai.providerCredentials.loadFailed', 'Failed to load provider credentials')\n );\n } finally {\n setLoading(false);\n }\n }, [agent, provider.fields, tr]);\n\n useEffect(() => {\n void loadValues();\n }, [loadValues]);\n\n const persistValue = useCallback(\n async (key: string, value: string) => {\n setSaving(key);\n setError(null);\n setSuccess(null);\n const trimmed = value.trim();\n try {\n if (trimmed) {\n await setAgentConfigValue(agent, key, trimmed);\n } else {\n await deleteAgentConfigValue(agent, key);\n }\n // Mirror the persisted result into savedValues so the auth-\n // satisfied banner / Continue button update immediately.\n setSavedValues((cur) => ({ ...cur, [key]: trimmed }));\n setSuccess(\n trimmed\n ? tr('ai.providerCredentials.saved', `${key} saved`)\n : tr('ai.providerCredentials.cleared', `${key} cleared`)\n );\n } catch (err) {\n setError(\n err instanceof Error\n ? err.message\n : tr('ai.providerCredentials.saveFailed', 'Failed to save credential')\n );\n } finally {\n setSaving(null);\n }\n },\n [agent, tr]\n );\n\n return (\n <div className=\"rounded-xl border border-border-default bg-bg-surface p-4 space-y-3\">\n <div className=\"space-y-1\">\n <h4 className=\"text-sm font-semibold text-text-primary\">{provider.label}</h4>\n <p className=\"text-xs text-text-secondary\">{provider.description}</p>\n {primaryKeys.length > 1 ? (\n <p className=\"text-xs text-text-tertiary\">\n {tr(\n 'ai.providerCredentials.eitherOr',\n `Save any one of: ${primaryKeys.join(' · ')}. You don't need to fill all of them.`\n )}\n </p>\n ) : null}\n </div>\n\n {/ Auth-satisfied banner — surfaces the moment any primary credential\n is persisted on the agent. The SDK-auth-missing modal pairs this\n with a Continue button so the user knows they can proceed. /}\n {authSatisfied ? (\n <div className=\"rounded-lg border border-status-success-border bg-status-success-bg px-3 py-2 text-xs text-status-success-text\">\n {tr(\n 'ai.providerCredentials.authSatisfied',\n `${provider.label} is ready. The agent will use ${satisfiedPrimaryKeys.join(' / ')} on the next SDK session.`\n )}\n </div>\n ) : null}\n\n {error ? (\n <div className=\"rounded-lg border border-status-error-border bg-status-error-bg px-3 py-2 text-sm text-status-error-text\">\n {error}\n </div>\n ) : null}\n {success ? (\n <div className=\"rounded-lg border border-status-success-border bg-status-success-bg px-3 py-2 text-sm text-status-success-text\">\n {success}\n </div>\n ) : null}\n\n {loading ? (\n <div className=\"flex items-center gap-2 text-sm text-text-secondary\">\n <Loader2 className=\"size-4 animate-spin\" />\n {tr('ai.providerCredentials.loading', 'Loading…')}\n </div>\n ) : (\n <div className=\"space-y-3\">\n {provider.fields.map((f) => {\n const isSecret = f.secret ?? false;\n const isSaved = Boolean((savedValues[f.key] ?? '').trim());\n return (\n <CredentialField\n key={f.key}\n label={f.key}\n secret={isSecret}\n value={values[f.key] ?? ''}\n saved={isSaved}\n placeholder={\n isSaved\n ? isSecret\n ? tr(\n 'ai.providerCredentials.storedSecretPlaceholder',\n '•••••••• stored — enter a new value to replace'\n )\n : tr(\n 'ai.providerCredentials.storedPlaceholder',\n 'stored — enter a new value to replace'\n )\n : ''\n }\n onChange={(v) => setValues((cur) => ({ ...cur, [f.key]: v }))}\n saving={saving === f.key}\n visible={visible[f.key] ?? false}\n onToggleVisible={() => setVisible((cur) => ({ ...cur, [f.key]: !cur[f.key] }))}\n onSave={() => void persistValue(f.key, values[f.key] ?? '')}\n onClear={() => void persistValue(f.key, '')}\n />\n );\n })}\n </div>\n )}\n </div>\n );\n}\n\ninterface CredentialFieldProps {\n label: string;\n secret: boolean;\n value: string;\n /* True when a value is already stored on the agent (read back masked). /\n saved: boolean;\n /* Resolved (i18n) placeholder shown when the input is empty but a value is stored. */\n placeholder: string;\n onChange: (value: string) => void;\n saving: boolean;\n visible: boolean;\n onToggleVisible: () => void;\n onSave: () => void;\n onClear: () => void;\n}\n\nfunction CredentialField({\n label,\n secret,\n value,\n saved,\n placeholder,\n onChange,\n saving,\n visible,\n onToggleVisible,\n onSave,\n onClear,\n}: CredentialFieldProps) {\n const showAsPassword = secret && !visible;\n return (\n <div className=\"space-y-2 rounded-lg border border-border-default bg-bg-primary p-3\">\n <label className=\"block text-xs font-medium text-text-secondary\">{label}</label>\n <div className=\"flex gap-2\">\n <div className=\"relative flex-1\">\n <input\n aria-label=\"control\"\n type={showAsPassword ? 'password' : 'text'}\n value={value}\n onChange={(event) => onChange(event.target.value)}\n autoComplete=\"off\"\n spellCheck={false}\n placeholder={placeholder}\n className=\"w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 pr-10 text-sm text-text-primary\"\n />\n {secret ? (\n <button\n type=\"button\"\n onClick={onToggleVisible}\n className=\"absolute right-2 top-1/2 -translate-y-1/2 text-text-secondary hover:text-text-primary\"\n >\n {visible ? <EyeOff className=\"size-4\" /> : <Eye className=\"size-4\" />}\n </button>\n ) : null}\n </div>\n <button\n type=\"button\"\n onClick={onSave}\n disabled={saving \|\| !value.trim()}\n className=\"inline-flex items-center gap-1.5 rounded-md bg-action-primary-bg px-3 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg-hover disabled:opacity-50\"\n >\n {saving ? <Loader2 className=\"size-4 animate-spin\" /> : <Save className=\"size-4\" />}\n Save\n </button>\n <button\n type=\"button\"\n onClick={onClear}\n disabled={saving \|\| (!value && !saved)}\n className=\"inline-flex items-center gap-1.5 rounded-md border border-border-default px-3 py-2 text-sm font-medium text-text-secondary hover:text-text-primary hover:border-border-strong disabled:opacity-50\"\n >\n <Trash2 className=\"size-4\" />\n Clear\n </button>\n </div>\n </div>\n );\n}\n"],"mappings":";;;;;;;AAsDA,SAAgB,EAA0B,EACxC,UACA,gBACA,sBACA,oCACiC;CACjC,IAAM,IAAK,GAAO,EACZ,IAAY,IACd,EAAwB,QAAQ,MAAM,EAAY,SAAS,EAAE,WAAW,CAAC,GACzE,GAIE,CAAC,GAAY,KAAiB,QAC9B,KAAqB,EAAU,MAAM,MAAM,EAAE,eAAe,EAAkB,GACzE,IAEF,EAAU,WAAW,IAAK,EAAU,IAAI,cAAc,OAAQ,KACrE,EAEI,IAAW,EAAU,MAAM,MAAM,EAAE,eAAe,EAAW,IAAI;AA2CvE,QAzCK,IA0CH,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf;IACG,EAAU,SAAS,IAClB,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAc,KAAK;KAClC,WAAU;KACV,cAAY,EAAG,+BAA+B,oBAAoB;eAJpE,CAME,kBAAC,GAAD,EAAW,WAAU,YAAa,CAAA,EACjC,EAAG,+BAA+B,OAAO,CACnC;SACP;IACJ,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,GAAD,EAAU,WAAU,UAAW,CAAA;KAC3B,CAAA;IACN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,MAAD;MAAI,WAAU;gBAAoD,EAAS;MAAW,CAAA,EACtF,kBAAC,KAAD;MAAG,WAAU;gBACV,EACC,4CACA,0DACD;MACC,CAAA,CACA;;IACF;MACN,kBAAC,GAAD;GACS;GACP,UAAU;GACV,uBAAuB;GACvB,CAAA,CACE;MAvEJ,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD,EAAU,WAAU,UAAW,CAAA;IAC3B,CAAA,EACN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,MAAD;KAAI,WAAU;eACX,EAAG,oCAAoC,oBAAoB;KACzD,CAAA,EACL,kBAAC,KAAD;KAAG,WAAU;eACV,EACC,0CACA,kHACD;KACC,CAAA,CACA;MACF;MACN,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAU,KAAK,MACd,kBAAC,UAAD;IAEE,MAAK;IACL,eAAe,EAAc,EAAE,WAAW;IAC1C,WAAU;cAJZ,CAME,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,WAAU;gBAAkD,EAAE;MAAY,CAAA,EAC/E,kBAAC,OAAD;MAAK,WAAU;gBACZ,EAAE,OAAO,KAAK,MAAM,EAAE,IAAI,CAAC,KAAK,KAAK;MAClC,CAAA,CACF;QACN,kBAAC,GAAD,EAAc,WAAU,4CAA6C,CAAA,CAC9D;MAZF,EAAE,WAYA,CACT;GACE,CAAA,CACF;;;AAwCZ,SAAS,EAAe,GAAuD;AAE7E,QAAO,EAAE,WAAW,EAAE,UAAU;;AAGlC,SAAS,EAAa,EACpB,UACA,aACA,4BAKC;CACD,IAAM,IAAK,GAAO,EACZ,CAAC,GAAQ,KAAa,EAAiC,EAAE,CAAC,EAK1D,CAAC,GAAa,KAAkB,EAAiC,EAAE,CAAC,EACpE,CAAC,GAAS,KAAc,EAAkC,EAAE,CAAC,EAC7D,CAAC,GAAS,KAAc,EAAS,GAAK,EACtC,CAAC,GAAQ,KAAa,EAAwB,KAAK,EACnD,CAAC,GAAO,KAAY,EAAwB,KAAK,EACjD,CAAC,GAAS,KAAc,EAAwB,KAAK,EAErD,IAAc,EAAS,OAAO,OAAO,EAAe,CAAC,KAAK,MAAM,EAAE,IAAI,EACtE,IAAuB,EAAY,QAAQ,OAAO,EAAY,MAAM,IAAI,MAAM,CAAC,SAAS,EAAE,EAC1F,IAAgB,EAAqB,SAAS;AAIpD,SAAgB;AACd,MAAwB,EAAc;IACrC,CAAC,GAAe,EAAsB,CAAC;CAE1C,IAAM,IAAa,EAAY,YAAY;AAEzC,EADA,EAAW,GAAK,EAChB,EAAS,KAAK;AACd,MAAI;GACF,IAAM,IAAU,MAAM,QAAQ,IAC5B,EAAS,OAAO,IAAI,OAAO,MAAM,CAAC,EAAE,KAAM,MAAM,EAAoB,GAAO,EAAE,IAAI,IAAK,GAAG,CAAC,CAC3F,EACK,IAAO,OAAO,YAAY,EAAQ;AAOxC,GALA,EACE,OAAO,YACL,EAAS,OAAO,QAAQ,MAAM,CAAC,EAAE,OAAO,CAAC,KAAK,MAAM,CAAC,EAAE,KAAK,EAAK,EAAE,QAAQ,GAAG,CAAC,CAChF,CACF,EACD,EAAe,EAAK;WACb,GAAK;AACZ,KACE,aAAe,QACX,EAAI,UACJ,EAAG,qCAAqC,sCAAsC,CACnF;YACO;AACR,KAAW,GAAM;;IAElB;EAAC;EAAO,EAAS;EAAQ;EAAG,CAAC;AAEhC,SAAgB;AACT,KAAY;IAChB,CAAC,EAAW,CAAC;CAEhB,IAAM,IAAe,EACnB,OAAO,GAAa,MAAkB;AAGpC,EAFA,EAAU,EAAI,EACd,EAAS,KAAK,EACd,EAAW,KAAK;EAChB,IAAM,IAAU,EAAM,MAAM;AAC5B,MAAI;AASF,GARI,IACF,MAAM,EAAoB,GAAO,GAAK,EAAQ,GAE9C,MAAM,EAAuB,GAAO,EAAI,EAI1C,GAAgB,OAAS;IAAE,GAAG;KAAM,IAAM;IAAS,EAAE,EACrD,EACE,IACI,EAAG,gCAAgC,GAAG,EAAI,QAAQ,GAClD,EAAG,kCAAkC,GAAG,EAAI,UAAU,CAC3D;WACM,GAAK;AACZ,KACE,aAAe,QACX,EAAI,UACJ,EAAG,qCAAqC,4BAA4B,CACzE;YACO;AACR,KAAU,KAAK;;IAGnB,CAAC,GAAO,EAAG,CACZ;AAED,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,MAAD;MAAI,WAAU;gBAA2C,EAAS;MAAW,CAAA;KAC7E,kBAAC,KAAD;MAAG,WAAU;gBAA+B,EAAS;MAAgB,CAAA;KACpE,EAAY,SAAS,IACpB,kBAAC,KAAD;MAAG,WAAU;gBACV,EACC,mCACA,oBAAoB,EAAY,KAAK,MAAM,CAAC,uCAC7C;MACC,CAAA,GACF;KACA;;GAKL,IACC,kBAAC,OAAD;IAAK,WAAU;cACZ,EACC,wCACA,GAAG,EAAS,MAAM,gCAAgC,EAAqB,KAAK,MAAM,CAAC,2BACpF;IACG,CAAA,GACJ;GAEH,IACC,kBAAC,OAAD;IAAK,WAAU;cACZ;IACG,CAAA,GACJ;GACH,IACC,kBAAC,OAAD;IAAK,WAAU;cACZ;IACG,CAAA,GACJ;GAEH,IACC,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD,EAAS,WAAU,uBAAwB,CAAA,EAC1C,EAAG,kCAAkC,WAAW,CAC7C;QAEN,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAS,OAAO,KAAK,MAAM;KAC1B,IAAM,IAAW,EAAE,UAAU,IACvB,IAAU,GAAS,EAAY,EAAE,QAAQ,IAAI,MAAM;AACzD,YACE,kBAAC,GAAD;MAEE,OAAO,EAAE;MACT,QAAQ;MACR,OAAO,EAAO,EAAE,QAAQ;MACxB,OAAO;MACP,aACE,IACI,IACE,EACE,kDACA,iDACD,GACD,EACE,4CACA,wCACD,GACH;MAEN,WAAW,MAAM,GAAW,OAAS;OAAE,GAAG;QAAM,EAAE,MAAM;OAAG,EAAE;MAC7D,QAAQ,MAAW,EAAE;MACrB,SAAS,EAAQ,EAAE,QAAQ;MAC3B,uBAAuB,GAAY,OAAS;OAAE,GAAG;QAAM,EAAE,MAAM,CAAC,EAAI,EAAE;OAAM,EAAE;MAC9E,cAAc,KAAK,EAAa,EAAE,KAAK,EAAO,EAAE,QAAQ,GAAG;MAC3D,eAAe,KAAK,EAAa,EAAE,KAAK,GAAG;MAC3C,EAxBK,EAAE,IAwBP;MAEJ;IACE,CAAA;GAEJ;;;AAoBV,SAAS,EAAgB,EACvB,UACA,WACA,UACA,UACA,gBACA,aACA,WACA,YACA,oBACA,WACA,cACuB;AAEvB,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,SAAD;GAAO,WAAU;aAAiD;GAAc,CAAA,EAChF,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,SAAD;MACE,cAAW;MACX,MARa,KAAU,CAAC,IAQD,aAAa;MAC7B;MACP,WAAW,MAAU,EAAS,EAAM,OAAO,MAAM;MACjD,cAAa;MACb,YAAY;MACC;MACb,WAAU;MACV,CAAA,EACD,IACC,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;gBAEC,EAAV,IAAW,IAAgC,GAAjC,EAAQ,WAAU,UAAW,CAA6B;MAC9D,CAAA,GACP,KACA;;IACN,kBAAC,UAAD;KACE,MAAK;KACL,SAAS;KACT,UAAU,KAAU,CAAC,EAAM,MAAM;KACjC,WAAU;eAJZ,CAMG,IAAS,kBAAC,GAAD,EAAS,WAAU,uBAAwB,CAAA,GAAG,kBAAC,GAAD,EAAM,WAAU,UAAW,CAAA,EAAC,OAE7E;;IACT,kBAAC,UAAD;KACE,MAAK;KACL,SAAS;KACT,UAAU,KAAW,CAAC,KAAS,CAAC;KAChC,WAAU;eAJZ,CAME,kBAAC,GAAD,EAAQ,WAAU,UAAW,CAAA,EAAA,QAEtB;;IACL;KACF"}
1	+ {"version":3,"file":"AIProviderCredentialsCard.js","names":[],"sources":["../../../src/components/ai/AIProviderCredentialsCard.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport {\n ArrowLeft,\n ChevronRight,\n Eye,\n EyeOff,\n KeyRound,\n Loader2,\n Save,\n Trash2,\n} from 'lucide-react';\n\nimport { useTr } from '../../shared/hooks/useTr';\nimport {\n deleteAgentConfigValue,\n getAgentConfigValue,\n setAgentConfigValue,\n type AgentRef,\n} from '@/services/aiApi';\n\nimport { AI_PROVIDER_CREDENTIALS, type AIProviderCredentialDef } from './aiProviderCredentials';\n\ninterface AIProviderCredentialsCardProps {\n agent: AgentRef;\n /*\n Optional filter — when present, only render providers whose providerId\n * appears in the list. Lets a future caller scope the card to \"only the\n * providers I have plugins installed for\" without changing the catalog.\n /\n providerIds?: string[];\n /\n When provided, the staged picker preselects this provider so the\n * caller (e.g. the SDK-auth-missing modal) can drop the user straight\n * onto the right form without an extra click.\n /\n initialProviderId?: string;\n /\n Fires whenever the currently-selected provider's saved-state changes\n * on disk. `satisfied` is true when at least one primary (auth-conferring)\n * field has a saved non-empty value. Used by the SDK-auth-missing modal\n * to enable a Continue affordance the moment the user persists any\n * acceptable credential, without forcing them to also fill the others.\n /\n onProviderAuthSatisfiedChange?: (satisfied: boolean) => void;\n}\n\n/\n Staged credentials manager: shows a provider picker first, then on\n * select renders one card with that provider's config keys plus a back\n * button. Keeps the rendered DOM small (and the surrounding modal\n * viewport-friendly) regardless of how many providers are in the catalog.\n \n Replaces the older Claude-only ClaudeCredentialsCard.\n /\nexport function AIProviderCredentialsCard({\n agent,\n providerIds,\n initialProviderId,\n onProviderAuthSatisfiedChange,\n}: AIProviderCredentialsCardProps) {\n const tr = useTr();\n const providers = providerIds\n ? AI_PROVIDER_CREDENTIALS.filter((p) => providerIds.includes(p.providerId))\n : AI_PROVIDER_CREDENTIALS;\n\n // Preselect when the catalog narrows to exactly one provider so the\n // single-provider case (e.g. claude-only filter) skips the picker.\n const [selectedId, setSelectedId] = useState<string \| null>(() => {\n if (initialProviderId && providers.some((p) => p.providerId === initialProviderId)) {\n return initialProviderId;\n }\n return providers.length === 1 ? (providers[0]?.providerId ?? null) : null;\n });\n\n const selected = providers.find((p) => p.providerId === selectedId) ?? null;\n\n if (!selected) {\n return (\n <div className=\"space-y-3\">\n <div className=\"flex items-start gap-3\">\n <div className=\"rounded-lg bg-bg-sunken p-2 text-text-secondary\">\n <KeyRound className=\"size-4\" />\n </div>\n <div className=\"space-y-1\">\n <h3 className=\"text-sm font-semibold text-text-primary\">\n {tr('ai.providerCredentials.pickTitle', 'Choose a provider')}\n </h3>\n <p className=\"text-sm text-text-secondary\">\n {tr(\n 'ai.providerCredentials.pickDescription',\n 'Pick the provider whose credentials you want to manage. Keys are stored on the agent and read at session start.'\n )}\n </p>\n </div>\n </div>\n <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-2\">\n {providers.map((p) => (\n <button\n key={p.providerId}\n type=\"button\"\n onClick={() => setSelectedId(p.providerId)}\n className=\"flex items-center justify-between gap-2 rounded-lg border border-border-default bg-bg-surface px-3 py-2 text-left hover:border-border-strong hover:bg-bg-sunken transition-colors\"\n >\n <div className=\"min-w-0\">\n <div className=\"text-sm font-medium text-text-primary truncate\">{p.label}</div>\n <div className=\"text-xs text-text-secondary truncate\">\n {p.fields.map((f) => f.key).join(', ')}\n </div>\n </div>\n <ChevronRight className=\"size-4 flex-shrink-0 text-text-secondary\" />\n </button>\n ))}\n </div>\n </div>\n );\n }\n\n return (\n <div className=\"space-y-3\">\n <div className=\"flex items-center gap-2\">\n {providers.length > 1 ? (\n <button\n type=\"button\"\n onClick={() => setSelectedId(null)}\n className=\"inline-flex items-center gap-1 rounded-md border border-border-default px-2 py-1 text-xs text-text-secondary hover:text-text-primary hover:border-border-strong\"\n aria-label={tr('ai.providerCredentials.back', 'Back to providers')}\n >\n <ArrowLeft className=\"size-3.5\" />\n {tr('ai.providerCredentials.back', 'Back')}\n </button>\n ) : null}\n <div className=\"rounded-lg bg-bg-sunken p-2 text-text-secondary\">\n <KeyRound className=\"size-4\" />\n </div>\n <div className=\"min-w-0\">\n <h3 className=\"text-sm font-semibold text-text-primary truncate\">{selected.label}</h3>\n <p className=\"text-xs text-text-secondary\">\n {tr(\n 'ai.providerCredentials.scopedDescription',\n 'Keys are stored on the agent and read at session start.'\n )}\n </p>\n </div>\n </div>\n <ProviderCard\n agent={agent}\n provider={selected}\n onAuthSatisfiedChange={onProviderAuthSatisfiedChange}\n />\n </div>\n );\n}\n\nfunction isPrimaryField(f: AIProviderCredentialDef['fields'][number]): boolean {\n // Defaults: secret fields gate auth; URL/host overrides don't.\n return f.primary ?? f.secret ?? false;\n}\n\nfunction ProviderCard({\n agent,\n provider,\n onAuthSatisfiedChange,\n}: {\n agent: AgentRef;\n provider: AIProviderCredentialDef;\n onAuthSatisfiedChange?: (satisfied: boolean) => void;\n}) {\n const tr = useTr();\n const [values, setValues] = useState<Record<string, string>>({});\n // savedValues tracks what's actually on the agent (last successful\n // load/persist), not the unsaved input buffer. This is what drives the\n // \"auth satisfied\" indicator — typing an API key in the field doesn't\n // count until the user hits Save.\n const [savedValues, setSavedValues] = useState<Record<string, string>>({});\n const [visible, setVisible] = useState<Record<string, boolean>>({});\n const [loading, setLoading] = useState(true);\n const [saving, setSaving] = useState<string \| null>(null);\n const [error, setError] = useState<string \| null>(null);\n const [success, setSuccess] = useState<string \| null>(null);\n\n const primaryKeys = provider.fields.filter(isPrimaryField).map((f) => f.key);\n const satisfiedPrimaryKeys = primaryKeys.filter((k) => (savedValues[k] ?? '').trim().length > 0);\n const authSatisfied = satisfiedPrimaryKeys.length > 0;\n\n // Notify parent whenever satisfied flips. Effect (not inline call) so\n // children don't render-during-render of the parent.\n useEffect(() => {\n onAuthSatisfiedChange?.(authSatisfied);\n }, [authSatisfied, onAuthSatisfiedChange]);\n\n const loadValues = useCallback(async () => {\n setLoading(true);\n setError(null);\n try {\n const entries = await Promise.all(\n provider.fields.map(async (f) => [f.key, (await getAgentConfigValue(agent, f.key)) ?? ''])\n );\n const next = Object.fromEntries(entries);\n // Don't seed inputs with masked secrets (\"[redacted]\") — Save would re-persist the mask. Non-secret fields (URLs/hosts) return real values, so keep those editable.\n setValues(\n Object.fromEntries(\n provider.fields.filter((f) => !f.secret).map((f) => [f.key, next[f.key] ?? ''])\n )\n );\n setSavedValues(next);\n } catch (err) {\n setError(\n err instanceof Error\n ? err.message\n : tr('ai.providerCredentials.loadFailed', 'Failed to load provider credentials')\n );\n } finally {\n setLoading(false);\n }\n }, [agent, provider.fields, tr]);\n\n useEffect(() => {\n void loadValues();\n }, [loadValues]);\n\n const persistValue = useCallback(\n async (key: string, value: string) => {\n setSaving(key);\n setError(null);\n setSuccess(null);\n const trimmed = value.trim();\n try {\n if (trimmed) {\n await setAgentConfigValue(agent, key, trimmed);\n } else {\n await deleteAgentConfigValue(agent, key);\n }\n // Mirror the persisted result into savedValues so the auth-\n // satisfied banner / Continue button update immediately.\n setSavedValues((cur) => ({ ...cur, [key]: trimmed }));\n setSuccess(\n trimmed\n ? tr('ai.providerCredentials.saved', `${key} saved`)\n : tr('ai.providerCredentials.cleared', `${key} cleared`)\n );\n } catch (err) {\n setError(\n err instanceof Error\n ? err.message\n : tr('ai.providerCredentials.saveFailed', 'Failed to save credential')\n );\n } finally {\n setSaving(null);\n }\n },\n [agent, tr]\n );\n\n return (\n <div className=\"rounded-xl border border-border-default bg-bg-surface p-4 space-y-3\">\n <div className=\"space-y-1\">\n <h4 className=\"text-sm font-semibold text-text-primary\">{provider.label}</h4>\n <p className=\"text-xs text-text-secondary\">{provider.description}</p>\n {primaryKeys.length > 1 ? (\n <p className=\"text-xs text-text-tertiary\">\n {tr(\n 'ai.providerCredentials.eitherOr',\n `Save any one of: ${primaryKeys.join(' · ')}. You don't need to fill all of them.`\n )}\n </p>\n ) : null}\n </div>\n\n {/ Auth-satisfied banner — surfaces the moment any primary credential\n is persisted on the agent. The SDK-auth-missing modal pairs this\n with a Continue button so the user knows they can proceed. /}\n {authSatisfied ? (\n <div className=\"rounded-lg border border-status-success-border bg-status-success-bg-subtle px-3 py-2 text-xs text-status-success-text\">\n {tr(\n 'ai.providerCredentials.authSatisfied',\n `${provider.label} is ready. The agent will use ${satisfiedPrimaryKeys.join(' / ')} on the next SDK session.`\n )}\n </div>\n ) : null}\n\n {error ? (\n <div className=\"rounded-lg border border-status-error-border bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text\">\n {error}\n </div>\n ) : null}\n {success ? (\n <div className=\"rounded-lg border border-status-success-border bg-status-success-bg-subtle px-3 py-2 text-sm text-status-success-text\">\n {success}\n </div>\n ) : null}\n\n {loading ? (\n <div className=\"flex items-center gap-2 text-sm text-text-secondary\">\n <Loader2 className=\"size-4 animate-spin\" />\n {tr('ai.providerCredentials.loading', 'Loading…')}\n </div>\n ) : (\n <div className=\"space-y-3\">\n {provider.fields.map((f) => {\n const isSecret = f.secret ?? false;\n const isSaved = Boolean((savedValues[f.key] ?? '').trim());\n return (\n <CredentialField\n key={f.key}\n label={f.key}\n secret={isSecret}\n value={values[f.key] ?? ''}\n saved={isSaved}\n placeholder={\n isSaved\n ? isSecret\n ? tr(\n 'ai.providerCredentials.storedSecretPlaceholder',\n '•••••••• stored — enter a new value to replace'\n )\n : tr(\n 'ai.providerCredentials.storedPlaceholder',\n 'stored — enter a new value to replace'\n )\n : ''\n }\n onChange={(v) => setValues((cur) => ({ ...cur, [f.key]: v }))}\n saving={saving === f.key}\n visible={visible[f.key] ?? false}\n onToggleVisible={() => setVisible((cur) => ({ ...cur, [f.key]: !cur[f.key] }))}\n onSave={() => void persistValue(f.key, values[f.key] ?? '')}\n onClear={() => void persistValue(f.key, '')}\n />\n );\n })}\n </div>\n )}\n </div>\n );\n}\n\ninterface CredentialFieldProps {\n label: string;\n secret: boolean;\n value: string;\n /* True when a value is already stored on the agent (read back masked). /\n saved: boolean;\n /* Resolved (i18n) placeholder shown when the input is empty but a value is stored. */\n placeholder: string;\n onChange: (value: string) => void;\n saving: boolean;\n visible: boolean;\n onToggleVisible: () => void;\n onSave: () => void;\n onClear: () => void;\n}\n\nfunction CredentialField({\n label,\n secret,\n value,\n saved,\n placeholder,\n onChange,\n saving,\n visible,\n onToggleVisible,\n onSave,\n onClear,\n}: CredentialFieldProps) {\n const showAsPassword = secret && !visible;\n return (\n <div className=\"space-y-2 rounded-lg border border-border-default bg-bg-surface p-3\">\n <label className=\"block text-xs font-medium text-text-secondary\">{label}</label>\n <div className=\"flex gap-2\">\n <div className=\"relative flex-1\">\n <input\n aria-label=\"control\"\n type={showAsPassword ? 'password' : 'text'}\n value={value}\n onChange={(event) => onChange(event.target.value)}\n autoComplete=\"off\"\n spellCheck={false}\n placeholder={placeholder}\n className=\"w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 pr-10 text-sm text-text-primary\"\n />\n {secret ? (\n <button\n type=\"button\"\n onClick={onToggleVisible}\n className=\"absolute right-2 top-1/2 -translate-y-1/2 text-text-secondary hover:text-text-primary\"\n >\n {visible ? <EyeOff className=\"size-4\" /> : <Eye className=\"size-4\" />}\n </button>\n ) : null}\n </div>\n <button\n type=\"button\"\n onClick={onSave}\n disabled={saving \|\| !value.trim()}\n className=\"inline-flex items-center gap-1.5 rounded-md bg-action-primary-bg px-3 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg-hover disabled:opacity-50\"\n >\n {saving ? <Loader2 className=\"size-4 animate-spin\" /> : <Save className=\"size-4\" />}\n Save\n </button>\n <button\n type=\"button\"\n onClick={onClear}\n disabled={saving \|\| (!value && !saved)}\n className=\"inline-flex items-center gap-1.5 rounded-md border border-border-default px-3 py-2 text-sm font-medium text-text-secondary hover:text-text-primary hover:border-border-strong disabled:opacity-50\"\n >\n <Trash2 className=\"size-4\" />\n Clear\n </button>\n </div>\n </div>\n );\n}\n"],"mappings":"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"}

package/dist/components/ai/AIQueueTab.js CHANGED Viewed

@@ -13,22 +13,22 @@ import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
 var S = {
 	pending: {
 		label: "Pending",
-		cls: "bg-status-warning-bg text-status-warning-text",
+		cls: "bg-status-warning-bg-subtle text-status-warning-text",
 		icon: m
 	},
 	processing: {
 		label: "Processing",
-		cls: "bg-action-primary-bg/20 text-action-primary-bg",
+		cls: "bg-[var(--color-accent-soft)] text-text-primary",
 		icon: g
 	},
 	completed: {
 		label: "Completed",
-		cls: "bg-status-success-bg text-status-success-text",
+		cls: "bg-status-success-bg-subtle text-status-success-text",
 		icon: p
 	},
 	failed: {
 		label: "Failed",
-		cls: "bg-status-error-bg text-status-error-text",
+		cls: "bg-status-error-bg-subtle text-status-error-text",
 		icon: d
 	},
 	cancelled: {