@dxos/plugin-client 0.10.0 → 0.11.0

package/dist/lib/chunk-ProfileContainer.mjs

@@ -0,0 +1,145 @@
+import { hexToEmoji, hexToHue } from "@dxos/util";
+import * as Schema from "effect/Schema";
+import { meta } from "#meta";
+import { ClientOperation } from "#operations";
+import { useCallback, useMemo, useState } from "react";
+import { useOperationInvoker } from "@dxos/app-framework/ui";
+import { useIdentity } from "@dxos/halo-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ButtonGroup, Clipboard, Input, useTranslation } from "@dxos/react-ui";
+import { Form } from "@dxos/react-ui-form";
+import { debounce } from "@dxos/async";
+import { EmojiPickerBlock, HuePicker } from "@dxos/react-ui-pickers";
+//#region src/containers/ProfileContainer/ProfileContainer.tsx
+var UserProfile = Schema.Struct({
+	did: Schema.String.annotations({ title: "DID" }),
+	displayName: Schema.String.annotations({ title: "Display name" }),
+	emoji: Schema.String.annotations({ title: "Avatar" }),
+	hue: Schema.String.annotations({ title: "Color" })
+});
+var getDefaultHueValue = (identity) => hexToHue(identity?.identityKey ?? "0");
+var getHueValue = (identity) => identity?.data?.hue || getDefaultHueValue(identity);
+var getDefaultEmojiValue = (identity) => hexToEmoji(identity?.identityKey ?? "0");
+var getEmojiValue = (identity) => identity?.data?.emoji || getDefaultEmojiValue(identity);
+var ProfileContainer = () => {
+	const { t } = useTranslation(meta.profile.key);
+	const { invokePromise } = useOperationInvoker();
+	const identity = useIdentity();
+	const [displayName, setDisplayNameDirectly] = useState(identity?.displayName ?? "");
+	const [emoji, setEmojiDirectly] = useState(getEmojiValue(identity));
+	const [hue, setHueDirectly] = useState(getHueValue(identity));
+	const updateProfile = useMemo(() => debounce((profile, currentData) => invokePromise(ClientOperation.UpdateProfile, {
+		displayName: profile.displayName,
+		data: {
+			...currentData,
+			emoji: profile.emoji,
+			hue: profile.hue
+		}
+	}), 2e3), [invokePromise]);
+	const handleChange = useCallback((profile, meta) => {
+		for (const [path, changed] of Object.entries(meta.changed)) if (changed) switch (path) {
+			case "displayName":
+				setDisplayNameDirectly(profile.displayName ?? "");
+				break;
+			case "emoji":
+				setEmojiDirectly(profile.emoji ?? getDefaultEmojiValue(identity));
+				break;
+			case "hue":
+				setHueDirectly(profile.hue ?? getDefaultHueValue(identity));
+				break;
+			default: break;
+		}
+		updateProfile(profile, identity?.data);
+	}, [identity, updateProfile]);
+	const values = useMemo(() => ({
+		did: identity?.did,
+		displayName,
+		emoji,
+		hue
+	}), [
+		identity,
+		displayName,
+		emoji,
+		hue
+	]);
+	const fieldMap = useMemo(() => ({
+		displayName: ({ type, label, getValue, onValueChange }) => {
+			const handleChange = useCallback(({ target: { value } }) => onValueChange(type, value), [onValueChange, type]);
+			return /* @__PURE__ */ jsx(Form.Row, {
+				label,
+				description: t("display-name.description"),
+				children: /* @__PURE__ */ jsx(Input.Root, { children: /* @__PURE__ */ jsx(Input.TextInput, {
+					value: getValue(),
+					onChange: handleChange,
+					placeholder: t("display-name-input.placeholder"),
+					classNames: "min-w-64"
+				}) })
+			});
+		},
+		emoji: ({ type, label, getValue, onValueChange }) => {
+			const handleChange = useCallback((nextEmoji) => onValueChange(type, nextEmoji), [onValueChange, type]);
+			const handleEmojiReset = useCallback(() => onValueChange(type, getDefaultEmojiValue(identity)), [onValueChange, type]);
+			return /* @__PURE__ */ jsx(Form.Row, {
+				label,
+				description: t("icon.description"),
+				children: /* @__PURE__ */ jsx(EmojiPickerBlock, {
+					triggerVariant: "default",
+					emoji: getValue(),
+					onChangeEmoji: handleChange,
+					onClickClear: handleEmojiReset,
+					classNames: "justify-self-end"
+				})
+			});
+		},
+		hue: ({ type, label, getValue, onValueChange }) => {
+			const handleChange = useCallback((nextHue) => onValueChange(type, nextHue), [onValueChange, type]);
+			const handleHueReset = useCallback(() => onValueChange(type, getDefaultHueValue(identity)), [onValueChange, type]);
+			return /* @__PURE__ */ jsx(Form.Row, {
+				label,
+				description: t("hue.description"),
+				children: /* @__PURE__ */ jsx("div", {
+					className: "flex justify-self-end",
+					children: /* @__PURE__ */ jsx(HuePicker, {
+						value: getValue(),
+						onChange: handleChange,
+						onReset: handleHueReset
+					})
+				})
+			});
+		},
+		did: ({ label, getValue }) => {
+			return /* @__PURE__ */ jsx(Form.Row, {
+				label,
+				description: t("did.description"),
+				children: /* @__PURE__ */ jsx(Input.Root, { children: /* @__PURE__ */ jsxs(ButtonGroup, {
+					classNames: "w-full",
+					children: [/* @__PURE__ */ jsx(Input.TextInput, {
+						value: getValue(),
+						disabled: true,
+						classNames: "min-w-64"
+					}), /* @__PURE__ */ jsx(Clipboard.IconButton, { value: getValue() ?? "" })]
+				}) })
+			});
+		}
+	}), [t]);
+	return /* @__PURE__ */ jsx(Clipboard.Provider, { children: /* @__PURE__ */ jsx(Form.Root, {
+		variant: "settings",
+		schema: UserProfile,
+		values,
+		fieldMap,
+		onValuesChanged: handleChange,
+		children: /* @__PURE__ */ jsx(Form.Viewport, {
+			scroll: true,
+			children: /* @__PURE__ */ jsx(Form.Content, { children: /* @__PURE__ */ jsx(Form.Section, {
+				title: t("profile.label"),
+				description: t("profile.description"),
+				children: /* @__PURE__ */ jsx(Form.FieldSet, {})
+			}) })
+		})
+	}) });
+};
+ProfileContainer.displayName = "ProfileContainer";
+//#endregion
+export { ProfileContainer as default };
+
+//# sourceMappingURL=chunk-ProfileContainer.mjs.map

