@agimon-ai/po-web-dashboard 0.0.0-alpha.0

package/dist/web/features/sessions/useSessionRail.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSessionRail.mjs","names":[],"sources":["../../../../src/web/features/sessions/useSessionRail.tsx"],"sourcesContent":["import type { WebTemplateRail } from '@agimon-ai/po-core/web';\nimport { useNavigate } from '@tanstack/react-router';\nimport { useStore } from '@tanstack/react-store';\nimport { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';\n\nimport { PluginSurface } from '../../components/PluginSurface';\nimport { activityGroups, subscribeActivitySources } from '../../lib/composition';\nimport { listDirectory, listWorkspaces, removeWorkspace, searchDirectories, stopSession } from '../../lib/hubApi';\nimport { HOST_SLOTS } from '../../lib/pluginRegistry';\nimport { loadSessionAvatar } from '../../lib/sessionAvatar';\nimport { removeSessionMcpSetup } from '../../lib/sessionMcpApi';\nimport { buildRailWorkspaces } from '../../lib/sessionRailModel';\nimport { DEFAULT_REPOSITORY_SETTINGS_SECTION, DEFAULT_SETTINGS_SECTION } from '../../lib/settingsSections';\nimport { closeNewSession, newSessionStore, openNewSession } from '../../stores/newSessionStore';\nimport { paletteStore } from '../../stores/paletteStore';\nimport { openResumeDialog, railRestartStore, restartDashboardSession } from '../../stores/railDialogStore';\nimport { openRemoteDialog, remoteAccessStore, turnRemoteAccessOff } from '../../stores/remoteAccessStore';\nimport { applySessionRemoved, resolveParentId, sessionsStore, type SessionMeta } from '../../stores/sessionsStore';\nimport { renameSession, sessionStoreFor } from '../../stores/sessionStore';\nimport {\n  admitDashboardWorkspace,\n  resetWorkspaceAdmission,\n  workspaceAdmissionStore,\n} from '../../stores/workspaceAdmissionStore';\nimport {\n  applyWorkspaceRemoved,\n  applyWorkspacesSnapshot,\n  selectWorkspace,\n  workspacesStore,\n} from '../../stores/workspacesStore';\n\nconst STATUS_REFRESH_MS = 30_000;\n\nfunction isEditable(target: EventTarget | null): boolean {\n  if (!(target instanceof HTMLElement)) return false;\n  return target.isContentEditable || target.tagName === 'INPUT' || target.tagName === 'TEXTAREA';\n}\n\n/** A key pressed inside an overlay belongs to that overlay, never to the rail. */\nfunction insideOverlay(target: EventTarget | null): boolean {\n  return target instanceof Element && target.closest('[role=\"dialog\"], [role=\"menu\"], [role=\"alertdialog\"]') !== null;\n}\n\n/**\n * Loads each distinct profile avatar once, keyed by profile and icon version so\n * sessions sharing a persona share one image, and revokes images no card shows.\n */\nfunction useSessionAvatars(order: readonly string[], byId: Readonly<Record<string, SessionMeta>>) {\n  const wanted = new Map<string, string>();\n  for (const id of order) {\n    const profile = byId[id]?.summary.profile;\n    if (profile?.iconVersion !== undefined) wanted.set(id, `${profile.name}:${profile.iconVersion}`);\n  }\n  const wantedKey = [...wanted].map(([id, key]) => `${id}=${key}`).join('\\n');\n  const [loaded, setLoaded] = useState<Readonly<Record<string, string>>>({});\n  const requested = useRef(new Set<string>());\n\n  useEffect(() => {\n    const keys = new Set(wanted.values());\n    for (const [id, key] of wanted) {\n      if (requested.current.has(key)) continue;\n      requested.current.add(key);\n      const version = key.slice(key.lastIndexOf(':') + 1);\n      void loadSessionAvatar(id, version).then(\n        (url) => setLoaded((previous) => ({ ...previous, [key]: url })),\n        // A missing image leaves the initials in place; the next icon version retries.\n        () => undefined,\n      );\n    }\n    setLoaded((previous) => {\n      const stale = Object.keys(previous).filter((key) => !keys.has(key));\n      if (stale.length === 0) return previous;\n      const next = { ...previous };\n      for (const key of stale) {\n        URL.revokeObjectURL(next[key]!);\n        delete next[key];\n        requested.current.delete(key);\n      }\n      return next;\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- `wanted` is rebuilt each render; `wantedKey` tracks its content.\n  }, [wantedKey]);\n\n  useEffect(\n    () => () => {\n      setLoaded((previous) => {\n        for (const url of Object.values(previous)) URL.revokeObjectURL(url);\n        return {};\n      });\n    },\n    [],\n  );\n\n  const urls: Record<string, string> = {};\n  for (const [id, key] of wanted) {\n    const url = loaded[key];\n    if (url !== undefined) urls[id] = url;\n  }\n  return urls;\n}\n\n/**\n * The session rail as data and actions for the active template.\n *\n * Owns what must keep working whichever template renders (or hides) the rail:\n * the status clock, workspace hydration, the Ctrl+T and 1-9 shortcuts, and the\n * actions that reach the hub and the router.\n */\nexport function useSessionRail({ onDismiss }: { onDismiss?: () => void }): WebTemplateRail {\n  const navigate = useNavigate();\n  const scrollTop = useRef(0);\n  const scrollRef = useCallback((element: HTMLElement | null) => {\n    if (element === null) return;\n    element.scrollTop = scrollTop.current;\n    return () => {\n      scrollTop.current = element.scrollTop;\n    };\n  }, []);\n  const order = useStore(sessionsStore, (state) => state.order);\n  const byId = useStore(sessionsStore, (state) => state.byId);\n  const activeId = useStore(sessionsStore, (state) => state.activeId);\n  const workspaceOrder = useStore(workspacesStore, (state) => state.order);\n  const workspacesById = useStore(workspacesStore, (state) => state.byId);\n  const selectedWorkspaceId = useStore(workspacesStore, (state) => state.selectedId);\n  const workspacesHydrated = useStore(workspacesStore, (state) => state.hydrated);\n  const hasDialog = useStore(sessionStoreFor(activeId), (state) => state.dialog !== null);\n  const remote = useStore(remoteAccessStore, (state) => state.view);\n  const creating = useStore(newSessionStore, (state) => state);\n  const [now, setNow] = useState(() => Date.now());\n  const restarts = useStore(railRestartStore);\n  const avatarUrls = useSessionAvatars(order, byId);\n  const backgroundWorkKey = useSyncExternalStore(\n    useCallback(\n      (listener: () => void) => {\n        const releases = [\n          subscribeActivitySources(listener),\n          ...order.map((id) => {\n            const subscription = sessionStoreFor(id).subscribe(listener);\n            return () => subscription.unsubscribe();\n          }),\n        ];\n        return () => releases.forEach((release) => release());\n      },\n      [order],\n    ),\n    () =>\n      JSON.stringify(\n        order.filter((id) => {\n          const { statuses, widgets } = sessionStoreFor(id).state;\n          return activityGroups(statuses, widgets, id).some(\n            (group) => group.active && group.marksBackgroundWork !== false,\n          );\n        }),\n      ),\n  );\n  const backgroundWorkSessions = useMemo<ReadonlySet<string>>(\n    () => new Set(JSON.parse(backgroundWorkKey) as string[]),\n    [backgroundWorkKey],\n  );\n\n  useEffect(() => {\n    const timer = setInterval(() => setNow(Date.now()), STATUS_REFRESH_MS);\n    return () => clearInterval(timer);\n  }, []);\n\n  useEffect(() => {\n    if (workspacesHydrated) return;\n    let stale = false;\n    void listWorkspaces().then((result) => {\n      if (!stale && 'workspaces' in result) applyWorkspacesSnapshot(result);\n    });\n    return () => {\n      stale = true;\n    };\n  }, [workspacesHydrated]);\n\n  useEffect(() => {\n    const workspaceId = activeId === null ? undefined : byId[activeId]?.summary.workspaceId;\n    if (workspaceId !== undefined && workspacesById[workspaceId] !== undefined) selectWorkspace(workspaceId);\n  }, [activeId, byId, workspacesById]);\n\n  useEffect(() => {\n    const onKeyDown = (event: KeyboardEvent): void => {\n      if (event.ctrlKey && !event.metaKey && !event.altKey && event.key === 't') {\n        event.preventDefault();\n        onDismiss?.();\n        openNewSession(selectedWorkspaceId);\n        return;\n      }\n      if (event.ctrlKey || event.metaKey || event.altKey || event.defaultPrevented) return;\n      if (isEditable(event.target) || insideOverlay(event.target) || paletteStore.state.open || hasDialog) return;\n      const ordinal = Number.parseInt(event.key, 10);\n      if (!Number.isInteger(ordinal) || ordinal < 1 || ordinal > 9) return;\n      const target = order[ordinal - 1];\n      if (target === undefined) return;\n      event.preventDefault();\n      onDismiss?.();\n      void navigate({ to: '/session/$sessionId', params: { sessionId: target } });\n    };\n    window.addEventListener('keydown', onKeyDown);\n    return () => window.removeEventListener('keydown', onKeyDown);\n  }, [order, hasDialog, navigate, onDismiss, selectedWorkspaceId]);\n\n  const workspaces = useMemo(\n    () =>\n      buildRailWorkspaces({\n        order,\n        byId,\n        activeId,\n        workspaceOrder,\n        workspacesById,\n        nested: new Set(order.filter((id) => resolveParentId(byId, id) !== undefined)),\n        now,\n        restarts,\n        avatarUrls,\n        backgroundWorkSessions,\n      }),\n    [order, byId, activeId, workspaceOrder, workspacesById, now, restarts, avatarUrls, backgroundWorkSessions],\n  );\n\n  const addingWorkspace =\n    creating.open && (creating.workspaceId === null || workspacesById[creating.workspaceId] === undefined);\n\n  return {\n    workspaces,\n    scrollRef,\n    remote: {\n      status: remote?.status ?? 'off',\n      deviceCount: remote?.devices.length ?? 0,\n      ...(remote?.publicUrl === undefined ? {} : { host: new URL(remote.publicUrl).host }),\n      ...(remote?.error === undefined ? {} : { error: remote.error }),\n    },\n    pluginContent: <PluginSurface slot={HOST_SLOTS.rail} sessionId={activeId} />,\n    ...(addingWorkspace ? { addWorkspace: { suggestedPaths: remote?.settings.sandbox.workspaces ?? [] } } : {}),\n    actions: {\n      openSession(sessionId) {\n        onDismiss?.();\n        void navigate({ to: '/session/$sessionId', params: { sessionId } });\n      },\n      renameSession(sessionId, name) {\n        const trimmed = name.trim();\n        if (trimmed !== '' && trimmed !== byId[sessionId]?.summary.name) renameSession(trimmed, sessionId);\n      },\n      restartSession(sessionId) {\n        void restartDashboardSession(sessionId);\n      },\n      async removeSession(sessionId) {\n        const result = await stopSession(sessionId);\n        if ('error' in result) return { error: result.error };\n        applySessionRemoved({ sessionId });\n        return undefined;\n      },\n      resumeSession(sessionId) {\n        openResumeDialog({ sessionId });\n      },\n      createSession(workspaceId) {\n        selectWorkspace(workspaceId);\n        onDismiss?.();\n        openNewSession(workspaceId);\n      },\n      resumeInWorkspace(workspaceId) {\n        openResumeDialog({ workspaceId });\n      },\n      openWorkspaceSettings(workspaceId) {\n        selectWorkspace(workspaceId);\n        onDismiss?.();\n        void navigate({\n          to: '/settings/$section',\n          params: { section: DEFAULT_REPOSITORY_SETTINGS_SECTION },\n          search: { workspace: workspaceId },\n        });\n      },\n      async deleteWorkspace(workspaceId) {\n        const result = await removeWorkspace(workspaceId);\n        if ('error' in result) return { error: result.error };\n        applyWorkspaceRemoved({ workspaceId });\n        return undefined;\n      },\n      openAddWorkspace() {\n        onDismiss?.();\n        openNewSession(null);\n      },\n      closeAddWorkspace() {\n        if (workspaceAdmissionStore.state.pending) return;\n        resetWorkspaceAdmission();\n        closeNewSession();\n      },\n      async addWorkspace(input) {\n        const result = await admitDashboardWorkspace(input);\n        if (result === undefined) closeNewSession();\n        return result;\n      },\n      searchDirectories,\n      listDirectory,\n      async removePendingSetup(sessionId, setupId) {\n        const workspaceId = byId[sessionId]?.summary.workspaceId;\n        if (workspaceId === undefined) return { error: 'This session belongs to no workspace.' };\n        const result = await removeSessionMcpSetup(workspaceId, sessionId, setupId);\n        return 'error' in result ? { error: result.error } : undefined;\n      },\n      openSettings() {\n        onDismiss?.();\n        void navigate({\n          to: '/settings/$section',\n          params: { section: DEFAULT_SETTINGS_SECTION },\n          search: { workspace: selectedWorkspaceId ?? undefined },\n        });\n      },\n      openRemoteAccess() {\n        onDismiss?.();\n        openRemoteDialog();\n      },\n      turnRemoteAccessOff() {\n        void turnRemoteAccessOff();\n      },\n      renderSessionMenuItems: (sessionId) => <PluginSurface slot={HOST_SLOTS.sessionMenu} sessionId={sessionId} />,\n    },\n  };\n}\n"],"mappings":"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"}

