From 3a3f94b8b8088a6460d7dbcfd15c06287fcb5507 Mon Sep 17 00:00:00 2001 From: Sawyer Date: Wed, 30 Sep 2026 09:39:26 -0700 Subject: [PATCH 1/3] build(web): consume @corbits/react-ui 0.3.0 from npm (CL-9616) --- apps/web/package.json | 3 ++- bun.lock | 22 ++++++++-------------- 2 files changed, 10 insertions(+), 15 deletions(-) diff --git a/apps/web/package.json b/apps/web/package.json index 25d05a44f..0e8bb27af 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -22,12 +22,13 @@ "@corbits/error-sink": "workspace:*", "@corbits/mcp": "github:corbitsdev/corbits-mcp#9df1ab81d2f50d798bca2d2f44eb4759c92fac0e", "@corbits/myra": "workspace:*", - "@corbits/react-ui": "github:corbitsdev/react-ui#3b122812a307ccb35be31386f7696020c5a84635", + "@corbits/react-ui": "0.3.0", "@corbits/url-path": "workspace:*", "@corbits/workflows": "workspace:*", "@intx/types": "workspace:*", "@isomorphic-git/lightning-fs": "4.7.0", "@radix-ui/react-dialog": "^1.1.15", + "@radix-ui/react-dropdown-menu": "^2.1.16", "@radix-ui/react-slot": "^1.2.3", "@tanstack/react-query": "catalog:", "arktype": "catalog:", diff --git a/bun.lock b/bun.lock index 6082af939..400af337d 100644 --- a/bun.lock +++ b/bun.lock @@ -141,12 +141,13 @@ "@corbits/error-sink": "workspace:*", "@corbits/mcp": "github:corbitsdev/corbits-mcp#9df1ab81d2f50d798bca2d2f44eb4759c92fac0e", "@corbits/myra": "workspace:*", - "@corbits/react-ui": "github:corbitsdev/react-ui#3b122812a307ccb35be31386f7696020c5a84635", + "@corbits/react-ui": "0.3.0", "@corbits/url-path": "workspace:*", "@corbits/workflows": "workspace:*", "@intx/types": "workspace:*", "@isomorphic-git/lightning-fs": "4.7.0", "@radix-ui/react-dialog": "^1.1.15", + "@radix-ui/react-dropdown-menu": "^2.1.16", "@radix-ui/react-slot": "^1.2.3", "@tanstack/react-query": "catalog:", "arktype": "catalog:", @@ -660,7 +661,7 @@ "@corbits/openai-responses": ["@corbits/openai-responses@github:corbitsdev/corbits-openai-responses#7efe000", { "dependencies": { "arktype": "2.2.3" }, "peerDependencies": { "@intx/inference": ">=0.3.0", "@intx/types": ">=0.3.0" } }, "corbitsdev-corbits-openai-responses-7efe000", "sha512-pH6C8T1WDJjqM+YbnQpofd7HgP5krEj48JCCQK16KI98a6kaz+gffpgdOdQpU3aNVZnFlyADXod1Z4tqUG/3ww=="], - "@corbits/react-ui": ["@corbits/react-ui@github:corbitsdev/react-ui#3b12281", { "dependencies": { "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "tailwind-merge": "^3.3.1" }, "peerDependencies": { "@radix-ui/react-dialog": "^1.1.15", "@radix-ui/react-dropdown-menu": "^2.1.16", "@radix-ui/react-slot": "^1.2.3", "@radix-ui/react-tooltip": "^1.2.8", "@tanstack/react-query": "^5.90.2", "lucide-react": "^0.545.0 || ^1.0.0", "react": "^18.2.0 || ^19.0.0", "react-dom": "^18.2.0 || ^19.0.0", "sonner": "^2.0.7" }, "optionalPeers": ["@tanstack/react-query"] }, "corbitsdev-react-ui-3b12281", "sha512-Abvm/DO0Gqg0ITHGT9355ZxyKRPMVJLSSQSjpd3a8qt4JPrSMOLIOS4sX8ZMNNaArIbnY9F+VKrOWkUJUyO4Nw=="], + "@corbits/react-ui": ["@corbits/react-ui@0.3.0", "", { "dependencies": { "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "tailwind-merge": "^3.3.1" }, "peerDependencies": { "@radix-ui/react-dialog": "^1.1.15", "@radix-ui/react-dropdown-menu": "^2.1.16", "@radix-ui/react-slot": "^1.2.3", "@radix-ui/react-tooltip": "^1.2.8", "lucide-react": "^0.545.0 || ^1.0.0", "react": "^18.2.0 || ^19.0.0", "react-dom": "^18.2.0 || ^19.0.0", "sonner": "^2.0.7" }, "optionalPeers": ["@radix-ui/react-dialog", "@radix-ui/react-dropdown-menu", "@radix-ui/react-tooltip", "sonner"] }, "sha512-yOIL6ifFR9tKUiPzCGWQ5ulBYMMmXUBxgnfgV1tK15FUAlIn401FzJ6riPGVrTjsX0VU0LewUyBP7S6vAwz8Fg=="], "@corbits/url-path": ["@corbits/url-path@workspace:packages/url-path"], @@ -944,8 +945,6 @@ "@radix-ui/react-slot": ["@radix-ui/react-slot@1.3.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.5" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-qx7oqnYbxnK9kYI9m317qmFmEgo6ywqWvbTogdj7cL9p3/yx4M48p7Rnw5z3H890cL/ow/EeWJsuTykeZVXP5Q=="], - "@radix-ui/react-tooltip": ["@radix-ui/react-tooltip@1.2.16", "", { "dependencies": { "@radix-ui/primitive": "1.1.7", "@radix-ui/react-compose-refs": "1.1.5", "@radix-ui/react-context": "1.2.2", "@radix-ui/react-dismissable-layer": "1.1.19", "@radix-ui/react-id": "1.1.4", "@radix-ui/react-popper": "1.3.7", "@radix-ui/react-portal": "1.1.17", "@radix-ui/react-presence": "1.1.10", "@radix-ui/react-primitive": "2.1.10", "@radix-ui/react-slot": "1.3.3", "@radix-ui/react-use-controllable-state": "1.2.6", "@radix-ui/react-use-layout-effect": "1.1.4", "@radix-ui/react-visually-hidden": "1.2.11" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-6EamKFRRnlpdadndbZ6LMwycfwkwPte1B42hs6QA0gYhjaOKqW4PZ4pjaW9UrlDX5eVt/OjncE7BFTPL5nmZhg=="], - "@radix-ui/react-use-callback-ref": ["@radix-ui/react-use-callback-ref@1.1.4", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-R6OUY2e2fA6Yn6s+VSx5KBV6Nx8LQEhu+cz7LCej18rQ1HLyg9PSC9jP/ZNx0o6FAIK9c0F1kHylzSxKsdlkrQ=="], "@radix-ui/react-use-controllable-state": ["@radix-ui/react-use-controllable-state@1.2.6", "", { "dependencies": { "@radix-ui/primitive": "1.1.7", "@radix-ui/react-use-effect-event": "0.0.5", "@radix-ui/react-use-layout-effect": "1.1.4" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-uEQJGT97ZA/TgP/Hydw47lHu+/vQj6z/0jA+WeTbK1o9Rx45GImjpD0tc3W5ad3D6XTSR6e1yEO0FvGq6WQfVQ=="], @@ -960,8 +959,6 @@ "@radix-ui/react-use-size": ["@radix-ui/react-use-size@1.1.4", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.4" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-D3anSY15EJoxrihpsXI6SMrmmonnQtR2ni7arO+Lfdg3O95b9hNXxONk8jA5C8ANdF/h5HMAxejgs8PWJ6rlhw=="], - "@radix-ui/react-visually-hidden": ["@radix-ui/react-visually-hidden@1.2.11", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.10" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-NFS86RYYZb4/exihaESBGOpMJFz8MGLAfu3mOBSGByVnVPC9JPASfYubxd/8KbkQK0sYAv8lVQDEQukDX/qXvQ=="], - "@radix-ui/rect": ["@radix-ui/rect@1.1.3", "", {}, "sha512-JtyZR+mqgBibTo8xea3B6ZRmzZiM/YeVBtUkas6zMuXjAlfIFIW2FgqeM9eLyvEaYX66vr6DJMK+4U6LV0KhNw=="], "@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.0-rc.3", "", {}, "sha512-eybk3TjzzzV97Dlj5c+XrBFW57eTNhzod66y9HrBlzJ6NsCrWCp/2kaPS3K9wJmurBC0Tdw4yPjXKZqlznim3Q=="], @@ -1842,6 +1839,8 @@ "@corbits/mailbox/hono-openapi": ["hono-openapi@1.3.1", "", { "peerDependencies": { "@hono/standard-validator": "^0.2.0", "@standard-community/standard-json": "^0.3.5", "@standard-community/standard-openapi": "^0.2.9", "@types/json-schema": "^7.0.15", "hono": "^4.11.2", "openapi-types": "^12.1.3" }, "optionalPeers": ["@hono/standard-validator", "hono"] }, "sha512-NLVeVkhKZ3drmQNEIPac8HX8Y54uf1hJAgIM/7MfDsaeVVmB+QILWQxx5x3R3NvRHgedcbEbOCGY2uR7WQYyMw=="], + "@corbits/mcp/@corbits/credential-mcp": ["@corbits/credential-mcp@github:corbitsdev/corbits-credential-mcp#fb9ec3a", { "peerDependencies": { "@intx/harness": ">=0.3.0", "@intx/types": ">=0.3.0" } }, "corbitsdev-corbits-credential-mcp-fb9ec3a", "sha512-Co4jR+L3pfBbVYY7I6jRftoHeSb5+LCxzEEaAhVLYA3aY2PrPHZV37+DWxj3fcK/KdzboqbT3XSnqU8DyHRU9Q=="], + "@corbits/myra/@corbits/artifacts": ["@corbits/artifacts@github:corbitsdev/corbits-artifacts#4a2a3c2", { "dependencies": { "@hono/standard-validator": "^0.2.3" }, "peerDependencies": { "@intx/agent": "^0.3.0", "@intx/hub-api": "^0.3.0", "@intx/types": "^0.3.0", "arktype": "^2.1.29", "drizzle-orm": "^0.45.2", "hono": "^4.12.32", "hono-openapi": "^1.2.0", "postgres": "^3.4.9" } }, "corbitsdev-corbits-artifacts-4a2a3c2", "sha512-UY5nkQ31kGmYgqgIOSlbigwvm7c/s2kpqEbF6Oqo0rzoS1RejpPp+w/Yim6h2MRpYCl5CXgAET1MhkDboHuWBA=="], "@esbuild-kit/core-utils/esbuild": ["esbuild@0.18.20", "", { "optionalDependencies": { "@esbuild/android-arm": "0.18.20", "@esbuild/android-arm64": "0.18.20", "@esbuild/android-x64": "0.18.20", "@esbuild/darwin-arm64": "0.18.20", "@esbuild/darwin-x64": "0.18.20", "@esbuild/freebsd-arm64": "0.18.20", "@esbuild/freebsd-x64": "0.18.20", "@esbuild/linux-arm": "0.18.20", "@esbuild/linux-arm64": "0.18.20", "@esbuild/linux-ia32": "0.18.20", "@esbuild/linux-loong64": "0.18.20", "@esbuild/linux-mips64el": "0.18.20", "@esbuild/linux-ppc64": "0.18.20", "@esbuild/linux-riscv64": "0.18.20", "@esbuild/linux-s390x": "0.18.20", "@esbuild/linux-x64": "0.18.20", "@esbuild/netbsd-x64": "0.18.20", "@esbuild/openbsd-x64": "0.18.20", "@esbuild/sunos-x64": "0.18.20", "@esbuild/win32-arm64": "0.18.20", "@esbuild/win32-ia32": "0.18.20", "@esbuild/win32-x64": "0.18.20" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA=="], @@ -1860,13 +1859,11 @@ "@tailwindcss/oxide-wasm32-wasi/tslib": ["tslib@2.8.1", "", { "bundled": true }, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="], - "@workbench/hub/@corbits/artifacts": ["@corbits/artifacts@github:corbitsdev/corbits-artifacts#4a2a3c2", { "dependencies": { "@hono/standard-validator": "^0.2.3" }, "peerDependencies": { "@intx/agent": "^0.3.0", "@intx/hub-api": "^0.3.0", "@intx/types": "^0.3.0", "arktype": "^2.1.29", "drizzle-orm": "^0.45.2", "hono": "^4.12.32", "hono-openapi": "^1.2.0", "postgres": "^3.4.9" } }, "corbitsdev-corbits-artifacts-4a2a3c2", "sha512-UY5nkQ31kGmYgqgIOSlbigwvm7c/s2kpqEbF6Oqo0rzoS1RejpPp+w/Yim6h2MRpYCl5CXgAET1MhkDboHuWBA=="], + "@workbench/hub/@corbits/mcp": ["@corbits/mcp@github:corbitsdev/corbits-mcp#9df1ab8", { "dependencies": { "@corbits/credential-mcp": "github:corbitsdev/corbits-credential-mcp#fb9ec3a6754348cd33c388c70c0830b8844c83de", "@intx/db": "^0.3.0", "@intx/hub-api": "^0.3.0", "@intx/types": "^0.3.0", "arktype": "2.1.20", "drizzle-orm": "^0.45.2", "hono": "^4.11.9" }, "peerDependencies": { "@intx/agent": ">=0.3.0" } }, "corbitsdev-corbits-mcp-9df1ab8", "sha512-5ILvgNI4J/U2kWitFKZmIJO1qybCdIkKZ73ZELu6PWrbw6tARxO8/ffaGoK0nIMrT4EcBZaMd6YkR0vLdPOWnw=="], - "@workbench/hub/@corbits/codex-provider": ["@corbits/codex-provider@github:corbitsdev/corbits-codex-provider#a1f475f", { "dependencies": { "@corbits/oauth-core": "github:corbitsdev/corbits-oauth-core", "@corbits/openai-responses": "github:corbitsdev/corbits-openai-responses", "arktype": "2.2.3" }, "peerDependencies": { "@intx/inference": ">=0.3.0", "@intx/types": ">=0.3.0" } }, "corbitsdev-corbits-codex-provider-a1f475f", "sha512-D6d0lblWx/4KudfLwQoQGrLB8GKRLP/HVp1cx08L2/hOGZAgH6txLPpeEtBqjl+R520qXSSPfM0kDC+3XNaAfw=="], + "@workbench/hub/@corbits/memory": ["@corbits/memory@github:corbitsdev/corbits-memory#8be608b", { "dependencies": { "@intx/agent": "0.2.2", "@intx/authz": "0.2.2", "@intx/hub-api": "0.2.2", "@intx/log": "0.2.2", "@intx/types": "^0.3.0", "@intx/workflow": "0.2.2", "arktype": "^2.1.29", "drizzle-orm": "^0.45.1", "hono": "^4.9.0", "hono-openapi": "^1.3.1", "postgres": "^3.4.7" } }, "corbitsdev-corbits-memory-8be608b", "sha512-7NcVcz3IHFTfx6ICQT+4gjX1PBNLqjlCqoEOPDFVW7wc4e2+Ueg9wOZQ+0MVttpQCaDg6MObl4kie410UQm/sQ=="], - "@workbench/hub/@corbits/mailbox": ["@corbits/mailbox@github:corbitsdev/corbits-mailbox#65590a8", { "dependencies": { "@hono/standard-validator": "0.2.3", "@intx/crypto": "0.3.0", "@standard-community/standard-json": "0.3.5", "@standard-community/standard-openapi": "0.2.9", "arktype": "2.1.29", "hono-openapi": "1.3.1" }, "peerDependencies": { "@intx/log": "^0.2.2", "drizzle-orm": "^0.45.2", "hono": "^4.12.0", "postgres": "^3.4.0" } }, "corbitsdev-corbits-mailbox-65590a8", "sha512-tK7xXcL780iX3I+5R68gmyqgEA0uwYO1qdTDNn/LF6tOiFIm0lt2szjspJ8JMKMTzKC6SSai03p723rEGM1jOg=="], - - "@workbench/hub/@corbits/xai-provider": ["@corbits/xai-provider@github:corbitsdev/corbits-xai-provider#9f2d4ba", { "dependencies": { "@corbits/oauth-core": "github:corbitsdev/corbits-oauth-core", "@corbits/openai-responses": "github:corbitsdev/corbits-openai-responses", "arktype": "2.2.3" }, "peerDependencies": { "@intx/inference": ">=0.3.0", "@intx/types": ">=0.3.0" } }, "corbitsdev-corbits-xai-provider-9f2d4ba", "sha512-ZjvKxGcp+QzCh8zeXHg7kNbtkpR/itZkmQAcdG1aOAOjHaNwfGVpkPc/c/XtwPNsQyaDjF8W9CHb4rH1xI2uCA=="], + "@workbench/web/@corbits/credential-mcp": ["@corbits/credential-mcp@github:corbitsdev/corbits-credential-mcp#fb9ec3a", { "peerDependencies": { "@intx/harness": ">=0.3.0", "@intx/types": ">=0.3.0" } }, "corbitsdev-corbits-credential-mcp-fb9ec3a", "sha512-Co4jR+L3pfBbVYY7I6jRftoHeSb5+LCxzEEaAhVLYA3aY2PrPHZV37+DWxj3fcK/KdzboqbT3XSnqU8DyHRU9Q=="], "better-call/@better-auth/utils": ["@better-auth/utils@0.5.0", "", { "dependencies": { "@noble/hashes": "^2.0.1" } }, "sha512-BL8W4EfIZFwlu0r54m3v1ztjDhu6dDe/amLTm0xybmbZaNgYUqhD3SjpAsnq0q8YD6/ki4iwIgxJNLP/N3TxiA=="], @@ -1962,9 +1959,6 @@ "@esbuild-kit/core-utils/esbuild/@esbuild/win32-x64": ["@esbuild/win32-x64@0.18.20", "", { "os": "win32", "cpu": "x64" }, "sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ=="], - "@workbench/hub/@corbits/mailbox/hono-openapi": ["hono-openapi@1.3.1", "", { "peerDependencies": { "@hono/standard-validator": "^0.2.0", "@standard-community/standard-json": "^0.3.5", "@standard-community/standard-openapi": "^0.2.9", "@types/json-schema": "^7.0.15", "hono": "^4.11.2", "openapi-types": "^12.1.3" }, "optionalPeers": ["@hono/standard-validator", "hono"] }, "sha512-NLVeVkhKZ3drmQNEIPac8HX8Y54uf1hJAgIM/7MfDsaeVVmB+QILWQxx5x3R3NvRHgedcbEbOCGY2uR7WQYyMw=="], - - "cross-spawn/which/isexe": ["isexe@2.0.0", "", {}, "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="], "minipass-flush/minipass/yallist": ["yallist@4.0.0", "", {}, "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="], From 32f4bac7f0a061e48c98dfa6da7c3a4bacd86b24 Mon Sep 17 00:00:00 2001 From: Sawyer Date: Wed, 30 Sep 2026 09:39:27 -0700 Subject: [PATCH 2/3] refactor(web): import react-ui dialogs, menus, toasts and the palette by subpath (CL-9616) --- apps/web/src/auth-screen.tsx | 3 +-- apps/web/src/bench/grants-tab.tsx | 3 ++- apps/web/src/bench/information-tab.tsx | 3 ++- apps/web/src/chat/approval-row.tsx | 3 ++- apps/web/src/command-palette-provider.tsx | 8 +++++-- apps/web/src/global-routines.ts | 2 +- .../src/onboarding/provider-connect-step.tsx | 23 +++++++++++-------- apps/web/src/onboarding/provider-rows.css | 17 ++++++++++++++ apps/web/src/pages/create-agent-panel.tsx | 7 ++---- apps/web/src/pages/create-skill-dialog.tsx | 6 ++--- apps/web/src/pages/library-page.tsx | 7 ++---- apps/web/src/pages/new-workbench-picker.tsx | 3 ++- apps/web/src/pages/skill-detail-page.tsx | 2 +- apps/web/src/pages/tools-page.tsx | 2 +- apps/web/src/pages/workbench-page.tsx | 3 ++- apps/web/src/react-ui-toast-mock.ts | 4 ++-- apps/web/src/root.tsx | 2 +- apps/web/src/settings/account-section.tsx | 3 ++- apps/web/src/settings/credentials-section.tsx | 6 ++--- apps/web/src/settings/grants-section.tsx | 18 ++++++++------- apps/web/src/settings/people-section.tsx | 7 ++---- apps/web/src/settings/roles-section.tsx | 16 +++++++------ apps/web/src/shell/canvas-column.tsx | 6 ++--- apps/web/src/shell/context-menu/items.tsx | 2 +- .../context-menu/lib/context-menu-view.tsx | 2 +- 25 files changed, 89 insertions(+), 69 deletions(-) diff --git a/apps/web/src/auth-screen.tsx b/apps/web/src/auth-screen.tsx index 64295de43..20a978e91 100644 --- a/apps/web/src/auth-screen.tsx +++ b/apps/web/src/auth-screen.tsx @@ -2,8 +2,7 @@ // seeds a default dev account, and hosted deployments already have accounts — // with creating an account one click away in the form's footer. -import { Button } from "@corbits/react-ui"; -import { LoginForm } from "@corbits/react-ui/blocks/login/login-form"; +import { Button, LoginForm } from "@corbits/react-ui"; import { useState } from "react"; import { AuthLayout } from "./auth/auth-layout"; diff --git a/apps/web/src/bench/grants-tab.tsx b/apps/web/src/bench/grants-tab.tsx index abf841d50..2656de2d6 100644 --- a/apps/web/src/bench/grants-tab.tsx +++ b/apps/web/src/bench/grants-tab.tsx @@ -1,4 +1,5 @@ -import { ConfirmButton, toast } from "@corbits/react-ui"; +import { ConfirmButton } from "@corbits/react-ui"; +import { toast } from "@corbits/react-ui/ui/toast"; import type { GrantEffect } from "@intx/types"; import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; diff --git a/apps/web/src/bench/information-tab.tsx b/apps/web/src/bench/information-tab.tsx index c28e88adc..b719e6f60 100644 --- a/apps/web/src/bench/information-tab.tsx +++ b/apps/web/src/bench/information-tab.tsx @@ -1,4 +1,5 @@ -import { Button, Skeleton, formatRelativeTime, toast } from "@corbits/react-ui"; +import { Button, Skeleton, formatRelativeTime } from "@corbits/react-ui"; +import { toast } from "@corbits/react-ui/ui/toast"; import { useQuery } from "@tanstack/react-query"; import { useState } from "react"; diff --git a/apps/web/src/chat/approval-row.tsx b/apps/web/src/chat/approval-row.tsx index e60177c67..5562b4967 100644 --- a/apps/web/src/chat/approval-row.tsx +++ b/apps/web/src/chat/approval-row.tsx @@ -2,7 +2,8 @@ // workbench workbench's info column and the chat transcript, so a person can // answer an agent's ask wherever they are looking when it lands. -import { Button, formatRelativeTime, toast } from "@corbits/react-ui"; +import { Button, formatRelativeTime } from "@corbits/react-ui"; +import { toast } from "@corbits/react-ui/ui/toast"; import { useMutation, useQueryClient } from "@tanstack/react-query"; import { approveApproval, rejectApproval } from "../api"; diff --git a/apps/web/src/command-palette-provider.tsx b/apps/web/src/command-palette-provider.tsx index 3b8f9113a..2af4665d1 100644 --- a/apps/web/src/command-palette-provider.tsx +++ b/apps/web/src/command-palette-provider.tsx @@ -1,5 +1,9 @@ -import { artifactKindLabel, CommandPalette, useCommandShortcut } from "@corbits/react-ui"; -import type { CommandPaletteGroup } from "@corbits/react-ui"; +import { artifactKindLabel } from "@corbits/react-ui"; +import { + CommandPalette, + useCommandShortcut, + type CommandPaletteGroup, +} from "@corbits/react-ui/ui/command-palette"; import { listWorkbenches } from "@/chat/workbench-tenants"; import { libraryArtifactPath } from "@/library"; import { reportError } from "@corbits/error-sink"; diff --git a/apps/web/src/global-routines.ts b/apps/web/src/global-routines.ts index 5965ef3aa..36bb1fd2f 100644 --- a/apps/web/src/global-routines.ts +++ b/apps/web/src/global-routines.ts @@ -1,7 +1,7 @@ // Scheduled workflow definitions across every bench the signed-in account // belongs to — the aggregation both Workflows surfaces read from: the // roster at `/workflows` and the detail page at `/workflows/`. -import { toast } from "@corbits/react-ui"; +import { toast } from "@corbits/react-ui/ui/toast"; import { reportError } from "@corbits/error-sink"; import { useMemo } from "react"; import { useQueries, useQueryClient } from "@tanstack/react-query"; diff --git a/apps/web/src/onboarding/provider-connect-step.tsx b/apps/web/src/onboarding/provider-connect-step.tsx index 5f1ccf0e7..6aa79bd77 100644 --- a/apps/web/src/onboarding/provider-connect-step.tsx +++ b/apps/web/src/onboarding/provider-connect-step.tsx @@ -1,7 +1,7 @@ // Connects one provider credential through the stock catalog routes and // derives the single offering it mints; a tenant that already resolves an // offering skips this step (see `resolveExistingOffering`). -import { Button, Input, RadioGroup, RadioOption, Select } from "@corbits/react-ui"; +import { Button, Input, Select } from "@corbits/react-ui"; import { Cpu, Key, LinkSimple } from "@/lib/icons"; import { cancelProviderLogin, @@ -456,12 +456,9 @@ export function ProviderConnectStep({ return (
void handleSubmit(event)}> - + {/* Native radios until react-ui ships its RadioGroup again. */} +
+ Inference provider {PROVIDER_OPTIONS.map((candidate) => { const rowId = `provider-${candidate.id}`; const RowIcon = candidate.local @@ -471,7 +468,15 @@ export function ProviderConnectStep({ : Key; return (
- + selectOption(candidate.id)} + aria-describedby={`${rowId}-desc`} + /> @@ -484,7 +489,7 @@ export function ProviderConnectStep({
); })} - +
{option === undefined ? null : oauthProvider !== undefined ? ( <> {modelPicker} diff --git a/apps/web/src/onboarding/provider-rows.css b/apps/web/src/onboarding/provider-rows.css index 75c3c691f..6f48c6573 100644 --- a/apps/web/src/onboarding/provider-rows.css +++ b/apps/web/src/onboarding/provider-rows.css @@ -32,3 +32,20 @@ font-size: 0.75rem; color: var(--muted-foreground); } + +.onboarding-provider-group { + margin: 0; + padding: 0; + border: 0; +} + +.onboarding-provider-group legend { + padding: 0; + font-size: 0.875rem; + font-weight: 500; +} + +.onboarding-provider-row input[type="radio"] { + flex: none; + accent-color: var(--primary); +} diff --git a/apps/web/src/pages/create-agent-panel.tsx b/apps/web/src/pages/create-agent-panel.tsx index 5361496d2..234e39324 100644 --- a/apps/web/src/pages/create-agent-panel.tsx +++ b/apps/web/src/pages/create-agent-panel.tsx @@ -1,8 +1,8 @@ // No drafting assist or per-agent model/skills pin: the routes that backed // those were removed from the hub. +import { Button, IntakeForm, SelectionCheckbox, Textarea } from "@corbits/react-ui"; import { - Button, Dialog, DialogBody, DialogContent, @@ -10,10 +10,7 @@ import { DialogFooter, DialogHeader, DialogTitle, - IntakeForm, - SelectionCheckbox, - Textarea, -} from "@corbits/react-ui"; +} from "@corbits/react-ui/ui/dialog"; import type { IntakeField } from "@corbits/react-ui"; import { useState } from "react"; diff --git a/apps/web/src/pages/create-skill-dialog.tsx b/apps/web/src/pages/create-skill-dialog.tsx index da9690602..a4bb4ad3b 100644 --- a/apps/web/src/pages/create-skill-dialog.tsx +++ b/apps/web/src/pages/create-skill-dialog.tsx @@ -1,8 +1,8 @@ // Scoped down to naming the asset only: the stock asset routes accept a // bare `{ kind, name, displayName }`, with no stock route yet to write a // skill's SKILL.md content in the same call. +import { Button, IntakeForm, intakeFieldsComplete } from "@corbits/react-ui"; import { - Button, Dialog, DialogBody, DialogContent, @@ -10,9 +10,7 @@ import { DialogFooter, DialogHeader, DialogTitle, - IntakeForm, - intakeFieldsComplete, -} from "@corbits/react-ui"; +} from "@corbits/react-ui/ui/dialog"; import type { IntakeField } from "@corbits/react-ui"; import { useState } from "react"; diff --git a/apps/web/src/pages/library-page.tsx b/apps/web/src/pages/library-page.tsx index c005394f0..918a0ffdb 100644 --- a/apps/web/src/pages/library-page.tsx +++ b/apps/web/src/pages/library-page.tsx @@ -1,10 +1,6 @@ import { BulkActionBar, Button, - Menu, - MenuContent, - MenuItem, - MenuTrigger, RichEmptyState, SelectionCheckbox, Skeleton, @@ -16,9 +12,10 @@ import { TableRow, artifactKindLabel, formatRelativeTime, - toast, useListSelection, } from "@corbits/react-ui"; +import { Menu, MenuContent, MenuItem, MenuTrigger } from "@corbits/react-ui/ui/menu"; +import { toast } from "@corbits/react-ui/ui/toast"; import type { SelectionCheckboxState, UseListSelectionResult } from "@corbits/react-ui"; import { ArtifactRenderer, diff --git a/apps/web/src/pages/new-workbench-picker.tsx b/apps/web/src/pages/new-workbench-picker.tsx index 511e04bd9..223bbcb74 100644 --- a/apps/web/src/pages/new-workbench-picker.tsx +++ b/apps/web/src/pages/new-workbench-picker.tsx @@ -1,7 +1,8 @@ // A new workbench starts from one message: creating it deploys its agent and // posts the message so the worker starts. -import { Button, toast } from "@corbits/react-ui"; +import { Button } from "@corbits/react-ui"; +import { toast } from "@corbits/react-ui/ui/toast"; import { WorkbenchLoadingState } from "@/chat"; import { useState } from "react"; import { useMutation, useQueryClient } from "@tanstack/react-query"; diff --git a/apps/web/src/pages/skill-detail-page.tsx b/apps/web/src/pages/skill-detail-page.tsx index a1798b28b..14a0172f2 100644 --- a/apps/web/src/pages/skill-detail-page.tsx +++ b/apps/web/src/pages/skill-detail-page.tsx @@ -8,8 +8,8 @@ import { Section, Textarea, formatRelativeTime, - toast, } from "@corbits/react-ui"; +import { toast } from "@corbits/react-ui/ui/toast"; import { Lightning } from "@/lib/icons"; import { WorkbenchLoadingState } from "@/chat"; import { ApiQueryError, describeApiError } from "@/lib/api-query"; diff --git a/apps/web/src/pages/tools-page.tsx b/apps/web/src/pages/tools-page.tsx index 4940c8b56..bd3920151 100644 --- a/apps/web/src/pages/tools-page.tsx +++ b/apps/web/src/pages/tools-page.tsx @@ -18,8 +18,8 @@ import { TableHead, TableHeader, TableRow, - toast, } from "@corbits/react-ui"; +import { toast } from "@corbits/react-ui/ui/toast"; import { QueryView } from "@/lib/api-query"; import { Plugs } from "@/lib/icons"; diff --git a/apps/web/src/pages/workbench-page.tsx b/apps/web/src/pages/workbench-page.tsx index 7980b4b5d..a58c56ea0 100644 --- a/apps/web/src/pages/workbench-page.tsx +++ b/apps/web/src/pages/workbench-page.tsx @@ -1,7 +1,8 @@ // See docs/chat-mail-threading.md. The bench pill opens a drawer that pushes // the thread left; the drawer's Information tab carries the bench overview. -import { Button, EmptyState, PageShell, Skeleton, toast } from "@corbits/react-ui"; +import { Button, EmptyState, PageShell, Skeleton } from "@corbits/react-ui"; +import { toast } from "@corbits/react-ui/ui/toast"; import { WarningCircle } from "@/lib/icons"; import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import { useCallback, useEffect, useRef, useState } from "react"; diff --git a/apps/web/src/react-ui-toast-mock.ts b/apps/web/src/react-ui-toast-mock.ts index 827803485..56f0af7e3 100644 --- a/apps/web/src/react-ui-toast-mock.ts +++ b/apps/web/src/react-ui-toast-mock.ts @@ -4,7 +4,7 @@ import { mock } from "bun:test"; import { toast as sonnerToast } from "sonner"; -const actualReactUi = await import("@corbits/react-ui"); +const actualReactUi = await import("@corbits/react-ui/ui/toast"); const realToast = actualReactUi.toast; type ToastFn = typeof actualReactUi.toast; @@ -15,7 +15,7 @@ export function spyOnReactUiToast(): ReturnType> { // `toast` carries its own variants (`toast.error` and friends); the spy // stands in for the whole callable, so it must carry them too. Object.assign(spy, realToast); - mock.module("@corbits/react-ui", () => ({ + mock.module("@corbits/react-ui/ui/toast", () => ({ ...actualReactUi, toast: spy, })); diff --git a/apps/web/src/root.tsx b/apps/web/src/root.tsx index 6d34d9bfb..eaff72f4f 100644 --- a/apps/web/src/root.tsx +++ b/apps/web/src/root.tsx @@ -2,7 +2,7 @@ // first-login hook, and the theme shell everything else renders inside. // Kept out of `main.tsx` so the entry module owns nothing but the mount. -import { Toaster, toast } from "@corbits/react-ui"; +import { Toaster, toast } from "@corbits/react-ui/ui/toast"; import { useCallback, useEffect, useLayoutEffect, useState, useSyncExternalStore } from "react"; import { getLogger } from "@/lib/client-log"; diff --git a/apps/web/src/settings/account-section.tsx b/apps/web/src/settings/account-section.tsx index 71a33be3c..8f1a0c3bf 100644 --- a/apps/web/src/settings/account-section.tsx +++ b/apps/web/src/settings/account-section.tsx @@ -2,7 +2,8 @@ // The Agent card was removed — nothing there could change until a hub // preference store exists to write it to. -import { Badge, Button, toast } from "@corbits/react-ui"; +import { Badge, Button } from "@corbits/react-ui"; +import { toast } from "@corbits/react-ui/ui/toast"; import { ChatCircleDots, Copy, SignOut } from "@/lib/icons"; import { useQuery } from "@tanstack/react-query"; diff --git a/apps/web/src/settings/credentials-section.tsx b/apps/web/src/settings/credentials-section.tsx index a0b4600c5..7b4b16fb2 100644 --- a/apps/web/src/settings/credentials-section.tsx +++ b/apps/web/src/settings/credentials-section.tsx @@ -3,8 +3,8 @@ // by signing in is renewed by signing in again, through the same hub-hosted // login the onboarding step uses. +import { Button, EmptyState, Input } from "@corbits/react-ui"; import { - Button, Dialog, DialogBody, DialogContent, @@ -12,9 +12,7 @@ import { DialogFooter, DialogHeader, DialogTitle, - EmptyState, - Input, -} from "@corbits/react-ui"; +} from "@corbits/react-ui/ui/dialog"; import { reportError } from "@corbits/error-sink"; import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import { useState } from "react"; diff --git a/apps/web/src/settings/grants-section.tsx b/apps/web/src/settings/grants-section.tsx index 89c2ddb52..d2c478c20 100644 --- a/apps/web/src/settings/grants-section.tsx +++ b/apps/web/src/settings/grants-section.tsx @@ -4,13 +4,6 @@ import { Badge, Button, - Dialog, - DialogBody, - DialogContent, - DialogDescription, - DialogFooter, - DialogHeader, - DialogTitle, EmptyState, FilterBar, SettingsPanel, @@ -20,8 +13,17 @@ import { TableHead, TableHeader, TableRow, - toast, } from "@corbits/react-ui"; +import { + Dialog, + DialogBody, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, +} from "@corbits/react-ui/ui/dialog"; +import { toast } from "@corbits/react-ui/ui/toast"; import { grantEffects, grantOrigins } from "@intx/types"; import type { GrantEffect, GrantOrigin } from "@intx/types"; import { useQuery, useQueryClient } from "@tanstack/react-query"; diff --git a/apps/web/src/settings/people-section.tsx b/apps/web/src/settings/people-section.tsx index 18fa8668c..45c7b52d0 100644 --- a/apps/web/src/settings/people-section.tsx +++ b/apps/web/src/settings/people-section.tsx @@ -1,9 +1,8 @@ // Agent/workflow principals are machine identities, not people to manage // here — Roles/Grants list every kind since those assign to machines too. +import { Badge, Button, EmptyState, Input } from "@corbits/react-ui"; import { - Badge, - Button, Dialog, DialogBody, DialogContent, @@ -11,9 +10,7 @@ import { DialogFooter, DialogHeader, DialogTitle, - EmptyState, - Input, -} from "@corbits/react-ui"; +} from "@corbits/react-ui/ui/dialog"; import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import { useState } from "react"; diff --git a/apps/web/src/settings/roles-section.tsx b/apps/web/src/settings/roles-section.tsx index 02e8e6f57..ae1031b98 100644 --- a/apps/web/src/settings/roles-section.tsx +++ b/apps/web/src/settings/roles-section.tsx @@ -1,13 +1,6 @@ import { Badge, Button, - Dialog, - DialogBody, - DialogContent, - DialogDescription, - DialogFooter, - DialogHeader, - DialogTitle, EmptyState, Input, SettingsPanel, @@ -18,6 +11,15 @@ import { TableHeader, TableRow, } from "@corbits/react-ui"; +import { + Dialog, + DialogBody, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, +} from "@corbits/react-ui/ui/dialog"; import { useQuery, useQueryClient } from "@tanstack/react-query"; import { useState } from "react"; diff --git a/apps/web/src/shell/canvas-column.tsx b/apps/web/src/shell/canvas-column.tsx index f077b060c..45566ac57 100644 --- a/apps/web/src/shell/canvas-column.tsx +++ b/apps/web/src/shell/canvas-column.tsx @@ -8,12 +8,10 @@ import { Button, EmptyState, ProfileCard, - toast, - type ProfileCardAction, - // vendor noun: channel — @corbits/react-ui's own `ProfileCardChannel`, - // published from a separate repo, not part of this rename. + type ProfileCardAction, // vendor noun: channel — @corbits/react-ui's own `ProfileCardChannel`, // published from a separate repo, not part of this rename. type ProfileCardChannel, } from "@corbits/react-ui"; +import { toast } from "@corbits/react-ui/ui/toast"; import { ArtifactRenderer, ArtifactTextEditor, type ArtifactSaveState } from "@/library"; import type { ProfileSubject } from "@/chat"; import { ArrowsIn, ArrowsOut, ArrowSquareOut, CaretLeft, UserCircle, X } from "@/lib/icons"; diff --git a/apps/web/src/shell/context-menu/items.tsx b/apps/web/src/shell/context-menu/items.tsx index 79d5ab4a6..1fe295f90 100644 --- a/apps/web/src/shell/context-menu/items.tsx +++ b/apps/web/src/shell/context-menu/items.tsx @@ -18,7 +18,7 @@ import { SlidersHorizontal, UserCircle, } from "@/lib/icons"; -import { toast } from "@corbits/react-ui"; +import { toast } from "@corbits/react-ui/ui/toast"; import { copyArtifactLinks, diff --git a/apps/web/src/shell/context-menu/lib/context-menu-view.tsx b/apps/web/src/shell/context-menu/lib/context-menu-view.tsx index f7e35b8f2..b77c9583e 100644 --- a/apps/web/src/shell/context-menu/lib/context-menu-view.tsx +++ b/apps/web/src/shell/context-menu/lib/context-menu-view.tsx @@ -5,7 +5,7 @@ import { MenuLabel, MenuSeparator, MenuTrigger, -} from "@corbits/react-ui"; +} from "@corbits/react-ui/ui/menu"; import { restoreFocus } from "./focus-restore"; import type { ContextMenu } from "./menu"; From 91263ab06a2db6142cacf4356e28a196468c96f1 Mon Sep 17 00:00:00 2001 From: Sawyer Date: Wed, 30 Sep 2026 09:39:27 -0700 Subject: [PATCH 3/3] feat(web): avatars are thin wrappers over the react-ui Avatar (CL-9616) --- apps/web/src/app.css | 67 ---------------------------- apps/web/src/chat/avatar.tsx | 54 +++++++++------------- apps/web/src/pages/worker-page.tsx | 5 ++- apps/web/src/pages/workers-page.tsx | 5 ++- apps/web/src/voice/voice-overlay.tsx | 2 +- 5 files changed, 27 insertions(+), 106 deletions(-) diff --git a/apps/web/src/app.css b/apps/web/src/app.css index fe9afa566..bc3df6a70 100644 --- a/apps/web/src/app.css +++ b/apps/web/src/app.css @@ -800,74 +800,7 @@ select:disabled, font-weight: 650; } -.wb-av { - position: relative; - display: inline-flex; - flex: 0 0 auto; -} - -.wb-av-st { - position: absolute; - right: -3px; - bottom: -3px; - width: 10px; - height: 10px; - border-radius: 50%; - border: 2px solid var(--background); - background: var(--muted-foreground); -} - -.wb-av-st--ready { - background: var(--success); -} - -.wb-av-st--idle { - background: color-mix(in srgb, var(--muted-foreground) 50%, transparent); -} - -/* The arc travels a ring concentric with the mark. The conic angle is what - animates, so the masked shape itself never rotates. */ -@property --orbit-a { - syntax: ""; - inherits: false; - initial-value: 0deg; -} - -.wb-av-orbit { - position: absolute; - inset: -3.5px; - padding: 1.5px; - pointer-events: none; - border-radius: calc(var(--av-r) + 3.5px); - background: conic-gradient( - from var(--orbit-a), - transparent 0deg, - color-mix(in srgb, var(--primary) 20%, transparent) 20deg, - var(--primary) 130deg, - transparent 131deg 360deg - ); - -webkit-mask: - linear-gradient(#000 0 0) content-box, - linear-gradient(#000 0 0); - -webkit-mask-composite: xor; - mask-composite: exclude; - animation: wb-av-orbit 1.4s linear infinite; -} - -.wb-av[data-kind="person"] .wb-av-orbit { - border-radius: 50%; -} - -@keyframes wb-av-orbit { - to { - --orbit-a: 360deg; - } -} - @media (prefers-reduced-motion: reduce) { - .wb-av-orbit { - animation: none; - } .shell-ch-row { transition: none; } diff --git a/apps/web/src/chat/avatar.tsx b/apps/web/src/chat/avatar.tsx index 3f46103c6..83a78bfde 100644 --- a/apps/web/src/chat/avatar.tsx +++ b/apps/web/src/chat/avatar.tsx @@ -1,4 +1,11 @@ -import { Avatar, AvatarStack, type AvatarStackItem, type AvatarTone } from "@corbits/react-ui"; +import { + Avatar, + AvatarStack, + type AvatarSize, + type AvatarStackItem, + type AvatarStatus, + type AvatarTone, +} from "@corbits/react-ui"; import { agentInitials } from "@/chat/threads-api"; @@ -61,18 +68,8 @@ export function resolveAvatarFill( return { kind: "generated", className: avatarClassForPrincipal(principalId) }; } -export type CorbitAvatarSize = "xs" | "sm" | "md" | "lg" | "xl" | number; -export type AvatarStatus = "working" | "ready" | "idle"; - -// react-ui ships sm/md/lg only; the wrapper sizes xs/xl/numeric and the -// mark fills it. -const SIZE_PX = { xs: 16, sm: 24, md: 32, lg: 40, xl: 80 } as const; - -function baseSize(px: number): "sm" | "md" | "lg" { - if (px <= 24) return "sm"; - if (px <= 32) return "md"; - return "lg"; -} +export type CorbitAvatarSize = AvatarSize; +export type { AvatarStatus }; export interface WorkbenchAvatarProps { /** Workers are rounded squares, people circles. */ @@ -92,28 +89,17 @@ export function WorkbenchAvatar({ status, className, }: WorkbenchAvatarProps) { - const px = typeof size === "number" ? size : SIZE_PX[size]; - const radius = kind === "person" ? "50%" : `${Math.round(px * 0.28)}px`; - const working = kind === "worker" && status === "working"; return ( - - - {working ?