[ { "path": ".github/FUNDING.yml", "content": "github: chrysb\n" }, { "path": ".github/workflows/ci.yml", "content": "name: CI\n\non:\n push:\n branches: [main]\n pull_request:\n branches: [main]\n\njobs:\n test:\n runs-on: ubuntu-latest\n\n strategy:\n matrix:\n node-version: [22]\n\n steps:\n - uses: actions/checkout@v4\n\n - uses: actions/setup-node@v4\n with:\n node-version: ${{ matrix.node-version }}\n cache: npm\n\n - run: npm ci\n\n - run: npm run build:ui\n\n - run: npm test\n" }, { "path": ".gitignore", "content": "node_modules/\n.DS_Store\n.env\n.cursor/\ncoverage/\nworkspace/.openclaw/\n\n# Build artifacts (generated by npm run build:ui)\nlib/public/dist/\nlib/public/css/tailwind.generated.css\nlib/public/css/vendor/\n" }, { "path": ".npmrc", "content": "@chrysb:registry=https://registry.npmjs.org/\n" }, { "path": "AGENTS.md", "content": "## Project Overview\n\n### AlphaClaw Project Context\n\nAlphaClaw is the ops and setup layer around OpenClaw. It provides a browser-based setup UI, gateway lifecycle management, watchdog recovery flows, and integrations (for example Telegram, Discord, Google Workspace, and webhooks) so users can operate OpenClaw without manual server intervention.\n\n### Understanding OpenClaw\n\nIf you need to understand the internals of OpenClaw, you can inspect the code at `~/Projects/openclaw/src`\n\n### Architecture At A Glance\n\n- `bin/alphaclaw.js`: CLI entrypoint and lifecycle command surface.\n- `lib/server`: Express server, authenticated setup APIs, watchdog APIs, channel integrations, and proxying to the OpenClaw gateway.\n- `lib/public`: Setup UI frontend (component-driven tabs and flows for providers, envars, watchdog, webhooks, and onboarding).\n- `lib/setup`: Prompt hardening templates and setup-related assets injected into agent/system behavior.\n\nRuntime model:\n\n1. AlphaClaw server starts and manages OpenClaw as a child process.\n2. Setup UI calls AlphaClaw APIs for configuration and operations.\n3. AlphaClaw proxies gateway traffic and handles watchdog monitoring/repair.\n\n### Key Technologies\n\n- Node.js 22.14+ runtime.\n- Express-based HTTP API server.\n- `http-proxy` for gateway proxy behavior.\n- OpenClaw CLI/gateway process orchestration.\n- Preact + `htm` frontend patterns for Setup UI components.\n- Vitest + Supertest for server and route testing.\n\n## Coding Conventions\n\n### Change Patterns\n\n- Keep edits targeted and production-safe; favor small, reviewable changes.\n- Preserve existing behavior unless the task explicitly requires behavior changes.\n- Follow existing UI conventions and shared components for consistency.\n- Reuse existing server route and state patterns before introducing new abstractions.\n- Update tests when behavior changes in routes, watchdog flows, or setup state.\n- Before running tests in a fresh checkout, run `npm install` so `vitest` (devDependency) is available for `npm test`.\n\n### Code Structure\n\n- Avoid monolithic implementation files for new features. For new UI areas and new API areas, start with a decomposed structure (focused components/hooks/utilities for UI; focused route modules/services/helpers for server) rather than building one large file first and splitting later.\n- When adding a new feature area, follow the existing project patterns from day one (for example feature folders with `index.js` plus `use-*` hooks in UI, and route + service separation on server) so code stays maintainable as the feature grows.\n- When continuing to build on a file that is growing large or accumulating unrelated concerns, stop and decompose it before adding more code rather than letting it drift into a monolith.\n\n### Networking and Fetching\n\n- Prefer the shared cache primitives in `lib/public/js/lib/api-cache.js` for backend reads:\n - `cachedFetch(...)` for imperative fetch paths.\n - `getCached(...)` / `setCached(...)` / `invalidateCache(...)` for cache lifecycle.\n- For component-level read requests, prefer `useCachedFetch` from `lib/public/js/hooks/use-cached-fetch.js` over ad-hoc `useEffect(() => fetchX())` mount loads.\n- Treat the API URL (including query params) as the canonical cache key for GET-style payloads.\n- Keep cache in-memory for fast tab switches; do not add persistent storage caching unless explicitly required by product behavior.\n- Do not keep route panes mounted via `display:none` just to preserve data. Prefer conditional rendering + cache-backed remounts.\n- Use `usePolling` for recurring refreshes and always pass a stable `cacheKey` when poll results should hydrate remounts.\n- Keep `pauseWhenHidden` behavior enabled for polling unless a specific flow requires background polling while the browser tab is hidden.\n- Tune polling intervals conservatively; avoid 1-2s polling unless there is a clear real-time requirement.\n- For app-shell status streams, prefer SSE (`/api/events/status`) where available and keep polling as fallback behavior.\n- After write/mutation APIs (POST/PUT/DELETE), refresh or invalidate relevant cached keys so the UI does not show stale data.\n\n### OpenClaw Config Access\n\n- When reading `openclaw.json` in server code, use the shared helper in `lib/server/openclaw-config.js` (`readOpenclawConfig`) instead of ad-hoc `JSON.parse(fs.readFileSync(...))` blocks.\n\n### Where To Put Agent Guidance\n\n- **This file (`AGENTS.md`):** Project-level guidance for coding agents working on the AlphaClaw codebase — architecture, conventions, release flow, UI patterns, etc.\n- **`lib/setup/core-prompts/AGENTS.md`:** Runtime prompt injected into the OpenClaw agent's system prompt. Only write there when the guidance is meant for the deployed agent's behavior, not for coding on this project.\n\n## Operations\n\n### Release Flow (Beta -> Production)\n\nUse this release flow when promoting tested beta builds to production:\n\n1. Ensure `main` is clean and synced, and tests pass.\n2. Publish beta iterations as needed:\n - `npm version prerelease --preid=beta`\n - `git push && git push --tags`\n - `npm publish --tag beta`\n3. Immediately after each beta publish, update `~/Projects/openclaw-railway-template` on the `beta` branch to pin the exact beta version in `package.json` (for example `0.3.2-beta.4`), then commit and push that template change. Do not leave the beta template on `latest`, or Docker layer cache can reuse an older install.\n4. When ready for production, publish a stable release version (for example `0.3.2`):\n - `npm version 0.3.2`\n - `git push && git push --tags`\n - `npm publish` (publishes to `latest`)\n - Pin all deployment templates on `main` to that release: set `@chrysb/alphaclaw` in `~/Projects/openclaw-railway-template`, `~/Projects/openclaw-render-template`, and `~/Projects/openclaw-apex-template` to the released version (templates rely on AlphaClaw’s declared `openclaw` dependency — do not add `package.json` `overrides` for `openclaw` unless you have a one-off debug reason). Run `npm install` in each repo, confirm `npm ls openclaw` matches AlphaClaw’s `package.json` pin, commit `package.json` and `package-lock.json`, and push. Skipping a template leaves it stale relative to the others.\n5. Return templates to production channel:\n - `@chrysb/alphaclaw: \"latest\"`\n6. Optionally keep beta branch/tag flows active for next release cycle.\n\n### Runtime Dependency Guardrails (Express 4 vs 5)\n\nAlphaClaw currently expects Express 4 semantics in its setup API layer. A broken container dependency tree can accidentally resolve `express@5` at `/app/node_modules/express`, which causes subtle request handling regressions (for example body parsing behavior on certain methods).\n\nKnown root cause pattern:\n\n- Mutating `/app/node_modules` in-place (for example copy-over installs used for emergency package swaps) can leave the runtime tree inconsistent with `/app/package.json`.\n- This can hoist `express@5` to the app root, so `require(\"express\")` inside AlphaClaw resolves the wrong major version.\n\nPreferred fix/recovery:\n\n1. Ensure template `package.json` pins the intended `@chrysb/alphaclaw` version.\n2. Rebuild the `openclaw` container from scratch (no cache) and recreate it:\n - `docker compose down`\n - `docker compose build --no-cache openclaw`\n - `docker compose up -d openclaw`\n3. Verify runtime resolution inside the container:\n - `node -p \"require('express/package.json').version\"` should be `4.x`\n - `npm ls express` should show `@chrysb/alphaclaw` on `express@4.x` (OpenClaw can still carry its own `express@5` subtree).\n\n### Telegram Notice Format (AlphaClaw)\n\nUse this format for any Telegram notices sent from AlphaClaw services (watchdog, system alerts, repair notices):\n\n1. Header line (Markdown): `🐺 *AlphaClaw Watchdog*`\n2. Headline line (simple, no `Status:` prefix):\n - `🔴 Crash loop detected`\n - `🔴 Crash loop detected, auto-repairing...`\n - `🟡 Auto-repair started, awaiting health check`\n - `🟢 Auto-repair complete, gateway healthy`\n - `🟢 Gateway healthy again`\n - `🔴 Auto-repair failed`\n3. Append a markdown link to the headline when URL is available:\n - `... - [View logs](/#/watchdog)`\n4. Optional context lines like `Trigger: ...`, `Attempt count: ...`\n5. For values with underscores or special characters (for example `crash_loop`), wrap the value in backticks:\n - `Trigger: \\`crash_loop\\``\n6. Do not use HTML tags (``, ``) for Telegram watchdog notices.\n\n## UI Conventions\n\nUse these conventions for all UI work under `lib/public/js` and `lib/public/css`.\n\n### Setup UI bundle (esbuild)\n\n- The browser loads the compiled bundle under `lib/public/dist/` (for example `app.bundle.js` and chunk files), produced by `scripts/build-ui.mjs` (esbuild).\n- **After any UI source change** that should ship in production (`lib/public/js`, `lib/public/css`, or other inputs to the build), run **`npm run build:ui`** so `lib/public/dist/` stays in sync. Verify the app in the browser against the rebuilt bundle when the change is non-trivial.\n- **`npm publish`** runs **`prepack`** → **`npm run build:ui`**, so published packages always include a fresh bundle. Local installs, Docker builds from a git checkout, or commits that include `dist/` still require **`npm run build:ui`** when you change UI sources and expect the built assets to match.\n\n### Component structure\n\n- Use arrow-function components and helpers.\n- Prefer shared components over one-off markup when a pattern already exists.\n- Keep constants in `kName` format (e.g. `kUiTabs`, `kGroupOrder`, `kNamePattern`).\n- Keep component-level helpers near the top of the file, before the main export.\n- Treat `index.js` as a presentational shell whenever possible: keep business logic in hooks and pass derived state/actions down as props.\n- Add reusable SVG icons to `lib/public/js/components/icons.js` and import them from there; avoid introducing one-off inline SVGs in feature files when a shared icon component can be used.\n\n### Rendering and composition\n\n- Use the `htm` + `preact` pattern:\n - `const html = htm.bind(h);`\n - return `html\\`...\\``\n- In `htm` templates, be explicit with inline spacing around styled inline tags (``, ``, ``): use ` ${\" \"}` where needed, and verify rendered copy so words never collapse (`eventsand`) or gain double spaces.\n- Prefer early return for hidden states (e.g. `if (!visible) return null;`).\n- Use `` for tab/page headers that need a title and right-side actions.\n- Use card shells consistently: `bg-surface border border-border rounded-xl`.\n- For nested \"surface on surface\" blocks (content inside a `bg-surface` card), use `ac-surface-inset` for the inner container treatment so inset sections match shared history/sessions styling.\n- For internal section dividers, use `border-t border-border` (avoid opacity variants) with comfortable vertical spacing around the divider.\n\n### Color and theme tokens\n\n- Prefer semantic Tailwind color utilities backed by theme tokens (`text-body`, `text-fg-muted`, `text-fg-dim`, `bg-field`, `bg-status-error-bg`, `border-status-warning-border`) instead of raw palette classes like `text-gray-300` or `bg-red-900/30`.\n- When a new reusable UI color role is needed, add the CSS variable in `lib/public/css/theme.css` and expose it through `tailwind.config.cjs` rather than introducing one-off hardcoded color classes in components.\n- Keep component refactors token-based so future theme changes stay centralized in the token layer instead of requiring per-component color rewrites.\n\n### Buttons\n\n- Primary actions: `ac-btn-cyan`\n- Secondary actions: `ac-btn-secondary`\n- Positive/success actions: `ac-btn-green`\n- Ghost/text actions: `ac-btn-ghost` (use for low-emphasis actions like \"Disconnect\" or \"Add provider\")\n- Destructive inline actions: `ac-btn-danger`\n- Use consistent disabled treatment: `opacity-50 cursor-not-allowed`.\n- Keep action sizing consistent (`text-xs px-3 py-1.5 rounded-lg` for compact controls unless there is a clear reason otherwise).\n- For `` actions, use `ac-btn-cyan` (primary) or `ac-btn-secondary` (secondary) by default; avoid ghost/text-only styling for main header actions.\n- Prefer shared action components when available (`ActionButton`, `UpdateActionButton`, `ConfirmDialog`) before custom button logic.\n- In setup/onboarding auth flows (e.g. Codex OAuth), prefer `` over raw `\n \n alphaclaw\n \n \n ${browseState.isBrowseRoute\n ? html`\n
\n <${BrowseRoute}\n activeBrowsePath=${browseState.activeBrowsePath}\n browseView=${browseState.browseViewerMode}\n lineTarget=${browseState.browseLineTarget}\n lineEndTarget=${browseState.browseLineEndTarget}\n selectedBrowsePath=${browseState.selectedBrowsePath}\n onNavigateToBrowseFile=${browseActions.navigateToBrowseFile}\n onEditSelectedBrowseFile=${() =>\n setLocation(\n browseActions.buildBrowseRoute(browseState.selectedBrowsePath, {\n view: \"edit\",\n }),\n )}\n onClearSelection=${() => {\n browseActions.clearBrowsePreview();\n setLocation(\"/browse\");\n }}\n />\n
\n `\n : null}\n ${isAgentsRoute\n ? html`\n
\n <${AgentsRoute}\n agents=${agentsState.agents}\n loading=${agentsState.loading}\n saving=${agentsState.saving}\n agentsActions=${agentsActions}\n selectedAgentId=${selectedAgentId}\n activeTab=${agentDetailTab}\n onSelectAgent=${(agentId) =>\n setLocation(`/agents/${encodeURIComponent(agentId)}`)}\n onSelectTab=${(tab) => {\n const safePath = tab && tab !== \"overview\"\n ? `/agents/${encodeURIComponent(selectedAgentId)}/${tab}`\n : `/agents/${encodeURIComponent(selectedAgentId)}`;\n setLocation(safePath);\n }}\n onNavigateToBrowseFile=${browseActions.navigateToBrowseFile}\n onSetLocation=${setLocation}\n />\n
\n `\n : null}\n ${isChatRoute\n ? html`\n
\n <${ChatRoute}\n sessions=${chatSessions}\n selectedSessionKey=${selectedChatSessionKey}\n />\n
\n `\n : null}\n ${isCronRoute\n ? html`\n
\n <${CronRoute}\n jobId=${selectedCronJobId}\n onSetLocation=${setLocation}\n />\n
\n `\n : null}\n ${isEnvarsRoute\n ? html`\n
\n <${EnvarsRoute}\n onRestartRequired=${controllerActions.setRestartRequired}\n />\n
\n `\n : null}\n ${isModelsRoute\n ? html`\n
\n <${ModelsRoute}\n onRestartRequired=${controllerActions.setRestartRequired}\n />\n
\n `\n : null}\n ${isNodesRoute\n ? html`\n
\n <${NodesRoute}\n onRestartRequired=${controllerActions.setRestartRequired}\n />\n
\n `\n : null}\n ${browseState.isBrowseRoute ||\n isAgentsRoute ||\n isChatRoute ||\n isCronRoute ||\n isEnvarsRoute ||\n isModelsRoute ||\n isNodesRoute\n ? null\n : html`\n \n
\n <${Switch}>\n <${Route} path=\"/general\">\n <${GeneralRoute}\n statusData=${controllerState.sharedStatus}\n watchdogData=${controllerState.sharedWatchdogStatus}\n doctorStatusData=${controllerState.sharedDoctorStatus}\n agents=${agentsState.agents}\n doctorWarningDismissedUntilMs=${doctorWarningDismissedUntilMs}\n onRefreshStatuses=${controllerActions.refreshSharedStatuses}\n onSetLocation=${setLocation}\n onNavigate=${browseActions.navigateToSubScreen}\n restartingGateway=${controllerState.restartingGateway}\n onRestartGateway=${controllerActions.handleGatewayRestart}\n restartSignal=${controllerState.gatewayRestartSignal}\n onRestartRequired=${controllerActions.setRestartRequired}\n onDismissDoctorWarning=${() =>\n setDoctorWarningDismissedUntilMs(\n Date.now() + kOneWeekMs,\n )}\n />\n \n <${Route} path=\"/doctor\">\n <${DoctorRoute} onNavigateToBrowseFile=${browseActions.navigateToBrowseFile} />\n \n <${Route} path=\"/telegram/:accountId\">\n ${(params) => html`\n <${TelegramRoute}\n accountId=${decodeURIComponent(params.accountId || \"default\")}\n onBack=${browseActions.exitSubScreen}\n />\n `}\n \n <${Route} path=\"/telegram\">\n <${RouteRedirect} to=\"/telegram/default\" />\n \n <${Route} path=\"/providers\">\n <${RouteRedirect} to=\"/models\" />\n \n <${Route} path=\"/watchdog\">\n <${WatchdogRoute}\n statusData=${controllerState.sharedStatus}\n watchdogStatus=${controllerState.sharedWatchdogStatus}\n onRefreshStatuses=${controllerActions.refreshSharedStatuses}\n restartingGateway=${controllerState.restartingGateway}\n onRestartGateway=${controllerActions.handleGatewayRestart}\n restartSignal=${controllerState.gatewayRestartSignal}\n />\n \n <${Route} path=\"/usage/:sessionId\">\n ${(params) => html`\n <${UsageRoute}\n sessionId=${decodeURIComponent(\n params.sessionId || \"\",\n )}\n onSetLocation=${setLocation}\n />\n `}\n \n <${Route} path=\"/usage\">\n <${UsageRoute} onSetLocation=${setLocation} />\n \n <${Route} path=\"/webhooks/:hookName\">\n ${(params) => html`\n <${WebhooksRoute}\n hookName=${decodeURIComponent(params.hookName || \"\")}\n routeHistoryRef=${browseState.routeHistoryRef}\n getCurrentPath=${getHashRouterPath}\n onSetLocation=${setLocation}\n onRestartRequired=${controllerActions.setRestartRequired}\n onNavigateToBrowseFile=${browseActions.navigateToBrowseFile}\n />\n `}\n \n <${Route} path=\"/webhooks\">\n <${WebhooksRoute}\n routeHistoryRef=${browseState.routeHistoryRef}\n getCurrentPath=${getHashRouterPath}\n onSetLocation=${setLocation}\n onRestartRequired=${controllerActions.setRestartRequired}\n onNavigateToBrowseFile=${browseActions.navigateToBrowseFile}\n />\n \n <${Route}>\n <${RouteRedirect} to=\"/general\" />\n \n \n
\n \n `}\n <${ToastContainer}\n className=\"fixed top-4 right-4 z-[60] space-y-2 pointer-events-none\"\n />\n \n\n
\n
\n ${footerVersion\n ? html`${footerVersion}`\n : null}\n
\n
\n docs\n discord\n github\n
\n
\n \n `;\n};\n\nconst rootElement = document.getElementById(\"app\");\nif (rootElement) {\n const appBootCounter = \"__alphaclawSetupAppBootCount\";\n window[appBootCounter] = Number(window[appBootCounter] || 0) + 1;\n // Defensive: clear root so duplicate bootstraps cannot stack full app shells.\n render(null, rootElement);\n rootElement.replaceChildren();\n render(\n html`\n <${Router} hook=${useHashLocation}>\n <${App} />\n \n `,\n rootElement,\n );\n}\n" }, { "path": "lib/public/js/components/action-button.js", "content": "import { h } from \"preact\";\nimport htm from \"htm\";\nimport { LoadingSpinner } from \"./loading-spinner.js\";\n\nconst html = htm.bind(h);\n\nconst kStaticToneClassByTone = {\n primary: \"ac-btn-cyan\",\n secondary: \"ac-btn-secondary\",\n success: \"ac-btn-green\",\n danger: \"ac-btn-danger\",\n ghost: \"ac-btn-ghost\",\n};\n\nconst getToneClass = (tone, isInteractive) => {\n if (tone === \"subtle\") {\n return isInteractive\n ? \"border border-border text-fg-muted hover:text-body hover:border-fg-muted\"\n : \"border border-border text-fg-muted\";\n }\n if (tone === \"neutral\") {\n return isInteractive\n ? \"border border-border text-fg-muted hover:text-body hover:border-fg-muted\"\n : \"border border-border text-fg-muted\";\n }\n if (tone === \"warning\") {\n return isInteractive\n ? \"border border-yellow-500/35 text-status-warning-muted bg-yellow-500/10 hover:border-yellow-400/60 hover:text-status-warning hover:bg-yellow-500/15\"\n : \"border border-yellow-500/35 text-status-warning-muted bg-yellow-500/10\";\n }\n return kStaticToneClassByTone[tone] || kStaticToneClassByTone.primary;\n};\n\nconst kSizeClassBySize = {\n sm: \"h-7 text-xs leading-none px-2.5 py-1 rounded-lg\",\n md: \"h-9 text-sm font-medium leading-none px-4 rounded-xl\",\n lg: \"h-10 text-sm font-medium leading-none px-5 rounded-lg\",\n};\nconst kIconOnlySizeClassBySize = {\n sm: \"h-7 w-7 p-0 rounded-lg\",\n md: \"h-9 w-9 p-0 rounded-xl\",\n lg: \"h-10 w-10 p-0 rounded-lg\",\n};\n\nexport const ActionButton = ({\n onClick,\n type = \"button\",\n disabled = false,\n loading = false,\n tone = \"primary\",\n size = \"sm\",\n idleLabel = \"Action\",\n loadingLabel = \"Working...\",\n loadingMode = \"replace\",\n className = \"\",\n idleIcon = null,\n idleIconClassName = \"h-3 w-3\",\n iconOnly = false,\n title = \"\",\n ariaLabel = \"\",\n}) => {\n const isDisabled = disabled || loading;\n const isInteractive = !isDisabled;\n const toneClass = getToneClass(tone, isInteractive);\n const sizeClass = iconOnly\n ? kIconOnlySizeClassBySize[size] || kIconOnlySizeClassBySize.sm\n : kSizeClassBySize[size] || kSizeClassBySize.sm;\n const loadingClass = loading\n ? `cursor-not-allowed ${\n tone === \"warning\"\n ? \"opacity-90 animate-pulse shadow-[0_0_0_1px_rgba(234,179,8,0.22),0_0_18px_rgba(234,179,8,0.12)]\"\n : \"opacity-80\"\n }`\n : \"\";\n const spinnerSizeClass =\n size === \"md\" || size === \"lg\" ? \"h-4 w-4\" : \"h-3 w-3\";\n const isInlineLoading = loadingMode === \"inline\";\n const IdleIcon = idleIcon;\n const idleContent =\n iconOnly && IdleIcon\n ? html`<${IdleIcon} className=${idleIconClassName} />`\n : IdleIcon\n ? html`\n \n <${IdleIcon} className=${idleIconClassName} />\n ${idleLabel}\n \n `\n : idleLabel;\n const currentLabel = loading && !isInlineLoading ? loadingLabel : idleContent;\n\n return html`\n \n ${isInlineLoading\n ? html`\n \n ${currentLabel}\n ${loading\n ? html`\n \n <${LoadingSpinner} className=${spinnerSizeClass} />\n \n `\n : null}\n \n `\n : loading\n ? html`\n \n <${LoadingSpinner} className=${spinnerSizeClass} />\n ${currentLabel}\n \n `\n : currentLabel}\n \n `;\n};\n" }, { "path": "lib/public/js/components/add-channel-menu.js", "content": "import { h } from \"preact\";\nimport htm from \"htm\";\nimport { ActionButton } from \"./action-button.js\";\nimport { AddLineIcon } from \"./icons.js\";\nimport { OverflowMenu, OverflowMenuItem } from \"./overflow-menu.js\";\n\nconst html = htm.bind(h);\n\nexport const AddChannelMenu = ({\n open = false,\n onClose = () => {},\n onToggle = () => {},\n triggerDisabled = false,\n channelIds = [],\n getChannelMeta = () => ({ label: \"Channel\", iconSrc: \"\" }),\n isChannelDisabled = () => false,\n onSelectChannel = () => {},\n}) => html`\n <${OverflowMenu}\n open=${open}\n ariaLabel=\"Add channel\"\n title=\"Add channel\"\n onClose=${onClose}\n onToggle=${onToggle}\n renderTrigger=${({ onToggle: handleToggle, ariaLabel, title }) => html`\n <${ActionButton}\n onClick=${handleToggle}\n disabled=${triggerDisabled}\n loading=${false}\n loadingMode=\"inline\"\n tone=\"subtle\"\n size=\"sm\"\n idleLabel=\"Add channel\"\n loadingLabel=\"Opening...\"\n idleIcon=${AddLineIcon}\n idleIconClassName=\"h-3.5 w-3.5\"\n iconOnly=${true}\n title=${title}\n ariaLabel=${ariaLabel}\n />\n `}\n >\n ${channelIds.map((channelId) => {\n const channelMeta = getChannelMeta(channelId);\n const disabled = !!isChannelDisabled(channelId);\n return html`\n <${OverflowMenuItem}\n key=${channelId}\n iconSrc=${channelMeta.iconSrc}\n disabled=${disabled}\n onClick=${() => onSelectChannel(channelId)}\n >\n ${channelMeta.label}\n \n `;\n })}\n \n`;\n\n" }, { "path": "lib/public/js/components/agent-send-modal.js", "content": "import { h } from \"preact\";\nimport { useEffect, useState } from \"preact/hooks\";\nimport htm from \"htm\";\nimport { ModalShell } from \"./modal-shell.js\";\nimport { ActionButton } from \"./action-button.js\";\nimport { PageHeader } from \"./page-header.js\";\nimport { CloseIcon } from \"./icons.js\";\nimport { SessionSelectField } from \"./session-select-field.js\";\nimport { useAgentSessions } from \"../hooks/useAgentSessions.js\";\n\nconst html = htm.bind(h);\n\nexport const AgentSendModal = ({\n visible = false,\n title = \"Send to agent\",\n messageLabel = \"Message\",\n messageRows = 8,\n initialMessage = \"\",\n resetKey = \"\",\n submitLabel = \"Send message\",\n loadingLabel = \"Sending...\",\n cancelLabel = \"Cancel\",\n onClose = () => {},\n onSubmit = async () => true,\n sessionFilter = undefined,\n}) => {\n const {\n sessions,\n selectedSessionKey,\n setSelectedSessionKey,\n selectedSession,\n loading: loadingSessions,\n error: loadError,\n } = useAgentSessions({ enabled: visible, filter: sessionFilter });\n const [messageText, setMessageText] = useState(\"\");\n const [sending, setSending] = useState(false);\n\n useEffect(() => {\n if (!visible) return;\n setMessageText(String(initialMessage || \"\"));\n }, [visible, initialMessage, resetKey]);\n\n const handleSend = async () => {\n if (!selectedSession || sending) return;\n const trimmedMessage = String(messageText || \"\").trim();\n if (!trimmedMessage) return;\n setSending(true);\n try {\n const shouldClose = await onSubmit({\n selectedSession,\n selectedSessionKey,\n message: trimmedMessage,\n });\n if (shouldClose !== false) {\n onClose();\n }\n } finally {\n setSending(false);\n }\n };\n\n return html`\n <${ModalShell}\n visible=${visible}\n onClose=${() => {\n if (sending) return;\n onClose();\n }}\n panelClassName=\"bg-modal border border-border rounded-xl p-5 max-w-lg w-full space-y-4\"\n >\n <${PageHeader}\n title=${title}\n actions=${html`\n {\n if (sending) return;\n onClose();\n }}\n class=\"h-8 w-8 inline-flex items-center justify-center rounded-lg ac-btn-secondary\"\n aria-label=\"Close modal\"\n >\n <${CloseIcon} className=\"w-3.5 h-3.5 text-body\" />\n \n `}\n />\n <${SessionSelectField}\n label=\"Send to session\"\n sessions=${sessions}\n selectedSessionKey=${selectedSessionKey}\n onChangeSessionKey=${setSelectedSessionKey}\n disabled=${loadingSessions || sending}\n loading=${loadingSessions}\n error=${loadError}\n emptyOptionLabel=\"No sessions available\"\n />\n
\n \n \n setMessageText(String(event.currentTarget?.value || \"\"))}\n disabled=${sending}\n rows=${messageRows}\n class=\"w-full bg-field border border-border rounded-lg px-3 py-2 text-xs text-body focus:border-fg-muted font-mono leading-5\"\n >\n
\n
\n <${ActionButton}\n onClick=${onClose}\n disabled=${sending}\n tone=\"secondary\"\n size=\"md\"\n idleLabel=${cancelLabel}\n />\n <${ActionButton}\n onClick=${handleSend}\n disabled=${!selectedSession || loadingSessions || !!loadError || !String(messageText || \"\").trim()}\n loading=${sending}\n tone=\"primary\"\n size=\"md\"\n idleLabel=${submitLabel}\n loadingLabel=${loadingLabel}\n />\n
\n \n `;\n};\n" }, { "path": "lib/public/js/components/agents-tab/agent-bindings-section/channel-item-trailing.js", "content": "import { h } from \"preact\";\nimport htm from \"htm\";\nimport { Badge } from \"../../badge.js\";\nimport { ChannelAccountStatusBadge } from \"../../channel-account-status-badge.js\";\nimport { OverflowMenu, OverflowMenuItem } from \"../../overflow-menu.js\";\n\nconst html = htm.bind(h);\n\nexport const ChannelItemTrailing = ({\n item = {},\n menuOpenId = \"\",\n setMenuOpenId = () => {},\n openDeleteChannelDialog = () => {},\n openEditChannelModal = () => {},\n requestBindAccount = () => {},\n onSetLocation = () => {},\n}) => {\n const {\n accountData = {},\n accountId = \"\",\n accountStatusInfo = {},\n canNavigateToOwnerAgent = false,\n channel = \"\",\n ownerAgentId = \"\",\n ownerAgentName = \"\",\n isAvailable = false,\n isOwned = false,\n } = item;\n\n let statusTrailing = null;\n if (isOwned) {\n statusTrailing =\n accountStatusInfo?.status === \"paired\"\n ? html`<${ChannelAccountStatusBadge}\n status=${accountStatusInfo?.status}\n ownerAgentName=${ownerAgentName}\n showAgentBadge=${true}\n channelId=${channel}\n pairedCount=${accountStatusInfo?.paired ?? 0}\n />`\n : html`<${ChannelAccountStatusBadge}\n status=${accountStatusInfo?.status}\n ownerAgentName=\"\"\n showAgentBadge=${false}\n channelId=${channel}\n pairedCount=${accountStatusInfo?.paired ?? 0}\n />`;\n } else if (isAvailable) {\n statusTrailing = html`\n {\n event.stopPropagation();\n requestBindAccount(accountData);\n }}\n class=\"text-xs px-2 py-1 rounded-lg ac-btn-ghost\"\n >\n Bind\n \n `;\n } else {\n statusTrailing = html`\n ${canNavigateToOwnerAgent\n ? html`\n {\n event.stopPropagation();\n onSetLocation(`/agents/${encodeURIComponent(ownerAgentId)}`);\n }}\n title=${`Open ${ownerAgentName}`}\n aria-label=${`Open ${ownerAgentName}`}\n >\n <${Badge} tone=\"neutral\">${ownerAgentName}\n \n `\n : html`<${Badge} tone=\"neutral\">${ownerAgentName || \"Bound elsewhere\"}`}\n `;\n }\n\n const showBindAction = accountData.isBoundElsewhere;\n const canEditOrDelete = !accountData.isBoundElsewhere;\n\n return html`\n
\n ${statusTrailing}\n <${OverflowMenu}\n open=${menuOpenId === `${channel}:${accountId}`}\n ariaLabel=\"Open channel actions\"\n title=\"Open channel actions\"\n onClose=${() => setMenuOpenId(\"\")}\n onToggle=${() =>\n setMenuOpenId((current) =>\n current === `${channel}:${accountId}`\n ? \"\"\n : `${channel}:${accountId}`,\n )}\n >\n ${canEditOrDelete\n ? html`\n <${OverflowMenuItem}\n onClick=${() => openEditChannelModal(accountData)}\n >\n Edit\n \n `\n : null}\n ${showBindAction\n ? html`\n <${OverflowMenuItem}\n onClick=${() => requestBindAccount(accountData)}\n >\n Bind\n \n `\n : null}\n ${canEditOrDelete\n ? html`\n <${OverflowMenuItem}\n className=\"text-status-error hover:text-status-error\"\n onClick=${() => openDeleteChannelDialog(accountData)}\n >\n Delete\n \n `\n : null}\n \n
\n `;\n};\n\nexport const ChannelCardItem = ({\n item = {},\n channelMeta = {},\n menuOpenId = \"\",\n setMenuOpenId = () => {},\n openDeleteChannelDialog = () => {},\n openEditChannelModal = () => {},\n requestBindAccount = () => {},\n onSetLocation = () => {},\n}) => {\n const canOpenWorkspace = !!item?.canOpenWorkspace;\n const accountId = String(item?.accountId || \"\").trim() || \"default\";\n return html`\n onSetLocation(`/telegram/${encodeURIComponent(accountId)}`)\n : undefined}\n >\n \n ${channelMeta?.iconSrc\n ? html`\n \n `\n : null}\n \n ${item?.label || channelMeta?.label || \"Channel\"}\n \n ${canOpenWorkspace\n ? html`\n Workspace\n \n \n \n `\n : null}\n \n \n <${ChannelItemTrailing}\n item=${item}\n menuOpenId=${menuOpenId}\n setMenuOpenId=${setMenuOpenId}\n openDeleteChannelDialog=${openDeleteChannelDialog}\n openEditChannelModal=${openEditChannelModal}\n requestBindAccount=${requestBindAccount}\n onSetLocation=${onSetLocation}\n />\n \n \n `;\n};\n" }, { "path": "lib/public/js/components/agents-tab/agent-bindings-section/helpers.js", "content": "import {\n isImplicitDefaultAccount,\n resolveChannelAccountLabel,\n} from \"../../../lib/channel-accounts.js\";\n\nexport const announceBindingsChanged = (agentId) => {\n window.dispatchEvent(\n new CustomEvent(\"alphaclaw:agent-bindings-changed\", {\n detail: { agentId: String(agentId || \"\").trim() },\n }),\n );\n};\n\nexport const announceRestartRequired = () => {\n window.dispatchEvent(new CustomEvent(\"alphaclaw:restart-required\"));\n};\n\nexport { resolveChannelAccountLabel };\n\nexport const getChannelItemSortRank = (item = {}) => {\n if (item.isAwaitingPairing) return 99;\n if (item.isOwned) return 0;\n if (item.isUnconfigured) return 3;\n if (item.isAvailable) return 1;\n return 2;\n};\n\nexport const getAccountStatusInfo = ({ statusInfo, accountId }) => {\n const normalizedAccountId = String(accountId || \"\").trim() || \"default\";\n const accountStatuses =\n statusInfo?.accounts && typeof statusInfo.accounts === \"object\"\n ? statusInfo.accounts\n : null;\n if (accountStatuses?.[normalizedAccountId]) {\n return accountStatuses[normalizedAccountId];\n }\n if (normalizedAccountId === \"default\" && statusInfo) {\n return statusInfo;\n }\n return null;\n};\n\nexport const getResolvedAccountStatusInfo = ({\n account,\n statusInfo,\n accountId,\n}) => {\n const accountStatus = String(account?.status || \"\").trim();\n if (accountStatus) {\n return {\n status: accountStatus,\n paired: Number(account?.paired || 0),\n };\n }\n return getAccountStatusInfo({ statusInfo, accountId });\n};\n\nexport { isImplicitDefaultAccount };\n\nexport const canAgentBindAccount = ({\n accountId,\n boundAgentId,\n agentId,\n isDefaultAgent,\n}) => {\n const normalizedBoundAgentId = String(boundAgentId || \"\").trim();\n if (normalizedBoundAgentId) {\n return normalizedBoundAgentId === String(agentId || \"\").trim();\n }\n if (isImplicitDefaultAccount({ accountId, boundAgentId })) {\n return !!isDefaultAgent;\n }\n return true;\n};\n" }, { "path": "lib/public/js/components/agents-tab/agent-bindings-section/index.js", "content": "import { h } from \"preact\";\nimport htm from \"htm\";\nimport { isChannelProviderDisabledForAdd } from \"../../../lib/channel-provider-availability.js\";\nimport { AddChannelMenu } from \"../../add-channel-menu.js\";\nimport { ActionButton } from \"../../action-button.js\";\nimport { ALL_CHANNELS, ChannelsCard, getChannelMeta } from \"../../channels.js\";\nimport { ConfirmDialog } from \"../../confirm-dialog.js\";\nimport { AddLineIcon } from \"../../icons.js\";\nimport { CreateChannelModal } from \"../create-channel-modal.js\";\nimport { ChannelCardItem } from \"./channel-item-trailing.js\";\nimport { useAgentBindings } from \"./use-agent-bindings.js\";\nimport { useChannelItems } from \"./use-channel-items.js\";\n\nconst html = htm.bind(h);\n\nexport const AgentBindingsSection = ({\n agent = {},\n agents = [],\n onSetLocation = () => {},\n}) => {\n const {\n agentId,\n agentNameMap,\n channelStatus,\n channels,\n configuredChannelMap,\n configuredChannels,\n createLoadingLabel,\n createProvider,\n defaultAgentId,\n deletingAccount,\n editingAccount,\n handleCreateChannel,\n handleDeleteChannel,\n handleQuickBind,\n handleUpdateChannel,\n isDefaultAgent,\n loading,\n menuOpenId,\n openCreateChannelModal,\n openDeleteChannelDialog,\n openEditChannelModal,\n pendingBindAccount,\n requestBindAccount,\n saving,\n setCreateProvider,\n setDeletingAccount,\n setEditingAccount,\n setMenuOpenId,\n setPendingBindAccount,\n setShowCreateModal,\n showCreateModal,\n } = useAgentBindings({ agent, agents });\n const { mergedChannelItems } = useChannelItems({\n agentId,\n agentNameMap,\n channelStatus,\n configuredChannelMap,\n configuredChannels,\n defaultAgentId,\n isDefaultAgent,\n });\n\n return html`\n
\n ${loading\n ? html`\n <${ChannelsCard}\n title=\"Channels\"\n items=${[]}\n loadingLabel=\"Loading channels...\"\n actions=${html`\n
\n <${ActionButton}\n onClick=${() => {}}\n disabled=${true}\n tone=\"subtle\"\n size=\"sm\"\n idleIcon=${AddLineIcon}\n idleIconClassName=\"h-3.5 w-3.5\"\n iconOnly=${true}\n title=\"Add channel\"\n ariaLabel=\"Add channel\"\n idleLabel=\"Add channel\"\n />\n
\n `}\n />\n `\n : html`\n
\n <${ChannelsCard}\n title=\"Channels\"\n items=${mergedChannelItems}\n loadingLabel=\"No channels assigned to this agent.\"\n renderItem=${({ item, channelMeta }) => {\n if (String(item?.id || \"\").trim() === \"__assigned_elsewhere_toggle\") {\n return null;\n }\n return html`<${ChannelCardItem}\n item=${item}\n channelMeta=${channelMeta}\n menuOpenId=${menuOpenId}\n setMenuOpenId=${setMenuOpenId}\n openDeleteChannelDialog=${openDeleteChannelDialog}\n openEditChannelModal=${openEditChannelModal}\n requestBindAccount=${requestBindAccount}\n onSetLocation=${onSetLocation}\n />`;\n }}\n actions=${html`\n <${AddChannelMenu}\n open=${menuOpenId === \"__create_channel\"}\n onClose=${() => setMenuOpenId(\"\")}\n onToggle=${() =>\n setMenuOpenId((current) =>\n current === \"__create_channel\" ? \"\" : \"__create_channel\",\n )}\n triggerDisabled=${saving}\n channelIds=${ALL_CHANNELS}\n getChannelMeta=${getChannelMeta}\n isChannelDisabled=${(channelId) =>\n isChannelProviderDisabledForAdd({\n configuredChannelMap,\n provider: channelId,\n })}\n onSelectChannel=${openCreateChannelModal}\n />\n `}\n />\n
\n `}\n <${CreateChannelModal}\n visible=${showCreateModal}\n loading=${saving}\n createLoadingLabel=${createLoadingLabel}\n agents=${agents}\n existingChannels=${channels}\n initialAgentId=${agentId}\n initialProvider=${createProvider}\n onClose=${() => {\n setShowCreateModal(false);\n setCreateProvider(\"\");\n }}\n onSubmit=${handleCreateChannel}\n />\n <${CreateChannelModal}\n visible=${!!editingAccount}\n loading=${saving}\n agents=${agents}\n existingChannels=${channels}\n mode=\"edit\"\n account=${editingAccount}\n initialAgentId=${String(editingAccount?.ownerAgentId || agentId || \"\").trim()}\n initialProvider=${String(editingAccount?.provider || \"\").trim()}\n onClose=${() => setEditingAccount(null)}\n onSubmit=${handleUpdateChannel}\n />\n <${ConfirmDialog}\n visible=${!!pendingBindAccount}\n title=${`Bind ${String(pendingBindAccount?.name || \"this channel\").trim()} to ${String(agent?.name || agentId).trim()}?`}\n message=\"\"\n details=${pendingBindAccount\n ? html`\n

\n This will remove access for ${String(\n pendingBindAccount?.ownerAgentName || \"the other agent\",\n ).trim()} to this channel.\n

\n `\n : null}\n confirmLabel=\"Bind channel\"\n confirmLoadingLabel=\"Binding...\"\n confirmTone=\"warning\"\n confirmLoading=${saving}\n onConfirm=${() => handleQuickBind(pendingBindAccount)}\n onCancel=${() => {\n if (saving) return;\n setPendingBindAccount(null);\n }}\n />\n <${ConfirmDialog}\n visible=${!!deletingAccount}\n title=\"Delete channel?\"\n message=${`Remove ${String(deletingAccount?.name || \"this channel\").trim()} from your configured channels?`}\n confirmLabel=\"Delete\"\n confirmLoadingLabel=\"Deleting...\"\n confirmTone=\"warning\"\n confirmLoading=${saving}\n onConfirm=${handleDeleteChannel}\n onCancel=${() => {\n if (saving) return;\n setDeletingAccount(null);\n }}\n />\n
\n `;\n};\n" }, { "path": "lib/public/js/components/agents-tab/agent-bindings-section/use-agent-bindings.js", "content": "import {\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from \"preact/hooks\";\nimport {\n deleteChannelAccount,\n fetchChannelAccounts,\n fetchStatus,\n updateChannelAccount,\n} from \"../../../lib/api.js\";\nimport { createChannelAccountWithProgress } from \"../../../lib/channel-create-operation.js\";\nimport { showToast } from \"../../toast.js\";\nimport { announceBindingsChanged, announceRestartRequired } from \"./helpers.js\";\n\nexport const useAgentBindings = ({ agent = {}, agents = [] }) => {\n const [channels, setChannels] = useState([]);\n const [channelStatus, setChannelStatus] = useState({});\n const [loading, setLoading] = useState(true);\n const [saving, setSaving] = useState(false);\n const [createLoadingLabel, setCreateLoadingLabel] = useState(\"Creating...\");\n const [showCreateModal, setShowCreateModal] = useState(false);\n const [createProvider, setCreateProvider] = useState(\"\");\n const [menuOpenId, setMenuOpenId] = useState(\"\");\n const [editingAccount, setEditingAccount] = useState(null);\n const [deletingAccount, setDeletingAccount] = useState(null);\n const [pendingBindAccount, setPendingBindAccount] = useState(null);\n\n const agentId = String(agent?.id || \"\").trim();\n const isDefaultAgent = !!agent?.default;\n const defaultAgentId = useMemo(\n () => String(agents.find((entry) => entry?.default)?.id || \"\").trim(),\n [agents],\n );\n const agentNameMap = useMemo(\n () =>\n new Map(\n agents.map((entry) => [\n String(entry?.id || \"\").trim(),\n String(entry?.name || \"\").trim() || String(entry?.id || \"\").trim(),\n ]),\n ),\n [agents],\n );\n\n const load = useCallback(\n async ({ includeStatus = true } = {}) => {\n setLoading(true);\n try {\n const requests = [\n fetchChannelAccounts(),\n includeStatus ? fetchStatus() : Promise.resolve(null),\n ];\n const [channelsResult, statusResult] = await Promise.all(requests);\n setChannels(\n Array.isArray(channelsResult?.channels) ? channelsResult.channels : [],\n );\n if (includeStatus && statusResult) {\n setChannelStatus(statusResult?.channels || {});\n }\n } finally {\n setLoading(false);\n }\n },\n [],\n );\n\n useEffect(() => {\n if (!agentId) return;\n load().catch(() => {});\n }, [agentId, load]);\n\n useEffect(() => {\n const handlePairingsChanged = (event) => {\n const changedAgentId = String(event?.detail?.agentId || \"\").trim();\n if (changedAgentId && changedAgentId !== agentId) return;\n load({ includeStatus: true }).catch(() => {});\n };\n window.addEventListener(\"alphaclaw:pairings-changed\", handlePairingsChanged);\n return () => {\n window.removeEventListener(\n \"alphaclaw:pairings-changed\",\n handlePairingsChanged,\n );\n };\n }, [agentId, load]);\n\n const configuredChannels = useMemo(\n () =>\n channels.filter(\n (entry) =>\n String(entry?.channel || \"\").trim() &&\n Array.isArray(entry?.accounts) &&\n entry.accounts.length > 0,\n ),\n [channels],\n );\n\n const configuredChannelMap = useMemo(\n () =>\n new Map(\n configuredChannels.map((entry) => [\n String(entry.channel || \"\").trim(),\n entry,\n ]),\n ),\n [configuredChannels],\n );\n\n const openCreateChannelModal = (channelId = \"\") => {\n setMenuOpenId(\"\");\n setCreateProvider(String(channelId || \"\").trim());\n setShowCreateModal(true);\n };\n\n const openEditChannelModal = (account) => {\n setMenuOpenId(\"\");\n setEditingAccount(account);\n };\n\n const openDeleteChannelDialog = (account) => {\n setMenuOpenId(\"\");\n setDeletingAccount(account);\n };\n\n const handleCreateChannel = async (payload) => {\n setSaving(true);\n setCreateLoadingLabel(\"Creating...\");\n try {\n const result = await createChannelAccountWithProgress({\n payload,\n onPhase: (label) => {\n setCreateLoadingLabel(String(label || \"\").trim() || \"Creating...\");\n },\n });\n announceBindingsChanged(\n String(result?.binding?.agentId || payload.agentId || \"\").trim(),\n );\n showToast(\"Channel added\", \"success\");\n await load({ includeStatus: false });\n setShowCreateModal(false);\n setCreateProvider(\"\");\n } catch (error) {\n showToast(error.message || \"Could not add channel\", \"error\");\n } finally {\n setSaving(false);\n setCreateLoadingLabel(\"Creating...\");\n }\n };\n\n const handleUpdateChannel = async (payload) => {\n setSaving(true);\n try {\n const result = await updateChannelAccount(payload);\n setEditingAccount(null);\n announceBindingsChanged(String(payload.agentId || \"\").trim());\n showToast(\"Channel updated\", \"success\");\n if (result?.restartRequired) {\n announceRestartRequired();\n }\n await load();\n } catch (error) {\n showToast(error.message || \"Could not update channel\", \"error\");\n } finally {\n setSaving(false);\n }\n };\n\n const handleDeleteChannel = async () => {\n if (!deletingAccount) return;\n setSaving(true);\n try {\n await deleteChannelAccount({\n provider: deletingAccount.provider,\n accountId: deletingAccount.id,\n });\n setDeletingAccount(null);\n announceBindingsChanged(agentId);\n showToast(\"Channel deleted\", \"success\");\n await load({ includeStatus: false });\n } catch (error) {\n showToast(error.message || \"Could not delete channel\", \"error\");\n } finally {\n setSaving(false);\n }\n };\n\n const handleQuickBind = async (account) => {\n if (!account) return;\n setSaving(true);\n try {\n await updateChannelAccount({\n provider: account.provider,\n accountId: account.id,\n name: account.name,\n agentId,\n });\n setMenuOpenId(\"\");\n setPendingBindAccount(null);\n announceBindingsChanged(agentId);\n showToast(\"Channel bound\", \"success\");\n await load();\n } catch (error) {\n showToast(error.message || \"Could not bind channel\", \"error\");\n } finally {\n setSaving(false);\n }\n };\n\n const requestBindAccount = (account) => {\n if (!account) return;\n const ownerAgentId = String(account?.ownerAgentId || \"\").trim();\n const ownerAgentName = String(account?.ownerAgentName || \"\").trim();\n if (ownerAgentId && ownerAgentId !== agentId && ownerAgentName) {\n setMenuOpenId(\"\");\n setPendingBindAccount(account);\n return;\n }\n handleQuickBind(account);\n };\n\n return {\n agentId,\n agentNameMap,\n channelStatus,\n channels,\n configuredChannelMap,\n configuredChannels,\n createLoadingLabel,\n createProvider,\n defaultAgentId,\n deletingAccount,\n editingAccount,\n handleCreateChannel,\n handleDeleteChannel,\n handleQuickBind,\n handleUpdateChannel,\n isDefaultAgent,\n loading,\n menuOpenId,\n openCreateChannelModal,\n openDeleteChannelDialog,\n openEditChannelModal,\n pendingBindAccount,\n requestBindAccount,\n saving,\n setCreateProvider,\n setDeletingAccount,\n setEditingAccount,\n setMenuOpenId,\n setPendingBindAccount,\n setShowCreateModal,\n showCreateModal,\n };\n};\n" }, { "path": "lib/public/js/components/agents-tab/agent-bindings-section/use-channel-items.js", "content": "import { h } from \"preact\";\nimport { useEffect, useMemo, useState } from \"preact/hooks\";\nimport htm from \"htm\";\nimport {\n canAgentBindAccount,\n getChannelItemSortRank,\n getResolvedAccountStatusInfo,\n isImplicitDefaultAccount,\n resolveChannelAccountLabel,\n} from \"./helpers.js\";\n\nconst html = htm.bind(h);\n\nexport const useChannelItems = ({\n agentId = \"\",\n agentNameMap = new Map(),\n channelStatus = {},\n configuredChannelMap = new Map(),\n configuredChannels = [],\n defaultAgentId = \"\",\n isDefaultAgent = false,\n}) => {\n const [showAssignedElsewhere, setShowAssignedElsewhere] = useState(false);\n\n const channelItemData = useMemo(() => {\n const channelOrderMap = new Map(\n configuredChannels.map((entry, index) => [\n String(entry?.channel || \"\").trim(),\n index,\n ]),\n );\n const accountOrderMap = new Map(\n configuredChannels.flatMap((entry) =>\n (Array.isArray(entry?.accounts) ? entry.accounts : []).map(\n (account, accountIndex) => [\n `${String(entry?.channel || \"\").trim()}:${String(account?.id || \"\").trim() || \"default\"}`,\n accountIndex,\n ],\n ),\n ),\n );\n const channelIds = Array.from(\n new Set([\n ...configuredChannels.map((entry) => String(entry.channel || \"\").trim()),\n ]),\n ).filter(Boolean);\n\n return channelIds\n .flatMap((channelId) => {\n const configuredChannel = configuredChannelMap.get(channelId);\n const statusInfo = channelStatus?.[channelId] || null;\n const accounts = Array.isArray(configuredChannel?.accounts)\n ? configuredChannel.accounts\n : [];\n\n if (!configuredChannel && !statusInfo) return [];\n\n return accounts.map((account) => {\n const accountId = String(account?.id || \"\").trim() || \"default\";\n const boundAgentId = String(account?.boundAgentId || \"\").trim();\n const accountStatusInfo = getResolvedAccountStatusInfo({\n account,\n statusInfo,\n accountId,\n });\n const isImplicitDefaultOwned =\n isDefaultAgent &&\n isImplicitDefaultAccount({ accountId, boundAgentId });\n const isOwned = boundAgentId === agentId || isImplicitDefaultOwned;\n const isImplicitDefaultElsewhere =\n !isDefaultAgent &&\n isImplicitDefaultAccount({ accountId, boundAgentId });\n const isAvailable = canAgentBindAccount({\n accountId,\n boundAgentId,\n agentId,\n isDefaultAgent,\n });\n const ownerAgentId =\n boundAgentId ||\n (isImplicitDefaultAccount({ accountId, boundAgentId })\n ? defaultAgentId\n : \"\");\n const ownerAgentName = String(\n agentNameMap.get(ownerAgentId) || ownerAgentId || \"\",\n ).trim();\n const canNavigateToOwnerAgent =\n !!ownerAgentId && ownerAgentId !== agentId && !!ownerAgentName;\n const canOpenWorkspace =\n channelId === \"telegram\" &&\n isOwned &&\n accountStatusInfo?.status === \"paired\";\n\n const accountData = {\n id: accountId,\n provider: channelId,\n name: resolveChannelAccountLabel({ channelId, account }),\n rawName: String(account?.name || \"\").trim(),\n ownerAgentId,\n ownerAgentName,\n boundAgentId,\n isOwned,\n envKey: String(account?.envKey || \"\").trim(),\n token: String(account?.token || \"\").trim(),\n isAvailable,\n isBoundElsewhere:\n !isOwned &&\n (!isAvailable || isImplicitDefaultElsewhere || !!ownerAgentId),\n };\n\n return {\n id: `${channelId}:${accountId}`,\n channel: channelId,\n accountId,\n channelOrder: Number(channelOrderMap.get(channelId) ?? 9999),\n accountOrder: Number(\n accountOrderMap.get(`${channelId}:${accountId}`) ?? 9999,\n ),\n label: resolveChannelAccountLabel({ channelId, account }),\n isAwaitingPairing: accountStatusInfo?.status !== \"paired\",\n canOpenWorkspace,\n canNavigateToOwnerAgent,\n ownerAgentId,\n ownerAgentName,\n accountStatusInfo,\n accountData,\n isOwned,\n isAvailable,\n dimmedLabel: accountData.isBoundElsewhere,\n isBoundElsewhere: accountData.isBoundElsewhere,\n };\n });\n })\n .filter(Boolean)\n .sort((a, b) => {\n const rankDiff = getChannelItemSortRank(a) - getChannelItemSortRank(b);\n if (rankDiff !== 0) return rankDiff;\n const channelOrderDiff =\n Number(a?.channelOrder ?? 9999) - Number(b?.channelOrder ?? 9999);\n if (channelOrderDiff !== 0) return channelOrderDiff;\n const accountOrderDiff =\n Number(a?.accountOrder ?? 9999) - Number(b?.accountOrder ?? 9999);\n if (accountOrderDiff !== 0) return accountOrderDiff;\n return String(a?.label || \"\").localeCompare(String(b?.label || \"\"));\n });\n }, [\n agentId,\n agentNameMap,\n channelStatus,\n configuredChannelMap,\n configuredChannels,\n defaultAgentId,\n isDefaultAgent,\n ]);\n\n const visibleChannelItems = channelItemData.filter(\n (item) => !item?.isBoundElsewhere,\n );\n const assignedElsewhereItems = channelItemData.filter(\n (item) => !!item?.isBoundElsewhere,\n );\n\n useEffect(() => {\n if (assignedElsewhereItems.length === 0) {\n setShowAssignedElsewhere(false);\n return;\n }\n if (visibleChannelItems.length === 0) {\n setShowAssignedElsewhere(true);\n }\n }, [agentId, assignedElsewhereItems.length, visibleChannelItems.length]);\n\n const mergedChannelItems = useMemo(() => {\n const baseItems = [...visibleChannelItems];\n if (assignedElsewhereItems.length === 0) return baseItems;\n baseItems.push({\n id: \"__assigned_elsewhere_toggle\",\n label: html`\n \n ▼\n Assigned elsewhere\n \n `,\n labelClassName: \"text-xs\",\n clickable: true,\n onClick: () => setShowAssignedElsewhere((current) => !current),\n dimmedLabel: true,\n trailing: html`\n \n \n ${assignedElsewhereItems.length}\n \n \n `,\n });\n if (showAssignedElsewhere) {\n baseItems.push(...assignedElsewhereItems);\n }\n return baseItems;\n }, [assignedElsewhereItems, showAssignedElsewhere, visibleChannelItems]);\n\n return {\n mergedChannelItems,\n };\n};\n" }, { "path": "lib/public/js/components/agents-tab/agent-detail-panel.js", "content": "import { h } from \"preact\";\nimport { useState, useCallback, useMemo } from \"preact/hooks\";\nimport htm from \"htm\";\nimport { ActionButton } from \"../action-button.js\";\nimport { Badge } from \"../badge.js\";\nimport { PillTabs } from \"../pill-tabs.js\";\nimport { PopActions } from \"../pop-actions.js\";\nimport { AgentOverview } from \"./agent-overview/index.js\";\nimport { AgentToolsPanel } from \"./agent-tools/index.js\";\nimport { useAgentTools } from \"./agent-tools/use-agent-tools.js\";\n\nconst html = htm.bind(h);\n\nconst kDetailTabs = [\n { label: \"Overview\", value: \"overview\" },\n { label: \"Tools\", value: \"tools\" },\n];\n\nconst PencilIcon = ({ className = \"w-3.5 h-3.5\" }) => html`\n \n \n \n`;\n\nexport const AgentDetailPanel = ({\n agent = null,\n agents = [],\n activeTab = \"overview\",\n saving = false,\n onUpdateAgent = async () => {},\n onSetLocation = () => {},\n onSelectTab = () => {},\n onEdit = () => {},\n onDelete = () => {},\n onSetDefault = () => {},\n onOpenWorkspace = () => {},\n}) => {\n const tools = useAgentTools({ agent: agent || {} });\n const [savingTools, setSavingTools] = useState(false);\n\n const handleSaveTools = useCallback(async () => {\n if (!agent) return;\n setSavingTools(true);\n try {\n const nextAgent = await onUpdateAgent(\n agent.id,\n { tools: tools.toolsConfig },\n \"Tool access updated\",\n );\n tools.markSaved(nextAgent?.tools || tools.toolsConfig);\n } catch {\n // toast handled by parent\n } finally {\n setSavingTools(false);\n }\n }, [agent, tools.toolsConfig, tools.markSaved, onUpdateAgent]);\n\n const isSaving = saving || savingTools;\n\n const toolsSummary = useMemo(() => ({\n profile: tools.profile,\n enabledCount: (tools.toolStates || []).filter((t) => t.enabled).length,\n totalCount: (tools.toolStates || []).length,\n }), [tools.profile, tools.toolStates]);\n\n if (!agent) {\n return html`\n
\n
\n Select an agent to view details\n
\n
\n `;\n }\n\n return html`\n
\n
\n
\n
\n
\n
\n \n ${agent.name || agent.id}\n \n onEdit(agent)}\n title=\"Edit agent name\"\n >\n <${PencilIcon} />\n \n ${agent.default\n ? html`<${Badge} tone=\"cyan\">Default`\n : null}\n
\n
\n ${agent.id}\n
\n
\n <${PopActions} visible=${tools.dirty}>\n <${ActionButton}\n onClick=${tools.reset}\n disabled=${isSaving}\n tone=\"secondary\"\n size=\"sm\"\n idleLabel=\"Cancel\"\n className=\"text-xs\"\n />\n <${ActionButton}\n onClick=${handleSaveTools}\n disabled=${isSaving}\n loading=${isSaving}\n loadingMode=\"inline\"\n tone=\"primary\"\n size=\"sm\"\n idleLabel=\"Save changes\"\n loadingLabel=\"Saving…\"\n className=\"text-xs\"\n />\n \n
\n <${PillTabs}\n tabs=${kDetailTabs}\n activeTab=${activeTab}\n onSelectTab=${onSelectTab}\n className=\"flex items-center gap-2 pt-6\"\n />\n
\n
\n
\n
\n ${activeTab === \"overview\"\n ? html`\n <${AgentOverview}\n agent=${agent}\n agents=${agents}\n saving=${saving}\n toolsSummary=${toolsSummary}\n onUpdateAgent=${onUpdateAgent}\n onSetLocation=${onSetLocation}\n onOpenWorkspace=${onOpenWorkspace}\n onSwitchToModels=${() => onSetLocation(\"/models\")}\n onSwitchToTools=${() => onSelectTab(\"tools\")}\n onSetDefault=${onSetDefault}\n onDelete=${onDelete}\n />\n `\n : html`\n <${AgentToolsPanel}\n agent=${agent}\n tools=${tools}\n />\n `}\n
\n
\n
\n `;\n};\n" }, { "path": "lib/public/js/components/agents-tab/agent-identity-section.js", "content": "import { h } from \"preact\";\nimport { useEffect, useState } from \"preact/hooks\";\nimport htm from \"htm\";\nimport { ActionButton } from \"../action-button.js\";\n\nconst html = htm.bind(h);\n\nconst kPropertyRowClass =\n \"flex items-start justify-between gap-4 py-2.5 border-b border-border last:border-b-0\";\nconst kLabelClass = \"text-xs text-fg-muted shrink-0 w-28\";\nconst kValueClass = \"text-sm text-body text-right min-w-0 break-all\";\n\nconst normalizeIdentity = (identity = {}) => ({\n name: String(identity?.name || \"\").trim(),\n emoji: String(identity?.emoji || \"\").trim(),\n avatar: String(identity?.avatar || \"\").trim(),\n theme: String(identity?.theme || \"\").trim(),\n});\n\nexport const AgentIdentitySection = ({\n agent = {},\n saving = false,\n onUpdateAgent = async () => {},\n}) => {\n const [editing, setEditing] = useState(false);\n const [form, setForm] = useState(() => normalizeIdentity(agent.identity));\n const [error, setError] = useState(\"\");\n\n useEffect(() => {\n setEditing(false);\n setError(\"\");\n setForm(normalizeIdentity(agent.identity));\n }, [agent.id, agent.identity]);\n\n const identity = normalizeIdentity(agent.identity);\n\n const updateField = (key, value) => {\n setForm((current) => ({\n ...current,\n [key]: value,\n }));\n };\n\n const handleSave = async () => {\n setError(\"\");\n try {\n const nextIdentity = normalizeIdentity(form);\n await onUpdateAgent(String(agent.id || \"\").trim(), {\n identity: nextIdentity,\n });\n setEditing(false);\n } catch (nextError) {\n setError(nextError.message || \"Could not save identity\");\n }\n };\n\n const handleCancel = () => {\n setEditing(false);\n setError(\"\");\n setForm(normalizeIdentity(agent.identity));\n };\n\n return html`\n
\n
\n

Identity

\n ${editing\n ? html`\n
\n <${ActionButton}\n onClick=${handleCancel}\n disabled=${saving}\n tone=\"secondary\"\n size=\"sm\"\n idleLabel=\"Cancel\"\n />\n <${ActionButton}\n onClick=${handleSave}\n disabled=${saving}\n loading=${saving}\n tone=\"primary\"\n size=\"sm\"\n idleLabel=\"Save\"\n loadingLabel=\"Saving...\"\n />\n
\n `\n : html`\n <${ActionButton}\n onClick=${() => setEditing(true)}\n disabled=${saving}\n tone=\"secondary\"\n size=\"sm\"\n idleLabel=\"Edit identity\"\n />\n `}\n
\n\n ${editing\n ? html`\n
\n \n \n \n \n ${error ? html`

${error}

` : null}\n
\n `\n : html`\n
\n
\n Name\n \n ${identity.name || html`—`}\n \n
\n
\n Emoji\n \n ${identity.emoji || html`—`}\n \n
\n
\n Avatar\n \n ${identity.avatar || html`—`}\n \n
\n
\n Theme\n \n ${identity.theme || html`—`}\n \n
\n
\n `}\n
\n `;\n};\n" }, { "path": "lib/public/js/components/agents-tab/agent-overview/index.js", "content": "import { h } from \"preact\";\nimport htm from \"htm\";\nimport { ChannelOperationsPanel } from \"../../channel-operations-panel.js\";\nimport { ManageCard } from \"./manage-card.js\";\nimport { AgentModelCard } from \"./model-card.js\";\nimport { AgentToolsCard } from \"./tools-card.js\";\nimport { WorkspaceCard } from \"./workspace-card.js\";\n\nconst html = htm.bind(h);\n\nexport const AgentOverview = ({\n agent = {},\n agents = [],\n saving = false,\n toolsSummary = {},\n onUpdateAgent = async () => {},\n onSetLocation = () => {},\n onOpenWorkspace = () => {},\n onSwitchToModels = () => {},\n onSwitchToTools = () => {},\n onSetDefault = () => {},\n onDelete = () => {},\n}) => {\n const isMain = String(agent.id || \"\") === \"main\";\n const showManageSection = !agent.default || !isMain;\n\n return html`\n
\n <${WorkspaceCard}\n agent=${agent}\n onOpenWorkspace=${onOpenWorkspace}\n />\n <${AgentModelCard}\n agent=${agent}\n saving=${saving}\n onUpdateAgent=${onUpdateAgent}\n onSwitchToModels=${onSwitchToModels}\n />\n <${AgentToolsCard}\n profile=${toolsSummary.profile || \"full\"}\n enabledCount=${toolsSummary.enabledCount || 0}\n totalCount=${toolsSummary.totalCount || 0}\n onSwitchToTools=${onSwitchToTools}\n />\n <${ChannelOperationsPanel}\n agent=${agent}\n agents=${agents}\n onSetLocation=${onSetLocation}\n />\n ${showManageSection\n ? html`\n <${ManageCard}\n agent=${agent}\n saving=${saving}\n onSetDefault=${onSetDefault}\n onDelete=${onDelete}\n />\n `\n : null}\n
\n `;\n};\n" }, { "path": "lib/public/js/components/agents-tab/agent-overview/manage-card.js", "content": "import { h } from \"preact\";\nimport htm from \"htm\";\nimport { ActionButton } from \"../../action-button.js\";\n\nconst html = htm.bind(h);\n\nexport const ManageCard = ({\n agent = {},\n saving = false,\n onSetDefault = () => {},\n onDelete = () => {},\n}) => {\n const isMain = String(agent.id || \"\") === \"main\";\n\n return html`\n
\n

Manage

\n
\n ${!agent.default\n ? html`\n <${ActionButton}\n onClick=${() => onSetDefault(agent.id)}\n disabled=${saving}\n tone=\"secondary\"\n size=\"sm\"\n idleLabel=\"Set as default\"\n />\n `\n : null}\n ${!isMain\n ? html`\n <${ActionButton}\n onClick=${() => onDelete(agent)}\n disabled=${saving}\n tone=\"danger\"\n size=\"sm\"\n idleLabel=\"Delete agent\"\n />\n `\n : null}\n
\n
\n `;\n};\n" }, { "path": "lib/public/js/components/agents-tab/agent-overview/model-card.js", "content": "import { h } from \"preact\";\nimport htm from \"htm\";\nimport { Badge } from \"../../badge.js\";\nimport { LoadingSpinner } from \"../../loading-spinner.js\";\nimport { OverflowMenu, OverflowMenuItem } from \"../../overflow-menu.js\";\nimport {\n getModelDisplayLabel,\n SearchableModelPicker,\n} from \"../../models-tab/model-picker.js\";\nimport { useModelCard } from \"./use-model-card.js\";\n\nconst html = htm.bind(h);\n\nexport const AgentModelCard = ({\n agent = {},\n saving = false,\n onUpdateAgent = async () => {},\n onSwitchToModels = () => {},\n}) => {\n const {\n authorizedModelOptions,\n canEditModel,\n effectiveModel,\n effectiveModelEntry,\n handleClearModelOverride,\n handleSelectModel,\n hasDistinctModelOverride,\n loading,\n menuOpen,\n modelEntries,\n popularModels,\n remainingModelOptions,\n setMenuOpen,\n updatingModel,\n } = useModelCard({\n agent,\n onUpdateAgent,\n });\n\n return html`\n
\n
\n

Model

\n ${loading\n ? null\n : html`\n
\n ${effectiveModelEntry && !hasDistinctModelOverride\n ? html`<${Badge} tone=\"neutral\">Inherited`\n : null}\n <${OverflowMenu}\n open=${menuOpen}\n ariaLabel=\"Open model actions\"\n title=\"Open model actions\"\n onClose=${() => setMenuOpen(false)}\n onToggle=${() => setMenuOpen((current) => !current)}\n >\n ${hasDistinctModelOverride\n ? html`\n <${OverflowMenuItem}\n onClick=${() => {\n setMenuOpen(false);\n handleClearModelOverride();\n }}\n >\n Inherit from defaults\n \n `\n : null}\n <${OverflowMenuItem}\n onClick=${() => {\n setMenuOpen(false);\n onSwitchToModels();\n }}\n >\n Manage models\n \n \n
\n `}\n
\n ${loading\n ? html`\n
\n <${LoadingSpinner} className=\"h-4 w-4\" />\n Loading model settings...\n
\n `\n : modelEntries.length === 0\n ? html`

\n No authorized models available yet. Add one from the Models tab\n first.\n

`\n : html`\n
\n ${modelEntries.map(\n (entry) => html`\n \n
\n \n ${getModelDisplayLabel(entry)}\n \n ${entry.key === effectiveModel\n ? html`<${Badge} tone=\"cyan\">Primary`\n : html`\n handleSelectModel(entry.key)}\n class=\"text-xs px-2 py-0.5 rounded-full text-fg-muted hover:text-body hover:bg-surface\"\n >\n Set primary\n \n `}\n
\n
\n `,\n )}\n
\n `}\n ${loading\n ? null\n : remainingModelOptions.length > 0\n ? html`\n
\n <${SearchableModelPicker}\n options=${remainingModelOptions}\n popularModels=${popularModels}\n placeholder=${authorizedModelOptions.length > 0\n ? \"Add model...\"\n : \"No authorized models available\"}\n onSelect=${handleSelectModel}\n disabled=${saving ||\n updatingModel ||\n !canEditModel ||\n remainingModelOptions.length === 0}\n />\n ${authorizedModelOptions.length === 0\n ? html`\n

\n Add and authorize models from the Models tab before\n assigning one here.\n

\n `\n : html`\n

\n Only models that already have working auth are\n available here.\n

\n `}\n
\n `\n : null}\n \n `;\n};\n" }, { "path": "lib/public/js/components/agents-tab/agent-overview/tools-card.js", "content": "import { h } from \"preact\";\nimport htm from \"htm\";\nimport { kProfileLabels } from \"../agent-tools/tool-catalog.js\";\n\nconst html = htm.bind(h);\n\nexport const AgentToolsCard = ({\n profile = \"full\",\n enabledCount = 0,\n totalCount = 0,\n onSwitchToTools = () => {},\n}) => {\n const profileLabel = kProfileLabels[profile] || profile;\n\n return html`\n
\n

Tools

\n {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n onSwitchToTools();\n }\n }}\n >\n ${profileLabel}\n \n \n ${enabledCount}/${totalCount} enabled\n \n \n \n \n \n
\n \n `;\n};\n" }, { "path": "lib/public/js/components/agents-tab/agent-overview/use-model-card.js", "content": "import { useEffect, useMemo, useState } from \"preact/hooks\";\nimport { useModels } from \"../../models-tab/use-models.js\";\nimport {\n buildProviderHasAuth,\n buildSyntheticModelEntry,\n getModelCatalogProvider,\n getModelsTabAuthProvider,\n getProviderSortIndex,\n} from \"../../models-tab/model-picker.js\";\n\nconst resolveModelDisplay = (model) => {\n if (!model) return null;\n if (typeof model === \"string\") return model;\n return model.primary || null;\n};\n\nconst resolveCatalogModel = (catalog = [], modelKey = \"\") =>\n catalog.find(\n (model) =>\n String(model?.key || \"\").trim() === String(modelKey || \"\").trim(),\n ) || null;\n\nexport const useModelCard = ({\n agent = {},\n onUpdateAgent = async () => {},\n}) => {\n const [updatingModel, setUpdatingModel] = useState(false);\n const [menuOpen, setMenuOpen] = useState(false);\n const {\n catalog,\n primary: defaultPrimaryModel,\n configuredModels,\n authProfiles,\n codexStatus,\n loading: loadingModels,\n ready: modelsReady,\n } = useModels();\n\n const explicitModel = resolveModelDisplay(agent.model);\n const effectiveModel = explicitModel || defaultPrimaryModel || \"\";\n const hasDistinctModelOverride =\n !!explicitModel &&\n String(explicitModel).trim() !== String(defaultPrimaryModel || \"\").trim();\n\n const providerHasAuth = useMemo(\n () => buildProviderHasAuth({ authProfiles, codexStatus }),\n [authProfiles, codexStatus],\n );\n\n const authorizedModelOptions = useMemo(\n () =>\n Object.keys(configuredModels || {})\n .map(\n (modelKey) =>\n resolveCatalogModel(catalog, modelKey) ||\n buildSyntheticModelEntry(modelKey),\n )\n .filter((model) => {\n const provider = getModelsTabAuthProvider(model.key);\n return !!providerHasAuth[provider];\n })\n .sort((left, right) => {\n const providerCompare =\n getProviderSortIndex(getModelCatalogProvider(left)) -\n getProviderSortIndex(getModelCatalogProvider(right));\n if (providerCompare !== 0) return providerCompare;\n return String(left?.label || left?.key).localeCompare(\n String(right?.label || right?.key),\n );\n }),\n [catalog, configuredModels, providerHasAuth],\n );\n\n const effectiveModelEntry = useMemo(\n () =>\n resolveCatalogModel(catalog, effectiveModel) ||\n (effectiveModel ? buildSyntheticModelEntry(effectiveModel) : null),\n [catalog, effectiveModel],\n );\n\n const popularModels = useMemo(\n () =>\n authorizedModelOptions.filter((model) => {\n const normalizedProvider = getModelCatalogProvider(model);\n return (\n normalizedProvider === \"anthropic\" || normalizedProvider === \"openai\"\n );\n }),\n [authorizedModelOptions],\n );\n\n const modelEntries = useMemo(() => {\n if (!effectiveModelEntry) return [];\n const currentKey = String(effectiveModelEntry?.key || \"\").trim();\n const rest = authorizedModelOptions.filter(\n (model) => String(model?.key || \"\").trim() !== currentKey,\n );\n return [effectiveModelEntry, ...rest];\n }, [authorizedModelOptions, effectiveModelEntry]);\n\n const modelEntryKeySet = useMemo(\n () =>\n new Set(\n modelEntries\n .map((entry) => String(entry?.key || \"\").trim())\n .filter(Boolean),\n ),\n [modelEntries],\n );\n\n const remainingModelOptions = useMemo(\n () =>\n authorizedModelOptions.filter(\n (model) => !modelEntryKeySet.has(String(model?.key || \"\").trim()),\n ),\n [authorizedModelOptions, modelEntryKeySet],\n );\n\n const handleSelectModel = async (modelKey) => {\n const normalizedModelKey = String(modelKey || \"\").trim();\n if (!normalizedModelKey || normalizedModelKey === effectiveModel) return;\n setUpdatingModel(true);\n try {\n await onUpdateAgent(\n String(agent.id || \"\").trim(),\n {\n model: { primary: normalizedModelKey },\n },\n \"Agent model updated\",\n );\n } finally {\n setUpdatingModel(false);\n }\n };\n\n const handleClearModelOverride = async () => {\n if (!hasDistinctModelOverride) return;\n setUpdatingModel(true);\n try {\n await onUpdateAgent(\n String(agent.id || \"\").trim(),\n {\n model: null,\n },\n \"Agent model reset to default\",\n );\n } finally {\n setUpdatingModel(false);\n }\n };\n\n return {\n authorizedModelOptions,\n canEditModel: modelsReady && !loadingModels,\n effectiveModel,\n effectiveModelEntry,\n handleClearModelOverride,\n handleSelectModel,\n hasDistinctModelOverride,\n loading: !modelsReady || loadingModels,\n menuOpen,\n modelEntries,\n popularModels,\n remainingModelOptions,\n setMenuOpen,\n updatingModel,\n };\n};\n" }, { "path": "lib/public/js/components/agents-tab/agent-overview/use-workspace-card.js", "content": "import { useEffect, useState } from \"preact/hooks\";\nimport { fetchAgentWorkspaceSize } from \"../../../lib/api.js\";\n\nexport const useWorkspaceCard = ({ agent = {} }) => {\n const [workspaceSizeBytes, setWorkspaceSizeBytes] = useState(null);\n const [workspaceSizeExists, setWorkspaceSizeExists] = useState(true);\n const [loadingWorkspaceSize, setLoadingWorkspaceSize] = useState(false);\n\n useEffect(() => {\n let cancelled = false;\n const agentId = String(agent?.id || \"\").trim();\n const workspacePath = String(agent?.workspace || \"\").trim();\n if (!agentId || !workspacePath) {\n setWorkspaceSizeBytes(null);\n setWorkspaceSizeExists(true);\n setLoadingWorkspaceSize(false);\n return undefined;\n }\n setLoadingWorkspaceSize(true);\n fetchAgentWorkspaceSize(agentId)\n .then((result) => {\n if (cancelled) return;\n setWorkspaceSizeBytes(Number(result?.sizeBytes || 0));\n setWorkspaceSizeExists(result?.exists !== false);\n })\n .catch(() => {\n if (cancelled) return;\n setWorkspaceSizeBytes(null);\n setWorkspaceSizeExists(false);\n })\n .finally(() => {\n if (cancelled) return;\n setLoadingWorkspaceSize(false);\n });\n return () => {\n cancelled = true;\n };\n }, [agent?.id, agent?.workspace]);\n\n return {\n loadingWorkspaceSize,\n workspaceSizeBytes,\n workspaceSizeExists,\n };\n};\n" }, { "path": "lib/public/js/components/agents-tab/agent-overview/workspace-card.js", "content": "import { h } from \"preact\";\nimport htm from \"htm\";\nimport { formatBytes } from \"../../../lib/format.js\";\nimport { useWorkspaceCard } from \"./use-workspace-card.js\";\n\nconst html = htm.bind(h);\n\nexport const WorkspaceCard = ({\n agent = {},\n onOpenWorkspace = () => {},\n}) => {\n const {\n loadingWorkspaceSize,\n workspaceSizeBytes,\n workspaceSizeExists,\n } = useWorkspaceCard({ agent });\n\n return html`\n
\n

Workspace

\n ${agent.workspace\n ? html`\n \n onOpenWorkspace(agent.workspace)}\n >\n ${agent.workspace}\n \n
\n ${loadingWorkspaceSize\n ? \"Calculating size...\"\n : workspaceSizeBytes != null\n ? formatBytes(workspaceSizeBytes)\n : workspaceSizeExists\n ? \"Size unavailable\"\n : \"Workspace directory not found\"}\n
\n
\n `\n : html`

No workspace configured

`}\n \n `;\n};\n" }, { "path": "lib/public/js/components/agents-tab/agent-pairing-section.js", "content": "import { h } from \"preact\";\nimport {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"preact/hooks\";\nimport htm from \"htm\";\nimport { Pairings } from \"../pairings.js\";\nimport { usePolling } from \"../../hooks/usePolling.js\";\nimport {\n approvePairing,\n fetchAgentBindings,\n fetchChannelAccounts,\n fetchPairings,\n rejectPairing,\n} from \"../../lib/api.js\";\nimport { showToast } from \"../toast.js\";\nimport { useCachedFetch } from \"../../hooks/use-cached-fetch.js\";\n\nconst html = htm.bind(h);\n\nconst toOwnedAccountKey = (channel, accountId) => {\n const normalizedChannel = String(channel || \"\").trim();\n const normalizedAccountId = String(accountId || \"\").trim() || \"default\";\n return normalizedChannel ? `${normalizedChannel}:${normalizedAccountId}` : \"\";\n};\n\nconst announcePairingsChanged = (agentId) => {\n window.dispatchEvent(\n new CustomEvent(\"alphaclaw:pairings-changed\", {\n detail: { agentId: String(agentId || \"\").trim() },\n }),\n );\n};\n\nexport const AgentPairingSection = ({ agent = {} }) => {\n const [bindings, setBindings] = useState([]);\n const [channels, setChannels] = useState([]);\n const [loadingBindings, setLoadingBindings] = useState(true);\n const [pairingStatusRefreshing, setPairingStatusRefreshing] = useState(false);\n const pairingRefreshTimerRef = useRef(null);\n const pairingDelayedRefreshTimerRefs = useRef([]);\n const agentId = String(agent?.id || \"\").trim();\n const isDefaultAgent = !!agent?.default;\n const {\n data: bindingsPayload,\n loading: bindingsLoading,\n refresh: refreshBindingsPayload,\n } = useCachedFetch(\n `/api/agents/${encodeURIComponent(String(agentId || \"\"))}/bindings`,\n () => fetchAgentBindings(agent.id),\n {\n enabled: Boolean(agentId),\n maxAgeMs: 30000,\n },\n );\n const {\n data: channelsPayload,\n loading: channelsLoading,\n refresh: refreshChannelsPayload,\n } = useCachedFetch(\"/api/channels/accounts\", fetchChannelAccounts, {\n maxAgeMs: 30000,\n });\n\n const loadBindings = useCallback(async () => {\n setLoadingBindings(true);\n try {\n const [nextBindingsPayload, nextChannelsPayload] = await Promise.all([\n refreshBindingsPayload({ force: true }),\n refreshChannelsPayload({ force: true }),\n ]);\n setBindings(\n Array.isArray(nextBindingsPayload?.bindings)\n ? nextBindingsPayload.bindings\n : [],\n );\n setChannels(\n Array.isArray(nextChannelsPayload?.channels)\n ? nextChannelsPayload.channels\n : [],\n );\n } catch {\n setBindings([]);\n setChannels([]);\n } finally {\n setLoadingBindings(false);\n }\n }, [refreshBindingsPayload, refreshChannelsPayload]);\n\n useEffect(() => {\n setBindings(\n Array.isArray(bindingsPayload?.bindings) ? bindingsPayload.bindings : [],\n );\n setChannels(\n Array.isArray(channelsPayload?.channels) ? channelsPayload.channels : [],\n );\n setLoadingBindings(Boolean(bindingsLoading || channelsLoading));\n }, [bindingsLoading, bindingsPayload, channelsLoading, channelsPayload]);\n\n useEffect(() => {\n const handleBindingsChanged = (event) => {\n const changedAgentId = String(event?.detail?.agentId || \"\").trim();\n if (changedAgentId !== agentId) return;\n loadBindings();\n };\n window.addEventListener(\"alphaclaw:agent-bindings-changed\", handleBindingsChanged);\n return () => {\n window.removeEventListener(\"alphaclaw:agent-bindings-changed\", handleBindingsChanged);\n };\n }, [agentId, loadBindings]);\n useEffect(\n () => () => {\n if (pairingRefreshTimerRef.current) {\n clearTimeout(pairingRefreshTimerRef.current);\n }\n for (const timerId of pairingDelayedRefreshTimerRefs.current) {\n clearTimeout(timerId);\n }\n pairingDelayedRefreshTimerRefs.current = [];\n },\n [],\n );\n\n const ownedAccounts = useMemo(\n () => {\n const ownedAccountMap = new Map();\n for (const binding of bindings) {\n const channelId = String(binding?.match?.channel || \"\").trim();\n if (!channelId) continue;\n const accountId = String(binding?.match?.accountId || \"\").trim() || \"default\";\n const key = toOwnedAccountKey(channelId, accountId);\n if (!key) continue;\n ownedAccountMap.set(key, { channel: channelId, accountId });\n }\n for (const channel of channels) {\n const channelId = String(channel?.channel || \"\").trim();\n const accounts = Array.isArray(channel?.accounts) ? channel.accounts : [];\n const defaultAccount = accounts.find(\n (entry) => String(entry?.id || \"\").trim() === \"default\",\n );\n if (\n isDefaultAgent\n && channelId\n && defaultAccount\n && !String(defaultAccount?.boundAgentId || \"\").trim()\n ) {\n const key = toOwnedAccountKey(channelId, \"default\");\n ownedAccountMap.set(key, { channel: channelId, accountId: \"default\" });\n }\n }\n return Array.from(ownedAccountMap.values());\n },\n [bindings, channels, isDefaultAgent],\n );\n\n const boundChannels = useMemo(\n () => Array.from(new Set(ownedAccounts.map((entry) => entry.channel))).filter(Boolean),\n [ownedAccounts],\n );\n\n const ownedAccountKeySet = useMemo(\n () =>\n new Set(\n ownedAccounts\n .map((entry) => toOwnedAccountKey(entry.channel, entry.accountId))\n .filter(Boolean),\n ),\n [ownedAccounts],\n );\n\n const accountNameMap = useMemo(() => {\n const nextMap = new Map();\n for (const channel of channels) {\n const channelId = String(channel?.channel || \"\").trim();\n const accounts = Array.isArray(channel?.accounts) ? channel.accounts : [];\n for (const account of accounts) {\n const accountId = String(account?.id || \"\").trim() || \"default\";\n const key = toOwnedAccountKey(channelId, accountId);\n if (!key) continue;\n const configuredName = String(account?.name || \"\").trim();\n nextMap.set(key, configuredName || accountId);\n }\n }\n return nextMap;\n }, [channels]);\n\n const ownedChannelsStatus = useMemo(() => {\n const nextStatus = {};\n for (const entry of ownedAccounts) {\n const channelId = String(entry?.channel || \"\").trim();\n if (!channelId) continue;\n const key = toOwnedAccountKey(channelId, entry?.accountId);\n const account = channels\n .find((channel) => String(channel?.channel || \"\").trim() === channelId)\n ?.accounts?.find(\n (accountEntry) =>\n (String(accountEntry?.id || \"\").trim() || \"default\")\n === (String(entry?.accountId || \"\").trim() || \"default\"),\n );\n const status = String(account?.status || \"\").trim() || \"configured\";\n if (!nextStatus[channelId] || status !== \"paired\") {\n nextStatus[channelId] = {\n status: status === \"paired\" ? \"paired\" : \"configured\",\n accountName: accountNameMap.get(key) || \"\",\n };\n }\n }\n return nextStatus;\n }, [accountNameMap, channels, ownedAccounts]);\n\n const hasUnpaired = useMemo(\n () =>\n Object.values(ownedChannelsStatus).some(\n (entry) => String(entry?.status || \"\").trim() !== \"paired\",\n ),\n [ownedChannelsStatus],\n );\n\n const pairingsPoll = usePolling(\n async () => {\n const data = await fetchPairings();\n const pending = Array.isArray(data?.pending) ? data.pending : [];\n return pending\n .filter((entry) =>\n ownedAccountKeySet.has(\n toOwnedAccountKey(\n String(entry?.channel || \"\").trim(),\n String(entry?.accountId || \"\").trim() || \"default\",\n ),\n ),\n )\n .map((entry) => {\n const key = toOwnedAccountKey(entry?.channel, entry?.accountId);\n return {\n ...entry,\n accountName: accountNameMap.get(key) || \"\",\n };\n });\n },\n 3000,\n {\n enabled: ownedAccounts.length > 0,\n cacheKey: `/api/pairings?agent=${encodeURIComponent(agentId)}`,\n dedupeInFlight: true,\n },\n );\n\n const pending = pairingsPoll.data || [];\n const showPairings = hasUnpaired || pending.length > 0 || pairingStatusRefreshing;\n\n const refreshAfterPairingAction = useCallback(() => {\n setPairingStatusRefreshing(true);\n if (pairingRefreshTimerRef.current) {\n clearTimeout(pairingRefreshTimerRef.current);\n }\n pairingRefreshTimerRef.current = setTimeout(() => {\n setPairingStatusRefreshing(false);\n pairingRefreshTimerRef.current = null;\n }, 2800);\n for (const timerId of pairingDelayedRefreshTimerRefs.current) {\n clearTimeout(timerId);\n }\n pairingDelayedRefreshTimerRefs.current = [];\n const refresh = () => {\n pairingsPoll.refresh({ force: true });\n loadBindings();\n announcePairingsChanged(agentId);\n };\n refresh();\n pairingDelayedRefreshTimerRefs.current.push(setTimeout(refresh, 500));\n pairingDelayedRefreshTimerRefs.current.push(setTimeout(refresh, 2000));\n }, [agentId, loadBindings, pairingsPoll]);\n\n const handleApprove = async (id, channel, accountId = \"\") => {\n try {\n const result = await approvePairing(id, channel, accountId);\n if (!result.ok) throw new Error(result.error || \"Could not approve pairing\");\n refreshAfterPairingAction();\n } catch (err) {\n showToast(err.message || \"Could not approve pairing\", \"error\");\n throw err;\n }\n };\n\n const handleReject = async (id, channel, accountId = \"\") => {\n try {\n await rejectPairing(id, channel, accountId);\n refreshAfterPairingAction();\n } catch (err) {\n showToast(err.message || \"Could not reject pairing\", \"error\");\n throw err;\n }\n };\n\n if (loadingBindings) {\n return html`\n
\n

Pairing

\n

Loading pairing status...

\n
\n `;\n }\n\n if (!showPairings) return null;\n\n return html`\n <${Pairings}\n pending=${pending}\n channels=${ownedChannelsStatus}\n visible=${showPairings}\n pollingInFlight=${pairingsPoll.isPolling}\n statusRefreshing=${pairingStatusRefreshing}\n onApprove=${handleApprove}\n onReject=${handleReject}\n />\n `;\n};\n" }, { "path": "lib/public/js/components/agents-tab/agent-tools/index.js", "content": "import { h } from \"preact\";\nimport htm from \"htm\";\nimport { ToggleSwitch } from \"../../toggle-switch.js\";\nimport { InfoTooltip } from \"../../info-tooltip.js\";\nimport { SegmentedControl } from \"../../segmented-control.js\";\nimport { kSections, kToolProfiles, kProfileLabels } from \"./tool-catalog.js\";\n\nconst html = htm.bind(h);\n\nconst kProfileDescriptions = {\n minimal: \"Only session status — grant specific tools with alsoAllow\",\n messaging: \"Session access and messaging — ideal for notification agents\",\n coding: \"File I/O, shell, memory, sessions, cron, and image generation\",\n full: \"All tools enabled, no restrictions\",\n};\n\nconst kProfileOptions = kToolProfiles.map((p) => ({\n label: kProfileLabels[p],\n value: p,\n title: kProfileDescriptions[p],\n}));\n\nconst ToolRow = ({ tool, onToggle }) => html`\n
\n
\n
\n ${tool.label}\n ${tool.help\n ? html`<${InfoTooltip} text=${tool.help} widthClass=\"w-72\" />`\n : null}\n
\n ${tool.id}\n
\n <${ToggleSwitch}\n checked=${tool.enabled}\n onChange=${(checked) => onToggle(tool.id, checked)}\n label=${null}\n />\n
\n`;\n\nconst ToolSection = ({ section, toolStates, onToggle }) => {\n const sectionTools = toolStates.filter((t) => t.section === section.id);\n if (!sectionTools.length) return null;\n\n return html`\n
\n

${section.label}

\n
\n ${sectionTools.map(\n (tool) =>\n html`<${ToolRow}\n key=${tool.id}\n tool=${tool}\n onToggle=${onToggle}\n />`,\n )}\n
\n
\n `;\n};\n\nexport const AgentToolsPanel = ({ agent = {}, tools = {} }) => {\n const { profile, toolStates, setProfile, toggleTool } = tools;\n\n const enabledTotal = (toolStates || []).filter((t) => t.enabled).length;\n const totalTools = (toolStates || []).length;\n\n return html`\n
\n
\n
\n
\n

Preset

\n ${enabledTotal}/${totalTools} tools enabled\n
\n <${SegmentedControl}\n options=${kProfileOptions}\n value=${profile}\n onChange=${setProfile}\n fullWidth\n className=\"ac-segmented-control-dark\"\n />\n
\n
\n\n
\n ${kSections.map(\n (section) => html`\n
\n <${ToolSection}\n key=${section.id}\n section=${section}\n toolStates=${toolStates || []}\n onToggle=${toggleTool}\n />\n
\n `,\n )}\n
\n
\n `;\n};\n" }, { "path": "lib/public/js/components/agents-tab/agent-tools/tool-catalog.js", "content": "/**\n * Static tool catalog mirroring OpenClaw's tool-catalog.ts.\n * Grouped and labeled for the AlphaClaw Setup UI.\n */\n\nexport const kToolProfiles = [\"minimal\", \"messaging\", \"coding\", \"full\"];\n\nexport const kProfileLabels = {\n minimal: \"Minimal\",\n messaging: \"Messaging\",\n coding: \"Coding\",\n full: \"Full\",\n};\n\nconst kTools = [\n {\n id: \"read\",\n label: \"Read files\",\n profiles: [\"coding\"],\n section: \"filesystem\",\n },\n {\n id: \"edit\",\n label: \"Edit files\",\n profiles: [\"coding\"],\n section: \"filesystem\",\n },\n {\n id: \"write\",\n label: \"Write files\",\n profiles: [\"coding\"],\n section: \"filesystem\",\n },\n {\n id: \"apply_patch\",\n label: \"Apply patches\",\n help: \"Make targeted patch edits, mainly for OpenAI-compatible patch workflows.\",\n profiles: [\"coding\"],\n section: \"filesystem\",\n },\n {\n id: \"exec\",\n label: \"Run commands\",\n help: \"Execute shell commands inside the agent environment.\",\n profiles: [\"coding\"],\n section: \"execution\",\n },\n {\n id: \"process\",\n label: \"Manage processes\",\n help: \"Inspect and control long-running background processes.\",\n profiles: [\"coding\"],\n section: \"execution\",\n },\n {\n id: \"message\",\n label: \"Send messages\",\n help: \"Send outbound messages through configured messaging channels.\",\n profiles: [\"messaging\"],\n section: \"communication\",\n },\n {\n id: \"tts\",\n label: \"Text-to-speech\",\n help: \"Convert text responses into generated speech audio.\",\n profiles: [],\n section: \"communication\",\n },\n {\n id: \"browser\",\n label: \"Control browser\",\n help: \"Drive a browser for page navigation and interactive web tasks.\",\n profiles: [],\n section: \"web\",\n },\n {\n id: \"web_search\",\n label: \"Search the web\",\n help: \"Run web searches to discover external information.\",\n profiles: [],\n section: \"web\",\n },\n {\n id: \"web_fetch\",\n label: \"Fetch URLs\",\n help: \"Fetch and read webpage content from a specific URL.\",\n profiles: [],\n section: \"web\",\n },\n {\n id: \"memory_search\",\n label: \"Semantic search\",\n help: \"Search memory semantically to find related notes and prior context.\",\n profiles: [\"coding\"],\n section: \"memory\",\n },\n {\n id: \"memory_get\",\n label: \"Read memories\",\n help: \"Read stored memory files and saved context entries.\",\n profiles: [\"coding\"],\n section: \"memory\",\n },\n {\n id: \"agents_list\",\n label: \"List agents\",\n help: \"List known agent IDs that can be targeted in multi-agent flows.\",\n profiles: [],\n section: \"multiagent\",\n },\n {\n id: \"sessions_spawn\",\n label: \"Spawn sessions\",\n help: \"Start a new background session/run; this is the base primitive used by sub-agent workflows.\",\n profiles: [\"coding\"],\n section: \"multiagent\",\n },\n {\n id: \"sessions_send\",\n label: \"Send to session\",\n help: \"Send messages or tasks into an existing running session.\",\n profiles: [\"coding\", \"messaging\"],\n section: \"multiagent\",\n },\n {\n id: \"sessions_list\",\n label: \"List sessions\",\n help: \"List active or recent sessions available to the agent.\",\n profiles: [\"coding\", \"messaging\"],\n section: \"multiagent\",\n },\n {\n id: \"sessions_history\",\n label: \"Session history\",\n help: \"Read the transcript and prior exchanges from a session.\",\n profiles: [\"coding\", \"messaging\"],\n section: \"multiagent\",\n },\n {\n id: \"session_status\",\n label: \"Session status\",\n help: \"Check whether a session is running and inspect runtime health/state.\",\n profiles: [\"minimal\", \"coding\", \"messaging\"],\n section: \"multiagent\",\n },\n {\n id: \"subagents\",\n label: \"Sub-agents\",\n help: \"Launch specialized delegated agents (higher-level orchestration built on session spawning).\",\n profiles: [\"coding\"],\n section: \"multiagent\",\n },\n {\n id: \"cron\",\n label: \"Scheduled jobs\",\n help: \"Create and manage scheduled automation jobs.\",\n profiles: [\"coding\"],\n section: \"scheduling\",\n },\n {\n id: \"gateway\",\n label: \"Gateway control\",\n help: \"Inspect and control the running Gateway service (status, health, and control actions like restart).\",\n profiles: [],\n section: \"scheduling\",\n },\n {\n id: \"image\",\n label: \"Generate images\",\n help: \"Generate or analyze images with image-capable model tools.\",\n profiles: [\"coding\"],\n section: \"creative\",\n },\n {\n id: \"canvas\",\n label: \"Visual canvas\",\n help: \"Control the Canvas panel (present, navigate, eval, snapshot). Primarily a macOS app capability when a canvas-capable node is connected.\",\n profiles: [],\n section: \"creative\",\n },\n {\n id: \"nodes\",\n label: \"Node workflows\",\n help: \"Use paired device/node capabilities (for example canvas, camera, notifications, and system actions).\",\n profiles: [],\n section: \"creative\",\n },\n];\n\nexport const kSections = [\n {\n id: \"filesystem\",\n label: \"Filesystem\",\n description: \"Read, edit, and write files\",\n },\n {\n id: \"execution\",\n label: \"Execution\",\n description: \"Run shell commands and scripts\",\n },\n {\n id: \"communication\",\n label: \"Communication\",\n description: \"Send messages across Telegram, Slack, Discord\",\n },\n {\n id: \"web\",\n label: \"Web & Browser\",\n description: \"Browse pages, search the web, fetch URLs\",\n },\n {\n id: \"memory\",\n label: \"Memory\",\n description:\n \"Semantic search and retrieval across the agent's stored knowledge\",\n },\n {\n id: \"multiagent\",\n label: \"Multi-Agent\",\n description:\n \"List agents, spawn sessions, send messages between agents. Orchestrate sub-agents.\",\n },\n {\n id: \"scheduling\",\n label: \"Scheduling\",\n description: \"Create and manage scheduled jobs\",\n },\n {\n id: \"creative\",\n label: \"Creative\",\n description: \"Generate images, visual canvas, node-based workflows\",\n },\n];\n\nexport const getToolsForSection = (sectionId) =>\n kTools.filter((t) => t.section === sectionId);\n\nexport const getAllToolIds = () => kTools.map((t) => t.id);\n\nexport const getProfileToolIds = (profileId) => {\n if (profileId === \"full\") return kTools.map((t) => t.id);\n return kTools.filter((t) => t.profiles.includes(profileId)).map((t) => t.id);\n};\n\n/**\n * Given a profile + alsoAllow + deny, resolve whether each tool is enabled.\n */\nexport const resolveToolStates = ({\n profile = \"full\",\n alsoAllow = [],\n deny = [],\n}) => {\n const profileTools = new Set(getProfileToolIds(profile));\n const alsoAllowSet = new Set(alsoAllow);\n const denySet = new Set(deny);\n\n return kTools.map((tool) => {\n const inProfile = profileTools.has(tool.id);\n const isDenied = denySet.has(tool.id);\n const isAlsoAllowed = alsoAllowSet.has(tool.id);\n const enabled = isDenied ? false : inProfile || isAlsoAllowed;\n\n return { ...tool, enabled, inProfile, isDenied, isAlsoAllowed };\n });\n};\n\n/**\n * Derive the minimal tools config from the resolved tool states\n * relative to the selected profile.\n */\nexport const deriveToolsConfig = ({ profile, toolStates }) => {\n const profileTools = new Set(getProfileToolIds(profile));\n const alsoAllow = [];\n const deny = [];\n\n for (const tool of toolStates) {\n const inProfile = profileTools.has(tool.id);\n if (tool.enabled && !inProfile) {\n alsoAllow.push(tool.id);\n } else if (!tool.enabled && inProfile) {\n deny.push(tool.id);\n }\n }\n\n const config = { profile };\n if (alsoAllow.length) config.alsoAllow = alsoAllow;\n if (deny.length) config.deny = deny;\n return config;\n};\n" }, { "path": "lib/public/js/components/agents-tab/agent-tools/use-agent-tools.js", "content": "import { useState, useCallback, useMemo, useEffect, useRef } from \"preact/hooks\";\nimport {\n resolveToolStates,\n deriveToolsConfig,\n getProfileToolIds,\n} from \"./tool-catalog.js\";\n\nconst buildOverridesMap = (alsoAllow = [], deny = []) => {\n const map = {};\n for (const id of alsoAllow) map[id] = true;\n for (const id of deny) map[id] = false;\n return map;\n};\n\nconst normalizeToolsConfig = ({\n profile = \"full\",\n alsoAllow = [],\n deny = [],\n} = {}) => ({\n profile: String(profile || \"full\"),\n alsoAllow: [...(Array.isArray(alsoAllow) ? alsoAllow : [])]\n .map(String)\n .filter(Boolean)\n .sort(),\n deny: [...(Array.isArray(deny) ? deny : [])]\n .map(String)\n .filter(Boolean)\n .sort(),\n});\n\n/**\n * Manages local tool-toggle state derived from an agent's tools config.\n * Returns the current resolved states plus actions for profile/tool changes.\n */\nexport const useAgentTools = ({ agent = {} } = {}) => {\n const agentTools = agent.tools || {};\n const initialConfig = normalizeToolsConfig(agentTools);\n\n const initialProfile = initialConfig.profile;\n const initialAlsoAllow = initialConfig.alsoAllow;\n const initialDeny = initialConfig.deny;\n\n const [profile, setProfileRaw] = useState(initialProfile);\n const [overrides, setOverrides] = useState(() =>\n buildOverridesMap(initialAlsoAllow, initialDeny),\n );\n const [savedConfig, setSavedConfig] = useState(initialConfig);\n\n const agentToolsKey = JSON.stringify([agent.id, agentTools]);\n const prevKeyRef = useRef(agentToolsKey);\n useEffect(() => {\n if (prevKeyRef.current !== agentToolsKey) {\n prevKeyRef.current = agentToolsKey;\n setProfileRaw(initialProfile);\n setOverrides(buildOverridesMap(initialAlsoAllow, initialDeny));\n setSavedConfig(initialConfig);\n }\n }, [agentToolsKey, initialProfile, initialAlsoAllow, initialDeny, initialConfig]);\n\n const toolStates = useMemo(() => {\n const profileSet = new Set(getProfileToolIds(profile));\n const alsoAllow = [];\n const deny = [];\n for (const [id, enabled] of Object.entries(overrides)) {\n if (enabled && !profileSet.has(id)) alsoAllow.push(id);\n else if (!enabled && profileSet.has(id)) deny.push(id);\n }\n return resolveToolStates({ profile, alsoAllow, deny });\n }, [profile, overrides]);\n\n const toolsConfig = useMemo(\n () => deriveToolsConfig({ profile, toolStates }),\n [profile, toolStates],\n );\n\n const dirty = useMemo(() => {\n const next = normalizeToolsConfig(toolsConfig);\n return JSON.stringify(savedConfig) !== JSON.stringify(next);\n }, [savedConfig, toolsConfig]);\n\n const setProfile = useCallback((nextProfile) => {\n setProfileRaw(nextProfile);\n setOverrides({});\n }, []);\n\n const toggleTool = useCallback(\n (toolId, enabled) => {\n setOverrides((prev) => {\n const next = { ...prev };\n const profileSet = new Set(getProfileToolIds(profile));\n const isDefault = profileSet.has(toolId) === enabled;\n if (isDefault) {\n delete next[toolId];\n } else {\n next[toolId] = enabled;\n }\n return next;\n });\n },\n [profile],\n );\n\n const reset = useCallback(() => {\n setProfileRaw(savedConfig.profile);\n const map = {};\n for (const id of savedConfig.alsoAllow) map[id] = true;\n for (const id of savedConfig.deny) map[id] = false;\n setOverrides(map);\n }, [savedConfig]);\n\n const markSaved = useCallback((nextConfig = {}) => {\n const normalized = normalizeToolsConfig(nextConfig);\n setSavedConfig(normalized);\n setProfileRaw(normalized.profile);\n setOverrides(buildOverridesMap(normalized.alsoAllow, normalized.deny));\n }, []);\n\n return {\n profile,\n toolStates,\n toolsConfig,\n dirty,\n setProfile,\n toggleTool,\n reset,\n markSaved,\n };\n};\n" }, { "path": "lib/public/js/components/agents-tab/create-agent-modal.js", "content": "import { h } from \"preact\";\nimport { useEffect, useMemo, useState } from \"preact/hooks\";\nimport htm from \"htm\";\nimport { ActionButton } from \"../action-button.js\";\nimport { CloseIcon } from \"../icons.js\";\nimport { ModalShell } from \"../modal-shell.js\";\nimport { PageHeader } from \"../page-header.js\";\n\nconst html = htm.bind(h);\n\nconst kAgentIdPattern = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;\nconst kWorkspaceFolderPattern = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;\n\nconst slugifyAgentId = (value) =>\n String(value || \"\")\n .toLowerCase()\n .trim()\n .replace(/[^a-z0-9]+/g, \"-\")\n .replace(/^-+|-+$/g, \"\");\n\nexport const CreateAgentModal = ({\n visible = false,\n loading = false,\n onClose = () => {},\n onSubmit = () => {},\n}) => {\n const [displayName, setDisplayName] = useState(\"\");\n const [agentId, setAgentId] = useState(\"\");\n const [workspaceSuffix, setWorkspaceSuffix] = useState(\"\");\n const [error, setError] = useState(\"\");\n const [idEditedManually, setIdEditedManually] = useState(false);\n const [workspaceEditedManually, setWorkspaceEditedManually] = useState(false);\n\n useEffect(() => {\n if (!visible) return;\n setDisplayName(\"\");\n setAgentId(\"\");\n setWorkspaceSuffix(\"\");\n setError(\"\");\n setIdEditedManually(false);\n setWorkspaceEditedManually(false);\n }, [visible]);\n\n useEffect(() => {\n if (idEditedManually) return;\n const derivedId = slugifyAgentId(displayName);\n setAgentId(derivedId);\n }, [displayName, idEditedManually]);\n\n useEffect(() => {\n if (workspaceEditedManually) return;\n const trimmedId = String(agentId || \"\").trim();\n if (!trimmedId) {\n setWorkspaceSuffix(\"\");\n return;\n }\n setWorkspaceSuffix(trimmedId);\n }, [agentId, workspaceEditedManually]);\n\n const workspaceFolder = useMemo(\n () => `workspace-${String(workspaceSuffix || \"\").trim()}`,\n [workspaceSuffix],\n );\n\n const canSubmit =\n String(displayName || \"\").trim().length > 0 &&\n kAgentIdPattern.test(String(agentId || \"\").trim()) &&\n kWorkspaceFolderPattern.test(String(workspaceSuffix || \"\").trim());\n\n if (!visible) return null;\n\n const submit = async () => {\n const nextDisplayName = String(displayName || \"\").trim();\n const nextAgentId = String(agentId || \"\").trim();\n const nextWorkspaceSuffix = String(workspaceSuffix || \"\").trim();\n const nextWorkspaceFolder = `workspace-${nextWorkspaceSuffix}`;\n\n if (!nextDisplayName) {\n setError(\"Display name is required\");\n return;\n }\n if (!kAgentIdPattern.test(nextAgentId)) {\n setError(\"Agent ID must be lowercase letters, numbers, and hyphens\");\n return;\n }\n if (!kWorkspaceFolderPattern.test(nextWorkspaceSuffix)) {\n setError(\"Workspace folder must be lowercase letters, numbers, and hyphens\");\n return;\n }\n\n setError(\"\");\n const payload = {\n name: nextDisplayName,\n id: nextAgentId,\n workspaceFolder: nextWorkspaceFolder,\n };\n await onSubmit(payload);\n };\n\n return html`\n <${ModalShell}\n visible=${visible}\n onClose=${onClose}\n panelClassName=\"bg-modal border border-border rounded-xl p-6 max-w-lg w-full space-y-4\"\n >\n <${PageHeader}\n title=\"Add Agent\"\n actions=${html`\n \n <${CloseIcon} className=\"w-3.5 h-3.5 text-body\" />\n \n `}\n />\n\n
\n \n\n \n\n \n\n ${error ? html`

${error}

` : null}\n
\n\n
\n <${ActionButton}\n onClick=${onClose}\n disabled=${loading}\n loading=${false}\n tone=\"secondary\"\n size=\"md\"\n idleLabel=\"Cancel\"\n />\n <${ActionButton}\n onClick=${submit}\n disabled=${loading || !canSubmit}\n loading=${loading}\n tone=\"primary\"\n size=\"md\"\n idleLabel=\"Create Agent\"\n loadingLabel=\"Creating...\"\n />\n
\n \n `;\n};\n" }, { "path": "lib/public/js/components/agents-tab/create-channel-modal.js", "content": "import { h } from \"preact\";\nimport { useEffect, useMemo, useState } from \"preact/hooks\";\nimport htm from \"htm\";\nimport { ActionButton } from \"../action-button.js\";\nimport { CloseIcon, FileCopyLineIcon } from \"../icons.js\";\nimport { ModalShell } from \"../modal-shell.js\";\nimport { PageHeader } from \"../page-header.js\";\nimport { SecretInput } from \"../secret-input.js\";\nimport { fetchChannelAccountToken } from \"../../lib/api.js\";\nimport { copyTextToClipboard } from \"../../lib/clipboard.js\";\nimport { isSingleAccountChannelProvider } from \"../../lib/channel-provider-availability.js\";\nimport { ALL_CHANNELS, getChannelMeta } from \"../channels.js\";\nimport { showToast } from \"../toast.js\";\n\nconst html = htm.bind(h);\n\nconst kChannelEnvKeys = {\n telegram: \"TELEGRAM_BOT_TOKEN\",\n discord: \"DISCORD_BOT_TOKEN\",\n slack: \"SLACK_BOT_TOKEN\",\n whatsapp: \"WHATSAPP_OWNER_NUMBER\",\n};\n\nconst kChannelExtraEnvKeys = {\n slack: \"SLACK_APP_TOKEN\",\n};\nconst kSlackBotScopes = [\n \"app_mentions:read\",\n \"channels:history\",\n \"channels:read\",\n \"chat:write\",\n \"commands\",\n \"emoji:read\",\n \"files:read\",\n \"files:write\",\n \"groups:read\",\n \"groups:history\",\n \"im:history\",\n \"im:read\",\n \"im:write\",\n \"mpim:history\",\n \"mpim:read\",\n \"mpim:write\",\n \"pins:read\",\n \"pins:write\",\n \"reactions:read\",\n \"reactions:write\",\n \"users:read\",\n];\nconst kSlackBotEvents = [\n \"app_mention\",\n \"message.channels\",\n \"message.groups\",\n \"message.im\",\n \"message.mpim\",\n \"reaction_added\",\n \"reaction_removed\",\n];\nconst kSlackInstructionsLink = \"https://docs.openclaw.ai/channels/slack\";\n\nconst slugifyChannelAccountId = (value) =>\n String(value || \"\")\n .toLowerCase()\n .trim()\n .replace(/[^a-z0-9]+/g, \"-\")\n .replace(/^-+|-+$/g, \"\");\n\nconst deriveChannelEnvKey = ({ provider, accountId }) => {\n const baseKey = kChannelEnvKeys[String(provider || \"\").trim()] || \"\";\n const normalizedAccountId = String(accountId || \"\").trim();\n if (!baseKey) return \"\";\n if (!normalizedAccountId || normalizedAccountId === \"default\") return baseKey;\n return `${baseKey}_${normalizedAccountId.replace(/-/g, \"_\").toUpperCase()}`;\n};\nconst deriveChannelExtraEnvKey = ({ provider, accountId, index = 0 }) => {\n const baseKeys = [kChannelExtraEnvKeys[String(provider || \"\").trim()]].filter(\n Boolean,\n );\n const baseKey = String(baseKeys[index] || \"\").trim();\n const normalizedAccountId = String(accountId || \"\").trim();\n if (!baseKey) return \"\";\n if (!normalizedAccountId || normalizedAccountId === \"default\") return baseKey;\n return `${baseKey}_${normalizedAccountId.replace(/-/g, \"_\").toUpperCase()}`;\n};\nconst isMaskedTokenValue = (value) => /^\\*+$/.test(String(value || \"\").trim());\nconst buildSlackManifest = (appName = \"AlphaClaw\") =>\n JSON.stringify(\n {\n _metadata: {\n major_version: 1,\n },\n display_information: {\n name: String(appName || \"\").trim() || \"AlphaClaw\",\n description: \"Slack connector for AlphaClaw\",\n },\n features: {\n bot_user: {\n display_name: String(appName || \"\").trim() || \"AlphaClaw\",\n always_online: false,\n },\n app_home: {\n messages_tab_enabled: true,\n messages_tab_read_only_enabled: false,\n },\n },\n oauth_config: {\n scopes: {\n bot: kSlackBotScopes,\n },\n },\n settings: {\n event_subscriptions: {\n bot_events: kSlackBotEvents,\n },\n org_deploy_enabled: false,\n socket_mode_enabled: true,\n is_hosted: false,\n token_rotation_enabled: false,\n },\n },\n null,\n 2,\n );\nconst copyAndToast = async (value, label = \"text\") => {\n const copied = await copyTextToClipboard(value);\n if (copied) {\n showToast(\"Copied to clipboard\", \"success\");\n return;\n }\n showToast(`Could not copy ${label}`, \"error\");\n};\n\nexport const CreateChannelModal = ({\n visible = false,\n loading = false,\n createLoadingLabel = \"Creating...\",\n agents = [],\n existingChannels = [],\n mode = \"create\",\n account = null,\n initialAgentId = \"\",\n initialProvider = \"\",\n onClose = () => {},\n onSubmit = async () => {},\n}) => {\n const isEditMode = mode === \"edit\";\n const [provider, setProvider] = useState(\"telegram\");\n const [name, setName] = useState(\"\");\n const [token, setToken] = useState(\"\");\n const [initialToken, setInitialToken] = useState(\"\");\n const [appToken, setAppToken] = useState(\"\");\n const [agentId, setAgentId] = useState(\"\");\n const [error, setError] = useState(\"\");\n const [nameEditedManually, setNameEditedManually] = useState(false);\n const [loadingToken, setLoadingToken] = useState(false);\n\n useEffect(() => {\n if (!visible) return;\n const nextProvider = isEditMode\n ? String(account?.provider || \"\").trim() || \"telegram\"\n : ALL_CHANNELS.includes(initialProvider)\n ? initialProvider\n : ALL_CHANNELS[0] || \"telegram\";\n const providerLabel = getChannelMeta(nextProvider).label || \"Channel\";\n const nextSelectedChannel =\n existingChannels.find(\n (entry) =>\n String(entry?.channel || \"\").trim() ===\n String(nextProvider || \"\").trim(),\n ) || null;\n const nextProviderHasAccounts =\n Array.isArray(nextSelectedChannel?.accounts) &&\n nextSelectedChannel.accounts.length > 0;\n const nextName = isEditMode\n ? String(account?.name || \"\").trim() || providerLabel\n : nextProviderHasAccounts\n ? \"\"\n : providerLabel;\n const nextAgentId = isEditMode\n ? String(account?.ownerAgentId || \"\").trim() ||\n String(initialAgentId || \"\").trim() ||\n String(agents[0]?.id || \"\").trim()\n : String(initialAgentId || \"\").trim() ||\n String(agents[0]?.id || \"\").trim();\n setProvider(nextProvider);\n setName(nextName);\n const nextToken = isEditMode\n ? (() => {\n const raw = String(account?.token || \"\").trim();\n return isMaskedTokenValue(raw) ? \"\" : raw;\n })()\n : \"\";\n setToken(nextToken);\n setInitialToken(nextToken);\n setAppToken(\"\");\n setAgentId(nextAgentId);\n setError(\"\");\n setNameEditedManually(isEditMode);\n }, [\n visible,\n initialAgentId,\n initialProvider,\n agents,\n existingChannels,\n isEditMode,\n account,\n ]);\n\n const selectedChannel = useMemo(\n () =>\n existingChannels.find(\n (entry) =>\n String(entry?.channel || \"\").trim() === String(provider || \"\").trim(),\n ) || null,\n [existingChannels, provider],\n );\n\n const providerHasAccounts = useMemo(\n () =>\n Array.isArray(selectedChannel?.accounts) &&\n selectedChannel.accounts.length > 0,\n [selectedChannel],\n );\n useEffect(() => {\n if (nameEditedManually) return;\n const providerLabel = getChannelMeta(provider).label || \"Channel\";\n if (!isEditMode && providerHasAccounts) {\n setName(\"\");\n return;\n }\n setName(providerLabel);\n }, [provider, providerHasAccounts, nameEditedManually, isEditMode]);\n const normalizedProvider = String(provider || \"\").trim();\n const isSingleAccountProvider = isSingleAccountChannelProvider(provider);\n const needsAppToken = normalizedProvider === \"slack\";\n const isWhatsApp = normalizedProvider === \"whatsapp\";\n\n const accountId = useMemo(() => {\n if (isEditMode) {\n return String(account?.id || \"\").trim() || \"default\";\n }\n if (isSingleAccountProvider) return \"default\";\n if (!providerHasAccounts) return \"default\";\n return slugifyChannelAccountId(name);\n }, [name, providerHasAccounts, isEditMode, account, isSingleAccountProvider]);\n\n const envKey = useMemo(\n () => deriveChannelEnvKey({ provider, accountId }),\n [provider, accountId],\n );\n const extraEnvKey = useMemo(\n () =>\n deriveChannelExtraEnvKey({\n provider,\n accountId,\n }),\n [provider, accountId],\n );\n const slackManifestName = useMemo(() => {\n const normalizedName = String(name || \"\").trim();\n if (!normalizedName) return \"AlphaClaw\";\n if (normalizedName.toLowerCase() === \"slack\") return \"AlphaClaw\";\n return normalizedName;\n }, [name]);\n const slackManifest = useMemo(\n () => buildSlackManifest(slackManifestName),\n [slackManifestName],\n );\n\n const accountExists = useMemo(\n () =>\n Array.isArray(selectedChannel?.accounts) &&\n selectedChannel.accounts.some(\n (entry) =>\n String(entry?.id || \"\").trim() === String(accountId || \"\").trim(),\n ),\n [selectedChannel, accountId],\n );\n useEffect(() => {\n if (!visible || !isEditMode) return;\n let cancelled = false;\n const loadToken = async () => {\n setLoadingToken(true);\n try {\n const result = await fetchChannelAccountToken({\n provider,\n accountId,\n });\n if (cancelled) return;\n const nextToken = String(result?.token || \"\");\n const nextAppToken = String(result?.appToken || \"\");\n setToken(nextToken);\n setInitialToken(nextToken);\n setAppToken(nextAppToken);\n } catch {\n // Keep existing fallback value.\n } finally {\n if (!cancelled) {\n setLoadingToken(false);\n }\n }\n };\n loadToken();\n return () => {\n cancelled = true;\n };\n }, [visible, isEditMode, provider, accountId]);\n\n const canSubmit =\n !!String(provider || \"\").trim() &&\n !!String(name || \"\").trim() &&\n !!String(accountId || \"\").trim() &&\n !!String(agentId || \"\").trim() &&\n (isEditMode || !!String(token || \"\").trim()) &&\n (isEditMode || !needsAppToken || !!String(appToken || \"\").trim()) &&\n (isEditMode || !accountExists) &&\n !loadingToken;\n\n if (!visible) return null;\n\n const handleSubmit = async () => {\n if (!String(name || \"\").trim()) {\n setError(\"Name is required\");\n return;\n }\n if (!String(accountId || \"\").trim()) {\n setError(\"Channel id could not be derived from the name\");\n return;\n }\n if (!isEditMode && !String(token || \"\").trim()) {\n setError(\"Token is required\");\n return;\n }\n if (!isEditMode && needsAppToken && !String(appToken || \"\").trim()) {\n setError(\"App Token is required for Slack\");\n return;\n }\n if (!String(agentId || \"\").trim()) {\n setError(\"Agent is required\");\n return;\n }\n if (!isEditMode && accountExists) {\n setError(\"That channel id is already configured for this provider\");\n return;\n }\n\n setError(\"\");\n const trimmedToken = String(token || \"\").trim();\n const tokenWasUpdated =\n trimmedToken && trimmedToken !== String(initialToken || \"\").trim();\n const trimmedAppToken = String(appToken || \"\").trim();\n await onSubmit({\n provider,\n name: String(name || \"\").trim(),\n accountId,\n agentId,\n ...(tokenWasUpdated ? { token: trimmedToken } : {}),\n ...(needsAppToken && trimmedAppToken\n ? { appToken: trimmedAppToken }\n : {}),\n });\n };\n\n return html`\n <${ModalShell}\n visible=${visible}\n onClose=${onClose}\n panelClassName=\"bg-modal border border-border rounded-xl p-6 max-w-lg w-full max-h-[calc(100vh-2rem)] overflow-y-auto space-y-4\"\n >\n <${PageHeader}\n title=${\n isEditMode\n ? \"Edit Channel\"\n : `Add ${getChannelMeta(provider).label || \"Channel\"} Channel`\n }\n actions=${html`\n \n <${CloseIcon} className=\"w-3.5 h-3.5 text-body\" />\n \n `}\n />\n\n
\n \n\n \n\n \n\n ${\n needsAppToken\n ? html`\n \n `\n : null\n }\n ${\n needsAppToken\n ? html`\n
\n \n \n \n Create app from manifest (recommended)\n \n \n
\n
\n
\n

\n ${slackManifestName} App Manifest\n

\n
\n \n copyAndToast(slackManifest, \"Slack manifest\")}\n class=\"text-xs px-2 py-1 rounded-lg ac-btn-cyan inline-flex items-center gap-1.5 shrink-0\"\n >\n <${FileCopyLineIcon} className=\"w-3.5 h-3.5\" />\n Copy\n \n
\n \n${slackManifest}\n \n
  • \n In Slack, click ${\" \"}\n Create app from manifest\n ${\" \"} and paste this manifest.\n
    • \n
  • \n Open ${\" \"}\n Basic Information\n ${\" \"} and create an ${\" \"}\n App-Level Token\n ${\" \"} with\n connections:write.\n
    • \n
  • \n Open ${\" \"}\n OAuth & Permissions\n ${\" \"} and use ${\" \"}\n Install to Workspace\n ${\" \"} or ${\" \"}\n Reinstall to Workspace\n ${\" \"} so Slack issues a bot token.\n
    • \n
  • \n In ${\" \"}\n OAuth & Permissions\n ${\" \"} copy the ${\" \"}\n Bot User OAuth Token\n ${\" \"} (\n xoxb-...\n ).\n
    • \n
  • \n Paste the generated ${\" \"}\n xoxb-...\n ${\" \"} and ${\" \"}\n xapp-...\n ${\" \"} tokens here.\n
    • \n \n
    \n \n \n \n \n Manual setup instructions\n \n \n
    \n

    \n Use this if you want to configure the Slack app by hand\n instead of importing a manifest.\n

    \n
      \n
    1. \n In Slack app settings, turn on ${\" \"}\n Socket Mode.\n
      2. \n
    2. \n In ${\" \"}\n App Home, enable\n \n Allow users to send Slash commands and messages from\n the messages tab .\n
      3. \n
    3. \n In ${\" \"}\n Event Subscriptions,\n toggle on\n Subscribe to bot events\n ${\" \"} and add\n message.im.\n
      4. \n
    4. \n In ${\" \"}\n OAuth & Permissions,\n add the bot scopes:\n \n ${kSlackBotScopes.join(\", \")}\n \n
      5. \n
    5. \n In ${\" \"}\n Basic Information,\n create an App Token (xapp-...) with\n connections:write.\n
      6. \n
    6. \n Back in ${\" \"}\n OAuth & Permissions,\n install or reinstall the app, then copy the ${\" \"}\n Bot User OAuth Token\n ${\" \"} (\n xoxb-...\n ).\n
      7. \n
    \n \n Open full Slack setup guide\n     \n
    \n \n
    \n `\n : null\n }\n\n \n\n ${\n !isEditMode && accountExists\n ? html`\n

    \n ${isSingleAccountProvider\n ? `${getChannelMeta(provider).label} already has a configured channel account.`\n : `A ${getChannelMeta(provider).label} account with this id already exists.`}\n

    \n `\n : null\n }\n ${error ? html`

    ${error}

    ` : null}\n
    \n\n
    \n <${ActionButton}\n onClick=${onClose}\n disabled=${loading}\n loading=${false}\n tone=\"secondary\"\n size=\"md\"\n idleLabel=\"Cancel\"\n />\n <${ActionButton}\n onClick=${handleSubmit}\n disabled=${loading || !canSubmit}\n loading=${loading}\n tone=\"primary\"\n size=\"md\"\n idleLabel=${isEditMode ? \"Save Changes\" : \"Create Channel\"}\n loadingLabel=${isEditMode ? \"Saving...\" : createLoadingLabel}\n />\n
    \n \n `;\n};\n" }, { "path": "lib/public/js/components/agents-tab/delete-agent-dialog.js", "content": "import { h } from \"preact\";\nimport { useEffect, useState } from \"preact/hooks\";\nimport htm from \"htm\";\nimport { ConfirmDialog } from \"../confirm-dialog.js\";\nimport { ToggleSwitch } from \"../toggle-switch.js\";\n\nconst html = htm.bind(h);\n\nexport const DeleteAgentDialog = ({\n visible = false,\n loading = false,\n agent = null,\n onCancel = () => {},\n onConfirm = () => {},\n}) => {\n const [keepWorkspace, setKeepWorkspace] = useState(true);\n\n useEffect(() => {\n if (!visible) return;\n setKeepWorkspace(true);\n }, [visible]);\n\n return html`\n <${ConfirmDialog}\n visible=${visible}\n title=\"Delete agent\"\n message=${`Delete \"${String(agent?.name || agent?.id || \"agent\")}\"?`}\n details=${html`\n
    \n <${ToggleSwitch}\n checked=${keepWorkspace}\n disabled=${loading}\n onChange=${setKeepWorkspace}\n label=\"Keep workspace files\"\n />\n
    \n `}\n confirmLabel=\"Delete agent\"\n confirmLoadingLabel=\"Deleting...\"\n confirmTone=\"warning\"\n confirmLoading=${loading}\n onCancel=${onCancel}\n onConfirm=${() =>\n onConfirm({\n id: String(agent?.id || \"\").trim(),\n keepWorkspace,\n })}\n />\n `;\n};\n" }, { "path": "lib/public/js/components/agents-tab/edit-agent-modal.js", "content": "import { h } from \"preact\";\nimport { useEffect, useState } from \"preact/hooks\";\nimport htm from \"htm\";\nimport { ActionButton } from \"../action-button.js\";\nimport { CloseIcon } from \"../icons.js\";\nimport { ModalShell } from \"../modal-shell.js\";\nimport { PageHeader } from \"../page-header.js\";\n\nconst html = htm.bind(h);\n\nexport const EditAgentModal = ({\n visible = false,\n loading = false,\n agent = null,\n onClose = () => {},\n onSubmit = () => {},\n}) => {\n const [name, setName] = useState(\"\");\n const [error, setError] = useState(\"\");\n\n useEffect(() => {\n if (!visible) return;\n setName(String(agent?.name || \"\"));\n setError(\"\");\n }, [visible, agent]);\n\n if (!visible) return null;\n\n const submit = async () => {\n const nextName = String(name || \"\").trim();\n if (!nextName) {\n setError(\"Display name is required\");\n return;\n }\n setError(\"\");\n await onSubmit({\n id: String(agent?.id || \"\").trim(),\n patch: {\n name: nextName,\n },\n });\n };\n\n return html`\n <${ModalShell}\n visible=${visible}\n onClose=${onClose}\n panelClassName=\"bg-modal border border-border rounded-xl p-6 max-w-lg w-full space-y-4\"\n >\n <${PageHeader}\n title=\"Edit Agent\"\n actions=${html`\n \n <${CloseIcon} className=\"w-3.5 h-3.5 text-body\" />\n \n `}\n />\n\n
    \n \n\n \n\n ${error ? html`

    ${error}

    ` : null}\n
    \n\n
    \n <${ActionButton}\n onClick=${onClose}\n disabled=${loading}\n loading=${false}\n tone=\"secondary\"\n size=\"sm\"\n idleLabel=\"Cancel\"\n />\n <${ActionButton}\n onClick=${submit}\n disabled=${loading}\n loading=${loading}\n tone=\"primary\"\n size=\"sm\"\n idleLabel=\"Save\"\n loadingLabel=\"Saving...\"\n />\n
    \n \n `;\n};\n" }, { "path": "lib/public/js/components/agents-tab/index.js", "content": "import { h } from \"preact\";\nimport { useState, useEffect, useCallback } from \"preact/hooks\";\nimport htm from \"htm\";\nimport { LoadingSpinner } from \"../loading-spinner.js\";\nimport { showToast } from \"../toast.js\";\nimport { AgentDetailPanel } from \"./agent-detail-panel.js\";\nimport { CreateAgentModal } from \"./create-agent-modal.js\";\nimport { DeleteAgentDialog } from \"./delete-agent-dialog.js\";\nimport { EditAgentModal } from \"./edit-agent-modal.js\";\n\nconst html = htm.bind(h);\n\nconst resolveWorkspaceBrowsePath = (workspacePath) => {\n const rawPath = String(workspacePath || \"\").trim();\n if (!rawPath) return \"\";\n const openclawMatch = rawPath.match(/[\\\\/]\\.openclaw[\\\\/](.+)$/);\n if (openclawMatch?.[1]) {\n return String(openclawMatch[1]).replace(/\\\\/g, \"/\");\n }\n const segments = rawPath.split(/[\\\\/]/).filter(Boolean);\n return segments[segments.length - 1] || \"\";\n};\n\nexport const AgentsTab = ({\n agents = [],\n loading = false,\n saving = false,\n agentsActions = {},\n selectedAgentId = \"\",\n activeTab = \"overview\",\n onSelectAgent = () => {},\n onSelectTab = () => {},\n onNavigateToBrowseFile = () => {},\n onSetLocation = () => {},\n}) => {\n const { create, remove, setDefault, update } = agentsActions;\n\n const [createModalVisible, setCreateModalVisible] = useState(false);\n const [editingAgent, setEditingAgent] = useState(null);\n const [deletingAgent, setDeletingAgent] = useState(null);\n\n useEffect(() => {\n const handleCreateEvent = () => setCreateModalVisible(true);\n window.addEventListener(\"alphaclaw:create-agent\", handleCreateEvent);\n return () => window.removeEventListener(\"alphaclaw:create-agent\", handleCreateEvent);\n }, []);\n\n const selectedAgent = agents.find((a) => a.id === selectedAgentId) || null;\n\n const handleCreate = async ({ id, name, workspaceFolder }) => {\n try {\n const newAgent = await create({ id, name, workspaceFolder });\n setCreateModalVisible(false);\n onSelectAgent(newAgent.id);\n showToast(\"Agent created\", \"success\");\n } catch (error) {\n showToast(error.message || \"Could not create agent\", \"error\");\n }\n };\n\n const handleSetDefault = async (id) => {\n try {\n await setDefault(id);\n showToast(\"Default agent updated\", \"success\");\n } catch (error) {\n showToast(error.message || \"Could not set default agent\", \"error\");\n }\n };\n\n const handleUpdateAgent = async (id, patch, successMessage = \"Agent updated\") => {\n try {\n const nextAgent = await update(id, patch);\n showToast(successMessage, \"success\");\n return nextAgent;\n } catch (error) {\n showToast(error.message || \"Could not update agent\", \"error\");\n throw error;\n }\n };\n\n const handleEdit = async ({ id, patch }) => {\n try {\n await handleUpdateAgent(id, patch);\n setEditingAgent(null);\n } catch (error) {\n return;\n }\n };\n\n const handleDelete = async ({ id, keepWorkspace }) => {\n try {\n await remove(id, { keepWorkspace });\n setDeletingAgent(null);\n showToast(\"Agent deleted\", \"success\");\n } catch (error) {\n showToast(error.message || \"Could not delete agent\", \"error\");\n }\n };\n\n const handleOpenWorkspace = (workspacePath) => {\n const browsePath = resolveWorkspaceBrowsePath(workspacePath);\n if (!browsePath) return;\n onNavigateToBrowseFile(browsePath, { view: \"edit\", directory: true });\n };\n\n if (loading) {\n return html`\n
    \n
    \n <${LoadingSpinner} className=\"h-5 w-5\" />\n
    \n
    \n `;\n }\n\n return html`\n <${AgentDetailPanel}\n agent=${selectedAgent}\n agents=${agents}\n activeTab=${activeTab}\n saving=${saving}\n onUpdateAgent=${handleUpdateAgent}\n onSetLocation=${onSetLocation}\n onSelectTab=${onSelectTab}\n onEdit=${setEditingAgent}\n onDelete=${setDeletingAgent}\n onSetDefault=${handleSetDefault}\n onOpenWorkspace=${handleOpenWorkspace}\n />\n\n <${CreateAgentModal}\n visible=${createModalVisible}\n loading=${saving}\n onClose=${() => setCreateModalVisible(false)}\n onSubmit=${handleCreate}\n />\n <${EditAgentModal}\n visible=${!!editingAgent}\n loading=${saving}\n agent=${editingAgent}\n onClose=${() => setEditingAgent(null)}\n onSubmit=${handleEdit}\n />\n <${DeleteAgentDialog}\n visible=${!!deletingAgent}\n loading=${saving}\n agent=${deletingAgent}\n onCancel=${() => setDeletingAgent(null)}\n onConfirm=${handleDelete}\n />\n `;\n};\n" }, { "path": "lib/public/js/components/agents-tab/use-agents.js", "content": "import { useCallback, useEffect, useState } from \"preact/hooks\";\nimport {\n createAgent,\n deleteAgent,\n fetchAgents,\n setDefaultAgent,\n updateAgent,\n} from \"../../lib/api.js\";\n\nexport const useAgents = () => {\n const [agents, setAgents] = useState([]);\n const [loading, setLoading] = useState(true);\n const [saving, setSaving] = useState(false);\n\n const loadAgents = useCallback(async () => {\n setLoading(true);\n try {\n const payload = await fetchAgents();\n setAgents(Array.isArray(payload?.agents) ? payload.agents : []);\n } finally {\n setLoading(false);\n }\n }, []);\n\n useEffect(() => {\n loadAgents();\n }, [loadAgents]);\n\n const create = useCallback(async (input) => {\n setSaving(true);\n try {\n const payload = await createAgent(input);\n setAgents((previous) => [...previous, payload.agent]);\n return payload.agent;\n } finally {\n setSaving(false);\n }\n }, []);\n\n const update = useCallback(async (agentId, patch) => {\n setSaving(true);\n try {\n const payload = await updateAgent(agentId, patch);\n setAgents((previous) =>\n previous.map((entry) => (entry.id === agentId ? payload.agent : entry)),\n );\n return payload.agent;\n } finally {\n setSaving(false);\n }\n }, []);\n\n const setDefault = useCallback(async (agentId) => {\n setSaving(true);\n try {\n await setDefaultAgent(agentId);\n setAgents((previous) =>\n previous.map((entry) => ({ ...entry, default: entry.id === agentId })),\n );\n } finally {\n setSaving(false);\n }\n }, []);\n\n const remove = useCallback(async (agentId, options = {}) => {\n setSaving(true);\n try {\n await deleteAgent(agentId, options);\n setAgents((previous) => previous.filter((entry) => entry.id !== agentId));\n } finally {\n setSaving(false);\n }\n }, []);\n\n return {\n state: {\n agents,\n loading,\n saving,\n },\n actions: {\n create,\n loadAgents,\n remove,\n setDefault,\n update,\n },\n };\n};\n" }, { "path": "lib/public/js/components/badge.js", "content": "import { h } from \"preact\";\nimport htm from \"htm\";\n\nconst html = htm.bind(h);\n\nconst kToneClasses = {\n success: \"bg-green-500/10 text-status-success-muted\",\n warning: \"bg-yellow-500/10 text-status-warning-muted\",\n danger: \"bg-red-500/10 text-status-error-muted\",\n neutral: \"bg-gray-500/10 text-fg-muted\",\n info: \"bg-blue-500/10 text-blue-400\",\n accent: \"bg-purple-500/10 text-purple-400\",\n cyan: \"bg-cyan-500/10 text-cyan-400\",\n secondary: \"bg-indigo-500/10 text-indigo-300\",\n};\n\nexport const Badge = ({ tone = \"neutral\", children }) => html`\n \n ${children}\n \n`;\n" }, { "path": "lib/public/js/components/channel-account-status-badge.js", "content": "import { h } from \"preact\";\nimport htm from \"htm\";\nimport { Badge } from \"./badge.js\";\n\nconst html = htm.bind(h);\n\nexport const ChannelAccountStatusBadge = ({\n status = \"configured\",\n ownerAgentName = \"\",\n showAgentBadge = false,\n channelId = \"\",\n pairedCount = 0,\n}) => {\n const normalizedStatus = String(status || \"\").trim();\n if (normalizedStatus !== \"paired\") {\n return html`<${Badge} tone=\"warning\">Awaiting pairing`;\n }\n if (showAgentBadge && ownerAgentName) {\n return html`\n <${Badge} tone=\"neutral\">\n \n \n ${ownerAgentName}\n \n \n `;\n }\n return html`\n <${Badge} tone=\"success\">\n ${channelId === \"telegram\" || Number(pairedCount) <= 1\n ? \"Paired\"\n : `Paired (${Number(pairedCount)})`}\n \n `;\n};\n" }, { "path": "lib/public/js/components/channel-login-modal.js", "content": "import { h } from \"https://esm.sh/preact\";\nimport htm from \"https://esm.sh/htm\";\nimport { ActionButton } from \"./action-button.js\";\nimport { CloseIcon } from \"./icons.js\";\nimport { ModalShell } from \"./modal-shell.js\";\nimport { PageHeader } from \"./page-header.js\";\n\nconst html = htm.bind(h);\n\nexport const ChannelLoginModal = ({\n visible = false,\n loading = false,\n title = \"Link Channel\",\n output = \"\",\n error = \"\",\n runDisabled = false,\n runLabel = \"Generate QR\",\n runLoadingLabel = \"Running...\",\n closeLabel = \"Close\",\n onRun = async () => {},\n onClose = () => {},\n}) => {\n if (!visible) return null;\n const hasOutput = !!String(output || \"\").trim();\n const hasError = !!String(error || \"\").trim();\n const displayOutput = hasOutput\n ? String(output)\n : hasError\n ? String(error)\n : \"No output yet. Generate QR to start login.\";\n return html`\n <${ModalShell}\n visible=${visible}\n onClose=${onClose}\n panelClassName=\"bg-modal border border-border rounded-xl p-6 max-w-2xl w-full space-y-4\"\n >\n <${PageHeader}\n title=${title}\n actions=${html`\n \n <${CloseIcon} className=\"w-3.5 h-3.5 text-gray-300\" />\n \n `}\n />\n
    \n

    \n Click \"Generate QR\" to run channel login and capture terminal output.\n

    \n \n
    \n
    \n <${ActionButton}\n onClick=${onClose}\n disabled=${loading}\n loading=${false}\n tone=\"secondary\"\n size=\"sm\"\n idleLabel=${closeLabel}\n />\n <${ActionButton}\n onClick=${onRun}\n disabled=${loading || runDisabled}\n loading=${loading}\n tone=\"primary\"\n size=\"sm\"\n idleLabel=${runLabel}\n loadingLabel=${runLoadingLabel}\n />\n
    \n \n `;\n};\n" }, { "path": "lib/public/js/components/channel-operations-panel.js", "content": "import { h } from \"preact\";\nimport htm from \"htm\";\nimport { AgentBindingsSection } from \"./agents-tab/agent-bindings-section/index.js\";\nimport { AgentPairingSection } from \"./agents-tab/agent-pairing-section.js\";\n\nconst html = htm.bind(h);\n\nexport const ChannelOperationsPanel = ({\n agent = null,\n agents = [],\n onSetLocation = () => {},\n channelsSection = null,\n pairingsSection = null,\n}) => {\n if (agent) {\n return html`\n
    \n <${AgentBindingsSection}\n agent=${agent}\n agents=${agents}\n onSetLocation=${onSetLocation}\n />\n <${AgentPairingSection} agent=${agent} />\n
    \n `;\n }\n return html`\n
    \n ${channelsSection}\n ${pairingsSection}\n
    \n `;\n};\n" }, { "path": "lib/public/js/components/channels.js", "content": "import { h } from \"preact\";\nimport {\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from \"preact/hooks\";\nimport htm from \"htm\";\nimport { AddChannelMenu } from \"./add-channel-menu.js\";\nimport { ChannelAccountStatusBadge } from \"./channel-account-status-badge.js\";\nimport { ChannelLoginModal } from \"./channel-login-modal.js\";\nimport { ConfirmDialog } from \"./confirm-dialog.js\";\nimport { OverflowMenu, OverflowMenuItem } from \"./overflow-menu.js\";\nimport {\n deleteChannelAccount,\n fetchChannelAccounts,\n fetchChannelAccountLoginStatus,\n fetchRestartStatus,\n runChannelAccountLogin,\n updateChannelAccount,\n} from \"../lib/api.js\";\nimport { useCachedFetch } from \"../hooks/use-cached-fetch.js\";\nimport { usePolling } from \"../hooks/usePolling.js\";\nimport {\n isImplicitDefaultAccount,\n resolveChannelAccountLabel,\n} from \"../lib/channel-accounts.js\";\nimport { createChannelAccountWithProgress } from \"../lib/channel-create-operation.js\";\nimport { isChannelProviderDisabledForAdd } from \"../lib/channel-provider-availability.js\";\nimport { CreateChannelModal } from \"./agents-tab/create-channel-modal.js\";\nimport { showToast } from \"./toast.js\";\n\nconst html = htm.bind(h);\n\nconst ALL_CHANNELS = [\"telegram\", \"discord\", \"slack\", \"whatsapp\"];\nconst kChannelMeta = {\n telegram: { label: \"Telegram\", iconSrc: \"/assets/icons/telegram.svg\" },\n discord: { label: \"Discord\", iconSrc: \"/assets/icons/discord.svg\" },\n slack: { label: \"Slack\", iconSrc: \"/assets/icons/slack.svg\" },\n whatsapp: { label: \"WhatsApp\", iconSrc: \"/assets/icons/whatsapp.svg\" },\n};\n\nconst getChannelMeta = (channelId = \"\") => {\n const normalized = String(channelId || \"\").trim();\n return (\n kChannelMeta[normalized] || {\n label: normalized\n ? normalized.charAt(0).toUpperCase() + normalized.slice(1)\n : \"Channel\",\n iconSrc: \"\",\n }\n );\n};\n\nconst announceRestartRequired = () =>\n window.dispatchEvent(new CustomEvent(\"alphaclaw:restart-required\"));\n\nconst appendTerminalOutput = (previousOutput = \"\", nextChunk = \"\") =>\n [String(previousOutput || \"\").trim(), String(nextChunk || \"\").trim()]\n .filter(Boolean)\n .join(\"\\n\\n\");\n\nconst cloneLoginModalState = (state = {}) => ({\n loginAccount: state.loginAccount || null,\n loginOutput: String(state.loginOutput || \"\"),\n loginError: String(state.loginError || \"\"),\n loginRunning: !!state.loginRunning,\n loginMonitoring: !!state.loginMonitoring,\n loginCompleted: !!state.loginCompleted,\n loginLinked: !!state.loginLinked,\n loginRestartingGateway: !!state.loginRestartingGateway,\n loginRestartedGateway: !!state.loginRestartedGateway,\n});\n\nlet kPreservedChannelLoginModalState = null;\n\nconst clearChannelLoginModalState = ({\n setLoginAccount,\n setLoginOutput,\n setLoginError,\n setLoginRunning,\n setLoginMonitoring,\n setLoginCompleted,\n setLoginLinked,\n setLoginRestartingGateway,\n setLoginRestartedGateway,\n}) => {\n kPreservedChannelLoginModalState = null;\n setLoginAccount(null);\n setLoginOutput(\"\");\n setLoginError(\"\");\n setLoginRunning(false);\n setLoginMonitoring(false);\n setLoginCompleted(false);\n setLoginLinked(false);\n setLoginRestartingGateway(false);\n setLoginRestartedGateway(false);\n};\n\nexport const ChannelsCard = ({\n title = \"Channels\",\n items = [],\n loadingLabel = \"Loading...\",\n actions = null,\n renderItem = null,\n}) => html`\n
    \n
    \n

    ${title}

    \n ${actions ? html`
    ${actions}
    ` : null}\n
    \n
    \n ${items.length > 0\n ? items.map((item) => {\n const channelMeta = getChannelMeta(item.channel || item.id);\n const clickable = !!item.clickable;\n const customItem = renderItem\n ? renderItem({ item, channelMeta, clickable })\n : null;\n if (customItem) return customItem;\n return html`\n \n \n ${channelMeta.iconSrc\n ? html`\n \n `\n : null}\n ${item.label || channelMeta.label}\n ${item.detailText\n ? html`\n \n ${item.detailText}\n \n `\n : null}\n ${item.detailChevron\n ? html`\n \n \n \n `\n : null}\n \n \n ${item.trailing || null}\n \n
    \n `;\n })\n : html`
    \n ${loadingLabel}\n
    `}\n
    \n \n`;\n\nexport const Channels = ({\n channels = null,\n agents = [],\n onNavigate = () => {},\n onRefreshStatuses = () => {},\n onRestartGateway = async () => ({ ok: false }),\n}) => {\n const preservedLoginState = cloneLoginModalState(kPreservedChannelLoginModalState || {});\n const [saving, setSaving] = useState(false);\n const [createLoadingLabel, setCreateLoadingLabel] = useState(\"Creating...\");\n const [menuOpenId, setMenuOpenId] = useState(\"\");\n const [editingAccount, setEditingAccount] = useState(null);\n const [deletingAccount, setDeletingAccount] = useState(null);\n const {\n data: channelAccountsPayload,\n loading: loadingAccounts,\n refresh: refreshChannelAccounts,\n } = useCachedFetch(\"/api/channels/accounts\", fetchChannelAccounts, {\n maxAgeMs: 30000,\n });\n const channelAccounts = Array.isArray(channelAccountsPayload?.channels)\n ? channelAccountsPayload.channels\n : [];\n const [loginAccount, setLoginAccount] = useState(preservedLoginState.loginAccount);\n const [loginOutput, setLoginOutput] = useState(preservedLoginState.loginOutput);\n const [loginError, setLoginError] = useState(preservedLoginState.loginError);\n const [loginRunning, setLoginRunning] = useState(preservedLoginState.loginRunning);\n const [loginMonitoring, setLoginMonitoring] = useState(preservedLoginState.loginMonitoring);\n const [loginCompleted, setLoginCompleted] = useState(preservedLoginState.loginCompleted);\n const [loginLinked, setLoginLinked] = useState(preservedLoginState.loginLinked);\n const [loginRestartingGateway, setLoginRestartingGateway] = useState(\n preservedLoginState.loginRestartingGateway,\n );\n const [loginRestartedGateway, setLoginRestartedGateway] = useState(\n preservedLoginState.loginRestartedGateway,\n );\n const [loginRestartStatusChecked, setLoginRestartStatusChecked] = useState(false);\n\n const loadChannelAccounts = useCallback(async () => {\n try {\n await refreshChannelAccounts({ force: true });\n } catch {}\n }, [refreshChannelAccounts]);\n\n const loginStatusPoll = usePolling(\n () =>\n fetchChannelAccountLoginStatus({\n provider: loginAccount?.provider,\n accountId: loginAccount?.id,\n }),\n 1000,\n {\n enabled:\n !!loginAccount &&\n !!loginMonitoring &&\n String(loginAccount?.provider || \"\").trim() === \"whatsapp\",\n },\n );\n const restartStatusPoll = usePolling(fetchRestartStatus, 2000, {\n enabled: !!loginAccount && !!loginRestartingGateway,\n });\n\n const appendLoginOutput = useCallback((nextChunk = \"\") => {\n setLoginOutput((currentOutput) => appendTerminalOutput(currentOutput, nextChunk));\n }, []);\n\n useEffect(() => {\n const nextState = cloneLoginModalState({\n loginAccount,\n loginOutput,\n loginError,\n loginRunning,\n loginMonitoring,\n loginCompleted,\n loginLinked,\n loginRestartingGateway,\n loginRestartedGateway,\n });\n const hasActiveLoginState =\n !!nextState.loginAccount ||\n !!nextState.loginOutput ||\n !!nextState.loginError ||\n !!nextState.loginRunning ||\n !!nextState.loginMonitoring ||\n !!nextState.loginCompleted ||\n !!nextState.loginLinked ||\n !!nextState.loginRestartingGateway ||\n !!nextState.loginRestartedGateway;\n kPreservedChannelLoginModalState = hasActiveLoginState ? nextState : null;\n }, [\n loginAccount,\n loginCompleted,\n loginError,\n loginLinked,\n loginMonitoring,\n loginOutput,\n loginRestartedGateway,\n loginRestartingGateway,\n loginRunning,\n ]);\n\n const configuredChannelMap = useMemo(\n () =>\n new Map(\n channelAccounts.map((entry) => [\n String(entry?.channel || \"\").trim(),\n entry,\n ]),\n ),\n [channelAccounts],\n );\n\n const agentNameMap = useMemo(\n () =>\n new Map(\n agents.map((agent) => [\n String(agent?.id || \"\").trim(),\n String(agent?.name || \"\").trim() || String(agent?.id || \"\").trim(),\n ]),\n ),\n [agents],\n );\n\n const defaultAgentId = useMemo(\n () => String(agents.find((entry) => entry?.default)?.id || \"\").trim(),\n [agents],\n );\n const showAgentBadge = agents.length > 0;\n\n useEffect(() => {\n const handleOpenWhatsAppQr = () => {\n const configuredWhatsApp = channelAccounts.find(\n (entry) => String(entry?.channel || \"\").trim() === \"whatsapp\",\n );\n const account = Array.isArray(configuredWhatsApp?.accounts)\n ? configuredWhatsApp.accounts[0]\n : null;\n if (!account) return;\n const accountId = String(account?.id || \"\").trim() || \"default\";\n const boundAgentId = String(account?.boundAgentId || \"\").trim();\n const ownerAgentId =\n boundAgentId ||\n (isImplicitDefaultAccount({ accountId, boundAgentId })\n ? defaultAgentId\n : \"\");\n const accountData = {\n id: accountId,\n provider: \"whatsapp\",\n name: resolveChannelAccountLabel({\n channelId: \"whatsapp\",\n account,\n providerLabel: getChannelMeta(\"whatsapp\").label || \"WhatsApp\",\n }),\n ownerAgentId,\n envKey: String(account?.envKey || \"\").trim(),\n token: String(account?.token || \"\").trim(),\n };\n setLoginAccount(accountData);\n setLoginOutput(\"\");\n setLoginError(\"\");\n setLoginRunning(false);\n setLoginMonitoring(false);\n setLoginCompleted(false);\n setLoginLinked(false);\n setLoginRestartingGateway(false);\n setLoginRestartedGateway(false);\n setLoginRestartStatusChecked(false);\n };\n window.addEventListener(\"alphaclaw:open-whatsapp-qr\", handleOpenWhatsAppQr);\n return () => {\n window.removeEventListener(\"alphaclaw:open-whatsapp-qr\", handleOpenWhatsAppQr);\n };\n }, [channelAccounts, defaultAgentId]);\n\n const handleUpdateChannel = async (payload) => {\n setSaving(true);\n try {\n const result = await updateChannelAccount(payload);\n setEditingAccount(null);\n showToast(\"Channel updated\", \"success\");\n if (result?.restartRequired) {\n announceRestartRequired();\n }\n await Promise.all([\n loadChannelAccounts(),\n Promise.resolve(onRefreshStatuses?.()),\n ]);\n } catch (error) {\n showToast(error.message || \"Could not update channel\", \"error\");\n } finally {\n setSaving(false);\n }\n };\n\n const handleCreateChannel = async (payload) => {\n setSaving(true);\n setCreateLoadingLabel(\"Creating...\");\n try {\n const result = await createChannelAccountWithProgress({\n payload,\n onPhase: (label) => {\n setCreateLoadingLabel(String(label || \"\").trim() || \"Creating...\");\n },\n });\n setEditingAccount(null);\n showToast(\"Channel configured\", \"success\");\n if (result?.restartRequired) {\n announceRestartRequired();\n }\n await Promise.all([\n loadChannelAccounts(),\n Promise.resolve(onRefreshStatuses?.()),\n ]);\n } catch (error) {\n showToast(error.message || \"Could not configure channel\", \"error\");\n } finally {\n setSaving(false);\n setCreateLoadingLabel(\"Creating...\");\n }\n };\n\n const handleDeleteChannel = async () => {\n if (!deletingAccount) return;\n setSaving(true);\n try {\n await deleteChannelAccount({\n provider: deletingAccount.provider,\n accountId: deletingAccount.id,\n });\n setDeletingAccount(null);\n showToast(\"Channel deleted\", \"success\");\n await Promise.all([\n loadChannelAccounts(),\n Promise.resolve(onRefreshStatuses?.()),\n ]);\n } catch (error) {\n showToast(error.message || \"Could not delete channel\", \"error\");\n } finally {\n setSaving(false);\n }\n };\n const handleRunChannelLogin = async () => {\n if (!loginAccount) return;\n setLoginRunning(true);\n setLoginMonitoring(true);\n setLoginCompleted(false);\n setLoginLinked(false);\n setLoginRestartingGateway(false);\n setLoginRestartedGateway(false);\n setLoginRestartStatusChecked(false);\n setLoginError(\"\");\n setLoginOutput(\"\");\n try {\n const result = await runChannelAccountLogin({\n provider: loginAccount.provider,\n accountId: loginAccount.id,\n });\n const combinedOutput = appendTerminalOutput(result?.stdout || \"\", result?.stderr || \"\");\n setLoginOutput(combinedOutput || \"No terminal output captured.\");\n setLoginCompleted(!!result?.completed);\n if (result?.completed) {\n await loginStatusPoll.refresh();\n }\n } catch (error) {\n setLoginError(String(error?.message || \"Could not start channel login\"));\n setLoginMonitoring(false);\n } finally {\n setLoginRunning(false);\n }\n };\n\n useEffect(() => {\n if (!loginAccount || !loginMonitoring || loginLinked || loginRestartingGateway) {\n return;\n }\n if (!loginStatusPoll.data?.linked) return;\n\n let cancelled = false;\n setLoginLinked(true);\n setLoginError(\"\");\n appendLoginOutput(\"✅ Saved WhatsApp credentials detected.\");\n\n (async () => {\n setLoginRestartingGateway(true);\n setLoginRestartStatusChecked(false);\n appendLoginOutput(\"Restarting the gateway so the new WhatsApp session comes online...\");\n try {\n const restartResult = await onRestartGateway();\n if (restartResult && restartResult.ok === false) {\n throw new Error(restartResult.error || \"Could not restart gateway\");\n }\n if (cancelled) return;\n appendLoginOutput(\"✅ Gateway restart triggered. Waiting for it to come back online...\");\n await restartStatusPoll.refresh();\n if (cancelled) return;\n setLoginRestartStatusChecked(true);\n } catch (error) {\n if (cancelled) return;\n setLoginError(String(error?.message || \"Could not restart gateway\"));\n appendLoginOutput(\n \"WhatsApp linked, but the gateway restart failed. You may need to restart it manually.\",\n );\n setLoginRestartStatusChecked(false);\n setLoginRestartingGateway(false);\n }\n })();\n\n return () => {\n cancelled = true;\n };\n }, [\n appendLoginOutput,\n loadChannelAccounts,\n loginAccount,\n loginLinked,\n loginMonitoring,\n loginRestartingGateway,\n loginStatusPoll.data?.linked,\n onRefreshStatuses,\n onRestartGateway,\n restartStatusPoll.refresh,\n ]);\n\n useEffect(() => {\n if (!loginAccount || !loginRestartingGateway) return;\n if (!loginRestartStatusChecked) return;\n const restartInProgress = !!restartStatusPoll.data?.restartInProgress;\n const gatewayRunning = restartStatusPoll.data?.gatewayRunning !== false;\n if (restartInProgress || !gatewayRunning) return;\n\n let cancelled = false;\n\n (async () => {\n setLoginRestartedGateway(true);\n setLoginMonitoring(false);\n appendLoginOutput(\"✅ Gateway restart complete.\");\n showToast(\"Channel linked\", \"success\");\n await Promise.all([\n loadChannelAccounts(),\n Promise.resolve(onRefreshStatuses?.()),\n ]);\n if (cancelled) return;\n clearChannelLoginModalState({\n setLoginAccount,\n setLoginOutput,\n setLoginError,\n setLoginRunning,\n setLoginMonitoring,\n setLoginCompleted,\n setLoginLinked,\n setLoginRestartingGateway,\n setLoginRestartedGateway,\n });\n })();\n\n return () => {\n cancelled = true;\n };\n }, [\n appendLoginOutput,\n loadChannelAccounts,\n loginAccount,\n loginRestartStatusChecked,\n loginRestartingGateway,\n onRefreshStatuses,\n restartStatusPoll.data?.gatewayRunning,\n restartStatusPoll.data?.restartInProgress,\n ]);\n\n const openCreateChannelModal = (provider) => {\n setMenuOpenId(\"\");\n setEditingAccount({\n id: \"default\",\n provider,\n name: getChannelMeta(provider).label,\n ownerAgentId: defaultAgentId,\n mode: \"create\",\n });\n };\n const items = useMemo(\n () => {\n if (loadingAccounts || !channels) return [];\n const channelOrderMap = new Map(\n channelAccounts.map((entry, index) => [\n String(entry?.channel || \"\").trim(),\n index,\n ]),\n );\n const accountOrderMap = new Map(\n channelAccounts.flatMap((entry) =>\n (Array.isArray(entry?.accounts) ? entry.accounts : []).map(\n (account, accountIndex) => [\n `${String(entry?.channel || \"\").trim()}:${String(account?.id || \"\").trim() || \"default\"}`,\n accountIndex,\n ],\n ),\n ),\n );\n return Array.from(\n new Set([\n ...channelAccounts.map((entry) =>\n String(entry?.channel || \"\").trim(),\n ),\n ]),\n )\n .filter(Boolean)\n .flatMap((channelId) => {\n const info = channels[channelId];\n const configuredChannel = configuredChannelMap.get(channelId);\n const accounts = Array.isArray(configuredChannel?.accounts)\n ? configuredChannel.accounts\n : [];\n if (!configuredChannel) return [];\n\n return accounts.map((account) => {\n const accountId = String(account?.id || \"\").trim() || \"default\";\n const accountStatusInfo =\n info?.accounts?.[accountId] || info || null;\n const accountStatus = String(\n accountStatusInfo?.status || account?.status || \"configured\",\n ).trim();\n const pairedCount = Number(\n accountStatusInfo?.paired ??\n account?.paired ??\n info?.paired ??\n 0,\n );\n const isClickable =\n channelId === \"telegram\" &&\n accountStatus === \"paired\" &&\n onNavigate;\n const boundAgentId = String(account?.boundAgentId || \"\").trim();\n const ownerAgentId =\n boundAgentId ||\n (isImplicitDefaultAccount({ accountId, boundAgentId })\n ? defaultAgentId\n : \"\");\n const ownerAgentName =\n agentNameMap.get(ownerAgentId) || ownerAgentId || \"\";\n const accountData = {\n id: accountId,\n provider: channelId,\n name: resolveChannelAccountLabel({\n channelId,\n account,\n providerLabel: getChannelMeta(channelId).label || \"Channel\",\n }),\n ownerAgentId,\n envKey: String(account?.envKey || \"\").trim(),\n token: String(account?.token || \"\").trim(),\n };\n\n const trailing = html`\n
    \n ${\n showAgentBadge &&\n ownerAgentName &&\n accountStatus === \"paired\"\n ? html`<${ChannelAccountStatusBadge}\n status=${accountStatus}\n ownerAgentName=${ownerAgentName}\n showAgentBadge=${showAgentBadge}\n channelId=${channelId}\n pairedCount=${pairedCount}\n />`\n : null\n }\n ${\n accountStatus === \"paired\"\n ? showAgentBadge && ownerAgentName\n ? null\n : html`<${ChannelAccountStatusBadge}\n status=${accountStatus}\n ownerAgentName=\"\"\n showAgentBadge=${false}\n channelId=${channelId}\n pairedCount=${pairedCount}\n />`\n : html`<${ChannelAccountStatusBadge}\n status=${accountStatus}\n ownerAgentName=\"\"\n showAgentBadge=${false}\n channelId=${channelId}\n pairedCount=${pairedCount}\n />`\n }\n <${OverflowMenu}\n open=${menuOpenId === `${channelId}:${accountId}`}\n ariaLabel=\"Open channel actions\"\n title=\"Open channel actions\"\n onClose=${() => setMenuOpenId(\"\")}\n onToggle=${() =>\n setMenuOpenId((current) =>\n current === `${channelId}:${accountId}`\n ? \"\"\n : `${channelId}:${accountId}`,\n )}\n >\n <${OverflowMenuItem}\n onClick=${() => {\n setMenuOpenId(\"\");\n setEditingAccount(accountData);\n }}\n >\n Edit\n \n ${channelId === \"whatsapp\"\n ? html`\n <${OverflowMenuItem}\n onClick=${() => {\n setMenuOpenId(\"\");\n setLoginAccount(accountData);\n setLoginOutput(\"\");\n setLoginError(\"\");\n setLoginRunning(false);\n setLoginMonitoring(false);\n setLoginCompleted(false);\n setLoginLinked(false);\n setLoginRestartingGateway(false);\n setLoginRestartedGateway(false);\n setLoginRestartStatusChecked(false);\n }}\n >\n Link WhatsApp (QR)\n \n `\n : null}\n <${OverflowMenuItem}\n className=\"text-status-error hover:text-status-error\"\n onClick=${() => {\n setMenuOpenId(\"\");\n setDeletingAccount(accountData);\n }}\n >\n Delete\n \n \n
    \n `;\n\n return {\n id: `${channelId}:${accountId}`,\n channel: channelId,\n channelOrder: Number(channelOrderMap.get(channelId) ?? 9999),\n accountOrder: Number(\n accountOrderMap.get(`${channelId}:${accountId}`) ?? 9999,\n ),\n label: resolveChannelAccountLabel({\n channelId,\n account,\n providerLabel: getChannelMeta(channelId).label || \"Channel\",\n }),\n isAwaitingPairing: accountStatus !== \"paired\",\n detailText: isClickable ? \"Workspace\" : \"\",\n detailChevron: isClickable,\n clickable: isClickable,\n onClick: isClickable\n ? () =>\n onNavigate(`telegram/${encodeURIComponent(accountId)}`)\n : undefined,\n trailing,\n };\n });\n })\n .sort((a, b) => {\n const awaitingDiff =\n Number(!!a?.isAwaitingPairing) - Number(!!b?.isAwaitingPairing);\n if (awaitingDiff !== 0) return awaitingDiff;\n const channelOrderDiff =\n Number(a?.channelOrder ?? 9999) - Number(b?.channelOrder ?? 9999);\n if (channelOrderDiff !== 0) return channelOrderDiff;\n const accountOrderDiff =\n Number(a?.accountOrder ?? 9999) - Number(b?.accountOrder ?? 9999);\n if (accountOrderDiff !== 0) return accountOrderDiff;\n return String(a?.label || \"\").localeCompare(String(b?.label || \"\"));\n })\n ;\n },\n [\n agentNameMap,\n agents.length,\n channelAccounts,\n channels,\n configuredChannelMap,\n defaultAgentId,\n loadingAccounts,\n menuOpenId,\n onNavigate,\n showAgentBadge,\n ],\n );\n\n return html`\n
    \n <${ChannelsCard}\n title=\"Channels\"\n items=${items}\n loadingLabel=${loadingAccounts\n ? \"Loading...\"\n : \"No channels configured\"}\n actions=${html`\n <${AddChannelMenu}\n open=${menuOpenId === \"__create_channel\"}\n onClose=${() => setMenuOpenId(\"\")}\n onToggle=${() =>\n setMenuOpenId((current) =>\n current === \"__create_channel\" ? \"\" : \"__create_channel\",\n )}\n triggerDisabled=${saving || loadingAccounts}\n channelIds=${ALL_CHANNELS}\n getChannelMeta=${getChannelMeta}\n isChannelDisabled=${(channelId) =>\n isChannelProviderDisabledForAdd({\n configuredChannelMap,\n provider: channelId,\n })}\n onSelectChannel=${openCreateChannelModal}\n />\n `}\n />\n <${CreateChannelModal}\n visible=${!!editingAccount}\n loading=${saving}\n createLoadingLabel=${createLoadingLabel}\n agents=${agents}\n existingChannels=${channelAccounts}\n mode=${editingAccount?.mode === \"create\" ? \"create\" : \"edit\"}\n account=${editingAccount}\n initialAgentId=${String(editingAccount?.ownerAgentId || \"\").trim()}\n initialProvider=${String(editingAccount?.provider || \"\").trim()}\n onClose=${() => setEditingAccount(null)}\n onSubmit=${editingAccount?.mode === \"create\"\n ? handleCreateChannel\n : handleUpdateChannel}\n />\n <${ConfirmDialog}\n visible=${!!deletingAccount}\n title=\"Delete channel?\"\n message=${`Remove ${String(deletingAccount?.name || \"this channel\").trim()} from your configured channels?`}\n confirmLabel=\"Delete\"\n confirmLoadingLabel=\"Deleting...\"\n confirmTone=\"warning\"\n confirmLoading=${saving}\n onConfirm=${handleDeleteChannel}\n onCancel=${() => {\n if (saving) return;\n setDeletingAccount(null);\n }}\n />\n <${ChannelLoginModal}\n visible=${!!loginAccount}\n loading=${loginRunning || loginRestartingGateway}\n title=${`Link ${String(loginAccount?.name || \"WhatsApp\").trim()} via QR`}\n output=${loginOutput}\n error=${loginError}\n onRun=${handleRunChannelLogin}\n onClose=${() => {\n if (loginRunning || loginRestartingGateway) return;\n clearChannelLoginModalState({\n setLoginAccount,\n setLoginOutput,\n setLoginError,\n setLoginRunning,\n setLoginMonitoring,\n setLoginCompleted,\n setLoginLinked,\n setLoginRestartingGateway,\n setLoginRestartedGateway,\n });\n }}\n runDisabled=${loginRunning || loginRestartingGateway || loginRestartedGateway}\n runLabel=${loginLinked\n ? loginRestartingGateway\n ? \"Restarting...\"\n : loginRestartedGateway\n ? \"Linked\"\n : \"Awaiting restart...\"\n : \"Generate QR\"}\n runLoadingLabel=${loginRestartingGateway ? \"Restarting...\" : \"Running...\"}\n closeLabel=${loginRestartedGateway ? \"Done\" : \"Close\"}\n />\n
    \n `;\n};\n\nexport { ALL_CHANNELS, getChannelMeta, kChannelMeta };\n" }, { "path": "lib/public/js/components/confirm-dialog.js", "content": "import { h } from \"preact\";\nimport { useEffect } from \"preact/hooks\";\nimport htm from \"htm\";\nimport { ActionButton } from \"./action-button.js\";\n\nconst html = htm.bind(h);\n\nexport const ConfirmDialog = ({\n visible = false,\n title = \"Confirm action\",\n message = \"Are you sure you want to continue?\",\n details = null,\n confirmLabel = \"Confirm\",\n confirmLoadingLabel = \"Working...\",\n cancelLabel = \"Cancel\",\n onConfirm,\n onCancel,\n confirmTone = \"primary\",\n confirmLoading = false,\n confirmDisabled = false,\n}) => {\n useEffect(() => {\n if (!visible) return;\n\n const handleKeydown = (event) => {\n if (event.key === \"Escape\") {\n onCancel?.();\n }\n };\n\n window.addEventListener(\"keydown\", handleKeydown);\n return () => window.removeEventListener(\"keydown\", handleKeydown);\n }, [visible, onCancel]);\n\n if (!visible) return null;\n const actionTone = confirmTone === \"warning\" ? \"warning\" : \"primary\";\n\n return html`\n {\n if (event.target === event.currentTarget) onCancel?.();\n }}\n >\n
    \n

    ${title}

    \n

    ${message}

    \n ${details}\n
    \n <${ActionButton}\n onClick=${onCancel}\n disabled=${confirmLoading}\n tone=\"secondary\"\n size=\"md\"\n idleLabel=${cancelLabel}\n className=\"px-4 py-2 rounded-lg text-sm\"\n />\n <${ActionButton}\n onClick=${onConfirm}\n disabled=${confirmDisabled}\n loading=${confirmLoading}\n tone=${actionTone}\n size=\"md\"\n idleLabel=${confirmLabel}\n loadingLabel=${confirmLoadingLabel}\n className=\"px-4 py-2 rounded-lg text-sm\"\n />\n
    \n
    \n \n `;\n};\n" }, { "path": "lib/public/js/components/credentials-modal.js", "content": "import { h } from \"preact\";\nimport { useEffect, useRef, useState } from \"preact/hooks\";\nimport htm from \"htm\";\nimport { saveGoogleCredentials } from \"../lib/api.js\";\nimport { SecretInput } from \"./secret-input.js\";\nimport { ModalShell } from \"./modal-shell.js\";\nimport { PageHeader } from \"./page-header.js\";\nimport { ActionButton } from \"./action-button.js\";\nimport { CloseIcon } from \"./icons.js\";\nconst html = htm.bind(h);\n\nexport const CredentialsModal = ({\n visible,\n onClose,\n onSaved,\n title = \"Connect Google Workspace\",\n submitLabel = \"Connect Google\",\n defaultInstrType = \"workspace\",\n client = \"default\",\n personal = false,\n accountId = \"\",\n initialValues = {},\n}) => {\n const [clientId, setClientId] = useState(\"\");\n const [clientSecret, setClientSecret] = useState(\"\");\n const [email, setEmail] = useState(\"\");\n const [error, setError] = useState(\"\");\n const [saving, setSaving] = useState(false);\n const [instrType, setInstrType] = useState(defaultInstrType);\n const [redirectUriCopied, setRedirectUriCopied] = useState(false);\n const fileRef = useRef(null);\n\n useEffect(() => {\n if (!visible) return;\n setClientId(String(initialValues.clientId || \"\"));\n setClientSecret(String(initialValues.clientSecret || \"\"));\n setEmail(String(initialValues.email || \"\"));\n setInstrType(defaultInstrType);\n setError(\"\");\n setRedirectUriCopied(false);\n }, [visible, initialValues, defaultInstrType]);\n\n if (!visible) return null;\n\n const redirectUri = `${window.location.origin}/auth/google/callback`;\n\n const copyRedirectUri = async () => {\n try {\n await navigator.clipboard.writeText(redirectUri);\n setRedirectUriCopied(true);\n window.setTimeout(() => setRedirectUriCopied(false), 1500);\n } catch {\n setError(\"Unable to copy redirect URI\");\n }\n };\n\n const handleFile = async (e) => {\n const file = e.target.files[0];\n if (!file) return;\n try {\n const text = await file.text();\n const json = JSON.parse(text);\n const creds = json.installed || json.web || json;\n if (creds.client_id) setClientId(creds.client_id);\n if (creds.client_secret) setClientSecret(creds.client_secret);\n } catch {\n setError(\"Invalid JSON file\");\n }\n };\n\n const submit = async () => {\n setError(\"\");\n if (!clientId || !clientSecret || !email) {\n setError(\"Client ID, Client Secret, and Email are required\");\n return;\n }\n setSaving(true);\n try {\n const data = await saveGoogleCredentials({\n clientId,\n clientSecret,\n email,\n client,\n personal,\n accountId,\n });\n if (data.ok) {\n onClose();\n onSaved?.(data.account);\n } else setError(data.error || \"Failed to save credentials\");\n } catch {\n setError(\"Request failed\");\n } finally {\n setSaving(false);\n }\n };\n\n const btnCls = (type) =>\n `flex-1 text-center border-0 cursor-pointer transition-colors` +\n ` ${instrType === type ? \"\" : \"hover:text-white\"}`;\n\n const btnStyle = (type) =>\n `font-family: inherit; font-size: 11px; letter-spacing: 0.03em; padding: 5px 10px;` +\n (instrType === type\n ? ` color: var(--accent); background: var(--bg-active);`\n : ` color: var(--text-muted); background: transparent;`);\n\n const renderRedirectUriInstruction = () => html`\n
    \n e.target.select()}\n onclick=${(e) => e.target.select()}\n class=\"flex-1 min-w-0 bg-field border border-border rounded px-2 py-1 text-body text-xs focus:outline-none focus:border-fg-muted\"\n />\n \n ${redirectUriCopied ? \"Copied\" : \"Copy\"}\n \n
    \n `;\n\n return html` <${ModalShell}\n visible=${visible}\n onClose=${onClose}\n closeOnOverlayClick=${false}\n panelClassName=\"bg-modal border border-border rounded-xl p-6 max-w-lg w-full space-y-4\"\n >\n <${PageHeader}\n title=${title}\n actions=${html`\n \n <${CloseIcon} className=\"w-3.5 h-3.5 text-body\" />\n \n `}\n />\n
    \n
    \n

    \n You'll need a Google Cloud OAuth app.${\" \"}\n Create one →\n

    \n \n \n Step-by-step instructions\n \n \n setInstrType(\"workspace\")}\n class=${btnCls(\"workspace\")}\n style=${btnStyle(\"workspace\")}\n >\n Google Workspace\n \n setInstrType(\"personal\")}\n class=${btnCls(\"personal\")}\n style=${btnStyle(\"personal\")}\n >\n Personal Gmail\n \n
    \n ${instrType === \"personal\"\n ? html`\n
    \n
      \n
    1. \n ${\" \"}Create a Google Cloud project${\" \"}(or use existing)\n
      2. \n
    2. \n Go to${\" \"}OAuth consent screen${\" \"}→ set to External\n
      3. \n
    3. \n Under${\" \"}Test users, add your own email\n
      4. \n
    4. \n ${\" \"}Enable APIs${\" \"}for the services you selected below\n
      5. \n
    5. \n Go to${\" \"}Credentials${\" \"}→ Create OAuth 2.0 Client ID (Web application)\n
      6. \n
    6. \n Add redirect URI:${renderRedirectUriInstruction()}\n
      7. \n
    7. \n Copy Client ID + Secret (or download credentials JSON)\n
      8. \n
    \n

    \n ⚠️ App will be in \"Testing\" mode. Only emails added as\n Test Users can sign in (up to 100).\n

    \n
    \n `\n : html`\n
    \n
      \n
    1. \n ${\" \"}Create a Google Cloud project${\" \"}(or use existing)\n
      2. \n
    2. \n Go to${\" \"}OAuth consent screen${\" \"}→ set to Internal (Workspace\n only)\n
      3. \n
    3. \n ${\" \"}Enable APIs${\" \"}for the services you selected below\n
      4. \n
    4. \n Go to${\" \"}Credentials${\" \"}→ Create OAuth 2.0 Client ID (Web application)\n
      5. \n
    5. \n Add redirect URI:${renderRedirectUriInstruction()}\n
      6. \n
    6. \n Copy Client ID + Secret (or download credentials JSON)\n
      7. \n
    \n

    \n ✓ Internal apps skip test users and verification. Only\n users in your Workspace org can authorize this Google app.\n

    \n
    \n `}\n \n
    \n \n
    \n
    \n
    \n
    \n or enter manually\n
    \n
    \n
    \n \n <${SecretInput}\n value=${clientId}\n onInput=${(e) => setClientId(e.target.value)}\n placeholder=\"xxxx.apps.googleusercontent.com\"\n inputClass=\"flex-1 bg-field border border-border rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-fg-muted\"\n />\n
    \n
    \n
    \n
    \n
    \n \n \n
    \n <${ActionButton}\n onClick=${submit}\n disabled=${saving}\n loading=${saving}\n tone=\"primary\"\n size=\"lg\"\n idleLabel=${submitLabel}\n loadingLabel=\"Saving...\"\n className=\"w-full px-4 py-2 rounded-lg text-sm\"\n />\n
    \n ${error ? html`
    ${error}
    ` : null}\n `;\n};\n" }, { "path": "lib/public/js/components/cron-tab/cron-calendar-helpers.js", "content": "const kMinuteMs = 60 * 1000;\nconst kHourMs = 60 * kMinuteMs;\nconst kDayMs = 24 * kHourMs;\nconst kRollingPastDays = 3;\nconst kRollingFutureDays = 3;\n\nconst toFiniteNumber = (value, fallback = 0) => {\n const parsed = Number(value);\n return Number.isFinite(parsed) ? parsed : fallback;\n};\n\nconst startOfHourMs = (valueMs) => {\n const dateValue = new Date(toFiniteNumber(valueMs, Date.now()));\n dateValue.setMinutes(0, 0, 0);\n return dateValue.getTime();\n};\n\nconst startOfDayMs = (valueMs) => {\n const dateValue = new Date(toFiniteNumber(valueMs, Date.now()));\n dateValue.setHours(0, 0, 0, 0);\n return dateValue.getTime();\n};\n\nconst parseCronFields = (schedule = {}) => {\n const cronExpr = String(\n schedule?.expr || schedule?.cron || schedule?.cronExpr || \"\",\n ).trim();\n const fields = cronExpr.split(/\\s+/);\n if (fields.length < 5) return null;\n const [minuteField, hourField, dayOfMonthField, monthField, dayOfWeekField] = fields;\n return {\n minuteField,\n hourField,\n dayOfMonthField,\n monthField,\n dayOfWeekField,\n };\n};\n\nconst parseToken = (token = \"\", minValue = 0, maxValue = 0) => {\n if (/^\\d+$/.test(token)) {\n const parsed = Number.parseInt(token, 10);\n if (Number.isFinite(parsed) && parsed >= minValue && parsed <= maxValue) return [parsed];\n return [];\n }\n const rangeMatch = token.match(/^(\\d+)-(\\d+)$/);\n if (rangeMatch) {\n const startValue = Number.parseInt(rangeMatch[1], 10);\n const endValue = Number.parseInt(rangeMatch[2], 10);\n if (!Number.isFinite(startValue) || !Number.isFinite(endValue)) return [];\n const safeStart = Math.max(minValue, Math.min(maxValue, startValue));\n const safeEnd = Math.max(minValue, Math.min(maxValue, endValue));\n if (safeStart > safeEnd) return [];\n return Array.from({ length: safeEnd - safeStart + 1 }, (_, index) => safeStart + index);\n }\n const stepMatch = token.match(/^\\*\\/(\\d+)$/);\n if (stepMatch) {\n const step = Number.parseInt(stepMatch[1], 10);\n if (!Number.isFinite(step) || step <= 0) return [];\n const values = [];\n for (let value = minValue; value <= maxValue; value += step) values.push(value);\n return values;\n }\n if (token === \"*\") {\n return Array.from({ length: maxValue - minValue + 1 }, (_, index) => minValue + index);\n }\n return [];\n};\n\nconst parseCronFieldSet = (field = \"\", minValue = 0, maxValue = 0) => {\n const raw = String(field || \"\").trim();\n if (!raw) return new Set();\n const tokens = raw.split(\",\").map((segment) => segment.trim()).filter(Boolean);\n const values = tokens.flatMap((token) => parseToken(token, minValue, maxValue));\n return new Set(values);\n};\n\nconst buildCronMatcher = (cronFields = null) => {\n if (!cronFields) return null;\n return {\n minuteSet: parseCronFieldSet(cronFields.minuteField, 0, 59),\n hourSet: parseCronFieldSet(cronFields.hourField, 0, 23),\n dayOfMonthSet: parseCronFieldSet(cronFields.dayOfMonthField, 1, 31),\n monthSet: parseCronFieldSet(cronFields.monthField, 1, 12),\n dayOfWeekSet: parseCronFieldSet(cronFields.dayOfWeekField, 0, 7),\n };\n};\n\nconst cronFieldMatches = (dateValue, cronMatcher = null) => {\n if (!cronMatcher) return false;\n const { minuteSet, hourSet, dayOfMonthSet, monthSet, dayOfWeekSet } = cronMatcher;\n\n const minute = dateValue.getMinutes();\n const hour = dateValue.getHours();\n const dayOfMonth = dateValue.getDate();\n const month = dateValue.getMonth() + 1;\n const dayOfWeek = dateValue.getDay();\n const dayOfWeekAliases = dayOfWeek === 0 ? [0, 7] : [dayOfWeek];\n\n const minuteMatches = minuteSet.size === 0 || minuteSet.has(minute);\n const hourMatches = hourSet.size === 0 || hourSet.has(hour);\n const dayOfMonthMatches = dayOfMonthSet.size === 0 || dayOfMonthSet.has(dayOfMonth);\n const monthMatches = monthSet.size === 0 || monthSet.has(month);\n const dayOfWeekMatches =\n dayOfWeekSet.size === 0 || dayOfWeekAliases.some((candidate) => dayOfWeekSet.has(candidate));\n\n return minuteMatches && hourMatches && dayOfMonthMatches && monthMatches && dayOfWeekMatches;\n};\n\nconst toDayKey = (valueMs) => {\n const dateValue = new Date(valueMs);\n const year = dateValue.getFullYear();\n const month = String(dateValue.getMonth() + 1).padStart(2, \"0\");\n const day = String(dateValue.getDate()).padStart(2, \"0\");\n return `${year}-${month}-${day}`;\n};\n\nexport const getRollingRange = ({\n nowMs = Date.now(),\n pastDays = kRollingPastDays,\n futureDays = kRollingFutureDays,\n} = {}) => {\n const safeNowMs = toFiniteNumber(nowMs, Date.now());\n const safePastDays = Math.max(0, Number.parseInt(String(pastDays), 10) || kRollingPastDays);\n const safeFutureDays = Math.max(\n 0,\n Number.parseInt(String(futureDays), 10) || kRollingFutureDays,\n );\n const rangeStartMs = startOfDayMs(safeNowMs - safePastDays * kDayMs);\n const rangeEndMs = startOfDayMs(safeNowMs + safeFutureDays * kDayMs) + kDayMs - 1;\n return {\n nowMs: safeNowMs,\n rangeStartMs,\n rangeEndMs,\n dayCount: safePastDays + safeFutureDays + 1,\n };\n};\n\nexport const buildSlotKey = ({ jobId = \"\", scheduledAtMs = 0 } = {}) =>\n `${String(jobId || \"\")}:${toFiniteNumber(scheduledAtMs, 0)}`;\n\nconst isHighFrequencyCronJob = (job = {}) => {\n const scheduleKind = String(job?.schedule?.kind || \"\").trim().toLowerCase();\n if (scheduleKind !== \"cron\") return false;\n const cronFields = parseCronFields(job?.schedule || {});\n if (!cronFields) return false;\n if (cronFields.dayOfMonthField !== \"*\" || cronFields.monthField !== \"*\") return false;\n\n const minuteStepMatch = String(cronFields.minuteField || \"\").trim().match(/^\\*\\/(\\d+)$/);\n const minuteSet = parseCronFieldSet(cronFields.minuteField, 0, 59);\n const hourSet = parseCronFieldSet(cronFields.hourField, 0, 23);\n const activeHoursPerDay = hourSet.size > 0 ? hourSet.size : 24;\n const runsPerHour = minuteSet.size > 0 ? minuteSet.size : 1;\n\n if (minuteStepMatch) {\n const stepMinutes = Number.parseInt(minuteStepMatch[1], 10);\n if (!Number.isFinite(stepMinutes) || stepMinutes <= 0) return false;\n // Treat frequent minute-step schedules over broad hour windows as \"repeating/noisy\".\n return stepMinutes <= 30 && activeHoursPerDay >= 4;\n }\n\n // Catch dense minute lists over broad hour windows, e.g. 0,15,30,45 6-13 * * 1-5.\n return runsPerHour >= 3 && activeHoursPerDay >= 4;\n};\n\nexport const classifyRepeatingJobs = (jobs = []) => {\n const repeatingJobs = [];\n const scheduledJobs = [];\n jobs.forEach((job) => {\n const scheduleKind = String(job?.schedule?.kind || \"\").trim().toLowerCase();\n if (scheduleKind === \"every\" || isHighFrequencyCronJob(job)) repeatingJobs.push(job);\n else scheduledJobs.push(job);\n });\n return { repeatingJobs, scheduledJobs };\n};\n\nexport const expandJobsToRollingSlots = ({\n jobs = [],\n nowMs = Date.now(),\n pastDays = kRollingPastDays,\n futureDays = kRollingFutureDays,\n} = {}) => {\n const range = getRollingRange({ nowMs, pastDays, futureDays });\n const slots = [];\n const days = Array.from({ length: range.dayCount }, (_, offset) => {\n const dayStartMs = startOfDayMs(range.rangeStartMs + offset * kDayMs);\n return {\n dayStartMs,\n dayKey: toDayKey(dayStartMs),\n label: new Date(dayStartMs).toLocaleDateString([], {\n weekday: \"short\",\n month: \"numeric\",\n day: \"numeric\",\n }),\n };\n });\n\n jobs.forEach((job) => {\n const scheduleKind = String(job?.schedule?.kind || \"\").trim().toLowerCase();\n if (scheduleKind === \"every\") return;\n if (scheduleKind === \"at\") {\n const atMs = toFiniteNumber(job?.schedule?.at, 0);\n if (atMs < range.rangeStartMs || atMs > range.rangeEndMs) return;\n const slotMs = startOfHourMs(atMs);\n slots.push({\n key: buildSlotKey({ jobId: job.id, scheduledAtMs: atMs }),\n jobId: String(job?.id || \"\"),\n jobName: String(job?.name || job?.id || \"\"),\n scheduledAtMs: atMs,\n hourBucketMs: slotMs,\n dayKey: toDayKey(slotMs),\n hourOfDay: new Date(slotMs).getHours(),\n });\n return;\n }\n const cronFields = parseCronFields(job?.schedule || {});\n if (!cronFields) return;\n const cronMatcher = buildCronMatcher(cronFields);\n if (!cronMatcher) return;\n for (\n let tickMs = range.rangeStartMs;\n tickMs <= range.rangeEndMs;\n tickMs += kMinuteMs\n ) {\n const dateValue = new Date(tickMs);\n if (!cronFieldMatches(dateValue, cronMatcher)) continue;\n const hourBucketMs = startOfHourMs(tickMs);\n slots.push({\n key: buildSlotKey({ jobId: job.id, scheduledAtMs: tickMs }),\n jobId: String(job?.id || \"\"),\n jobName: String(job?.name || job?.id || \"\"),\n scheduledAtMs: tickMs,\n hourBucketMs,\n dayKey: toDayKey(tickMs),\n hourOfDay: dateValue.getHours(),\n });\n }\n });\n\n slots.sort((left, right) => left.scheduledAtMs - right.scheduledAtMs);\n return {\n range,\n days,\n slots,\n };\n};\n\nconst normalizeRunStatus = (value = \"\") => {\n const normalized = String(value || \"\").trim().toLowerCase();\n if (normalized === \"ok\" || normalized === \"error\" || normalized === \"skipped\") {\n return normalized;\n }\n return \"\";\n};\n\nexport const mapRunStatusesToSlots = ({\n slots = [],\n bulkRunsByJobId = {},\n nowMs = Date.now(),\n toleranceMs = 45 * kMinuteMs,\n} = {}) => {\n const statusBySlotKey = {};\n const safeNowMs = toFiniteNumber(nowMs, Date.now());\n const safeToleranceMs = Math.max(0, toFiniteNumber(toleranceMs, 45 * kMinuteMs));\n\n const runEntriesByJobId = {};\n Object.entries(bulkRunsByJobId || {}).forEach(([jobId, runResult]) => {\n const entries = Array.isArray(runResult?.entries) ? runResult.entries : [];\n const normalizedEntries = entries\n .map((entry) => ({\n ts: toFiniteNumber(entry?.ts, 0),\n status: normalizeRunStatus(entry?.status),\n }))\n .filter((entry) => entry.ts > 0 && entry.status)\n .sort((left, right) => left.ts - right.ts);\n runEntriesByJobId[jobId] = normalizedEntries;\n });\n\n const consumedRunTimestampsByJobId = {};\n slots.forEach((slot) => {\n if (slot.scheduledAtMs > safeNowMs) return;\n const jobId = String(slot.jobId || \"\");\n const runEntries = runEntriesByJobId[jobId] || [];\n if (runEntries.length === 0) return;\n const consumedSet = consumedRunTimestampsByJobId[jobId] || new Set();\n consumedRunTimestampsByJobId[jobId] = consumedSet;\n\n let nearestEntry = null;\n let nearestDeltaMs = Number.MAX_SAFE_INTEGER;\n runEntries.forEach((entry) => {\n if (consumedSet.has(entry.ts)) return;\n const deltaMs = Math.abs(entry.ts - slot.scheduledAtMs);\n if (deltaMs > safeToleranceMs) return;\n if (deltaMs < nearestDeltaMs) {\n nearestDeltaMs = deltaMs;\n nearestEntry = entry;\n }\n });\n\n if (!nearestEntry) return;\n consumedSet.add(nearestEntry.ts);\n statusBySlotKey[slot.key] = nearestEntry.status;\n });\n\n return statusBySlotKey;\n};\n\nconst readAvgTokens = (usageByJobId = {}, jobId = \"\") => {\n const usage = usageByJobId?.[jobId] || {};\n const avg = toFiniteNumber(\n usage.avgTokensPerRun,\n usage.runCount > 0 ? Math.round(toFiniteNumber(usage.totalTokens, 0) / usage.runCount) : 0,\n );\n return Math.max(0, avg);\n};\n\nexport const kNext24hMs = 24 * kHourMs;\n\nexport const getUpcomingSlots = ({\n slots = [],\n nowMs = Date.now(),\n windowMs = kNext24hMs,\n limit = 12,\n} = {}) => {\n const safeNowMs = toFiniteNumber(nowMs, Date.now());\n const cutoffMs = safeNowMs + toFiniteNumber(windowMs, kNext24hMs);\n return slots\n .filter((slot) => slot.scheduledAtMs > safeNowMs && slot.scheduledAtMs <= cutoffMs)\n .sort((left, right) => left.scheduledAtMs - right.scheduledAtMs)\n .slice(0, limit);\n};\n\nexport const buildTokenTierByJobId = ({ jobs = [], usageByJobId = {} } = {}) => {\n const avgValues = jobs\n .filter((job) => job?.enabled !== false)\n .map((job) => readAvgTokens(usageByJobId, String(job?.id || \"\")))\n .filter((value) => value > 0)\n .sort((left, right) => left - right);\n\n if (avgValues.length === 0) {\n return jobs.reduce((accumulator, job) => {\n const jobId = String(job?.id || \"\");\n accumulator[jobId] = job?.enabled === false ? \"disabled\" : \"unknown\";\n return accumulator;\n }, {});\n }\n\n const percentileAt = (indexRatio) => {\n const index = Math.min(\n avgValues.length - 1,\n Math.floor((avgValues.length - 1) * indexRatio),\n );\n return avgValues[Math.max(0, index)];\n };\n const q1 = percentileAt(0.25);\n const q2 = percentileAt(0.5);\n const p90 = percentileAt(0.9);\n\n return jobs.reduce((accumulator, job) => {\n const jobId = String(job?.id || \"\");\n if (job?.enabled === false) {\n accumulator[jobId] = \"disabled\";\n return accumulator;\n }\n const avgTokens = readAvgTokens(usageByJobId, jobId);\n if (avgTokens <= 0) {\n accumulator[jobId] = \"unknown\";\n return accumulator;\n }\n if (avgTokens <= q1) {\n accumulator[jobId] = \"low\";\n return accumulator;\n }\n if (avgTokens <= q2) {\n accumulator[jobId] = \"medium\";\n return accumulator;\n }\n if (avgTokens <= p90) {\n accumulator[jobId] = \"high\";\n return accumulator;\n }\n accumulator[jobId] = \"very-high\";\n return accumulator;\n }, {});\n};\n" }, { "path": "lib/public/js/components/cron-tab/cron-calendar.js", "content": "import { h } from \"preact\";\nimport {\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from \"preact/hooks\";\nimport htm from \"htm\";\nimport { Tooltip } from \"../tooltip.js\";\nimport { ModalShell } from \"../modal-shell.js\";\nimport { CloseIcon } from \"../icons.js\";\nimport {\n formatCost,\n formatCronScheduleLabel,\n formatTokenCount,\n getCronRunEstimatedCost,\n getCronRunTotalTokens,\n} from \"./cron-helpers.js\";\nimport {\n classifyRepeatingJobs,\n expandJobsToRollingSlots,\n getUpcomingSlots,\n mapRunStatusesToSlots,\n} from \"./cron-calendar-helpers.js\";\n\nconst html = htm.bind(h);\n\nconst formatHourLabel = (hourOfDay) => {\n const dateValue = new Date();\n dateValue.setHours(hourOfDay, 0, 0, 0);\n return dateValue.toLocaleTimeString([], {\n hour: \"numeric\",\n minute: \"2-digit\",\n });\n};\n\nconst buildCellKey = (dayKey, hourOfDay) =>\n `${String(dayKey || \"\")}:${hourOfDay}`;\nconst toLocalDayKey = (valueMs) => {\n const dateValue = new Date(valueMs);\n const year = dateValue.getFullYear();\n const month = String(dateValue.getMonth() + 1).padStart(2, \"0\");\n const day = String(dateValue.getDate()).padStart(2, \"0\");\n return `${year}-${month}-${day}`;\n};\n\nconst slotStateClassName = ({\n isPast = false,\n mappedStatus = \"\",\n tokenTier = \"low\",\n} = {}) => {\n const tierClassNameByKey = {\n unknown: \"cron-calendar-slot-tier-unknown\",\n low: \"cron-calendar-slot-tier-low\",\n medium: \"cron-calendar-slot-tier-medium\",\n high: \"cron-calendar-slot-tier-high\",\n \"very-high\": \"cron-calendar-slot-tier-very-high\",\n disabled: \"cron-calendar-slot-tier-disabled\",\n };\n const tierClassName = tierClassNameByKey[tokenTier] || tierClassNameByKey.low;\n if (!isPast) return `${tierClassName} cron-calendar-slot-upcoming`;\n if (mappedStatus === \"ok\") return `${tierClassName} cron-calendar-slot-ok`;\n if (mappedStatus === \"error\")\n return `${tierClassName} cron-calendar-slot-error`;\n if (mappedStatus === \"skipped\")\n return `${tierClassName} cron-calendar-slot-skipped`;\n return `${tierClassName} cron-calendar-slot-past`;\n};\n\nconst renderLegend = () => html`\n
    \n Token intensity\n Low\n Medium\n High\n Very high\n
    \n`;\n\nconst kNowRefreshMs = 60 * 1000;\nconst kRunWindow7dMs = 7 * 24 * 60 * 60 * 1000;\nconst kSlotRunToleranceMs = 45 * 60 * 1000;\nconst kUnknownTier = \"unknown\";\n\nconst formatUpcomingTime = (timestampMs) => {\n const dateValue = new Date(timestampMs);\n return dateValue.toLocaleTimeString([], {\n hour: \"numeric\",\n minute: \"2-digit\",\n });\n};\n\nconst buildRunSummaryByJobId = ({\n runsByJobId = {},\n nowMs = Date.now(),\n} = {}) => {\n const cutoffMs = Number(nowMs || Date.now()) - kRunWindow7dMs;\n return Object.entries(runsByJobId || {}).reduce(\n (accumulator, [jobId, runResult]) => {\n const entries = Array.isArray(runResult?.entries)\n ? runResult.entries\n : [];\n const recentEntries = entries.filter((entry) => {\n const timestampMs = Number(entry?.ts || 0);\n return (\n Number.isFinite(timestampMs) &&\n timestampMs >= cutoffMs &&\n timestampMs <= nowMs\n );\n });\n const runCount = recentEntries.length;\n const totalTokens = recentEntries.reduce(\n (sum, entry) => sum + Number(getCronRunTotalTokens(entry) || 0),\n 0,\n );\n const totalCost = recentEntries.reduce((sum, entry) => {\n const cost = getCronRunEstimatedCost(entry);\n return sum + Number(cost == null ? 0 : cost);\n }, 0);\n accumulator[String(jobId || \"\")] = {\n runCount,\n totalTokens,\n totalCost,\n avgTokensPerRun: runCount > 0 ? Math.round(totalTokens / runCount) : 0,\n avgCostPerRun: runCount > 0 ? totalCost / runCount : 0,\n };\n return accumulator;\n },\n {},\n );\n};\n\nconst mapRunsToSlots = ({\n slots = [],\n runsByJobId = {},\n nowMs = Date.now(),\n} = {}) => {\n const runsBySlotKey = {};\n const consumedRunTimestampsByJobId = {};\n const runEntriesByJobId = Object.entries(runsByJobId || {}).reduce(\n (accumulator, [jobId, runResult]) => {\n const entries = Array.isArray(runResult?.entries)\n ? runResult.entries\n : [];\n const normalizedEntries = entries\n .map((entry) => ({ ...entry, ts: Number(entry?.ts || 0) }))\n .filter((entry) => Number.isFinite(entry.ts) && entry.ts > 0)\n .sort((left, right) => left.ts - right.ts);\n accumulator[String(jobId || \"\")] = normalizedEntries;\n return accumulator;\n },\n {},\n );\n slots.forEach((slot) => {\n if (Number(slot?.scheduledAtMs || 0) > nowMs) return;\n const jobId = String(slot?.jobId || \"\");\n const runEntries = runEntriesByJobId[jobId] || [];\n if (runEntries.length === 0) return;\n const consumedSet = consumedRunTimestampsByJobId[jobId] || new Set();\n consumedRunTimestampsByJobId[jobId] = consumedSet;\n let nearestEntry = null;\n let nearestDeltaMs = Number.MAX_SAFE_INTEGER;\n runEntries.forEach((entry) => {\n if (consumedSet.has(entry.ts)) return;\n const deltaMs = Math.abs(entry.ts - Number(slot?.scheduledAtMs || 0));\n if (deltaMs > kSlotRunToleranceMs) return;\n if (deltaMs < nearestDeltaMs) {\n nearestDeltaMs = deltaMs;\n nearestEntry = entry;\n }\n });\n if (!nearestEntry) return;\n consumedSet.add(nearestEntry.ts);\n runsBySlotKey[String(slot?.key || \"\")] = nearestEntry;\n });\n return runsBySlotKey;\n};\n\nconst buildTierThresholds = (values = []) => {\n const sortedValues = values\n .map((value) => Number(value || 0))\n .filter((value) => Number.isFinite(value) && value > 0)\n .sort((left, right) => left - right);\n if (sortedValues.length === 0) return null;\n const percentileAt = (indexRatio = 0) => {\n const index = Math.min(\n sortedValues.length - 1,\n Math.floor((sortedValues.length - 1) * indexRatio),\n );\n return sortedValues[Math.max(0, index)];\n };\n return {\n q1: percentileAt(0.25),\n q2: percentileAt(0.5),\n p90: percentileAt(0.9),\n };\n};\n\nconst classifyTokenTier = ({\n enabled = true,\n tokenValue = 0,\n thresholds = null,\n} = {}) => {\n if (!enabled) return \"disabled\";\n const safeValue = Number(tokenValue || 0);\n if (!Number.isFinite(safeValue) || safeValue <= 0 || !thresholds)\n return kUnknownTier;\n if (safeValue <= thresholds.q1) return \"low\";\n if (safeValue <= thresholds.q2) return \"medium\";\n if (safeValue <= thresholds.p90) return \"high\";\n return \"very-high\";\n};\n\nconst buildJobTooltipText = ({\n jobName = \"\",\n job = null,\n runSummary7d = {},\n slotRun = null,\n latestRun = null,\n scheduledAtMs = 0,\n scheduledStatus = \"\",\n nowMs = Date.now(),\n} = {}) => {\n const isPastSlot =\n Number(scheduledAtMs || 0) > 0 && Number(scheduledAtMs || 0) <= nowMs;\n const runCount7d = Number(runSummary7d?.runCount || 0);\n const avgTokensPerRun7d = Number(runSummary7d?.avgTokensPerRun || 0);\n const avgCostPerRun7d = Number(runSummary7d?.avgCostPerRun || 0);\n const slotRunTokens = getCronRunTotalTokens(slotRun || {});\n const slotRunCost = getCronRunEstimatedCost(slotRun || {});\n const slotRunStatus = String(slotRun?.status || \"\")\n .trim()\n .toLowerCase();\n\n const lines = [String(jobName || \"Job\")];\n if (isPastSlot) {\n lines.push(\n `Run tokens: ${slotRun ? formatTokenCount(slotRunTokens) : \"—\"}`,\n );\n lines.push(\n `Run cost: ${slotRunCost == null ? \"—\" : formatCost(slotRunCost)}`,\n );\n lines.push(`Run status: ${slotRunStatus || scheduledStatus || \"unknown\"}`);\n if (slotRun?.ts) {\n lines.push(\n `Run time: ${new Date(Number(slotRun.ts || 0)).toLocaleString()}`,\n );\n }\n } else {\n lines.push(\n `Avg tokens/run (last 7d): ${runCount7d > 0 ? formatTokenCount(avgTokensPerRun7d) : \"—\"}`,\n );\n lines.push(\n `Avg cost/run (last 7d): ${runCount7d > 0 ? formatCost(avgCostPerRun7d) : \"—\"}`,\n );\n lines.push(\n `Runs (last 7d): ${runCount7d > 0 ? formatTokenCount(runCount7d) : \"none\"}`,\n );\n }\n\n if (!isPastSlot && latestRun?.status) {\n lines.push(\n `Latest run: ${latestRun.status} (${new Date(Number(latestRun.ts || 0)).toLocaleString()})`,\n );\n } else if (!isPastSlot) {\n lines.push(\"Latest run: none\");\n }\n if (Number(job?.state?.runningAtMs || 0) > 0) {\n lines.push(\n `Current run: active (${new Date(Number(job.state.runningAtMs)).toLocaleString()})`,\n );\n }\n\n if (scheduledAtMs > 0) {\n const slotLabel = new Date(scheduledAtMs).toLocaleString();\n const slotState =\n scheduledStatus || (scheduledAtMs <= Date.now() ? \"past\" : \"upcoming\");\n lines.push(`Slot: ${slotState} (${slotLabel})`);\n }\n return lines.join(\"\\n\");\n};\n\nexport const CronCalendar = ({\n jobs = [],\n runsByJobId = {},\n onSelectJob = () => {},\n}) => {\n const [calendarLightboxOpen, setCalendarLightboxOpen] = useState(false);\n const [showNoisyUpcoming, setShowNoisyUpcoming] = useState(false);\n\n const [nowMs, setNowMs] = useState(() => Date.now());\n useEffect(() => {\n const intervalId = window.setInterval(() => {\n setNowMs(Date.now());\n }, kNowRefreshMs);\n return () => {\n window.clearInterval(intervalId);\n };\n }, []);\n const todayDayKey = toLocalDayKey(nowMs);\n const nowDateValue = useMemo(() => new Date(nowMs), [nowMs]);\n const currentHourOfDay = nowDateValue.getHours();\n const currentMinuteProgress = nowDateValue.getMinutes() / 60;\n const { repeatingJobs, scheduledJobs } = useMemo(\n () => classifyRepeatingJobs(jobs),\n [jobs],\n );\n const timeline = useMemo(\n () => expandJobsToRollingSlots({ jobs: scheduledJobs, nowMs }),\n [scheduledJobs, nowMs],\n );\n const statusBySlotKey = useMemo(\n () =>\n mapRunStatusesToSlots({\n slots: timeline.slots,\n bulkRunsByJobId: runsByJobId,\n nowMs,\n }),\n [timeline.slots, runsByJobId, nowMs],\n );\n const jobById = useMemo(\n () =>\n jobs.reduce((accumulator, job) => {\n const jobId = String(job?.id || \"\");\n if (jobId) accumulator[jobId] = job;\n return accumulator;\n }, {}),\n [jobs],\n );\n const latestRunByJobId = useMemo(\n () =>\n Object.entries(runsByJobId || {}).reduce(\n (accumulator, [jobId, runResult]) => {\n const entries = Array.isArray(runResult?.entries)\n ? runResult.entries\n : [];\n const latest = entries\n .filter((entry) => Number(entry?.ts || 0) > 0)\n .sort(\n (left, right) => Number(right?.ts || 0) - Number(left?.ts || 0),\n )[0];\n accumulator[jobId] = latest || null;\n return accumulator;\n },\n {},\n ),\n [runsByJobId],\n );\n const runSummary7dByJobId = useMemo(\n () => buildRunSummaryByJobId({ runsByJobId, nowMs }),\n [runsByJobId, nowMs],\n );\n const runBySlotKey = useMemo(\n () => mapRunsToSlots({ slots: timeline.slots, runsByJobId, nowMs }),\n [timeline.slots, runsByJobId, nowMs],\n );\n const slotTierThresholds = useMemo(() => {\n const values = [];\n timeline.slots.forEach((slot) => {\n const job = jobById[slot.jobId] || null;\n if (!job || job.enabled === false) return;\n const isPastSlot = Number(slot?.scheduledAtMs || 0) <= nowMs;\n if (isPastSlot) {\n const slotRunTokens = getCronRunTotalTokens(runBySlotKey[slot.key] || {});\n if (slotRunTokens > 0) values.push(slotRunTokens);\n return;\n }\n const projectedAvgTokens = Number(\n runSummary7dByJobId[slot.jobId]?.avgTokensPerRun || 0,\n );\n if (projectedAvgTokens > 0) values.push(projectedAvgTokens);\n });\n repeatingJobs.forEach((job) => {\n const jobId = String(job?.id || \"\");\n const projectedAvgTokens = Number(\n runSummary7dByJobId[jobId]?.avgTokensPerRun || 0,\n );\n if (projectedAvgTokens > 0) values.push(projectedAvgTokens);\n });\n return buildTierThresholds(values);\n }, [\n jobById,\n nowMs,\n repeatingJobs,\n runBySlotKey,\n runSummary7dByJobId,\n timeline.slots,\n ]);\n const getSlotTokenTier = useCallback(\n (slot = null) => {\n const jobId = String(slot?.jobId || \"\");\n const job = jobById[jobId] || null;\n const enabled = job?.enabled !== false;\n const isPastSlot = Number(slot?.scheduledAtMs || 0) <= nowMs;\n if (isPastSlot) {\n const slotRunTokens = getCronRunTotalTokens(\n runBySlotKey[String(slot?.key || \"\")] || {},\n );\n return classifyTokenTier({\n enabled,\n tokenValue: slotRunTokens,\n thresholds: slotTierThresholds,\n });\n }\n const projectedAvgTokens = Number(\n runSummary7dByJobId[jobId]?.avgTokensPerRun || 0,\n );\n return classifyTokenTier({\n enabled,\n tokenValue: projectedAvgTokens,\n thresholds: slotTierThresholds,\n });\n },\n [jobById, nowMs, runBySlotKey, runSummary7dByJobId, slotTierThresholds],\n );\n const getJobProjectedTier = useCallback(\n (jobId = \"\") => {\n const job = jobById[jobId] || null;\n return classifyTokenTier({\n enabled: job?.enabled !== false,\n tokenValue: Number(runSummary7dByJobId[jobId]?.avgTokensPerRun || 0),\n thresholds: slotTierThresholds,\n });\n },\n [jobById, runSummary7dByJobId, slotTierThresholds],\n );\n\n const upcomingSlotsPreview = useMemo(\n () => getUpcomingSlots({ slots: timeline.slots, nowMs, limit: 3 }),\n [timeline.slots, nowMs],\n );\n const noisyUpcomingItems = useMemo(() => {\n const windowEndMs = nowMs + 24 * 60 * 60 * 1000;\n return repeatingJobs\n .map((job) => {\n const jobId = String(job?.id || \"\");\n const nextRunAtMs = Number(job?.state?.nextRunAtMs || 0);\n if (!jobId || !Number.isFinite(nextRunAtMs) || nextRunAtMs <= nowMs) return null;\n if (nextRunAtMs > windowEndMs) return null;\n return {\n key: `noisy:${jobId}:${nextRunAtMs}`,\n jobId,\n jobName: String(job?.name || jobId),\n scheduledAtMs: nextRunAtMs,\n };\n })\n .filter(Boolean)\n .sort((left, right) => left.scheduledAtMs - right.scheduledAtMs);\n }, [repeatingJobs, nowMs]);\n const displayedUpcomingItems = useMemo(() => {\n if (!showNoisyUpcoming) return upcomingSlotsPreview;\n return [...upcomingSlotsPreview, ...noisyUpcomingItems].sort(\n (left, right) => Number(left?.scheduledAtMs || 0) - Number(right?.scheduledAtMs || 0),\n );\n }, [noisyUpcomingItems, showNoisyUpcoming, upcomingSlotsPreview]);\n\n const hourRows = useMemo(() => {\n const uniqueHours = new Set(timeline.slots.map((slot) => slot.hourOfDay));\n return [...uniqueHours].sort((left, right) => left - right);\n }, [timeline.slots]);\n\n const slotsByCellKey = useMemo(\n () =>\n timeline.slots.reduce((accumulator, slot) => {\n const cellKey = buildCellKey(slot.dayKey, slot.hourOfDay);\n const currentValue = accumulator[cellKey] || [];\n currentValue.push(slot);\n accumulator[cellKey] = currentValue;\n return accumulator;\n }, {}),\n [timeline.slots],\n );\n\n const renderCompactStrip = () => {\n return html`\n
    \n ${displayedUpcomingItems.length === 0\n ? html`
    \n No upcoming jobs in the next 24 hours.\n
    `\n : html`\n
    \n ${displayedUpcomingItems.map((slot) => {\n const summary7d = runSummary7dByJobId[slot.jobId] || {};\n const avgTokensPerRun = Number(summary7d?.avgTokensPerRun || 0);\n const avgCostPerRun = Number(summary7d?.avgCostPerRun || 0);\n const estimateLabel =\n avgTokensPerRun > 0 || avgCostPerRun > 0\n ? `Est. ${avgTokensPerRun > 0 ? `${formatTokenCount(avgTokensPerRun)} tk` : \"— tk\"} · ${avgCostPerRun > 0 ? formatCost(avgCostPerRun) : \"—\"}`\n : \"Est. —\";\n const tooltipText = buildJobTooltipText({\n jobName: slot.jobName,\n job: jobById[slot.jobId] || null,\n runSummary7d: runSummary7dByJobId[slot.jobId] || {},\n slotRun: runBySlotKey[slot.key] || null,\n latestRun: latestRunByJobId[slot.jobId],\n scheduledAtMs: slot.scheduledAtMs,\n nowMs,\n });\n return html`\n <${Tooltip}\n text=${tooltipText}\n widthClass=\"w-72\"\n tooltipClassName=\"whitespace-pre-line\"\n triggerClassName=\"block w-full\"\n >\n onSelectJob(slot.jobId)}\n >\n \n ${formatUpcomingTime(slot.scheduledAtMs)}\n ${slot.jobName}\n \n ${estimateLabel}\n \n \n `;\n })}\n
    \n `}\n
    \n ${\n noisyUpcomingItems.length > 0\n ? html`\n setShowNoisyUpcoming((value) => !value)}\n >\n ${\n showNoisyUpcoming\n ? \"Show fewer\"\n : `+${noisyUpcomingItems.length} noisy runs`\n }\n \n `\n : html``\n }\n <${renderLegend} />\n
    \n
    \n `;\n };\n\n const renderFullGrid = () => html`\n
    \n ${hourRows.length === 0\n ? html`
    \n No scheduled jobs in this rolling window.\n
    `\n : html`\n
    \n
    \n
    \n ${timeline.days.map(\n (day) => html`\n \n ${day.label}\n
    \n `,\n )}\n
    \n
    \n ${hourRows.map(\n (hourOfDay) => html`\n
    \n
    \n ${formatHourLabel(hourOfDay)}\n
    \n ${timeline.days.map((day) => {\n const cellKey = buildCellKey(day.dayKey, hourOfDay);\n const cellSlots = slotsByCellKey[cellKey] || [];\n const visibleSlots = cellSlots.slice(0, 3);\n const overflowCount = Math.max(\n 0,\n cellSlots.length - visibleSlots.length,\n );\n return html`\n \n ${day.dayKey === todayDayKey &&\n hourOfDay === currentHourOfDay\n ? html`\n \n \n
    \n `\n : null}\n ${visibleSlots.map((slot) => {\n const status = statusBySlotKey[slot.key] || \"\";\n const isPast = slot.scheduledAtMs <= nowMs;\n const tokenTier = getSlotTokenTier(slot);\n const tooltipText = buildJobTooltipText({\n jobName: slot.jobName,\n job: jobById[slot.jobId] || null,\n runSummary7d:\n runSummary7dByJobId[slot.jobId] || {},\n slotRun: runBySlotKey[slot.key] || null,\n latestRun: latestRunByJobId[slot.jobId],\n scheduledAtMs: slot.scheduledAtMs,\n scheduledStatus: status,\n nowMs,\n });\n return html`\n <${Tooltip}\n text=${tooltipText}\n widthClass=\"w-72\"\n tooltipClassName=\"whitespace-pre-line\"\n triggerClassName=\"inline-flex w-full\"\n >\n onSelectJob(slot.jobId)}\n onKeyDown=${(event) => {\n if (\n event.key !== \"Enter\" &&\n event.key !== \" \"\n )\n return;\n event.preventDefault();\n onSelectJob(slot.jobId);\n }}\n >\n ${slot.jobName}\n
    \n \n `;\n })}\n ${overflowCount > 0\n ? html`
    \n +${overflowCount} more\n
    `\n : null}\n
    \n `;\n })}\n \n `,\n )}\n \n \n `}\n ${repeatingJobs.length > 0\n ? html`\n
    \n
    Repeating
    \n
    \n ${repeatingJobs.map((job) => {\n const jobId = String(job?.id || \"\");\n const avgTokensPerRun = Number(\n runSummary7dByJobId[jobId]?.avgTokensPerRun || 0,\n );\n const tooltipText = buildJobTooltipText({\n jobName: job.name || job.id,\n job,\n runSummary7d: runSummary7dByJobId[jobId] || {},\n slotRun: null,\n latestRun: latestRunByJobId[jobId],\n nowMs,\n });\n return html`\n <${Tooltip}\n text=${tooltipText}\n widthClass=\"w-72\"\n tooltipClassName=\"whitespace-pre-line\"\n triggerClassName=\"inline-flex max-w-full\"\n >\n onSelectJob(jobId)}\n onKeyDown=${(event) => {\n if (event.key !== \"Enter\" && event.key !== \" \")\n return;\n event.preventDefault();\n onSelectJob(jobId);\n }}\n >\n ${job.name || job.id}\n \n ${formatCronScheduleLabel(job.schedule, {\n includeTimeZoneWhenDifferent: true,\n })}\n ${\n avgTokensPerRun > 0\n ? ` | avg ${formatTokenCount(avgTokensPerRun)} tk`\n : \"\"\n }\n \n
    \n \n `;\n })}\n
    \n \n `\n : null}\n \n `;\n\n return html`\n
    \n
    \n

    Up next

    \n setCalendarLightboxOpen(true)}\n >\n Open calendar\n \n
    \n\n ${renderCompactStrip()}\n
    \n <${ModalShell}\n visible=${calendarLightboxOpen}\n onClose=${() => setCalendarLightboxOpen(false)}\n panelClassName=\"cron-calendar-lightbox-panel\"\n >\n
    \n

    Calendar

    \n setCalendarLightboxOpen(false)}\n aria-label=\"Close expanded calendar\"\n >\n <${CloseIcon} className=\"w-4 h-4\" />\n \n
    \n
    \n <${renderLegend} />\n
    \n
    \n ${renderFullGrid()}\n
    \n \n `;\n};\n" }, { "path": "lib/public/js/components/cron-tab/cron-helpers.js", "content": "import {\n formatDurationCompactMs,\n formatInteger,\n formatLocaleDateTimeWithTodayTime,\n formatUsd,\n} from \"../../lib/format.js\";\n\nexport const kAllCronJobsRouteKey = \"__all__\";\n\nexport const readCronJobPrompt = (job = {}) => {\n const payload = job?.payload && typeof job.payload === \"object\" ? job.payload : {};\n const kind = String(payload?.kind || \"\").trim();\n if (kind === \"systemEvent\" && typeof payload.text === \"string\") {\n return payload.text;\n }\n if (kind === \"agentTurn\" && typeof payload.message === \"string\") {\n return payload.message;\n }\n return \"\";\n};\n\nconst kWeekdayLabelByCronValue = {\n \"0\": \"Sun\",\n \"1\": \"Mon\",\n \"2\": \"Tue\",\n \"3\": \"Wed\",\n \"4\": \"Thu\",\n \"5\": \"Fri\",\n \"6\": \"Sat\",\n \"7\": \"Sun\",\n};\n\nconst formatHourMinute = ({ hourField, minuteField }) => {\n const hour = Number.parseInt(String(hourField || \"\"), 10);\n const minute = Number.parseInt(String(minuteField || \"\"), 10);\n if (!Number.isFinite(hour) || !Number.isFinite(minute)) return \"\";\n const normalizedHour = ((hour % 24) + 24) % 24;\n const suffix = normalizedHour >= 12 ? \"pm\" : \"am\";\n const twelveHour = normalizedHour % 12 === 0 ? 12 : normalizedHour % 12;\n const paddedMinute = String(minute).padStart(2, \"0\");\n return `${twelveHour}:${paddedMinute}${suffix}`;\n};\n\nconst formatHourOnly = (hourField) => {\n const hour = Number.parseInt(String(hourField || \"\"), 10);\n if (!Number.isFinite(hour)) return \"\";\n const normalizedHour = ((hour % 24) + 24) % 24;\n const suffix = normalizedHour >= 12 ? \"pm\" : \"am\";\n const twelveHour = normalizedHour % 12 === 0 ? 12 : normalizedHour % 12;\n return `${twelveHour}${suffix}`;\n};\n\nconst formatHourRange = (hourRangeField = \"\") => {\n const match = String(hourRangeField || \"\").match(/^(\\d{1,2})-(\\d{1,2})$/);\n if (!match) return \"\";\n const startHour = formatHourOnly(match[1]);\n const endHour = formatHourOnly(match[2]);\n if (!startHour || !endHour) return \"\";\n return `${startHour}-${endHour}`;\n};\n\nconst humanizeCronExpression = (expr = \"\") => {\n const fields = String(expr || \"\").trim().split(/\\s+/);\n if (fields.length < 5) return \"\";\n const [minuteField, hourField, dayOfMonthField, monthField, dayOfWeekField] = fields;\n\n if (\n dayOfMonthField === \"*\" &&\n monthField === \"*\" &&\n dayOfWeekField === \"*\" &&\n hourField === \"*\" &&\n /^\\*\\/\\d+$/.test(minuteField)\n ) {\n return `Every ${minuteField.slice(2)}m`;\n }\n\n if (\n dayOfMonthField === \"*\" &&\n monthField === \"*\" &&\n dayOfWeekField === \"*\" &&\n minuteField === \"0\" &&\n /^\\*\\/\\d+$/.test(hourField)\n ) {\n return `Every ${hourField.slice(2)}h`;\n }\n\n const formattedTime = formatHourMinute({ hourField, minuteField });\n if (\n dayOfMonthField === \"*\" &&\n monthField === \"*\" &&\n dayOfWeekField === \"1-5\" &&\n /^\\*\\/\\d+$/.test(minuteField) &&\n /^\\d{1,2}-\\d{1,2}$/.test(hourField)\n ) {\n const minutesStep = minuteField.slice(2);\n const hourRange = formatHourRange(hourField);\n if (hourRange) {\n return `Every ${minutesStep}m, ${hourRange} weekdays`;\n }\n }\n\n if (\n dayOfMonthField === \"*\" &&\n monthField === \"*\" &&\n dayOfWeekField === \"1-5\" &&\n formattedTime\n ) {\n return `Weekdays at ${formattedTime}`;\n }\n\n if (\n dayOfMonthField === \"*\" &&\n monthField === \"*\" &&\n /^([0-7])(,[0-7])*$/.test(dayOfWeekField) &&\n formattedTime\n ) {\n const dayLabels = dayOfWeekField\n .split(\",\")\n .map((value) => kWeekdayLabelByCronValue[value] || value)\n .join(\", \");\n return `Every ${dayLabels} at ${formattedTime}`;\n }\n\n if (\n dayOfMonthField === \"*\" &&\n monthField === \"*\" &&\n dayOfWeekField === \"*\" &&\n formattedTime\n ) {\n return `Daily at ${formattedTime}`;\n }\n\n if (\n /^\\d{1,2}$/.test(dayOfMonthField) &&\n monthField === \"*\" &&\n dayOfWeekField === \"*\" &&\n formattedTime\n ) {\n const dayOfMonth = Number.parseInt(dayOfMonthField, 10);\n if (Number.isFinite(dayOfMonth) && dayOfMonth >= 1 && dayOfMonth <= 31) {\n return `Monthly on day ${dayOfMonth} at ${formattedTime}`;\n }\n }\n\n return \"\";\n};\n\nconst normalizeTimeZoneName = (value = \"\") => String(value || \"\").trim().toLowerCase();\n\nconst getClientTimeZone = () => {\n try {\n return Intl?.DateTimeFormat?.().resolvedOptions?.().timeZone || \"\";\n } catch {\n return \"\";\n }\n};\n\nconst shouldAppendTimeZone = ({\n scheduleTimeZone = \"\",\n includeTimeZone = false,\n includeTimeZoneWhenDifferent = false,\n clientTimeZone = \"\",\n}) => {\n const normalizedScheduleTimeZone = normalizeTimeZoneName(scheduleTimeZone);\n if (!normalizedScheduleTimeZone) return false;\n if (includeTimeZone) return true;\n if (!includeTimeZoneWhenDifferent) return false;\n const normalizedClientTimeZone = normalizeTimeZoneName(\n clientTimeZone || getClientTimeZone(),\n );\n if (!normalizedClientTimeZone) return true;\n return normalizedClientTimeZone !== normalizedScheduleTimeZone;\n};\n\nexport const formatCronScheduleLabel = (\n schedule = {},\n { includeTimeZone = false, includeTimeZoneWhenDifferent = false, clientTimeZone = \"\" } = {},\n) => {\n const kind = String(schedule?.kind || \"\").trim();\n if (kind === \"every\") {\n const everyMs = Number(schedule?.everyMs || 0);\n if (everyMs > 0) return `Every ${formatDurationCompactMs(everyMs)}`;\n return \"Every interval\";\n }\n if (kind === \"at\") {\n return `At ${formatLocaleDateTimeWithTodayTime(schedule?.at, { fallback: \"scheduled time\" })}`;\n }\n if (kind === \"cron\") {\n const expr = String(schedule?.expr || \"\").trim();\n if (!expr) return \"Cron\";\n const humanized = humanizeCronExpression(expr);\n const tz = String(schedule?.tz || \"\").trim();\n const appendTimeZone = shouldAppendTimeZone({\n scheduleTimeZone: tz,\n includeTimeZone,\n includeTimeZoneWhenDifferent,\n clientTimeZone,\n });\n if (humanized) {\n return appendTimeZone ? `${humanized} (${tz})` : humanized;\n }\n return appendTimeZone ? `${expr} (${tz})` : expr;\n }\n const fallbackCronExpr = String(\n schedule?.expr || schedule?.cron || schedule?.cronExpr || \"\",\n ).trim();\n if (fallbackCronExpr) {\n const humanized = humanizeCronExpression(fallbackCronExpr);\n const tz = String(schedule?.tz || schedule?.timezone || \"\").trim();\n const appendTimeZone = shouldAppendTimeZone({\n scheduleTimeZone: tz,\n includeTimeZone,\n includeTimeZoneWhenDifferent,\n clientTimeZone,\n });\n if (humanized) {\n return appendTimeZone ? `${humanized} (${tz})` : humanized;\n }\n return appendTimeZone ? `${fallbackCronExpr} (${tz})` : fallbackCronExpr;\n }\n return \"Unknown schedule\";\n};\n\nexport const formatRelativeMs = (targetMs, nowMs = Date.now()) => {\n const value = Number(targetMs || 0);\n if (!Number.isFinite(value) || value <= 0) return \"—\";\n const deltaMs = value - nowMs;\n const isFuture = deltaMs > 0;\n const absSeconds = Math.round(Math.abs(deltaMs) / 1000);\n if (absSeconds < 60) return isFuture ? \"in <1m\" : \"just now\";\n const absMinutes = Math.round(absSeconds / 60);\n if (absMinutes < 60) return isFuture ? `in ${absMinutes}m` : `${absMinutes}m ago`;\n const absHours = Math.round(absMinutes / 60);\n if (absHours < 24) return isFuture ? `in ${absHours}h` : `${absHours}h ago`;\n const absDays = Math.round(absHours / 24);\n return isFuture ? `in ${absDays}d` : `${absDays}d ago`;\n};\n\nexport const formatRelativeCompact = (targetMs, nowMs = Date.now()) => {\n const value = Number(targetMs || 0);\n if (!Number.isFinite(value) || value <= 0) return \"—\";\n const deltaMs = Math.abs(value - nowMs);\n const totalSeconds = Math.max(0, Math.round(deltaMs / 1000));\n if (totalSeconds < 60) return `${totalSeconds}s`;\n const totalMinutes = Math.round(totalSeconds / 60);\n if (totalMinutes < 60) return `${totalMinutes}m`;\n const totalHours = Math.round(totalMinutes / 60);\n if (totalHours < 24) return `${totalHours}h`;\n const totalDays = Math.round(totalHours / 24);\n if (totalDays < 30) return `${totalDays}d`;\n const totalMonths = Math.round(totalDays / 30);\n return `${totalMonths}mo`;\n};\n\nexport const formatNextRunRelativeMs = (nextRunAtMs, nowMs = Date.now()) => {\n const value = Number(nextRunAtMs || 0);\n if (!Number.isFinite(value) || value <= 0) return \"—\";\n if (value >= nowMs) return formatRelativeMs(value, nowMs);\n const overdueDeltaMs = nowMs - value;\n if (overdueDeltaMs < 60 * 1000) return \"due now\";\n const overdueSeconds = Math.round(overdueDeltaMs / 1000);\n if (overdueSeconds < 60) return \"overdue by <1m\";\n const overdueMinutes = Math.round(overdueSeconds / 60);\n if (overdueMinutes < 60) return `overdue by ${overdueMinutes}m`;\n const overdueHours = Math.round(overdueMinutes / 60);\n if (overdueHours < 24) return `overdue by ${overdueHours}h`;\n const overdueDays = Math.round(overdueHours / 24);\n return `overdue by ${overdueDays}d`;\n};\n\nexport const getCronJobHealth = (job = {}) => {\n if (job.enabled === false) return \"disabled\";\n if (job?.state?.runningAtMs) return \"running\";\n const lastStatus = String(job?.state?.lastStatus || job?.state?.lastRunStatus || \"\")\n .trim()\n .toLowerCase();\n if (lastStatus === \"error\") return \"error\";\n if (lastStatus === \"ok\") return \"ok\";\n return \"unknown\";\n};\n\nexport const getCronJobHealthClassName = (health = \"\") => {\n if (health === \"ok\") return \"bg-green-500\";\n if (health === \"error\") return \"bg-red-500\";\n if (health === \"running\") return \"bg-yellow-400\";\n return \"bg-gray-500\";\n};\n\nexport const formatTokenCount = (value) => formatInteger(Number(value || 0));\nexport const formatCost = (value) => formatUsd(Number(value || 0));\nexport const getCronRunTotalTokens = (entry = {}) => {\n const usage = entry?.usage || {};\n const componentCandidates = [\n usage?.input_tokens,\n usage?.inputTokens,\n usage?.output_tokens,\n usage?.outputTokens,\n usage?.cache_read_tokens,\n usage?.cacheReadTokens,\n usage?.cache_write_tokens,\n usage?.cacheWriteTokens,\n ];\n const componentTotal = componentCandidates.reduce((sum, candidate) => {\n const numericValue = Number(candidate);\n if (!Number.isFinite(numericValue) || numericValue < 0) return sum;\n return sum + numericValue;\n }, 0);\n if (componentTotal > 0) return componentTotal;\n const totalCandidates = [\n usage?.total_tokens,\n usage?.totalTokens,\n entry?.total_tokens,\n entry?.totalTokens,\n ];\n for (const candidate of totalCandidates) {\n const numericValue = Number(candidate);\n if (Number.isFinite(numericValue) && numericValue >= 0) return numericValue;\n }\n return 0;\n};\nexport const getCronRunEstimatedCost = (entry = {}) => {\n const usage = entry?.usage || {};\n const candidates = [\n entry?.estimatedCost,\n entry?.estimated_cost,\n usage?.estimatedCost,\n usage?.estimated_cost,\n usage?.totalCost,\n usage?.total_cost,\n usage?.costUsd,\n usage?.cost,\n ];\n for (const candidate of candidates) {\n const numericValue = Number(candidate);\n if (Number.isFinite(numericValue) && numericValue >= 0) return numericValue;\n }\n return null;\n};\nconst hasHeartbeatOnlySummary = (job = {}) => {\n const state = job?.state || {};\n try {\n return String(JSON.stringify(state) || \"\")\n .toUpperCase()\n .includes(\"HEARTBEAT_OK\");\n } catch {\n return false;\n }\n};\nconst hasHeartbeatSummaryInLatestRun = ({\n jobId = \"\",\n bulkRunsByJobId = {},\n} = {}) => {\n const safeJobId = String(jobId || \"\").trim();\n if (!safeJobId) return false;\n const entries = Array.isArray(bulkRunsByJobId?.[safeJobId]?.entries)\n ? bulkRunsByJobId[safeJobId].entries\n : [];\n if (entries.length === 0) return false;\n const latestEntry = entries.reduce((latestValue, candidate) =>\n Number(candidate?.ts || 0) > Number(latestValue?.ts || 0)\n ? candidate\n : latestValue);\n const summaryCandidates = [\n latestEntry?.summary,\n latestEntry?.result?.summary,\n latestEntry?.payload?.summary,\n ];\n return summaryCandidates.some((value) =>\n String(value || \"\")\n .toUpperCase()\n .includes(\"HEARTBEAT_OK\"));\n};\nconst getLatestRunStatus = ({\n job = {},\n jobId = \"\",\n bulkRunsByJobId = {},\n} = {}) => {\n const safeJobId = String(jobId || \"\").trim();\n const entries = Array.isArray(bulkRunsByJobId?.[safeJobId]?.entries)\n ? bulkRunsByJobId[safeJobId].entries\n : [];\n const latestEntry = entries.length > 0\n ? entries.reduce((latestValue, candidate) =>\n Number(candidate?.ts || 0) > Number(latestValue?.ts || 0)\n ? candidate\n : latestValue)\n : null;\n const status = String(\n latestEntry?.status ||\n job?.state?.lastStatus ||\n job?.state?.lastRunStatus ||\n \"\",\n )\n .trim()\n .toLowerCase();\n return status;\n};\n\nexport const buildCronOptimizationWarnings = (jobs = [], bulkRunsByJobId = {}) => {\n const warnings = [];\n jobs.forEach((job) => {\n const jobId = String(job?.id || \"\");\n const prompt = readCronJobPrompt(job).toLowerCase();\n const deliveryMode = String(job?.delivery?.mode || \"\").toLowerCase();\n if (\n deliveryMode === \"none\" &&\n (prompt.includes(\"message tool\") || prompt.includes(\"send to telegram\"))\n ) {\n warnings.push({\n tone: \"warning\",\n jobId: String(job?.id || \"\"),\n title: `${job.name || job.id}: delivery mismatch`,\n body: \"Job uses delivery.mode=none but prompt asks to send via message tool.\",\n });\n }\n if (Number(job?.state?.consecutiveErrors || 0) >= 2) {\n warnings.push({\n tone: \"error\",\n jobId: String(job?.id || \"\"),\n title: `${job.name || job.id}: repeated errors`,\n body: `Consecutive errors: ${Number(job?.state?.consecutiveErrors || 0)}.`,\n });\n }\n const latestStatus = getLatestRunStatus({\n job,\n jobId,\n bulkRunsByJobId,\n });\n if (\n job?.state?.lastDelivered === false &&\n String(job?.state?.lastDeliveryStatus || \"\").trim().toLowerCase() === \"not-delivered\" &&\n latestStatus !== \"ok\" &&\n !hasHeartbeatOnlySummary(job) &&\n !hasHeartbeatSummaryInLatestRun({ jobId, bulkRunsByJobId })\n ) {\n warnings.push({\n tone: \"warning\",\n jobId,\n title: `${job.name || job.id}: not delivered`,\n body: \"Latest run completed but was not delivered.\",\n });\n }\n });\n return warnings.slice(0, 8);\n};\n\nexport const getNextScheduledRunAcrossJobs = (jobs = []) => {\n const nextMs = jobs\n .filter((job) => job?.enabled !== false)\n .map((job) => Number(job?.state?.nextRunAtMs || 0))\n .filter((value) => Number.isFinite(value) && value > 0)\n .sort((left, right) => left - right)[0];\n return nextMs || null;\n};\n" }, { "path": "lib/public/js/components/cron-tab/cron-insights-panel.js", "content": "import { h } from \"preact\";\nimport { useMemo, useState } from \"preact/hooks\";\nimport htm from \"htm\";\nimport { SegmentedControl } from \"../segmented-control.js\";\nimport { Badge } from \"../badge.js\";\nimport {\n formatCost,\n formatTokenCount,\n getCronRunEstimatedCost,\n getCronRunTotalTokens,\n} from \"./cron-helpers.js\";\n\nconst html = htm.bind(h);\n\nconst kRange24h = \"24h\";\nconst kRange7d = \"7d\";\nconst kRange30d = \"30d\";\nconst kRangeOptions = [\n { label: \"24h\", value: kRange24h },\n { label: \"7d\", value: kRange7d },\n { label: \"30d\", value: kRange30d },\n];\nconst kRangeWindowMsByValue = {\n [kRange24h]: 24 * 60 * 60 * 1000,\n [kRange7d]: 7 * 24 * 60 * 60 * 1000,\n [kRange30d]: 30 * 24 * 60 * 60 * 1000,\n};\nconst kTopListLimit = 3;\nconst kBadgeToneByInsight = {\n \"Token hungry\": \"warning\",\n \"Potentially wasteful\": \"danger\",\n \"Most expensive\": \"accent\",\n};\nconst kWastefulMinRuns = 10;\nconst kTokenHungryMinAvgTokensPerRun = 100000;\nconst kTokenHungryMinRuns = 3;\nconst formatRunCountLabel = (count = 0) => {\n const safeCount = Number(count || 0);\n const countLabel = formatTokenCount(safeCount);\n return `${countLabel} ${safeCount === 1 ? \"run\" : \"runs\"}`;\n};\n\nconst readDeliveryMode = (job = null) =>\n String(job?.delivery?.mode || job?.deliveryMode || \"none\")\n .trim()\n .toLowerCase();\n\nconst sortDescBy = (items = [], selectors = []) =>\n [...items].sort((left, right) => {\n for (const selector of selectors) {\n const leftValue = Number(selector(left) || 0);\n const rightValue = Number(selector(right) || 0);\n if (leftValue === rightValue) continue;\n return rightValue - leftValue;\n }\n return String(left?.jobName || \"\").localeCompare(\n String(right?.jobName || \"\"),\n );\n });\n\nconst buildInsightMetrics = ({\n jobs = [],\n bulkRunsByJobId = {},\n rangeValue = kRange7d,\n}) => {\n const nowMs = Date.now();\n const windowMs = Number(\n kRangeWindowMsByValue[rangeValue] || kRangeWindowMsByValue[kRange7d],\n );\n const cutoffMs = nowMs - windowMs;\n const metricsByJobId = jobs.reduce((accumulator, job) => {\n const jobId = String(job?.id || \"\");\n if (!jobId) return accumulator;\n accumulator[jobId] = {\n jobId,\n jobName: String(job?.name || jobId),\n runCount: 0,\n totalTokens: 0,\n totalCost: 0,\n hasCostData: false,\n hasDelivery: readDeliveryMode(job) !== \"none\",\n };\n return accumulator;\n }, {});\n\n Object.entries(bulkRunsByJobId || {}).forEach(([jobIdValue, runResult]) => {\n const jobId = String(jobIdValue || \"\");\n if (!jobId) return;\n if (!metricsByJobId[jobId]) {\n metricsByJobId[jobId] = {\n jobId,\n jobName: jobId,\n runCount: 0,\n totalTokens: 0,\n totalCost: 0,\n hasCostData: false,\n hasDelivery: false,\n };\n }\n const entries = Array.isArray(runResult?.entries) ? runResult.entries : [];\n entries.forEach((entry) => {\n const timestampMs = Number(entry?.ts || 0);\n if (\n !Number.isFinite(timestampMs) ||\n timestampMs < cutoffMs ||\n timestampMs > nowMs\n ) {\n return;\n }\n metricsByJobId[jobId].runCount += 1;\n metricsByJobId[jobId].totalTokens += Number(getCronRunTotalTokens(entry) || 0);\n const estimatedCost = getCronRunEstimatedCost(entry);\n if (estimatedCost != null) {\n metricsByJobId[jobId].hasCostData = true;\n metricsByJobId[jobId].totalCost += Number(estimatedCost || 0);\n }\n });\n });\n\n return Object.values(metricsByJobId).map((entry) => ({\n ...entry,\n avgTokensPerRun:\n entry.runCount > 0 ? Math.round(entry.totalTokens / entry.runCount) : 0,\n avgCostPerRun: entry.runCount > 0 ? entry.totalCost / entry.runCount : 0,\n }));\n};\n\nconst renderInsightRow = ({\n title = \"\",\n rows = [],\n onSelectJob = () => {},\n}) => {\n const badgeTone = kBadgeToneByInsight[title] || \"neutral\";\n const topRow = rows[0];\n const overflowRows = rows.slice(1);\n return html`\n
    \n onSelectJob(topRow.jobId)}\n >\n
    \n
    \n
    ${topRow.jobName}
    \n
    \n ${`${topRow.primaryLabel} · ${topRow.secondaryLabel}`}\n
    \n
    \n
    \n <${Badge} tone=${badgeTone}>${title}\n
    \n
    \n \n ${\n overflowRows.length > 0\n ? html`\n
    \n \n Show more\n \n
    \n ${overflowRows.map(\n (row, index) => html`\n onSelectJob(row.jobId)}\n >\n
    \n
    \n
    \n ${row.jobName}\n
    \n \n ${`${row.primaryLabel} · ${row.secondaryLabel}`}\n
    \n
    \n \n #${index + 2}\n
    \n
    \n \n `,\n )}\n \n \n `\n : null\n }\n \n `;\n};\n\nexport const CronInsightsPanel = ({\n jobs = [],\n bulkRunsByJobId = {},\n onSelectJob = () => {},\n}) => {\n const [rangeValue, setRangeValue] = useState(kRange7d);\n const metrics = useMemo(\n () => buildInsightMetrics({ jobs, bulkRunsByJobId, rangeValue }),\n [bulkRunsByJobId, jobs, rangeValue],\n );\n\n const tokenHungryRows = useMemo(\n () =>\n sortDescBy(\n metrics.filter(\n (entry) =>\n entry.runCount >= kTokenHungryMinRuns &&\n entry.avgTokensPerRun >= kTokenHungryMinAvgTokensPerRun,\n ),\n [(entry) => entry.avgTokensPerRun, (entry) => entry.totalTokens],\n )\n .slice(0, kTopListLimit)\n .map((entry) => ({\n ...entry,\n primaryLabel: `${formatTokenCount(entry.avgTokensPerRun)} avg tokens/run`,\n secondaryLabel: `${formatTokenCount(entry.totalTokens)} total tokens · ${formatRunCountLabel(entry.runCount)}`,\n })),\n [metrics],\n );\n\n const wastefulRows = useMemo(\n () =>\n sortDescBy(\n metrics.filter(\n (entry) =>\n entry.runCount >= kWastefulMinRuns &&\n entry.hasDelivery === false &&\n (entry.totalTokens > 0 || entry.totalCost > 0),\n ),\n [(entry) => entry.totalTokens, (entry) => entry.runCount],\n )\n .slice(0, kTopListLimit)\n .map((entry) => ({\n ...entry,\n primaryLabel: `${formatRunCountLabel(entry.runCount)} with no delivery`,\n secondaryLabel: `${formatTokenCount(entry.totalTokens)} total tokens${entry.hasCostData ? ` · ${formatCost(entry.totalCost)}` : \"\"}`,\n })),\n [metrics],\n );\n\n const expensiveRows = useMemo(\n () =>\n sortDescBy(\n metrics.filter((entry) => entry.runCount > 0 && entry.totalCost > 0),\n [(entry) => entry.totalCost, (entry) => entry.avgCostPerRun],\n )\n .slice(0, kTopListLimit)\n .map((entry) => ({\n ...entry,\n primaryLabel: `${formatCost(entry.totalCost)} total estimated cost`,\n secondaryLabel: `${formatCost(entry.avgCostPerRun)} avg/run · ${formatRunCountLabel(entry.runCount)}`,\n })),\n [metrics],\n );\n const insightRows = [\n { title: \"Token hungry\", rows: tokenHungryRows },\n { title: \"Potentially wasteful\", rows: wastefulRows },\n { title: \"Most expensive\", rows: expensiveRows },\n ].filter((group) => Array.isArray(group.rows) && group.rows.length > 0);\n if (insightRows.length === 0) return null;\n\n return html`\n
    \n
    \n

    Insights

    \n <${SegmentedControl}\n options=${kRangeOptions}\n value=${rangeValue}\n onChange=${setRangeValue}\n />\n
    \n\n
    \n ${insightRows.map((group) =>\n renderInsightRow({\n title: group.title,\n rows: group.rows,\n onSelectJob,\n }))}\n
    \n
    \n `;\n};\n" }, { "path": "lib/public/js/components/cron-tab/cron-job-detail.js", "content": "import { h } from \"preact\";\nimport { useMemo } from \"preact/hooks\";\nimport htm from \"htm\";\nimport { ActionButton } from \"../action-button.js\";\nimport { formatTokenCount } from \"./cron-helpers.js\";\nimport { CronJobUsage } from \"./cron-job-usage.js\";\nimport { CronJobTrendsPanel } from \"./cron-job-trends-panel.js\";\nimport { CronRunHistoryPanel } from \"./cron-run-history-panel.js\";\nimport { CronPromptEditor } from \"./cron-prompt-editor.js\";\nimport { CronJobSettingsCard } from \"./cron-job-settings-card.js\";\n\nconst html = htm.bind(h);\nconst kRunStatusFilterOptions = [\n { label: \"all\", value: \"all\" },\n { label: \"ok\", value: \"ok\" },\n { label: \"error\", value: \"error\" },\n { label: \"skipped\", value: \"skipped\" },\n];\n\nexport const CronJobDetail = ({\n job = null,\n runEntries = [],\n filteredRunEntries = [],\n runTotal = 0,\n runHasMore = false,\n loadingMoreRuns = false,\n runStatusFilter = \"all\",\n onSetRunStatusFilter = () => {},\n onLoadMoreRuns = () => {},\n onRunNow = () => {},\n runningJob = false,\n onToggleEnabled = () => {},\n togglingJobEnabled = false,\n usage = null,\n jobTrends = null,\n jobTrendRange = \"7d\",\n selectedJobTrendBucketFilter = null,\n usageDays = 30,\n onSetUsageDays = () => {},\n onSetJobTrendRange = () => {},\n onSetSelectedJobTrendBucketFilter = () => {},\n promptValue = \"\",\n savedPromptValue = \"\",\n onChangePrompt = () => {},\n onSaveChanges = () => {},\n savingChanges = false,\n routingDraft = null,\n onChangeRoutingDraft = () => {},\n deliverySessions = [],\n loadingDeliverySessions = false,\n deliverySessionsError = \"\",\n destinationSessionKey = \"\",\n onChangeDestinationSessionKey = () => {},\n}) => {\n if (!job) {\n return html`\n
    \n Select a cron job to view details.\n
    \n `;\n }\n\n const isRoutingDirty = useMemo(() => {\n const sessionTarget = String(\n routingDraft?.sessionTarget || job?.sessionTarget || \"main\",\n );\n const wakeMode = String(routingDraft?.wakeMode || job?.wakeMode || \"now\");\n const deliveryMode = String(\n routingDraft?.deliveryMode || job?.delivery?.mode || \"none\",\n );\n const currentSessionTarget = String(job?.sessionTarget || \"main\");\n const currentWakeMode = String(job?.wakeMode || \"now\");\n const currentDeliveryMode = String(job?.delivery?.mode || \"none\");\n return (\n sessionTarget !== currentSessionTarget ||\n wakeMode !== currentWakeMode ||\n deliveryMode !== currentDeliveryMode\n );\n }, [job, routingDraft?.deliveryMode, routingDraft?.sessionTarget, routingDraft?.wakeMode]);\n const isPromptDirty = promptValue !== savedPromptValue;\n const hasUnsavedChanges = isRoutingDirty || isPromptDirty;\n\n return html`\n
    \n
    \n <${CronJobSettingsCard}\n job=${job}\n routingDraft=${routingDraft}\n onChangeRoutingDraft=${onChangeRoutingDraft}\n destinationSessionKey=${destinationSessionKey}\n onChangeDestinationSessionKey=${onChangeDestinationSessionKey}\n deliverySessions=${deliverySessions}\n loadingDeliverySessions=${loadingDeliverySessions}\n deliverySessionsError=${deliverySessionsError}\n savingChanges=${savingChanges}\n togglingJobEnabled=${togglingJobEnabled}\n onToggleEnabled=${onToggleEnabled}\n onRunNow=${onRunNow}\n runningJob=${runningJob}\n hasUnsavedChanges=${hasUnsavedChanges}\n />\n\n <${CronPromptEditor}\n promptValue=${promptValue}\n savedPromptValue=${savedPromptValue}\n onChangePrompt=${onChangePrompt}\n onSaveChanges=${onSaveChanges}\n />\n\n <${CronJobUsage}\n usage=${usage}\n usageDays=${usageDays}\n onSetUsageDays=${onSetUsageDays}\n />\n <${CronJobTrendsPanel}\n trends=${jobTrends}\n range=${jobTrendRange}\n onChangeRange=${onSetJobTrendRange}\n selectedBucketFilter=${selectedJobTrendBucketFilter}\n onChangeSelectedBucketFilter=${onSetSelectedJobTrendBucketFilter}\n />\n\n <${CronRunHistoryPanel}\n entryCountLabel=${`${formatTokenCount(selectedJobTrendBucketFilter ? filteredRunEntries.length : runTotal)} entries`}\n primaryFilterOptions=${kRunStatusFilterOptions}\n primaryFilterValue=${runStatusFilter}\n onChangePrimaryFilter=${onSetRunStatusFilter}\n activeFilterLabel=${selectedJobTrendBucketFilter?.label || \"\"}\n onClearActiveFilter=${() => onSetSelectedJobTrendBucketFilter(null)}\n rows=${selectedJobTrendBucketFilter ? filteredRunEntries : runEntries}\n variant=\"detail\"\n footer=${runHasMore\n ? html`\n
    \n <${ActionButton}\n onClick=${onLoadMoreRuns}\n loading=${loadingMoreRuns}\n tone=\"secondary\"\n size=\"sm\"\n idleLabel=\"Load More\"\n loadingLabel=\"Loading...\"\n />\n
    \n `\n : null}\n />\n
    \n
    \n `;\n};\n" }, { "path": "lib/public/js/components/cron-tab/cron-job-list.js", "content": "import { h } from \"preact\";\nimport { useEffect, useMemo, useRef, useState } from \"preact/hooks\";\nimport htm from \"htm\";\nimport {\n formatCronScheduleLabel,\n formatRelativeCompact,\n getCronJobHealth,\n getCronJobHealthClassName,\n kAllCronJobsRouteKey,\n} from \"./cron-helpers.js\";\n\nconst html = htm.bind(h);\nconst kGroupOrder = [\"daily\", \"weekly\", \"monthly\", \"other\"];\nconst kGroupLabelByKey = {\n daily: \"Daily\",\n weekly: \"Weekly\",\n monthly: \"Monthly\",\n other: \"Other\",\n};\nconst kMinutesPerHour = 60;\n\nconst parseCronNumeric = (value = \"\") => {\n const parsed = Number.parseInt(String(value || \"\").trim(), 10);\n return Number.isFinite(parsed) ? parsed : null;\n};\n\nconst normalizeCronWeekday = (value) => {\n if (!Number.isFinite(value)) return null;\n const normalized = value === 7 ? 0 : value;\n return normalized >= 0 && normalized <= 6 ? normalized : null;\n};\n\nconst parseCronWeekdayField = (field = \"\") => {\n const raw = String(field || \"\").trim().toLowerCase();\n if (!raw || raw === \"*\") return null;\n const segments = raw.split(\",\").map((segment) => segment.trim()).filter(Boolean);\n const weekdays = [];\n segments.forEach((segment) => {\n const rangeMatch = segment.match(/^(\\d{1,2})-(\\d{1,2})$/);\n if (rangeMatch) {\n const start = normalizeCronWeekday(parseCronNumeric(rangeMatch[1]));\n const end = normalizeCronWeekday(parseCronNumeric(rangeMatch[2]));\n if (start == null || end == null) return;\n if (start <= end) {\n for (let value = start; value <= end; value += 1) weekdays.push(value);\n } else {\n for (let value = start; value <= 6; value += 1) weekdays.push(value);\n for (let value = 0; value <= end; value += 1) weekdays.push(value);\n }\n return;\n }\n const single = normalizeCronWeekday(parseCronNumeric(segment));\n if (single != null) weekdays.push(single);\n });\n if (weekdays.length === 0) return null;\n return Math.min(...weekdays);\n};\nconst parseCronWeekdayValues = (field = \"\") => {\n const raw = String(field || \"\").trim().toLowerCase();\n if (!raw || raw === \"*\") return [];\n const segments = raw.split(\",\").map((segment) => segment.trim()).filter(Boolean);\n const weekdays = new Set();\n segments.forEach((segment) => {\n const rangeMatch = segment.match(/^(\\d{1,2})-(\\d{1,2})$/);\n if (rangeMatch) {\n const start = normalizeCronWeekday(parseCronNumeric(rangeMatch[1]));\n const end = normalizeCronWeekday(parseCronNumeric(rangeMatch[2]));\n if (start == null || end == null) return;\n if (start <= end) {\n for (let value = start; value <= end; value += 1) weekdays.add(value);\n } else {\n for (let value = start; value <= 6; value += 1) weekdays.add(value);\n for (let value = 0; value <= end; value += 1) weekdays.add(value);\n }\n return;\n }\n const single = normalizeCronWeekday(parseCronNumeric(segment));\n if (single != null) weekdays.add(single);\n });\n return [...weekdays].sort((left, right) => left - right);\n};\nconst isWeekdaysOnlyField = (field = \"\") => {\n const weekdayValues = parseCronWeekdayValues(field);\n if (weekdayValues.length !== 5) return false;\n return weekdayValues.join(\",\") === \"1,2,3,4,5\";\n};\n\nconst parseCronMinuteOfDay = ({ minuteField = \"\", hourField = \"\" }) => {\n const minute = parseCronNumeric(minuteField);\n const hour = parseCronNumeric(hourField);\n if (minute == null || hour == null) return null;\n if (minute < 0 || minute > 59 || hour < 0 || hour > 23) return null;\n return hour * kMinutesPerHour + minute;\n};\n\nconst parseCronFields = (schedule = {}) => {\n const cronExpr = String(\n schedule?.expr || schedule?.cron || schedule?.cronExpr || \"\",\n ).trim();\n const cronFields = cronExpr.split(/\\s+/);\n if (cronFields.length < 5) return null;\n const [minuteField, hourField, dayOfMonthField, monthField, dayOfWeekField] = cronFields;\n return {\n minuteField,\n hourField,\n dayOfMonthField,\n monthField,\n dayOfWeekField,\n };\n};\n\nconst getInternalSortMeta = (job = {}, groupKey = \"other\") => {\n const schedule = job?.schedule || {};\n const scheduleKind = String(schedule?.kind || \"\").trim().toLowerCase();\n const cronFields = parseCronFields(schedule);\n const minuteOfDay = cronFields\n ? parseCronMinuteOfDay({\n minuteField: cronFields.minuteField,\n hourField: cronFields.hourField,\n })\n : null;\n const nameKey = String(job?.name || job?.id || \"\").toLowerCase();\n if (groupKey === \"daily\") {\n if (scheduleKind === \"every\") {\n const everyMs = Number(schedule?.everyMs || Number.MAX_SAFE_INTEGER);\n return {\n groupRank: 0,\n primary: Number.isFinite(everyMs) ? everyMs : Number.MAX_SAFE_INTEGER,\n secondary: nameKey,\n };\n }\n if (\n cronFields &&\n cronFields.dayOfMonthField === \"*\" &&\n cronFields.monthField === \"*\" &&\n cronFields.dayOfWeekField === \"*\" &&\n minuteOfDay != null\n ) {\n return {\n groupRank: 1,\n primary: minuteOfDay,\n secondary: nameKey,\n };\n }\n if (\n cronFields &&\n cronFields.dayOfMonthField === \"*\" &&\n cronFields.monthField === \"*\" &&\n isWeekdaysOnlyField(cronFields.dayOfWeekField) &&\n minuteOfDay != null\n ) {\n return {\n groupRank: 2,\n primary: minuteOfDay,\n secondary: nameKey,\n };\n }\n }\n if (groupKey === \"weekly\" && cronFields) {\n const weekday = parseCronWeekdayField(cronFields.dayOfWeekField);\n return {\n groupRank: 0,\n primary: weekday == null ? Number.MAX_SAFE_INTEGER : weekday,\n secondary: minuteOfDay == null ? Number.MAX_SAFE_INTEGER : minuteOfDay,\n tertiary: nameKey,\n };\n }\n if (groupKey === \"monthly\" && cronFields) {\n const dayOfMonth = parseCronNumeric(cronFields.dayOfMonthField);\n return {\n groupRank: 0,\n primary: dayOfMonth == null ? Number.MAX_SAFE_INTEGER : dayOfMonth,\n secondary: minuteOfDay == null ? Number.MAX_SAFE_INTEGER : minuteOfDay,\n tertiary: nameKey,\n };\n }\n return {\n groupRank: 99,\n primary: Number.MAX_SAFE_INTEGER,\n secondary: Number.MAX_SAFE_INTEGER,\n tertiary: nameKey,\n };\n};\n\nconst compareSortable = (left, right) => {\n if (left === right) return 0;\n return left > right ? 1 : -1;\n};\n\nconst sortGroupItems = (items = [], groupKey = \"other\") =>\n [...items].sort((leftJob, rightJob) => {\n const leftMeta = getInternalSortMeta(leftJob, groupKey);\n const rightMeta = getInternalSortMeta(rightJob, groupKey);\n const rankResult = compareSortable(leftMeta.groupRank, rightMeta.groupRank);\n if (rankResult !== 0) return rankResult;\n const primaryResult = compareSortable(leftMeta.primary, rightMeta.primary);\n if (primaryResult !== 0) return primaryResult;\n const secondaryResult = compareSortable(leftMeta.secondary, rightMeta.secondary);\n if (secondaryResult !== 0) return secondaryResult;\n return compareSortable(leftMeta.tertiary, rightMeta.tertiary);\n });\n\nconst getScheduleGroupKey = (schedule = {}) => {\n const kind = String(schedule?.kind || \"\").trim().toLowerCase();\n if (kind === \"every\") {\n const everyMs = Number(schedule?.everyMs || 0);\n if (Number.isFinite(everyMs) && everyMs > 0) {\n if (everyMs <= 24 * 60 * 60 * 1000) return \"daily\";\n if (everyMs <= 7 * 24 * 60 * 60 * 1000) return \"weekly\";\n if (everyMs <= 31 * 24 * 60 * 60 * 1000) return \"monthly\";\n }\n return \"other\";\n }\n const cronExpr = String(\n schedule?.expr || schedule?.cron || schedule?.cronExpr || \"\",\n ).trim();\n const cronFields = cronExpr.split(/\\s+/);\n if (cronFields.length >= 5) {\n const [, , dayOfMonthField, monthField, dayOfWeekField] = cronFields;\n if (\n dayOfMonthField === \"*\" &&\n monthField === \"*\" &&\n dayOfWeekField === \"*\"\n ) {\n return \"daily\";\n }\n if (\n dayOfMonthField === \"*\" &&\n monthField === \"*\" &&\n dayOfWeekField !== \"*\"\n ) {\n if (isWeekdaysOnlyField(dayOfWeekField)) return \"daily\";\n return \"weekly\";\n }\n if (dayOfMonthField !== \"*\" && monthField === \"*\") {\n return \"monthly\";\n }\n }\n return \"other\";\n};\n\nexport const CronJobList = ({\n jobs = [],\n selectedRouteKey = kAllCronJobsRouteKey,\n onSelectAllJobs = () => {},\n onSelectJob = () => {},\n}) => {\n const searchInputRef = useRef(null);\n const [searchQuery, setSearchQuery] = useState(\"\");\n useEffect(() => {\n const frameId = window.requestAnimationFrame(() => {\n searchInputRef.current?.focus();\n });\n return () => {\n window.cancelAnimationFrame(frameId);\n };\n }, []);\n const normalizedQuery = String(searchQuery || \"\").trim().toLowerCase();\n const filteredJobs = useMemo(() => {\n if (!normalizedQuery) return jobs;\n return jobs.filter((job) => {\n const name = String(job?.name || \"\").toLowerCase();\n const id = String(job?.id || \"\").toLowerCase();\n return name.includes(normalizedQuery) || id.includes(normalizedQuery);\n });\n }, [jobs, normalizedQuery]);\n const groupedJobs = useMemo(() => {\n const groups = {\n daily: [],\n weekly: [],\n monthly: [],\n other: [],\n };\n filteredJobs.forEach((job) => {\n const groupKey = getScheduleGroupKey(job?.schedule);\n if (!groups[groupKey]) groups.other.push(job);\n else groups[groupKey].push(job);\n });\n return {\n daily: sortGroupItems(groups.daily, \"daily\"),\n weekly: sortGroupItems(groups.weekly, \"weekly\"),\n monthly: sortGroupItems(groups.monthly, \"monthly\"),\n other: sortGroupItems(groups.other, \"other\"),\n };\n }, [filteredJobs]);\n\n return html`\n
    \n
    \n setSearchQuery(event.target.value)}\n />\n
    \n \n All Jobs\n ${jobs.length} total\n \n\n
    \n ${kGroupOrder.map((groupKey) => {\n const groupItems = groupedJobs[groupKey] || [];\n if (groupItems.length === 0) return null;\n return html`\n
    \n
    ${kGroupLabelByKey[groupKey] || \"Other\"}
    \n
    \n ${groupItems.map((job) => {\n const health = getCronJobHealth(job);\n const selected = selectedRouteKey === String(job.id || \"\");\n return html`\n onSelectJob(job.id)}\n >\n \n ${job.name || job.id}\n \n \n ${formatRelativeCompact(job?.state?.lastRunAtMs)}\n \n \n \n \n \n ${formatCronScheduleLabel(job.schedule, {\n includeTimeZoneWhenDifferent: true,\n })}\n \n \n `;\n })}\n
    \n
    \n `;\n })}\n
    \n ${filteredJobs.length === 0\n ? html`\n
    No cron jobs match your search.
    \n `\n : null}\n
    \n `;\n};\n" }, { "path": "lib/public/js/components/cron-tab/cron-job-settings-card.js", "content": "import { h } from \"preact\";\nimport { useMemo } from \"preact/hooks\";\nimport htm from \"htm\";\nimport { ActionButton } from \"../action-button.js\";\nimport { SegmentedControl } from \"../segmented-control.js\";\nimport { ToggleSwitch } from \"../toggle-switch.js\";\nimport { getSessionDisplayLabel } from \"../../lib/session-keys.js\";\nimport {\n formatCronScheduleLabel,\n formatNextRunRelativeMs,\n} from \"./cron-helpers.js\";\n\nconst html = htm.bind(h);\nconst kMetaCardClassName = \"ac-surface-inset rounded-lg p-2.5 space-y-1.5\";\nconst kSessionTargetOptions = [\n { label: \"main\", value: \"main\" },\n { label: \"isolated\", value: \"isolated\" },\n];\nconst kWakeModeOptions = [\n { label: \"now\", value: \"now\" },\n { label: \"next-heartbeat\", value: \"next-heartbeat\" },\n];\nconst kDeliveryNoneValue = \"__none__\";\n\nconst isSameCalendarDay = (leftDate, rightDate) =>\n leftDate.getFullYear() === rightDate.getFullYear() &&\n leftDate.getMonth() === rightDate.getMonth() &&\n leftDate.getDate() === rightDate.getDate();\n\nconst formatCompactMeridiemTime = (dateValue) =>\n dateValue\n .toLocaleTimeString([], {\n hour: \"numeric\",\n minute: \"2-digit\",\n })\n .replace(/\\s*([AP])M$/i, (_, marker) =>\n `${String(marker || \"\").toLowerCase()}m`,\n )\n .replace(/\\s+/g, \"\");\n\nconst formatNextRunAbsolute = (value) => {\n const timestamp = Number(value || 0);\n if (!Number.isFinite(timestamp) || timestamp <= 0) return \"—\";\n const dateValue = new Date(timestamp);\n if (Number.isNaN(dateValue.getTime())) return \"—\";\n const nowValue = new Date();\n const tomorrowValue = new Date(nowValue);\n tomorrowValue.setDate(nowValue.getDate() + 1);\n const isToday = isSameCalendarDay(dateValue, nowValue);\n const isTomorrow = isSameCalendarDay(dateValue, tomorrowValue);\n const compactTime = formatCompactMeridiemTime(dateValue);\n if (isToday) return compactTime;\n if (isTomorrow) return `Tomorrow ${compactTime}`;\n return `${dateValue.toLocaleDateString()} ${compactTime}`;\n};\n\nexport const CronJobSettingsCard = ({\n job = null,\n routingDraft = null,\n onChangeRoutingDraft = () => {},\n destinationSessionKey = \"\",\n onChangeDestinationSessionKey = () => {},\n deliverySessions = [],\n loadingDeliverySessions = false,\n deliverySessionsError = \"\",\n savingChanges = false,\n togglingJobEnabled = false,\n onToggleEnabled = () => {},\n onRunNow = () => {},\n runningJob = false,\n hasUnsavedChanges = false,\n}) => {\n if (!job) return null;\n\n const sessionTarget = String(\n routingDraft?.sessionTarget || job?.sessionTarget || \"main\",\n );\n const wakeMode = String(routingDraft?.wakeMode || job?.wakeMode || \"now\");\n const deliveryMode = String(\n routingDraft?.deliveryMode || job?.delivery?.mode || \"none\",\n );\n const deliverySessionOptions = useMemo(() => {\n const seenLabels = new Set();\n const deduped = [];\n const selectedKey = String(destinationSessionKey || \"\").trim();\n let selectedPresent = false;\n (Array.isArray(deliverySessions) ? deliverySessions : []).forEach(\n (sessionRow) => {\n const key = String(sessionRow?.key || \"\").trim();\n if (!key) return;\n if (key === selectedKey) selectedPresent = true;\n const label = String(\n getSessionDisplayLabel(sessionRow) ||\n sessionRow?.key ||\n \"Session\",\n ).trim();\n const dedupeKey = label.toLowerCase();\n if (seenLabels.has(dedupeKey)) return;\n seenLabels.add(dedupeKey);\n deduped.push(sessionRow);\n },\n );\n if (!selectedPresent && selectedKey) {\n const selectedRow = (\n Array.isArray(deliverySessions) ? deliverySessions : []\n ).find((sessionRow) => String(sessionRow?.key || \"\").trim() === selectedKey);\n if (selectedRow) deduped.unshift(selectedRow);\n }\n return deduped;\n }, [deliverySessions, destinationSessionKey]);\n const deliverySelectValue =\n deliveryMode === \"announce\" && String(destinationSessionKey || \"\").trim()\n ? String(destinationSessionKey || \"\")\n : kDeliveryNoneValue;\n\n return html`\n
    \n
    \n
    ID: ${job.id}
    \n
    \n
    \n
    \n
    Schedule
    \n
    \n ${formatCronScheduleLabel(job.schedule, {\n includeTimeZoneWhenDifferent: true,\n })}\n
    \n
    \n
    \n
    Next run
    \n
    \n ${formatNextRunAbsolute(job?.state?.nextRunAtMs)}\n \n ${` (${formatNextRunRelativeMs(job?.state?.nextRunAtMs)})`}\n \n
    \n
    \n
    \n
    \n
    \n
    Session target
    \n
    \n <${SegmentedControl}\n options=${kSessionTargetOptions}\n value=${sessionTarget}\n onChange=${(value) =>\n onChangeRoutingDraft((currentValue = {}) => ({\n ...currentValue,\n sessionTarget: String(value || \"main\"),\n }))}\n />\n
    \n
    \n
    \n
    Wake mode
    \n
    \n <${SegmentedControl}\n options=${kWakeModeOptions}\n value=${wakeMode}\n onChange=${(value) =>\n onChangeRoutingDraft((currentValue = {}) => ({\n ...currentValue,\n wakeMode: String(value || \"now\"),\n }))}\n />\n
    \n
    \n
    \n
    Delivery
    \n
    \n {\n const nextValue = String(event.currentTarget?.value || \"\");\n if (!nextValue || nextValue === kDeliveryNoneValue) {\n onChangeRoutingDraft((currentValue = {}) => ({\n ...currentValue,\n deliveryMode: \"none\",\n deliveryChannel: \"\",\n deliveryTo: \"\",\n }));\n onChangeDestinationSessionKey(\"\");\n return;\n }\n onChangeDestinationSessionKey(nextValue);\n onChangeRoutingDraft((currentValue = {}) => ({\n ...currentValue,\n deliveryMode: \"announce\",\n }));\n }}\n disabled=${savingChanges}\n class=\"w-full bg-field border border-border rounded-lg px-2 py-1.5 text-[11px] text-body focus:border-fg-muted\"\n >\n \n ${deliverySessionOptions.map(\n (sessionRow) => html`\n \n `,\n )}\n \n
    \n ${loadingDeliverySessions\n ? html`
    \n Loading delivery sessions...\n
    `\n : null}\n ${deliverySessionsError\n ? html`
    \n ${deliverySessionsError}\n
    `\n : null}\n
    \n
    \n
    \n <${ToggleSwitch}\n checked=${job.enabled !== false}\n disabled=${togglingJobEnabled || savingChanges}\n onChange=${onToggleEnabled}\n label=${job.enabled === false ? \"Disabled\" : \"Enabled\"}\n />\n <${ActionButton}\n onClick=${onRunNow}\n loading=${runningJob}\n disabled=${hasUnsavedChanges || savingChanges}\n tone=\"secondary\"\n size=\"sm\"\n idleLabel=\"Run now\"\n loadingLabel=\"Running...\"\n />\n
    \n
    \n `;\n};\n" }, { "path": "lib/public/js/components/cron-tab/cron-job-trends-panel.js", "content": "import { h } from \"preact\";\nimport { useEffect, useMemo, useRef, useState } from \"preact/hooks\";\nimport htm from \"htm\";\nimport Chart from \"chart.js/auto\";\nimport { formatCost, formatTokenCount } from \"./cron-helpers.js\";\nimport { formatChartBucketLabel, formatDurationCompactMs } from \"../../lib/format.js\";\nimport { SegmentedControl } from \"../segmented-control.js\";\n\nconst html = htm.bind(h);\nconst kMetricOutcomes = \"outcomes\";\nconst kMetricTokens = \"tokens\";\nconst kMetricDuration = \"duration\";\nconst kMetricCost = \"cost\";\nconst kRange24h = \"24h\";\nconst kRange7d = \"7d\";\nconst kRange30d = \"30d\";\nconst kRangeOptions = [\n { label: \"24h\", value: kRange24h },\n { label: \"7d\", value: kRange7d },\n { label: \"30d\", value: kRange30d },\n];\nconst kMetricOptions = [\n { label: \"outcomes\", value: kMetricOutcomes },\n { label: \"tokens\", value: kMetricTokens },\n { label: \"duration\", value: kMetricDuration },\n { label: \"cost\", value: kMetricCost },\n];\nconst buildChartData = ({\n trends = null,\n metric = kMetricOutcomes,\n selectedBucketKey = \"\",\n} = {}) => {\n const points = Array.isArray(trends?.points) ? trends.points : [];\n const range = String(trends?.range || kRange7d);\n const labels = points.map((point) =>\n formatChartBucketLabel(point.startMs, {\n range,\n valueType: \"epoch-ms\",\n }));\n const dimAlpha = \"0.22\";\n const fullAlpha = \"0.86\";\n const isDimmed = (index) =>\n selectedBucketKey && String(points[index]?.key || \"\") !== selectedBucketKey;\n if (metric === kMetricOutcomes) {\n return {\n labels,\n datasets: [\n {\n label: \"ok\",\n data: points.map((point) => Number(point?.ok || 0)),\n stack: \"outcomes\",\n backgroundColor: points.map((_, index) =>\n `rgba(34,255,170,${isDimmed(index) ? dimAlpha : fullAlpha})`),\n borderColor: points.map((_, index) =>\n `rgba(34,255,170,${isDimmed(index) ? \"0.35\" : \"1\"})`),\n borderWidth: 1,\n borderRadius: 0,\n borderSkipped: false,\n },\n {\n label: \"error\",\n data: points.map((point) => Number(point?.error || 0)),\n stack: \"outcomes\",\n backgroundColor: points.map((_, index) =>\n `rgba(255,74,138,${isDimmed(index) ? dimAlpha : fullAlpha})`),\n borderColor: points.map((_, index) =>\n `rgba(255,74,138,${isDimmed(index) ? \"0.35\" : \"1\"})`),\n borderWidth: 1,\n borderRadius: 0,\n borderSkipped: false,\n },\n {\n label: \"skipped\",\n data: points.map((point) => Number(point?.skipped || 0)),\n stack: \"outcomes\",\n backgroundColor: points.map((_, index) =>\n `rgba(255,214,64,${isDimmed(index) ? dimAlpha : fullAlpha})`),\n borderColor: points.map((_, index) =>\n `rgba(255,214,64,${isDimmed(index) ? \"0.35\" : \"1\"})`),\n borderWidth: 1,\n borderRadius: 0,\n borderSkipped: false,\n },\n ],\n };\n }\n const valueByPoint = points.map((point) => {\n if (metric === kMetricTokens) return Number(point?.totalTokens || 0);\n if (metric === kMetricCost) return Number(point?.totalCost || 0);\n return Number(point?.avgDurationMs || 0);\n });\n return {\n labels,\n datasets: [\n {\n label:\n metric === kMetricTokens\n ? \"tokens\"\n : metric === kMetricCost\n ? \"cost\"\n : \"avg duration\",\n data: valueByPoint,\n backgroundColor: points.map((_, index) =>\n metric === kMetricTokens\n ? `rgba(34,211,238,${isDimmed(index) ? dimAlpha : \"0.72\"})`\n : metric === kMetricCost\n ? `rgba(167,139,250,${isDimmed(index) ? dimAlpha : \"0.72\"})`\n : `rgba(148,163,184,${isDimmed(index) ? dimAlpha : \"0.72\"})`),\n borderColor: points.map((_, index) =>\n metric === kMetricTokens\n ? `rgba(34,211,238,${isDimmed(index) ? \"0.35\" : \"1\"})`\n : metric === kMetricCost\n ? `rgba(167,139,250,${isDimmed(index) ? \"0.35\" : \"1\"})`\n : `rgba(148,163,184,${isDimmed(index) ? \"0.35\" : \"1\"})`),\n borderWidth: 1,\n borderRadius: 0,\n borderSkipped: false,\n },\n ],\n };\n};\n\nexport const CronJobTrendsPanel = ({\n trends = null,\n range = kRange7d,\n onChangeRange = () => {},\n selectedBucketFilter = null,\n onChangeSelectedBucketFilter = () => {},\n}) => {\n const chartCanvasRef = useRef(null);\n const chartInstanceRef = useRef(null);\n const [metric, setMetric] = useState(kMetricOutcomes);\n const points = useMemo(\n () =>\n Array.isArray(trends?.points)\n ? trends.points.map((point, index) => ({\n ...point,\n key: String(point?.key || `point:${index}:${point?.startMs || 0}`),\n }))\n : [],\n [trends?.points],\n );\n const selectedBucketKey = useMemo(() => {\n if (!selectedBucketFilter) return \"\";\n const matchingPoint = points.find(\n (point) =>\n Number(point.startMs) === Number(selectedBucketFilter.startMs) &&\n Number(point.endMs) === Number(selectedBucketFilter.endMs),\n );\n return matchingPoint?.key || \"\";\n }, [points, selectedBucketFilter]);\n const hasData = useMemo(\n () =>\n points.some(\n (point) =>\n Number(point?.totalRuns || 0) > 0 ||\n Number(point?.totalTokens || 0) > 0 ||\n Number(point?.totalCost || 0) > 0 ||\n Number(point?.avgDurationMs || 0) > 0,\n ),\n [points],\n );\n const chartData = useMemo(\n () => buildChartData({ trends: { ...trends, points }, metric, selectedBucketKey }),\n [metric, points, selectedBucketKey, trends],\n );\n useEffect(() => {\n const canvas = chartCanvasRef.current;\n if (!canvas || !Chart) return;\n if (chartInstanceRef.current) {\n chartInstanceRef.current.destroy();\n chartInstanceRef.current = null;\n }\n const getBucketFilter = (index) => {\n const selectedPoint = points[index];\n if (!selectedPoint) return null;\n return {\n key: selectedPoint.key,\n label: formatChartBucketLabel(selectedPoint.startMs, {\n range,\n valueType: \"epoch-ms\",\n }),\n startMs: Number(selectedPoint.startMs || 0),\n endMs: Number(selectedPoint.endMs || 0),\n range,\n };\n };\n chartInstanceRef.current = new Chart(canvas, {\n type: \"bar\",\n data: chartData,\n options: {\n responsive: true,\n maintainAspectRatio: false,\n interaction: { mode: \"index\", intersect: false },\n animation: false,\n onHover: (event, elements) => {\n const target = event?.native?.target;\n if (!target || !target.style) return;\n target.style.cursor = Array.isArray(elements) && elements.length > 0\n ? \"pointer\"\n : \"default\";\n },\n onClick: (_event, elements) => {\n const index = Number(elements?.[0]?.index);\n if (!Number.isFinite(index)) return;\n const nextFilter = getBucketFilter(index);\n if (!nextFilter) return;\n if (nextFilter.key === selectedBucketKey) {\n onChangeSelectedBucketFilter(null);\n return;\n }\n onChangeSelectedBucketFilter(nextFilter);\n },\n scales: {\n x: {\n stacked: metric === kMetricOutcomes,\n grid: { color: \"rgba(148,163,184,0.08)\" },\n ticks: {\n color: \"rgba(156,163,175,1)\",\n maxRotation: 0,\n autoSkip: true,\n },\n },\n y: {\n stacked: metric === kMetricOutcomes,\n beginAtZero: true,\n grid: { color: \"rgba(148,163,184,0.12)\" },\n ticks: {\n precision: metric === kMetricCost ? undefined : 0,\n color: \"rgba(156,163,175,1)\",\n callback: (value) => {\n const numericValue = Number(value || 0);\n if (metric === kMetricCost) return formatCost(numericValue);\n if (metric === kMetricDuration) {\n return numericValue > 0 ? formatDurationCompactMs(numericValue) : \"0\";\n }\n return formatTokenCount(numericValue);\n },\n },\n },\n },\n plugins: {\n legend: {\n position: \"bottom\",\n labels: {\n color: \"rgba(209,213,219,1)\",\n boxWidth: 10,\n boxHeight: 10,\n },\n },\n tooltip: {\n callbacks: {\n title: (items) => String(items?.[0]?.label || \"\"),\n label: (context) => {\n const value = Number(context.parsed.y || 0);\n if (metric === kMetricCost) {\n return `${context.dataset.label}: ${formatCost(value)}`;\n }\n if (metric === kMetricDuration) {\n return `${context.dataset.label}: ${value > 0 ? formatDurationCompactMs(value) : \"—\"}`;\n }\n return `${context.dataset.label}: ${formatTokenCount(value)}`;\n },\n footer: (items) => {\n const index = Number(items?.[0]?.dataIndex);\n const point = points[index];\n if (!point) return \"\";\n const runsLabel = `runs: ${formatTokenCount(point.totalRuns || 0)}`;\n const tokensLabel = `tokens: ${formatTokenCount(point.totalTokens || 0)}`;\n const costLabel = `cost: ${formatCost(point.totalCost || 0)}`;\n return `${runsLabel}\\n${tokensLabel}\\n${costLabel}`;\n },\n },\n },\n },\n },\n });\n return () => {\n if (chartInstanceRef.current) {\n chartInstanceRef.current.destroy();\n chartInstanceRef.current = null;\n }\n };\n }, [\n chartData,\n metric,\n onChangeSelectedBucketFilter,\n points,\n range,\n selectedBucketKey,\n trends?.bucket,\n ]);\n return html`\n
    \n
    \n

    Trends

    \n
    \n <${SegmentedControl}\n options=${kMetricOptions}\n value=${metric}\n onChange=${setMetric}\n />\n <${SegmentedControl}\n options=${kRangeOptions}\n value=${range}\n onChange=${onChangeRange}\n />\n
    \n
    \n ${hasData\n ? html`\n
    \n \n
    \n `\n : html`
    No run data in this window yet.
    `}\n
    \n `;\n};\n" }, { "path": "lib/public/js/components/cron-tab/cron-job-usage.js", "content": "import { h } from \"preact\";\nimport htm from \"htm\";\nimport { formatCost, formatTokenCount } from \"./cron-helpers.js\";\nimport { formatDurationCompactMs } from \"../../lib/format.js\";\nimport { SegmentedControl } from \"../segmented-control.js\";\n\nconst html = htm.bind(h);\nconst kUsageRangeOptions = [\n { label: \"7d\", value: 7 },\n { label: \"30d\", value: 30 },\n];\n\nconst resolveDominantModel = (usage = null) => {\n const list = Array.isArray(usage?.modelBreakdown) ? usage.modelBreakdown : [];\n if (list.length === 0) return \"—\";\n const first = list[0];\n const model = String(first?.model || \"\").trim();\n const provider = String(first?.provider || \"\").trim();\n if (!model && !provider) return \"—\";\n if (!provider) return model;\n if (!model) return provider;\n return `${provider} / ${model}`;\n};\n\nexport const CronJobUsage = ({ usage = null, usageDays = 30, onSetUsageDays = () => {} }) => {\n const totals = usage?.totals || {};\n const totalRuns = Number(totals?.runCount || 0);\n const totalTokens = Number(totals?.totalTokens || 0);\n const totalCost = Number(totals?.totalCost || 0);\n const averageDurationMs = Number(totals?.avgDurationMs || 0);\n const averageTokensPerRun = totalRuns > 0 ? Math.round(totalTokens / totalRuns) : 0;\n const averageCostPerRun = totalRuns > 0 ? totalCost / totalRuns : 0;\n return html`\n
    \n
    \n

    Usage

    \n <${SegmentedControl}\n options=${kUsageRangeOptions}\n value=${usageDays}\n onChange=${onSetUsageDays}\n />\n
    \n
    \n
    \n
    Total runs
    \n
    ${formatTokenCount(totalRuns)}
    \n
    \n
    \n
    Total tokens
    \n
    ${formatTokenCount(totalTokens)}
    \n
    \n
    \n
    Total cost
    \n
    ${formatCost(totalCost)}
    \n
    \n
    \n
    Avg run time
    \n
    \n ${averageDurationMs > 0 ? formatDurationCompactMs(averageDurationMs) : \"—\"}\n
    \n
    \n
    \n
    Avg tokens/run
    \n
    ${formatTokenCount(averageTokensPerRun)}
    \n
    \n
    \n
    Avg cost/run
    \n
    ${formatCost(averageCostPerRun)}
    \n
    \n
    \n
    \n Dominant model:${\" \"}\n ${resolveDominantModel(usage)}\n
    \n
    \n `;\n};\n" }, { "path": "lib/public/js/components/cron-tab/cron-overview.js", "content": "import { h } from \"preact\";\nimport { useEffect, useMemo, useState } from \"preact/hooks\";\nimport htm from \"htm\";\nimport {\n buildCronOptimizationWarnings,\n formatTokenCount,\n getNextScheduledRunAcrossJobs,\n} from \"./cron-helpers.js\";\nimport { CronCalendar } from \"./cron-calendar.js\";\nimport { CronRunsTrendCard } from \"./cron-runs-trend-card.js\";\nimport { CronRunHistoryPanel } from \"./cron-run-history-panel.js\";\nimport { CronInsightsPanel } from \"./cron-insights-panel.js\";\nimport { SummaryStatCard } from \"../summary-stat-card.js\";\nimport { ErrorWarningLineIcon } from \"../icons.js\";\n\nconst html = htm.bind(h);\nconst kRecentRunFetchLimit = 100;\nconst kRecentRunRowsLimit = 20;\nconst kRecentRunCollapseThreshold = 2;\nconst kTrendRange24h = \"24h\";\nconst kTrendRange7d = \"7d\";\nconst kTrendRange30d = \"30d\";\nconst kTrendQueryStartKey = \"trendStart\";\nconst kTrendQueryEndKey = \"trendEnd\";\nconst kTrendQueryRangeKey = \"trendRange\";\nconst kTrendQueryLabelKey = \"trendLabel\";\n\nconst kRunStatusFilterOptions = [\n { label: \"all\", value: \"all\" },\n { label: \"ok\", value: \"ok\" },\n { label: \"error\", value: \"error\" },\n { label: \"skipped\", value: \"skipped\" },\n];\n\nconst warningClassName = (tone) => {\n if (tone === \"error\") return \"border-status-error-border bg-status-error-bg text-status-error\";\n if (tone === \"warning\")\n return \"border-status-warning-border bg-status-warning-bg text-status-warning\";\n return \"border-border bg-field text-body\";\n};\n\nconst formatWarningsAttentionText = (warnings = []) => {\n const errorCount = warnings.filter(\n (warning) => warning?.tone === \"error\",\n ).length;\n const warningCount = warnings.filter(\n (warning) => warning?.tone === \"warning\",\n ).length;\n const totalCount = errorCount + warningCount;\n if (totalCount <= 0) return \"No warnings currently need your attention\";\n const parts = [];\n if (errorCount > 0)\n parts.push(`${errorCount} error${errorCount === 1 ? \"\" : \"s\"}`);\n if (warningCount > 0)\n parts.push(`${warningCount} warning${warningCount === 1 ? \"\" : \"s\"}`);\n return `${parts.join(\" and \")} may need your attention`;\n};\n\nconst flattenRecentRuns = ({ bulkRunsByJobId = {}, jobs = [], limit = 0 } = {}) => {\n const jobNameById = jobs.reduce((accumulator, job) => {\n const jobId = String(job?.id || \"\");\n if (!jobId) return accumulator;\n accumulator[jobId] = String(job?.name || jobId);\n return accumulator;\n }, {});\n return Object.entries(bulkRunsByJobId || {})\n .flatMap(([jobId, runResult]) => {\n const entries = Array.isArray(runResult?.entries)\n ? runResult.entries\n : [];\n return entries.map((entry) => ({\n ...entry,\n jobId: String(jobId || \"\"),\n jobName: jobNameById[jobId] || String(jobId || \"\"),\n }));\n })\n .filter((entry) => Number(entry?.ts || 0) > 0)\n .sort((left, right) => Number(right?.ts || 0) - Number(left?.ts || 0))\n .slice(0, Number(limit || 0) > 0 ? Number(limit || 0) : undefined);\n};\n\nconst buildCollapsedRunRows = (recentRuns = []) => {\n const rows = [];\n let index = 0;\n while (index < recentRuns.length && rows.length < kRecentRunRowsLimit) {\n const current = recentRuns[index];\n let streakEnd = index + 1;\n while (\n streakEnd < recentRuns.length &&\n String(recentRuns[streakEnd]?.jobId || \"\") ===\n String(current?.jobId || \"\")\n ) {\n streakEnd += 1;\n }\n const streak = recentRuns.slice(index, streakEnd);\n if (streak.length >= kRecentRunCollapseThreshold) {\n const statusCounts = streak.reduce((accumulator, runEntry) => {\n const status = String(runEntry?.status || \"unknown\");\n accumulator[status] = Number(accumulator[status] || 0) + 1;\n return accumulator;\n }, {});\n rows.push({\n type: \"collapsed-group\",\n jobId: String(current?.jobId || \"\"),\n jobName: String(current?.jobName || current?.jobId || \"\"),\n count: streak.length,\n newestTs: Number(streak[0]?.ts || 0),\n oldestTs: Number(streak[streak.length - 1]?.ts || 0),\n statusCounts,\n entries: streak,\n });\n index = streakEnd;\n continue;\n }\n for (const runEntry of streak) {\n if (rows.length >= kRecentRunRowsLimit) break;\n rows.push({\n type: \"entry\",\n entry: runEntry,\n });\n }\n index = streakEnd;\n }\n return rows;\n};\n\nconst getHashRouteParts = () => {\n const rawHash = String(window.location.hash || \"\").replace(/^#/, \"\");\n const hashPath = rawHash || \"/cron\";\n const [pathPart, queryPart = \"\"] = hashPath.split(\"?\");\n return {\n pathPart: pathPart || \"/cron\",\n params: new URLSearchParams(queryPart),\n };\n};\n\nconst readTrendFilterFromHash = () => {\n const { params } = getHashRouteParts();\n const startMs = Number(params.get(kTrendQueryStartKey) || 0);\n const endMs = Number(params.get(kTrendQueryEndKey) || 0);\n const range = String(params.get(kTrendQueryRangeKey) || kTrendRange24h);\n const label = String(params.get(kTrendQueryLabelKey) || \"\");\n const hasValidRange =\n range === kTrendRange24h || range === kTrendRange7d || range === kTrendRange30d;\n if (\n !Number.isFinite(startMs) ||\n !Number.isFinite(endMs) ||\n endMs <= startMs\n ) {\n return null;\n }\n return {\n startMs,\n endMs,\n range: hasValidRange ? range : kTrendRange24h,\n label: label || \"selected period\",\n };\n};\n\nconst writeTrendFilterToHash = (filterValue = null) => {\n const { pathPart, params } = getHashRouteParts();\n if (!filterValue) {\n params.delete(kTrendQueryStartKey);\n params.delete(kTrendQueryEndKey);\n params.delete(kTrendQueryRangeKey);\n params.delete(kTrendQueryLabelKey);\n } else {\n params.set(kTrendQueryStartKey, String(Number(filterValue.startMs || 0)));\n params.set(kTrendQueryEndKey, String(Number(filterValue.endMs || 0)));\n params.set(\n kTrendQueryRangeKey,\n filterValue.range === kTrendRange30d\n ? kTrendRange30d\n : filterValue.range === kTrendRange7d\n ? kTrendRange7d\n : kTrendRange24h,\n );\n params.set(kTrendQueryLabelKey, String(filterValue.label || \"\"));\n }\n const nextQuery = params.toString();\n const nextHash = nextQuery ? `#${pathPart}?${nextQuery}` : `#${pathPart}`;\n const nextUrl = `${window.location.pathname}${window.location.search}${nextHash}`;\n window.history.replaceState(window.history.state, \"\", nextUrl);\n};\n\nexport const CronOverview = ({\n jobs = [],\n bulkUsageByJobId = {},\n bulkRunsByJobId = {},\n onSelectJob = () => {},\n}) => {\n const [recentRunStatusFilter, setRecentRunStatusFilter] = useState(\"all\");\n const [selectedTrendBucketFilter, setSelectedTrendBucketFilter] = useState(\n () => readTrendFilterFromHash(),\n );\n const enabledCount = jobs.filter((job) => job.enabled !== false).length;\n const disabledCount = jobs.length - enabledCount;\n const nextRunMs = getNextScheduledRunAcrossJobs(jobs);\n const warnings = buildCronOptimizationWarnings(jobs, bulkRunsByJobId);\n const allRecentRuns = useMemo(\n () => flattenRecentRuns({ bulkRunsByJobId, jobs }),\n [bulkRunsByJobId, jobs],\n );\n const recentRunsForDisplay = useMemo(\n () => allRecentRuns.slice(0, kRecentRunFetchLimit),\n [allRecentRuns],\n );\n const timeFilteredRecentRuns = useMemo(() => {\n if (!selectedTrendBucketFilter) return recentRunsForDisplay;\n const startMs = Number(selectedTrendBucketFilter?.startMs || 0);\n const endMs = Number(selectedTrendBucketFilter?.endMs || 0);\n if (\n !Number.isFinite(startMs) ||\n !Number.isFinite(endMs) ||\n endMs <= startMs\n ) {\n return recentRunsForDisplay;\n }\n return allRecentRuns.filter((entry) => {\n const timestampMs = Number(entry?.ts || 0);\n return (\n Number.isFinite(timestampMs) &&\n timestampMs >= startMs &&\n timestampMs < endMs\n );\n });\n }, [allRecentRuns, recentRunsForDisplay, selectedTrendBucketFilter]);\n const filteredRecentRuns = useMemo(\n () =>\n timeFilteredRecentRuns.filter((entry) =>\n recentRunStatusFilter === \"all\"\n ? true\n : String(entry?.status || \"\")\n .trim()\n .toLowerCase() === recentRunStatusFilter,\n ),\n [recentRunStatusFilter, timeFilteredRecentRuns],\n );\n const recentRunRows = useMemo(\n () => buildCollapsedRunRows(filteredRecentRuns),\n [filteredRecentRuns],\n );\n const initialTrendRange =\n selectedTrendBucketFilter?.range === kTrendRange30d\n ? kTrendRange30d\n : selectedTrendBucketFilter?.range === kTrendRange7d\n ? kTrendRange7d\n : kTrendRange24h;\n useEffect(() => {\n writeTrendFilterToHash(selectedTrendBucketFilter);\n }, [selectedTrendBucketFilter]);\n\n return html`\n
    \n
    \n
    \n <${SummaryStatCard}\n title=\"Total jobs\"\n value=${jobs.length}\n monospace=${true}\n />\n <${SummaryStatCard}\n title=\"Enabled\"\n value=${enabledCount}\n monospace=${true}\n />\n <${SummaryStatCard}\n title=\"Disabled\"\n value=${disabledCount}\n monospace=${true}\n />\n
    \n\n
    \n
    \n \n
    \n
    \n <${ErrorWarningLineIcon}\n className=\"w-4 h-4 text-status-warning shrink-0\"\n />\n
    \n ${formatWarningsAttentionText(warnings)}\n
    \n
    \n ▸\n
    \n     \n
    \n ${warnings.length === 0\n ? html`
    \n No warnings right now.\n
    `\n : html`\n
    \n ${warnings.map(\n (warning, index) => html`\n {\n if (!warning?.jobId) return;\n onSelectJob(warning.jobId);\n }}\n onKeyDown=${(event) => {\n if (!warning?.jobId) return;\n if (event.key !== \"Enter\" && event.key !== \" \")\n return;\n event.preventDefault();\n onSelectJob(warning.jobId);\n }}\n >\n
    ${warning.title}
    \n
    ${warning.body}
    \n
    \n `,\n )}\n
    \n `}\n
    \n \n \n\n <${CronCalendar}\n jobs=${jobs}\n usageByJobId=${bulkUsageByJobId}\n runsByJobId=${bulkRunsByJobId}\n onSelectJob=${onSelectJob}\n />\n\n <${CronInsightsPanel}\n jobs=${jobs}\n bulkRunsByJobId=${bulkRunsByJobId}\n onSelectJob=${onSelectJob}\n />\n\n <${CronRunsTrendCard}\n bulkRunsByJobId=${bulkRunsByJobId}\n initialRange=${initialTrendRange}\n selectedBucketFilter=${selectedTrendBucketFilter}\n onBucketFilterChange=${setSelectedTrendBucketFilter}\n />\n\n <${CronRunHistoryPanel}\n entryCountLabel=${`${formatTokenCount(filteredRecentRuns.length)} entries`}\n primaryFilterOptions=${kRunStatusFilterOptions}\n primaryFilterValue=${recentRunStatusFilter}\n onChangePrimaryFilter=${setRecentRunStatusFilter}\n activeFilterLabel=${selectedTrendBucketFilter?.label || \"\"}\n onClearActiveFilter=${() => setSelectedTrendBucketFilter(null)}\n rows=${recentRunRows}\n variant=\"overview\"\n onSelectJob=${onSelectJob}\n showOpenJobButton=${true}\n />\n
    \n \n `;\n};\n" }, { "path": "lib/public/js/components/cron-tab/cron-prompt-editor.js", "content": "import { h } from \"preact\";\nimport { useEffect, useMemo, useRef, useState } from \"preact/hooks\";\nimport htm from \"htm\";\nimport { EditorSurface } from \"../file-viewer/editor-surface.js\";\nimport { countTextLines, shouldUseSimpleEditorMode } from \"../file-viewer/utils.js\";\nimport {\n kLargeFileSimpleEditorCharThreshold,\n kLargeFileSimpleEditorLineThreshold,\n} from \"../file-viewer/constants.js\";\nimport { useEditorLineNumberSync } from \"../file-viewer/use-editor-line-number-sync.js\";\nimport { highlightEditorLines } from \"../../lib/syntax-highlighters/index.js\";\nimport { readUiSettings, writeUiSettings } from \"../../lib/ui-settings.js\";\n\nconst html = htm.bind(h);\nconst kCronPromptEditorHeightUiSettingKey = \"cronPromptEditorHeightPx\";\nconst kCronPromptEditorDefaultHeightPx = 280;\nconst kCronPromptEditorMinHeightPx = 180;\n\nconst clampPromptEditorHeight = (value) => {\n const parsed = Number(value);\n const normalized = Number.isFinite(parsed)\n ? Math.round(parsed)\n : kCronPromptEditorDefaultHeightPx;\n return Math.max(kCronPromptEditorMinHeightPx, normalized);\n};\n\nconst readCssHeightPx = (element) => {\n if (!element) return 0;\n const computedHeight = Number.parseFloat(\n window.getComputedStyle(element).height || \"0\",\n );\n return Number.isFinite(computedHeight) ? computedHeight : 0;\n};\n\nexport const CronPromptEditor = ({\n promptValue = \"\",\n savedPromptValue = \"\",\n onChangePrompt = () => {},\n onSaveChanges = () => {},\n}) => {\n const promptEditorShellRef = useRef(null);\n const editorTextareaRef = useRef(null);\n const editorLineNumbersRef = useRef(null);\n const editorLineNumberRowRefs = useRef([]);\n const editorHighlightRef = useRef(null);\n const editorHighlightLineRefs = useRef([]);\n const [promptEditorHeightPx, setPromptEditorHeightPx] = useState(() => {\n const settings = readUiSettings();\n return clampPromptEditorHeight(\n settings?.[kCronPromptEditorHeightUiSettingKey],\n );\n });\n\n const lineCount = countTextLines(promptValue);\n const shouldUseHighlightedEditor = !shouldUseSimpleEditorMode({\n contentLength: promptValue.length,\n lineCount,\n charThreshold: kLargeFileSimpleEditorCharThreshold,\n lineThreshold: kLargeFileSimpleEditorLineThreshold,\n });\n const highlightedEditorLines = useMemo(\n () =>\n shouldUseHighlightedEditor\n ? highlightEditorLines(promptValue, \"markdown\")\n : [],\n [promptValue, shouldUseHighlightedEditor],\n );\n const editorLineCount = Math.max(\n lineCount,\n Array.isArray(highlightedEditorLines) ? highlightedEditorLines.length : 0,\n );\n const editorLineNumbers = useMemo(\n () => Array.from({ length: editorLineCount }, (_, index) => index + 1),\n [editorLineCount],\n );\n const isDirty = promptValue !== savedPromptValue;\n\n useEditorLineNumberSync({\n enabled: shouldUseHighlightedEditor,\n syncKey: `${promptValue.length}:${highlightedEditorLines.length}`,\n editorLineNumberRowRefs,\n editorHighlightLineRefs,\n });\n\n const handleEditorScroll = (event) => {\n const scrollTop = event.currentTarget.scrollTop;\n if (editorLineNumbersRef.current)\n editorLineNumbersRef.current.scrollTop = scrollTop;\n if (editorHighlightRef.current) {\n editorHighlightRef.current.scrollTop = scrollTop;\n }\n };\n\n const handleEditorKeyDown = (event) => {\n if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === \"s\") {\n event.preventDefault();\n onSaveChanges();\n }\n if (event.key === \"Tab\") {\n event.preventDefault();\n const textarea = editorTextareaRef.current;\n if (!textarea) return;\n const start = textarea.selectionStart;\n const end = textarea.selectionEnd;\n const nextValue = `${promptValue.slice(0, start)} ${promptValue.slice(end)}`;\n onChangePrompt(nextValue);\n window.requestAnimationFrame(() => {\n textarea.selectionStart = start + 2;\n textarea.selectionEnd = start + 2;\n });\n }\n };\n\n useEffect(() => {\n const shellElement = promptEditorShellRef.current;\n if (!shellElement || typeof ResizeObserver === \"undefined\") return () => {};\n\n let saveTimer = null;\n const observer = new ResizeObserver((entries) => {\n const entry = entries?.[0];\n const nextHeight = clampPromptEditorHeight(readCssHeightPx(entry?.target));\n setPromptEditorHeightPx((currentValue) =>\n Math.abs(currentValue - nextHeight) >= 1 ? nextHeight : currentValue,\n );\n if (saveTimer) window.clearTimeout(saveTimer);\n saveTimer = window.setTimeout(() => {\n const settings = readUiSettings();\n settings[kCronPromptEditorHeightUiSettingKey] = nextHeight;\n writeUiSettings(settings);\n }, 120);\n });\n observer.observe(shellElement);\n return () => {\n observer.disconnect();\n if (saveTimer) window.clearTimeout(saveTimer);\n };\n }, []);\n\n return html`\n
    \n
    \n

    \n Prompt\n ${isDirty ? html`` : null}\n

    \n
    \n \n <${EditorSurface}\n editorShellClassName=\"file-viewer-editor-shell\"\n editorLineNumbers=${editorLineNumbers}\n editorLineNumbersRef=${editorLineNumbersRef}\n editorLineNumberRowRefs=${editorLineNumberRowRefs}\n shouldUseHighlightedEditor=${shouldUseHighlightedEditor}\n highlightedEditorLines=${highlightedEditorLines}\n editorHighlightRef=${editorHighlightRef}\n editorHighlightLineRefs=${editorHighlightLineRefs}\n editorTextareaRef=${editorTextareaRef}\n renderContent=${promptValue}\n handleContentInput=${(event) => onChangePrompt(event.target.value)}\n handleEditorKeyDown=${handleEditorKeyDown}\n handleEditorScroll=${handleEditorScroll}\n handleEditorSelectionChange=${() => {}}\n isEditBlocked=${false}\n isPreviewOnly=${false}\n />\n \n
    \n `;\n};\n" }, { "path": "lib/public/js/components/cron-tab/cron-run-history-panel.js", "content": "import { h } from \"preact\";\nimport htm from \"htm\";\nimport { SegmentedControl } from \"../segmented-control.js\";\nimport {\n formatDurationCompactMs,\n formatLocaleDateTimeWithTodayTime,\n} from \"../../lib/format.js\";\nimport {\n formatCost,\n formatTokenCount,\n getCronRunEstimatedCost,\n getCronRunTotalTokens,\n} from \"./cron-helpers.js\";\n\nconst html = htm.bind(h);\nconst runStatusClassName = (status = \"\") => {\n const normalized = String(status || \"\")\n .trim()\n .toLowerCase();\n if (normalized === \"ok\") return \"text-status-success\";\n if (normalized === \"error\") return \"text-status-error\";\n if (normalized === \"skipped\") return \"text-status-warning\";\n return \"text-fg-muted\";\n};\nconst runDeliveryLabel = (run) =>\n String(run?.deliveryStatus || \"not-requested\");\nconst formatOverviewTimestamp = (timestampMs) =>\n formatLocaleDateTimeWithTodayTime(timestampMs, {\n fallback: \"—\",\n valueIsEpochMs: true,\n }).replace(\n /\\s([AP])M\\b/g,\n (_, marker) => `${String(marker || \"\").toLowerCase()}m`,\n );\nconst formatDetailTimestamp = (timestampMs) =>\n formatLocaleDateTimeWithTodayTime(timestampMs, {\n fallback: \"—\",\n valueIsEpochMs: true,\n });\nconst formatRowTimestamp = (timestampMs, variant = \"overview\") =>\n variant === \"detail\"\n ? formatDetailTimestamp(timestampMs)\n : formatOverviewTimestamp(timestampMs);\nconst renderEntrySummaryRow = ({ runEntry = {}, variant = \"overview\" }) => {\n const runStatus = String(runEntry?.status || \"unknown\");\n const runTokens = getCronRunTotalTokens(runEntry);\n const runEstimatedCost = getCronRunEstimatedCost(runEntry);\n const runTitle = String(runEntry?.jobName || \"\").trim();\n const hasRunTitle = runTitle.length > 0;\n const isDetail = variant === \"detail\";\n return html`\n
    \n \n ${isDetail\n ? html`\n \n ${formatRowTimestamp(runEntry.ts, variant)}\n \n `\n : hasRunTitle\n ? html`\n \n ${runTitle}\n \n ${formatRowTimestamp(runEntry.ts, variant)}\n \n \n `\n : html`\n \n ${runEntry.jobId} -\n ${formatRowTimestamp(runEntry.ts, variant)}\n \n `}\n \n \n ${runStatus}\n ${formatDurationCompactMs(runEntry.durationMs)}\n ${formatTokenCount(runTokens)} tk\n ${isDetail\n ? html`${runDeliveryLabel(runEntry)}`\n : html`\n \n ${runEstimatedCost == null\n ? \"—\"\n : `~${formatCost(runEstimatedCost)}`}\n \n `}\n \n
    \n `;\n};\nconst getCollapsedGroupAggregates = (entries = []) =>\n entries.reduce(\n (accumulator, runEntry) => {\n accumulator.totalTokens += getCronRunTotalTokens(runEntry);\n const estimatedCost = getCronRunEstimatedCost(runEntry);\n if (estimatedCost != null) {\n accumulator.totalCost += estimatedCost;\n accumulator.hasAnyCost = true;\n }\n return accumulator;\n },\n { totalTokens: 0, totalCost: 0, hasAnyCost: false },\n );\nconst renderCollapsedGroupRow = ({ row, rowIndex, onSelectJob = () => {} }) => {\n const entries = Array.isArray(row?.entries) ? row.entries : [];\n const { totalTokens, totalCost, hasAnyCost } =\n getCollapsedGroupAggregates(entries);\n const timeRangeLabel = `${formatOverviewTimestamp(row.oldestTs)} - ${formatOverviewTimestamp(row.newestTs)}`;\n return html`\n \n \n
    \n \n ▸\n \n \n ${row.jobName} - ${formatTokenCount(row.count)} runs\n \n ${timeRangeLabel}\n \n \n \n ${formatTokenCount(totalTokens)} tk\n \n ${hasAnyCost ? `~${formatCost(totalCost)}` : \"—\"}\n \n \n
    \n     \n
    \n ${entries.length > 0\n ? html`\n
    \n ${entries.map((runEntry, entryIndex) =>\n renderEntryRow({\n row: {\n type: \"entry\",\n entry: runEntry,\n },\n rowIndex: `${rowIndex}:${entryIndex}`,\n variant: \"overview\",\n onSelectJob,\n showOpenJobButton: false,\n itemClassName:\n \"ac-history-item ac-history-item-flat border-b border-border rounded-none\",\n }),\n )}\n
    \n `\n : null}\n ${row?.jobId\n ? html`\n
    \n onSelectJob(row.jobId)}\n >\n Open ${row.jobName || row.jobId}\n \n
    \n `\n : null}\n
    \n \n `;\n};\nconst renderEntryRow = ({\n row,\n rowIndex,\n variant = \"overview\",\n onSelectJob = () => {},\n showOpenJobButton = false,\n itemClassName = \"ac-history-item\",\n}) => {\n const runEntry = row?.entry || row || {};\n const runUsage = runEntry?.usage || {};\n const runInputTokens = Number(\n runUsage?.input_tokens ?? runUsage?.inputTokens ?? 0,\n );\n const runOutputTokens = Number(\n runUsage?.output_tokens ?? runUsage?.outputTokens ?? 0,\n );\n const runTokens = getCronRunTotalTokens(runEntry);\n const runEstimatedCost = getCronRunEstimatedCost(runEntry);\n return html`\n \n \n
    \n ▸\n
    \n ${renderEntrySummaryRow({ runEntry, variant })}\n
    \n
    \n     \n
    \n ${runEntry.summary\n ? html`
    \n Summary: ${runEntry.summary}\n
    `\n : null}\n ${runEntry.error\n ? html`
    \n Error: ${runEntry.error}\n
    `\n : null}\n
    \n
    \n Model:\n ${runEntry.model || \"—\"}\n
    \n
    \n Session:\n ${runEntry.sessionKey || \"—\"}\n
    \n
    \n Tokens in:\n ${formatTokenCount(runInputTokens)}\n
    \n
    \n Tokens out:\n ${formatTokenCount(runOutputTokens)}\n
    \n
    \n Total tokens:\n ${formatTokenCount(runTokens)}\n
    \n
    \n Total cost:\n \n ${runEstimatedCost == null\n ? \"—\"\n : `~${formatCost(runEstimatedCost)}`}\n \n
    \n
    \n ${showOpenJobButton && runEntry?.jobId\n ? html`\n
    \n onSelectJob(runEntry.jobId)}\n >\n Open ${runEntry.jobName || runEntry.jobId}\n \n
    \n `\n : null}\n
    \n \n `;\n};\n\nexport const CronRunHistoryPanel = ({\n entryCountLabel = \"\",\n primaryFilterOptions = [],\n primaryFilterValue = \"all\",\n onChangePrimaryFilter = () => {},\n secondaryFilterOptions = [],\n secondaryFilterValue = \"all\",\n onChangeSecondaryFilter = () => {},\n activeFilterLabel = \"\",\n onClearActiveFilter = () => {},\n rows = [],\n emptyText = \"No runs found.\",\n variant = \"overview\",\n onSelectJob = () => {},\n showOpenJobButton = false,\n footer = null,\n}) => html`\n
    \n
    \n
    \n

    Recent runs

    \n
    ${entryCountLabel}
    \n
    \n
    \n <${SegmentedControl}\n options=${primaryFilterOptions}\n value=${primaryFilterValue}\n onChange=${onChangePrimaryFilter}\n />\n ${Array.isArray(secondaryFilterOptions) &&\n secondaryFilterOptions.length > 0\n ? html`\n <${SegmentedControl}\n options=${secondaryFilterOptions}\n value=${secondaryFilterValue}\n onChange=${onChangeSecondaryFilter}\n />\n `\n : null}\n
    \n
    \n ${activeFilterLabel\n ? html`\n
    \n \n Filtered to ${activeFilterLabel}\n \n ×\n \n \n
    \n `\n : null}\n ${rows.length === 0\n ? html`
    ${emptyText}
    `\n : html`\n
    \n ${rows.map((row, rowIndex) =>\n row?.type === \"collapsed-group\"\n ? renderCollapsedGroupRow({ row, rowIndex, onSelectJob })\n : renderEntryRow({\n row,\n rowIndex,\n variant,\n onSelectJob,\n showOpenJobButton,\n }),\n )}\n
    \n `}\n ${footer}\n
    \n`;\n" }, { "path": "lib/public/js/components/cron-tab/cron-runs-trend-card.js", "content": "import { h } from \"preact\";\nimport { useEffect, useMemo, useRef, useState } from \"preact/hooks\";\nimport htm from \"htm\";\nimport Chart from \"chart.js/auto\";\nimport { formatChartBucketLabel } from \"../../lib/format.js\";\nimport { SegmentedControl } from \"../segmented-control.js\";\nimport {\n formatCost,\n formatTokenCount,\n getCronRunEstimatedCost,\n getCronRunTotalTokens,\n} from \"./cron-helpers.js\";\n\nconst html = htm.bind(h);\n\nconst kRange24h = \"24h\";\nconst kRange7d = \"7d\";\nconst kRange30d = \"30d\";\n\nconst kRanges = [\n { label: \"24h\", value: kRange24h },\n { label: \"7d\", value: kRange7d },\n { label: \"30d\", value: kRange30d },\n];\nconst kMetricOutcomes = \"outcomes\";\nconst kMetricTokens = \"tokens\";\nconst kMetricCost = \"cost\";\nconst kMetricOptions = [\n { label: \"outcomes\", value: kMetricOutcomes },\n { label: \"tokens\", value: kMetricTokens },\n { label: \"cost\", value: kMetricCost },\n];\n\nconst startOfLocalDayMs = (valueMs) => {\n const dateValue = new Date(valueMs);\n dateValue.setHours(0, 0, 0, 0);\n return dateValue.getTime();\n};\n\nconst addLocalDaysMs = (valueMs, dayCount = 0) => {\n const dateValue = new Date(valueMs);\n dateValue.setDate(dateValue.getDate() + Number(dayCount || 0));\n return dateValue.getTime();\n};\n\nconst getBucketConfig = (range = kRange7d) => {\n if (range === kRange24h) {\n return {\n bucketCount: 24,\n bucketMs: 60 * 60 * 1000,\n formatLabel: (valueMs) =>\n formatChartBucketLabel(valueMs, { range: kRange24h, valueType: \"epoch-ms\" }),\n showLabel: (_, index, total) => index % 3 === 0 || index === total - 1,\n alignToLocalDay: false,\n };\n }\n if (range === kRange30d) {\n return {\n bucketCount: 30,\n bucketMs: 24 * 60 * 60 * 1000,\n formatLabel: (valueMs) =>\n formatChartBucketLabel(valueMs, { range: kRange30d, valueType: \"epoch-ms\" }),\n showLabel: (_, index, total) => index % 5 === 0 || index === total - 1,\n alignToLocalDay: true,\n };\n }\n return {\n bucketCount: 7,\n bucketMs: 24 * 60 * 60 * 1000,\n formatLabel: (valueMs) =>\n formatChartBucketLabel(valueMs, { range: kRange7d, valueType: \"epoch-ms\" }),\n showLabel: () => true,\n alignToLocalDay: true,\n };\n};\n\nconst buildTrendData = ({ bulkRunsByJobId = {}, nowMs = Date.now(), range = kRange7d } = {}) => {\n const config = getBucketConfig(range);\n const safeNowMs = Number.isFinite(Number(nowMs)) ? Number(nowMs) : Date.now();\n const baseStartMs = config.alignToLocalDay\n ? addLocalDaysMs(startOfLocalDayMs(safeNowMs), -(config.bucketCount - 1))\n : safeNowMs - config.bucketCount * config.bucketMs;\n const points = Array.from({ length: config.bucketCount }, (_, index) => {\n const startMs = config.alignToLocalDay\n ? addLocalDaysMs(baseStartMs, index)\n : baseStartMs + index * config.bucketMs;\n const endMs = index === config.bucketCount - 1\n ? safeNowMs\n : config.alignToLocalDay\n ? addLocalDaysMs(baseStartMs, index + 1)\n : baseStartMs + (index + 1) * config.bucketMs;\n return {\n key: `trend-point-${index}`,\n startMs,\n endMs,\n ok: 0,\n error: 0,\n skipped: 0,\n totalTokens: 0,\n totalCost: 0,\n costCount: 0,\n };\n });\n const dayKeyToIndex = config.alignToLocalDay\n ? new Map(\n points.map((point, index) => [startOfLocalDayMs(point.startMs), index]),\n )\n : null;\n const windowStartMs = points[0]?.startMs || baseStartMs;\n\n Object.values(bulkRunsByJobId || {}).forEach((runResult) => {\n const entries = Array.isArray(runResult?.entries) ? runResult.entries : [];\n entries.forEach((entry) => {\n const timestampMs = Number(entry?.ts || 0);\n if (!Number.isFinite(timestampMs) || timestampMs < windowStartMs || timestampMs > safeNowMs) return;\n const status = String(entry?.status || \"\").trim().toLowerCase();\n if (![\"ok\", \"error\", \"skipped\"].includes(status)) return;\n const bucketIndex = config.alignToLocalDay\n ? dayKeyToIndex?.get(startOfLocalDayMs(timestampMs))\n : Math.floor((timestampMs - windowStartMs) / config.bucketMs);\n if (!Number.isFinite(Number(bucketIndex))) return;\n if (bucketIndex < 0 || bucketIndex >= config.bucketCount) return;\n points[bucketIndex][status] += 1;\n points[bucketIndex].totalTokens += getCronRunTotalTokens(entry);\n const estimatedCost = getCronRunEstimatedCost(entry);\n if (estimatedCost != null) {\n points[bucketIndex].totalCost += estimatedCost;\n points[bucketIndex].costCount += 1;\n }\n });\n });\n\n const normalizedPoints = points.map((point, index) => {\n const total = point.ok + point.error + point.skipped;\n return {\n ...point,\n total,\n label: config.formatLabel(point.startMs),\n showLabel: config.showLabel(point, index, points.length),\n };\n });\n\n return {\n points: normalizedPoints,\n maxTotal: Math.max(1, ...normalizedPoints.map((point) => point.total)),\n };\n};\n\nexport const CronRunsTrendCard = ({\n bulkRunsByJobId = {},\n initialRange = kRange24h,\n selectedBucketFilter = null,\n onBucketFilterChange = () => {},\n}) => {\n const chartCanvasRef = useRef(null);\n const chartInstanceRef = useRef(null);\n const [metric, setMetric] = useState(kMetricOutcomes);\n const [range, setRange] = useState(\n initialRange === kRange30d\n ? kRange30d\n : initialRange === kRange7d\n ? kRange7d\n : kRange24h,\n );\n const trend = useMemo(\n () => buildTrendData({ bulkRunsByJobId, nowMs: Date.now(), range }),\n [bulkRunsByJobId, range],\n );\n useEffect(() => {\n onBucketFilterChange(null);\n }, [range, onBucketFilterChange]);\n const selectedBucketKey = useMemo(() => {\n if (!selectedBucketFilter) return \"\";\n if (selectedBucketFilter.range !== range) return \"\";\n const matchingPoint = trend.points.find(\n (point) =>\n Number(point.startMs) === Number(selectedBucketFilter.startMs) &&\n Number(point.endMs) === Number(selectedBucketFilter.endMs),\n );\n return matchingPoint?.key || \"\";\n }, [range, selectedBucketFilter, trend.points]);\n const selectedPointIndex = useMemo(\n () => trend.points.findIndex((point) => point.key === selectedBucketKey),\n [selectedBucketKey, trend.points],\n );\n\n const chartData = useMemo(() => {\n const dimAlpha = \"0.22\";\n const fullAlpha = \"0.86\";\n const isDimmed = (index) => selectedPointIndex >= 0 && selectedPointIndex !== index;\n const labels = trend.points.map((point) => (point.showLabel ? point.label : \"\"));\n if (metric === kMetricOutcomes) {\n return {\n labels,\n datasets: [\n {\n label: \"ok\",\n data: trend.points.map((point) => Number(point.ok || 0)),\n stack: \"outcomes\",\n backgroundColor: trend.points.map((_, index) =>\n `rgba(34,255,170,${isDimmed(index) ? dimAlpha : fullAlpha})`),\n borderColor: trend.points.map((_, index) =>\n `rgba(34,255,170,${isDimmed(index) ? \"0.35\" : \"1\"})`),\n borderWidth: 1,\n borderRadius: 0,\n borderSkipped: false,\n },\n {\n label: \"error\",\n data: trend.points.map((point) => Number(point.error || 0)),\n stack: \"outcomes\",\n backgroundColor: trend.points.map((_, index) =>\n `rgba(255,74,138,${isDimmed(index) ? dimAlpha : fullAlpha})`),\n borderColor: trend.points.map((_, index) =>\n `rgba(255,74,138,${isDimmed(index) ? \"0.35\" : \"1\"})`),\n borderWidth: 1,\n borderRadius: 0,\n borderSkipped: false,\n },\n {\n label: \"skipped\",\n data: trend.points.map((point) => Number(point.skipped || 0)),\n stack: \"outcomes\",\n backgroundColor: trend.points.map((_, index) =>\n `rgba(255,214,64,${isDimmed(index) ? dimAlpha : fullAlpha})`),\n borderColor: trend.points.map((_, index) =>\n `rgba(255,214,64,${isDimmed(index) ? \"0.35\" : \"1\"})`),\n borderWidth: 1,\n borderRadius: 0,\n borderSkipped: false,\n },\n ],\n };\n }\n const datasetLabel = metric === kMetricTokens ? \"tokens\" : \"cost\";\n return {\n labels,\n datasets: [\n {\n label: datasetLabel,\n data: trend.points.map((point) =>\n metric === kMetricTokens\n ? Number(point.totalTokens || 0)\n : Number(point.totalCost || 0)),\n backgroundColor: trend.points.map((_, index) =>\n metric === kMetricTokens\n ? `rgba(34,211,238,${isDimmed(index) ? dimAlpha : \"0.72\"})`\n : `rgba(167,139,250,${isDimmed(index) ? dimAlpha : \"0.72\"})`),\n borderColor: trend.points.map((_, index) =>\n metric === kMetricTokens\n ? `rgba(34,211,238,${isDimmed(index) ? \"0.35\" : \"1\"})`\n : `rgba(167,139,250,${isDimmed(index) ? \"0.35\" : \"1\"})`),\n borderWidth: 1,\n borderRadius: 0,\n borderSkipped: false,\n },\n ],\n };\n }, [metric, selectedPointIndex, trend.points]);\n\n useEffect(() => {\n const canvas = chartCanvasRef.current;\n if (!canvas || !Chart) return;\n if (chartInstanceRef.current) {\n chartInstanceRef.current.destroy();\n chartInstanceRef.current = null;\n }\n const getBucketFilter = (index) => {\n const selectedPoint = trend.points[index];\n if (!selectedPoint) return null;\n return {\n key: selectedPoint.key,\n label: selectedPoint.label,\n range,\n startMs: Number(selectedPoint.startMs || 0),\n endMs: Number(selectedPoint.endMs || 0),\n };\n };\n chartInstanceRef.current = new Chart(canvas, {\n type: \"bar\",\n data: chartData,\n options: {\n responsive: true,\n maintainAspectRatio: false,\n interaction: { mode: \"index\", intersect: false },\n animation: false,\n onHover: (event, elements) => {\n const target = event?.native?.target;\n if (!target || !target.style) return;\n target.style.cursor = Array.isArray(elements) && elements.length > 0\n ? \"pointer\"\n : \"default\";\n },\n onClick: (_event, elements) => {\n const index = Number(elements?.[0]?.index);\n if (!Number.isFinite(index)) return;\n const nextFilter = getBucketFilter(index);\n if (!nextFilter) return;\n if (nextFilter.key === selectedBucketKey) {\n onBucketFilterChange(null);\n return;\n }\n onBucketFilterChange(nextFilter);\n },\n scales: {\n x: {\n stacked: metric === kMetricOutcomes,\n grid: { color: \"rgba(148,163,184,0.08)\" },\n ticks: {\n color: \"rgba(156,163,175,1)\",\n maxRotation: 0,\n autoSkip: false,\n },\n },\n y: {\n stacked: metric === kMetricOutcomes,\n beginAtZero: true,\n grid: { color: \"rgba(148,163,184,0.12)\" },\n ticks: {\n precision: metric === kMetricCost ? undefined : 0,\n color: \"rgba(156,163,175,1)\",\n callback: (value) =>\n metric === kMetricCost\n ? formatCost(Number(value || 0))\n : formatTokenCount(Number(value || 0)),\n },\n },\n },\n plugins: {\n legend: {\n position: \"bottom\",\n labels: {\n color: \"rgba(209,213,219,1)\",\n boxWidth: 10,\n boxHeight: 10,\n },\n },\n tooltip: {\n callbacks: {\n title: (items) => String(items?.[0]?.label || \"\"),\n label: (context) => {\n const value = Number(context.parsed.y || 0);\n if (metric === kMetricCost) {\n return `${context.dataset.label}: ${formatCost(value)}`;\n }\n return `${context.dataset.label}: ${formatTokenCount(value)}`;\n },\n footer: (items) => {\n const index = Number(items?.[0]?.dataIndex);\n const point = trend.points[index];\n if (!point) return \"\";\n const costLabel =\n point.costCount > 0 ? `~${formatCost(point.totalCost)}` : \"—\";\n const tokensLabel = formatTokenCount(point.totalTokens || 0);\n return `runs: ${point.total}\\ntokens: ${tokensLabel}\\ncost: ${costLabel}`;\n },\n },\n },\n },\n },\n });\n return () => {\n if (chartInstanceRef.current) {\n chartInstanceRef.current.destroy();\n chartInstanceRef.current = null;\n }\n };\n }, [chartData, metric, onBucketFilterChange, range, selectedBucketKey, trend.points]);\n\n return html`\n
    \n
    \n

    Trends

    \n
    \n <${SegmentedControl}\n options=${kMetricOptions}\n value=${metric}\n onChange=${setMetric}\n />\n <${SegmentedControl}\n options=${kRanges}\n value=${range}\n onChange=${setRange}\n />\n
    \n
    \n
    \n \n
    \n
    \n `;\n};\n" }, { "path": "lib/public/js/components/cron-tab/index.js", "content": "import { h } from \"preact\";\nimport { useEffect, useMemo, useRef, useState } from \"preact/hooks\";\nimport htm from \"htm\";\nimport { ActionButton } from \"../action-button.js\";\nimport { AlarmLineIcon } from \"../icons.js\";\nimport { PageHeader } from \"../page-header.js\";\nimport { CronJobList } from \"./cron-job-list.js\";\nimport { CronJobDetail } from \"./cron-job-detail.js\";\nimport { CronOverview } from \"./cron-overview.js\";\nimport { kAllCronJobsRouteKey } from \"./cron-helpers.js\";\nimport { useCronTab } from \"./use-cron-tab.js\";\n\nconst html = htm.bind(h);\n\nexport const CronTab = ({ jobId = \"\", onSetLocation = () => {} }) => {\n const { state, actions } = useCronTab({ jobId, onSetLocation });\n const [showJobSelector, setShowJobSelector] = useState(false);\n const selectorShellRef = useRef(null);\n const isAllJobsSelected = state.selectedRouteKey === kAllCronJobsRouteKey;\n const noJobs = state.jobs.length === 0;\n const selectedJob = state.selectedJob;\n const selectedJobLabel = useMemo(() => {\n if (isAllJobsSelected) return \"All jobs\";\n const selectedJob = state.jobs.find(\n (job) => String(job?.id || \"\") === String(state.selectedRouteKey || \"\"),\n );\n return String(selectedJob?.name || selectedJob?.id || \"All jobs\");\n }, [isAllJobsSelected, state.jobs, state.selectedRouteKey]);\n const hasUnsavedDetailChanges = useMemo(() => {\n if (isAllJobsSelected || !selectedJob) return false;\n const sessionTarget = String(\n state.routingDraft?.sessionTarget || selectedJob?.sessionTarget || \"main\",\n );\n const wakeMode = String(\n state.routingDraft?.wakeMode || selectedJob?.wakeMode || \"now\",\n );\n const deliveryMode = String(\n state.routingDraft?.deliveryMode || selectedJob?.delivery?.mode || \"none\",\n );\n const currentSessionTarget = String(selectedJob?.sessionTarget || \"main\");\n const currentWakeMode = String(selectedJob?.wakeMode || \"now\");\n const currentDeliveryMode = String(selectedJob?.delivery?.mode || \"none\");\n const isRoutingDirty =\n sessionTarget !== currentSessionTarget ||\n wakeMode !== currentWakeMode ||\n deliveryMode !== currentDeliveryMode;\n const isPromptDirty = state.promptValue !== state.savedPromptValue;\n return isRoutingDirty || isPromptDirty;\n }, [\n isAllJobsSelected,\n selectedJob,\n state.promptValue,\n state.routingDraft?.deliveryMode,\n state.routingDraft?.sessionTarget,\n state.routingDraft?.wakeMode,\n state.savedPromptValue,\n ]);\n\n useEffect(() => {\n if (!showJobSelector) return () => {};\n const handlePointerDown = (event) => {\n if (selectorShellRef.current?.contains(event.target)) return;\n setShowJobSelector(false);\n };\n const handleKeyDown = (event) => {\n if (event.key !== \"Escape\") return;\n setShowJobSelector(false);\n };\n window.addEventListener(\"pointerdown\", handlePointerDown);\n window.addEventListener(\"keydown\", handleKeyDown);\n return () => {\n window.removeEventListener(\"pointerdown\", handlePointerDown);\n window.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, [showJobSelector]);\n\n const handleSelectAllJobs = () => {\n actions.selectAllJobs();\n setShowJobSelector(false);\n };\n\n const handleSelectJob = (nextJobId) => {\n actions.selectJob(nextJobId);\n setShowJobSelector(false);\n };\n\n return html`\n
    \n
    \n
    \n <${PageHeader}\n leading=${html`\n
    \n setShowJobSelector((value) => !value)}\n aria-expanded=${showJobSelector}\n aria-haspopup=\"listbox\"\n >\n ${selectedJobLabel}\n ▾\n \n ${showJobSelector\n ? html`\n
    \n <${CronJobList}\n jobs=${state.jobs}\n selectedRouteKey=${state.selectedRouteKey}\n onSelectAllJobs=${handleSelectAllJobs}\n onSelectJob=${handleSelectJob}\n />\n
    \n `\n : null}\n
    \n `}\n actions=${html`\n ${isAllJobsSelected || noJobs\n ? html`\n <${ActionButton}\n onClick=${actions.refreshAll}\n tone=\"secondary\"\n size=\"sm\"\n idleLabel=\"Refresh\"\n />\n `\n : html`\n <${ActionButton}\n onClick=${actions.saveChanges}\n loading=${state.savingChanges}\n disabled=${!hasUnsavedDetailChanges}\n tone=\"primary\"\n size=\"sm\"\n idleLabel=\"Save changes\"\n loadingLabel=\"Saving...\"\n />\n `}\n `}\n />\n
    \n
    \n
    \n
    \n
    \n ${noJobs\n ? html`\n \n
    \n <${AlarmLineIcon} className=\"h-12 w-12 text-cyan-400\" />\n
    \n

    \n No cron jobs yet\n

    \n

    \n Cron jobs are managed via the OpenClaw CLI. Once jobs are\n configured, schedules and run history will appear here.\n

    \n
    \n
    \n
    \n `\n : isAllJobsSelected\n ? html`\n <${CronOverview}\n jobs=${state.jobs}\n status=${state.status}\n bulkUsageByJobId=${state.bulkUsageByJobId}\n bulkRunsByJobId=${state.bulkRunsByJobId}\n onSelectJob=${handleSelectJob}\n />\n `\n : html`\n <${CronJobDetail}\n job=${state.selectedJob}\n runEntries=${state.runEntries}\n filteredRunEntries=${state.filteredRunEntries}\n runTotal=${state.runTotal}\n runHasMore=${state.runHasMore}\n loadingMoreRuns=${state.loadingMoreRuns}\n runStatusFilter=${state.runStatusFilter}\n onSetRunStatusFilter=${actions.setRunStatusFilter}\n onLoadMoreRuns=${actions.loadMoreRuns}\n onRunNow=${actions.runSelectedJobNow}\n runningJob=${state.runningJob}\n onToggleEnabled=${actions.setSelectedJobEnabled}\n togglingJobEnabled=${state.togglingJobEnabled}\n usage=${state.usage}\n jobTrends=${state.jobTrends}\n jobTrendRange=${state.jobTrendRange}\n selectedJobTrendBucketFilter=${state.selectedJobTrendBucketFilter}\n usageDays=${state.usageDays}\n onSetUsageDays=${actions.setUsageDays}\n onSetJobTrendRange=${actions.setJobTrendRange}\n onSetSelectedJobTrendBucketFilter=${actions.setSelectedJobTrendBucketFilter}\n promptValue=${state.promptValue}\n savedPromptValue=${state.savedPromptValue}\n onChangePrompt=${actions.setPromptValue}\n onSaveChanges=${actions.saveChanges}\n savingChanges=${state.savingChanges}\n routingDraft=${state.routingDraft}\n onChangeRoutingDraft=${actions.setRoutingDraft}\n deliverySessions=${state.deliverySessions}\n loadingDeliverySessions=${state.loadingDeliverySessions}\n deliverySessionsError=${state.deliverySessionsError}\n destinationSessionKey=${state.destinationSessionKey}\n onChangeDestinationSessionKey=${actions.setDestinationSessionKey}\n />\n `}\n \n
    \n
    \n \n `;\n};\n" }, { "path": "lib/public/js/components/cron-tab/use-cron-tab.js", "content": "import {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"preact/hooks\";\nimport { usePolling } from \"../../hooks/usePolling.js\";\nimport { useDestinationSessionSelection } from \"../../hooks/use-destination-session-selection.js\";\nimport {\n fetchCronBulkRuns,\n fetchCronBulkUsage,\n fetchCronJobRuns,\n fetchCronJobTrends,\n fetchCronJobs,\n fetchCronJobUsage,\n fetchCronStatus,\n setCronJobEnabled,\n triggerCronJobRun,\n updateCronJobPrompt,\n updateCronJobRouting,\n} from \"../../lib/api.js\";\nimport { readUiSettings, writeUiSettings } from \"../../lib/ui-settings.js\";\nimport { showToast } from \"../toast.js\";\nimport { kAllCronJobsRouteKey, readCronJobPrompt } from \"./cron-helpers.js\";\n\nconst kDefaultListPanelWidthPx = 372;\nconst kListPanelMinWidthPx = 220;\nconst kListPanelMaxWidthPx = 480;\nconst kListPanelWidthUiSettingKey = \"cronListPanelWidthPx\";\nconst kRunsPageSize = 25;\nconst kCalendarUsageDays = 30;\nconst kCalendarPastDays = 30;\nconst kTrendRange24h = \"24h\";\nconst kTrendRange7d = \"7d\";\nconst kTrendRange30d = \"30d\";\nconst kRoutingDefaults = {\n sessionTarget: \"main\",\n wakeMode: \"now\",\n deliveryMode: \"none\",\n deliveryChannel: \"\",\n deliveryTo: \"\",\n};\nconst readRoutingDraftFromJob = (job = null) => ({\n sessionTarget: String(job?.sessionTarget || kRoutingDefaults.sessionTarget),\n wakeMode: String(job?.wakeMode || kRoutingDefaults.wakeMode),\n deliveryMode: String(job?.delivery?.mode || kRoutingDefaults.deliveryMode),\n deliveryChannel: String(job?.delivery?.channel || \"\"),\n deliveryTo: String(job?.delivery?.to || \"\"),\n});\n\nconst clampListPanelWidth = (value) =>\n Math.max(kListPanelMinWidthPx, Math.min(kListPanelMaxWidthPx, value));\n\nconst normalizeRouteJobId = (jobId = \"\") => {\n const normalized = String(jobId || \"\").trim();\n return normalized || kAllCronJobsRouteKey;\n};\n\nexport const useCronTab = ({ jobId = \"\", onSetLocation = () => {} } = {}) => {\n const selectedRouteKey = normalizeRouteJobId(jobId);\n const selectedJobId =\n selectedRouteKey === kAllCronJobsRouteKey ? \"\" : selectedRouteKey;\n const listPanelRef = useRef(null);\n const [listPanelWidthPx, setListPanelWidthPx] = useState(() => {\n const settings = readUiSettings();\n if (!Number.isFinite(settings?.[kListPanelWidthUiSettingKey])) {\n return kDefaultListPanelWidthPx;\n }\n return clampListPanelWidth(settings[kListPanelWidthUiSettingKey]);\n });\n const [isResizingListPanel, setIsResizingListPanel] = useState(false);\n const [runStatusFilter, setRunStatusFilter] = useState(\"all\");\n const [runEntries, setRunEntries] = useState([]);\n const [runHasMore, setRunHasMore] = useState(false);\n const [runNextOffset, setRunNextOffset] = useState(0);\n const [runTotal, setRunTotal] = useState(0);\n const [loadingMoreRuns, setLoadingMoreRuns] = useState(false);\n const [promptValue, setPromptValue] = useState(\"\");\n const [savedPromptValue, setSavedPromptValue] = useState(\"\");\n const [savingChanges, setSavingChanges] = useState(false);\n const [runningJob, setRunningJob] = useState(false);\n const [togglingJobEnabled, setTogglingJobEnabled] = useState(false);\n const [routingDraft, setRoutingDraft] = useState(kRoutingDefaults);\n const [usageDays, setUsageDays] = useState(30);\n const [jobTrendRange, setJobTrendRange] = useState(kTrendRange7d);\n const [selectedJobTrendBucketFilter, setSelectedJobTrendBucketFilter] = useState(null);\n const {\n sessions: deliverySessions,\n loading: loadingDeliverySessions,\n error: deliverySessionsError,\n destinationSessionKey,\n setDestinationSessionKey,\n selectedDestination,\n } = useDestinationSessionSelection({\n enabled: !!selectedJobId,\n resetKey: String(selectedJobId || \"\"),\n });\n\n const jobsPoll = usePolling(\n () => fetchCronJobs({ sortBy: \"nextRunAtMs\", sortDir: \"asc\" }),\n 15000,\n );\n const statusPoll = usePolling(fetchCronStatus, 30000);\n const runsPoll = usePolling(\n () => {\n if (!selectedJobId) {\n return Promise.resolve({\n ok: true,\n runs: { entries: [], hasMore: false, nextOffset: 0 },\n });\n }\n return fetchCronJobRuns(selectedJobId, {\n limit: kRunsPageSize,\n offset: 0,\n status: runStatusFilter,\n sortDir: \"desc\",\n });\n },\n 10000,\n { enabled: !!selectedJobId },\n );\n const usagePoll = usePolling(\n () => {\n if (!selectedJobId) return Promise.resolve({ ok: true, usage: null });\n return fetchCronJobUsage(selectedJobId, { days: usageDays });\n },\n 60000,\n { enabled: !!selectedJobId },\n );\n const trendsPoll = usePolling(\n () => {\n if (!selectedJobId) return Promise.resolve({ ok: true, trends: null });\n return fetchCronJobTrends(selectedJobId, { range: jobTrendRange });\n },\n 60000,\n { enabled: !!selectedJobId },\n );\n const bulkUsagePoll = usePolling(\n () => fetchCronBulkUsage({ days: kCalendarUsageDays }),\n 60000,\n { enabled: !selectedJobId },\n );\n const bulkRunsPoll = usePolling(\n () =>\n fetchCronBulkRuns({\n sinceMs: Date.now() - kCalendarPastDays * 24 * 60 * 60 * 1000,\n limitPerJob: 1200,\n }),\n 30000,\n { enabled: !selectedJobId },\n );\n\n useEffect(() => {\n const settings = readUiSettings();\n settings[kListPanelWidthUiSettingKey] = listPanelWidthPx;\n writeUiSettings(settings);\n }, [listPanelWidthPx]);\n\n useEffect(() => {\n if (!runsPoll.data?.runs) return;\n setRunEntries(\n Array.isArray(runsPoll.data.runs.entries)\n ? runsPoll.data.runs.entries\n : [],\n );\n setRunHasMore(!!runsPoll.data.runs.hasMore);\n setRunNextOffset(Number(runsPoll.data.runs.nextOffset || 0));\n setRunTotal(Number(runsPoll.data.runs.total || 0));\n }, [runsPoll.data]);\n\n const jobs = useMemo(\n () => (Array.isArray(jobsPoll.data?.jobs) ? jobsPoll.data.jobs : []),\n [jobsPoll.data],\n );\n\n const selectedJob = useMemo(\n () => jobs.find((job) => String(job?.id || \"\") === selectedJobId) || null,\n [jobs, selectedJobId],\n );\n const selectedJobPrompt = readCronJobPrompt(selectedJob);\n\n useEffect(() => {\n if (!selectedJobId) {\n setPromptValue(\"\");\n setSavedPromptValue(\"\");\n setRoutingDraft(kRoutingDefaults);\n return;\n }\n const prompt = selectedJobPrompt;\n setPromptValue(prompt);\n setSavedPromptValue(prompt);\n setRoutingDraft(readRoutingDraftFromJob(selectedJob));\n }, [selectedJobId, selectedJobPrompt]);\n\n useEffect(() => {\n if (!selectedJobId) return;\n setRoutingDraft(readRoutingDraftFromJob(selectedJob));\n }, [\n selectedJobId,\n selectedJob?.sessionTarget,\n selectedJob?.wakeMode,\n selectedJob?.delivery?.mode,\n ]);\n\n useEffect(() => {\n setRunEntries([]);\n setRunHasMore(false);\n setRunNextOffset(0);\n setRunTotal(0);\n if (!selectedJobId) return;\n runsPoll.refresh();\n }, [selectedJobId, runStatusFilter]);\n\n useEffect(() => {\n if (!selectedJobId) return;\n usagePoll.refresh();\n }, [selectedJobId, usageDays]);\n useEffect(() => {\n if (!selectedJobId) return;\n setSelectedJobTrendBucketFilter(null);\n trendsPoll.refresh();\n }, [jobTrendRange, selectedJobId]);\n const filteredRunEntries = useMemo(() => {\n const entries = Array.isArray(runEntries) ? runEntries : [];\n const filterValue = selectedJobTrendBucketFilter;\n if (!filterValue) return entries;\n const startMs = Number(filterValue?.startMs || 0);\n const endMs = Number(filterValue?.endMs || 0);\n if (!Number.isFinite(startMs) || !Number.isFinite(endMs) || endMs <= startMs) {\n return entries;\n }\n return entries.filter((entry) => {\n const timestampMs = Number(entry?.ts || 0);\n return (\n Number.isFinite(timestampMs) &&\n timestampMs >= startMs &&\n timestampMs < endMs\n );\n });\n }, [runEntries, selectedJobTrendBucketFilter]);\n\n const resizeListPanelWithClientX = useCallback((clientX) => {\n const listPanelElement = listPanelRef.current;\n if (!listPanelElement) return;\n const parentBounds =\n listPanelElement.parentElement?.getBoundingClientRect();\n if (!parentBounds) return;\n const nextWidth = clampListPanelWidth(\n Math.round(clientX - parentBounds.left),\n );\n setListPanelWidthPx(nextWidth);\n }, []);\n\n const onListResizerPointerDown = useCallback(\n (event) => {\n event.preventDefault();\n setIsResizingListPanel(true);\n resizeListPanelWithClientX(event.clientX);\n },\n [resizeListPanelWithClientX],\n );\n\n useEffect(() => {\n if (!isResizingListPanel) return () => {};\n const onPointerMove = (event) => resizeListPanelWithClientX(event.clientX);\n const onPointerUp = () => setIsResizingListPanel(false);\n window.addEventListener(\"pointermove\", onPointerMove);\n window.addEventListener(\"pointerup\", onPointerUp);\n const previousUserSelect = document.body.style.userSelect;\n const previousCursor = document.body.style.cursor;\n document.body.style.userSelect = \"none\";\n document.body.style.cursor = \"col-resize\";\n return () => {\n window.removeEventListener(\"pointermove\", onPointerMove);\n window.removeEventListener(\"pointerup\", onPointerUp);\n document.body.style.userSelect = previousUserSelect;\n document.body.style.cursor = previousCursor;\n };\n }, [isResizingListPanel, resizeListPanelWithClientX]);\n\n const selectAllJobs = useCallback(() => {\n onSetLocation(\"/cron\");\n }, [onSetLocation]);\n\n const selectJob = useCallback(\n (nextJobId) => {\n onSetLocation(`/cron/${encodeURIComponent(String(nextJobId || \"\"))}`);\n },\n [onSetLocation],\n );\n\n const refreshAll = useCallback(() => {\n jobsPoll.refresh();\n statusPoll.refresh();\n runsPoll.refresh();\n usagePoll.refresh();\n trendsPoll.refresh();\n bulkUsagePoll.refresh();\n bulkRunsPoll.refresh();\n }, [\n bulkRunsPoll.refresh,\n bulkUsagePoll.refresh,\n jobsPoll.refresh,\n runsPoll.refresh,\n statusPoll.refresh,\n trendsPoll.refresh,\n usagePoll.refresh,\n ]);\n\n const runSelectedJobNow = useCallback(async () => {\n if (!selectedJobId || runningJob) return;\n setRunningJob(true);\n try {\n await triggerCronJobRun(selectedJobId);\n showToast(\"Cron run triggered\", \"success\");\n refreshAll();\n } catch (error) {\n showToast(error.message || \"Could not run cron job\", \"error\");\n } finally {\n setRunningJob(false);\n }\n }, [refreshAll, runningJob, selectedJobId]);\n\n const setSelectedJobEnabled = useCallback(\n async (enabled) => {\n if (!selectedJobId || togglingJobEnabled) return;\n setTogglingJobEnabled(true);\n try {\n await setCronJobEnabled(selectedJobId, enabled);\n showToast(\n enabled ? \"Cron job enabled\" : \"Cron job disabled\",\n \"success\",\n );\n refreshAll();\n } catch (error) {\n showToast(error.message || \"Could not update cron job\", \"error\");\n } finally {\n setTogglingJobEnabled(false);\n }\n },\n [refreshAll, selectedJobId, togglingJobEnabled],\n );\n\n const loadMoreRuns = useCallback(async () => {\n if (!selectedJobId || !runHasMore || loadingMoreRuns) return;\n setLoadingMoreRuns(true);\n try {\n const data = await fetchCronJobRuns(selectedJobId, {\n limit: kRunsPageSize,\n offset: runNextOffset,\n status: runStatusFilter,\n sortDir: \"desc\",\n });\n const nextEntries = Array.isArray(data?.runs?.entries)\n ? data.runs.entries\n : [];\n setRunEntries((currentValue) => [...currentValue, ...nextEntries]);\n setRunHasMore(!!data?.runs?.hasMore);\n setRunNextOffset(Number(data?.runs?.nextOffset || 0));\n setRunTotal(Number(data?.runs?.total || 0));\n } catch (error) {\n showToast(error.message || \"Could not load more runs\", \"error\");\n } finally {\n setLoadingMoreRuns(false);\n }\n }, [\n loadingMoreRuns,\n runHasMore,\n runNextOffset,\n runStatusFilter,\n selectedJobId,\n ]);\n\n const saveChanges = useCallback(async () => {\n if (!selectedJobId || !selectedJob || savingChanges) return;\n const currentRouting = readRoutingDraftFromJob(selectedJob);\n const nextRouting = {\n sessionTarget: String(routingDraft?.sessionTarget || kRoutingDefaults.sessionTarget),\n wakeMode: String(routingDraft?.wakeMode || kRoutingDefaults.wakeMode),\n deliveryMode: String(routingDraft?.deliveryMode || kRoutingDefaults.deliveryMode),\n deliveryChannel: String(routingDraft?.deliveryChannel || \"\"),\n deliveryTo: String(routingDraft?.deliveryTo || \"\"),\n };\n const routingUnchanged =\n nextRouting.sessionTarget === currentRouting.sessionTarget &&\n nextRouting.wakeMode === currentRouting.wakeMode &&\n nextRouting.deliveryMode === currentRouting.deliveryMode &&\n nextRouting.deliveryChannel === currentRouting.deliveryChannel &&\n nextRouting.deliveryTo === currentRouting.deliveryTo;\n const promptUnchanged = promptValue === savedPromptValue;\n if (routingUnchanged && promptUnchanged) return;\n setSavingChanges(true);\n try {\n if (!routingUnchanged) {\n await updateCronJobRouting(selectedJobId, nextRouting);\n }\n if (!promptUnchanged) {\n await updateCronJobPrompt(selectedJobId, promptValue);\n setSavedPromptValue(promptValue);\n }\n showToast(\"Changes saved\", \"success\");\n refreshAll();\n } catch (error) {\n showToast(error.message || \"Could not save changes\", \"error\");\n } finally {\n setSavingChanges(false);\n }\n }, [\n promptValue,\n refreshAll,\n routingDraft,\n savedPromptValue,\n savingChanges,\n selectedJob,\n selectedJobId,\n ]);\n\n useEffect(() => {\n if (!selectedJobId) return;\n if (String(routingDraft?.deliveryMode || \"none\") !== \"announce\") return;\n if (!selectedDestination?.channel && !selectedDestination?.to) return;\n setRoutingDraft((currentValue = kRoutingDefaults) => {\n const nextChannel = String(selectedDestination?.channel || currentValue.deliveryChannel || \"\");\n const nextTo = String(selectedDestination?.to || currentValue.deliveryTo || \"\");\n if (\n nextChannel === String(currentValue.deliveryChannel || \"\") &&\n nextTo === String(currentValue.deliveryTo || \"\")\n ) {\n return currentValue;\n }\n return {\n ...currentValue,\n deliveryChannel: nextChannel,\n deliveryTo: nextTo,\n };\n });\n }, [\n routingDraft?.deliveryMode,\n selectedDestination?.channel,\n selectedDestination?.to,\n selectedJobId,\n ]);\n\n return {\n refs: {\n listPanelRef,\n },\n state: {\n jobs,\n jobsError: jobsPoll.error,\n status: statusPoll.data?.status || null,\n statusError: statusPoll.error,\n selectedRouteKey,\n selectedJobId,\n selectedJob,\n listPanelWidthPx,\n isResizingListPanel,\n runEntries,\n filteredRunEntries,\n runHasMore,\n runNextOffset,\n runTotal,\n runStatusFilter,\n runsError: runsPoll.error,\n loadingMoreRuns,\n usage: usagePoll.data?.usage || null,\n jobTrends: trendsPoll.data?.trends || null,\n usageError: usagePoll.error,\n trendsError: trendsPoll.error,\n usageDays,\n jobTrendRange:\n jobTrendRange === kTrendRange30d\n ? kTrendRange30d\n : jobTrendRange === kTrendRange24h\n ? kTrendRange24h\n : kTrendRange7d,\n selectedJobTrendBucketFilter,\n bulkUsageByJobId: bulkUsagePoll.data?.usage?.byJobId || {},\n bulkUsageError: bulkUsagePoll.error,\n bulkRunsByJobId: bulkRunsPoll.data?.runs?.byJobId || {},\n bulkRunsError: bulkRunsPoll.error,\n promptValue,\n savedPromptValue,\n savingChanges,\n runningJob,\n togglingJobEnabled,\n routingDraft,\n deliverySessions,\n loadingDeliverySessions,\n deliverySessionsError,\n destinationSessionKey,\n },\n actions: {\n setRunStatusFilter,\n setUsageDays,\n setJobTrendRange,\n setSelectedJobTrendBucketFilter,\n setPromptValue,\n saveChanges,\n refreshAll,\n loadMoreRuns,\n runSelectedJobNow,\n setSelectedJobEnabled,\n selectAllJobs,\n selectJob,\n onListResizerPointerDown,\n setRoutingDraft,\n setDestinationSessionKey,\n },\n };\n};\n" }, { "path": "lib/public/js/components/device-pairings.js", "content": "import { h } from 'preact';\nimport { useState } from 'preact/hooks';\nimport htm from 'htm';\nimport { ActionButton } from './action-button.js';\nconst html = htm.bind(h);\n\nconst kModeLabels = {\n webchat: 'Browser',\n cli: 'CLI',\n};\n\nconst formatTitle = (d) => kModeLabels[d.clientMode] || d.clientId || 'Device';\n\nconst formatSubtitle = (d) => {\n const parts = [];\n if (d.platform) parts.push(d.platform);\n if (d.role) parts.push(d.role);\n return parts.join(' · ');\n};\n\nconst DeviceRow = ({ d, onApprove, onReject }) => {\n const [busy, setBusy] = useState(null);\n\n const handle = async (action) => {\n setBusy(action);\n try {\n if (action === 'approve') await onApprove(d.id);\n else await onReject(d.id);\n } catch {\n setBusy(null);\n }\n };\n\n const title = formatTitle(d);\n const subtitle = formatSubtitle(d);\n\n if (busy === 'approve') {\n return html`\n
    \n Approved\n ${title}\n
    `;\n }\n if (busy === 'reject') {\n return html`\n
    \n Rejected\n ${title}\n
    `;\n }\n\n return html`\n
    \n
    \n ${title}\n ${subtitle && html`${subtitle}`}\n
    \n
    \n <${ActionButton}\n onClick=${() => handle('approve')}\n tone=\"success\"\n size=\"sm\"\n idleLabel=\"Approve\"\n className=\"font-medium px-3 py-1.5\"\n />\n <${ActionButton}\n onClick=${() => handle('reject')}\n tone=\"secondary\"\n size=\"sm\"\n idleLabel=\"Reject\"\n className=\"font-medium px-3 py-1.5\"\n />\n
    \n
    `;\n};\n\nexport const DevicePairings = ({ pending, onApprove, onReject }) => {\n if (!pending || pending.length === 0) return null;\n\n return html`\n
    \n

    Pending device pairings

    \n ${pending.map((d) => html`<${DeviceRow} key=${d.id} d=${d} onApprove=${onApprove} onReject=${onReject} />`)}\n
    `;\n};\n" }, { "path": "lib/public/js/components/doctor/findings-list.js", "content": "import { h } from \"preact\";\nimport { useState } from \"preact/hooks\";\nimport htm from \"htm\";\nimport { Badge } from \"../badge.js\";\nimport { ActionButton } from \"../action-button.js\";\nimport {\n formatDoctorCategory,\n getDoctorCategoryTone,\n getDoctorPriorityTone,\n} from \"./helpers.js\";\n\nconst html = htm.bind(h);\n\nconst resolveTargetPath = (item) => {\n if (!item) return null;\n if (typeof item === \"string\") return { path: item };\n if (typeof item === \"object\" && item.path) return item;\n return null;\n};\n\nconst formatPathLabel = (filePath, startLine, endLine) => {\n if (startLine && endLine && endLine > startLine)\n return `${filePath}:${startLine}-${endLine}`;\n if (startLine) return `${filePath}:${startLine}`;\n return filePath;\n};\n\nconst buildLineOptions = (startLine, endLine) => {\n const options = {};\n if (startLine) options.line = startLine;\n if (endLine && endLine > startLine) options.lineEnd = endLine;\n return options;\n};\n\nconst renderPathLink = (filePath, onOpenFile, { startLine, endLine } = {}) => {\n const label = formatPathLabel(filePath, startLine, endLine);\n return html`\n {\n e.preventDefault();\n onOpenFile(\n String(filePath || \"\"),\n buildLineOptions(startLine, endLine),\n );\n }}\n >\n ${label}\n \n `;\n};\n\nconst kSnippetCollapseThreshold = 7;\n\nconst SnippetBlock = ({ item, onOpenFile, isOutdated }) => {\n const snippet = item.snippet;\n const allLines = String(snippet.text || \"\").split(\"\\n\");\n const isCollapsible = allLines.length > kSnippetCollapseThreshold;\n const [expanded, setExpanded] = useState(!isCollapsible);\n const visibleLines = expanded\n ? allLines\n : allLines.slice(0, kSnippetCollapseThreshold);\n const gutterWidth = String(snippet.endLine || snippet.startLine || 1).length;\n return html`\n
    \n \n {\n e.preventDefault();\n onOpenFile(\n String(item.path || \"\"),\n buildLineOptions(item.startLine, item.endLine),\n );\n }}\n >\n ${formatPathLabel(item.path, item.startLine, item.endLine)}\n \n ${isOutdated\n ? html`file changed since scan`\n : html`snapshot`}\n
    \n
    \n \n ${visibleLines.map(\n (line, index) => html`\n
    \n ${snippet.startLine + index}${line || \" \"}\n
    \n `,\n )}\n ${expanded && snippet.truncated\n ? html`
    ... truncated
    `\n : \"\"}\n
    \n ${isCollapsible && !expanded\n ? html`\n setExpanded(true)}\n >\n \n ▾\n ${allLines.length} lines\n \n \n `\n : null}\n ${isCollapsible && expanded\n ? html`\n setExpanded(false)}\n >\n \n ▴\n collapse\n \n \n `\n : null}\n \n \n `;\n};\n\nconst renderEvidenceLine = (item = {}, onOpenFile, changedPathsSet) => {\n if (item?.path && item?.snippet) {\n const isOutdated = changedPathsSet.has(item.path);\n return html`<${SnippetBlock}\n item=${item}\n onOpenFile=${onOpenFile}\n isOutdated=${isOutdated}\n />`;\n }\n if (item?.path)\n return renderPathLink(item.path, onOpenFile, {\n startLine: item.startLine,\n endLine: item.endLine,\n });\n if (item?.text) return item.text;\n return JSON.stringify(item);\n};\n\nexport const DoctorFindingsList = ({\n cards = [],\n busyCardId = 0,\n onAskAgentFix = () => {},\n onUpdateStatus = () => {},\n onOpenFile = () => {},\n changedPaths = [],\n showRunMeta = false,\n hideEmptyState = false,\n}) => {\n const changedPathsSet = new Set(changedPaths);\n return html`\n
    \n ${cards.length\n ? html`\n
    \n ${cards.map(\n (card) => html`\n
    \n
    \n
    \n
    \n
    \n <${Badge} tone=${getDoctorPriorityTone(card.priority)}>\n ${card.priority}\n \n

    \n ${card.title}\n

    \n
    \n
    \n <${Badge} tone=${getDoctorCategoryTone(card.category)}>\n ${formatDoctorCategory(card.category)}\n \n ${\n showRunMeta\n ? html`\n Run #${card.runId}\n `\n : null\n }\n
    \n
    \n
    \n ${\n card.summary\n ? html`\n ${card.summary}\n

    `\n : null\n }\n
    \n
    \n \n \n ▸\n Show recommendation and details\n \n \n
    \n
    \n
    \n Recommendation\n
    \n

    \n ${card.recommendation}\n

    \n
    \n ${\n Array.isArray(card.targetPaths) &&\n card.targetPaths.length\n ? html`\n
    \n
    \n Target paths\n
    \n
    \n ${card.targetPaths.map((rawItem) => {\n const resolved =\n resolveTargetPath(rawItem);\n if (!resolved) return null;\n const label = formatPathLabel(\n resolved.path,\n resolved.startLine,\n resolved.endLine,\n );\n return html`\n {\n e.preventDefault();\n onOpenFile(\n String(resolved.path || \"\"),\n buildLineOptions(\n resolved.startLine,\n resolved.endLine,\n ),\n );\n }}\n >\n ${label}\n \n `;\n })}\n
    \n
    \n `\n : null\n }\n ${\n Array.isArray(card.evidence) && card.evidence.length\n ? html`\n
    \n
    Evidence
    \n
    \n ${card.evidence.map(\n (item) => html`\n
    \n ${renderEvidenceLine(\n item,\n onOpenFile,\n changedPathsSet,\n )}\n
    \n `,\n )}\n
    \n
    \n `\n : null\n }\n
    \n
    \n
    \n <${ActionButton}\n onClick=${() => onAskAgentFix(card)}\n loading=${busyCardId === card.id}\n tone=\"primary\"\n idleLabel=\"Ask agent to fix\"\n loadingLabel=\"Sending...\"\n />\n ${\n card.status !== \"fixed\"\n ? html`\n <${ActionButton}\n onClick=${() => onUpdateStatus(card, \"fixed\")}\n tone=\"secondary\"\n idleLabel=\"Mark fixed\"\n />\n `\n : html`\n <${ActionButton}\n onClick=${() => onUpdateStatus(card, \"open\")}\n tone=\"secondary\"\n idleLabel=\"Reopen\"\n />\n `\n }\n ${\n card.status !== \"dismissed\"\n ? html`\n <${ActionButton}\n onClick=${() =>\n onUpdateStatus(card, \"dismissed\")}\n tone=\"ghost\"\n idleLabel=\"Dismiss\"\n />\n `\n : html`\n <${ActionButton}\n onClick=${() => onUpdateStatus(card, \"open\")}\n tone=\"ghost\"\n idleLabel=\"Restore\"\n />\n `\n }\n
    \n
    \n `,\n )}\n
    \n `\n : hideEmptyState\n ? null\n : html`\n
    \n

    \n No findings currently for this selection.\n

    \n
    \n `}\n
    \n `;\n};\n" }, { "path": "lib/public/js/components/doctor/fix-card-modal.js", "content": "import { h } from \"preact\";\nimport htm from \"htm\";\nimport { sendDoctorCardFix, updateDoctorCardStatus } from \"../../lib/api.js\";\nimport { showToast } from \"../toast.js\";\nimport { AgentSendModal } from \"../agent-send-modal.js\";\n\nconst html = htm.bind(h);\n\nexport const DoctorFixCardModal = ({\n visible = false,\n card = null,\n onClose = () => {},\n onComplete = () => {},\n}) => {\n const handleSend = async ({ selectedSession, message }) => {\n if (!card?.id) return false;\n try {\n await sendDoctorCardFix({\n cardId: card.id,\n sessionId: selectedSession?.sessionId || \"\",\n replyChannel: selectedSession?.replyChannel || \"\",\n replyTo: selectedSession?.replyTo || \"\",\n prompt: message,\n });\n try {\n await updateDoctorCardStatus({ cardId: card.id, status: \"fixed\" });\n showToast(\n \"Doctor fix request sent and finding marked fixed\",\n \"success\",\n );\n } catch (statusError) {\n showToast(\n statusError.message ||\n \"Doctor fix request sent, but could not mark the finding fixed\",\n \"warning\",\n );\n }\n await onComplete();\n return true;\n } catch (error) {\n showToast(error.message || \"Could not send Doctor fix request\", \"error\");\n return false;\n }\n };\n\n return html`\n <${AgentSendModal}\n visible=${visible}\n title=\"Ask agent to fix\"\n messageLabel=\"Instructions\"\n initialMessage=${String(card?.fixPrompt || \"\")}\n resetKey=${String(card?.id || \"\")}\n submitLabel=\"Send fix request\"\n loadingLabel=\"Sending...\"\n onClose=${onClose}\n onSubmit=${handleSend}\n />\n `;\n};\n" }, { "path": "lib/public/js/components/doctor/general-warning.js", "content": "import { h } from \"preact\";\nimport htm from \"htm\";\nimport { ActionButton } from \"../action-button.js\";\nimport { getDoctorWarningMessage, shouldShowDoctorWarning } from \"./helpers.js\";\n\nconst html = htm.bind(h);\n\nexport const GeneralDoctorWarning = ({\n doctorStatus = null,\n dismissedUntilMs = 0,\n onOpenDoctor = () => {},\n onDismiss = () => {},\n}) => {\n if (!shouldShowDoctorWarning(doctorStatus, dismissedUntilMs)) return null;\n return html`\n
    \n
    \n
    \n

    Drift Doctor

    \n

    ${getDoctorWarningMessage(doctorStatus)}

    \n
    \n
    \n <${ActionButton}\n onClick=${onDismiss}\n tone=\"secondary\"\n idleLabel=\"Dismiss for 1 week\"\n />\n <${ActionButton}\n onClick=${onOpenDoctor}\n tone=\"warning\"\n idleLabel=\"Open Drift Doctor\"\n />\n
    \n
    \n
    \n `;\n};\n" }, { "path": "lib/public/js/components/doctor/helpers.js", "content": "export const getDoctorPriorityTone = (priority = \"\") => {\n const normalized = String(priority || \"\")\n .trim()\n .toUpperCase();\n if (normalized === \"P0\") return \"danger\";\n if (normalized === \"P1\") return \"warning\";\n return \"neutral\";\n};\n\nexport const getDoctorStatusTone = (status = \"\") => {\n const normalized = String(status || \"\")\n .trim()\n .toLowerCase();\n if (normalized === \"fixed\") return \"success\";\n if (normalized === \"dismissed\") return \"neutral\";\n return \"warning\";\n};\n\nexport const getDoctorCategoryTone = (category = \"\") => {\n const normalized = String(category || \"\")\n .trim()\n .toLowerCase()\n .replace(/[_-]+/g, \" \");\n if (normalized === \"token efficiency\") return \"info\";\n if (normalized === \"redundancy\") return \"accent\";\n if (normalized === \"mixed concerns\") return \"cyan\";\n if (normalized === \"workspace state\") return \"secondary\";\n return \"info\";\n};\n\nexport const formatDoctorCategory = (category = \"\") => {\n const normalized = String(category || \"\")\n .trim()\n .replace(/[_-]+/g, \" \");\n if (!normalized) return \"Workspace\";\n return normalized.replace(/\\b\\w/g, (character) => character.toUpperCase());\n};\n\nexport const buildDoctorPriorityCounts = (cards = []) =>\n cards.reduce(\n (totals, card) => {\n const priority = String(card?.priority || \"\")\n .trim()\n .toUpperCase();\n if (priority === \"P0\" || priority === \"P1\" || priority === \"P2\") {\n totals[priority] += 1;\n }\n return totals;\n },\n { P0: 0, P1: 0, P2: 0 },\n );\n\nexport const groupDoctorCardsByStatus = (cards = []) =>\n cards.reduce(\n (groups, card) => {\n const status = String(card?.status || \"open\")\n .trim()\n .toLowerCase();\n if (status === \"fixed\") {\n groups.fixed.push(card);\n return groups;\n }\n if (status === \"dismissed\") {\n groups.dismissed.push(card);\n return groups;\n }\n groups.open.push(card);\n return groups;\n },\n { open: [], dismissed: [], fixed: [] },\n );\n\nexport const shouldShowDoctorWarning = (\n doctorStatus = null,\n dismissedUntilMs = 0,\n) => {\n if (!doctorStatus || doctorStatus.runInProgress) return false;\n if (doctorStatus.needsInitialRun || !doctorStatus.stale) return false;\n if (!doctorStatus.changeSummary?.hasMeaningfulChanges) return false;\n return Number(dismissedUntilMs || 0) <= Date.now();\n};\n\nexport const getDoctorWarningMessage = (doctorStatus = null) => {\n if (!doctorStatus) return \"\";\n const changedFilesCount = Number(\n doctorStatus.changeSummary?.changedFilesCount || 0,\n );\n if (changedFilesCount > 0) {\n return `Drift Doctor has not been run in the last week and ${changedFilesCount} file${changedFilesCount === 1 ? \"\" : \"s\"} changed since the last review.`;\n }\n return \"Doctor has not been run in the last week.\";\n};\n\nexport const formatDoctorCharCount = (value = 0) =>\n `${Number(value || 0).toLocaleString()} chars`;\n\nconst isManagedBootstrapContextPath = (filePath = \"\") =>\n String(filePath || \"\").startsWith(\"hooks/bootstrap/\");\n\nexport const getDoctorBootstrapTruncationItems = (doctorStatus = null) => {\n const bootstrapContext = doctorStatus?.bootstrapContext;\n const truncatedFiles = (bootstrapContext?.activeTruncatedFiles || []).filter(\n (file) => !isManagedBootstrapContextPath(file?.path),\n );\n const nearLimitFiles = (bootstrapContext?.activeNearLimitFiles || []).filter(\n (file) => !isManagedBootstrapContextPath(file?.path),\n );\n return [\n ...truncatedFiles.map((file) => ({\n path: file.path,\n size: formatDoctorCharCount(file.rawChars),\n statusText: `-${Number(\n Math.max(\n 0,\n Number(file.rawChars || 0) - Number(file.injectedChars || 0),\n ),\n ).toLocaleString()} cut`,\n statusTone: \"danger\",\n })),\n ...nearLimitFiles.map((file) => ({\n path: file.path,\n size: formatDoctorCharCount(file.rawChars),\n statusText: \"Near limit\",\n statusTone: \"warning\",\n })),\n ];\n};\n\nexport const hasDoctorBootstrapWarnings = (doctorStatus = null) =>\n getDoctorBootstrapTruncationItems(doctorStatus).length > 0;\n\nexport const getDoctorBootstrapWarningTitle = (doctorStatus = null) => {\n const items = getDoctorBootstrapTruncationItems(doctorStatus);\n if (!items.length) return \"\";\n const hasTruncatedItems = items.some((item) => item.statusTone === \"danger\");\n const hasNearLimitItems = items.some((item) => item.statusTone === \"warning\");\n if (hasTruncatedItems && hasNearLimitItems) {\n return \"Some of your main files are being truncated or nearing the limit:\";\n }\n if (hasNearLimitItems) {\n return items.length === 1\n ? \"One of your main files is nearing the limit:\"\n : \"Some of your main files are nearing the limit:\";\n }\n return items.length === 1\n ? \"One of your main files is being truncated:\"\n : \"Some of your main files are being truncated:\";\n};\n\nexport const getDoctorChangeLabel = (changeSummary = null) => {\n const changedFilesCount = Number(changeSummary?.changedFilesCount || 0);\n if (changedFilesCount === 0) return \"No changes since last run\";\n return `${changedFilesCount} change${changedFilesCount === 1 ? \"\" : \"s\"} since last run`;\n};\n\nexport const getDoctorRunPillDetail = (run = null) => {\n if (!run || typeof run !== \"object\") return \"\";\n if (run.status === \"running\") return \"Running\";\n if (run.status === \"failed\") return \"Failed\";\n if ((run.cardCount || 0) === 0) return \"No findings\";\n return `${run.cardCount || 0} finding${run.cardCount === 1 ? \"\" : \"s\"}`;\n};\n\nexport const buildDoctorRunMarkers = (run = null) => {\n if (!run || typeof run !== \"object\") return [];\n if (run.status === \"running\") {\n return [{ tone: \"cyan\", count: 0, label: \"Running\" }];\n }\n if (run.status === \"failed\") {\n return [{ tone: \"neutral\", count: 0, label: \"Failed\" }];\n }\n if ((run.cardCount || 0) === 0) {\n return [{ tone: \"success\", count: 0, label: \"No findings\" }];\n }\n const highPriority = [];\n if (Number(run?.priorityCounts?.P0 || 0) > 0) {\n highPriority.push({ tone: \"danger\", count: 0, label: \"P0\" });\n }\n if (Number(run?.priorityCounts?.P1 || 0) > 0) {\n highPriority.push({ tone: \"warning\", count: 0, label: \"P1\" });\n }\n if (highPriority.length > 0) return highPriority.slice(0, 2);\n return [{ tone: \"neutral\", count: 0, label: \"P2\" }];\n};\n\nexport const buildDoctorStatusFilterOptions = () => [\n { value: \"open\", label: \"Open\" },\n { value: \"dismissed\", label: \"Dismissed\" },\n { value: \"fixed\", label: \"Fixed\" },\n];\n" }, { "path": "lib/public/js/components/doctor/index.js", "content": "import { h } from \"preact\";\nimport { useEffect, useMemo, useState } from \"preact/hooks\";\nimport htm from \"htm\";\nimport { usePolling } from \"../../hooks/usePolling.js\";\nimport {\n fetchDoctorCards,\n fetchDoctorStatus,\n fetchDoctorRuns,\n startDoctorRun,\n updateDoctorCardStatus,\n} from \"../../lib/api.js\";\nimport { formatLocaleDateTime } from \"../../lib/format.js\";\nimport { ActionButton } from \"../action-button.js\";\nimport { LoadingSpinner } from \"../loading-spinner.js\";\nimport { PageHeader } from \"../page-header.js\";\nimport { showToast } from \"../toast.js\";\nimport { DoctorSummaryCards } from \"./summary-cards.js\";\nimport { DoctorFindingsList } from \"./findings-list.js\";\nimport { DoctorFixCardModal } from \"./fix-card-modal.js\";\nimport {\n buildDoctorRunMarkers,\n buildDoctorStatusFilterOptions,\n getDoctorBootstrapTruncationItems,\n getDoctorBootstrapWarningTitle,\n getDoctorChangeLabel,\n getDoctorRunPillDetail,\n hasDoctorBootstrapWarnings,\n shouldShowDoctorWarning,\n} from \"./helpers.js\";\n\nconst html = htm.bind(h);\n\nconst kIdlePollMs = 15000;\nconst kActivePollMs = 2000;\n\nconst DoctorEmptyStateIcon = () => html`\n \n \n \n`;\n\nexport const DoctorTab = ({ isActive = false, onOpenFile = () => {} }) => {\n const statusPoll = usePolling(fetchDoctorStatus, kIdlePollMs, {\n enabled: isActive,\n });\n const doctorStatus = statusPoll.data?.status || null;\n const runPollIntervalMs = doctorStatus?.runInProgress\n ? kActivePollMs\n : kIdlePollMs;\n const runsPoll = usePolling(() => fetchDoctorRuns(10), runPollIntervalMs, {\n enabled: isActive,\n });\n const [selectedRunFilter, setSelectedRunFilter] = useState(\"all\");\n const [selectedStatusFilter, setSelectedStatusFilter] = useState(\"open\");\n const [busyCardId, setBusyCardId] = useState(0);\n const [fixCard, setFixCard] = useState(null);\n const [pendingRunSelectionId, setPendingRunSelectionId] = useState(\"\");\n\n const runs = runsPoll.data?.runs || [];\n const activeRunId = String(doctorStatus?.activeRunId || \"\");\n const selectedRunId = String(selectedRunFilter || \"\");\n const shouldRenderPendingRunTab =\n selectedRunId !== \"\" &&\n selectedRunId !== \"all\" &&\n !runs.some((run) => String(run.id || \"\") === selectedRunId) &&\n (pendingRunSelectionId === selectedRunId ||\n (doctorStatus?.runInProgress && activeRunId === selectedRunId));\n const pendingRun = shouldRenderPendingRunTab\n ? {\n id: Number(selectedRunId || 0),\n status: \"running\",\n summary: \"\",\n priorityCounts: { P0: 0, P1: 0, P2: 0 },\n statusCounts: { open: 0, dismissed: 0, fixed: 0 },\n }\n : null;\n const displayRuns = pendingRun ? [pendingRun, ...runs] : runs;\n const selectedRunIsActiveRun =\n selectedRunFilter !== \"all\" &&\n !!activeRunId &&\n String(selectedRunFilter || \"\") === activeRunId;\n const selectedRun =\n selectedRunFilter === \"all\"\n ? null\n : displayRuns.find(\n (run) => String(run.id || \"\") === String(selectedRunFilter || \"\"),\n ) || null;\n const cardsPoll = usePolling(\n () => fetchDoctorCards({ runId: selectedRunFilter || \"all\" }),\n doctorStatus?.runInProgress || selectedRun?.status === \"running\"\n ? kActivePollMs\n : kIdlePollMs,\n { enabled: isActive },\n );\n const allCards = cardsPoll.data?.cards || [];\n\n useEffect(() => {\n if (!isActive) return;\n statusPoll.refresh();\n runsPoll.refresh();\n }, [isActive]);\n\n useEffect(() => {\n if (!runs.length) {\n if (pendingRunSelectionId && selectedRunId === pendingRunSelectionId)\n return;\n if (selectedRunIsActiveRun && doctorStatus?.runInProgress) return;\n if (selectedRunFilter !== \"all\") setSelectedRunFilter(\"all\");\n return;\n }\n if (selectedRunFilter === \"all\") return;\n const hasSelectedRun = runs.some(\n (run) => String(run.id || \"\") === String(selectedRunFilter || \"\"),\n );\n if (hasSelectedRun) return;\n if (selectedRunIsActiveRun && doctorStatus?.runInProgress) return;\n setSelectedRunFilter(\"all\");\n }, [\n runs,\n selectedRunId,\n selectedRunFilter,\n selectedRunIsActiveRun,\n pendingRunSelectionId,\n doctorStatus?.runInProgress,\n ]);\n\n useEffect(() => {\n if (!pendingRunSelectionId) return;\n if (selectedRunFilter !== pendingRunSelectionId) {\n setSelectedRunFilter(pendingRunSelectionId);\n return;\n }\n const hasPendingRun = runs.some(\n (run) => String(run.id || \"\") === String(pendingRunSelectionId || \"\"),\n );\n const activePendingRun =\n !!activeRunId &&\n activeRunId === pendingRunSelectionId &&\n !!doctorStatus?.runInProgress;\n if (!hasPendingRun && !activePendingRun) return;\n setPendingRunSelectionId(\"\");\n }, [\n activeRunId,\n doctorStatus?.runInProgress,\n pendingRunSelectionId,\n runs,\n selectedRunFilter,\n ]);\n\n useEffect(() => {\n cardsPoll.refresh();\n }, [selectedRunFilter]);\n\n const selectedRunIsInProgress =\n selectedRun?.status === \"running\" ||\n (selectedRunIsActiveRun && doctorStatus?.runInProgress);\n const selectedRunSummary = useMemo(\n () => (selectedRunIsInProgress ? \"\" : selectedRun?.summary || \"\"),\n [selectedRun, selectedRunIsInProgress],\n );\n const statusFilterOptions = useMemo(\n () => buildDoctorStatusFilterOptions(),\n [],\n );\n const changeLabel = useMemo(\n () => getDoctorChangeLabel(doctorStatus?.changeSummary || null),\n [doctorStatus],\n );\n const canRunDoctor = useMemo(() => {\n if (doctorStatus?.runInProgress) return true;\n if (doctorStatus?.needsInitialRun) return true;\n return Number(doctorStatus?.changeSummary?.changedFilesCount || 0) > 0;\n }, [doctorStatus]);\n const runDoctorDisabledReason = canRunDoctor\n ? \"\"\n : \"No workspace changes since the last completed Drift Doctor run.\";\n const showDoctorStaleBanner = useMemo(\n () => shouldShowDoctorWarning(doctorStatus, 0),\n [doctorStatus],\n );\n const showBootstrapTruncationBanner = useMemo(\n () => hasDoctorBootstrapWarnings(doctorStatus),\n [doctorStatus],\n );\n const bootstrapTruncationMessage = useMemo(\n () => getDoctorBootstrapWarningTitle(doctorStatus),\n [doctorStatus],\n );\n const bootstrapTruncationItems = useMemo(\n () => getDoctorBootstrapTruncationItems(doctorStatus),\n [doctorStatus],\n );\n const hasCompletedDoctorRun = !!doctorStatus?.lastRunAt;\n const hasRuns = runs.length > 0;\n const hasLoadedRuns = runsPoll.data !== null || runsPoll.error !== null;\n const hasLoadedCards = cardsPoll.data !== null || cardsPoll.error !== null;\n const showInitialLoadingState =\n !hasLoadedRuns || (hasRuns && !hasLoadedCards);\n const cards = useMemo(() => {\n if (selectedStatusFilter === \"all\") return allCards;\n return allCards.filter(\n (card) =>\n String(card?.status || \"open\")\n .trim()\n .toLowerCase() === selectedStatusFilter,\n );\n }, [allCards, selectedStatusFilter]);\n const openCards = useMemo(\n () =>\n allCards.filter(\n (card) =>\n String(card?.status || \"open\")\n .trim()\n .toLowerCase() === \"open\",\n ),\n [allCards],\n );\n const visibleRuns = useMemo(() => displayRuns.slice(0, 2), [displayRuns]);\n const overflowRuns = useMemo(() => displayRuns.slice(2), [displayRuns]);\n const selectedOverflowRunValue = useMemo(() => {\n if (selectedRunFilter === \"all\") return \"\";\n return overflowRuns.some(\n (run) => String(run.id || \"\") === String(selectedRunFilter || \"\"),\n )\n ? String(selectedRunFilter || \"\")\n : \"\";\n }, [overflowRuns, selectedRunFilter]);\n\n const getRunTabClassName = (selected = false) =>\n [\n \"inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs transition-colors\",\n selected\n ? \"border-cyan-500/40 bg-cyan-500/10 text-status-info shadow-[0_0_0_1px_rgba(34,211,238,0.08)]\"\n : \"border-border bg-field text-body hover:border-fg-muted hover:text-bright\",\n ].join(\" \");\n\n const getRunMarkerClassName = (tone = \"neutral\") => {\n if (tone === \"success\") return \"bg-green-400\";\n if (tone === \"warning\") return \"bg-yellow-400\";\n if (tone === \"danger\") return \"bg-red-400\";\n if (tone === \"cyan\") return \"ac-status-dot ac-status-dot--info\";\n return \"bg-gray-500\";\n };\n const showRunLayout =\n !showInitialLoadingState &&\n (runs.length > 0 ||\n !!pendingRunSelectionId ||\n !!activeRunId ||\n !!doctorStatus?.runInProgress);\n\n const handleRunDoctor = async () => {\n try {\n const result = await startDoctorRun();\n showToast(\n result?.reusedPreviousRun\n ? \"No workspace changes since the last scan; reused previous findings\"\n : \"Doctor run started\",\n \"success\",\n );\n if (result?.runId) {\n const runId = String(result.runId);\n setPendingRunSelectionId(runId);\n setSelectedRunFilter(runId);\n }\n statusPoll.refresh();\n runsPoll.refresh();\n cardsPoll.refresh();\n setTimeout(statusPoll.refresh, 1200);\n setTimeout(runsPoll.refresh, 1200);\n setTimeout(cardsPoll.refresh, 1200);\n } catch (error) {\n showToast(error.message || \"Could not start Doctor run\", \"error\");\n }\n };\n\n const handleUpdateStatus = async (card, status) => {\n if (!card?.id || busyCardId) return;\n try {\n setBusyCardId(card.id);\n await updateDoctorCardStatus({ cardId: card.id, status });\n showToast(\"Doctor card updated\", \"success\");\n await cardsPoll.refresh();\n await runsPoll.refresh();\n await statusPoll.refresh();\n } catch (error) {\n showToast(error.message || \"Could not update Doctor card\", \"error\");\n } finally {\n setBusyCardId(0);\n }\n };\n\n return html`\n
    \n ${showRunLayout\n ? html`\n <${PageHeader}\n title=\"Drift Doctor\"\n actions=${html`\n <${ActionButton}\n onClick=${handleRunDoctor}\n disabled=${!canRunDoctor}\n loading=${!!doctorStatus?.runInProgress}\n idleLabel=\"Run Drift Doctor\"\n loadingLabel=\"Running...\"\n title=${runDoctorDisabledReason}\n />\n `}\n />\n `\n : null}\n ${showInitialLoadingState\n ? html`\n
    \n
    \n <${LoadingSpinner} className=\"h-4 w-4\" />\n Loading Drift Doctor...\n
    \n
    \n `\n : null}\n ${!showInitialLoadingState && hasRuns\n ? html`\n
    \n <${DoctorSummaryCards} cards=${openCards} />\n
    \n ${hasCompletedDoctorRun\n ? html`\n \n \n Last run ·${\" \"}\n \n ${formatLocaleDateTime(doctorStatus?.lastRunAt, {\n fallback: \"Never\",\n })}\n \n \n \n ${changeLabel}\n \n
    \n ${showBootstrapTruncationBanner\n ? html`\n \n
    \n ⚠️ ${bootstrapTruncationMessage}\n
    \n
    \n ${bootstrapTruncationItems.map(\n (item) => html`\n \n onOpenFile(String(item.path || \"\"))}\n >\n ${item.path}\n \n \n \n ${item.size}\n \n \n ${item.statusText}\n \n \n
    \n `,\n )}\n
    \n
    \n

    \n Truncated files become partially hidden from\n your agent and could cause drift.\n

    \n
    \n `\n : null}\n `\n : null}\n ${showDoctorStaleBanner\n ? html`\n \n Doctor should be run again because the latest completed\n run is older than one week and the workspace has\n changed.\n \n `\n : null}\n \n \n `\n : null}\n ${showRunLayout\n ? html`\n
    \n
    \n

    Findings

    \n
    \n
    \n setSelectedRunFilter(\"all\")}\n >\n All runs\n \n ${visibleRuns.map((run) => {\n const selected =\n String(selectedRunFilter || \"\") === String(run.id || \"\");\n const markers = buildDoctorRunMarkers(run);\n return html`\n \n setSelectedRunFilter(String(run.id || \"\"))}\n >\n Run #${run.id}\n \n ${markers.map(\n (marker) => html`\n \n \n \n `,\n )}\n \n \n `;\n })}\n ${overflowRuns.length\n ? html`\n \n {\n const nextValue = String(\n event.currentTarget?.value || \"\",\n );\n if (!nextValue) return;\n setSelectedRunFilter(nextValue);\n }}\n class=\"bg-field border border-border rounded-full px-3 py-1.5 text-xs text-body focus:border-fg-muted\"\n >\n \n ${overflowRuns.map(\n (run) => html`\n \n `,\n )}\n \n \n `\n : null}\n \n
    \n ${selectedRunSummary\n ? html`\n
    \n \n ${selectedRun?.id\n ? `Run #${selectedRun.id} summary`\n : \"Run summary\"}\n
    \n

    \n ${selectedRunSummary}\n

    \n
    \n `\n : null}\n ${selectedRunIsInProgress\n ? html`\n
    \n
    \n <${LoadingSpinner} className=\"h-3.5 w-3.5\" />\n \n Run in progress. Findings will appear when analysis\n completes.\n \n
    \n
    \n `\n : null}\n
    \n <${DoctorFindingsList}\n cards=${cards}\n busyCardId=${busyCardId}\n onAskAgentFix=${setFixCard}\n onUpdateStatus=${handleUpdateStatus}\n onOpenFile=${onOpenFile}\n changedPaths=${doctorStatus?.changeSummary?.changedPaths ||\n []}\n showRunMeta=${selectedRunFilter === \"all\"}\n hideEmptyState=${selectedRunIsInProgress}\n />\n
    \n \n `\n : null}\n ${!showInitialLoadingState && !showRunLayout\n ? html`\n \n
    \n <${DoctorEmptyStateIcon} />\n
    \n

    \n Workspace health review\n

    \n

    \n Drift Doctor scans the workspace for guidance drift,\n misplaced instructions, redundant docs, and cleanup\n opportunities.\n

    \n
    \n
    \n <${ActionButton}\n onClick=${handleRunDoctor}\n disabled=${!canRunDoctor}\n loading=${!!doctorStatus?.runInProgress}\n size=\"lg\"\n idleLabel=\"Run Drift Doctor\"\n loadingLabel=\"Running...\"\n title=${runDoctorDisabledReason}\n />\n

    \n Runs on your main agent and consumes tokens. No\n changes will be made without your approval.\n

    \n
    \n
    \n \n `\n : null}\n <${DoctorFixCardModal}\n visible=${!!fixCard}\n card=${fixCard}\n onClose=${() => setFixCard(null)}\n onComplete=${async () => {\n await statusPoll.refresh();\n await runsPoll.refresh();\n await cardsPoll.refresh();\n }}\n />\n \n `;\n};\n" }, { "path": "lib/public/js/components/doctor/summary-cards.js", "content": "import { h } from \"preact\";\nimport htm from \"htm\";\nimport { SummaryStatCard } from \"../summary-stat-card.js\";\nimport { buildDoctorPriorityCounts } from \"./helpers.js\";\n\nconst html = htm.bind(h);\n\nexport const DoctorSummaryCards = ({ cards = [] }) => {\n const counts = buildDoctorPriorityCounts(cards);\n return html`\n
    \n <${SummaryStatCard} title=\"Open Findings\" value=${cards.length} />\n <${SummaryStatCard} title=\"P0\" value=${counts.P0} toneClassName=\"text-status-error-muted\" />\n <${SummaryStatCard} title=\"P1\" value=${counts.P1} toneClassName=\"text-status-warning-muted\" />\n <${SummaryStatCard} title=\"P2\" value=${counts.P2} toneClassName=\"text-body\" />\n
    \n `;\n};\n" }, { "path": "lib/public/js/components/envars.js", "content": "import { h } from \"preact\";\nimport {\n useState,\n useEffect,\n useCallback,\n useRef,\n} from \"preact/hooks\";\nimport htm from \"htm\";\nimport { fetchEnvVars, saveEnvVars } from \"../lib/api.js\";\nimport { useCachedFetch } from \"../hooks/use-cached-fetch.js\";\nimport { showToast } from \"./toast.js\";\nimport { SecretInput } from \"./secret-input.js\";\nimport { PageHeader } from \"./page-header.js\";\nimport { ActionButton } from \"./action-button.js\";\nimport { PopActions } from \"./pop-actions.js\";\nimport { PaneShell } from \"./pane-shell.js\";\nimport {\n Brain2LineIcon,\n ChatVoiceLineIcon,\n ChevronDownIcon,\n ImageAiLineIcon,\n TextToSpeechLineIcon,\n} from \"./icons.js\";\nimport { Tooltip } from \"./tooltip.js\";\nconst html = htm.bind(h);\n\nconst kGroupLabels = {\n ai: \"AI Provider Keys\",\n github: \"GitHub\",\n channels: \"Channels\",\n tools: \"Tools\",\n custom: \"Custom\",\n};\n\nconst kGroupOrder = [\"ai\", \"github\", \"channels\", \"tools\", \"custom\"];\nconst kDefaultVisibleAiKeys = new Set([\"OPENAI_API_KEY\", \"GEMINI_API_KEY\"]);\nconst kFeatureIconByName = {\n Embeddings: {\n Icon: Brain2LineIcon,\n label: \"Memory embeddings\",\n },\n Image: {\n Icon: ImageAiLineIcon,\n label: \"Image generation\",\n },\n TTS: {\n Icon: TextToSpeechLineIcon,\n label: \"Text to speech\",\n },\n STT: {\n Icon: ChatVoiceLineIcon,\n label: \"Speech to text\",\n },\n};\nconst normalizeEnvVarKey = (raw) =>\n raw\n .trim()\n .toUpperCase()\n .replace(/[^A-Z0-9_]/g, \"_\");\nconst kManagedChannelTokenPattern =\n /^(?:TELEGRAM_BOT_TOKEN|DISCORD_BOT_TOKEN|SLACK_BOT_TOKEN|SLACK_APP_TOKEN)(?:_[A-Z0-9_]+)?$/;\nconst stripSurroundingQuotes = (raw) => {\n const value = String(raw || \"\").trim();\n if (value.length < 2) return value;\n const startsWithDouble = value.startsWith('\"');\n const endsWithDouble = value.endsWith('\"');\n if (startsWithDouble && endsWithDouble) return value.slice(1, -1);\n const startsWithSingle = value.startsWith(\"'\");\n const endsWithSingle = value.endsWith(\"'\");\n if (startsWithSingle && endsWithSingle) return value.slice(1, -1);\n return value;\n};\nconst isManagedChannelTokenKey = (key = \"\") =>\n kManagedChannelTokenPattern.test(\n String(key || \"\")\n .trim()\n .toUpperCase(),\n );\nconst getVarsSignature = (items) =>\n JSON.stringify(\n (items || [])\n .map((v) => ({\n key: String(v?.key || \"\"),\n value: String(v?.value || \"\"),\n }))\n .sort((a, b) => a.key.localeCompare(b.key)),\n );\n\nconst sortCustomVarsAlphabetically = (items) => {\n const list = Array.isArray(items) ? [...items] : [];\n const customSorted = list\n .filter((item) => (item?.group || \"custom\") === \"custom\")\n .sort((a, b) => String(a?.key || \"\").localeCompare(String(b?.key || \"\")));\n let customIdx = 0;\n return list.map((item) => {\n if ((item?.group || \"custom\") !== \"custom\") return item;\n const next = customSorted[customIdx];\n customIdx += 1;\n return next;\n });\n};\n\nconst kHintByKey = {\n ANTHROPIC_API_KEY: html`from${\" \"}\n console.anthropic.com`,\n ANTHROPIC_TOKEN: html`from\n claude setup-token`,\n OPENAI_API_KEY: html`from${\" \"}\n platform.openai.com`,\n GEMINI_API_KEY: html`from${\" \"}\n aistudio.google.com`,\n ELEVENLABS_API_KEY: html`from${\" \"}\n elevenlabs.io${\" \"} · ${\" \"}\n XI_API_KEY also\n supported`,\n GITHUB_WORKSPACE_REPO: html`use\n owner/repo or\n https://github.com/owner/repo`,\n TELEGRAM_BOT_TOKEN: html`from${\" \"}\n @BotFather\n ·\n full guide`,\n DISCORD_BOT_TOKEN: html`from${\" \"}\n developer portal\n ·\n full guide`,\n MISTRAL_API_KEY: html`from${\" \"}\n console.mistral.ai`,\n VOYAGE_API_KEY: html`from${\" \"}\n dash.voyageai.com`,\n GROQ_API_KEY: html`from${\" \"}\n console.groq.com`,\n DEEPGRAM_API_KEY: html`from${\" \"}\n console.deepgram.com`,\n BRAVE_API_KEY: html`from${\" \"}\n brave.com/search/api${\" \"} — free tier available`,\n};\n\nconst getHintContent = (envVar) => kHintByKey[envVar.key] || envVar.hint || \"\";\n\nconst getVisibleFeatureIcons = (envVar) =>\n (Array.isArray(envVar?.features) ? envVar.features : []).filter(\n (feature) => !!kFeatureIconByName[feature],\n );\n\nconst splitAiVars = (items) => {\n const visible = [];\n const hidden = [];\n (items || []).forEach((item) => {\n const hasValue = !!String(item?.value || \"\").trim();\n if (kDefaultVisibleAiKeys.has(item?.key) || hasValue) {\n visible.push(item);\n return;\n }\n hidden.push(item);\n });\n return { visible, hidden };\n};\n\nconst FeatureIcon = ({ feature }) => {\n const entry = kFeatureIconByName[feature];\n if (!entry) return null;\n const { Icon, label } = entry;\n return html`\n <${Tooltip} text=${label} widthClass=\"w-auto\" tooltipClassName=\"whitespace-nowrap\">\n \n <${Icon} className=\"w-3.5 h-3.5\" />\n \n \n `;\n};\n\nconst EnvRow = ({ envVar, onChange, onDelete, disabled }) => {\n const hint = getHintContent(envVar);\n const featureIcons = getVisibleFeatureIcons(envVar);\n\n return html`\n
    \n
    \n
    \n \n ${envVar.key}\n
    \n ${featureIcons.length > 0\n ? html`\n
    \n ${featureIcons.map(\n (feature) =>\n html`<${FeatureIcon} key=${feature} feature=${feature} />`,\n )}\n
    \n `\n : null}\n
    \n
    \n
    \n <${SecretInput}\n value=${envVar.value}\n onInput=${(e) => onChange(envVar.key, e.target.value)}\n placeholder=${envVar.value ? \"\" : \"not set\"}\n isSecret=${!!envVar.value}\n inputClass=\"flex-1 min-w-0 bg-field border border-border rounded-lg px-3 py-1.5 text-sm text-body outline-none focus:border-fg-muted font-mono\"\n disabled=${disabled}\n />\n ${envVar.group === \"custom\"\n ? html` onDelete(envVar.key)}\n class=\"text-fg-dim hover:text-status-error-muted px-1 text-xs shrink-0\"\n title=\"Delete\"\n >\n ✕\n `\n : null}\n
    \n ${hint ? html`

    ${hint}

    ` : null}\n
    \n
    \n `;\n};\n\nexport const Envars = ({ onRestartRequired = () => {} }) => {\n const [vars, setVars] = useState([]);\n const [reservedKeys, setReservedKeys] = useState(() => new Set());\n const [pendingCustomKeys, setPendingCustomKeys] = useState([]);\n const [secretMaskEpoch, setSecretMaskEpoch] = useState(0);\n const [dirty, setDirty] = useState(false);\n const [saving, setSaving] = useState(false);\n const [showAllAiKeys, setShowAllAiKeys] = useState(false);\n const [newKey, setNewKey] = useState(\"\");\n const baselineSignatureRef = useRef(\"[]\");\n const {\n data: envPayload,\n error: envPayloadError,\n loading: envPayloadLoading,\n refresh: refreshEnvPayload,\n } = useCachedFetch(\"/api/env\", fetchEnvVars, {\n maxAgeMs: 30000,\n });\n\n const applyEnvPayload = useCallback(\n (data) => {\n if (!data) return;\n const nextVars = sortCustomVarsAlphabetically(data.vars || []);\n baselineSignatureRef.current = getVarsSignature(nextVars);\n setVars(nextVars);\n setPendingCustomKeys([]);\n setReservedKeys(new Set(data.reservedKeys || []));\n if (data.restartRequired) {\n onRestartRequired(true);\n }\n },\n [onRestartRequired],\n );\n\n const load = useCallback(async () => {\n try {\n const data = await refreshEnvPayload({ force: true });\n applyEnvPayload(data);\n } catch (err) {\n console.error(\"Failed to load env vars:\", err);\n }\n }, [applyEnvPayload, refreshEnvPayload]);\n\n useEffect(() => {\n if (!envPayload) return;\n if (dirty || saving) return;\n applyEnvPayload(envPayload);\n }, [applyEnvPayload, dirty, envPayload, saving]);\n\n useEffect(() => {\n if (!envPayloadError) return;\n console.error(\"Failed to load env vars:\", envPayloadError);\n }, [envPayloadError]);\n\n useEffect(() => {\n setDirty(getVarsSignature(vars) !== baselineSignatureRef.current);\n }, [vars]);\n\n const handleChange = (key, value) => {\n setVars((prev) => prev.map((v) => (v.key === key ? { ...v, value } : v)));\n };\n\n const handleDelete = (key) => {\n setVars((prev) => prev.filter((v) => v.key !== key));\n setPendingCustomKeys((prev) =>\n prev.filter((pendingKey) => pendingKey !== key),\n );\n };\n\n const handleSave = async () => {\n if (saving) return;\n setSaving(true);\n try {\n const toSave = vars\n .filter((v) => v.editable && !isManagedChannelTokenKey(v?.key))\n .map((v) => ({ key: v.key, value: v.value }));\n const result = await saveEnvVars(toSave);\n const needsRestart = !!result?.restartRequired;\n if (needsRestart) onRestartRequired(true);\n showToast(\n needsRestart\n ? \"Environment variables saved. Restart gateway to apply.\"\n : \"Environment variables saved\",\n \"success\",\n );\n // Force-refresh /api/env so stale cached payload cannot overwrite newly\n // saved values with older state right after save.\n const latestPayload = await refreshEnvPayload({ force: true });\n applyEnvPayload(latestPayload);\n setSecretMaskEpoch((prev) => prev + 1);\n setDirty(false);\n } catch (err) {\n showToast(\"Failed to save: \" + err.message, \"error\");\n } finally {\n setSaving(false);\n }\n };\n\n const [newVal, setNewVal] = useState(\"\");\n\n const parsePaste = (input) => {\n const lines = input\n .split(\"\\n\")\n .map((l) => l.trim())\n .filter(Boolean)\n .filter((l) => !l.startsWith(\"#\"));\n const pairs = [];\n for (const line of lines) {\n const eqIdx = line.indexOf(\"=\");\n if (eqIdx > 0)\n pairs.push({\n key: line.slice(0, eqIdx).trim(),\n value: stripSurroundingQuotes(line.slice(eqIdx + 1)),\n });\n }\n return pairs;\n };\n\n const addVars = (pairs) => {\n let added = 0;\n const blocked = [];\n const managedChannelKeys = [];\n const addedCustomKeys = [];\n setVars((prev) => {\n const next = [...prev];\n for (const { key: rawKey, value } of pairs) {\n const key = normalizeEnvVarKey(rawKey);\n if (!key) continue;\n if (isManagedChannelTokenKey(key)) {\n managedChannelKeys.push(key);\n continue;\n }\n if (reservedKeys.has(key)) {\n blocked.push(key);\n continue;\n }\n const existing = next.find((v) => v.key === key);\n if (existing) {\n existing.value = value;\n } else {\n next.push({\n key,\n value,\n label: key,\n group: \"custom\",\n hint: \"\",\n source: \"env_file\",\n editable: true,\n });\n addedCustomKeys.push(key);\n }\n added++;\n }\n return next;\n });\n if (addedCustomKeys.length) {\n setPendingCustomKeys((prev) => [...prev, ...addedCustomKeys]);\n }\n return { added, blocked, managedChannelKeys };\n };\n\n const handlePaste = (e, fallbackField) => {\n const text = (e.clipboardData || window.clipboardData).getData(\"text\");\n const pairs = parsePaste(text);\n if (pairs.length > 1) {\n e.preventDefault();\n const { added, blocked, managedChannelKeys } = addVars(pairs);\n setNewKey(\"\");\n setNewVal(\"\");\n if (blocked.length) {\n const uniqueBlocked = Array.from(new Set(blocked));\n showToast(\n `Reserved vars can't be added: ${uniqueBlocked.join(\", \")}`,\n \"error\",\n );\n }\n if (managedChannelKeys.length) {\n const uniqueManagedKeys = Array.from(new Set(managedChannelKeys));\n showToast(\n `Channel tokens are managed from Channels: ${uniqueManagedKeys.join(\", \")}`,\n \"error\",\n );\n }\n if (added) {\n showToast(\n `Added ${added} variable${added !== 1 ? \"s\" : \"\"}`,\n \"success\",\n );\n }\n return;\n }\n if (pairs.length === 1) {\n e.preventDefault();\n setNewKey(pairs[0].key);\n setNewVal(pairs[0].value);\n return;\n }\n };\n\n const handleKeyInput = (raw) => {\n const pairs = parsePaste(raw);\n if (pairs.length === 1) {\n setNewKey(pairs[0].key);\n setNewVal(pairs[0].value);\n return;\n }\n setNewKey(raw);\n };\n\n const handleValInput = (raw) => {\n const pairs = parsePaste(raw);\n if (pairs.length === 1) {\n setNewKey(pairs[0].key);\n setNewVal(pairs[0].value);\n return;\n }\n setNewVal(raw);\n };\n\n const handleAddVar = () => {\n const key = normalizeEnvVarKey(newKey);\n if (!key) return;\n if (isManagedChannelTokenKey(key)) {\n showToast(`Channel tokens are managed from Channels: ${key}`, \"error\");\n return;\n }\n if (reservedKeys.has(key)) {\n showToast(`Reserved var can't be added: ${key}`, \"error\");\n return;\n }\n addVars([{ key, value: newVal }]);\n setNewKey(\"\");\n setNewVal(\"\");\n };\n\n const visibleVars = vars.filter((v) => !isManagedChannelTokenKey(v?.key));\n\n // Group vars\n const grouped = {};\n for (const v of visibleVars) {\n const g = v.group || \"custom\";\n if (!grouped[g]) grouped[g] = [];\n grouped[g].push(v);\n }\n if (grouped.custom?.length) {\n const pending = new Set(pendingCustomKeys);\n const nonPending = grouped.custom\n .filter((item) => !pending.has(item.key))\n .sort((a, b) => String(a?.key || \"\").localeCompare(String(b?.key || \"\")));\n const pendingAtBottom = grouped.custom.filter((item) =>\n pending.has(item.key),\n );\n grouped.custom = [...nonPending, ...pendingAtBottom];\n }\n const aiSplit = splitAiVars(grouped.ai || []);\n const renderEnvRows = (items) =>\n items.map(\n (v) =>\n html`<${EnvRow}\n key=${`${secretMaskEpoch}:${v.key}`}\n envVar=${v}\n onChange=${handleChange}\n onDelete=${handleDelete}\n disabled=${saving}\n />`,\n );\n const renderGroupCard = (groupKey) => {\n const items = grouped[groupKey] || [];\n if (!items.length) return null;\n if (groupKey === \"ai\") {\n const { visible, hidden } = aiSplit;\n const expanded = showAllAiKeys && hidden.length > 0;\n return html`\n
    \n

    \n ${kGroupLabels[groupKey] || groupKey}\n

    \n
    ${renderEnvRows(visible)}
    \n ${hidden.length > 0\n ? html`\n
    \n setShowAllAiKeys((prev) => !prev)}\n class=\"inline-flex items-center gap-1.5 text-xs text-fg-muted hover:text-body\"\n >\n <${ChevronDownIcon}\n className=${`transition-transform ${expanded ? \"rotate-180\" : \"\"}`}\n />\n ${expanded ? \"Show fewer\" : `Show more (${hidden.length})`}\n \n
    \n `\n : null}\n ${expanded\n ? html`
    \n ${renderEnvRows(hidden)}\n
    `\n : null}\n
    \n `;\n }\n return html`\n
    \n

    \n ${kGroupLabels[groupKey] || groupKey}\n

    \n
    ${renderEnvRows(items)}
    \n
    \n `;\n };\n\n if (envPayloadLoading && !vars.length) {\n return html`\n <${PaneShell}\n header=${html`<${PageHeader} title=\"Envars\" />`}\n >\n
    \n Loading environment variables...\n
    \n \n `;\n }\n\n return html`\n <${PaneShell}\n header=${html`\n <${PageHeader}\n title=\"Envars\"\n actions=${html`\n <${PopActions} visible=${dirty}>\n <${ActionButton}\n onClick=${load}\n disabled=${saving}\n tone=\"secondary\"\n size=\"sm\"\n idleLabel=\"Cancel\"\n className=\"text-xs\"\n />\n <${ActionButton}\n onClick=${handleSave}\n disabled=${saving}\n loading=${saving}\n loadingMode=\"inline\"\n tone=\"primary\"\n size=\"sm\"\n idleLabel=\"Save changes\"\n loadingLabel=\"Saving…\"\n className=\"text-xs\"\n />\n \n `}\n />\n `}\n >\n ${kGroupOrder\n .filter((g) => grouped[g]?.length)\n .map((g) => renderGroupCard(g))}\n\n \n
    \n

    Add Variable

    \n Paste KEY=VALUE or multiple lines\n
    \n \n
    \n handleKeyInput(e.target.value)}\n onPaste=${(e) => handlePaste(e, \"key\")}\n onKeyDown=${(e) => e.key === \"Enter\" && handleAddVar()}\n class=\"w-full bg-field border border-border rounded-lg px-3 py-1.5 text-sm text-body outline-none focus:border-fg-muted font-mono uppercase\"\n />\n
    \n
    \n handleValInput(e.target.value)}\n onPaste=${(e) => handlePaste(e, \"val\")}\n onKeyDown=${(e) => e.key === \"Enter\" && handleAddVar()}\n class=\"flex-1 bg-field border border-border rounded-lg px-3 py-1.5 text-sm text-body outline-none focus:border-fg-muted font-mono\"\n />\n \n + Add\n \n
    \n \n \n \n `;\n};\n" }, { "path": "lib/public/js/components/features.js", "content": "import { h } from \"preact\";\nimport htm from \"htm\";\nimport { fetchEnvVars } from \"../lib/api.js\";\nimport { useCachedFetch } from \"../hooks/use-cached-fetch.js\";\nimport { Badge } from \"./badge.js\";\nimport {\n kFeatureDefs,\n kProviderAuthFields,\n kProviderLabels,\n} from \"../lib/model-config.js\";\n\nconst html = htm.bind(h);\n\nconst getKeyVal = (vars, key) => vars.find((v) => v.key === key)?.value || \"\";\n\nconst resolveFeatureStatus = (feature, envVars) => {\n for (const provider of feature.providers) {\n const fields = kProviderAuthFields[provider] || [];\n const hasKey = fields.some((f) => !!getKeyVal(envVars, f.key));\n if (hasKey) return { active: true, provider };\n }\n return { active: false, provider: null };\n};\n\nexport const Features = ({ onSwitchTab }) => {\n const { data, loading } = useCachedFetch(\"/api/env\", fetchEnvVars, {\n maxAgeMs: 30000,\n });\n const envVars = Array.isArray(data?.vars) ? data.vars : [];\n const loaded = !loading;\n\n if (!loaded) return null;\n\n return html`\n
    \n

    Features

    \n
    \n ${kFeatureDefs.map((feature) => {\n const status = resolveFeatureStatus(feature, envVars);\n return html`\n
    \n ${feature.label}\n ${status.active\n ? html`\n \n \n ${kProviderLabels[status.provider] || status.provider}\n \n <${Badge} tone=\"success\">Enabled\n \n `\n : html`\n \n {\n e.preventDefault();\n onSwitchTab?.(\"envars\");\n }}\n class=\"text-xs px-2 py-1 rounded-lg ac-btn-ghost\"\n >Add provider\n <${Badge} tone=${feature.hasDefault ? \"neutral\" : \"danger\"}>Disabled\n \n `}\n
    \n `;\n })}\n
    \n
    \n `;\n};\n" }, { "path": "lib/public/js/components/file-tree.js", "content": "import { h } from \"preact\";\nimport {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"preact/hooks\";\nimport htm from \"htm\";\nimport {\n fetchBrowseTree,\n deleteBrowseFile,\n createBrowseFile,\n createBrowseFolder,\n moveBrowsePath,\n downloadBrowseFile,\n} from \"../lib/api.js\";\nimport {\n kDraftIndexChangedEventName,\n readStoredDraftPaths,\n} from \"../lib/browse-draft-state.js\";\nimport {\n kLockedBrowsePaths,\n kProtectedBrowsePaths,\n matchesBrowsePolicyPath,\n normalizeBrowsePolicyPath,\n} from \"../lib/browse-file-policies.js\";\nimport { collectAncestorFolderPaths } from \"../lib/file-tree-utils.js\";\nimport {\n MarkdownFillIcon,\n JavascriptFillIcon,\n File3LineIcon,\n FileMusicLineIcon,\n Image2FillIcon,\n TerminalFillIcon,\n BracesLineIcon,\n FileCodeLineIcon,\n Database2LineIcon,\n HashtagIcon,\n LockLineIcon,\n FileAddLineIcon,\n FolderAddLineIcon,\n DeleteBinLineIcon,\n DownloadLineIcon,\n FileCopyLineIcon,\n} from \"./icons.js\";\nimport { LoadingSpinner } from \"./loading-spinner.js\";\nimport { ConfirmDialog } from \"./confirm-dialog.js\";\nimport { showToast } from \"./toast.js\";\nimport { copyTextToClipboard } from \"../lib/clipboard.js\";\n\nconst html = htm.bind(h);\nconst kTreeIndentPx = 9;\nconst kFolderBasePaddingPx = 10;\nconst kFileBasePaddingPx = 14;\nconst kTreeRefreshIntervalMs = 5000;\nimport { kExpandedFoldersStorageKey } from \"../lib/storage-keys.js\";\n\nconst readStoredExpandedPaths = () => {\n try {\n const rawValue = window.localStorage.getItem(kExpandedFoldersStorageKey);\n if (!rawValue) return null;\n const parsedValue = JSON.parse(rawValue);\n if (!Array.isArray(parsedValue)) return null;\n return new Set(parsedValue.map((entry) => String(entry)));\n } catch {\n return null;\n }\n};\n\nconst collectFolderPaths = (node, folderPaths) => {\n if (!node || node.type !== \"folder\") return;\n if (node.path) folderPaths.add(node.path);\n (node.children || []).forEach((childNode) =>\n collectFolderPaths(childNode, folderPaths),\n );\n};\n\nconst collectFilePaths = (node, filePaths) => {\n if (!node) return;\n if (node.type === \"file\") {\n if (node.path) filePaths.push(node.path);\n return;\n }\n (node.children || []).forEach((childNode) =>\n collectFilePaths(childNode, filePaths),\n );\n};\n\nconst removeTreePath = (node, targetPath) => {\n if (!node) return null;\n const safeTargetPath = String(targetPath || \"\").trim();\n if (!safeTargetPath) return node;\n const nodePath = String(node.path || \"\").trim();\n if (nodePath === safeTargetPath) return null;\n if (node.type !== \"folder\") return node;\n const nextChildren = (node.children || [])\n .map((childNode) => removeTreePath(childNode, safeTargetPath))\n .filter(Boolean);\n if (nextChildren.length === (node.children || []).length) return node;\n return {\n ...node,\n children: nextChildren,\n };\n};\n\nconst filterTreeNode = (node, normalizedQuery) => {\n if (!node) return null;\n const query = String(normalizedQuery || \"\")\n .trim()\n .toLowerCase();\n if (!query) return node;\n const nodeName = String(node.name || \"\").toLowerCase();\n const nodePath = String(node.path || \"\").toLowerCase();\n const isDirectMatch = nodeName.includes(query) || nodePath.includes(query);\n if (node.type === \"file\") {\n return isDirectMatch ? node : null;\n }\n const filteredChildren = (node.children || [])\n .map((childNode) => filterTreeNode(childNode, query))\n .filter(Boolean);\n if (!isDirectMatch && filteredChildren.length === 0) return null;\n return {\n ...node,\n children: filteredChildren,\n };\n};\n\nconst getFileIconMeta = (fileName) => {\n const normalizedName = String(fileName || \"\").toLowerCase();\n const normalizedNameWithoutBakSuffix = normalizedName.replace(/(\\.bak)+$/i, \"\");\n if (normalizedNameWithoutBakSuffix.endsWith(\".md\")) {\n return {\n icon: MarkdownFillIcon,\n className: \"file-icon file-icon-md\",\n };\n }\n if (\n normalizedNameWithoutBakSuffix.endsWith(\".js\") ||\n normalizedNameWithoutBakSuffix.endsWith(\".mjs\")\n ) {\n return {\n icon: JavascriptFillIcon,\n className: \"file-icon file-icon-js\",\n };\n }\n if (\n normalizedNameWithoutBakSuffix.endsWith(\".json\") ||\n normalizedNameWithoutBakSuffix.endsWith(\".jsonl\")\n ) {\n return {\n icon: BracesLineIcon,\n className: \"file-icon file-icon-json\",\n };\n }\n if (\n normalizedNameWithoutBakSuffix.endsWith(\".css\") ||\n normalizedNameWithoutBakSuffix.endsWith(\".scss\")\n ) {\n return {\n icon: HashtagIcon,\n className: \"file-icon file-icon-css\",\n };\n }\n if (/\\.(html?)$/i.test(normalizedNameWithoutBakSuffix)) {\n return {\n icon: FileCodeLineIcon,\n className: \"file-icon file-icon-html\",\n };\n }\n if (\n /\\.(png|jpe?g|gif|webp|svg|bmp|ico|avif)$/i.test(\n normalizedNameWithoutBakSuffix,\n )\n ) {\n return {\n icon: Image2FillIcon,\n className: \"file-icon file-icon-image\",\n };\n }\n if (\n /\\.(mp3|wav|ogg|oga|m4a|aac|flac|opus|weba)$/i.test(\n normalizedNameWithoutBakSuffix,\n )\n ) {\n return {\n icon: FileMusicLineIcon,\n className: \"file-icon file-icon-audio\",\n };\n }\n if (\n /\\.(sh|bash|zsh|command)$/i.test(normalizedNameWithoutBakSuffix) ||\n [\n \".bashrc\",\n \".zshrc\",\n \".profile\",\n \".bash_profile\",\n \".zprofile\",\n \".zshenv\",\n ].includes(normalizedNameWithoutBakSuffix)\n ) {\n return {\n icon: TerminalFillIcon,\n className: \"file-icon file-icon-shell\",\n };\n }\n if (\n /\\.(db|sqlite|sqlite3|db3|sdb|sqlitedb|duckdb|mdb|accdb)$/i.test(\n normalizedNameWithoutBakSuffix,\n )\n ) {\n return {\n icon: Database2LineIcon,\n className: \"file-icon file-icon-db\",\n };\n }\n return {\n icon: File3LineIcon,\n className: \"file-icon file-icon-generic\",\n };\n};\n\nconst TreeContextMenu = ({\n x,\n y,\n targetPath,\n targetType,\n isLocked,\n onNewFile,\n onNewFolder,\n onCopyPath,\n onDownload,\n onDelete,\n onClose,\n}) => {\n const menuRef = useRef(null);\n\n useEffect(() => {\n const handleClick = (e) => {\n if (menuRef.current && !menuRef.current.contains(e.target)) onClose();\n };\n const handleKey = (e) => {\n if (e.key === \"Escape\") onClose();\n };\n const handleScroll = () => onClose();\n window.addEventListener(\"mousedown\", handleClick);\n window.addEventListener(\"keydown\", handleKey);\n window.addEventListener(\"scroll\", handleScroll, true);\n return () => {\n window.removeEventListener(\"mousedown\", handleClick);\n window.removeEventListener(\"keydown\", handleKey);\n window.removeEventListener(\"scroll\", handleScroll, true);\n };\n }, [onClose]);\n\n const isFolder = targetType === \"folder\";\n const isFile = targetType === \"file\";\n const isRoot = targetType === \"root\";\n const contextFolder = isFolder ? targetPath : \"\";\n const canCreate = !isLocked && (isFolder || isRoot);\n const canCopyPath = Boolean((isFolder || isFile) && targetPath);\n const canDownload = isFile && targetPath;\n const canDelete = !isLocked && (isFolder || isFile) && targetPath;\n\n return html`\n \n ${canCreate\n ? html`\n { onNewFile(contextFolder); onClose(); }}\n >\n <${FileAddLineIcon} className=\"tree-context-menu-icon\" />\n New File\n \n { onNewFolder(contextFolder); onClose(); }}\n >\n <${FolderAddLineIcon} className=\"tree-context-menu-icon\" />\n New Folder\n \n `\n : null}\n ${canCopyPath || canDownload || canDelete\n ? html`\n ${canCreate\n ? html`
    `\n : null}\n ${canCopyPath\n ? html`\n { onCopyPath(targetPath); onClose(); }}\n >\n <${FileCopyLineIcon} className=\"tree-context-menu-icon\" />\n Copy Path\n \n `\n : null}\n ${canDownload\n ? html`\n { onDownload(targetPath); onClose(); }}\n >\n <${DownloadLineIcon} className=\"tree-context-menu-icon\" />\n Download\n \n `\n : null}\n ${canDelete\n ? html`\n { onDelete(targetPath); onClose(); }}\n >\n <${DeleteBinLineIcon} className=\"tree-context-menu-icon\" />\n Delete\n \n `\n : null}\n `\n : null}\n ${isLocked\n ? html`\n
    \n <${LockLineIcon} className=\"tree-context-menu-icon\" />\n Managed by AlphaClaw\n
    \n `\n : null}\n \n `;\n};\n\nconst CreationInput = ({ type, depth, onConfirm, onCancel }) => {\n const inputRef = useRef(null);\n const [value, setValue] = useState(\"\");\n const submittedRef = useRef(false);\n\n useEffect(() => {\n inputRef.current?.focus();\n }, []);\n\n const submit = () => {\n const name = value.trim();\n if (!name || submittedRef.current) {\n onCancel();\n return;\n }\n submittedRef.current = true;\n onConfirm(name);\n };\n\n const IconComponent = type === \"folder\" ? FolderAddLineIcon : FileAddLineIcon;\n return html`\n
  • \n \n <${IconComponent} className=\"tree-create-icon\" />\n setValue(e.target.value)}\n onKeyDown=${(e) => {\n if (e.key === \"Enter\") {\n e.preventDefault();\n submit();\n }\n if (e.key === \"Escape\") {\n e.preventDefault();\n onCancel();\n }\n }}\n onBlur=${submit}\n placeholder=${type === \"folder\" ? \"folder name\" : \"file name\"}\n autocomplete=\"off\"\n spellcheck=${false}\n />\n \n
    • \n `;\n};\n\nconst TreeNode = ({\n node,\n depth = 0,\n expandedPaths,\n onSetFolderExpanded,\n onSelectFolder,\n onRequestDelete,\n onSelectFile,\n onContextMenu,\n onDragDrop,\n selectedPath = \"\",\n draftPaths,\n isSearchActive = false,\n searchActivePath = \"\",\n creatingInFolder = \"\",\n creatingType = \"\",\n onCreationConfirm,\n onCreationCancel,\n dragSourcePath = \"\",\n}) => {\n if (!node) return null;\n if (node.type === \"file\") {\n const isActive = selectedPath === node.path;\n const isSearchActiveNode = searchActivePath === node.path;\n const hasDraft = draftPaths.has(node.path || \"\");\n const isLocked = matchesBrowsePolicyPath(\n kLockedBrowsePaths,\n normalizeBrowsePolicyPath(node.path || \"\"),\n );\n const fileIconMeta = getFileIconMeta(node.name);\n const FileTypeIcon = fileIconMeta.icon;\n return html`\n
  • \n onSelectFile(node.path)}\n oncontextmenu=${(e) => {\n e.preventDefault();\n e.stopPropagation();\n onContextMenu({ x: e.clientX, y: e.clientY, targetPath: node.path, targetType: \"file\", isLocked });\n }}\n draggable=${!isLocked}\n onDragStart=${(e) => {\n if (isLocked) { e.preventDefault(); return; }\n e.dataTransfer.setData(\"text/plain\", node.path);\n e.dataTransfer.effectAllowed = \"move\";\n onDragDrop(\"start\", node.path);\n }}\n onDragEnd=${() => onDragDrop(\"end\", \"\")}\n onKeyDown=${(event) => {\n const isDeleteKey =\n event.key === \"Delete\" || event.key === \"Backspace\";\n if (!isDeleteKey || !isActive) return;\n event.preventDefault();\n onRequestDelete(node.path);\n }}\n tabindex=\"0\"\n role=\"button\"\n style=${{\n paddingLeft: `${kFileBasePaddingPx + depth * kTreeIndentPx}px`,\n }}\n title=${node.path || node.name}\n >\n <${FileTypeIcon} className=${fileIconMeta.className} />\n ${node.name}\n ${isLocked\n ? html`<${LockLineIcon}\n className=\"tree-lock-icon\"\n title=\"Managed by AlphaClaw\"\n />`\n : hasDraft\n ? html``\n : null}\n \n
    • \n `;\n }\n\n const folderPath = node.path || \"\";\n const isCollapsed = isSearchActive ? false : !expandedPaths.has(folderPath);\n const isFolderActive = selectedPath === folderPath;\n const isFolderLocked = folderPath && matchesBrowsePolicyPath(\n kLockedBrowsePaths,\n normalizeBrowsePolicyPath(folderPath),\n );\n const [isDropTarget, setIsDropTarget] = useState(false);\n const dropCounterRef = useRef(0);\n return html`\n
  • \n {\n if (!folderPath) return;\n onSetFolderExpanded(folderPath, isCollapsed);\n onSelectFolder(folderPath);\n }}\n oncontextmenu=${(e) => {\n e.preventDefault();\n e.stopPropagation();\n onContextMenu({ x: e.clientX, y: e.clientY, targetPath: folderPath, targetType: \"folder\", isLocked: isFolderLocked });\n }}\n draggable=${!!folderPath && !isFolderLocked}\n onDragStart=${(e) => {\n if (!folderPath || isFolderLocked) { e.preventDefault(); return; }\n e.dataTransfer.setData(\"text/plain\", folderPath);\n e.dataTransfer.effectAllowed = \"move\";\n onDragDrop(\"start\", folderPath);\n }}\n onDragEnd=${() => { setIsDropTarget(false); dropCounterRef.current = 0; onDragDrop(\"end\", \"\"); }}\n onDragOver=${(e) => {\n if (isFolderLocked) return;\n e.preventDefault();\n e.dataTransfer.dropEffect = \"move\";\n }}\n onDragEnter=${(e) => {\n if (isFolderLocked) return;\n e.preventDefault();\n dropCounterRef.current += 1;\n if (dropCounterRef.current === 1) setIsDropTarget(true);\n }}\n onDragLeave=${() => {\n dropCounterRef.current -= 1;\n if (dropCounterRef.current <= 0) { dropCounterRef.current = 0; setIsDropTarget(false); }\n }}\n onDrop=${(e) => {\n if (isFolderLocked) return;\n e.preventDefault();\n e.stopPropagation();\n setIsDropTarget(false);\n dropCounterRef.current = 0;\n const sourcePath = e.dataTransfer.getData(\"text/plain\");\n if (sourcePath && sourcePath !== folderPath) {\n onDragDrop(\"drop\", sourcePath, folderPath);\n }\n }}\n style=${{\n paddingLeft: `${kFolderBasePaddingPx + depth * kTreeIndentPx}px`,\n }}\n title=${folderPath || node.name}\n >\n {\n event.preventDefault();\n event.stopPropagation();\n if (!folderPath) return;\n onSetFolderExpanded(folderPath, isCollapsed);\n }}\n >\n ▼\n \n ${node.name}\n ${isFolderLocked\n ? html`<${LockLineIcon}\n className=\"tree-lock-icon\"\n title=\"Managed by AlphaClaw\"\n />`\n : null}\n \n
      \n ${creatingInFolder === folderPath && creatingType === \"folder\"\n ? html`\n <${CreationInput}\n key=\"__creation__\"\n type=\"folder\"\n depth=${depth + 1}\n onConfirm=${onCreationConfirm}\n onCancel=${onCreationCancel}\n />\n `\n : null}\n ${(node.children || []).filter((c) => c.type === \"folder\").map(\n (childNode) => html`\n <${TreeNode}\n key=${childNode.path || `${folderPath}/${childNode.name}`}\n node=${childNode}\n depth=${depth + 1}\n expandedPaths=${expandedPaths}\n onSetFolderExpanded=${onSetFolderExpanded}\n onSelectFolder=${onSelectFolder}\n onRequestDelete=${onRequestDelete}\n onSelectFile=${onSelectFile}\n onContextMenu=${onContextMenu}\n onDragDrop=${onDragDrop}\n selectedPath=${selectedPath}\n draftPaths=${draftPaths}\n isSearchActive=${isSearchActive}\n searchActivePath=${searchActivePath}\n creatingInFolder=${creatingInFolder}\n creatingType=${creatingType}\n onCreationConfirm=${onCreationConfirm}\n onCreationCancel=${onCreationCancel}\n dragSourcePath=${dragSourcePath}\n />\n `,\n )}\n ${creatingInFolder === folderPath && creatingType === \"file\"\n ? html`\n <${CreationInput}\n key=\"__creation__\"\n type=\"file\"\n depth=${depth + 1}\n onConfirm=${onCreationConfirm}\n onCancel=${onCreationCancel}\n />\n `\n : null}\n ${(node.children || []).filter((c) => c.type !== \"folder\").map(\n (childNode) => html`\n <${TreeNode}\n key=${childNode.path || `${folderPath}/${childNode.name}`}\n node=${childNode}\n depth=${depth + 1}\n expandedPaths=${expandedPaths}\n onSetFolderExpanded=${onSetFolderExpanded}\n onSelectFolder=${onSelectFolder}\n onRequestDelete=${onRequestDelete}\n onSelectFile=${onSelectFile}\n onContextMenu=${onContextMenu}\n onDragDrop=${onDragDrop}\n selectedPath=${selectedPath}\n draftPaths=${draftPaths}\n isSearchActive=${isSearchActive}\n searchActivePath=${searchActivePath}\n creatingInFolder=${creatingInFolder}\n creatingType=${creatingType}\n onCreationConfirm=${onCreationConfirm}\n onCreationCancel=${onCreationCancel}\n dragSourcePath=${dragSourcePath}\n />\n `,\n )}\n
    \n
    • \n `;\n};\n\nexport const FileTree = ({\n onSelectFile = () => {},\n selectedPath = \"\",\n onPreviewFile = () => {},\n isActive = true,\n}) => {\n const [treeRoot, setTreeRoot] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(\"\");\n const [expandedPaths, setExpandedPaths] = useState(readStoredExpandedPaths);\n const [draftPaths, setDraftPaths] = useState(readStoredDraftPaths);\n const [searchQuery, setSearchQuery] = useState(\"\");\n const [searchActivePath, setSearchActivePath] = useState(\"\");\n const [deleteTargetPath, setDeleteTargetPath] = useState(\"\");\n const [deletingFile, setDeletingFile] = useState(false);\n const [creatingInFolder, setCreatingInFolder] = useState(\"\");\n const [creatingType, setCreatingType] = useState(\"\");\n const [contextMenu, setContextMenu] = useState(null);\n const [dragSourcePath, setDragSourcePath] = useState(\"\");\n const [selectedFolder, setSelectedFolder] = useState(\"\");\n const effectiveSelectedPath = selectedFolder || selectedPath;\n const searchInputRef = useRef(null);\n const treeSignatureRef = useRef(\"\");\n\n const loadTree = useCallback(async ({ showLoading = false } = {}) => {\n if (showLoading) setLoading(true);\n if (showLoading) setError(\"\");\n try {\n const data = await fetchBrowseTree();\n const nextRoot = data.root || null;\n const nextSignature = JSON.stringify(nextRoot || {});\n if (treeSignatureRef.current !== nextSignature) {\n treeSignatureRef.current = nextSignature;\n setTreeRoot(nextRoot);\n }\n setExpandedPaths((previousPaths) =>\n previousPaths instanceof Set ? previousPaths : new Set(),\n );\n if (showLoading) setError(\"\");\n } catch (loadError) {\n if (showLoading) {\n setError(loadError.message || \"Could not load file tree\");\n }\n } finally {\n if (showLoading) setLoading(false);\n }\n }, []);\n\n useEffect(() => {\n loadTree({ showLoading: true });\n }, [loadTree]);\n\n useEffect(() => {\n if (!isActive) return () => {};\n const refreshTree = () => {\n loadTree({ showLoading: false });\n };\n const handleFileDeleted = (event) => {\n const deletedPath = String(event?.detail?.path || \"\").trim();\n if (!deletedPath) return;\n setTreeRoot((previousRoot) => removeTreePath(previousRoot, deletedPath));\n };\n refreshTree();\n const refreshInterval = window.setInterval(\n refreshTree,\n kTreeRefreshIntervalMs,\n );\n window.addEventListener(\"alphaclaw:browse-file-saved\", refreshTree);\n window.addEventListener(\"alphaclaw:browse-tree-refresh\", refreshTree);\n window.addEventListener(\"alphaclaw:browse-file-deleted\", handleFileDeleted);\n return () => {\n window.clearInterval(refreshInterval);\n window.removeEventListener(\"alphaclaw:browse-file-saved\", refreshTree);\n window.removeEventListener(\"alphaclaw:browse-tree-refresh\", refreshTree);\n window.removeEventListener(\"alphaclaw:browse-file-deleted\", handleFileDeleted);\n };\n }, [isActive, loadTree]);\n\n const normalizedSearchQuery = String(searchQuery || \"\")\n .trim()\n .toLowerCase();\n const rootChildren = useMemo(() => {\n const children = treeRoot?.children || [];\n if (!normalizedSearchQuery) return children;\n return children\n .map((node) => filterTreeNode(node, normalizedSearchQuery))\n .filter(Boolean);\n }, [treeRoot, normalizedSearchQuery]);\n const safeExpandedPaths =\n expandedPaths instanceof Set ? expandedPaths : new Set();\n const isSearchActive = normalizedSearchQuery.length > 0;\n const filteredFilePaths = useMemo(() => {\n const filePaths = [];\n rootChildren.forEach((node) => collectFilePaths(node, filePaths));\n return filePaths;\n }, [rootChildren]);\n const allTreeFilePaths = useMemo(() => {\n const filePaths = [];\n (treeRoot?.children || []).forEach((node) => collectFilePaths(node, filePaths));\n return new Set(filePaths);\n }, [treeRoot]);\n const folderPaths = useMemo(() => {\n const nextFolderPaths = new Set();\n rootChildren.forEach((node) => collectFolderPaths(node, nextFolderPaths));\n return nextFolderPaths;\n }, [rootChildren]);\n\n useEffect(() => {\n if (!(expandedPaths instanceof Set)) return;\n try {\n window.localStorage.setItem(\n kExpandedFoldersStorageKey,\n JSON.stringify(Array.from(expandedPaths)),\n );\n } catch {}\n }, [expandedPaths]);\n\n useEffect(() => {\n if (selectedPath) setSelectedFolder(\"\");\n }, [selectedPath]);\n\n useEffect(() => {\n if (!selectedPath) return;\n const ancestorFolderPaths = collectAncestorFolderPaths(selectedPath);\n if (!ancestorFolderPaths.length) return;\n setExpandedPaths((previousPaths) => {\n if (!(previousPaths instanceof Set)) return previousPaths;\n let didChange = false;\n const nextPaths = new Set(previousPaths);\n ancestorFolderPaths.forEach((ancestorPath) => {\n if (!nextPaths.has(ancestorPath)) {\n nextPaths.add(ancestorPath);\n didChange = true;\n }\n });\n return didChange ? nextPaths : previousPaths;\n });\n }, [selectedPath]);\n\n useEffect(() => {\n const handleDraftIndexChanged = (event) => {\n const eventPaths = event?.detail?.paths;\n if (Array.isArray(eventPaths)) {\n setDraftPaths(\n new Set(\n eventPaths\n .map((entry) => String(entry || \"\").trim())\n .filter(Boolean),\n ),\n );\n return;\n }\n setDraftPaths(readStoredDraftPaths());\n };\n window.addEventListener(\n kDraftIndexChangedEventName,\n handleDraftIndexChanged,\n );\n window.addEventListener(\"storage\", handleDraftIndexChanged);\n return () => {\n window.removeEventListener(\n kDraftIndexChangedEventName,\n handleDraftIndexChanged,\n );\n window.removeEventListener(\"storage\", handleDraftIndexChanged);\n };\n }, []);\n\n useEffect(() => {\n if (!isActive) return () => {};\n const handleGlobalSearchShortcut = (event) => {\n if (event.key !== \"/\") return;\n if (event.metaKey || event.ctrlKey || event.altKey) return;\n const target = event.target;\n const tagName = String(target?.tagName || \"\").toLowerCase();\n const isTypingTarget =\n tagName === \"input\" ||\n tagName === \"textarea\" ||\n tagName === \"select\" ||\n target?.isContentEditable;\n if (isTypingTarget && target !== searchInputRef.current) return;\n event.preventDefault();\n searchInputRef.current?.focus();\n searchInputRef.current?.select();\n };\n window.addEventListener(\"keydown\", handleGlobalSearchShortcut);\n return () => {\n window.removeEventListener(\"keydown\", handleGlobalSearchShortcut);\n };\n }, [isActive]);\n\n useEffect(() => {\n if (!isSearchActive) {\n setSearchActivePath(\"\");\n onPreviewFile(\"\");\n return;\n }\n if (searchActivePath && filteredFilePaths.includes(searchActivePath))\n return;\n setSearchActivePath(\"\");\n onPreviewFile(\"\");\n }, [isSearchActive, filteredFilePaths, searchActivePath, onPreviewFile]);\n\n const setFolderExpanded = (folderPath, nextExpanded) => {\n setExpandedPaths((previousPaths) => {\n const nextPaths =\n previousPaths instanceof Set ? new Set(previousPaths) : new Set();\n if (nextExpanded === true) {\n nextPaths.add(folderPath);\n return nextPaths;\n }\n if (nextExpanded === false) {\n nextPaths.delete(folderPath);\n return nextPaths;\n }\n if (nextPaths.has(folderPath)) nextPaths.delete(folderPath);\n else nextPaths.add(folderPath);\n return nextPaths;\n });\n };\n\n const handleSelectFile = useCallback((filePath, options) => {\n setSelectedFolder(\"\");\n onSelectFile(filePath, options);\n }, [onSelectFile]);\n\n const selectFolder = (folderPath) => {\n setSelectedFolder(folderPath);\n };\n\n const requestDelete = (targetPath) => {\n const normalizedTargetPath = normalizeBrowsePolicyPath(targetPath);\n if (!normalizedTargetPath) return;\n if (\n matchesBrowsePolicyPath(kLockedBrowsePaths, normalizedTargetPath) ||\n matchesBrowsePolicyPath(kProtectedBrowsePaths, normalizedTargetPath)\n ) {\n showToast(\"Protected or locked paths cannot be deleted\", \"warning\");\n return;\n }\n setDeleteTargetPath(targetPath);\n };\n\n const deleteTargetIsFolder = folderPaths.has(deleteTargetPath);\n\n const confirmDelete = async () => {\n if (!deleteTargetPath || deletingFile) return;\n setDeletingFile(true);\n try {\n await deleteBrowseFile(deleteTargetPath);\n window.dispatchEvent(\n new CustomEvent(\"alphaclaw:browse-file-saved\", {\n detail: { path: deleteTargetPath },\n }),\n );\n window.dispatchEvent(\n new CustomEvent(\"alphaclaw:browse-file-deleted\", {\n detail: { path: deleteTargetPath },\n }),\n );\n setTreeRoot((previousRoot) =>\n removeTreePath(previousRoot, deleteTargetPath),\n );\n window.dispatchEvent(new CustomEvent(\"alphaclaw:browse-tree-refresh\"));\n handleSelectFile(\"\");\n showToast(deleteTargetIsFolder ? \"Folder deleted\" : \"File deleted\", \"success\");\n setDeleteTargetPath(\"\");\n } catch (deleteError) {\n showToast(deleteError.message || \"Could not delete\", \"error\");\n } finally {\n setDeletingFile(false);\n }\n };\n\n const getCreateFolder = (explicitFolder) => {\n if (explicitFolder !== undefined) return explicitFolder;\n if (!effectiveSelectedPath) return \"\";\n if (folderPaths.has(effectiveSelectedPath)) return effectiveSelectedPath;\n const lastSlash = effectiveSelectedPath.lastIndexOf(\"/\");\n return lastSlash > 0 ? effectiveSelectedPath.slice(0, lastSlash) : \"\";\n };\n\n const requestCreate = (folderPath, type) => {\n const target = getCreateFolder(folderPath);\n if (target && matchesBrowsePolicyPath(kLockedBrowsePaths, normalizeBrowsePolicyPath(target))) {\n showToast(\"Cannot create inside a locked folder\", \"warning\");\n return;\n }\n setCreatingInFolder(target);\n setCreatingType(type);\n if (target) {\n setExpandedPaths((prev) => {\n const next = prev instanceof Set ? new Set(prev) : new Set();\n next.add(target);\n return next;\n });\n }\n };\n\n const requestCreateFromToolbar = (type) => {\n requestCreate(getCreateFolder(), type);\n };\n\n const cancelCreate = () => {\n setCreatingInFolder(\"\");\n setCreatingType(\"\");\n };\n\n const confirmCreate = async (name) => {\n const folder = creatingInFolder;\n const type = creatingType;\n cancelCreate();\n const fullPath = folder ? `${folder}/${name}` : name;\n try {\n if (type === \"folder\") {\n await createBrowseFolder(fullPath);\n showToast(\"Folder created\", \"success\");\n } else {\n await createBrowseFile(fullPath);\n showToast(\"File created\", \"success\");\n }\n window.dispatchEvent(new CustomEvent(\"alphaclaw:browse-tree-refresh\"));\n if (folder) {\n setExpandedPaths((prev) => {\n const next = prev instanceof Set ? new Set(prev) : new Set();\n next.add(folder);\n return next;\n });\n }\n if (type === \"file\") {\n handleSelectFile(fullPath);\n }\n } catch (createError) {\n showToast(createError.message || `Could not create ${type}`, \"error\");\n }\n };\n\n const openContextMenu = (menu) => {\n setContextMenu(menu);\n };\n\n const closeContextMenu = () => {\n setContextMenu(null);\n };\n\n const requestDownload = async (targetPath) => {\n try {\n await downloadBrowseFile(targetPath);\n showToast(\"Download started\", \"success\");\n } catch (downloadError) {\n showToast(downloadError.message || \"Could not download file\", \"error\");\n }\n };\n\n const copyPath = async (targetPath) => {\n const copied = await copyTextToClipboard(targetPath);\n if (copied) {\n showToast(\"Path copied\", \"success\");\n return;\n }\n showToast(\"Could not copy path\", \"error\");\n };\n\n const handleDragDrop = async (action, sourcePath, targetFolder) => {\n if (action === \"start\") {\n setDragSourcePath(sourcePath);\n return;\n }\n if (action === \"end\") {\n setDragSourcePath(\"\");\n return;\n }\n if (action === \"drop\") {\n setDragSourcePath(\"\");\n const basename = sourcePath.split(\"/\").pop();\n if (!basename) return;\n const destination = targetFolder ? `${targetFolder}/${basename}` : basename;\n if (sourcePath === destination) return;\n try {\n await moveBrowsePath(sourcePath, destination);\n showToast(`Moved to ${targetFolder || \"root\"}`, \"success\");\n window.dispatchEvent(new CustomEvent(\"alphaclaw:browse-tree-refresh\"));\n if (selectedPath === sourcePath) {\n handleSelectFile(destination);\n }\n } catch (moveError) {\n showToast(moveError.message || \"Could not move\", \"error\");\n }\n }\n };\n\n const updateSearchQuery = (nextQuery) => {\n setSearchQuery(nextQuery);\n };\n\n const clearSearch = () => {\n setSearchQuery(\"\");\n setSearchActivePath(\"\");\n onPreviewFile(\"\");\n };\n\n const moveSearchSelection = (direction) => {\n if (!filteredFilePaths.length) return;\n const currentIndex = filteredFilePaths.indexOf(searchActivePath);\n const delta = direction === \"up\" ? -1 : 1;\n const baseIndex =\n currentIndex === -1 ? (direction === \"up\" ? 0 : -1) : currentIndex;\n const nextIndex =\n (baseIndex + delta + filteredFilePaths.length) % filteredFilePaths.length;\n const nextPath = filteredFilePaths[nextIndex];\n setSearchActivePath(nextPath);\n onPreviewFile(nextPath);\n };\n\n const commitSearchSelection = () => {\n const [singlePath = \"\"] = filteredFilePaths;\n const targetPath =\n searchActivePath || (filteredFilePaths.length === 1 ? singlePath : \"\");\n if (!targetPath) return;\n handleSelectFile(targetPath);\n clearSearch();\n };\n\n const onSearchKeyDown = (event) => {\n if (event.key === \"ArrowDown\") {\n event.preventDefault();\n moveSearchSelection(\"down\");\n return;\n }\n if (event.key === \"ArrowUp\") {\n event.preventDefault();\n moveSearchSelection(\"up\");\n return;\n }\n if (event.key === \"Enter\") {\n event.preventDefault();\n commitSearchSelection();\n return;\n }\n if (event.key === \"Escape\") {\n event.preventDefault();\n clearSearch();\n }\n };\n\n if (loading) {\n return html`\n
    \n
    \n <${LoadingSpinner} className=\"h-5 w-5 text-fg-muted\" />\n
    \n
    \n `;\n }\n if (error) {\n return html`
    \n ${error}\n
    `;\n }\n if (!rootChildren.length && !creatingType) {\n return html`\n
    \n
    \n updateSearchQuery(event.target.value)}\n onKeyDown=${onSearchKeyDown}\n placeholder=\"Search files...\"\n autocomplete=\"off\"\n spellcheck=${false}\n />\n \n requestCreateFromToolbar(\"file\")}\n >\n <${FileAddLineIcon} className=\"tree-folder-action-icon\" />\n \n requestCreateFromToolbar(\"folder\")}\n >\n <${FolderAddLineIcon} className=\"tree-folder-action-icon\" />\n \n \n
    \n
    \n ${isSearchActive ? \"No matching files.\" : \"No files found.\"}\n
    \n
    \n `;\n }\n\n return html`\n
    \n
    \n updateSearchQuery(event.target.value)}\n onKeyDown=${onSearchKeyDown}\n placeholder=\"Search files...\"\n autocomplete=\"off\"\n spellcheck=${false}\n />\n \n requestCreateFromToolbar(\"file\")}\n >\n <${FileAddLineIcon} className=\"tree-folder-action-icon\" />\n \n requestCreateFromToolbar(\"folder\")}\n >\n <${FolderAddLineIcon} className=\"tree-folder-action-icon\" />\n \n \n
    \n
    \n {\n e.preventDefault();\n openContextMenu({ x: e.clientX, y: e.clientY, targetPath: \"\", targetType: \"root\" });\n }}\n onDragOver=${(e) => { e.preventDefault(); e.dataTransfer.dropEffect = \"move\"; }}\n onDrop=${(e) => {\n e.preventDefault();\n const sourcePath = e.dataTransfer.getData(\"text/plain\");\n if (sourcePath) handleDragDrop(\"drop\", sourcePath, \"\");\n }}\n >\n ${creatingInFolder === \"\" && creatingType === \"folder\"\n ? html`\n <${CreationInput}\n key=\"__root-creation__\"\n type=\"folder\"\n depth=${0}\n onConfirm=${confirmCreate}\n onCancel=${cancelCreate}\n />\n `\n : null}\n ${rootChildren.filter((n) => n.type === \"folder\").map(\n (node) => html`\n <${TreeNode}\n key=${node.path || node.name}\n node=${node}\n expandedPaths=${safeExpandedPaths}\n onSetFolderExpanded=${setFolderExpanded}\n onSelectFolder=${selectFolder}\n onRequestDelete=${requestDelete}\n onSelectFile=${handleSelectFile}\n onContextMenu=${openContextMenu}\n onDragDrop=${handleDragDrop}\n selectedPath=${effectiveSelectedPath}\n draftPaths=${draftPaths}\n isSearchActive=${isSearchActive}\n searchActivePath=${searchActivePath}\n creatingInFolder=${creatingInFolder}\n creatingType=${creatingType}\n onCreationConfirm=${confirmCreate}\n onCreationCancel=${cancelCreate}\n dragSourcePath=${dragSourcePath}\n />\n `,\n )}\n ${creatingInFolder === \"\" && creatingType === \"file\"\n ? html`\n <${CreationInput}\n key=\"__root-creation__\"\n type=\"file\"\n depth=${0}\n onConfirm=${confirmCreate}\n onCancel=${cancelCreate}\n />\n `\n : null}\n ${rootChildren.filter((n) => n.type !== \"folder\").map(\n (node) => html`\n <${TreeNode}\n key=${node.path || node.name}\n node=${node}\n expandedPaths=${safeExpandedPaths}\n onSetFolderExpanded=${setFolderExpanded}\n onSelectFolder=${selectFolder}\n onRequestDelete=${requestDelete}\n onSelectFile=${handleSelectFile}\n onContextMenu=${openContextMenu}\n onDragDrop=${handleDragDrop}\n selectedPath=${effectiveSelectedPath}\n draftPaths=${draftPaths}\n isSearchActive=${isSearchActive}\n searchActivePath=${searchActivePath}\n creatingInFolder=${creatingInFolder}\n creatingType=${creatingType}\n onCreationConfirm=${confirmCreate}\n onCreationCancel=${cancelCreate}\n dragSourcePath=${dragSourcePath}\n />\n `,\n )}\n \n
    \n ${contextMenu\n ? html`\n <${TreeContextMenu}\n x=${contextMenu.x}\n y=${contextMenu.y}\n targetPath=${contextMenu.targetPath}\n targetType=${contextMenu.targetType}\n isLocked=${!!contextMenu.isLocked}\n onNewFile=${(folder) => requestCreate(folder, \"file\")}\n onNewFolder=${(folder) => requestCreate(folder, \"folder\")}\n onCopyPath=${copyPath}\n onDownload=${requestDownload}\n onDelete=${requestDelete}\n onClose=${closeContextMenu}\n />\n `\n : null}\n <${ConfirmDialog}\n visible=${!!deleteTargetPath}\n title=${deleteTargetIsFolder ? \"Delete folder?\" : \"Delete file?\"}\n message=${deleteTargetIsFolder\n ? `Delete folder ${deleteTargetPath || \"this folder\"} and all its contents?`\n : `Delete ${deleteTargetPath || \"this file\"}? This can be restored from diff view before sync.`}\n confirmLabel=\"Delete\"\n confirmLoadingLabel=\"Deleting...\"\n cancelLabel=\"Cancel\"\n confirmTone=\"warning\"\n confirmLoading=${deletingFile}\n confirmDisabled=${deletingFile}\n onCancel=${() => {\n if (deletingFile) return;\n setDeleteTargetPath(\"\");\n }}\n onConfirm=${confirmDelete}\n />\n
    \n `;\n};\n" }, { "path": "lib/public/js/components/file-viewer/constants.js", "content": "export {\n kFileViewerModeStorageKey,\n kEditorSelectionStorageKey,\n} from \"../../lib/storage-keys.js\";\nexport const kLoadingIndicatorDelayMs = 1000;\nexport const kFileRefreshIntervalMs = 5000;\nexport const kSqlitePageSize = 50;\nexport const kLargeFileSimpleEditorCharThreshold = 250000;\nexport const kLargeFileSimpleEditorLineThreshold = 5000;\n" }, { "path": "lib/public/js/components/file-viewer/diff-viewer.js", "content": "import { h } from \"preact\";\nimport htm from \"htm\";\nimport { LoadingSpinner } from \"../loading-spinner.js\";\n\nconst html = htm.bind(h);\n\nconst getDiffLineClass = (line) => {\n if (line.startsWith(\"+\") && !line.startsWith(\"+++\")) return \"is-added\";\n if (line.startsWith(\"-\") && !line.startsWith(\"---\")) return \"is-removed\";\n if (line.startsWith(\"@@\")) return \"is-hunk\";\n if (\n line.startsWith(\"diff \") ||\n line.startsWith(\"index \") ||\n line.startsWith(\"--- \") ||\n line.startsWith(\"+++ \")\n ) {\n return \"is-header\";\n }\n return \"\";\n};\n\nexport const DiffViewer = ({ diffLoading, diffError, diffContent }) => html`\n
    \n ${diffLoading\n ? html`\n
    \n <${LoadingSpinner} className=\"h-4 w-4\" />\n
    \n `\n : diffError\n ? html`
    ${diffError}
    `\n : html`\n 
    \n${(diffContent || \"\").split(\"\\n\").map((line, lineIndex) => html`\n                \n                  ${line || \" \"}\n
    \n `)}\n \n `}\n \n`;\n" }, { "path": "lib/public/js/components/file-viewer/editor-surface.js", "content": "import { h } from \"preact\";\nimport htm from \"htm\";\n\nconst html = htm.bind(h);\n\nconst EditorTextarea = ({\n overlay = false,\n editorTextareaRef,\n renderContent,\n handleContentInput,\n handleEditorKeyDown,\n handleEditorScroll,\n handleEditorSelectionChange,\n isEditBlocked,\n isPreviewOnly,\n textareaWrap = \"soft\",\n}) => html`\n \n`;\n\nexport const EditorSurface = ({\n editorShellClassName = \"file-viewer-editor-shell\",\n editorShellAriaHidden,\n editorLineNumbers,\n editorLineNumbersRef,\n editorLineNumberRowRefs,\n shouldUseHighlightedEditor,\n highlightedEditorLines,\n editorHighlightRef,\n editorHighlightLineRefs,\n editorTextareaRef,\n renderContent,\n handleContentInput,\n handleEditorKeyDown,\n handleEditorScroll,\n handleEditorSelectionChange,\n isEditBlocked,\n isPreviewOnly,\n textareaWrap = \"soft\",\n}) => html`\n
    \n
    \n ${editorLineNumbers.map(\n (lineNumber) => html`\n {\n editorLineNumberRowRefs.current[lineNumber - 1] = element;\n }}\n >\n ${lineNumber}\n
    \n `,\n )}\n
    \n ${shouldUseHighlightedEditor\n ? html`\n
    \n
    \n ${highlightedEditorLines.map(\n (line) => html`\n {\n editorHighlightLineRefs.current[line.lineNumber - 1] = element;\n }}\n >\n \n
    \n `,\n )}\n
    \n <${EditorTextarea}\n overlay=${true}\n editorTextareaRef=${editorTextareaRef}\n renderContent=${renderContent}\n handleContentInput=${handleContentInput}\n handleEditorKeyDown=${handleEditorKeyDown}\n handleEditorScroll=${handleEditorScroll}\n handleEditorSelectionChange=${handleEditorSelectionChange}\n isEditBlocked=${isEditBlocked}\n isPreviewOnly=${isPreviewOnly}\n textareaWrap=${textareaWrap}\n />\n \n `\n : html`\n <${EditorTextarea}\n overlay=${false}\n editorTextareaRef=${editorTextareaRef}\n renderContent=${renderContent}\n handleContentInput=${handleContentInput}\n handleEditorKeyDown=${handleEditorKeyDown}\n handleEditorScroll=${handleEditorScroll}\n handleEditorSelectionChange=${handleEditorSelectionChange}\n isEditBlocked=${isEditBlocked}\n isPreviewOnly=${isPreviewOnly}\n textareaWrap=${textareaWrap}\n />\n `}\n \n`;\n" }, { "path": "lib/public/js/components/file-viewer/frontmatter-panel.js", "content": "import { h } from \"preact\";\nimport htm from \"htm\";\nimport { formatFrontmatterValue } from \"../../lib/syntax-highlighters/index.js\";\n\nconst html = htm.bind(h);\n\nexport const FrontmatterPanel = ({\n isMarkdownFile,\n parsedFrontmatter,\n frontmatterCollapsed,\n setFrontmatterCollapsed,\n}) => {\n if (!isMarkdownFile || parsedFrontmatter.entries.length <= 0) return null;\n\n return html`\n
    \n setFrontmatterCollapsed((collapsed) => !collapsed)}\n >\n \n \n \n \n \n frontmatter\n \n ${!frontmatterCollapsed\n ? html`\n
    \n ${parsedFrontmatter.entries.map((entry) => {\n const formattedValue = formatFrontmatterValue(entry.rawValue);\n const isMultilineValue = formattedValue.includes(\"\\n\");\n return html`\n
    \n
    ${entry.key}
    \n ${isMultilineValue\n ? html`\n 
    \n${formattedValue}\n                        `\n                      : html`
    ${formattedValue}
    `}\n
    \n `;\n })}\n
    \n `\n : null}\n
    \n `;\n};\n" }, { "path": "lib/public/js/components/file-viewer/index.js", "content": "import { h } from \"preact\";\nimport { useState } from \"preact/hooks\";\nimport htm from \"htm\";\nimport { LoadingSpinner } from \"../loading-spinner.js\";\nimport { ConfirmDialog } from \"../confirm-dialog.js\";\nimport { SqliteViewer } from \"./sqlite-viewer.js\";\nimport { FileViewerToolbar } from \"./toolbar.js\";\nimport { FileViewerStatusBanners } from \"./status-banners.js\";\nimport { FrontmatterPanel } from \"./frontmatter-panel.js\";\nimport { DiffViewer } from \"./diff-viewer.js\";\nimport { MediaPreview } from \"./media-preview.js\";\nimport { EditorSurface } from \"./editor-surface.js\";\nimport { MarkdownSplitView } from \"./markdown-split-view.js\";\nimport { kSqlitePageSize } from \"./constants.js\";\nimport { useFileViewer } from \"./use-file-viewer.js\";\n\nconst html = htm.bind(h);\n\nexport const FileViewer = ({\n filePath = \"\",\n isPreviewOnly = false,\n browseView = \"edit\",\n lineTarget = 0,\n lineEndTarget = 0,\n onRequestEdit = () => {},\n onRequestClearSelection = () => {},\n}) => {\n const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);\n const { state, derived, refs, actions, context } = useFileViewer({\n filePath,\n isPreviewOnly,\n browseView,\n lineTarget,\n lineEndTarget,\n onRequestClearSelection,\n onRequestEdit,\n });\n\n if (!state.hasSelectedPath || state.isFolderPath) {\n return html`\n
    \n
    [ ]
    \n
    Browse and edit files
    Syncs to git
    \n
    \n `;\n }\n\n return html`\n
    \n <${FileViewerToolbar}\n pathSegments=${derived.pathSegments}\n isDirty=${derived.isDirty}\n isPreviewOnly=${state.isPreviewOnly}\n isDiffView=${state.isDiffView}\n isMarkdownFile=${state.isMarkdownFile}\n viewMode=${state.viewMode}\n handleChangeViewMode=${actions.handleChangeViewMode}\n handleSave=${actions.handleSave}\n handleDiscard=${actions.handleDiscard}\n loading=${state.loading}\n canEditFile=${derived.canEditFile}\n isEditBlocked=${derived.isEditBlocked}\n isImageFile=${state.isImageFile}\n isAudioFile=${state.isAudioFile}\n isSqliteFile=${state.isSqliteFile}\n saving=${state.saving}\n deleting=${state.deleting}\n restoring=${state.restoring}\n canDeleteFile=${derived.canDeleteFile}\n isDeleteBlocked=${derived.isDeleteBlocked}\n isProtectedFile=${derived.isProtectedFile}\n canRestoreDeletedDiff=${state.isDiffView && !!state.diffStatus?.isDeleted}\n onRequestDelete=${() => setDeleteConfirmOpen(true)}\n onRequestRestore=${actions.handleRestore}\n />\n <${FileViewerStatusBanners}\n isDiffView=${state.isDiffView}\n onRequestEdit=${onRequestEdit}\n normalizedPath=${context.normalizedPath}\n isDeletedDiff=${!!state.diffStatus?.isDeleted}\n isLockedFile=${derived.isLockedFile}\n isProtectedFile=${derived.isProtectedFile}\n isProtectedLocked=${derived.isProtectedLocked}\n handleEditProtectedFile=${actions.handleEditProtectedFile}\n />\n ${!state.isDiffView\n ? html`\n <${FrontmatterPanel}\n isMarkdownFile=${state.isMarkdownFile}\n parsedFrontmatter=${derived.parsedFrontmatter}\n frontmatterCollapsed=${state.frontmatterCollapsed}\n setFrontmatterCollapsed=${actions.setFrontmatterCollapsed}\n />\n `\n : null}\n ${state.loading\n ? html`\n
    \n ${state.showDelayedLoadingSpinner\n ? html`<${LoadingSpinner} className=\"h-4 w-4\" />`\n : null}\n
    \n `\n : state.error\n ? html`
    ${state.error}
    `\n : state.isImageFile || state.isAudioFile\n ? html`\n <${MediaPreview}\n isImageFile=${state.isImageFile}\n imageDataUrl=${state.imageDataUrl}\n pathSegments=${derived.pathSegments}\n isAudioFile=${state.isAudioFile}\n audioDataUrl=${state.audioDataUrl}\n />\n `\n : state.isSqliteFile\n ? html`\n <${SqliteViewer}\n sqliteSummary=${state.sqliteSummary}\n sqliteSelectedTable=${state.sqliteSelectedTable}\n setSqliteSelectedTable=${actions.setSqliteSelectedTable}\n sqliteTableOffset=${state.sqliteTableOffset}\n setSqliteTableOffset=${actions.setSqliteTableOffset}\n sqliteTableLoading=${state.sqliteTableLoading}\n sqliteTableError=${state.sqliteTableError}\n sqliteTableData=${state.sqliteTableData}\n kSqlitePageSize=${kSqlitePageSize}\n />\n `\n : state.isDiffView\n ? html`\n <${DiffViewer}\n diffLoading=${state.diffLoading}\n diffError=${state.diffError}\n diffContent=${state.diffContent}\n />\n `\n : html`\n ${state.isMarkdownFile\n ? html`\n <${MarkdownSplitView}\n viewMode=${state.viewMode}\n previewRef=${refs.previewRef}\n handlePreviewScroll=${actions.handlePreviewScroll}\n previewHtml=${state.previewHtml}\n editorLineNumbers=${derived.editorLineNumbers}\n editorLineNumbersRef=${refs.editorLineNumbersRef}\n editorLineNumberRowRefs=${refs.editorLineNumberRowRefs}\n shouldUseHighlightedEditor=${derived.shouldUseHighlightedEditor}\n highlightedEditorLines=${derived.highlightedEditorLines}\n editorHighlightRef=${refs.editorHighlightRef}\n editorHighlightLineRefs=${refs.editorHighlightLineRefs}\n editorTextareaRef=${refs.editorTextareaRef}\n renderContent=${state.renderContent}\n handleContentInput=${actions.handleContentInput}\n handleEditorKeyDown=${actions.handleEditorKeyDown}\n handleEditorScroll=${actions.handleEditorScroll}\n handleEditorSelectionChange=${actions.handleEditorSelectionChange}\n isEditBlocked=${derived.isEditBlocked}\n isPreviewOnly=${state.isPreviewOnly}\n />\n `\n : html`\n <${EditorSurface}\n editorLineNumbers=${derived.editorLineNumbers}\n editorLineNumbersRef=${refs.editorLineNumbersRef}\n editorLineNumberRowRefs=${refs.editorLineNumberRowRefs}\n shouldUseHighlightedEditor=${derived.shouldUseHighlightedEditor}\n highlightedEditorLines=${derived.highlightedEditorLines}\n editorHighlightRef=${refs.editorHighlightRef}\n editorHighlightLineRefs=${refs.editorHighlightLineRefs}\n editorTextareaRef=${refs.editorTextareaRef}\n renderContent=${state.renderContent}\n handleContentInput=${actions.handleContentInput}\n handleEditorKeyDown=${actions.handleEditorKeyDown}\n handleEditorScroll=${actions.handleEditorScroll}\n handleEditorSelectionChange=${actions.handleEditorSelectionChange}\n isEditBlocked=${derived.isEditBlocked}\n isPreviewOnly=${state.isPreviewOnly}\n />\n `}\n `}\n <${ConfirmDialog}\n visible=${deleteConfirmOpen}\n title=\"Delete file?\"\n message=${`Delete ${context.normalizedPath || \"this file\"}? This can be restored from diff view before sync.`}\n confirmLabel=\"Delete\"\n confirmLoadingLabel=\"Deleting...\"\n cancelLabel=\"Cancel\"\n confirmTone=\"warning\"\n confirmLoading=${state.deleting}\n confirmDisabled=${!derived.canDeleteFile || state.deleting}\n onCancel=${() => {\n if (state.deleting) return;\n setDeleteConfirmOpen(false);\n }}\n onConfirm=${async () => {\n await actions.handleDelete();\n setDeleteConfirmOpen(false);\n }}\n />\n
    \n `;\n};\n" }, { "path": "lib/public/js/components/file-viewer/markdown-split-view.js", "content": "import { h } from \"preact\";\nimport htm from \"htm\";\nimport { EditorSurface } from \"./editor-surface.js\";\n\nconst html = htm.bind(h);\n\nexport const MarkdownSplitView = ({\n viewMode,\n previewRef,\n handlePreviewScroll,\n previewHtml,\n editorLineNumbers,\n editorLineNumbersRef,\n editorLineNumberRowRefs,\n shouldUseHighlightedEditor,\n highlightedEditorLines,\n editorHighlightRef,\n editorHighlightLineRefs,\n editorTextareaRef,\n renderContent,\n handleContentInput,\n handleEditorKeyDown,\n handleEditorScroll,\n handleEditorSelectionChange,\n isEditBlocked,\n isPreviewOnly,\n}) => html`\n \n <${EditorSurface}\n editorShellClassName=${`file-viewer-editor-shell ${viewMode === \"edit\" ? \"\" : \"file-viewer-pane-hidden\"}`}\n editorShellAriaHidden=${viewMode === \"edit\" ? \"false\" : \"true\"}\n editorLineNumbers=${editorLineNumbers}\n editorLineNumbersRef=${editorLineNumbersRef}\n editorLineNumberRowRefs=${editorLineNumberRowRefs}\n shouldUseHighlightedEditor=${shouldUseHighlightedEditor}\n highlightedEditorLines=${highlightedEditorLines}\n editorHighlightRef=${editorHighlightRef}\n editorHighlightLineRefs=${editorHighlightLineRefs}\n editorTextareaRef=${editorTextareaRef}\n renderContent=${renderContent}\n handleContentInput=${handleContentInput}\n handleEditorKeyDown=${handleEditorKeyDown}\n handleEditorScroll=${handleEditorScroll}\n handleEditorSelectionChange=${handleEditorSelectionChange}\n isEditBlocked=${isEditBlocked}\n isPreviewOnly=${isPreviewOnly}\n />\n`;\n" }, { "path": "lib/public/js/components/file-viewer/media-preview.js", "content": "import { h } from \"preact\";\nimport htm from \"htm\";\n\nconst html = htm.bind(h);\n\nexport const MediaPreview = ({\n isImageFile,\n imageDataUrl,\n pathSegments,\n isAudioFile,\n audioDataUrl,\n}) => {\n if (isImageFile) {\n return html`\n
    \n ${imageDataUrl\n ? html`\n \n `\n : html`
    Could not render image preview.
    `}\n
    \n `;\n }\n\n if (isAudioFile) {\n return html`\n
    \n ${audioDataUrl\n ? html`\n \n `\n : html`
    Could not render audio preview.
    `}\n
    \n `;\n }\n\n return null;\n};\n" }, { "path": "lib/public/js/components/file-viewer/scroll-sync.js", "content": "import { useRef } from \"preact/hooks\";\n\nexport const getScrollRatio = (element) => {\n if (!element) return 0;\n const maxScrollTop = element.scrollHeight - element.clientHeight;\n if (maxScrollTop <= 0) return 0;\n return element.scrollTop / maxScrollTop;\n};\n\nexport const setScrollByRatio = (element, ratio) => {\n if (!element) return;\n const maxScrollTop = element.scrollHeight - element.clientHeight;\n if (maxScrollTop <= 0) {\n element.scrollTop = 0;\n return;\n }\n const clampedRatio = Math.max(0, Math.min(1, ratio));\n element.scrollTop = maxScrollTop * clampedRatio;\n};\n\nexport const useScrollSync = ({\n viewMode,\n setViewMode,\n previewRef,\n editorTextareaRef,\n editorLineNumbersRef,\n editorHighlightRef,\n}) => {\n const viewScrollRatioRef = useRef(0);\n const isSyncingScrollRef = useRef(false);\n\n const handleEditorScroll = (event) => {\n if (isSyncingScrollRef.current) return;\n const nextScrollTop = event.currentTarget.scrollTop;\n const nextRatio = getScrollRatio(event.currentTarget);\n viewScrollRatioRef.current = nextRatio;\n if (!editorLineNumbersRef.current) return;\n editorLineNumbersRef.current.scrollTop = nextScrollTop;\n if (editorHighlightRef.current) {\n editorHighlightRef.current.scrollTop = nextScrollTop;\n editorHighlightRef.current.scrollLeft = event.currentTarget.scrollLeft;\n }\n if (previewRef.current) {\n isSyncingScrollRef.current = true;\n setScrollByRatio(previewRef.current, nextRatio);\n window.requestAnimationFrame(() => {\n isSyncingScrollRef.current = false;\n });\n }\n };\n\n const handlePreviewScroll = (event) => {\n if (isSyncingScrollRef.current) return;\n const nextRatio = getScrollRatio(event.currentTarget);\n viewScrollRatioRef.current = nextRatio;\n isSyncingScrollRef.current = true;\n setScrollByRatio(editorTextareaRef.current, nextRatio);\n setScrollByRatio(editorLineNumbersRef.current, nextRatio);\n setScrollByRatio(editorHighlightRef.current, nextRatio);\n window.requestAnimationFrame(() => {\n isSyncingScrollRef.current = false;\n });\n };\n\n const handleChangeViewMode = (nextMode) => {\n if (nextMode === viewMode) return;\n const nextRatio =\n viewMode === \"preview\"\n ? getScrollRatio(previewRef.current)\n : getScrollRatio(editorTextareaRef.current);\n viewScrollRatioRef.current = nextRatio;\n setViewMode(nextMode);\n window.requestAnimationFrame(() => {\n isSyncingScrollRef.current = true;\n if (nextMode === \"preview\") {\n setScrollByRatio(previewRef.current, nextRatio);\n } else {\n setScrollByRatio(editorTextareaRef.current, nextRatio);\n setScrollByRatio(editorLineNumbersRef.current, nextRatio);\n setScrollByRatio(editorHighlightRef.current, nextRatio);\n }\n window.requestAnimationFrame(() => {\n isSyncingScrollRef.current = false;\n });\n });\n };\n\n return {\n viewScrollRatioRef,\n isSyncingScrollRef,\n handleEditorScroll,\n handlePreviewScroll,\n handleChangeViewMode,\n };\n};\n" }, { "path": "lib/public/js/components/file-viewer/sqlite-viewer.js", "content": "import { h } from \"preact\";\nimport htm from \"htm\";\nimport { LoadingSpinner } from \"../loading-spinner.js\";\n\nconst html = htm.bind(h);\n\nexport const SqliteViewer = ({\n sqliteSummary,\n sqliteSelectedTable,\n setSqliteSelectedTable,\n sqliteTableOffset,\n setSqliteTableOffset,\n sqliteTableLoading,\n sqliteTableError,\n sqliteTableData,\n kSqlitePageSize,\n}) => {\n const sqliteRows = Array.isArray(sqliteTableData?.rows) ? sqliteTableData.rows : [];\n const sqliteColumns =\n Array.isArray(sqliteTableData?.columns) && sqliteTableData.columns.length\n ? sqliteTableData.columns\n : (sqliteSummary?.objects || []).find(\n (entry) => entry?.name === sqliteSelectedTable,\n )?.columns || [];\n const sqliteTotalRows = Number(sqliteTableData?.totalRows || 0);\n const sqliteCanGoPrev = sqliteTableOffset > 0;\n const sqliteCanGoNext = sqliteTableOffset + kSqlitePageSize < sqliteTotalRows;\n\n return html`\n
    \n ${sqliteSummary?.objects?.length\n ? html`\n
    \n
    \n ${sqliteSummary.objects.map(\n (entry) => html`\n {\n if (!entry?.name || sqliteSelectedTable === entry.name) return;\n setSqliteSelectedTable(entry.name);\n setSqliteTableOffset(0);\n }}\n >\n
    \n ${entry.name}\n ${entry.type}\n
    \n \n `,\n )}\n
    \n
    \n ${sqliteSelectedTable\n ? html`\n
    \n \n ${sqliteSelectedTable}\n \n
    \n \n setSqliteTableOffset((previousOffset) =>\n Math.max(0, previousOffset - kSqlitePageSize),\n )}\n >\n Prev\n \n \n setSqliteTableOffset(\n (previousOffset) => previousOffset + kSqlitePageSize,\n )}\n >\n Next\n \n
    \n
    \n
    \n ${sqliteTotalRows\n ? `${Math.min(sqliteTableOffset + 1, sqliteTotalRows)}-${Math.min(sqliteTableOffset + kSqlitePageSize, sqliteTotalRows)} of ${sqliteTotalRows} rows`\n : \"No rows\"}\n
    \n ${sqliteTableLoading\n ? html`\n
    \n <${LoadingSpinner} className=\"h-4 w-4\" />\n
    \n `\n : sqliteTableError\n ? html`\n
    \n ${sqliteTableError}\n
    \n `\n : html`\n
    \n \n \n \n ${sqliteColumns.map(\n (column) => html``,\n )}\n \n \n \n ${sqliteRows.length\n ? sqliteRows.map(\n (row, rowIndex) => html`\n \n ${sqliteColumns.map((column) => {\n const cellValue = row?.[column.name];\n const displayValue =\n cellValue === null\n ? \"NULL\"\n : typeof cellValue === \"object\"\n ? JSON.stringify(cellValue)\n : String(cellValue ?? \"\");\n return html`\n \n `;\n })}\n \n `,\n )\n : html`\n \n \n \n `}\n \n
    ${column.name}
    \n ${displayValue}\n
    \n \n No rows\n \n
    \n
    \n `}\n `\n : html`\n
    Select a table to view rows.
    \n `}\n
    \n
    \n
    \n ${sqliteSummary.truncated\n ? `Showing ${sqliteSummary.objects.length} of ${sqliteSummary.totalObjects} tables/views`\n : `${sqliteSummary.totalObjects} tables/views`}\n
    \n `\n : html`\n
    \n SQLite database loaded, but no tables/views were found.\n
    \n `}\n
    \n `;\n};\n" }, { "path": "lib/public/js/components/file-viewer/status-banners.js", "content": "import { h } from \"preact\";\nimport htm from \"htm\";\nimport { ActionButton } from \"../action-button.js\";\nimport { LockLineIcon } from \"../icons.js\";\n\nconst html = htm.bind(h);\n\nexport const FileViewerStatusBanners = ({\n isDiffView,\n onRequestEdit,\n normalizedPath,\n isDeletedDiff = false,\n isLockedFile,\n isProtectedFile,\n isProtectedLocked,\n handleEditProtectedFile,\n}) => html`\n ${isDiffView\n ? html`\n
    \n
    Viewing unsynced changes
    \n ${!isDeletedDiff\n ? html`\n <${ActionButton}\n onClick=${() => onRequestEdit(normalizedPath)}\n tone=\"secondary\"\n size=\"sm\"\n idleLabel=\"View file\"\n />\n `\n : null}\n
    \n `\n : null}\n ${!isDiffView && isLockedFile\n ? html`\n
    \n <${LockLineIcon} className=\"file-viewer-protected-banner-icon\" />\n
    \n This file is managed by AlphaClaw and cannot be edited.\n
    \n
    \n `\n : null}\n ${!isDiffView && isProtectedFile\n ? html`\n
    \n
    \n Protected file. Changes may break workspace behavior.\n
    \n ${isProtectedLocked\n ? html`\n <${ActionButton}\n onClick=${handleEditProtectedFile}\n tone=\"warning\"\n size=\"sm\"\n idleLabel=\"Edit anyway\"\n />\n `\n : null}\n
    \n `\n : null}\n`;\n" }, { "path": "lib/public/js/components/file-viewer/storage.js", "content": "import {\n kEditorSelectionStorageKey,\n kFileViewerModeStorageKey,\n} from \"./constants.js\";\n\nexport const readStoredFileViewerMode = () => {\n try {\n const storedMode = String(\n window.localStorage.getItem(kFileViewerModeStorageKey) || \"\",\n ).trim();\n return storedMode === \"preview\" ? \"preview\" : \"edit\";\n } catch {\n return \"edit\";\n }\n};\n\nexport const readEditorSelectionStorageMap = () => {\n try {\n const rawStorageValue = window.localStorage.getItem(kEditorSelectionStorageKey);\n if (!rawStorageValue) return {};\n const parsedStorageValue = JSON.parse(rawStorageValue);\n if (!parsedStorageValue || typeof parsedStorageValue !== \"object\") return {};\n return parsedStorageValue;\n } catch {\n return {};\n }\n};\n\nexport const readStoredEditorSelection = (filePath) => {\n const safePath = String(filePath || \"\").trim();\n if (!safePath) return null;\n const storageMap = readEditorSelectionStorageMap();\n const selection = storageMap[safePath];\n if (!selection || typeof selection !== \"object\") return null;\n return {\n start: selection.start,\n end: selection.end,\n };\n};\n\nexport const writeStoredEditorSelection = (filePath, selection) => {\n const safePath = String(filePath || \"\").trim();\n if (!safePath || !selection || typeof selection !== \"object\") return;\n try {\n const nextStorageValue = readEditorSelectionStorageMap();\n nextStorageValue[safePath] = {\n start: selection.start,\n end: selection.end,\n };\n window.localStorage.setItem(\n kEditorSelectionStorageKey,\n JSON.stringify(nextStorageValue),\n );\n } catch {}\n};\n" }, { "path": "lib/public/js/components/file-viewer/toolbar.js", "content": "import { h } from \"preact\";\nimport htm from \"htm\";\nimport { ActionButton } from \"../action-button.js\";\nimport { SegmentedControl } from \"../segmented-control.js\";\nimport { DeleteBinLineIcon, RestartLineIcon, SaveFillIcon } from \"../icons.js\";\n\nconst html = htm.bind(h);\n\nexport const FileViewerToolbar = ({\n pathSegments,\n isDirty,\n isPreviewOnly,\n isDiffView,\n isMarkdownFile,\n viewMode,\n handleChangeViewMode,\n handleSave,\n handleDiscard,\n loading,\n canEditFile,\n isEditBlocked,\n isImageFile,\n isAudioFile,\n isSqliteFile,\n saving,\n deleting,\n restoring,\n canDeleteFile,\n isDeleteBlocked,\n isProtectedFile,\n canRestoreDeletedDiff,\n onRequestDelete,\n onRequestRestore,\n}) => html`\n
    \n
    \n f\n \n ${pathSegments.map(\n (segment, index) => html`\n \n \n ${segment}\n \n ${index < pathSegments.length - 1 &&\n html`>`}\n \n `,\n )}\n \n ${isDirty\n ? html``\n : null}\n
    \n
    \n ${isPreviewOnly\n ? html`
    Preview
    `\n : null}\n ${!isDiffView &&\n isMarkdownFile &&\n html`\n <${SegmentedControl}\n className=\"mr-2.5\"\n options=${[\n { label: \"edit\", value: \"edit\" },\n { label: \"preview\", value: \"preview\" },\n ]}\n value=${viewMode}\n onChange=${handleChangeViewMode}\n />\n `}\n ${!isDiffView\n ? !isImageFile && !isAudioFile && !isSqliteFile\n ? html`\n ${!isProtectedFile\n ? html`\n <${ActionButton}\n onClick=${onRequestDelete}\n disabled=${!canDeleteFile || deleting}\n tone=\"secondary\"\n size=\"sm\"\n iconOnly=${true}\n idleLabel=\"\"\n idleIcon=${DeleteBinLineIcon}\n idleIconClassName=\"file-viewer-icon-action-icon\"\n className=\"file-viewer-save-action\"\n title=${isDeleteBlocked\n ? \"Locked files cannot be deleted\"\n : \"Delete file\"}\n ariaLabel=\"Delete file\"\n />\n `\n : null}\n ${isDirty\n ? html`\n <${ActionButton}\n onClick=${handleDiscard}\n disabled=${loading ||\n !canEditFile ||\n isEditBlocked ||\n deleting ||\n saving}\n tone=\"secondary\"\n size=\"sm\"\n idleLabel=\"Discard changes\"\n className=\"file-viewer-save-action\"\n />\n `\n : null}\n <${ActionButton}\n onClick=${handleSave}\n disabled=${loading || !isDirty || !canEditFile || isEditBlocked}\n loading=${saving}\n tone=${isDirty ? \"primary\" : \"secondary\"}\n size=\"sm\"\n idleLabel=\"Save\"\n loadingLabel=\"Saving...\"\n idleIcon=${SaveFillIcon}\n idleIconClassName=\"file-viewer-save-icon\"\n className=\"file-viewer-save-action\"\n />\n `\n : null\n : null}\n ${isDiffView && canRestoreDeletedDiff\n ? html`\n <${ActionButton}\n onClick=${onRequestRestore}\n disabled=${restoring}\n loading=${restoring}\n tone=\"secondary\"\n size=\"sm\"\n idleLabel=\"Restore\"\n loadingLabel=\"Restoring...\"\n idleIcon=${RestartLineIcon}\n idleIconClassName=\"file-viewer-save-icon\"\n className=\"file-viewer-save-action\"\n />\n `\n : null}\n
    \n`;\n" }, { "path": "lib/public/js/components/file-viewer/use-editor-line-number-sync.js", "content": "import { useCallback, useEffect } from \"preact/hooks\";\n\nexport const useEditorLineNumberSync = ({\n enabled = false,\n syncKey = \"\",\n editorLineNumberRowRefs,\n editorHighlightLineRefs,\n}) => {\n const syncEditorLineNumberHeights = useCallback(() => {\n if (!enabled) return;\n const numberRows = editorLineNumberRowRefs?.current || [];\n const highlightRows = editorHighlightLineRefs?.current || [];\n const rowCount = Math.min(numberRows.length, highlightRows.length);\n for (let index = 0; index < rowCount; index += 1) {\n const numberRow = numberRows[index];\n const highlightRow = highlightRows[index];\n if (!numberRow || !highlightRow) continue;\n numberRow.style.height = `${highlightRow.offsetHeight}px`;\n }\n }, [editorHighlightLineRefs, editorLineNumberRowRefs, enabled]);\n\n useEffect(() => {\n syncEditorLineNumberHeights();\n }, [syncEditorLineNumberHeights, syncKey]);\n\n useEffect(() => {\n if (!enabled) return () => {};\n const onResize = () => syncEditorLineNumberHeights();\n window.addEventListener(\"resize\", onResize);\n return () => window.removeEventListener(\"resize\", onResize);\n }, [enabled, syncEditorLineNumberHeights]);\n\n return {\n syncEditorLineNumberHeights,\n };\n};\n" }, { "path": "lib/public/js/components/file-viewer/use-editor-selection-restore.js", "content": "import { useEffect, useRef } from \"preact/hooks\";\nimport { readStoredEditorSelection } from \"./storage.js\";\nimport { clampSelectionIndex } from \"./utils.js\";\nimport { getScrollRatio } from \"./scroll-sync.js\";\n\nconst getCharOffsetForLine = (text, lineNumber) => {\n const lines = String(text || \"\").split(\"\\n\");\n const targetIndex = Math.max(0, Math.min(lineNumber - 1, lines.length - 1));\n let offset = 0;\n for (let i = 0; i < targetIndex; i += 1) offset += lines[i].length + 1;\n return offset;\n};\n\nconst scrollEditorToLine = ({\n lineIndex,\n textareaElement,\n editorLineNumbersRef,\n editorHighlightRef,\n viewScrollRatioRef,\n}) => {\n const computedStyle = window.getComputedStyle(textareaElement);\n const parsedLineHeight = Number.parseFloat(computedStyle.lineHeight || \"\");\n const lineHeight =\n Number.isFinite(parsedLineHeight) && parsedLineHeight > 0 ? parsedLineHeight : 20;\n const nextScrollTop = Math.max(\n 0,\n lineIndex * lineHeight - textareaElement.clientHeight * 0.4,\n );\n textareaElement.scrollTop = nextScrollTop;\n if (editorLineNumbersRef.current) {\n editorLineNumbersRef.current.scrollTop = nextScrollTop;\n }\n if (editorHighlightRef.current) {\n editorHighlightRef.current.scrollTop = nextScrollTop;\n }\n viewScrollRatioRef.current = getScrollRatio(textareaElement);\n};\n\nconst clearLineHighlights = (lineNumbersContainer) => {\n if (!lineNumbersContainer) return;\n const highlighted = lineNumbersContainer.querySelectorAll(\".line-highlight-flash\");\n for (const row of highlighted) row.classList.remove(\"line-highlight-flash\");\n};\n\nconst highlightLineRange = (lineNumbersContainer, startIndex, endIndex) => {\n if (!lineNumbersContainer) return;\n clearLineHighlights(lineNumbersContainer);\n const rows = lineNumbersContainer.querySelectorAll(\"[data-line-row]\");\n const safeEnd = Math.min(endIndex, rows.length - 1);\n for (let i = startIndex; i <= safeEnd; i += 1) {\n const row = rows[i];\n if (row) row.classList.add(\"line-highlight-flash\");\n }\n};\n\nexport const useEditorSelectionRestore = ({\n canEditFile,\n isEditBlocked,\n loading,\n hasSelectedPath,\n normalizedPath,\n loadedFilePathRef,\n restoredSelectionPathRef,\n viewMode,\n content,\n lineTarget = 0,\n lineEndTarget = 0,\n editorTextareaRef,\n editorLineNumbersRef,\n editorHighlightRef,\n viewScrollRatioRef,\n}) => {\n const appliedLineTargetRef = useRef(\"\");\n\n useEffect(() => {\n if (lineTarget && lineTarget >= 1) return;\n if (!appliedLineTargetRef.current) return;\n clearLineHighlights(editorLineNumbersRef.current);\n appliedLineTargetRef.current = \"\";\n }, [lineTarget, normalizedPath, editorLineNumbersRef]);\n\n useEffect(() => {\n if (isEditBlocked || !canEditFile || loading || !hasSelectedPath) return () => {};\n if (loadedFilePathRef.current !== normalizedPath) return () => {};\n if (viewMode !== \"edit\") return () => {};\n if (!lineTarget || lineTarget < 1) return () => {};\n const effectiveEnd = lineEndTarget && lineEndTarget >= lineTarget ? lineEndTarget : lineTarget;\n const lineKey = `${normalizedPath}:${lineTarget}-${effectiveEnd}`;\n if (appliedLineTargetRef.current === lineKey) return () => {};\n let frameId = 0;\n let attempts = 0;\n const applyLineTarget = () => {\n const textareaElement = editorTextareaRef.current;\n if (!textareaElement) {\n attempts += 1;\n if (attempts < 6) frameId = window.requestAnimationFrame(applyLineTarget);\n return;\n }\n const safeContent = String(content || \"\");\n const charOffset = getCharOffsetForLine(safeContent, lineTarget);\n textareaElement.setSelectionRange(charOffset, charOffset);\n const startIndex = lineTarget - 1;\n const endIndex = effectiveEnd - 1;\n window.requestAnimationFrame(() => {\n const nextTextareaElement = editorTextareaRef.current;\n if (!nextTextareaElement) return;\n scrollEditorToLine({\n lineIndex: startIndex,\n textareaElement: nextTextareaElement,\n editorLineNumbersRef,\n editorHighlightRef,\n viewScrollRatioRef,\n });\n highlightLineRange(editorLineNumbersRef.current, startIndex, endIndex);\n });\n appliedLineTargetRef.current = lineKey;\n restoredSelectionPathRef.current = normalizedPath;\n };\n frameId = window.requestAnimationFrame(applyLineTarget);\n return () => {\n if (frameId) window.cancelAnimationFrame(frameId);\n };\n }, [\n canEditFile,\n isEditBlocked,\n loading,\n hasSelectedPath,\n normalizedPath,\n content,\n viewMode,\n lineTarget,\n lineEndTarget,\n loadedFilePathRef,\n restoredSelectionPathRef,\n editorTextareaRef,\n editorLineNumbersRef,\n editorHighlightRef,\n viewScrollRatioRef,\n ]);\n\n useEffect(() => {\n if (isEditBlocked) {\n restoredSelectionPathRef.current = \"\";\n return () => {};\n }\n if (!canEditFile || loading || !hasSelectedPath) return () => {};\n if (loadedFilePathRef.current !== normalizedPath) return () => {};\n if (restoredSelectionPathRef.current === normalizedPath) return () => {};\n if (viewMode !== \"edit\") return () => {};\n if (lineTarget && lineTarget >= 1) return () => {};\n const storedSelection = readStoredEditorSelection(normalizedPath);\n if (!storedSelection) {\n restoredSelectionPathRef.current = normalizedPath;\n return () => {};\n }\n let frameId = 0;\n let attempts = 0;\n const restoreSelection = () => {\n const textareaElement = editorTextareaRef.current;\n if (!textareaElement) {\n attempts += 1;\n if (attempts < 6) frameId = window.requestAnimationFrame(restoreSelection);\n return;\n }\n const maxIndex = String(content || \"\").length;\n const start = clampSelectionIndex(storedSelection.start, maxIndex);\n const end = clampSelectionIndex(storedSelection.end, maxIndex);\n textareaElement.focus();\n textareaElement.setSelectionRange(start, Math.max(start, end));\n window.requestAnimationFrame(() => {\n const nextTextareaElement = editorTextareaRef.current;\n if (!nextTextareaElement) return;\n const safeContent = String(content || \"\");\n const safeStart = clampSelectionIndex(start, safeContent.length);\n const lineIndex = safeContent.slice(0, safeStart).split(\"\\n\").length - 1;\n scrollEditorToLine({\n lineIndex,\n textareaElement: nextTextareaElement,\n editorLineNumbersRef,\n editorHighlightRef,\n viewScrollRatioRef,\n });\n });\n restoredSelectionPathRef.current = normalizedPath;\n };\n frameId = window.requestAnimationFrame(restoreSelection);\n return () => {\n if (frameId) window.cancelAnimationFrame(frameId);\n };\n }, [\n canEditFile,\n isEditBlocked,\n loading,\n hasSelectedPath,\n normalizedPath,\n content,\n viewMode,\n lineTarget,\n loadedFilePathRef,\n restoredSelectionPathRef,\n editorTextareaRef,\n editorLineNumbersRef,\n editorHighlightRef,\n viewScrollRatioRef,\n ]);\n};\n" }, { "path": "lib/public/js/components/file-viewer/use-file-diff.js", "content": "import { useEffect, useState } from \"preact/hooks\";\nimport { fetchBrowseFileDiff } from \"../../lib/api.js\";\n\nexport const useFileDiff = ({\n hasSelectedPath,\n isDiffView,\n isPreviewOnly,\n normalizedPath,\n}) => {\n const [diffLoading, setDiffLoading] = useState(false);\n const [diffError, setDiffError] = useState(\"\");\n const [diffContent, setDiffContent] = useState(\"\");\n const [diffStatus, setDiffStatus] = useState({\n statusKind: \"\",\n isDeleted: false,\n });\n\n useEffect(() => {\n let active = true;\n if (!hasSelectedPath || !isDiffView || isPreviewOnly) {\n setDiffLoading(false);\n setDiffError(\"\");\n setDiffContent(\"\");\n setDiffStatus({ statusKind: \"\", isDeleted: false });\n return () => {\n active = false;\n };\n }\n const loadDiff = async () => {\n setDiffLoading(true);\n setDiffError(\"\");\n try {\n const data = await fetchBrowseFileDiff(normalizedPath);\n if (!active) return;\n setDiffContent(String(data?.content || \"\"));\n setDiffStatus({\n statusKind: String(data?.statusKind || \"\"),\n isDeleted: !!data?.isDeleted,\n });\n } catch (nextError) {\n if (!active) return;\n setDiffError(nextError.message || \"Could not load diff\");\n setDiffStatus({ statusKind: \"\", isDeleted: false });\n } finally {\n if (active) setDiffLoading(false);\n }\n };\n loadDiff();\n return () => {\n active = false;\n };\n }, [hasSelectedPath, isDiffView, isPreviewOnly, normalizedPath]);\n\n return {\n diffLoading,\n diffError,\n diffContent,\n diffStatus,\n };\n};\n" }, { "path": "lib/public/js/components/file-viewer/use-file-loader.js", "content": "import { useEffect, useRef } from \"preact/hooks\";\nimport { fetchBrowseSqliteTable, fetchFileContent } from \"../../lib/api.js\";\nimport {\n clearStoredFileDraft,\n readStoredFileDraft,\n updateDraftIndex,\n} from \"../../lib/browse-draft-state.js\";\nimport { showToast } from \"../toast.js\";\nimport { kFileRefreshIntervalMs, kSqlitePageSize } from \"./constants.js\";\n\nexport const useFileLoader = ({\n hasSelectedPath,\n normalizedPath,\n isDiffView,\n isSqliteFile,\n sqliteSelectedTable,\n sqliteTableOffset,\n canEditFile,\n isFolderPath,\n loading,\n saving,\n initialContent,\n isDirty,\n setContent,\n setInitialContent,\n setFileKind,\n setImageDataUrl,\n setAudioDataUrl,\n setSqliteSummary,\n setSqliteSelectedTable,\n setSqliteTableOffset,\n setSqliteTableLoading,\n setSqliteTableError,\n setSqliteTableData,\n setError,\n setIsFolderPath,\n setExternalChangeNoticeShown,\n externalChangeNoticeShown,\n viewScrollRatioRef,\n setLoading,\n}) => {\n const loadedFilePathRef = useRef(\"\");\n const restoredSelectionPathRef = useRef(\"\");\n const fileRefreshInFlightRef = useRef(false);\n\n useEffect(() => {\n let active = true;\n loadedFilePathRef.current = \"\";\n restoredSelectionPathRef.current = \"\";\n if (!hasSelectedPath) {\n setContent(\"\");\n setInitialContent(\"\");\n setFileKind(\"text\");\n setImageDataUrl(\"\");\n setAudioDataUrl(\"\");\n setSqliteSummary(null);\n setSqliteSelectedTable(\"\");\n setSqliteTableOffset(0);\n setSqliteTableLoading(false);\n setSqliteTableError(\"\");\n setSqliteTableData(null);\n setError(\"\");\n setIsFolderPath(false);\n viewScrollRatioRef.current = 0;\n loadedFilePathRef.current = \"\";\n return () => {\n active = false;\n };\n }\n // Clear previous file state immediately so large content from the last\n // file is never rendered/parses under the next file's syntax mode.\n setContent(\"\");\n setInitialContent(\"\");\n setImageDataUrl(\"\");\n setAudioDataUrl(\"\");\n setSqliteSummary(null);\n setSqliteSelectedTable(\"\");\n setSqliteTableOffset(0);\n setSqliteTableLoading(false);\n setSqliteTableError(\"\");\n setSqliteTableData(null);\n setFileKind(\"text\");\n setError(\"\");\n setIsFolderPath(false);\n setExternalChangeNoticeShown(false);\n viewScrollRatioRef.current = 0;\n if (isDiffView) {\n setLoading(false);\n loadedFilePathRef.current = normalizedPath;\n restoredSelectionPathRef.current = \"\";\n return () => {\n active = false;\n };\n }\n\n const loadFile = async () => {\n setLoading(true);\n setError(\"\");\n setIsFolderPath(false);\n try {\n const data = await fetchFileContent(normalizedPath);\n if (!active) return;\n const nextFileKind =\n data?.kind === \"image\"\n ? \"image\"\n : data?.kind === \"audio\"\n ? \"audio\"\n : data?.kind === \"sqlite\"\n ? \"sqlite\"\n : \"text\";\n setFileKind(nextFileKind);\n if (nextFileKind === \"image\") {\n setImageDataUrl(String(data?.imageDataUrl || \"\"));\n setAudioDataUrl(\"\");\n setSqliteSummary(null);\n setSqliteSelectedTable(\"\");\n setSqliteTableOffset(0);\n setSqliteTableLoading(false);\n setSqliteTableError(\"\");\n setSqliteTableData(null);\n setContent(\"\");\n setInitialContent(\"\");\n setExternalChangeNoticeShown(false);\n viewScrollRatioRef.current = 0;\n loadedFilePathRef.current = normalizedPath;\n restoredSelectionPathRef.current = \"\";\n return;\n }\n if (nextFileKind === \"audio\") {\n setAudioDataUrl(String(data?.audioDataUrl || \"\"));\n setImageDataUrl(\"\");\n setSqliteSummary(null);\n setSqliteSelectedTable(\"\");\n setSqliteTableOffset(0);\n setSqliteTableLoading(false);\n setSqliteTableError(\"\");\n setSqliteTableData(null);\n setContent(\"\");\n setInitialContent(\"\");\n setExternalChangeNoticeShown(false);\n viewScrollRatioRef.current = 0;\n loadedFilePathRef.current = normalizedPath;\n restoredSelectionPathRef.current = \"\";\n return;\n }\n if (nextFileKind === \"sqlite\") {\n const nextSqliteSummary = data?.sqliteSummary || null;\n const nextObjects = nextSqliteSummary?.objects || [];\n const defaultTable =\n nextObjects.find((entry) => entry?.type === \"table\")?.name ||\n nextObjects[0]?.name ||\n \"\";\n setSqliteSummary(nextSqliteSummary);\n setSqliteSelectedTable(defaultTable);\n setSqliteTableOffset(0);\n setSqliteTableLoading(false);\n setSqliteTableError(\"\");\n setSqliteTableData(null);\n setImageDataUrl(\"\");\n setAudioDataUrl(\"\");\n setContent(\"\");\n setInitialContent(\"\");\n setExternalChangeNoticeShown(false);\n viewScrollRatioRef.current = 0;\n loadedFilePathRef.current = normalizedPath;\n restoredSelectionPathRef.current = \"\";\n return;\n }\n setImageDataUrl(\"\");\n setAudioDataUrl(\"\");\n setSqliteSummary(null);\n setSqliteSelectedTable(\"\");\n setSqliteTableOffset(0);\n setSqliteTableLoading(false);\n setSqliteTableError(\"\");\n setSqliteTableData(null);\n const nextContent = data.content || \"\";\n const draftContent = readStoredFileDraft(normalizedPath);\n setContent(draftContent || nextContent);\n updateDraftIndex(normalizedPath, Boolean(draftContent && draftContent !== nextContent), {\n dispatchEvent: (event) => window.dispatchEvent(event),\n });\n setInitialContent(nextContent);\n setExternalChangeNoticeShown(false);\n viewScrollRatioRef.current = 0;\n loadedFilePathRef.current = normalizedPath;\n restoredSelectionPathRef.current = \"\";\n } catch (loadError) {\n if (!active) return;\n setFileKind(\"text\");\n setImageDataUrl(\"\");\n setAudioDataUrl(\"\");\n setSqliteSummary(null);\n setSqliteSelectedTable(\"\");\n setSqliteTableOffset(0);\n setSqliteTableLoading(false);\n setSqliteTableError(\"\");\n setSqliteTableData(null);\n const message = loadError.message || \"Could not load file\";\n if (/path is not a file/i.test(message)) {\n setContent(\"\");\n setInitialContent(\"\");\n setIsFolderPath(true);\n setError(\"\");\n loadedFilePathRef.current = normalizedPath;\n restoredSelectionPathRef.current = \"\";\n return;\n }\n setError(message);\n } finally {\n if (active) setLoading(false);\n }\n };\n loadFile();\n return () => {\n active = false;\n };\n }, [hasSelectedPath, normalizedPath, isDiffView]);\n\n useEffect(() => {\n if (!isSqliteFile || !normalizedPath || !sqliteSelectedTable) {\n setSqliteTableData(null);\n setSqliteTableError(\"\");\n setSqliteTableLoading(false);\n return () => {};\n }\n let active = true;\n const loadSqliteTable = async () => {\n setSqliteTableLoading(true);\n setSqliteTableError(\"\");\n try {\n const tableData = await fetchBrowseSqliteTable({\n filePath: normalizedPath,\n table: sqliteSelectedTable,\n limit: kSqlitePageSize,\n offset: sqliteTableOffset,\n });\n if (!active) return;\n setSqliteTableData(tableData);\n } catch (nextError) {\n if (!active) return;\n setSqliteTableError(nextError.message || \"Could not load sqlite table\");\n } finally {\n if (active) setSqliteTableLoading(false);\n }\n };\n loadSqliteTable();\n return () => {\n active = false;\n };\n }, [isSqliteFile, normalizedPath, sqliteSelectedTable, sqliteTableOffset]);\n\n useEffect(() => {\n if (!hasSelectedPath || isFolderPath || !canEditFile || isDiffView) return () => {};\n const refreshFromDisk = async () => {\n if (loading || saving) return;\n if (fileRefreshInFlightRef.current) return;\n fileRefreshInFlightRef.current = true;\n try {\n const data = await fetchFileContent(normalizedPath);\n const diskContent = data.content || \"\";\n if (diskContent === initialContent) {\n setExternalChangeNoticeShown(false);\n return;\n }\n // Auto-refresh only when editor has no unsaved work.\n if (!isDirty) {\n setContent(diskContent);\n setInitialContent(diskContent);\n clearStoredFileDraft(normalizedPath);\n updateDraftIndex(normalizedPath, false, {\n dispatchEvent: (event) => window.dispatchEvent(event),\n });\n setExternalChangeNoticeShown(false);\n window.dispatchEvent(new CustomEvent(\"alphaclaw:browse-tree-refresh\"));\n return;\n }\n if (!externalChangeNoticeShown) {\n showToast(\n \"This file changed on disk. Save to overwrite or reload by re-opening.\",\n \"error\",\n );\n setExternalChangeNoticeShown(true);\n }\n } catch {\n // Ignore transient refresh errors to avoid interrupting editing.\n } finally {\n fileRefreshInFlightRef.current = false;\n }\n };\n const intervalId = window.setInterval(refreshFromDisk, kFileRefreshIntervalMs);\n return () => {\n window.clearInterval(intervalId);\n };\n }, [\n hasSelectedPath,\n isFolderPath,\n canEditFile,\n isDiffView,\n loading,\n saving,\n normalizedPath,\n initialContent,\n isDirty,\n externalChangeNoticeShown,\n ]);\n\n return {\n loadedFilePathRef,\n restoredSelectionPathRef,\n };\n};\n" }, { "path": "lib/public/js/components/file-viewer/use-file-viewer-draft-sync.js", "content": "import { useEffect } from \"preact/hooks\";\nimport {\n clearStoredFileDraft,\n updateDraftIndex,\n writeStoredFileDraft,\n} from \"../../lib/browse-draft-state.js\";\n\nexport const useFileViewerDraftSync = ({\n loadedFilePathRef,\n normalizedPath,\n canEditFile,\n hasSelectedPath,\n loading,\n content,\n initialContent,\n}) => {\n useEffect(() => {\n if (loadedFilePathRef.current !== normalizedPath) return;\n if (!canEditFile || !hasSelectedPath || loading) return;\n if (content === initialContent) {\n clearStoredFileDraft(normalizedPath);\n updateDraftIndex(normalizedPath, false, {\n dispatchEvent: (event) => window.dispatchEvent(event),\n });\n return;\n }\n writeStoredFileDraft(normalizedPath, content);\n updateDraftIndex(normalizedPath, true, {\n dispatchEvent: (event) => window.dispatchEvent(event),\n });\n }, [canEditFile, hasSelectedPath, loading, content, initialContent, normalizedPath]);\n};\n" }, { "path": "lib/public/js/components/file-viewer/use-file-viewer-hotkeys.js", "content": "import { useEffect } from \"preact/hooks\";\n\nexport const useFileViewerHotkeys = ({\n canEditFile,\n isPreviewOnly,\n isDiffView,\n viewMode,\n handleSave,\n}) => {\n useEffect(() => {\n const handleKeyDown = (event) => {\n const isSaveShortcut =\n (event.metaKey || event.ctrlKey) &&\n !event.shiftKey &&\n !event.altKey &&\n String(event.key || \"\").toLowerCase() === \"s\";\n if (!isSaveShortcut) return;\n if (!canEditFile || isPreviewOnly || isDiffView || viewMode !== \"edit\") return;\n event.preventDefault();\n void handleSave();\n };\n window.addEventListener(\"keydown\", handleKeyDown);\n return () => window.removeEventListener(\"keydown\", handleKeyDown);\n }, [canEditFile, isPreviewOnly, isDiffView, viewMode, handleSave]);\n};\n" }, { "path": "lib/public/js/components/file-viewer/use-file-viewer.js", "content": "import { useCallback, useEffect, useMemo, useRef, useState } from \"preact/hooks\";\nimport { marked } from \"marked\";\nimport { deleteBrowseFile, restoreBrowseFile, saveFileContent } from \"../../lib/api.js\";\nimport {\n getFileSyntaxKind,\n highlightEditorLines,\n parseFrontmatter,\n} from \"../../lib/syntax-highlighters/index.js\";\nimport {\n clearStoredFileDraft,\n updateDraftIndex,\n writeStoredFileDraft,\n} from \"../../lib/browse-draft-state.js\";\nimport {\n kLockedBrowsePaths,\n kProtectedBrowsePaths,\n matchesBrowsePolicyPath,\n normalizeBrowsePolicyPath,\n} from \"../../lib/browse-file-policies.js\";\nimport { showToast } from \"../toast.js\";\nimport {\n kFileViewerModeStorageKey,\n kLargeFileSimpleEditorCharThreshold,\n kLargeFileSimpleEditorLineThreshold,\n kLoadingIndicatorDelayMs,\n} from \"./constants.js\";\nimport { readStoredFileViewerMode, writeStoredEditorSelection } from \"./storage.js\";\nimport { countTextLines, parsePathSegments, shouldUseSimpleEditorMode } from \"./utils.js\";\nimport { useScrollSync } from \"./scroll-sync.js\";\nimport { useFileLoader } from \"./use-file-loader.js\";\nimport { useFileDiff } from \"./use-file-diff.js\";\nimport { useFileViewerDraftSync } from \"./use-file-viewer-draft-sync.js\";\nimport { useFileViewerHotkeys } from \"./use-file-viewer-hotkeys.js\";\nimport { useEditorSelectionRestore } from \"./use-editor-selection-restore.js\";\nimport { useEditorLineNumberSync } from \"./use-editor-line-number-sync.js\";\n\nexport const useFileViewer = ({\n filePath = \"\",\n isPreviewOnly = false,\n browseView = \"edit\",\n lineTarget = 0,\n lineEndTarget = 0,\n onRequestClearSelection = () => {},\n onRequestEdit = () => {},\n}) => {\n const normalizedPath = String(filePath || \"\").trim();\n const normalizedPolicyPath = normalizeBrowsePolicyPath(normalizedPath);\n const [content, setContent] = useState(\"\");\n const [initialContent, setInitialContent] = useState(\"\");\n const [fileKind, setFileKind] = useState(\"text\");\n const [imageDataUrl, setImageDataUrl] = useState(\"\");\n const [audioDataUrl, setAudioDataUrl] = useState(\"\");\n const [sqliteSummary, setSqliteSummary] = useState(null);\n const [sqliteSelectedTable, setSqliteSelectedTable] = useState(\"\");\n const [sqliteTableOffset, setSqliteTableOffset] = useState(0);\n const [sqliteTableLoading, setSqliteTableLoading] = useState(false);\n const [sqliteTableError, setSqliteTableError] = useState(\"\");\n const [sqliteTableData, setSqliteTableData] = useState(null);\n const [viewMode, setViewMode] = useState(readStoredFileViewerMode);\n const [loading, setLoading] = useState(false);\n const [showDelayedLoadingSpinner, setShowDelayedLoadingSpinner] = useState(false);\n const [saving, setSaving] = useState(false);\n const [deleting, setDeleting] = useState(false);\n const [restoring, setRestoring] = useState(false);\n const [error, setError] = useState(\"\");\n const [isFolderPath, setIsFolderPath] = useState(false);\n const [frontmatterCollapsed, setFrontmatterCollapsed] = useState(false);\n const [externalChangeNoticeShown, setExternalChangeNoticeShown] = useState(false);\n const [protectedEditBypassPaths, setProtectedEditBypassPaths] = useState(() => new Set());\n const editorLineNumbersRef = useRef(null);\n const editorHighlightRef = useRef(null);\n const editorTextareaRef = useRef(null);\n const previewRef = useRef(null);\n const editorLineNumberRowRefs = useRef([]);\n const editorHighlightLineRefs = useRef([]);\n\n const hasSelectedPath = normalizedPath.length > 0;\n const isImageFile = fileKind === \"image\";\n const isAudioFile = fileKind === \"audio\";\n const isSqliteFile = fileKind === \"sqlite\";\n const canEditFile =\n hasSelectedPath && !isFolderPath && !isPreviewOnly && !isImageFile && !isAudioFile && !isSqliteFile;\n const isDiffView = String(browseView || \"edit\") === \"diff\";\n\n const { viewScrollRatioRef, handleEditorScroll, handlePreviewScroll, handleChangeViewMode } =\n useScrollSync({\n viewMode,\n setViewMode,\n previewRef,\n editorTextareaRef,\n editorLineNumbersRef,\n editorHighlightRef,\n });\n\n const { loadedFilePathRef, restoredSelectionPathRef } = useFileLoader({\n hasSelectedPath,\n normalizedPath,\n isDiffView,\n isSqliteFile,\n sqliteSelectedTable,\n sqliteTableOffset,\n canEditFile,\n isFolderPath,\n loading,\n saving,\n initialContent,\n isDirty: canEditFile && content !== initialContent,\n setLoading,\n setContent,\n setInitialContent,\n setFileKind,\n setImageDataUrl,\n setAudioDataUrl,\n setSqliteSummary,\n setSqliteSelectedTable,\n setSqliteTableOffset,\n setSqliteTableLoading,\n setSqliteTableError,\n setSqliteTableData,\n setError,\n setIsFolderPath,\n setExternalChangeNoticeShown,\n externalChangeNoticeShown,\n viewScrollRatioRef,\n });\n\n const { diffLoading, diffError, diffContent, diffStatus } = useFileDiff({\n hasSelectedPath,\n isDiffView,\n isPreviewOnly,\n normalizedPath,\n });\n\n const pathSegments = useMemo(() => parsePathSegments(normalizedPath), [normalizedPath]);\n const isCurrentFileLoaded = loadedFilePathRef.current === normalizedPath;\n const renderContent = isCurrentFileLoaded ? content : \"\";\n const renderInitialContent = isCurrentFileLoaded ? initialContent : \"\";\n const isDirty = canEditFile && renderContent !== renderInitialContent;\n const isLockedFile =\n canEditFile && matchesBrowsePolicyPath(kLockedBrowsePaths, normalizedPolicyPath);\n const isProtectedFile =\n canEditFile &&\n !isLockedFile &&\n matchesBrowsePolicyPath(kProtectedBrowsePaths, normalizedPolicyPath);\n const isProtectedLocked = isProtectedFile && !protectedEditBypassPaths.has(normalizedPolicyPath);\n const isEditBlocked = isLockedFile || isProtectedLocked;\n const isDeleteBlocked = isLockedFile || isProtectedFile;\n const canDeleteFile =\n hasSelectedPath &&\n !isFolderPath &&\n !isPreviewOnly &&\n !isDiffView &&\n !deleting &&\n !saving &&\n !isDeleteBlocked;\n const syntaxKind = useMemo(() => getFileSyntaxKind(normalizedPath), [normalizedPath]);\n const isMarkdownFile = syntaxKind === \"markdown\";\n const editorLineCount = useMemo(() => countTextLines(renderContent), [renderContent]);\n const useSimpleEditor = useMemo(\n () =>\n shouldUseSimpleEditorMode({\n contentLength: renderContent.length,\n lineCount: editorLineCount,\n charThreshold: kLargeFileSimpleEditorCharThreshold,\n lineThreshold: kLargeFileSimpleEditorLineThreshold,\n }),\n [renderContent, editorLineCount],\n );\n const shouldUseHighlightedEditor = syntaxKind !== \"plain\" && !useSimpleEditor;\n const shouldRenderLineNumbers = !useSimpleEditor;\n const parsedFrontmatter = useMemo(\n () => (isMarkdownFile ? parseFrontmatter(renderContent) : { entries: [], body: renderContent }),\n [renderContent, isMarkdownFile],\n );\n const highlightedEditorLines = useMemo(\n () => (shouldUseHighlightedEditor ? highlightEditorLines(renderContent, syntaxKind) : []),\n [renderContent, shouldUseHighlightedEditor, syntaxKind],\n );\n const editorLineNumbers = useMemo(() => {\n if (!shouldRenderLineNumbers) return [];\n return Array.from({ length: editorLineCount }, (_, index) => index + 1);\n }, [editorLineCount, shouldRenderLineNumbers]);\n const previewHtml = useMemo(\n () =>\n isMarkdownFile\n ? marked.parse(parsedFrontmatter.body || \"\", {\n gfm: true,\n breaks: true,\n })\n : \"\",\n [parsedFrontmatter.body, isMarkdownFile],\n );\n\n useEditorLineNumberSync({\n enabled: shouldUseHighlightedEditor && viewMode === \"edit\",\n syncKey: `${normalizedPath}:${renderContent.length}:${highlightedEditorLines.length}`,\n editorLineNumberRowRefs,\n editorHighlightLineRefs,\n });\n\n useEffect(() => {\n if (!isMarkdownFile && viewMode !== \"edit\") {\n setViewMode(\"edit\");\n }\n }, [isMarkdownFile, viewMode]);\n\n useEffect(() => {\n setProtectedEditBypassPaths(new Set());\n }, [normalizedPath]);\n\n useEffect(() => {\n try {\n window.localStorage.setItem(kFileViewerModeStorageKey, viewMode);\n } catch {}\n }, [viewMode]);\n\n useEffect(() => {\n if (!loading) {\n setShowDelayedLoadingSpinner(false);\n return () => {};\n }\n const timer = window.setTimeout(() => {\n setShowDelayedLoadingSpinner(true);\n }, kLoadingIndicatorDelayMs);\n return () => window.clearTimeout(timer);\n }, [loading]);\n\n useFileViewerDraftSync({\n loadedFilePathRef,\n normalizedPath,\n canEditFile,\n hasSelectedPath,\n loading,\n content,\n initialContent,\n });\n\n useEditorSelectionRestore({\n canEditFile,\n isEditBlocked,\n loading,\n hasSelectedPath,\n normalizedPath,\n loadedFilePathRef,\n restoredSelectionPathRef,\n viewMode,\n content,\n lineTarget,\n lineEndTarget,\n editorTextareaRef,\n editorLineNumbersRef,\n editorHighlightRef,\n viewScrollRatioRef,\n });\n\n const handleSave = useCallback(async () => {\n if (!canEditFile || saving || !isDirty || isEditBlocked) return;\n setSaving(true);\n setError(\"\");\n try {\n await saveFileContent(normalizedPath, content);\n setInitialContent(content);\n setExternalChangeNoticeShown(false);\n clearStoredFileDraft(normalizedPath);\n updateDraftIndex(normalizedPath, false, {\n dispatchEvent: (event) => window.dispatchEvent(event),\n });\n window.dispatchEvent(\n new CustomEvent(\"alphaclaw:browse-file-saved\", {\n detail: { path: normalizedPath },\n }),\n );\n } catch (saveError) {\n const message = saveError.message || \"Could not save file\";\n showToast(message, \"error\");\n } finally {\n setSaving(false);\n }\n }, [canEditFile, saving, isDirty, isEditBlocked, normalizedPath, content]);\n\n const handleDelete = useCallback(async () => {\n if (!canDeleteFile) return;\n setDeleting(true);\n setError(\"\");\n try {\n const data = await deleteBrowseFile(normalizedPath);\n const deletedPath = String(data?.path || normalizedPath);\n setExternalChangeNoticeShown(false);\n clearStoredFileDraft(normalizedPath);\n updateDraftIndex(normalizedPath, false, {\n dispatchEvent: (event) => window.dispatchEvent(event),\n });\n window.dispatchEvent(\n new CustomEvent(\"alphaclaw:browse-file-saved\", {\n detail: { path: deletedPath },\n }),\n );\n window.dispatchEvent(\n new CustomEvent(\"alphaclaw:browse-file-deleted\", {\n detail: { path: deletedPath },\n }),\n );\n window.dispatchEvent(new CustomEvent(\"alphaclaw:browse-tree-refresh\"));\n showToast(\"File deleted\", \"success\");\n onRequestClearSelection();\n } catch (deleteError) {\n const message = deleteError.message || \"Could not delete file\";\n setError(message);\n if (/path is not a file/i.test(message)) {\n showToast(\"Only files can be deleted\", \"warning\");\n onRequestClearSelection();\n } else {\n showToast(message, \"error\");\n }\n } finally {\n setDeleting(false);\n }\n }, [canDeleteFile, normalizedPath, onRequestClearSelection]);\n\n const handleRestore = useCallback(async () => {\n if (!isDiffView || !diffStatus?.isDeleted || restoring) return;\n setRestoring(true);\n try {\n const data = await restoreBrowseFile(normalizedPath);\n const restoredPath = String(data?.path || normalizedPath);\n window.dispatchEvent(\n new CustomEvent(\"alphaclaw:browse-file-saved\", {\n detail: { path: restoredPath },\n }),\n );\n window.dispatchEvent(new CustomEvent(\"alphaclaw:browse-tree-refresh\"));\n showToast(\"File restored\", \"success\");\n onRequestEdit(restoredPath);\n } catch (restoreError) {\n showToast(restoreError.message || \"Could not restore file\", \"error\");\n } finally {\n setRestoring(false);\n }\n }, [\n diffStatus?.isDeleted,\n isDiffView,\n normalizedPath,\n onRequestEdit,\n restoring,\n ]);\n\n useFileViewerHotkeys({\n canEditFile,\n isPreviewOnly,\n isDiffView,\n viewMode,\n handleSave,\n });\n\n const handleEditProtectedFile = () => {\n if (!normalizedPolicyPath) return;\n setProtectedEditBypassPaths((previousPaths) => {\n const nextPaths = new Set(previousPaths);\n nextPaths.add(normalizedPolicyPath);\n return nextPaths;\n });\n window.requestAnimationFrame(() => {\n window.requestAnimationFrame(() => {\n const textareaElement = editorTextareaRef.current;\n if (!textareaElement) return;\n if (textareaElement.disabled || textareaElement.readOnly) return;\n textareaElement.focus();\n });\n });\n };\n\n const persistDraftForContent = useCallback(\n (nextContent, selection = null) => {\n if (!hasSelectedPath || !canEditFile) return;\n if (selection) {\n writeStoredEditorSelection(normalizedPath, selection);\n }\n writeStoredFileDraft(normalizedPath, nextContent);\n updateDraftIndex(normalizedPath, nextContent !== initialContent, {\n dispatchEvent: (event) => window.dispatchEvent(event),\n });\n },\n [hasSelectedPath, canEditFile, normalizedPath, initialContent],\n );\n\n const handleContentInput = (event) => {\n if (isEditBlocked || isPreviewOnly) return;\n const nextContent = event.target.value;\n setContent(nextContent);\n persistDraftForContent(nextContent, {\n start: event.target.selectionStart,\n end: event.target.selectionEnd,\n });\n };\n\n const handleEditorKeyDown = (event) => {\n if (event.key !== \"Tab\") return;\n if (event.shiftKey || event.metaKey || event.ctrlKey || event.altKey) return;\n if (isEditBlocked || isPreviewOnly || !canEditFile) return;\n const textareaElement = event.currentTarget;\n if (!textareaElement) return;\n event.preventDefault();\n const start = Number(textareaElement.selectionStart || 0);\n const end = Number(textareaElement.selectionEnd || 0);\n textareaElement.setRangeText(\" \", start, end, \"end\");\n const nextContent = textareaElement.value;\n setContent(nextContent);\n persistDraftForContent(nextContent, {\n start: textareaElement.selectionStart,\n end: textareaElement.selectionEnd,\n });\n };\n\n const handleDiscard = () => {\n if (!canEditFile || !isDirty || saving || deleting) return;\n setContent(initialContent);\n clearStoredFileDraft(normalizedPath);\n updateDraftIndex(normalizedPath, false, {\n dispatchEvent: (event) => window.dispatchEvent(event),\n });\n showToast(\"Changes discarded\", \"info\");\n };\n\n const handleEditorSelectionChange = () => {\n if (!hasSelectedPath || !canEditFile || loading) return;\n const textareaElement = editorTextareaRef.current;\n if (!textareaElement) return;\n writeStoredEditorSelection(normalizedPath, {\n start: textareaElement.selectionStart,\n end: textareaElement.selectionEnd,\n });\n };\n\n return {\n state: {\n hasSelectedPath,\n isPreviewOnly,\n loading,\n saving,\n deleting,\n restoring,\n showDelayedLoadingSpinner,\n error,\n isFolderPath,\n isImageFile,\n imageDataUrl,\n isAudioFile,\n audioDataUrl,\n isSqliteFile,\n sqliteSummary,\n sqliteSelectedTable,\n sqliteTableOffset,\n sqliteTableLoading,\n sqliteTableError,\n sqliteTableData,\n isDiffView,\n diffLoading,\n diffError,\n diffContent,\n diffStatus,\n isMarkdownFile,\n frontmatterCollapsed,\n previewHtml,\n viewMode,\n renderContent,\n },\n derived: {\n pathSegments,\n isDirty,\n canEditFile,\n canDeleteFile,\n isDeleteBlocked,\n isEditBlocked,\n isLockedFile,\n isProtectedFile,\n isProtectedLocked,\n shouldUseHighlightedEditor,\n shouldRenderLineNumbers,\n parsedFrontmatter,\n highlightedEditorLines,\n editorLineNumbers,\n },\n refs: {\n previewRef,\n editorLineNumbersRef,\n editorLineNumberRowRefs,\n editorHighlightRef,\n editorHighlightLineRefs,\n editorTextareaRef,\n },\n actions: {\n setFrontmatterCollapsed,\n setSqliteSelectedTable,\n setSqliteTableOffset,\n handleChangeViewMode,\n handleSave,\n handleDiscard,\n handleDelete,\n handleRestore,\n handleEditProtectedFile,\n handleContentInput,\n handleEditorKeyDown,\n handleEditorScroll,\n handlePreviewScroll,\n handleEditorSelectionChange,\n },\n context: {\n normalizedPath,\n },\n };\n};\n" }, { "path": "lib/public/js/components/file-viewer/utils.js", "content": "export const parsePathSegments = (inputPath) =>\n String(inputPath || \"\")\n .split(\"/\")\n .map((part) => part.trim())\n .filter(Boolean);\n\nexport const clampSelectionIndex = (value, maxValue) => {\n const numericValue = Number.parseInt(String(value ?? \"\"), 10);\n if (!Number.isFinite(numericValue)) return 0;\n return Math.max(0, Math.min(maxValue, numericValue));\n};\n\nexport const countTextLines = (content) => {\n const text = String(content || \"\");\n if (!text) return 1;\n return text.split(/\\r\\n|\\r|\\n/).length;\n};\n\nexport const shouldUseSimpleEditorMode = ({\n contentLength = 0,\n lineCount = 1,\n charThreshold = 250000,\n lineThreshold = 5000,\n}) =>\n Number(contentLength) > Number(charThreshold) ||\n Number(lineCount) > Number(lineThreshold);\n" }, { "path": "lib/public/js/components/gateway.js", "content": "import { h } from \"preact\";\nimport { useEffect, useMemo, useState } from \"preact/hooks\";\nimport htm from \"htm\";\nimport { UpdateActionButton } from \"./update-action-button.js\";\nconst html = htm.bind(h);\n\nconst formatDuration = (ms) => {\n const safeMs = Number(ms || 0);\n if (!Number.isFinite(safeMs) || safeMs <= 0) return \"0s\";\n const totalSeconds = Math.floor(safeMs / 1000);\n const days = Math.floor(totalSeconds / 86400);\n const hours = Math.floor(totalSeconds / 3600);\n const minutes = Math.floor((totalSeconds % 3600) / 60);\n const seconds = totalSeconds % 60;\n if (days > 0) return `${days}d ${hours % 24}h ${minutes}m ${seconds}s`;\n if (hours > 0) return `${hours}h ${minutes}m ${seconds}s`;\n if (minutes > 0) return `${minutes}m ${seconds}s`;\n return `${seconds}s`;\n};\n\nexport const Gateway = ({\n status,\n restarting = false,\n onRestart,\n watchdogStatus = null,\n onOpenWatchdog,\n onRepair,\n repairing = false,\n}) => {\n const [nowMs, setNowMs] = useState(() => Date.now());\n const isRunning = status === \"running\" && !restarting;\n const dotClass = isRunning\n ? \"ac-status-dot ac-status-dot--healthy\"\n : \"w-2 h-2 rounded-full bg-yellow-500 animate-pulse\";\n const watchdogHealth =\n watchdogStatus?.lifecycle === \"crash_loop\"\n ? \"crash_loop\"\n : watchdogStatus?.health;\n const watchdogDotClass =\n watchdogHealth === \"healthy\"\n ? \"ac-status-dot ac-status-dot--healthy ac-status-dot--healthy-offset\"\n : watchdogHealth === \"degraded\"\n ? \"bg-yellow-500\"\n : watchdogHealth === \"unhealthy\" || watchdogHealth === \"crash_loop\"\n ? \"bg-red-500\"\n : \"bg-gray-500\";\n const watchdogLabel =\n watchdogHealth === \"unknown\" ? \"initializing\" : watchdogHealth || \"unknown\";\n const isRepairInProgress = repairing || !!watchdogStatus?.operationInProgress;\n const showInspectButton = watchdogHealth === \"degraded\" && !!onOpenWatchdog;\n const showRepairButton =\n isRepairInProgress ||\n (watchdogStatus?.health === \"degraded\" && !onOpenWatchdog) ||\n watchdogStatus?.lifecycle === \"crash_loop\" ||\n watchdogStatus?.health === \"unhealthy\" ||\n watchdogStatus?.health === \"crashed\";\n const liveUptimeMs = useMemo(() => {\n const startedAtMs = watchdogStatus?.uptimeStartedAt\n ? Date.parse(watchdogStatus.uptimeStartedAt)\n : null;\n if (Number.isFinite(startedAtMs)) {\n return Math.max(0, nowMs - startedAtMs);\n }\n return watchdogStatus?.uptimeMs || 0;\n }, [watchdogStatus?.uptimeStartedAt, watchdogStatus?.uptimeMs, nowMs]);\n\n useEffect(() => {\n const id = setInterval(() => {\n setNowMs(Date.now());\n }, 1000);\n return () => clearInterval(id);\n }, []);\n\n return html`
    \n
    \n
    \n
    \n \n Gateway:\n ${restarting ? \"restarting...\" : status || \"checking...\"}\n
    \n
    \n ${!restarting && isRunning\n ? html`\n Uptime: ${formatDuration(liveUptimeMs)}\n `\n : null}\n <${UpdateActionButton}\n onClick=${onRestart}\n disabled=${!status}\n loading=${restarting}\n warning=${false}\n idleLabel=\"Restart\"\n loadingLabel=\"On it...\"\n />\n
    \n
    \n
    \n ${onOpenWatchdog\n ? html`\n \n \n Watchdog:\n ${watchdogLabel}\n \n `\n : html`\n
    \n \n Watchdog:\n ${watchdogLabel}\n
    \n `}\n ${onRepair\n ? html`\n
    \n ${showInspectButton\n ? html`\n <${UpdateActionButton}\n onClick=${onOpenWatchdog}\n warning=${false}\n idleLabel=\"Inspect\"\n loadingLabel=\"Inspect\"\n className=\"w-full justify-center\"\n />\n `\n : showRepairButton\n ? html`\n <${UpdateActionButton}\n onClick=${onRepair}\n loading=${isRepairInProgress}\n warning=${true}\n idleLabel=\"Repair\"\n loadingLabel=\"Repairing...\"\n className=\"w-full justify-center\"\n />\n `\n : html``}\n
    \n `\n : null}\n
    \n
    \n
    `;\n};\n" }, { "path": "lib/public/js/components/general/index.js", "content": "import { h } from \"preact\";\nimport htm from \"htm\";\nimport { Gateway } from \"../gateway.js\";\nimport { Channels } from \"../channels.js\";\nimport { ChannelOperationsPanel } from \"../channel-operations-panel.js\";\nimport { Pairings } from \"../pairings.js\";\nimport { DevicePairings } from \"../device-pairings.js\";\nimport { ActionButton } from \"../action-button.js\";\nimport { Google } from \"../google/index.js\";\nimport { Features } from \"../features.js\";\nimport { GeneralDoctorWarning } from \"../doctor/general-warning.js\";\nimport { ChevronDownIcon } from \"../icons.js\";\nimport { UpdateActionButton } from \"../update-action-button.js\";\nimport { useGeneralTab } from \"./use-general-tab.js\";\n\nconst html = htm.bind(h);\n\nconst openWhatsAppQrModal = () => {\n if (typeof window === \"undefined\") return;\n window.dispatchEvent(new CustomEvent(\"alphaclaw:open-whatsapp-qr\"));\n};\n\nexport const GeneralTab = ({\n statusData = null,\n watchdogData = null,\n doctorStatusData = null,\n agents = [],\n doctorWarningDismissedUntilMs = 0,\n onRefreshStatuses = () => {},\n onSwitchTab = () => {},\n onNavigate = () => {},\n onOpenGmailWebhook = () => {},\n isActive = false,\n restartingGateway = false,\n onRestartGateway = () => {},\n restartSignal = 0,\n onRestartRequired = () => {},\n onDismissDoctorWarning = () => {},\n}) => {\n const { state, actions } = useGeneralTab({\n statusData,\n watchdogData,\n doctorStatusData,\n onRefreshStatuses,\n isActive,\n restartSignal,\n });\n const whatsappStatus = state.channels?.whatsapp || null;\n const whatsappAccounts =\n whatsappStatus?.accounts && typeof whatsappStatus.accounts === \"object\"\n ? whatsappStatus.accounts\n : {};\n const hasWhatsAppAwaitingPairing =\n Object.keys(whatsappAccounts).length > 0\n ? Object.values(whatsappAccounts).some(\n (account) => account && account.status !== \"paired\",\n )\n : String(whatsappStatus?.status || \"\").trim() === \"configured\";\n const showWhatsAppPairingCard =\n state.hasUnpaired &&\n !state.pairingStatusRefreshing &&\n Array.isArray(state.pending) &&\n state.pending.length === 0 &&\n hasWhatsAppAwaitingPairing;\n const showPairings =\n state.hasUnpaired ||\n (Array.isArray(state.pending) && state.pending.length > 0) ||\n state.pairingStatusRefreshing;\n\n return html`\n
    \n <${Gateway}\n status=${state.gatewayStatus}\n restarting=${restartingGateway}\n onRestart=${onRestartGateway}\n watchdogStatus=${state.watchdogStatus}\n onOpenWatchdog=${() => onSwitchTab(\"watchdog\")}\n onRepair=${actions.handleWatchdogRepair}\n repairing=${state.repairingWatchdog}\n />\n <${GeneralDoctorWarning}\n doctorStatus=${state.doctorStatus}\n dismissedUntilMs=${doctorWarningDismissedUntilMs}\n onOpenDoctor=${() => onSwitchTab(\"doctor\")}\n onDismiss=${onDismissDoctorWarning}\n />\n <${ChannelOperationsPanel}\n channelsSection=${html`\n <${Channels}\n channels=${state.channels}\n agents=${agents}\n onNavigate=${onNavigate}\n onRefreshStatuses=${onRefreshStatuses}\n onRestartGateway=${onRestartGateway}\n />\n `}\n pairingsSection=${html`\n ${showWhatsAppPairingCard\n ? html`\n
    \n

    Pending Pairings

    \n
    \n \n

    WhatsApp needs to be linked

    \n

    Scan the QR code to finish pairing this channel.

    \n <${ActionButton}\n onClick=${openWhatsAppQrModal}\n tone=\"primary\"\n size=\"sm\"\n idleLabel=\"Open QR Code\"\n />\n
    \n
    \n `\n : html`\n <${Pairings}\n pending=${state.pending}\n channels=${state.channels}\n visible=${showPairings}\n pollingInFlight=${state.pairingsPolling}\n statusRefreshing=${state.pairingStatusRefreshing}\n onApprove=${actions.handleApprove}\n onReject=${actions.handleReject}\n />\n `}\n `}\n />\n <${Features} onSwitchTab=${onSwitchTab} />\n <${Google}\n gatewayStatus=${state.gatewayStatus}\n onRestartRequired=${onRestartRequired}\n onOpenGmailWebhook=${onOpenGmailWebhook}\n />\n\n ${state.repo &&\n html`\n
    \n
    \n
    \n \n \n \n ${state.repo}\n
    \n
    \n Auto-sync\n
    \n \n actions.handleSyncCronChoiceChange(event.target.value)}\n disabled=${state.savingSyncCron}\n class=\"appearance-none bg-field border border-border rounded-lg pl-2.5 pr-9 py-1.5 text-xs text-body ${state.savingSyncCron\n ? \"opacity-50 cursor-not-allowed\"\n : \"\"}\"\n title=${state.syncCron?.installed === false\n ? \"Not Installed Yet\"\n : state.syncCronStatusText}\n >\n \n \n \n \n \n <${ChevronDownIcon}\n className=\"pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-fg-muted\"\n />\n
    \n
    \n
    \n
    \n `}\n\n
    \n
    \n
    \n

    OpenClaw Gateway Dashboard

    \n
    \n <${UpdateActionButton}\n onClick=${actions.handleOpenDashboard}\n loading=${state.dashboardLoading}\n warning=${false}\n idleLabel=\"Open\"\n loadingLabel=\"Opening...\"\n />\n
    \n <${DevicePairings}\n pending=${state.devicePending}\n onApprove=${actions.handleDeviceApprove}\n onReject=${actions.handleDeviceReject}\n />\n
    \n
    \n `;\n};\n" }, { "path": "lib/public/js/components/general/use-general-tab.js", "content": "import { useEffect, useRef, useState } from \"preact/hooks\";\nimport {\n approveDevice,\n approvePairing,\n fetchDashboardUrl,\n fetchDevicePairings,\n fetchPairings,\n rejectDevice,\n rejectPairing,\n triggerWatchdogRepair,\n updateSyncCron,\n} from \"../../lib/api.js\";\nimport { usePolling } from \"../../hooks/usePolling.js\";\nimport { showToast } from \"../toast.js\";\nimport { ALL_CHANNELS } from \"../channels.js\";\n\nconst kDefaultSyncCronSchedule = \"0 * * * *\";\n\nexport const useGeneralTab = ({\n statusData = null,\n watchdogData = null,\n doctorStatusData = null,\n onRefreshStatuses = () => {},\n isActive = false,\n restartSignal = 0,\n} = {}) => {\n const [dashboardLoading, setDashboardLoading] = useState(false);\n const [repairingWatchdog, setRepairingWatchdog] = useState(false);\n const [syncCronEnabled, setSyncCronEnabled] = useState(true);\n const [syncCronSchedule, setSyncCronSchedule] = useState(kDefaultSyncCronSchedule);\n const [savingSyncCron, setSavingSyncCron] = useState(false);\n const [syncCronChoice, setSyncCronChoice] = useState(kDefaultSyncCronSchedule);\n const [pairingStatusRefreshing, setPairingStatusRefreshing] = useState(false);\n const [devicePollingEnabled, setDevicePollingEnabled] = useState(false);\n const [cliAutoApproveComplete, setCliAutoApproveComplete] = useState(false);\n const pairingRefreshTimerRef = useRef(null);\n\n const status = statusData;\n const watchdogStatus = watchdogData;\n const doctorStatus = doctorStatusData;\n const gatewayStatus = status?.gateway ?? null;\n const channels = status?.channels ?? null;\n const repo = status?.repo || null;\n const syncCron = status?.syncCron || null;\n const openclawVersion = status?.openclawVersion || null;\n\n const hasUnpaired = ALL_CHANNELS.some((channel) => {\n const info = channels?.[channel];\n if (!info) return false;\n const accounts =\n info.accounts && typeof info.accounts === \"object\" ? info.accounts : {};\n if (Object.keys(accounts).length > 0) {\n return Object.values(accounts).some(\n (acc) => acc && acc.status !== \"paired\",\n );\n }\n return info.status !== \"paired\";\n });\n const hasConfiguredPairingChannel = ALL_CHANNELS.some((channel) =>\n Boolean(channels?.[channel]),\n );\n\n const pairingsPoll = usePolling(\n async () => {\n const data = await fetchPairings();\n return data.pending || [];\n },\n 3000,\n {\n enabled: hasConfiguredPairingChannel && gatewayStatus === \"running\",\n cacheKey: \"/api/pairings\",\n dedupeInFlight: true,\n },\n );\n const pending = pairingsPoll.data || [];\n const shouldPollDevices =\n gatewayStatus === \"running\" && (devicePollingEnabled || !cliAutoApproveComplete);\n\n const devicePoll = usePolling(\n async () => {\n const data = await fetchDevicePairings();\n setCliAutoApproveComplete(data?.cliAutoApproveComplete === true);\n return data.pending || [];\n },\n 5000,\n {\n enabled: shouldPollDevices,\n cacheKey: \"/api/devices\",\n },\n );\n const devicePending = devicePoll.data || [];\n\n useEffect(() => {\n if (!restartSignal || !isActive) return;\n onRefreshStatuses();\n pairingsPoll.refresh({ force: true });\n if (shouldPollDevices) {\n devicePoll.refresh();\n }\n const t1 = setTimeout(() => {\n onRefreshStatuses();\n pairingsPoll.refresh();\n if (shouldPollDevices) {\n devicePoll.refresh();\n }\n }, 1200);\n const t2 = setTimeout(() => {\n onRefreshStatuses();\n pairingsPoll.refresh();\n if (shouldPollDevices) {\n devicePoll.refresh();\n }\n }, 3500);\n return () => {\n clearTimeout(t1);\n clearTimeout(t2);\n };\n }, [\n devicePoll.refresh,\n isActive,\n onRefreshStatuses,\n pairingsPoll.refresh,\n restartSignal,\n devicePollingEnabled,\n shouldPollDevices,\n ]);\n\n useEffect(() => {\n if (!syncCron) return;\n setSyncCronEnabled(syncCron.enabled !== false);\n setSyncCronSchedule(syncCron.schedule || kDefaultSyncCronSchedule);\n setSyncCronChoice(\n syncCron.enabled === false ? \"disabled\" : syncCron.schedule || kDefaultSyncCronSchedule,\n );\n }, [syncCron?.enabled, syncCron?.schedule]);\n\n useEffect(\n () => () => {\n if (pairingRefreshTimerRef.current) {\n clearTimeout(pairingRefreshTimerRef.current);\n }\n },\n [],\n );\n\n const refreshAfterPairingAction = () => {\n setPairingStatusRefreshing(true);\n if (pairingRefreshTimerRef.current) {\n clearTimeout(pairingRefreshTimerRef.current);\n }\n pairingRefreshTimerRef.current = setTimeout(() => {\n setPairingStatusRefreshing(false);\n pairingRefreshTimerRef.current = null;\n }, 2800);\n onRefreshStatuses();\n pairingsPoll.refresh({ force: true });\n setTimeout(() => {\n onRefreshStatuses();\n pairingsPoll.refresh();\n }, 700);\n setTimeout(() => {\n onRefreshStatuses();\n pairingsPoll.refresh();\n }, 1800);\n };\n\n const saveSyncCronSettings = async ({\n enabled = syncCronEnabled,\n schedule = syncCronSchedule,\n } = {}) => {\n if (savingSyncCron) return;\n setSavingSyncCron(true);\n try {\n const data = await updateSyncCron({ enabled, schedule });\n if (!data.ok) {\n throw new Error(data.error || \"Could not save sync settings\");\n }\n showToast(\"Sync schedule updated\", \"success\");\n onRefreshStatuses();\n } catch (err) {\n showToast(err.message || \"Could not save sync settings\", \"error\");\n } finally {\n setSavingSyncCron(false);\n }\n };\n\n const handleSyncCronChoiceChange = async (nextChoice) => {\n setSyncCronChoice(nextChoice);\n const nextEnabled = nextChoice !== \"disabled\";\n const nextSchedule = nextEnabled ? nextChoice : syncCronSchedule;\n setSyncCronEnabled(nextEnabled);\n setSyncCronSchedule(nextSchedule);\n await saveSyncCronSettings({\n enabled: nextEnabled,\n schedule: nextSchedule,\n });\n };\n\n const handleApprove = async (id, channel, accountId = \"\") => {\n try {\n const result = await approvePairing(id, channel, accountId);\n if (!result.ok) throw new Error(result.error || \"Could not approve pairing\");\n refreshAfterPairingAction();\n } catch (err) {\n showToast(err.message || \"Could not approve pairing\", \"error\");\n throw err;\n }\n };\n\n const handleReject = async (id, channel, accountId = \"\") => {\n try {\n await rejectPairing(id, channel, accountId);\n refreshAfterPairingAction();\n } catch (err) {\n showToast(err.message || \"Could not reject pairing\", \"error\");\n throw err;\n }\n };\n\n const handleDeviceApprove = async (id) => {\n try {\n await approveDevice(id);\n showToast(\"Device pairing approved\", \"success\");\n setTimeout(devicePoll.refresh, 500);\n setTimeout(devicePoll.refresh, 2000);\n } catch (err) {\n showToast(err.message || \"Could not approve device pairing\", \"error\");\n throw err;\n }\n };\n\n const handleDeviceReject = async (id) => {\n try {\n await rejectDevice(id);\n showToast(\"Device pairing rejected\", \"info\");\n setTimeout(devicePoll.refresh, 500);\n setTimeout(devicePoll.refresh, 2000);\n } catch (err) {\n showToast(err.message || \"Could not reject device pairing\", \"error\");\n throw err;\n }\n };\n\n const handleWatchdogRepair = async () => {\n if (repairingWatchdog) return;\n setRepairingWatchdog(true);\n try {\n const data = await triggerWatchdogRepair();\n if (!data.ok) throw new Error(data.error || \"Repair failed\");\n showToast(\"Repair triggered\", \"success\");\n setTimeout(() => {\n onRefreshStatuses();\n }, 800);\n } catch (err) {\n showToast(err.message || \"Could not run repair\", \"error\");\n } finally {\n setRepairingWatchdog(false);\n }\n };\n\n const handleOpenDashboard = async () => {\n if (dashboardLoading) return;\n setDevicePollingEnabled(true);\n setDashboardLoading(true);\n try {\n const data = await fetchDashboardUrl();\n if (data.needsAuth) {\n showToast(\n \"OpenClaw dashboard token is missing from the AlphaClaw server environment\",\n \"warning\",\n );\n }\n window.open(data.url || \"/openclaw\", \"_blank\");\n } catch (err) {\n showToast(err.message || \"Could not open OpenClaw dashboard\", \"error\");\n window.open(\"/openclaw\", \"_blank\");\n } finally {\n setDashboardLoading(false);\n }\n };\n\n return {\n state: {\n channels,\n dashboardLoading,\n devicePending,\n doctorStatus,\n gatewayStatus,\n hasUnpaired,\n openclawVersion,\n pending,\n pairingsPolling: pairingsPoll.isPolling,\n pairingStatusRefreshing,\n repairingWatchdog,\n repo,\n savingSyncCron,\n syncCron,\n syncCronChoice,\n syncCronEnabled,\n syncCronSchedule,\n syncCronStatusText: syncCronEnabled ? \"Enabled\" : \"Disabled\",\n watchdogStatus,\n },\n actions: {\n handleApprove,\n handleDeviceApprove,\n handleDeviceReject,\n handleOpenDashboard,\n handleReject,\n handleSyncCronChoiceChange,\n handleWatchdogRepair,\n },\n };\n};\n" }, { "path": "lib/public/js/components/global-restart-banner.js", "content": "import { h } from \"preact\";\nimport htm from \"htm\";\nimport { UpdateActionButton } from \"./update-action-button.js\";\nimport { CloseIcon } from \"./icons.js\";\n\nconst html = htm.bind(h);\n\nexport const GlobalRestartBanner = ({\n visible = false,\n restarting = false,\n onRestart,\n onDismiss = () => {},\n}) => {\n if (!visible) return null;\n return html`\n
    \n
    \n

    \n Gateway restart required to apply pending configuration changes.\n

    \n
    \n <${UpdateActionButton}\n onClick=${onRestart}\n disabled=${restarting}\n loading=${restarting}\n warning=${true}\n idleLabel=\"Restart Gateway\"\n loadingLabel=\"Restarting...\"\n className=\"global-restart-banner__button\"\n />\n \n <${CloseIcon} className=\"h-3.5 w-3.5\" />\n \n
    \n
    \n
    \n `;\n};\n" }, { "path": "lib/public/js/components/google/account-row.js", "content": "import { h } from \"preact\";\nimport htm from \"htm\";\nimport { Badge } from \"../badge.js\";\nimport { ScopePicker } from \"../scope-picker.js\";\nimport { GmailWatchToggle } from \"./gmail-watch-toggle.js\";\n\nconst html = htm.bind(h);\n\nconst scopeListsEqual = (a = [], b = []) =>\n a.length === b.length && a.every((scope) => b.includes(scope));\n\nexport const GoogleAccountRow = ({\n account,\n personal = false,\n expanded,\n onToggleExpanded,\n scopes = [],\n savedScopes = [],\n apiStatus = {},\n checkingApis = false,\n onToggleScope,\n onCheckApis,\n onUpdatePermissions,\n onEditCredentials,\n onDisconnect,\n gmailWatchStatus = null,\n gmailWatchBusy = false,\n onEnableGmailWatch,\n onDisableGmailWatch,\n onOpenGmailSetup,\n onOpenGmailWebhook,\n}) => {\n const scopesChanged = !scopeListsEqual(scopes, savedScopes);\n return html`\n
    \n onToggleExpanded?.(account.id)}\n class=\"w-full text-left px-3 py-2.5 flex items-center justify-between hover:bg-field\"\n >\n
    \n
    ${account.email}
    \n
    \n
    \n ${personal ? html`<${Badge} tone=\"neutral\">Personal` : null}\n <${Badge} tone=${account.authenticated ? \"success\" : \"warning\"}>\n ${account.authenticated ? \"Connected\" : \"Awaiting sign-in\"}\n \n ${expanded ? \"▾\" : \"▸\"}\n
    \n \n ${expanded\n ? html`\n
    \n
    \n Select permissions\n ${account.authenticated\n ? html` onCheckApis?.(account.id)}\n disabled=${checkingApis}\n class=\"text-xs px-2 py-1 rounded-lg ac-btn-ghost disabled:opacity-50 disabled:cursor-not-allowed\"\n >\n ${checkingApis ? \"Checking APIs...\" : \"↻ Check APIs\"}\n `\n : null}\n
    \n <${ScopePicker}\n scopes=${scopes}\n onToggle=${(scope) => onToggleScope?.(account.id, scope)}\n apiStatus=${account.authenticated ? apiStatus : {}}\n loading=${account.authenticated && checkingApis}\n />\n ${account.authenticated\n ? html`\n
    \n
    \n
    \n Incoming events\n onOpenGmailSetup?.(account.id)}\n class=\"text-xs px-2 py-1 rounded-lg ac-btn-ghost\"\n >\n Configure\n \n
    \n <${GmailWatchToggle}\n account=${account}\n watchStatus=${gmailWatchStatus}\n busy=${gmailWatchBusy}\n onEnable=${() => onEnableGmailWatch?.(account.id)}\n onDisable=${() => onDisableGmailWatch?.(account.id)}\n onOpenWebhook=${() => onOpenGmailWebhook?.()}\n />\n
    \n
    \n `\n : null}\n
    \n
    \n onUpdatePermissions?.(account.id)}\n disabled=${account.authenticated && !scopesChanged}\n class=\"w-full sm:w-auto text-xs font-medium px-3 py-1.5 rounded-lg ac-btn-cyan disabled:opacity-50 disabled:cursor-not-allowed\"\n >\n ${account.authenticated ? \"Update Permissions\" : \"Sign in with Google\"}\n \n onEditCredentials?.(account.id)}\n class=\"w-full sm:w-auto text-xs font-medium px-3 py-1.5 rounded-lg ac-btn-secondary\"\n >\n Edit Credentials\n \n
    \n onDisconnect?.(account.id)}\n class=\"text-xs px-2 py-1 rounded-lg ac-btn-ghost w-full sm:w-auto\"\n >\n Disconnect\n \n
    \n
    \n `\n : null}\n
    \n `;\n};\n" }, { "path": "lib/public/js/components/google/add-account-modal.js", "content": "import { h } from \"preact\";\nimport { useEffect, useState } from \"preact/hooks\";\nimport htm from \"htm\";\nimport { ActionButton } from \"../action-button.js\";\nimport { ModalShell } from \"../modal-shell.js\";\nimport { PageHeader } from \"../page-header.js\";\nimport { CloseIcon } from \"../icons.js\";\n\nconst html = htm.bind(h);\n\nexport const AddGoogleAccountModal = ({\n visible,\n onClose,\n onSubmit,\n loading = false,\n defaultEmail = \"\",\n title = \"Add Company Account\",\n}) => {\n const [email, setEmail] = useState(\"\");\n const [error, setError] = useState(\"\");\n\n useEffect(() => {\n if (!visible) return;\n setEmail(String(defaultEmail || \"\"));\n setError(\"\");\n }, [visible, defaultEmail]);\n\n if (!visible) return null;\n\n const submit = async () => {\n setError(\"\");\n const nextEmail = String(email || \"\").trim();\n if (!nextEmail) {\n setError(\"Email is required\");\n return;\n }\n await onSubmit?.({\n email: nextEmail,\n setError,\n });\n };\n\n return html`<${ModalShell}\n visible=${visible}\n onClose=${onClose}\n closeOnOverlayClick=${false}\n panelClassName=\"bg-modal border border-border rounded-xl p-6 max-w-md w-full space-y-4\"\n >\n <${PageHeader}\n title=${title}\n actions=${html`\n \n <${CloseIcon} className=\"w-3.5 h-3.5 text-body\" />\n \n `}\n />\n
    \n
    \n
    \n ${error ? html`
    ${error}
    ` : null}\n
    \n
    \n <${ActionButton}\n onClick=${submit}\n disabled=${loading}\n loading=${loading}\n tone=\"primary\"\n size=\"lg\"\n idleLabel=\"Add Account\"\n loadingLabel=\"Saving...\"\n className=\"w-full px-4 py-2 rounded-lg text-sm\"\n />\n
    \n `;\n};\n" }, { "path": "lib/public/js/components/google/gmail-setup-wizard.js", "content": "import { h } from \"preact\";\nimport {\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from \"preact/hooks\";\nimport htm from \"htm\";\nimport { ModalShell } from \"../modal-shell.js\";\nimport { PageHeader } from \"../page-header.js\";\nimport { CloseIcon } from \"../icons.js\";\nimport { ActionButton } from \"../action-button.js\";\nimport { SessionSelectField } from \"../session-select-field.js\";\nimport { sendAgentMessage } from \"../../lib/api.js\";\nimport { showToast } from \"../toast.js\";\nimport { useAgentSessions } from \"../../hooks/useAgentSessions.js\";\nimport {\n kNoDestinationSessionValue,\n useDestinationSessionSelection,\n} from \"../../hooks/use-destination-session-selection.js\";\nimport {\n getSessionDisplayLabel,\n kDestinationSessionFilter,\n} from \"../../lib/session-keys.js\";\n\nconst html = htm.bind(h);\n\nconst copyText = async (value) => {\n const text = String(value || \"\");\n if (!text) return false;\n try {\n if (navigator?.clipboard?.writeText) {\n await navigator.clipboard.writeText(text);\n return true;\n }\n } catch {}\n try {\n const element = document.createElement(\"textarea\");\n element.value = text;\n element.setAttribute(\"readonly\", \"\");\n element.style.position = \"fixed\";\n element.style.opacity = \"0\";\n document.body.appendChild(element);\n element.select();\n document.execCommand(\"copy\");\n document.body.removeChild(element);\n return true;\n } catch {\n return false;\n }\n};\n\nconst kSetupStepTitles = [\n \"Install + Authenticate gcloud\",\n \"Enable APIs\",\n \"Create Topic + IAM\",\n \"Create Push Subscription\",\n \"Build with your Agent\",\n];\nconst kTutorialStepTitles = kSetupStepTitles.slice(0, 3);\nconst kNoSessionSelectedValue = kNoDestinationSessionValue;\n\nconst renderCommandBlock = (command = \"\", onCopy = () => {}) => html`\n
    \n \n${command}\n
    \n \n Copy\n \n
    \n
    \n`;\n\nexport const GmailSetupWizard = ({\n visible = false,\n account = null,\n clientConfig = null,\n saving = false,\n onClose = () => {},\n onSaveSetup = async () => {},\n onFinish = async () => {},\n}) => {\n const [step, setStep] = useState(0);\n const [projectIdInput, setProjectIdInput] = useState(\"\");\n const [editingProjectId, setEditingProjectId] = useState(false);\n const [localError, setLocalError] = useState(\"\");\n const [projectIdResolved, setProjectIdResolved] = useState(false);\n const [watchEnabled, setWatchEnabled] = useState(false);\n const [sendingToAgent, setSendingToAgent] = useState(false);\n const [agentMessageSent, setAgentMessageSent] = useState(false);\n const [existingWebhookAtOpen, setExistingWebhookAtOpen] = useState(false);\n\n const {\n selectedSessionKey,\n setSelectedSessionKey,\n loading: loadingAgentSessions,\n error: agentSessionsError,\n } = useAgentSessions({\n enabled: visible,\n filter: kDestinationSessionFilter,\n });\n const {\n sessions: selectableAgentSessions,\n destinationSessionKey,\n setDestinationSessionKey,\n selectedDestination,\n } = useDestinationSessionSelection({\n enabled: visible,\n resetKey: String(account?.id || \"\"),\n });\n\n useEffect(() => {\n if (!visible) return;\n setStep(0);\n setLocalError(\"\");\n setProjectIdInput(\"\");\n setEditingProjectId(false);\n setProjectIdResolved(false);\n setWatchEnabled(false);\n setSendingToAgent(false);\n setAgentMessageSent(false);\n setExistingWebhookAtOpen(Boolean(clientConfig?.webhookExists));\n }, [visible, account?.id]);\n\n const commands = clientConfig?.commands || null;\n const hasProjectIdFromConfig = Boolean(\n String(clientConfig?.projectId || \"\").trim() || commands,\n );\n const needsProjectId =\n editingProjectId || (!hasProjectIdFromConfig && !projectIdResolved);\n const detectedProjectId =\n String(projectIdInput || \"\").trim() ||\n String(clientConfig?.projectId || \"\").trim() ||\n \"\";\n const hasExistingWebhookSetup = existingWebhookAtOpen;\n const stepTitles = hasExistingWebhookSetup ? kTutorialStepTitles : kSetupStepTitles;\n const totalSteps = stepTitles.length;\n const client =\n String(account?.client || clientConfig?.client || \"default\").trim() ||\n \"default\";\n\n const canAdvance = useMemo(() => {\n if (needsProjectId) {\n return String(projectIdInput || \"\").trim().length > 0;\n }\n return true;\n }, [needsProjectId, projectIdInput]);\n\n const handleCopy = useCallback(async (value) => {\n const ok = await copyText(value);\n if (ok) {\n showToast(\"Copied to clipboard\", \"success\");\n return;\n }\n showToast(\"Could not copy text\", \"error\");\n }, []);\n\n const handleChangeProjectId = useCallback(() => {\n setLocalError(\"\");\n setProjectIdInput(String(clientConfig?.projectId || \"\").trim());\n setProjectIdResolved(false);\n setEditingProjectId(true);\n }, [clientConfig?.projectId]);\n\n const handleFinish = async () => {\n try {\n setLocalError(\"\");\n await onFinish({\n client,\n projectId: String(projectIdInput || \"\").trim(),\n destination: selectedDestination,\n });\n setWatchEnabled(true);\n setStep((prev) => Math.min(prev + 1, totalSteps - 1));\n } catch (err) {\n setLocalError(err.message || \"Could not finish setup\");\n }\n };\n\n const handleNext = async () => {\n if (saving) return;\n if (needsProjectId) {\n if (!canAdvance) return;\n setLocalError(\"\");\n try {\n await onSaveSetup({\n client,\n projectId: String(projectIdInput || \"\").trim(),\n });\n setEditingProjectId(false);\n setProjectIdResolved(true);\n } catch (err) {\n setLocalError(err.message || \"Could not save project id\");\n return;\n }\n return;\n }\n setStep((prev) => Math.min(prev + 1, totalSteps - 1));\n };\n\n const handleSendToAgent = async () => {\n if (sendingToAgent || agentMessageSent) return;\n try {\n setSendingToAgent(true);\n const accountEmail =\n String(account?.email || \"this account\").trim() || \"this account\";\n const message =\n `I just enabled Gmail watch for \"${accountEmail}\", set up the webhook, ` +\n `and created the transform file. Help me set up what I want to do ` +\n `with incoming email.`;\n await sendAgentMessage({\n message,\n sessionKey: selectedSessionKey,\n });\n setAgentMessageSent(true);\n showToast(\"Message sent to your agent\", \"success\");\n } catch (err) {\n showToast(err.message || \"Could not send message to agent\", \"error\");\n } finally {\n setSendingToAgent(false);\n }\n };\n\n return html`\n <${ModalShell}\n visible=${visible}\n onClose=${onClose}\n closeOnOverlayClick=${false}\n closeOnEscape=${false}\n panelClassName=\"relative bg-modal border border-border rounded-xl p-6 max-w-2xl w-full space-y-4\"\n >\n \n <${CloseIcon} className=\"w-3.5 h-3.5 text-body\" />\n \n
    Gmail Pub / Sub Setup
    \n
    \n ${stepTitles.map(\n (title, idx) => html`\n
    \n `,\n )}\n \n <${PageHeader}\n title=${`Step ${step + 1} of ${totalSteps}: ${stepTitles[step]}`}\n actions=${null}\n />\n ${localError ? html`
    ${localError}
    ` : null}\n ${\n needsProjectId\n ? html`\n \n
    \n ${editingProjectId\n ? \"Change project ID\"\n : \"Project ID required\"}\n
    \n
    \n Find it in the${\" \"}\n \n Google Cloud Console Project Selector\n \n
    \n setProjectIdInput(event.target.value)}\n class=\"w-full bg-field border border-border rounded-lg px-2.5 py-2 text-xs font-mono focus:border-fg-muted focus:outline-none\"\n placeholder=\"my-gcp-project\"\n />\n \n `\n : null\n }\n ${\n !needsProjectId && step === 0\n ? html`\n
    \n
    \n Using project ${detectedProjectId}.\n
    \n
    \n If gcloud is not installed on your computer,\n follow the official install guide:${\" \"}\n \n Google Cloud SDK install docs\n \n
    \n
    \n ${renderCommandBlock(\n `gcloud auth login\\n` +\n `gcloud config set project ${detectedProjectId}`,\n () =>\n handleCopy(\n `gcloud auth login\\n` +\n `gcloud config set project ${detectedProjectId}`,\n ),\n )}\n `\n : null\n }\n ${\n !needsProjectId && step === 1\n ? renderCommandBlock(commands?.enableApis || \"\", () =>\n handleCopy(commands?.enableApis || \"\"),\n )\n : null\n }\n ${\n !needsProjectId && step === 2\n ? html`\n ${renderCommandBlock(\n `${commands?.createTopic || \"\"}\\n\\n${commands?.grantPublisher || \"\"}`.trim(),\n () =>\n handleCopy(\n `${commands?.createTopic || \"\"}\\n\\n${commands?.grantPublisher || \"\"}`.trim(),\n ),\n )}\n `\n : null\n }\n ${\n !hasExistingWebhookSetup && !needsProjectId && step === 3\n ? html`\n ${renderCommandBlock(commands?.createSubscription || \"\", () =>\n handleCopy(commands?.createSubscription || \"\"),\n )}\n \n <${SessionSelectField}\n label=\"Deliver to\"\n sessions=${selectableAgentSessions}\n selectedSessionKey=${destinationSessionKey}\n onChangeSessionKey=${setDestinationSessionKey}\n disabled=${hasExistingWebhookSetup ||\n loadingAgentSessions ||\n saving}\n loading=${loadingAgentSessions}\n error=${agentSessionsError}\n allowNone=${true}\n noneValue=${kNoSessionSelectedValue}\n noneLabel=\"Default\"\n loadingLabel=\"Loading sessions...\"\n helperText=${hasExistingWebhookSetup\n ? \"This Gmail webhook has already been created. To edit delivery routing, ask your agent.\"\n : null}\n selectClassName=\"w-full bg-field border border-border rounded-lg px-2.5 py-2 text-xs font-mono focus:border-fg-muted focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed\"\n helperClassName=\"text-xs text-fg-muted\"\n statusClassName=\"text-[11px] text-fg-muted\"\n errorClassName=\"text-[11px] text-status-error-muted\"\n />\n \n `\n : null\n }\n ${\n !hasExistingWebhookSetup && step === 4\n ? html`\n \n
    \n
    Continue with your agent
    \n
    \n Tell your OpenClaw agent about what you want to build with\n incoming email to continue the setup.\n
    \n
    \n
    \n Send this to session\n
    \n
    \n {\n const nextValue = String(event.target.value || \"\");\n setSelectedSessionKey(\n nextValue === kNoSessionSelectedValue\n ? \"\"\n : nextValue,\n );\n }}\n disabled=${loadingAgentSessions ||\n sendingToAgent ||\n agentMessageSent}\n class=\"flex-1 min-w-0 bg-field border border-border rounded-lg px-2.5 py-2 text-xs font-mono focus:border-fg-muted focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed\"\n >\n ${!selectedSessionKey\n ? html``\n : null}\n ${selectableAgentSessions.map(\n (sessionRow) => html`\n \n `,\n )}\n \n <${ActionButton}\n onClick=${handleSendToAgent}\n disabled=${!selectedSessionKey || agentMessageSent}\n loading=${sendingToAgent}\n idleLabel=${agentMessageSent ? \"Sent\" : \"Send to Agent\"}\n loadingLabel=\"Sending...\"\n tone=\"primary\"\n size=\"sm\"\n className=\"h-[34px] px-3\"\n />\n
    \n ${loadingAgentSessions\n ? html`
    \n Loading sessions...\n
    `\n : null}\n ${agentSessionsError\n ? html`
    \n ${agentSessionsError}\n
    `\n : null}\n
    \n
    \n \n `\n : null\n }\n
    \n ${\n step === 0\n ? html`${!needsProjectId\n ? html`\n Change project ID\n `\n : html`
    `}`\n : html`<${ActionButton}\n onClick=${() => setStep((prev) => Math.max(prev - 1, 0))}\n disabled=${saving}\n idleLabel=\"Back\"\n tone=\"secondary\"\n size=\"md\"\n className=\"w-full justify-center\"\n />`\n }\n ${\n !hasExistingWebhookSetup && step === totalSteps - 2\n ? html`<${ActionButton}\n onClick=${handleFinish}\n disabled=${false}\n loading=${saving}\n idleLabel=\"Enable watch\"\n loadingLabel=\"Enabling...\"\n tone=\"primary\"\n size=\"md\"\n className=\"w-full justify-center\"\n />`\n : step < totalSteps - 1\n ? html`<${ActionButton}\n onClick=${handleNext}\n disabled=${saving || (needsProjectId && !canAdvance)}\n idleLabel=\"Next\"\n tone=\"primary\"\n size=\"md\"\n className=\"w-full justify-center\"\n />`\n : html`<${ActionButton}\n onClick=${onClose}\n disabled=${saving || sendingToAgent}\n idleLabel=\"Done\"\n tone=\"secondary\"\n size=\"md\"\n className=\"w-full justify-center\"\n />`\n }\n
    \n \n `;\n};\n" }, { "path": "lib/public/js/components/google/gmail-watch-toggle.js", "content": "import { h } from \"preact\";\nimport htm from \"htm\";\nimport { Badge } from \"../badge.js\";\nimport { ToggleSwitch } from \"../toggle-switch.js\";\nimport { InfoTooltip } from \"../info-tooltip.js\";\n\nconst html = htm.bind(h);\n\nconst resolveWatchState = ({ watchStatus, busy = false }) => {\n if (busy) {\n const label = watchStatus?.enabled ? \"Stopping\" : \"Starting\";\n return { label, tone: \"warning\" };\n }\n if (!watchStatus?.enabled) return { label: \"Stopped\", tone: \"neutral\" };\n if (watchStatus.enabled && !watchStatus.running)\n return { label: \"Error\", tone: \"danger\" };\n return { label: \"Watching\", tone: \"success\" };\n};\n\nexport const GmailWatchToggle = ({\n account,\n watchStatus = null,\n busy = false,\n onEnable = () => {},\n onDisable = () => {},\n onOpenWebhook = () => {},\n}) => {\n const hasGmailReadScope = Array.isArray(account?.activeScopes)\n ? account.activeScopes.includes(\"gmail:read\")\n : Array.isArray(account?.services)\n ? account.services.includes(\"gmail:read\")\n : false;\n if (!hasGmailReadScope) {\n return html`\n
    \n
    \n Gmail watch requires gmail:read. Add it in permissions\n above, then update permissions.\n
    \n
    \n `;\n }\n\n const state = resolveWatchState({ watchStatus, busy });\n const enabled = Boolean(watchStatus?.enabled);\n return html`\n onOpenWebhook?.()}\n onKeyDown=${(event) => {\n if (event.key !== \"Enter\" && event.key !== \" \") return;\n event.preventDefault();\n onOpenWebhook?.();\n }}\n >\n
    \n 🔔 Gmail\n <${InfoTooltip}\n text=\"Watches this inbox for new email events and routes them to your agent via the Gmail hook.\"\n widthClass=\"w-72\"\n />\n
    \n event.stopPropagation()}\n onKeyDown=${(event) => event.stopPropagation()}\n >\n <${Badge} tone=${state.tone}>${state.label}\n <${ToggleSwitch}\n checked=${enabled}\n disabled=${busy}\n label=\"\"\n onChange=${(nextChecked) => {\n if (busy) return;\n if (nextChecked) onEnable?.();\n else onDisable?.();\n }}\n />\n \n \n `;\n};\n" }, { "path": "lib/public/js/components/google/index.js", "content": "import { h } from \"preact\";\nimport {\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from \"preact/hooks\";\nimport htm from \"htm\";\nimport {\n checkGoogleApis,\n disconnectGoogle,\n fetchGoogleCredentials,\n saveGoogleAccount,\n} from \"../../lib/api.js\";\nimport { getDefaultScopes, toggleScopeLogic } from \"../scope-picker.js\";\nimport { CredentialsModal } from \"../credentials-modal.js\";\nimport { ConfirmDialog } from \"../confirm-dialog.js\";\nimport { showToast } from \"../toast.js\";\nimport { ActionButton } from \"../action-button.js\";\nimport { OverflowMenu, OverflowMenuItem } from \"../overflow-menu.js\";\nimport { GoogleAccountRow } from \"./account-row.js\";\nimport { AddGoogleAccountModal } from \"./add-account-modal.js\";\nimport { useGoogleAccounts } from \"./use-google-accounts.js\";\nimport { useGmailWatch } from \"./use-gmail-watch.js\";\nimport { GmailSetupWizard } from \"./gmail-setup-wizard.js\";\n\nconst html = htm.bind(h);\n\nconst hasScopesChanged = (nextScopes = [], savedScopes = []) =>\n nextScopes.length !== savedScopes.length ||\n nextScopes.some((scope) => !savedScopes.includes(scope));\n\nconst isPersonalAccount = (account = {}) => Boolean(account.personal);\n\nconst kGoogleIconPath = \"/assets/icons/google_icon.svg\";\n\nexport const Google = ({\n gatewayStatus,\n onRestartRequired = () => {},\n onOpenGmailWebhook = () => {},\n}) => {\n const { accounts, loading, hasCompanyCredentials, refreshAccounts } =\n useGoogleAccounts({ gatewayStatus });\n const [expandedAccountId, setExpandedAccountId] = useState(\"\");\n const [scopesByAccountId, setScopesByAccountId] = useState({});\n const [savedScopesByAccountId, setSavedScopesByAccountId] = useState({});\n const [apiStatusByAccountId, setApiStatusByAccountId] = useState({});\n const [checkingByAccountId, setCheckingByAccountId] = useState({});\n const [addMenuOpen, setAddMenuOpen] = useState(false);\n const [credentialsModalState, setCredentialsModalState] = useState({\n visible: false,\n accountId: \"\",\n client: \"default\",\n personal: false,\n title: \"Connect Google Workspace\",\n submitLabel: \"Connect Google\",\n defaultInstrType: \"workspace\",\n initialValues: {},\n });\n const [addCompanyModalOpen, setAddCompanyModalOpen] = useState(false);\n const [savingAddCompany, setSavingAddCompany] = useState(false);\n const [disconnectAccountId, setDisconnectAccountId] = useState(\"\");\n const [gmailWizardState, setGmailWizardState] = useState({\n visible: false,\n accountId: \"\",\n });\n const {\n loading: gmailLoading,\n watchByAccountId,\n clientConfigByClient,\n busyByAccountId,\n savingClient,\n refresh: refreshGmailWatch,\n saveClientSetup,\n startWatchForAccount,\n stopWatchForAccount,\n } = useGmailWatch({ gatewayStatus, accounts });\n\n const hasPersonalAccount = useMemo(\n () => accounts.some((account) => isPersonalAccount(account)),\n [accounts],\n );\n const hasCompanyAccount = useMemo(\n () => accounts.some((account) => !isPersonalAccount(account)),\n [accounts],\n );\n\n const getAccountById = useCallback(\n (accountId) => accounts.find((account) => account.id === accountId) || null,\n [accounts],\n );\n\n const ensureScopesForAccount = useCallback((account) => {\n const nextScopes =\n Array.isArray(account.activeScopes) && account.activeScopes.length\n ? account.activeScopes\n : Array.isArray(account.services) && account.services.length\n ? account.services\n : getDefaultScopes();\n setSavedScopesByAccountId((prev) => ({\n ...prev,\n [account.id]: [...nextScopes],\n }));\n setScopesByAccountId((prev) => {\n const current = prev[account.id];\n if (!current || !hasScopesChanged(current, nextScopes)) {\n return { ...prev, [account.id]: [...nextScopes] };\n }\n return prev;\n });\n }, []);\n\n useEffect(() => {\n if (!accounts.length) {\n setExpandedAccountId(\"\");\n return;\n }\n const firstAwaitingSignInId =\n accounts.find((account) => !account.authenticated)?.id || \"\";\n setExpandedAccountId((previousId) => {\n if (previousId && accounts.some((account) => account.id === previousId)) {\n return previousId;\n }\n return firstAwaitingSignInId;\n });\n accounts.forEach((account) => ensureScopesForAccount(account));\n }, [accounts, ensureScopesForAccount]);\n\n const startAuth = useCallback(\n (accountId) => {\n const account = getAccountById(accountId);\n if (!account) return;\n const scopes =\n scopesByAccountId[accountId] ||\n account.activeScopes ||\n getDefaultScopes();\n if (!scopes.length) {\n window.alert(\"Select at least one service\");\n return;\n }\n const authUrl =\n `/auth/google/start?accountId=${encodeURIComponent(accountId)}` +\n `&services=${encodeURIComponent(scopes.join(\",\"))}&_ts=${Date.now()}`;\n const popup = window.open(\n authUrl,\n `google-auth-${accountId}`,\n \"popup=yes,width=500,height=700\",\n );\n if (!popup || popup.closed) window.location.href = authUrl;\n },\n [getAccountById, scopesByAccountId],\n );\n\n const handleToggleScope = (accountId, scope) => {\n setScopesByAccountId((prev) => ({\n ...prev,\n [accountId]: toggleScopeLogic(prev[accountId] || [], scope),\n }));\n };\n\n const handleCheckApis = useCallback(async (accountId) => {\n setApiStatusByAccountId((prev) => {\n const next = { ...prev };\n delete next[accountId];\n return next;\n });\n setCheckingByAccountId({ [accountId]: true });\n try {\n const data = await checkGoogleApis(accountId);\n if (data.results) {\n setApiStatusByAccountId((prev) => ({\n ...prev,\n [accountId]: data.results,\n }));\n }\n } finally {\n setCheckingByAccountId((prev) => {\n if (!prev[accountId]) return prev;\n const next = { ...prev };\n delete next[accountId];\n return next;\n });\n }\n }, []);\n\n useEffect(() => {\n const handler = async (event) => {\n if (event.data?.google === \"success\") {\n showToast(\"✓ Google account connected\", \"success\");\n const accountId = String(event.data?.accountId || \"\").trim();\n setApiStatusByAccountId({});\n await refreshAccounts();\n await refreshGmailWatch();\n if (accountId) {\n await handleCheckApis(accountId);\n }\n } else if (event.data?.google === \"error\") {\n showToast(\n `✗ Google auth failed: ${event.data.message || \"unknown\"}`,\n \"error\",\n );\n }\n };\n window.addEventListener(\"message\", handler);\n return () => window.removeEventListener(\"message\", handler);\n }, [handleCheckApis, refreshAccounts, refreshGmailWatch]);\n\n useEffect(() => {\n if (!expandedAccountId) return;\n const account = getAccountById(expandedAccountId);\n if (!account?.authenticated) return;\n if (checkingByAccountId[expandedAccountId]) return;\n if (apiStatusByAccountId[expandedAccountId]) return;\n handleCheckApis(expandedAccountId);\n }, [\n accounts,\n apiStatusByAccountId,\n checkingByAccountId,\n expandedAccountId,\n getAccountById,\n handleCheckApis,\n ]);\n\n const handleDisconnect = async (accountId) => {\n const data = await disconnectGoogle(accountId);\n if (!data.ok) {\n showToast(`Failed to disconnect: ${data.error || \"unknown\"}`, \"error\");\n return;\n }\n showToast(\"Google account disconnected\", \"success\");\n setApiStatusByAccountId((prev) => {\n const next = { ...prev };\n delete next[accountId];\n return next;\n });\n await refreshAccounts();\n await refreshGmailWatch();\n };\n\n const openCredentialsModal = ({\n accountId = \"\",\n client = \"default\",\n personal = false,\n title = \"Connect Google Workspace\",\n submitLabel = \"Connect Google\",\n defaultInstrType = personal ? \"personal\" : \"workspace\",\n initialValues = {},\n }) => {\n setCredentialsModalState({\n visible: true,\n accountId,\n client,\n personal,\n title,\n submitLabel,\n defaultInstrType,\n initialValues,\n });\n };\n\n const closeCredentialsModal = () => {\n setCredentialsModalState((prev) => ({ ...prev, visible: false }));\n };\n\n const handleCredentialsSaved = async (account) => {\n if (account?.id) {\n setExpandedAccountId(account.id);\n }\n await refreshAccounts();\n if (account?.id) startAuth(account.id);\n };\n\n const handleAddCompanyAccount = async ({ email, setError }) => {\n setSavingAddCompany(true);\n try {\n const data = await saveGoogleAccount({\n email,\n client: \"default\",\n personal: false,\n services: getDefaultScopes(),\n });\n if (!data.ok) {\n setError?.(data.error || \"Could not add account\");\n return;\n }\n setAddCompanyModalOpen(false);\n if (data.accountId) {\n setExpandedAccountId(data.accountId);\n }\n await refreshAccounts();\n if (data.accountId) startAuth(data.accountId);\n } finally {\n setSavingAddCompany(false);\n }\n };\n\n const handleAddCompanyClick = () => {\n setAddMenuOpen(false);\n if (hasCompanyAccount && hasCompanyCredentials) {\n setAddCompanyModalOpen(true);\n return;\n }\n openCredentialsModal({\n client: \"default\",\n personal: false,\n title: \"Add Company Account\",\n submitLabel: \"Save Credentials\",\n defaultInstrType: \"workspace\",\n });\n };\n\n const handleAddPersonalClick = () => {\n setAddMenuOpen(false);\n openCredentialsModal({\n client: \"personal\",\n personal: true,\n title: \"Add Personal Account\",\n submitLabel: \"Save Credentials\",\n defaultInstrType: \"personal\",\n });\n };\n\n const handleEditCredentials = async (accountId) => {\n const account = getAccountById(accountId);\n if (!account) return;\n const personal = isPersonalAccount(account);\n const client = personal ? \"personal\" : account.client || \"default\";\n let credentialValues = {};\n try {\n const credentialResponse = await fetchGoogleCredentials({\n accountId: account.id,\n client,\n });\n if (credentialResponse?.ok) {\n credentialValues = {\n clientId: String(credentialResponse.clientId || \"\"),\n clientSecret: String(credentialResponse.clientSecret || \"\"),\n };\n }\n } catch {\n showToast(\"Could not load saved client credentials\", \"warning\");\n }\n openCredentialsModal({\n accountId: account.id,\n client,\n personal,\n title: `Edit Credentials (${account.email})`,\n submitLabel: \"Save Credentials\",\n defaultInstrType: personal ? \"personal\" : \"workspace\",\n initialValues: {\n email: account.email,\n ...credentialValues,\n },\n });\n };\n\n const openGmailSetupWizard = (accountId) => {\n setGmailWizardState({\n visible: true,\n accountId: String(accountId || \"\"),\n });\n };\n\n const closeGmailSetupWizard = () => {\n setGmailWizardState({\n visible: false,\n accountId: \"\",\n });\n };\n\n const handleEnableGmailWatch = async (accountId) => {\n const account = getAccountById(accountId);\n if (!account) return;\n const client = String(account.client || \"default\").trim() || \"default\";\n const clientConfig = clientConfigByClient.get(client);\n if (!clientConfig?.configured || !clientConfig?.webhookExists) {\n openGmailSetupWizard(accountId);\n return;\n }\n try {\n const result = await startWatchForAccount(accountId);\n if (result?.restartRequired) {\n onRestartRequired(true);\n }\n showToast(\"Gmail watch enabled\", \"success\");\n } catch (err) {\n showToast(err.message || \"Could not enable Gmail watch\", \"error\");\n }\n };\n\n const handleDisableGmailWatch = async (accountId) => {\n try {\n await stopWatchForAccount(accountId);\n showToast(\"Gmail watch disabled\", \"info\");\n } catch (err) {\n showToast(err.message || \"Could not disable Gmail watch\", \"error\");\n }\n };\n\n const handleFinishGmailSetupWizard = async ({\n client,\n projectId,\n destination = null,\n }) => {\n const accountId = String(gmailWizardState.accountId || \"\").trim();\n if (!accountId) return;\n await saveClientSetup({\n client,\n projectId,\n regeneratePushToken: false,\n });\n await startWatchForAccount(accountId, { destination });\n showToast(\"Gmail setup complete and watch enabled\", \"success\");\n };\n\n const renderEmptyState = () => html`\n
    \n
    \n
    \n \n

    \n Connect Gmail, Calendar, Contacts, Drive, Sheets, Tasks, Docs, and\n Meet.\n

    \n
    \n
    \n
    \n <${ActionButton}\n onClick=${handleAddCompanyClick}\n tone=\"primary\"\n size=\"sm\"\n idleLabel=\"Add Company Account\"\n className=\"w-full font-medium\"\n />\n <${ActionButton}\n onClick=${handleAddPersonalClick}\n tone=\"secondary\"\n size=\"sm\"\n idleLabel=\"Add Personal Account\"\n className=\"w-full font-medium\"\n />\n
    \n
    \n `;\n\n return html`\n
    \n
    \n

    Google Accounts

    \n ${accounts.length\n ? html`\n
    \n <${OverflowMenu}\n open=${addMenuOpen}\n ariaLabel=\"Add Google account\"\n title=\"Add Google account\"\n onClose=${() => setAddMenuOpen(false)}\n onToggle=${() => setAddMenuOpen((prev) => !prev)}\n renderTrigger=${({ onToggle, ariaLabel, title }) => html`\n <${ActionButton}\n onClick=${onToggle}\n tone=\"subtle\"\n size=\"sm\"\n idleLabel=\"+ Add Account\"\n ariaLabel=${ariaLabel}\n title=${title}\n />\n `}\n >\n <${OverflowMenuItem} onClick=${handleAddCompanyClick}>\n Company account\n \n ${!hasPersonalAccount\n ? html`\n <${OverflowMenuItem} onClick=${handleAddPersonalClick}>\n Personal account\n \n `\n : null}\n \n
    \n `\n : null}\n
    \n ${loading\n ? html`
    \n Loading...\n
    `\n : accounts.length\n ? html`\n
    \n ${accounts.map(\n (account) =>\n html`<${GoogleAccountRow}\n key=${account.id}\n account=${account}\n personal=${isPersonalAccount(account)}\n expanded=${expandedAccountId === account.id}\n onToggleExpanded=${(accountId) =>\n setExpandedAccountId((prev) =>\n prev === accountId ? \"\" : accountId,\n )}\n scopes=${scopesByAccountId[account.id] ||\n account.activeScopes ||\n getDefaultScopes()}\n savedScopes=${savedScopesByAccountId[account.id] ||\n account.activeScopes ||\n getDefaultScopes()}\n apiStatus=${apiStatusByAccountId[account.id] || {}}\n checkingApis=${expandedAccountId === account.id &&\n Boolean(checkingByAccountId[account.id])}\n onToggleScope=${handleToggleScope}\n onCheckApis=${handleCheckApis}\n onUpdatePermissions=${(accountId) => startAuth(accountId)}\n onEditCredentials=${handleEditCredentials}\n onDisconnect=${(accountId) =>\n setDisconnectAccountId(accountId)}\n gmailWatchStatus=${watchByAccountId.get(account.id) ||\n null}\n gmailWatchBusy=${Boolean(busyByAccountId[account.id])}\n onEnableGmailWatch=${handleEnableGmailWatch}\n onDisableGmailWatch=${handleDisableGmailWatch}\n onOpenGmailSetup=${openGmailSetupWizard}\n onOpenGmailWebhook=${onOpenGmailWebhook}\n />`,\n )}\n
    \n `\n : renderEmptyState()}\n
    \n\n <${CredentialsModal}\n visible=${credentialsModalState.visible}\n onClose=${closeCredentialsModal}\n onSaved=${handleCredentialsSaved}\n title=${credentialsModalState.title}\n submitLabel=${credentialsModalState.submitLabel}\n defaultInstrType=${credentialsModalState.defaultInstrType}\n client=${credentialsModalState.client}\n personal=${credentialsModalState.personal}\n accountId=${credentialsModalState.accountId}\n initialValues=${credentialsModalState.initialValues}\n />\n\n <${AddGoogleAccountModal}\n visible=${addCompanyModalOpen}\n onClose=${() => setAddCompanyModalOpen(false)}\n onSubmit=${handleAddCompanyAccount}\n loading=${savingAddCompany}\n title=\"Add Company Account\"\n />\n\n <${GmailSetupWizard}\n visible=${gmailWizardState.visible}\n account=${getAccountById(gmailWizardState.accountId)}\n clientConfig=${clientConfigByClient.get(\n String(\n getAccountById(gmailWizardState.accountId)?.client || \"default\",\n ).trim() || \"default\",\n ) || null}\n saving=${savingClient || gmailLoading}\n onClose=${closeGmailSetupWizard}\n onSaveSetup=${saveClientSetup}\n onFinish=${handleFinishGmailSetupWizard}\n />\n\n <${ConfirmDialog}\n visible=${Boolean(disconnectAccountId)}\n title=\"Disconnect Google account?\"\n message=\"Your agent will lose access to Gmail, Calendar, and other Google Workspace services until you reconnect.\"\n confirmLabel=\"Disconnect\"\n cancelLabel=\"Cancel\"\n onCancel=${() => setDisconnectAccountId(\"\")}\n onConfirm=${async () => {\n const accountId = disconnectAccountId;\n setDisconnectAccountId(\"\");\n await handleDisconnect(accountId);\n }}\n />\n `;\n};\n" }, { "path": "lib/public/js/components/google/use-gmail-watch.js", "content": "import { useCallback, useEffect, useMemo, useState } from \"preact/hooks\";\nimport {\n fetchGmailConfig,\n renewGmailWatch,\n saveGmailConfig,\n startGmailWatch,\n stopGmailWatch,\n} from \"../../lib/api.js\";\nimport { useCachedFetch } from \"../../hooks/use-cached-fetch.js\";\n\nexport const useGmailWatch = ({ gatewayStatus, accounts = [] }) => {\n const [busyByAccountId, setBusyByAccountId] = useState({});\n const [savingClient, setSavingClient] = useState(false);\n const accountSignature = useMemo(\n () =>\n accounts\n .map((entry) => String(entry?.id || \"\").trim())\n .filter(Boolean)\n .sort()\n .join(\"|\"),\n [accounts],\n );\n const {\n data: config,\n loading,\n refresh: refreshCachedConfig,\n } = useCachedFetch(\"/api/gmail/config\", fetchGmailConfig, {\n enabled: gatewayStatus === \"running\",\n maxAgeMs: 30000,\n });\n\n const refresh = useCallback(async () => {\n return refreshCachedConfig({ force: true });\n }, [refreshCachedConfig]);\n\n useEffect(() => {\n if (gatewayStatus !== \"running\") return;\n if (!accounts.length) return;\n refresh().catch(() => {});\n }, [accountSignature, accounts.length, gatewayStatus, refresh]);\n\n const watchByAccountId = useMemo(() => {\n const map = new Map();\n for (const entry of config?.accounts || []) {\n map.set(String(entry.accountId || \"\"), entry);\n }\n return map;\n }, [config]);\n\n const clientConfigByClient = useMemo(() => {\n const map = new Map();\n for (const clientConfig of config?.clients || []) {\n map.set(String(clientConfig.client || \"default\"), clientConfig);\n }\n return map;\n }, [config]);\n\n const setBusy = (accountId, busy) => {\n setBusyByAccountId((prev) => {\n const key = String(accountId || \"\");\n if (!key) return prev;\n if (busy) return { ...prev, [key]: true };\n if (!prev[key]) return prev;\n const next = { ...prev };\n delete next[key];\n return next;\n });\n };\n\n const startWatchForAccount = useCallback(async (accountId, { destination = null } = {}) => {\n const key = String(accountId || \"\");\n setBusy(key, true);\n try {\n const data = await startGmailWatch(key, { destination });\n await refresh();\n return data;\n } finally {\n setBusy(key, false);\n }\n }, [refresh]);\n\n const stopWatchForAccount = useCallback(async (accountId) => {\n const key = String(accountId || \"\");\n setBusy(key, true);\n try {\n await stopGmailWatch(key);\n await refresh();\n } finally {\n setBusy(key, false);\n }\n }, [refresh]);\n\n const renewForAccount = useCallback(async (accountId = \"\") => {\n const key = String(accountId || \"\");\n if (key) setBusy(key, true);\n try {\n await renewGmailWatch({ accountId: key, force: true });\n await refresh();\n } finally {\n if (key) setBusy(key, false);\n }\n }, [refresh]);\n\n const saveClientSetup = useCallback(async ({\n client = \"default\",\n projectId = \"\",\n regeneratePushToken = false,\n } = {}) => {\n setSavingClient(true);\n try {\n const data = await saveGmailConfig({\n client,\n projectId,\n regeneratePushToken,\n });\n await refresh();\n return data;\n } catch (err) {\n const message = String(err?.message || \"\");\n if (message.toLowerCase().includes(\"not found\")) {\n throw new Error(\n \"Gmail watch API route not found. Restart AlphaClaw so /api/gmail routes are loaded.\",\n );\n }\n throw err;\n } finally {\n setSavingClient(false);\n }\n }, [refresh]);\n\n return {\n loading,\n config,\n watchByAccountId,\n clientConfigByClient,\n busyByAccountId,\n savingClient,\n refresh,\n saveClientSetup,\n startWatchForAccount,\n stopWatchForAccount,\n renewForAccount,\n };\n};\n" }, { "path": "lib/public/js/components/google/use-google-accounts.js", "content": "import { useCallback, useEffect, useMemo, useRef } from \"preact/hooks\";\nimport { fetchGoogleAccounts } from \"../../lib/api.js\";\nimport { useCachedFetch } from \"../../hooks/use-cached-fetch.js\";\n\nexport const useGoogleAccounts = ({ gatewayStatus }) => {\n const hasRefreshedAfterGatewayRunningRef = useRef(false);\n const { data, loading, refresh } = useCachedFetch(\n \"/api/google/accounts\",\n fetchGoogleAccounts,\n { maxAgeMs: 30000 },\n );\n\n const accounts = useMemo(\n () => (Array.isArray(data?.accounts) ? data.accounts : []),\n [data?.accounts],\n );\n const hasCompanyCredentials = Boolean(data?.hasCompanyCredentials);\n const hasPersonalCredentials = Boolean(data?.hasPersonalCredentials);\n\n const refreshAccounts = useCallback(async () => {\n return refresh({ force: true });\n }, [refresh]);\n\n useEffect(() => {\n if (gatewayStatus !== \"running\") {\n hasRefreshedAfterGatewayRunningRef.current = false;\n return;\n }\n if (hasRefreshedAfterGatewayRunningRef.current) return;\n hasRefreshedAfterGatewayRunningRef.current = true;\n refreshAccounts().catch(() => {});\n }, [gatewayStatus, refreshAccounts]);\n\n return {\n accounts,\n loading,\n hasCompanyCredentials,\n hasPersonalCredentials,\n refreshAccounts,\n };\n};\n" }, { "path": "lib/public/js/components/icons.js", "content": "import { h } from \"preact\";\nimport htm from \"htm\";\n\nconst html = htm.bind(h);\n\nexport const ChevronDownIcon = ({ className = \"\" }) => html`\n \n \n \n`;\n\nexport const CloseIcon = ({ className = \"\" }) => html`\n \n \n \n`;\n\nexport const AddLineIcon = ({ className = \"\" }) => html`\n \n \n \n`;\n\nexport const More2FillIcon = ({ className = \"\" }) => html`\n \n \n \n`;\n\nexport const HomeLineIcon = ({ className = \"\" }) => html`\n \n \n \n`;\n\nexport const FolderLineIcon = ({ className = \"\" }) => html`\n \n \n \n`;\n\nexport const RobotLineIcon = ({ className = \"\" }) => html`\n \n \n \n`;\n\nexport const MarkdownFillIcon = ({ className = \"\" }) => html`\n \n \n \n`;\n\nexport const File3LineIcon = ({ className = \"\" }) => html`\n \n \n \n`;\n\nexport const JavascriptFillIcon = ({ className = \"\" }) => html`\n \n \n \n`;\n\nexport const Image2FillIcon = ({ className = \"\" }) => html`\n \n \n \n`;\n\nexport const ImageAiLineIcon = ({ className = \"\" }) => html`\n \n \n \n`;\n\nexport const Brain2LineIcon = ({ className = \"\" }) => html`\n \n \n \n`;\n\nexport const TextToSpeechLineIcon = ({ className = \"\" }) => html`\n \n \n \n`;\n\nexport const ChatVoiceLineIcon = ({ className = \"\" }) => html`\n \n \n \n`;\n\nexport const Chat4LineIcon = ({ className = \"\" }) => html`\n \n \n \n`;\n\nexport const FileMusicLineIcon = ({ className = \"\" }) => html`\n \n \n \n`;\n\nexport const TerminalFillIcon = ({ className = \"\" }) => html`\n \n \n \n`;\n\nexport const BracesLineIcon = ({ className = \"\" }) => html`\n \n \n \n`;\n\nexport const FileCodeLineIcon = ({ className = \"\" }) => html`\n \n \n \n`;\n\nexport const Database2LineIcon = ({ className = \"\" }) => html`\n \n \n \n`;\n\nexport const HashtagIcon = ({ className = \"\" }) => html`\n \n \n \n`;\n\nexport const BarChartLineIcon = ({ className = \"\" }) => html`\n \n \n \n`;\n\nexport const SignalTowerLineIcon = ({ className = \"\" }) => html`\n \n \n \n`;\n\nexport const GitBranchLineIcon = ({ className = \"\" }) => html`\n \n \n \n`;\n\nexport const GithubFillIcon = ({ className = \"\" }) => html`\n \n \n \n`;\n\nexport const SaveFillIcon = ({ className = \"\" }) => html`\n \n \n \n`;\n\nexport const LockLineIcon = ({ className = \"\" }) => html`\n \n \n \n`;\n\nexport const DeleteBinLineIcon = ({ className = \"\" }) => html`\n \n \n \n`;\n\nexport const FileAddLineIcon = ({ className = \"\" }) => html`\n \n \n \n`;\n\nexport const FolderAddLineIcon = ({ className = \"\" }) => html`\n \n \n \n`;\n\nexport const DownloadLineIcon = ({ className = \"\" }) => html`\n \n \n \n`;\n\nexport const FileCopyLineIcon = ({ className = \"\" }) => html`\n \n \n \n`;\n\nexport const RestartLineIcon = ({ className = \"\" }) => html`\n \n \n \n`;\n\nexport const ErrorWarningLineIcon = ({ className = \"\" }) => html`\n \n \n \n`;\n\nexport const AlarmLineIcon = ({ className = \"\" }) => html`\n \n \n \n`;\n\nexport const HospitalLineIcon = ({ className = \"\" }) => html`\n \n \n \n`;\n\nexport const PulseLineIcon = ({ className = \"\" }) => html`\n \n \n \n`;\n\nexport const EyeLineIcon = ({ className = \"\" }) => html`\n \n \n \n`;\n\nexport const SunIcon = ({ className = \"\" }) => html`\n \n \n \n \n \n \n \n \n \n \n \n`;\n\nexport const MoonIcon = ({ className = \"\" }) => html`\n \n \n \n`;\n\nexport const FullscreenLineIcon = ({ className = \"\" }) => html`\n \n \n \n`;\n\nexport const ComputerLineIcon = ({ className = \"\" }) => html`\n \n \n \n`;\n" }, { "path": "lib/public/js/components/info-tooltip.js", "content": "import { h } from \"preact\";\nimport htm from \"htm\";\nimport { Tooltip } from \"./tooltip.js\";\n\nconst html = htm.bind(h);\n\nexport const InfoTooltip = ({ text = \"\", widthClass = \"w-64\" }) => html`\n <${Tooltip} text=${text} widthClass=${widthClass}>\n ?\n \n`;\n" }, { "path": "lib/public/js/components/loading-spinner.js", "content": "import { h } from \"preact\";\nimport htm from \"htm\";\n\nconst html = htm.bind(h);\n\nexport const LoadingSpinner = ({\n className = \"h-4 w-4\",\n ariaHidden = true,\n style = \"\",\n}) => html`\n