package/dist/web/features/settings/AppearanceSettings.cjs

@@ -0,0 +1,126 @@
+const require_themeStore = require("../../stores/themeStore.cjs");
+const require_TemplateSettings = require("./TemplateSettings.cjs");
+let _tanstack_react_store = require("@tanstack/react-store");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _agimon_ai_po_web_components = require("@agimon-ai/po-web-components");
+//#region src/web/features/settings/AppearanceSettings.tsx
+/** The accents a swatch previews, in the order the bar shows them. */
+const SWATCH_ACCENTS = [
+	"blue",
+	"green",
+	"yellow",
+	"red",
+	"magenta",
+	"cyan"
+];
+/** A miniature of the cockpit in the theme's own colours, drawn from its tokens rather than the page's. */
+function ThemeSwatch({ theme }) {
+	const { tokens } = theme;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"aria-hidden": true,
+		className: "flex h-[74px] w-full overflow-hidden rounded border",
+		style: {
+			backgroundColor: tokens.bg,
+			borderColor: tokens.border
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex w-[34%] flex-col gap-1 p-1.5",
+			style: { backgroundColor: tokens.rail },
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "h-[7px] w-full rounded-sm",
+					style: { backgroundColor: tokens.selected }
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "h-[7px] w-3/4 rounded-sm",
+					style: { backgroundColor: tokens.panel }
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "h-[7px] w-3/4 rounded-sm",
+					style: { backgroundColor: tokens.panel }
+				})
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-1 flex-col justify-between p-1.5",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col gap-1",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "h-[5px] w-2/3 rounded-sm",
+					style: { backgroundColor: tokens.text }
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "h-[5px] w-1/2 rounded-sm",
+					style: { backgroundColor: tokens.dim }
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex gap-1",
+				children: SWATCH_ACCENTS.map((accent) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "h-2 w-2 rounded-full",
+					style: { backgroundColor: tokens[accent] }
+				}, accent))
+			})]
+		})]
+	});
+}
+/**
+* The appearance page: the colour theme, then the layout Po opens with. A
+* theme applies at once and is remembered per browser; a layout is saved to
+* Po config and needs an explicit save, because it can differ per workspace.
+*/
+function AppearanceSettings({ templateTarget, onTemplateTargetChange }) {
+	const current = (0, _tanstack_react_store.useStore)(require_themeStore.themeStore, (state) => state.name);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.SettingsPage, {
+		"data-testid": "appearance-settings",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.SettingsHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.SettingsTitle, { children: "Appearance" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.SettingsDescription, { children: "Choose how Po looks and which layout it opens with." })] }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.SettingsSection, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.SettingsSectionHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.SettingsSectionTitle, { children: "Theme" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.SettingsSectionDescription, { children: "Applies straight away and is remembered in this browser. Plugin tabs follow it too." })] }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.RadioGroup, {
+					"aria-label": "Theme",
+					"data-testid": "theme-list",
+					className: "grid grid-cols-1 gap-3 min-[480px]:grid-cols-2 lg:grid-cols-3",
+					value: current,
+					onValueChange: require_themeStore.selectTheme,
+					children: require_themeStore.availableThemes().map((theme) => {
+						const selected = theme.name === current;
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.RadioGroupCard, {
+							value: theme.name,
+							"data-testid": `theme-${theme.name}`,
+							"data-selected": selected,
+							className: "flex flex-col gap-3 rounded-lg p-3",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThemeSwatch, { theme }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									className: "flex min-w-0 flex-1 flex-col",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "truncate text-base font-semibold text-doom-hi",
+										children: theme.label
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "text-sm text-doom-dim first-letter:uppercase",
+										children: theme.scheme
+									})]
+								}), selected ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.CheckIcon, { className: "size-4 shrink-0 text-doom-green" }) : null]
+							})]
+						}, theme.name);
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.SettingsNote, { children: [
+					"A theme is a JSON file of twenty colour tokens. The format lives in",
+					" ",
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
+						className: "font-mono",
+						children: "@agimon-ai/po-web-components"
+					}),
+					"."
+				] })
+			] }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TemplateSettings.TemplateSettings, {
+				target: templateTarget,
+				onTargetChange: onTemplateTargetChange
+			})
+		]
+	});
+}
+//#endregion
+exports.AppearanceSettings = AppearanceSettings;
+
+//# sourceMappingURL=AppearanceSettings.cjs.map