package/dist/lib/chunk-ProfileContainer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chunk-ProfileContainer.mjs","names":[],"sources":["../../src/containers/ProfileContainer/ProfileContainer.tsx"],"sourcesContent":["//\n// Copyright 2025 DXOS.org\n//\n\nimport * as Schema from 'effect/Schema';\nimport React, { type ChangeEvent, useCallback, useMemo, useState } from 'react';\n\nimport { useOperationInvoker } from '@dxos/app-framework/ui';\nimport { debounce } from '@dxos/async';\nimport { type Identity } from '@dxos/halo';\nimport { useIdentity } from '@dxos/halo-react';\nimport { ButtonGroup, Clipboard, Input, useTranslation } from '@dxos/react-ui';\nimport { Form, type FormFieldMap, type FormUpdateMeta } from '@dxos/react-ui-form';\nimport { EmojiPickerBlock, HuePicker } from '@dxos/react-ui-pickers';\nimport { hexToEmoji, hexToHue } from '@dxos/util';\n\nimport { meta } from '#meta';\nimport { ClientOperation } from '#operations';\n\n// TOOD(burdon): Factor out?\n// TODO(wittjosiah): Integrate annotations with translations.\nconst UserProfile = Schema.Struct({\n  did: Schema.String.annotations({ title: 'DID' }),\n  displayName: Schema.String.annotations({ title: 'Display name' }),\n  emoji: Schema.String.annotations({ title: 'Avatar' }),\n  hue: Schema.String.annotations({ title: 'Color' }),\n});\n\ntype UserProfile = Schema.Schema.Type<typeof UserProfile>;\n\n// TODO(thure): Factor out?\nconst getDefaultHueValue = (identity?: Identity.Info): string => hexToHue(identity?.identityKey ?? '0');\nconst getHueValue = (identity?: Identity.Info): string => identity?.data?.hue || getDefaultHueValue(identity);\nconst getDefaultEmojiValue = (identity?: Identity.Info): string => hexToEmoji(identity?.identityKey ?? '0');\nconst getEmojiValue = (identity?: Identity.Info): string => identity?.data?.emoji || getDefaultEmojiValue(identity);\n\nexport const ProfileContainer = () => {\n  const { t } = useTranslation(meta.profile.key);\n  const { invokePromise } = useOperationInvoker();\n  const identity = useIdentity();\n  const [displayName, setDisplayNameDirectly] = useState(identity?.displayName ?? '');\n  const [emoji, setEmojiDirectly] = useState<string>(getEmojiValue(identity));\n  const [hue, setHueDirectly] = useState<string>(getHueValue(identity));\n\n  const updateProfile = useMemo(\n    () =>\n      debounce(\n        // Merge onto the current profile data so unrelated metadata is preserved.\n        (profile: Partial<UserProfile>, currentData?: Record<string, unknown>) =>\n          invokePromise(ClientOperation.UpdateProfile, {\n            displayName: profile.displayName,\n            data: {\n              ...currentData,\n              emoji: profile.emoji,\n              hue: profile.hue,\n            },\n          }),\n        2_000,\n      ),\n    [invokePromise],\n  );\n\n  const handleChange = useCallback(\n    (profile: Partial<UserProfile>, meta: FormUpdateMeta<UserProfile>) => {\n      for (const [path, changed] of Object.entries(meta.changed)) {\n        if (changed) {\n          switch (path) {\n            case 'displayName':\n              setDisplayNameDirectly(profile.displayName ?? '');\n              break;\n            case 'emoji':\n              setEmojiDirectly(profile.emoji ?? getDefaultEmojiValue(identity));\n              break;\n            case 'hue':\n              setHueDirectly(profile.hue ?? getDefaultHueValue(identity));\n              break;\n            default:\n              break;\n          }\n        }\n      }\n\n      void updateProfile(profile, identity?.data);\n    },\n    [identity, updateProfile],\n  );\n\n  const values = useMemo(\n    () => ({\n      did: identity?.did,\n      displayName,\n      emoji,\n      hue,\n    }),\n    [identity, displayName, emoji, hue],\n  );\n\n  // TODO(wittjosiah): Integrate descriptions with the form schema.\n  const fieldMap = useMemo<FormFieldMap>(\n    () => ({\n      displayName: ({ type, label, getValue, onValueChange }) => {\n        const handleChange = useCallback(\n          ({ target: { value } }: ChangeEvent<HTMLInputElement>) => onValueChange(type, value),\n          [onValueChange, type],\n        );\n\n        return (\n          <Form.Row label={label} description={t('display-name.description')}>\n            <Input.Root>\n              <Input.TextInput\n                value={getValue()}\n                onChange={handleChange}\n                placeholder={t('display-name-input.placeholder')}\n                classNames='min-w-64'\n              />\n            </Input.Root>\n          </Form.Row>\n        );\n      },\n      emoji: ({ type, label, getValue, onValueChange }) => {\n        const handleChange = useCallback((nextEmoji: string) => onValueChange(type, nextEmoji), [onValueChange, type]);\n        const handleEmojiReset = useCallback(\n          () => onValueChange(type, getDefaultEmojiValue(identity)),\n          [onValueChange, type],\n        );\n\n        return (\n          <Form.Row label={label} description={t('icon.description')}>\n            <EmojiPickerBlock\n              triggerVariant='default'\n              emoji={getValue()}\n              onChangeEmoji={handleChange}\n              onClickClear={handleEmojiReset}\n              classNames='justify-self-end'\n            />\n          </Form.Row>\n        );\n      },\n      hue: ({ type, label, getValue, onValueChange }) => {\n        const handleChange = useCallback((nextHue: string) => onValueChange(type, nextHue), [onValueChange, type]);\n        const handleHueReset = useCallback(\n          () => onValueChange(type, getDefaultHueValue(identity)),\n          [onValueChange, type],\n        );\n\n        return (\n          <Form.Row label={label} description={t('hue.description')}>\n            <div className='flex justify-self-end'>\n              <HuePicker value={getValue()} onChange={handleChange} onReset={handleHueReset} />\n            </div>\n          </Form.Row>\n        );\n      },\n      // TODO(wittjosiah): We need text input annotations for disabled and copyable.\n      did: ({ label, getValue }) => {\n        return (\n          <Form.Row label={label} description={t('did.description')}>\n            <Input.Root>\n              <ButtonGroup classNames='w-full'>\n                <Input.TextInput value={getValue()} disabled classNames='min-w-64' />\n                <Clipboard.IconButton value={getValue() ?? ''} />\n              </ButtonGroup>\n            </Input.Root>\n          </Form.Row>\n        );\n      },\n    }),\n    [t],\n  );\n\n  return (\n    <Clipboard.Provider>\n      <Form.Root\n        variant='settings'\n        schema={UserProfile}\n        values={values}\n        fieldMap={fieldMap}\n        onValuesChanged={handleChange}\n      >\n        <Form.Viewport scroll>\n          <Form.Content>\n            <Form.Section title={t('profile.label')} description={t('profile.description')}>\n              <Form.FieldSet />\n            </Form.Section>\n          </Form.Content>\n        </Form.Viewport>\n      </Form.Root>\n    </Clipboard.Provider>\n  );\n};\n\nProfileContainer.displayName = 'ProfileContainer';\n"],"mappings":"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"}

package/dist/lib/chunk-RecoveryCodeDialog.mjs

@@ -0,0 +1,72 @@
+import { meta } from "#meta";
+import { useCallback, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertDialog, Button, Clipboard, Input, useTranslation } from "@dxos/react-ui";
+//#region src/containers/RecoveryCodeDialog/RecoveryCodeDialog.tsx
+var RecoveryCodeDialog = ({ code }) => {
+	const { t } = useTranslation(meta.profile.key);
+	const [confirmation, setConfirmation] = useState(false);
+	const handleConfirmation = useCallback((checked) => setConfirmation(checked), []);
+	return /* @__PURE__ */ jsxs(AlertDialog.Content, {
+		size: "md",
+		classNames: "min-h-[15rem]",
+		children: [/* @__PURE__ */ jsxs(AlertDialog.Body, { children: [
+			/* @__PURE__ */ jsx(AlertDialog.Title, { children: t("recovery-code-dialog.title") }),
+			/* @__PURE__ */ jsx(AlertDialog.Description, {
+				classNames: "py-4",
+				children: t("recovery-code-dialog.description")
+			}),
+			/* @__PURE__ */ jsx(Clipboard.Provider, { children: /* @__PURE__ */ jsx(Code, { code }) }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col py-4 gap-2",
+				children: [/* @__PURE__ */ jsx("p", { children: t("recovery-code-dialog-warning-1.message") }), /* @__PURE__ */ jsx("p", { children: t("recovery-code-dialog-warning-2.message") })]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex items-center gap-2 pb-4",
+				children: /* @__PURE__ */ jsxs(Input.Root, { children: [/* @__PURE__ */ jsx(Input.Checkbox, {
+					"data-testid": "recoveryCode.confirm",
+					checked: confirmation,
+					onCheckedChange: handleConfirmation
+				}), /* @__PURE__ */ jsx(Input.Label, { children: t("recovery-code-confirmation.label") })] })
+			})
+		] }), /* @__PURE__ */ jsx(AlertDialog.ActionBar, { children: /* @__PURE__ */ jsx(AlertDialog.Action, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Button, {
+				"data-testid": "recoveryCode.continue",
+				variant: "primary",
+				disabled: !confirmation,
+				children: t("continue.label")
+			})
+		}) })]
+	});
+};
+var Code = ({ code }) => {
+	const words = code.split(" ");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative p-2 border border-separator rounded-sm group",
+		children: [/* @__PURE__ */ jsx(Clipboard.IconButton, {
+			value: code,
+			classNames: "absolute top-2 right-2 invisible group-hover:visible"
+		}), /* @__PURE__ */ jsx("div", {
+			className: "grid grid-cols-4",
+			children: words.map((word, i) => /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center p-2 gap-2",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "w-4 text-xs text-center text-subdued",
+					children: i + 1
+				}), /* @__PURE__ */ jsx("div", {
+					className: "text-sm",
+					children: word
+				})]
+			}, i))
+		})]
+	});
+};
+RecoveryCodeDialog.displayName = "RecoveryCodeDialog";
+//#endregion
+//#region src/containers/RecoveryCodeDialog/index.ts
+var RecoveryCodeDialog_default = RecoveryCodeDialog;
+//#endregion
+export { RecoveryCodeDialog, RecoveryCodeDialog_default as default };
+
+//# sourceMappingURL=chunk-RecoveryCodeDialog.mjs.map