package/dist/web/features/settings/AppearanceSettings.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppearanceSettings.cjs","names":["useStore","themeStore","SettingsPage","SettingsHeader","SettingsTitle","SettingsDescription","SettingsSection","SettingsSectionHeader","SettingsSectionTitle","SettingsSectionDescription","RadioGroup","selectTheme","availableThemes","RadioGroupCard","CheckIcon","SettingsNote","TemplateSettings"],"sources":["../../../../src/web/features/settings/AppearanceSettings.tsx"],"sourcesContent":["import {\n  CheckIcon,\n  RadioGroup,\n  RadioGroupCard,\n  SettingsDescription,\n  SettingsHeader,\n  SettingsNote,\n  SettingsPage,\n  SettingsSection,\n  SettingsSectionDescription,\n  SettingsSectionHeader,\n  SettingsSectionTitle,\n  SettingsTitle,\n} from '@agimon-ai/po-web-components';\nimport type { ThemeConfig } from '@agimon-ai/po-web-components/theme';\nimport { useStore } from '@tanstack/react-store';\n\nimport { availableThemes, selectTheme, themeStore } from '../../stores/themeStore';\nimport { TemplateSettings } from './TemplateSettings';\n\n/** The accents a swatch previews, in the order the bar shows them. */\nconst SWATCH_ACCENTS = ['blue', 'green', 'yellow', 'red', 'magenta', 'cyan'] as const;\n\n/** A miniature of the cockpit in the theme's own colours, drawn from its tokens rather than the page's. */\nfunction ThemeSwatch({ theme }: { theme: ThemeConfig }) {\n  const { tokens } = theme;\n  return (\n    <div\n      aria-hidden\n      className=\"flex h-[74px] w-full overflow-hidden rounded border\"\n      style={{ backgroundColor: tokens.bg, borderColor: tokens.border }}\n    >\n      <div className=\"flex w-[34%] flex-col gap-1 p-1.5\" style={{ backgroundColor: tokens.rail }}>\n        <span className=\"h-[7px] w-full rounded-sm\" style={{ backgroundColor: tokens.selected }} />\n        <span className=\"h-[7px] w-3/4 rounded-sm\" style={{ backgroundColor: tokens.panel }} />\n        <span className=\"h-[7px] w-3/4 rounded-sm\" style={{ backgroundColor: tokens.panel }} />\n      </div>\n      <div className=\"flex flex-1 flex-col justify-between p-1.5\">\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"h-[5px] w-2/3 rounded-sm\" style={{ backgroundColor: tokens.text }} />\n          <span className=\"h-[5px] w-1/2 rounded-sm\" style={{ backgroundColor: tokens.dim }} />\n        </div>\n        <div className=\"flex gap-1\">\n          {SWATCH_ACCENTS.map((accent) => (\n            <span key={accent} className=\"h-2 w-2 rounded-full\" style={{ backgroundColor: tokens[accent] }} />\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n\n/**\n * The appearance page: the colour theme, then the layout Po opens with. A\n * theme applies at once and is remembered per browser; a layout is saved to\n * Po config and needs an explicit save, because it can differ per workspace.\n */\nexport function AppearanceSettings({\n  templateTarget,\n  onTemplateTargetChange,\n}: {\n  templateTarget: string;\n  onTemplateTargetChange: (target: string) => void;\n}) {\n  const current = useStore(themeStore, (state) => state.name);\n  return (\n    <SettingsPage data-testid=\"appearance-settings\">\n      <SettingsHeader>\n        <SettingsTitle>Appearance</SettingsTitle>\n        <SettingsDescription>Choose how Po looks and which layout it opens with.</SettingsDescription>\n      </SettingsHeader>\n      <SettingsSection>\n        <SettingsSectionHeader>\n          <SettingsSectionTitle>Theme</SettingsSectionTitle>\n          <SettingsSectionDescription>\n            Applies straight away and is remembered in this browser. Plugin tabs follow it too.\n          </SettingsSectionDescription>\n        </SettingsSectionHeader>\n        <RadioGroup\n          aria-label=\"Theme\"\n          data-testid=\"theme-list\"\n          className=\"grid grid-cols-1 gap-3 min-[480px]:grid-cols-2 lg:grid-cols-3\"\n          value={current}\n          onValueChange={selectTheme}\n        >\n          {availableThemes().map((theme) => {\n            const selected = theme.name === current;\n            return (\n              <RadioGroupCard\n                key={theme.name}\n                value={theme.name}\n                data-testid={`theme-${theme.name}`}\n                data-selected={selected}\n                className=\"flex flex-col gap-3 rounded-lg p-3\"\n              >\n                <ThemeSwatch theme={theme} />\n                <span className=\"flex items-center gap-2\">\n                  <span className=\"flex min-w-0 flex-1 flex-col\">\n                    <span className=\"truncate text-base font-semibold text-doom-hi\">{theme.label}</span>\n                    <span className=\"text-sm text-doom-dim first-letter:uppercase\">{theme.scheme}</span>\n                  </span>\n                  {selected ? <CheckIcon className=\"size-4 shrink-0 text-doom-green\" /> : null}\n                </span>\n              </RadioGroupCard>\n            );\n          })}\n        </RadioGroup>\n        <SettingsNote>\n          A theme is a JSON file of twenty colour tokens. The format lives in{' '}\n          <code className=\"font-mono\">@agimon-ai/po-web-components</code>.\n        </SettingsNote>\n      </SettingsSection>\n      <TemplateSettings target={templateTarget} onTargetChange={onTemplateTargetChange} />\n    </SettingsPage>\n  );\n}\n"],"mappings":"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"}