package/dist/lib/chunk-RecoveryCodeDialog.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chunk-RecoveryCodeDialog.mjs","names":[],"sources":["../../src/containers/RecoveryCodeDialog/RecoveryCodeDialog.tsx","../../src/containers/RecoveryCodeDialog/index.ts"],"sourcesContent":["//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { useCallback, useState } from 'react';\n\nimport { AlertDialog, Button, Clipboard, Input, useTranslation } from '@dxos/react-ui';\n\nimport { meta } from '#meta';\n\nexport type RecoveryCodeDialogProps = {\n  code: string;\n};\n\n// TODO(burdon): Should have cancel button.\nexport const RecoveryCodeDialog = ({ code }: RecoveryCodeDialogProps) => {\n  const { t } = useTranslation(meta.profile.key);\n  const [confirmation, setConfirmation] = useState(false);\n\n  const handleConfirmation = useCallback((checked: boolean) => setConfirmation(checked), []);\n\n  return (\n    <AlertDialog.Content size='md' classNames='min-h-[15rem]'>\n      <AlertDialog.Body>\n        <AlertDialog.Title>{t('recovery-code-dialog.title')}</AlertDialog.Title>\n        <AlertDialog.Description classNames='py-4'>{t('recovery-code-dialog.description')}</AlertDialog.Description>\n        <Clipboard.Provider>\n          <Code code={code} />\n        </Clipboard.Provider>\n        <div className='flex flex-col py-4 gap-2'>\n          <p>{t('recovery-code-dialog-warning-1.message')}</p>\n          <p>{t('recovery-code-dialog-warning-2.message')}</p>\n        </div>\n        <div className='flex items-center gap-2 pb-4'>\n          <Input.Root>\n            <Input.Checkbox\n              data-testid='recoveryCode.confirm'\n              checked={confirmation}\n              onCheckedChange={handleConfirmation}\n            />\n            <Input.Label>{t('recovery-code-confirmation.label')}</Input.Label>\n          </Input.Root>\n        </div>\n      </AlertDialog.Body>\n      <AlertDialog.ActionBar>\n        <AlertDialog.Action asChild>\n          <Button data-testid='recoveryCode.continue' variant='primary' disabled={!confirmation}>\n            {t('continue.label')}\n          </Button>\n        </AlertDialog.Action>\n      </AlertDialog.ActionBar>\n    </AlertDialog.Content>\n  );\n};\n\nconst Code = ({ code }: { code: string }) => {\n  const words = code.split(' ');\n  return (\n    <div className='relative p-2 border border-separator rounded-sm group'>\n      <Clipboard.IconButton value={code} classNames='absolute top-2 right-2 invisible group-hover:visible' />\n      <div className='grid grid-cols-4'>\n        {words.map((word, i) => (\n          <div key={i} className='flex items-center p-2 gap-2'>\n            <div className='w-4 text-xs text-center text-subdued'>{i + 1}</div>\n            <div className='text-sm'>{word}</div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nRecoveryCodeDialog.displayName = 'RecoveryCodeDialog';\n","//\n// Copyright 2025 DXOS.org\n//\n\nimport { RecoveryCodeDialog } from './RecoveryCodeDialog';\n\nexport * from './RecoveryCodeDialog';\nexport default RecoveryCodeDialog;\n"],"mappings":";;;;;AAeA,IAAa,sBAAsB,EAAE,WAAoC;CACvE,MAAM,EAAE,MAAM,eAAe,KAAK,QAAQ,GAAG;CAC7C,MAAM,CAAC,cAAc,mBAAmB,SAAS,KAAK;CAEtD,MAAM,qBAAqB,aAAa,YAAqB,gBAAgB,OAAO,GAAG,CAAC,CAAC;CAEzF,OACE,qBAAC,YAAY,SAAb;EAAqB,MAAK;EAAK,YAAW;YAA1C,CACE,qBAAC,YAAY,MAAb,EAAA,UAAA;GACE,oBAAC,YAAY,OAAb,EAAA,UAAoB,EAAE,4BAA4B,EAAqB,CAAA;GACvE,oBAAC,YAAY,aAAb;IAAyB,YAAW;cAAQ,EAAE,kCAAkC;GAA2B,CAAA;GAC3G,oBAAC,UAAU,UAAX,EAAA,UACE,oBAAC,MAAD,EAAY,KAAO,CAAA,EACD,CAAA;GACpB,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,KAAD,EAAA,UAAI,EAAE,wCAAwC,EAAK,CAAA,GACnD,oBAAC,KAAD,EAAA,UAAI,EAAE,wCAAwC,EAAK,CAAA,CAChD;;GACL,oBAAC,OAAD;IAAK,WAAU;cACb,qBAAC,MAAM,MAAP,EAAA,UAAA,CACE,oBAAC,MAAM,UAAP;KACE,eAAY;KACZ,SAAS;KACT,iBAAiB;IAClB,CAAA,GACD,oBAAC,MAAM,OAAP,EAAA,UAAc,EAAE,kCAAkC,EAAe,CAAA,CACvD,EAAA,CAAA;GACT,CAAA;EACW,EAAA,CAAA,GAClB,oBAAC,YAAY,WAAb,EAAA,UACE,oBAAC,YAAY,QAAb;GAAoB,SAAA;aAClB,oBAAC,QAAD;IAAQ,eAAY;IAAwB,SAAQ;IAAU,UAAU,CAAC;cACtE,EAAE,gBAAgB;GACb,CAAA;EACU,CAAA,EACC,CAAA,CACJ;;AAEzB;AAEA,IAAM,QAAQ,EAAE,WAA6B;CAC3C,MAAM,QAAQ,KAAK,MAAM,GAAG;CAC5B,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,UAAU,YAAX;GAAsB,OAAO;GAAM,YAAW;EAAwD,CAAA,GACtG,oBAAC,OAAD;GAAK,WAAU;aACZ,MAAM,KAAK,MAAM,MAChB,qBAAC,OAAD;IAAa,WAAU;cAAvB,CACE,oBAAC,OAAD;KAAK,WAAU;eAAwC,IAAI;IAAO,CAAA,GAClE,oBAAC,OAAD;KAAK,WAAU;eAAW;IAAU,CAAA,CACjC;MAHK,CAGL,CACN;EACE,CAAA,CACF;;AAET;AAEA,mBAAmB,cAAc;;;ACjEjC,IAAA,6BAAe"}

package/dist/lib/chunk-RecoveryCredentialsContainer.mjs