package/dist/web/features/settings/AppearanceSettings.d.mts

@@ -0,0 +1,12 @@
+//#region src/web/features/settings/AppearanceSettings.d.ts
+/**
+ * The appearance page: the colour theme, then the layout Po opens with. A
+ * theme applies at once and is remembered per browser; a layout is saved to
+ * Po config and needs an explicit save, because it can differ per workspace.
+ */
+export declare function AppearanceSettings({ templateTarget, onTemplateTargetChange }: {
+  templateTarget: string;
+  onTemplateTargetChange: (target: string) => void;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=AppearanceSettings.d.mts.map

package/dist/web/features/settings/AppearanceSettings.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppearanceSettings.d.mts","names":[],"sources":["../../../../src/web/features/settings/AppearanceSettings.tsx"],"mappings":";;;;;;wBAyDgB,qBACd,gBACA;EAEA;EACA,yBAAyB;oBAC1B,IAAA"}

package/dist/web/features/settings/AppearanceSettings.mjs

@@ -0,0 +1,126 @@
+import { availableThemes, selectTheme, themeStore } from "../../stores/themeStore.mjs";
+import { TemplateSettings } from "./TemplateSettings.mjs";
+import { useStore } from "@tanstack/react-store";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, RadioGroup, RadioGroupCard, SettingsDescription, SettingsHeader, SettingsNote, SettingsPage, SettingsSection, SettingsSectionDescription, SettingsSectionHeader, SettingsSectionTitle, SettingsTitle } from "@agimon-ai/po-web-components";
+//#region src/web/features/settings/AppearanceSettings.tsx
+/** The accents a swatch previews, in the order the bar shows them. */
+const SWATCH_ACCENTS = [
+	"blue",
+	"green",
+	"yellow",
+	"red",
+	"magenta",
+	"cyan"
+];
+/** A miniature of the cockpit in the theme's own colours, drawn from its tokens rather than the page's. */
+function ThemeSwatch({ theme }) {
+	const { tokens } = theme;
+	return /* @__PURE__ */ jsxs("div", {
+		"aria-hidden": true,
+		className: "flex h-[74px] w-full overflow-hidden rounded border",
+		style: {
+			backgroundColor: tokens.bg,
+			borderColor: tokens.border
+		},
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex w-[34%] flex-col gap-1 p-1.5",
+			style: { backgroundColor: tokens.rail },
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "h-[7px] w-full rounded-sm",
+					style: { backgroundColor: tokens.selected }
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "h-[7px] w-3/4 rounded-sm",
+					style: { backgroundColor: tokens.panel }
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "h-[7px] w-3/4 rounded-sm",
+					style: { backgroundColor: tokens.panel }
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-1 flex-col justify-between p-1.5",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "h-[5px] w-2/3 rounded-sm",
+					style: { backgroundColor: tokens.text }
+				}), /* @__PURE__ */ jsx("span", {
+					className: "h-[5px] w-1/2 rounded-sm",
+					style: { backgroundColor: tokens.dim }
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "flex gap-1",
+				children: SWATCH_ACCENTS.map((accent) => /* @__PURE__ */ jsx("span", {
+					className: "h-2 w-2 rounded-full",
+					style: { backgroundColor: tokens[accent] }
+				}, accent))
+			})]
+		})]
+	});
+}
+/**
+* The appearance page: the colour theme, then the layout Po opens with. A
+* theme applies at once and is remembered per browser; a layout is saved to
+* Po config and needs an explicit save, because it can differ per workspace.
+*/
+function AppearanceSettings({ templateTarget, onTemplateTargetChange }) {
+	const current = useStore(themeStore, (state) => state.name);
+	return /* @__PURE__ */ jsxs(SettingsPage, {
+		"data-testid": "appearance-settings",
+		children: [
+			/* @__PURE__ */ jsxs(SettingsHeader, { children: [/* @__PURE__ */ jsx(SettingsTitle, { children: "Appearance" }), /* @__PURE__ */ jsx(SettingsDescription, { children: "Choose how Po looks and which layout it opens with." })] }),
+			/* @__PURE__ */ jsxs(SettingsSection, { children: [
+				/* @__PURE__ */ jsxs(SettingsSectionHeader, { children: [/* @__PURE__ */ jsx(SettingsSectionTitle, { children: "Theme" }), /* @__PURE__ */ jsx(SettingsSectionDescription, { children: "Applies straight away and is remembered in this browser. Plugin tabs follow it too." })] }),
+				/* @__PURE__ */ jsx(RadioGroup, {
+					"aria-label": "Theme",
+					"data-testid": "theme-list",
+					className: "grid grid-cols-1 gap-3 min-[480px]:grid-cols-2 lg:grid-cols-3",
+					value: current,
+					onValueChange: selectTheme,
+					children: availableThemes().map((theme) => {
+						const selected = theme.name === current;
+						return /* @__PURE__ */ jsxs(RadioGroupCard, {
+							value: theme.name,
+							"data-testid": `theme-${theme.name}`,
+							"data-selected": selected,
+							className: "flex flex-col gap-3 rounded-lg p-3",
+							children: [/* @__PURE__ */ jsx(ThemeSwatch, { theme }), /* @__PURE__ */ jsxs("span", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ jsxs("span", {
+									className: "flex min-w-0 flex-1 flex-col",
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "truncate text-base font-semibold text-doom-hi",
+										children: theme.label
+									}), /* @__PURE__ */ jsx("span", {
+										className: "text-sm text-doom-dim first-letter:uppercase",
+										children: theme.scheme
+									})]
+								}), selected ? /* @__PURE__ */ jsx(CheckIcon, { className: "size-4 shrink-0 text-doom-green" }) : null]
+							})]
+						}, theme.name);
+					})
+				}),
+				/* @__PURE__ */ jsxs(SettingsNote, { children: [
+					"A theme is a JSON file of twenty colour tokens. The format lives in",
+					" ",
+					/* @__PURE__ */ jsx("code", {
+						className: "font-mono",
+						children: "@agimon-ai/po-web-components"
+					}),
+					"."
+				] })
+			] }),
+			/* @__PURE__ */ jsx(TemplateSettings, {
+				target: templateTarget,
+				onTargetChange: onTemplateTargetChange
+			})
+		]
+	});
+}
+//#endregion
+export { AppearanceSettings };
+
+//# sourceMappingURL=AppearanceSettings.mjs.map