@@ -0,0 +1,65 @@
+import { meta } from "#meta";
+import { ClientOperation } from "#operations";
+import "react";
+import { useOperationInvoker } from "@dxos/app-framework/ui";
+import { useCredentials } from "@dxos/halo-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Icon, IconButton, Message, useTranslation } from "@dxos/react-ui";
+import { Form } from "@dxos/react-ui-form";
+import { Listbox } from "@dxos/react-ui-list";
+`${meta.profile.key}`;
+var RecoveryCredentialsContainer = () => {
+	const { t } = useTranslation(meta.profile.key);
+	const { invokePromise } = useOperationInvoker();
+	const recoveryCredentials = useCredentials().filter((credential) => credential.type === "dxos.halo.credentials.IdentityRecovery");
+	return /* @__PURE__ */ jsx(Form.Root, {
+		variant: "settings",
+		children: /* @__PURE__ */ jsx(Form.Viewport, {
+			scroll: true,
+			children: /* @__PURE__ */ jsxs(Form.Content, { children: [/* @__PURE__ */ jsxs(Form.Section, {
+				title: t("recovery-setup-dialog.title"),
+				description: t("recovery-setup-dialog.description"),
+				children: [/* @__PURE__ */ jsx(Form.Row, {
+					label: t("create-passkey.label"),
+					description: t("create-passkey.description"),
+					children: /* @__PURE__ */ jsx(IconButton, {
+						label: t("create-passkey.label"),
+						icon: "ph--key--duotone",
+						variant: "primary",
+						onClick: () => invokePromise(ClientOperation.CreatePasskey)
+					})
+				}), /* @__PURE__ */ jsx(Form.Row, {
+					label: t("create-recovery-code.label"),
+					description: t("create-recovery-code.description"),
+					children: /* @__PURE__ */ jsx(IconButton, {
+						label: t("create-recovery-code.label"),
+						icon: "ph--receipt--duotone",
+						variant: "default",
+						onClick: () => invokePromise(ClientOperation.CreateRecoveryCode)
+					})
+				})]
+			}), /* @__PURE__ */ jsx(Form.Section, {
+				title: t("credentials-list.label"),
+				children: recoveryCredentials.length < 1 ? /* @__PURE__ */ jsxs(Message.Root, {
+					valence: "error",
+					children: [/* @__PURE__ */ jsx(Message.Title, {
+						icon: "ph--shield-warning--duotone",
+						children: t("no-credentials.title")
+					}), /* @__PURE__ */ jsx(Message.Body, { children: t("no-credentials.message") })]
+				}) : /* @__PURE__ */ jsx(Listbox.Root, { children: /* @__PURE__ */ jsx(Listbox.Content, {
+					classNames: "gap-1",
+					children: recoveryCredentials.map((credential, index) => /* @__PURE__ */ jsxs(Listbox.Item, {
+						id: credential.id ?? `${index}`,
+						classNames: "gap-2",
+						children: [/* @__PURE__ */ jsx(Icon, { icon: "ph--key--regular" }), /* @__PURE__ */ jsx(Listbox.ItemLabel, { children: credential.issuanceDate?.toLocaleString() })]
+					}, credential.id ?? index))
+				}) })
+			})] })
+		})
+	});
+};
+RecoveryCredentialsContainer.displayName = "RecoveryCredentialsContainer";
+//#endregion
+export { RecoveryCredentialsContainer as default };
+
+//# sourceMappingURL=chunk-RecoveryCredentialsContainer.mjs.map

package/dist/lib/chunk-RecoveryCredentialsContainer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chunk-RecoveryCredentialsContainer.mjs","names":[],"sources":["../../src/containers/RecoveryCredentialsContainer/RecoveryCredentialsContainer.tsx"],"sourcesContent":["//\n// Copyright 2024 DXOS.org\n//\n\nimport React from 'react';\n\nimport { useOperationInvoker } from '@dxos/app-framework/ui';\nimport { useCredentials } from '@dxos/halo-react';\nimport { Icon, IconButton, Message, useTranslation } from '@dxos/react-ui';\nimport { Form } from '@dxos/react-ui-form';\nimport { Listbox } from '@dxos/react-ui-list';\n\nimport { meta } from '#meta';\nimport { ClientOperation } from '#operations';\n\nexport const MANAGE_CREDENTIALS_DIALOG = `${meta.profile.key}.ManageCredentialsDialog`;\n\nexport const RecoveryCredentialsContainer = () => {\n  const { t } = useTranslation(meta.profile.key);\n  const { invokePromise } = useOperationInvoker();\n  const credentials = useCredentials();\n  const recoveryCredentials = credentials.filter(\n    (credential) => credential.type === 'dxos.halo.credentials.IdentityRecovery',\n  );\n\n  return (\n    <Form.Root variant='settings'>\n      <Form.Viewport scroll>\n        <Form.Content>\n          <Form.Section title={t('recovery-setup-dialog.title')} description={t('recovery-setup-dialog.description')}>\n            <Form.Row label={t('create-passkey.label')} description={t('create-passkey.description')}>\n              <IconButton\n                label={t('create-passkey.label')}\n                icon='ph--key--duotone'\n                variant='primary'\n                onClick={() => invokePromise(ClientOperation.CreatePasskey)}\n              />\n            </Form.Row>\n            <Form.Row label={t('create-recovery-code.label')} description={t('create-recovery-code.description')}>\n              <IconButton\n                label={t('create-recovery-code.label')}\n                icon='ph--receipt--duotone'\n                variant='default'\n                onClick={() => invokePromise(ClientOperation.CreateRecoveryCode)}\n              />\n            </Form.Row>\n          </Form.Section>\n          <Form.Section title={t('credentials-list.label')}>\n            {recoveryCredentials.length < 1 ? (\n              <Message.Root valence='error'>\n                <Message.Title icon='ph--shield-warning--duotone'>{t('no-credentials.title')}</Message.Title>\n                <Message.Body>{t('no-credentials.message')}</Message.Body>\n              </Message.Root>\n            ) : (\n              <Listbox.Root>\n                <Listbox.Content classNames='gap-1'>\n                  {recoveryCredentials.map((credential, index) => (\n                    <Listbox.Item key={credential.id ?? index} id={credential.id ?? `${index}`} classNames='gap-2'>\n                      <Icon icon='ph--key--regular' />\n                      <Listbox.ItemLabel>{credential.issuanceDate?.toLocaleString()}</Listbox.ItemLabel>\n                    </Listbox.Item>\n                  ))}\n                </Listbox.Content>\n              </Listbox.Root>\n            )}\n          </Form.Section>\n        </Form.Content>\n      </Form.Viewport>\n    </Form.Root>\n  );\n};\n\nRecoveryCredentialsContainer.displayName = 'RecoveryCredentialsContainer';\n"],"mappings":";;;;;;;;;AAeyC,GAAG,KAAK,QAAQ,IAAhB;AAEzC,IAAa,qCAAqC;CAChD,MAAM,EAAE,MAAM,eAAe,KAAK,QAAQ,GAAG;CAC7C,MAAM,EAAE,kBAAkB,oBAAoB;CAE9C,MAAM,sBADc,eACQ,CAAA,CAAY,QACrC,eAAe,WAAW,SAAS,wCACtC;CAEA,OACE,oBAAC,KAAK,MAAN;EAAW,SAAQ;YACjB,oBAAC,KAAK,UAAN;GAAe,QAAA;aACb,qBAAC,KAAK,SAAN,EAAA,UAAA,CACE,qBAAC,KAAK,SAAN;IAAc,OAAO,EAAE,6BAA6B;IAAG,aAAa,EAAE,mCAAmC;cAAzG,CACE,oBAAC,KAAK,KAAN;KAAU,OAAO,EAAE,sBAAsB;KAAG,aAAa,EAAE,4BAA4B;eACrF,oBAAC,YAAD;MACE,OAAO,EAAE,sBAAsB;MAC/B,MAAK;MACL,SAAQ;MACR,eAAe,cAAc,gBAAgB,aAAa;KAC3D,CAAA;IACO,CAAA,GACV,oBAAC,KAAK,KAAN;KAAU,OAAO,EAAE,4BAA4B;KAAG,aAAa,EAAE,kCAAkC;eACjG,oBAAC,YAAD;MACE,OAAO,EAAE,4BAA4B;MACrC,MAAK;MACL,SAAQ;MACR,eAAe,cAAc,gBAAgB,kBAAkB;KAChE,CAAA;IACO,CAAA,CACE;OACd,oBAAC,KAAK,SAAN;IAAc,OAAO,EAAE,wBAAwB;cAC5C,oBAAoB,SAAS,IAC5B,qBAAC,QAAQ,MAAT;KAAc,SAAQ;eAAtB,CACE,oBAAC,QAAQ,OAAT;MAAe,MAAK;gBAA+B,EAAE,sBAAsB;KAAiB,CAAA,GAC5F,oBAAC,QAAQ,MAAT,EAAA,UAAe,EAAE,wBAAwB,EAAgB,CAAA,CAC7C;SAEd,oBAAC,QAAQ,MAAT,EAAA,UACE,oBAAC,QAAQ,SAAT;KAAiB,YAAW;eACzB,oBAAoB,KAAK,YAAY,UACpC,qBAAC,QAAQ,MAAT;MAA2C,IAAI,WAAW,MAAM,GAAG;MAAS,YAAW;gBAAvF,CACE,oBAAC,MAAD,EAAM,MAAK,mBAAoB,CAAA,GAC/B,oBAAC,QAAQ,WAAT,EAAA,UAAoB,WAAW,cAAc,eAAe,EAAqB,CAAA,CACrE;QAHK,WAAW,MAAM,KAGtB,CACf;IACc,CAAA,EACL,CAAA;GAEJ,CAAA,CACF,EAAA,CAAA;EACD,CAAA;CACN,CAAA;AAEf;AAEA,6BAA6B,cAAc"}

package/dist/lib/chunk-ResetDialog.mjs

@@ -0,0 +1,47 @@
+import { Capability } from "@dxos/app-framework";
+import { LayoutOperation } from "@dxos/app-toolkit";
+import * as Effect from "effect/Effect";
+import { useCallback } from "react";
+import { ConfirmReset, translationKey } from "@dxos/shell/react";
+import { EffectEx } from "@dxos/effect";
+import { useOperationInvoker } from "@dxos/app-framework/ui";
+import { useClient } from "@dxos/react-client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dialog, useTranslation } from "@dxos/react-ui";
+//#region src/containers/ResetDialog/ResetDialog.tsx
+var ResetDialog = ({ mode, onReset, onBeforeReset, capabilityManager }) => {
+	const { t } = useTranslation(translationKey);
+	const { invokePromise } = useOperationInvoker();
+	const client = useClient();
+	const handleReset = useCallback(async () => {
+		if (onBeforeReset) await onBeforeReset();
+		await client.reset();
+		const target = mode === "join-new-identity" ? "deviceInvitation" : mode === "recover" ? "recoverIdentity" : void 0;
+		if (onReset) await EffectEx.runAndForwardErrors(onReset({ target }).pipe(Effect.provideService(Capability.Service, capabilityManager)));
+	}, [
+		client,
+		mode,
+		onReset,
+		capabilityManager
+	]);
+	const handleCancel = useCallback(() => {
+		invokePromise(LayoutOperation.UpdateDialog, { state: false });
+	}, [invokePromise]);
+	return /* @__PURE__ */ jsxs(Dialog.Content, { children: [/* @__PURE__ */ jsx(Dialog.Header, { children: /* @__PURE__ */ jsx(Dialog.Title, { children: t("reset-dialog.title") }) }), /* @__PURE__ */ jsxs(Dialog.Body, { children: [/* @__PURE__ */ jsx(Dialog.Description, {
+		classNames: "sr-only",
+		children: t("reset-dialog.description")
+	}), /* @__PURE__ */ jsx(ConfirmReset, {
+		active: true,
+		mode,
+		onConfirm: handleReset,
+		onCancel: handleCancel
+	})] })] });
+};
+ResetDialog.displayName = "ResetDialog";
+//#endregion
+//#region src/containers/ResetDialog/index.ts
+var ResetDialog_default = ResetDialog;
+//#endregion
+export { ResetDialog, ResetDialog_default as default };
+
+//# sourceMappingURL=chunk-ResetDialog.mjs.map

package/dist/lib/chunk-ResetDialog.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chunk-ResetDialog.mjs","names":[],"sources":["../../src/containers/ResetDialog/ResetDialog.tsx","../../src/containers/ResetDialog/index.ts"],"sourcesContent":["//\n// Copyright 2025 DXOS.org\n//\n\nimport * as Effect from 'effect/Effect';\nimport React, { useCallback } from 'react';\n\nimport { Capability, type CapabilityManager } from '@dxos/app-framework';\nimport { useOperationInvoker } from '@dxos/app-framework/ui';\nimport { LayoutOperation } from '@dxos/app-toolkit';\nimport { EffectEx } from '@dxos/effect';\nimport { useClient } from '@dxos/react-client';\nimport { Dialog, useTranslation } from '@dxos/react-ui';\nimport { ConfirmReset, type ConfirmResetProps, translationKey } from '@dxos/shell/react';\n\nimport { type ClientPluginOptions } from '#types';\n\nexport type ResetDialogProps = Pick<ConfirmResetProps, 'mode'> &\n  Pick<ClientPluginOptions, 'onReset'> & {\n    capabilityManager: CapabilityManager.CapabilityManager;\n    /**\n     * Optional async action run before `client.reset()`. Throwing here aborts the\n     * reset so callers can surface errors without wiping local state.\n     */\n    onBeforeReset?: () => Promise<void>;\n  };\n\nexport const ResetDialog = ({ mode, onReset, onBeforeReset, capabilityManager }: ResetDialogProps) => {\n  const { t } = useTranslation(translationKey);\n  const { invokePromise } = useOperationInvoker();\n  const client = useClient();\n\n  const handleReset = useCallback(async () => {\n    if (onBeforeReset) {\n      await onBeforeReset();\n    }\n    await client.reset();\n    const target =\n      mode === 'join-new-identity' ? 'deviceInvitation' : mode === 'recover' ? 'recoverIdentity' : undefined;\n    if (onReset) {\n      await EffectEx.runAndForwardErrors(\n        onReset({ target }).pipe(Effect.provideService(Capability.Service, capabilityManager)),\n      );\n    }\n  }, [client, mode, onReset, capabilityManager]);\n\n  const handleCancel = useCallback(() => {\n    void invokePromise(LayoutOperation.UpdateDialog, { state: false });\n  }, [invokePromise]);\n\n  return (\n    <Dialog.Content>\n      <Dialog.Header>\n        <Dialog.Title>{t('reset-dialog.title')}</Dialog.Title>\n      </Dialog.Header>\n      <Dialog.Body>\n        <Dialog.Description classNames='sr-only'>{t('reset-dialog.description')}</Dialog.Description>\n        <ConfirmReset active mode={mode} onConfirm={handleReset} onCancel={handleCancel} />\n      </Dialog.Body>\n    </Dialog.Content>\n  );\n};\n\nResetDialog.displayName = 'ResetDialog';\n","//\n// Copyright 2025 DXOS.org\n//\n\nimport { ResetDialog } from './ResetDialog';\n\nexport * from './ResetDialog';\nexport default ResetDialog;\n"],"mappings":";;;;;;;;;;;AA2BA,IAAa,eAAe,EAAE,MAAM,SAAS,eAAe,wBAA0C;CACpG,MAAM,EAAE,MAAM,eAAe,cAAc;CAC3C,MAAM,EAAE,kBAAkB,oBAAoB;CAC9C,MAAM,SAAS,UAAU;CAEzB,MAAM,cAAc,YAAY,YAAY;EAC1C,IAAI,eACF,MAAM,cAAc;EAEtB,MAAM,OAAO,MAAM;EACnB,MAAM,SACJ,SAAS,sBAAsB,qBAAqB,SAAS,YAAY,oBAAoB,KAAA;EAC/F,IAAI,SACF,MAAM,SAAS,oBACb,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,OAAO,eAAe,WAAW,SAAS,iBAAiB,CAAC,CACvF;CAEJ,GAAG;EAAC;EAAQ;EAAM;EAAS;CAAiB,CAAC;CAE7C,MAAM,eAAe,kBAAkB;EACrC,cAAmB,gBAAgB,cAAc,EAAE,OAAO,MAAM,CAAC;CACnE,GAAG,CAAC,aAAa,CAAC;CAElB,OACE,qBAAC,OAAO,SAAR,EAAA,UAAA,CACE,oBAAC,OAAO,QAAR,EAAA,UACE,oBAAC,OAAO,OAAR,EAAA,UAAe,EAAE,oBAAoB,EAAgB,CAAA,EACxC,CAAA,GACf,qBAAC,OAAO,MAAR,EAAA,UAAA,CACE,oBAAC,OAAO,aAAR;EAAoB,YAAW;YAAW,EAAE,0BAA0B;CAAsB,CAAA,GAC5F,oBAAC,cAAD;EAAc,QAAA;EAAa;EAAM,WAAW;EAAa,UAAU;CAAe,CAAA,CACvE,EAAA,CAAA,CACC,EAAA,CAAA;AAEpB;AAEA,YAAY,cAAc;;;ACxD1B,IAAA,sBAAe"}