package/dist/web/features/settings/AppearanceSettings.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppearanceSettings.mjs","names":[],"sources":["../../../../src/web/features/settings/AppearanceSettings.tsx"],"sourcesContent":["import {\n  CheckIcon,\n  RadioGroup,\n  RadioGroupCard,\n  SettingsDescription,\n  SettingsHeader,\n  SettingsNote,\n  SettingsPage,\n  SettingsSection,\n  SettingsSectionDescription,\n  SettingsSectionHeader,\n  SettingsSectionTitle,\n  SettingsTitle,\n} from '@agimon-ai/po-web-components';\nimport type { ThemeConfig } from '@agimon-ai/po-web-components/theme';\nimport { useStore } from '@tanstack/react-store';\n\nimport { availableThemes, selectTheme, themeStore } from '../../stores/themeStore';\nimport { TemplateSettings } from './TemplateSettings';\n\n/** The accents a swatch previews, in the order the bar shows them. */\nconst SWATCH_ACCENTS = ['blue', 'green', 'yellow', 'red', 'magenta', 'cyan'] as const;\n\n/** A miniature of the cockpit in the theme's own colours, drawn from its tokens rather than the page's. */\nfunction ThemeSwatch({ theme }: { theme: ThemeConfig }) {\n  const { tokens } = theme;\n  return (\n    <div\n      aria-hidden\n      className=\"flex h-[74px] w-full overflow-hidden rounded border\"\n      style={{ backgroundColor: tokens.bg, borderColor: tokens.border }}\n    >\n      <div className=\"flex w-[34%] flex-col gap-1 p-1.5\" style={{ backgroundColor: tokens.rail }}>\n        <span className=\"h-[7px] w-full rounded-sm\" style={{ backgroundColor: tokens.selected }} />\n        <span className=\"h-[7px] w-3/4 rounded-sm\" style={{ backgroundColor: tokens.panel }} />\n        <span className=\"h-[7px] w-3/4 rounded-sm\" style={{ backgroundColor: tokens.panel }} />\n      </div>\n      <div className=\"flex flex-1 flex-col justify-between p-1.5\">\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"h-[5px] w-2/3 rounded-sm\" style={{ backgroundColor: tokens.text }} />\n          <span className=\"h-[5px] w-1/2 rounded-sm\" style={{ backgroundColor: tokens.dim }} />\n        </div>\n        <div className=\"flex gap-1\">\n          {SWATCH_ACCENTS.map((accent) => (\n            <span key={accent} className=\"h-2 w-2 rounded-full\" style={{ backgroundColor: tokens[accent] }} />\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n\n/**\n * The appearance page: the colour theme, then the layout Po opens with. A\n * theme applies at once and is remembered per browser; a layout is saved to\n * Po config and needs an explicit save, because it can differ per workspace.\n */\nexport function AppearanceSettings({\n  templateTarget,\n  onTemplateTargetChange,\n}: {\n  templateTarget: string;\n  onTemplateTargetChange: (target: string) => void;\n}) {\n  const current = useStore(themeStore, (state) => state.name);\n  return (\n    <SettingsPage data-testid=\"appearance-settings\">\n      <SettingsHeader>\n        <SettingsTitle>Appearance</SettingsTitle>\n        <SettingsDescription>Choose how Po looks and which layout it opens with.</SettingsDescription>\n      </SettingsHeader>\n      <SettingsSection>\n        <SettingsSectionHeader>\n          <SettingsSectionTitle>Theme</SettingsSectionTitle>\n          <SettingsSectionDescription>\n            Applies straight away and is remembered in this browser. Plugin tabs follow it too.\n          </SettingsSectionDescription>\n        </SettingsSectionHeader>\n        <RadioGroup\n          aria-label=\"Theme\"\n          data-testid=\"theme-list\"\n          className=\"grid grid-cols-1 gap-3 min-[480px]:grid-cols-2 lg:grid-cols-3\"\n          value={current}\n          onValueChange={selectTheme}\n        >\n          {availableThemes().map((theme) => {\n            const selected = theme.name === current;\n            return (\n              <RadioGroupCard\n                key={theme.name}\n                value={theme.name}\n                data-testid={`theme-${theme.name}`}\n                data-selected={selected}\n                className=\"flex flex-col gap-3 rounded-lg p-3\"\n              >\n                <ThemeSwatch theme={theme} />\n                <span className=\"flex items-center gap-2\">\n                  <span className=\"flex min-w-0 flex-1 flex-col\">\n                    <span className=\"truncate text-base font-semibold text-doom-hi\">{theme.label}</span>\n                    <span className=\"text-sm text-doom-dim first-letter:uppercase\">{theme.scheme}</span>\n                  </span>\n                  {selected ? <CheckIcon className=\"size-4 shrink-0 text-doom-green\" /> : null}\n                </span>\n              </RadioGroupCard>\n            );\n          })}\n        </RadioGroup>\n        <SettingsNote>\n          A theme is a JSON file of twenty colour tokens. The format lives in{' '}\n          <code className=\"font-mono\">@agimon-ai/po-web-components</code>.\n        </SettingsNote>\n      </SettingsSection>\n      <TemplateSettings target={templateTarget} onTargetChange={onTemplateTargetChange} />\n    </SettingsPage>\n  );\n}\n"],"mappings":"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"}