package/dist/lib/chunk-UsageContainer.mjs

@@ -0,0 +1,217 @@
+import { t as useHubHttpClient } from "./chunk-hooks.mjs";
+import * as Schema from "effect/Schema";
+import { meta } from "#meta";
+import { Context } from "@dxos/context";
+import { log } from "@dxos/log";
+import { useCallback, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Message, Status, useAsyncEffect, useTranslation } from "@dxos/react-ui";
+import { Form } from "@dxos/react-ui-form";
+//#region src/containers/UsageContainer/UsageView.tsx
+/**
+* Whether a usage row falls under a limit. Subtype segments are matched positionally against
+* `subtypePattern` where `*` matches any segment.
+*/
+var usageMatchesLimit = (item, limit) => {
+	if (item.eventType !== limit.eventType || item.valueKey !== limit.valueKey) return false;
+	return limit.subtypePattern.every((pattern, index) => pattern === "*" || pattern === item.subtypePattern[index]);
+};
+/** Sum every usage item that falls under the limit. */
+var sumUsageForLimit = (usage, limit) => usage.reduce((total, item) => usageMatchesLimit(item, limit) ? total + item.amount : total, 0);
+/** Humanize a camelCase value key, e.g. `outputTokens` → `output tokens`. */
+var formatValueKey = (valueKey) => valueKey.replace(/([A-Z])/g, " $1").trim().toLowerCase();
+/**
+* Human label for a limit: a scope followed by the value key, e.g.
+* `{ eventType: 'ai', valueKey: 'outputTokens', subtypePattern: ['*'] }` → `All models · output tokens`,
+* `{ eventType: 'ai', valueKey: 'inputTokens', subtypePattern: ['claude-opus-4'] }` → `claude-opus-4 · input tokens`.
+*/
+var formatLimitLabel = (limit, t) => {
+	const metric = formatValueKey(limit.valueKey);
+	const subtype = limit.subtypePattern.filter((segment) => segment && segment !== "*").join("/");
+	if (limit.eventType === "ai") return `${subtype || t("usage-all-models.label")} · ${metric}`;
+	return `${subtype ? `${limit.eventType}/${subtype}` : limit.eventType} · ${metric}`;
+};
+var formatAmount = (amount) => amount.toLocaleString();
+var SECONDS_PER_HOUR = 3600;
+/** Render `windowHours` as a localized "N months / days / hours" string. */
+var formatWindow = (windowHours, t) => {
+	if (windowHours % 720 === 0) return t("usage-window-months.label", { count: windowHours / 720 });
+	if (windowHours % 24 === 0) return t("usage-window-days.label", { count: windowHours / 24 });
+	return t("usage-window-hours.label", { count: windowHours });
+};
+/** One display row per limit, shorter windows first. A `null` limit is reported as unlimited. */
+var computeRows = (data, t) => data.limits.map((limit) => {
+	const used = sumUsageForLimit(data.usage, limit);
+	const label = formatLimitLabel(limit, t);
+	const windowHours = limit.windowDuration / SECONDS_PER_HOUR;
+	const window = formatWindow(windowHours, t);
+	const key = `${limit.eventType}/${limit.subtypePattern.join(",")}/${limit.valueKey}/${limit.windowDuration}/${limit.limit ?? "unlimited"}`;
+	if (limit.limit === null) return {
+		key,
+		label,
+		caption: t("usage-unlimited.description", {
+			used: formatAmount(used),
+			window
+		}),
+		windowHours
+	};
+	const percent = limit.limit > 0 ? Math.min(100, Math.round(used / limit.limit * 100)) : used > 0 ? 100 : 0;
+	return {
+		key,
+		label,
+		caption: `${t("usage-percent-used.label", { percent })} · ${t("usage-limit.description", {
+			used: formatAmount(used),
+			limit: formatAmount(limit.limit),
+			window
+		})}`,
+		percent,
+		windowHours
+	};
+}).sort((left, right) => left.windowHours - right.windowHours);
+/**
+* A single usage field: an optional number carrying its label/caption as `title`/`description`
+* annotations and the consumption percentage as its value. Optional so the form renders no required
+* markers; `Schema.Number` keeps the field context-free (`R = never`) so the struct stays assignable to `Form`.
+*/
+var usageField = (title, description) => Schema.optional(Schema.Number.annotations({
+	title,
+	description
+}));
+/**
+* Build the Effect schema (one annotated field per limit) and matching values. Unlimited limits have no
+* value, so their field reads `undefined` and the renderer shows the "Unlimited" label instead of a meter.
+*/
+var buildUsageForm = (rows) => {
+	const fields = {};
+	const values = {};
+	rows.forEach((row, index) => {
+		const field = `metric_${index}`;
+		fields[field] = usageField(row.label, row.caption);
+		if (row.percent !== void 0) values[field] = row.percent;
+	});
+	return {
+		schema: Schema.Struct(fields),
+		values
+	};
+};
+/** Non-data states shown as a single `Message`, keyed by message variant (translation keys for the copy). */
+var STATE_MESSAGES = {
+	unavailable: {
+		valence: "warning",
+		icon: "ph--cloud-slash--duotone",
+		title: "usage-unavailable.title",
+		description: "usage-unavailable.description"
+	},
+	error: {
+		valence: "error",
+		icon: "ph--cloud-x--duotone",
+		title: "usage-offline.title",
+		description: "usage-offline.description"
+	},
+	empty: {
+		valence: "neutral",
+		icon: "ph--chart-bar--duotone",
+		title: "usage-empty.title",
+		description: "usage-empty.description"
+	}
+};
+/**
+* Presentational view of profile usage: renders loading/error/unavailable/empty states, or a
+* schema-driven settings form (one read-only field per limit), plus a refresh control and a
+* collapsible raw-response viewer. Pure — all data via props.
+*/
+var UsageView = ({ state, data, lastUpdated, onRefresh }) => {
+	const { t } = useTranslation(meta.profile.key);
+	const [rawExpanded, setRawExpanded] = useState(false);
+	const { schema, values, empty } = useMemo(() => {
+		const rows = data ? computeRows(data, t) : [];
+		return {
+			...buildUsageForm(rows),
+			empty: rows.length === 0
+		};
+	}, [data, t]);
+	const message = state === "unavailable" ? STATE_MESSAGES.unavailable : state === "error" ? STATE_MESSAGES.error : state === "ready" && empty ? STATE_MESSAGES.empty : void 0;
+	const meterFieldProvider = useCallback(({ fieldProps: { label, description, getValue } }) => {
+		const percent = getValue();
+		return /* @__PURE__ */ jsx(Form.Row, {
+			label,
+			description,
+			children: typeof percent === "number" ? /* @__PURE__ */ jsx(Status, {
+				progress: percent / 100,
+				"aria-label": t("usage-percent-used.label", { percent })
+			}) : t("usage-unlimited.label")
+		});
+	}, [t]);
+	return /* @__PURE__ */ jsx(Form.Root, {
+		variant: "settings",
+		layout: "static",
+		schema,
+		values,
+		children: /* @__PURE__ */ jsx(Form.Viewport, {
+			scroll: true,
+			children: /* @__PURE__ */ jsx(Form.Content, { children: /* @__PURE__ */ jsx(Form.Section, {
+				title: t("usage-section.title"),
+				description: t("usage-section.description"),
+				children: message ? /* @__PURE__ */ jsxs(Message.Root, {
+					valence: message.valence,
+					children: [/* @__PURE__ */ jsx(Message.Title, {
+						icon: message.icon,
+						children: t(message.title)
+					}), /* @__PURE__ */ jsx(Message.Body, { children: t(message.description) })]
+				}) : /* @__PURE__ */ jsx(Form.FieldSet, { fieldProvider: meterFieldProvider })
+			}) })
+		})
+	});
+};
+UsageView.displayName = "UsageView";
+//#endregion
+//#region src/containers/UsageContainer/UsageContainer.tsx
+var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-client/src/containers/UsageContainer/UsageContainer.tsx";
+/**
+* Fetches rolling-window profile usage from the hub service and renders it.
+* Connected wrapper around the presentational {@link UsageView}.
+*/
+var UsageContainer = () => {
+	const hubHttp = useHubHttpClient();
+	const [fetchState, setFetchState] = useState({ state: "loading" });
+	const [lastUpdated, setLastUpdated] = useState();
+	const [refreshCount, setRefreshCount] = useState(0);
+	useAsyncEffect(async () => {
+		if (!hubHttp) {
+			setFetchState({ state: "unavailable" });
+			return;
+		}
+		setFetchState((previous) => previous.state === "ready" ? previous : { state: "loading" });
+		try {
+			const result = await hubHttp.getProfileUsage(new Context(void 0, {
+				"~LogMeta": "~LogMeta",
+				F: __dxlog_file,
+				L: 43
+			}));
+			setFetchState({
+				state: "ready",
+				data: result
+			});
+			setLastUpdated(Date.now());
+		} catch (err) {
+			log.catch(err, void 0, {
+				"~LogMeta": "~LogMeta",
+				F: __dxlog_file,
+				L: 47,
+				S: void 0
+			});
+			setFetchState({ state: "error" });
+		}
+	}, [hubHttp, refreshCount]);
+	const handleRefresh = useCallback(() => setRefreshCount((count) => count + 1), []);
+	return /* @__PURE__ */ jsx(UsageView, {
+		...fetchState,
+		lastUpdated,
+		onRefresh: handleRefresh
+	});
+};
+UsageContainer.displayName = "UsageContainer";
+//#endregion
+export { UsageContainer as default };
+
+//# sourceMappingURL=chunk-UsageContainer.mjs.map

package/dist/lib/chunk-UsageContainer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chunk-UsageContainer.mjs","names":[],"sources":["../../src/containers/UsageContainer/UsageView.tsx","../../src/containers/UsageContainer/UsageContainer.tsx"],"sourcesContent":["//\n// Copyright 2026 DXOS.org\n//\n\nimport * as Schema from 'effect/Schema';\nimport React, { useCallback, useMemo, useState } from 'react';\n\nimport { type GetProfileUsageResponse, type MeteringLimit, type MeteringUsageItem } from '@dxos/protocols';\nimport { Message, Status, useTranslation } from '@dxos/react-ui';\nimport { Form, type FormFieldProvider } from '@dxos/react-ui-form';\n\nimport { meta } from '#meta';\n\nexport type UsageViewState = 'loading' | 'ready' | 'error' | 'unavailable';\n\ntype UsageViewCommonProps = {\n  /** Epoch milliseconds of the last successful fetch. */\n  lastUpdated?: number;\n  /** Invoked when the user requests a refresh. */\n  onRefresh?: () => void;\n};\n\n/**\n * Discriminated on `state`: the payload is required (and only present) when `state` is `'ready'`, so a\n * missing payload can't be silently rendered as an empty plan.\n */\nexport type UsageViewProps =\n  | (UsageViewCommonProps & { state: Exclude<UsageViewState, 'ready'>; data?: undefined })\n  | (UsageViewCommonProps & { state: 'ready'; data: GetProfileUsageResponse });\n\ntype TFunction = (key: string, options?: Record<string, unknown>) => string;\n\n/**\n * Whether a usage row falls under a limit. Subtype segments are matched positionally against\n * `subtypePattern` where `*` matches any segment.\n */\nconst usageMatchesLimit = (item: MeteringUsageItem, limit: MeteringLimit): boolean => {\n  if (item.eventType !== limit.eventType || item.valueKey !== limit.valueKey) {\n    return false;\n  }\n  return limit.subtypePattern.every((pattern, index) => pattern === '*' || pattern === item.subtypePattern[index]);\n};\n\n/** Sum every usage item that falls under the limit. */\nconst sumUsageForLimit = (usage: GetProfileUsageResponse['usage'], limit: MeteringLimit): number =>\n  usage.reduce((total, item) => (usageMatchesLimit(item, limit) ? total + item.amount : total), 0);\n\n/** Humanize a camelCase value key, e.g. `outputTokens` → `output tokens`. */\nconst formatValueKey = (valueKey: string): string =>\n  valueKey\n    .replace(/([A-Z])/g, ' $1')\n    .trim()\n    .toLowerCase();\n\n/**\n * Human label for a limit: a scope followed by the value key, e.g.\n * `{ eventType: 'ai', valueKey: 'outputTokens', subtypePattern: ['*'] }` → `All models · output tokens`,\n * `{ eventType: 'ai', valueKey: 'inputTokens', subtypePattern: ['claude-opus-4'] }` → `claude-opus-4 · input tokens`.\n */\nconst formatLimitLabel = (limit: MeteringLimit, t: TFunction): string => {\n  const metric = formatValueKey(limit.valueKey);\n  const subtype = limit.subtypePattern.filter((segment) => segment && segment !== '*').join('/');\n  if (limit.eventType === 'ai') {\n    return `${subtype || t('usage-all-models.label')} · ${metric}`;\n  }\n  return `${subtype ? `${limit.eventType}/${subtype}` : limit.eventType} · ${metric}`;\n};\n\nconst formatAmount = (amount: number): string => amount.toLocaleString();\n\nconst SECONDS_PER_HOUR = 60 * 60;\n\n/** Render `windowHours` as a localized \"N months / days / hours\" string. */\nconst formatWindow = (windowHours: number, t: TFunction): string => {\n  if (windowHours % (24 * 30) === 0) {\n    return t('usage-window-months.label', { count: windowHours / (24 * 30) });\n  }\n  if (windowHours % 24 === 0) {\n    return t('usage-window-days.label', { count: windowHours / 24 });\n  }\n  return t('usage-window-hours.label', { count: windowHours });\n};\n\ntype UsageRow = {\n  key: string;\n  /** Field label (schema `title` annotation). */\n  label: string;\n  /** Field caption (schema `description` annotation). */\n  caption: string;\n  /** Consumption as a whole percentage (`0`–`100`); `undefined` for an unlimited limit. */\n  percent?: number;\n  windowHours: number;\n};\n\n/** One display row per limit, shorter windows first. A `null` limit is reported as unlimited. */\nconst computeRows = (data: GetProfileUsageResponse, t: TFunction): UsageRow[] =>\n  data.limits\n    .map((limit): UsageRow => {\n      const used = sumUsageForLimit(data.usage, limit);\n      const label = formatLimitLabel(limit, t);\n      const windowHours = limit.windowDuration / SECONDS_PER_HOUR;\n      const window = formatWindow(windowHours, t);\n      const key = `${limit.eventType}/${limit.subtypePattern.join(',')}/${limit.valueKey}/${limit.windowDuration}/${limit.limit ?? 'unlimited'}`;\n      if (limit.limit === null) {\n        return {\n          key,\n          label,\n          caption: t('usage-unlimited.description', { used: formatAmount(used), window }),\n          windowHours,\n        };\n      }\n      const percent = limit.limit > 0 ? Math.min(100, Math.round((used / limit.limit) * 100)) : used > 0 ? 100 : 0;\n      return {\n        key,\n        label,\n        caption: `${t('usage-percent-used.label', { percent })} · ${t('usage-limit.description', { used: formatAmount(used), limit: formatAmount(limit.limit), window })}`,\n        percent,\n        windowHours,\n      };\n    })\n    .sort((left, right) => left.windowHours - right.windowHours);\n\n/**\n * A single usage field: an optional number carrying its label/caption as `title`/`description`\n * annotations and the consumption percentage as its value. Optional so the form renders no required\n * markers; `Schema.Number` keeps the field context-free (`R = never`) so the struct stays assignable to `Form`.\n */\nconst usageField = (title: string, description: string) =>\n  Schema.optional(Schema.Number.annotations({ title, description }));\n\n/**\n * Build the Effect schema (one annotated field per limit) and matching values. Unlimited limits have no\n * value, so their field reads `undefined` and the renderer shows the \"Unlimited\" label instead of a meter.\n */\nconst buildUsageForm = (rows: UsageRow[]) => {\n  const fields: Record<string, ReturnType<typeof usageField>> = {};\n  const values: Record<string, number> = {};\n  rows.forEach((row, index) => {\n    const field = `metric_${index}`;\n    fields[field] = usageField(row.label, row.caption);\n    if (row.percent !== undefined) {\n      values[field] = row.percent;\n    }\n  });\n  return { schema: Schema.Struct(fields), values };\n};\n\n/** Non-data states shown as a single `Message`, keyed by message variant (translation keys for the copy). */\nconst STATE_MESSAGES = {\n  unavailable: {\n    valence: 'warning',\n    icon: 'ph--cloud-slash--duotone',\n    title: 'usage-unavailable.title',\n    description: 'usage-unavailable.description',\n  },\n  error: {\n    valence: 'error',\n    icon: 'ph--cloud-x--duotone',\n    title: 'usage-offline.title',\n    description: 'usage-offline.description',\n  },\n  empty: {\n    valence: 'neutral',\n    icon: 'ph--chart-bar--duotone',\n    title: 'usage-empty.title',\n    description: 'usage-empty.description',\n  },\n} as const;\n\n/**\n * Presentational view of profile usage: renders loading/error/unavailable/empty states, or a\n * schema-driven settings form (one read-only field per limit), plus a refresh control and a\n * collapsible raw-response viewer. Pure — all data via props.\n */\nexport const UsageView = ({ state, data, lastUpdated, onRefresh }: UsageViewProps) => {\n  const { t } = useTranslation(meta.profile.key);\n  const [rawExpanded, setRawExpanded] = useState(false);\n\n  const { schema, values, empty } = useMemo(() => {\n    const rows = data ? computeRows(data, t) : [];\n    return { ...buildUsageForm(rows), empty: rows.length === 0 };\n  }, [data, t]);\n\n  // Non-data states resolve to a `Message`; `loading` shows a spinner and `ready` with data shows the form.\n  const message =\n    state === 'unavailable'\n      ? STATE_MESSAGES.unavailable\n      : state === 'error'\n        ? STATE_MESSAGES.error\n        : state === 'ready' && empty\n          ? STATE_MESSAGES.empty\n          : undefined;\n\n  // Render each metric as a meter from its percentage value; unlimited limits (no value) show a label.\n  const meterFieldProvider = useCallback<FormFieldProvider>(\n    ({ fieldProps: { label, description, getValue } }) => {\n      const percent = getValue();\n      return (\n        <Form.Row label={label} description={description}>\n          {typeof percent === 'number' ? (\n            <Status progress={percent / 100} aria-label={t('usage-percent-used.label', { percent })} />\n          ) : (\n            t('usage-unlimited.label')\n          )}\n        </Form.Row>\n      );\n    },\n    [t],\n  );\n\n  return (\n    <Form.Root variant='settings' layout='static' schema={schema} values={values}>\n      <Form.Viewport scroll>\n        <Form.Content>\n          <Form.Section title={t('usage-section.title')} description={t('usage-section.description')}>\n            {message ? (\n              <Message.Root valence={message.valence}>\n                <Message.Title icon={message.icon}>{t(message.title)}</Message.Title>\n                <Message.Body>{t(message.description)}</Message.Body>\n              </Message.Root>\n            ) : (\n              <Form.FieldSet fieldProvider={meterFieldProvider} />\n            )}\n          </Form.Section>\n\n          {/* {state === 'ready' && data && (\n            <Form.Section>\n              <Form.Row\n                label={\n                  lastUpdated !== undefined\n                    ? t('usage-last-updated.label', { time: new Date(lastUpdated).toLocaleTimeString() })\n                    : t('usage-refresh.label')\n                }\n              >\n                {onRefresh && (\n                  <IconButton\n                    iconOnly\n                    variant='ghost'\n                    icon='ph--arrow-clockwise--regular'\n                    label={t('usage-refresh.label')}\n                    onClick={onRefresh}\n                  />\n                )}\n              </Form.Row>\n            </Form.Section>\n          )} */}\n\n          {/* {state === 'ready' && data && (\n            <Form.Section>\n              <Form.Row label={t('usage-raw-json.label')}>\n                <ToggleIconButton\n                  iconOnly\n                  variant='ghost'\n                  active={rawExpanded}\n                  icon='ph--caret-right--regular'\n                  label={t('usage-raw-json.label')}\n                  onClick={() => setRawExpanded((value) => !value)}\n                />\n              </Form.Row>\n              {rawExpanded && <JsonHighlighter data={data} testId='usage-raw-json' />}\n            </Form.Section>\n          )} */}\n        </Form.Content>\n      </Form.Viewport>\n    </Form.Root>\n  );\n};\n\nUsageView.displayName = 'UsageView';\n","//\n// Copyright 2026 DXOS.org\n//\n\nimport React, { useCallback, useState } from 'react';\n\nimport { Context } from '@dxos/context';\nimport { log } from '@dxos/log';\nimport { type GetProfileUsageResponse } from '@dxos/protocols';\nimport { useAsyncEffect } from '@dxos/react-ui';\n\nimport { useHubHttpClient } from '../../hooks';\nimport { UsageView, type UsageViewState } from './UsageView';\n\n/** State + payload kept together so `ready` always carries data (mirrors the discriminated `UsageViewProps`). */\ntype UsageFetchState =\n  | {\n      state: Exclude<UsageViewState, 'ready'>;\n    }\n  | {\n      state: 'ready';\n      data: GetProfileUsageResponse;\n    };\n\n/**\n * Fetches rolling-window profile usage from the hub service and renders it.\n * Connected wrapper around the presentational {@link UsageView}.\n */\nexport const UsageContainer = () => {\n  const hubHttp = useHubHttpClient();\n  const [fetchState, setFetchState] = useState<UsageFetchState>({ state: 'loading' });\n  const [lastUpdated, setLastUpdated] = useState<number | undefined>();\n  const [refreshCount, setRefreshCount] = useState(0);\n\n  useAsyncEffect(async () => {\n    if (!hubHttp) {\n      setFetchState({ state: 'unavailable' });\n      return;\n    }\n    // Keep prior data visible while refetching; only show the loading state on first load.\n    setFetchState((previous) => (previous.state === 'ready' ? previous : { state: 'loading' }));\n    try {\n      const result = await hubHttp.getProfileUsage(new Context());\n      setFetchState({ state: 'ready', data: result });\n      setLastUpdated(Date.now());\n    } catch (err) {\n      log.catch(err);\n      setFetchState({ state: 'error' });\n    }\n  }, [hubHttp, refreshCount]);\n\n  const handleRefresh = useCallback(() => setRefreshCount((count) => count + 1), []);\n\n  return <UsageView {...fetchState} lastUpdated={lastUpdated} onRefresh={handleRefresh} />;\n};\n\nUsageContainer.displayName = 'UsageContainer';\n"],"mappings":"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"}