package/dist/web/features/settings/ContributedSettings.cjs

@@ -0,0 +1,257 @@
+const require_settingsApi = require("../../lib/settingsApi.cjs");
+const require_settingsDraft = require("../../lib/settingsDraft.cjs");
+const require_settingsDraftStore = require("../../stores/settingsDraftStore.cjs");
+let react = require("react");
+let _tanstack_react_store = require("@tanstack/react-store");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _agimon_ai_po_web_components = require("@agimon-ai/po-web-components");
+//#region src/web/features/settings/ContributedSettings.tsx
+/** Optional contributed-settings view. Drafts, admission and hash-checked writes live outside this component. */
+/** The select entry that clears a key, since unset is how the file spells "inherit". */
+const INHERIT_VALUE = "__inherit__";
+/**
+* Where a value came from, read from the seat the reader is in, and said as
+* quietly as it can be. A default says nothing. A value set at this scope is
+* marked by the row's jade edge, named here only for assistive tech. A value
+* from the global config is faint text. An override the reader is not
+* currently editing is the one thing worth colouring: it is why an edit at
+* this scope would appear to do nothing.
+*/
+function Origin({ origin, scope }) {
+	if (origin === "default") return null;
+	if (origin === scope) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "sr-only",
+		children: ", set here"
+	});
+	if (origin === "global") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "text-sm font-normal text-doom-dim",
+		children: "From global"
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.Badge, {
+		tone: "yellow",
+		className: "shrink-0",
+		children: "Overridden by repository"
+	});
+}
+function FieldRow({ field, view, scope, models, draft, busy, onDraft }) {
+	const locked = require_settingsDraft.settingsLockedReason(view, scope);
+	const dirty = draft !== void 0;
+	const value = draft === void 0 ? view?.value ?? "" : draft ?? "";
+	const options = (0, react.useMemo)(() => {
+		if (field.optionsFrom !== "models") return field.options ?? [];
+		return models.map((model) => ({
+			value: model.value,
+			label: model.label,
+			group: model.group
+		}));
+	}, [
+		field.options,
+		field.optionsFrom,
+		models
+	]);
+	const groups = (0, react.useMemo)(() => [...new Set(options.map((option) => option.group ?? ""))], [options]);
+	const kind = field.kind === "select" && options.length === 0 ? "text" : field.kind;
+	const orphan = kind === "select" && value !== "" && !options.some((option) => option.value === value) ? value : void 0;
+	const control = kind === "info" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "text-sm text-doom-text",
+		children: value || "-"
+	}) : kind === "toggle" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.Switch, {
+		"data-testid": `settings-toggle-${field.id}`,
+		"aria-label": field.label,
+		checked: value === "true",
+		disabled: busy || locked !== void 0,
+		onCheckedChange: (checked) => onDraft(field, String(checked))
+	}) : kind === "select" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.Select, {
+		value: value === "" ? INHERIT_VALUE : value,
+		disabled: busy || locked !== void 0,
+		onValueChange: (next) => onDraft(field, next === INHERIT_VALUE ? null : next),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.SelectTrigger, {
+			"data-testid": `settings-select-${field.id}`,
+			"aria-label": field.label,
+			className: "w-full text-sm sm:w-64",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.SelectValue, { placeholder: field.placeholder ?? "Inherit" })
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.SelectContent, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.SelectItem, {
+				value: INHERIT_VALUE,
+				children: field.placeholder ?? "Inherit"
+			}),
+			orphan === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.SelectItem, {
+				value: orphan,
+				children: [orphan, " · not in catalog"]
+			}),
+			groups.map((group) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.SelectGroup, { children: [group === "" ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.SelectLabel, { children: group }), options.filter((option) => (option.group ?? "") === group).map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.SelectItem, {
+				value: option.value,
+				children: option.label
+			}, option.value))] }, group))
+		] })]
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.Input, {
+		"data-testid": `settings-input-${field.id}`,
+		"aria-label": field.label,
+		value,
+		type: kind === "number" ? "number" : "text",
+		spellCheck: false,
+		disabled: busy || locked !== void 0,
+		placeholder: field.placeholder ?? "Inherit",
+		onChange: (event) => onDraft(field, event.target.value === "" ? null : event.target.value),
+		className: "w-full text-sm sm:w-64"
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.SettingsRow, {
+		"data-testid": `settings-field-${field.id}`,
+		"data-dirty": dirty,
+		changed: kind !== "info" && view?.origin === scope,
+		className: "items-start",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.SettingsRowText, {
+			className: "gap-1",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.SettingsRowTitle, {
+					className: "flex min-h-6 flex-wrap items-center gap-x-2 gap-y-1",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "inline-block min-w-0 first-letter:uppercase",
+							children: field.label
+						}),
+						view === void 0 || kind === "info" ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Origin, {
+							origin: view.origin,
+							scope
+						}),
+						locked === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							"data-testid": `settings-locked-${field.id}`,
+							className: "inline-flex items-center gap-1 text-sm font-normal text-doom-dim",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.LockIcon, {
+								"aria-hidden": true,
+								className: "size-3"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "inline-block first-letter:uppercase",
+								children: locked
+							})]
+						}),
+						dirty ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.Badge, {
+							tone: "cyan",
+							"data-testid": `settings-dirty-${field.id}`,
+							className: "shrink-0",
+							children: "Unsaved"
+						}) : null,
+						dirty ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.Button, {
+							variant: "ghost",
+							size: "xs",
+							"data-testid": `settings-revert-${field.id}`,
+							disabled: busy,
+							onClick: () => onDraft(field, void 0),
+							className: "text-doom-dim",
+							children: "Revert"
+						}) : kind !== "info" && view?.origin === scope && locked === void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.Button, {
+							variant: "ghost",
+							size: "xs",
+							"data-testid": `settings-clear-${field.id}`,
+							disabled: busy,
+							onClick: () => onDraft(field, null),
+							className: "text-doom-dim",
+							children: "Reset"
+						}) : null
+					]
+				}),
+				field.detail === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.SettingsRowDescription, { children: field.detail }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
+					className: "min-w-0 max-w-full break-all font-mono text-sm text-doom-dim",
+					children: require_settingsDraft.settingsKeyOf(field)
+				})
+			]
+		}), control]
+	});
+}
+function ContributedSettings({ section, scope, repoRoot = "", workspaceId }) {
+	const [models, setModels] = (0, react.useState)([]);
+	const target = (0, react.useMemo)(() => ({
+		section,
+		scope,
+		repoRoot,
+		workspaceId
+	}), [
+		section,
+		scope,
+		repoRoot,
+		workspaceId
+	]);
+	const key = require_settingsDraftStore.settingsDraftKey(target);
+	const { config, drafts, error, note, busy } = (0, _tanstack_react_store.useStore)(require_settingsDraftStore.settingsDraftStore, (state) => state[key] ?? require_settingsDraftStore.EMPTY_SETTINGS_DRAFT);
+	const wantsModels = section.fields.some((field) => field.optionsFrom === "models");
+	const dirtyFields = section.fields.filter((field) => require_settingsDraft.settingsKeyOf(field) in drafts);
+	(0, react.useEffect)(() => {
+		if (wantsModels) require_settingsApi.listSettingsModels().then(setModels);
+	}, [wantsModels]);
+	(0, react.useEffect)(() => {
+		require_settingsDraftStore.loadSettingsDraft(target);
+	}, [target]);
+	const setDraft = (field, value) => require_settingsDraftStore.setSettingsDraft(target, field, value);
+	const save = () => require_settingsDraftStore.saveSettingsDraft(target);
+	const discard = () => require_settingsDraftStore.discardSettingsDraft(target);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.SettingsPage, {
+		"data-testid": `settings-contributed-${section.id}`,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.SettingsHeader, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.SettingsTitle, { children: section.label }),
+				section.detail ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.SettingsDescription, { children: section.detail }) : null,
+				scope === "repository" && repoRoot === "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.SettingsNote, {
+					"data-testid": "settings-no-repositories",
+					children: "Pick a repository above to edit its config."
+				}) : null
+			] }),
+			error === "" ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.SettingsCard, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.SettingsRow, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.SettingsRowText, {
+				role: "alert",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.SettingsRowTitle, { children: "Po couldn't load or save these settings" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.SettingsRowDescription, {
+					"data-testid": "settings-error",
+					className: "text-doom-red",
+					children: error
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.Button, {
+				size: "sm",
+				variant: "outline",
+				disabled: busy,
+				onClick: () => void require_settingsDraftStore.loadSettingsDraft(target),
+				children: "Reload configuration"
+			})] }) }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex min-w-0 flex-col gap-4",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.SettingsCard, { children: section.fields.map((field) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldRow, {
+					field,
+					view: config?.values[require_settingsDraft.settingsKeyOf(field)],
+					scope,
+					models,
+					draft: require_settingsDraft.settingsKeyOf(field) in drafts ? drafts[require_settingsDraft.settingsKeyOf(field)] : void 0,
+					busy,
+					onDraft: setDraft
+				}, field.id)) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.SettingsActions, { children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.Button, {
+						variant: dirtyFields.length > 0 ? "primary" : "outline",
+						size: "sm",
+						"data-testid": "settings-save",
+						loading: busy,
+						disabled: busy || !require_settingsDraft.canSaveSettings({
+							dirty: dirtyFields.length,
+							scope,
+							repoRoot
+						}),
+						onClick: () => void save(),
+						children: "Save"
+					}),
+					dirtyFields.length === 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.Button, {
+						variant: "ghost",
+						size: "sm",
+						"data-testid": "settings-discard",
+						disabled: busy,
+						onClick: discard,
+						children: "Discard"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.SettingsNote, {
+						"data-testid": "settings-save-note",
+						children: dirtyFields.length > 0 ? `${String(dirtyFields.length)} unsaved. Saves to ${scope === "global" ? "the global config" : "this repository"}.` : note
+					})
+				] })]
+			})
+		]
+	});
+}
+//#endregion
+exports.ContributedSettings = ContributedSettings;
+
+//# sourceMappingURL=ContributedSettings.cjs.map