From 3c1ba72303b0a9ca6c0013e1539c650018ef1a20 Mon Sep 17 00:00:00 2001 From: "Kim, Hyeonseo" Date: Tue, 1 Sep 2026 13:19:23 +0900 Subject: [PATCH 01/12] Add @Kobalte/core Rebased onto solid-relay-integration with Codex assistance. Codex resolved conflicts while preserving the parent branch behavior and the original change intent. Verified as part of the rewritten stack with mise run check and mise run build. Assisted-by: Codex:gpt-5.6-sol --- packages/web/package.json | 1 + pnpm-lock.yaml | 213 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 214 insertions(+) diff --git a/packages/web/package.json b/packages/web/package.json index 8b7027c..684533e 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -46,6 +46,7 @@ "preview": "vite preview" }, "dependencies": { + "@kobalte/core": "^0.13.13", "@solidjs/meta": "^0.29.4", "@solidjs/router": "^1.0.0", "@solidjs/start": "^2.0.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 64e8ac7..cbc7c8e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -242,6 +242,9 @@ importers: packages/web: dependencies: + '@kobalte/core': + specifier: ^0.13.13 + version: 0.13.13(solid-js@1.9.14) '@solidjs/meta': specifier: ^0.29.4 version: 0.29.4(solid-js@1.9.14) @@ -384,6 +387,11 @@ packages: resolution: {integrity: sha512-y7/yvZ2TPAnR9+jnc00klvNNLkJiXFFrQA/hlLCcxA9a2A4zQIOimyFQ9XfwYKiGD1fb5GY8vbKIIgO8d5Tb2A==} engines: {node: '>= 20.12.0'} + '@corvu/utils@0.4.2': + resolution: {integrity: sha512-Ox2kYyxy7NoXdKWdHeDEjZxClwzO4SKM8plAaVwmAJPxHMqA0rLOoAsa+hBDwRLpctf+ZRnAd/ykguuJidnaTA==} + peerDependencies: + solid-js: ^1.8 + '@drizzle-team/brocli@0.11.0': resolution: {integrity: sha512-hD3pekGiPg0WPCCGAZmusBBJsDqGUR66Y452YgQsZOnkdQ7ViEPKuyP4huUGEZQefp8g34RRodXYmJ2TbCH+tg==} @@ -781,6 +789,15 @@ packages: resolution: {integrity: sha512-322xch1WhasP/vjH4yDPA1RnYwI6tlG72aH7fCpdFge8IC845urKEMET9LzJ2G5HfeCKAXPAcaZZEx9FXnTNrg==} engines: {bun: '>=1.1.0', deno: '>=2.0.0', node: '>=22.0.0'} + '@floating-ui/core@1.8.0': + resolution: {integrity: sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==} + + '@floating-ui/dom@1.8.0': + resolution: {integrity: sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg==} + + '@floating-ui/utils@0.2.12': + resolution: {integrity: sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==} + '@graphql-tools/executor@1.5.3': resolution: {integrity: sha512-mgBFC0bsrZPZLu9EnydpMnAuQ8Iiq0CEbUcsmvXsm2/iYektGHDN/+bmb7hicA6dWZtdPfklYJmr21WD0GnOfA==} engines: {node: '>=16.0.0'} @@ -848,6 +865,9 @@ packages: resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==} engines: {node: '>=18.18'} + '@internationalized/number@3.6.7': + resolution: {integrity: sha512-3ji1fcrT+FPAK86UqEhB/psHixYo6niWPJtt7+qRaYFynt/BaJG8GhAPimtWUpEiVSTq8ZM8L5psMxGquiB/Vg==} + '@ioredis/commands@1.10.0': resolution: {integrity: sha512-UmeW7z4LfctwoQ5wkhVzgq8tXkreED2xZGpX+Bg+zA+WJFZCT6c062AfCK/Dfk81xZnnwdhJCUMkitihRaoC2Q==} @@ -874,6 +894,16 @@ packages: resolution: {integrity: sha512-hloP58zRVCRSpgDxmqCWJNlizAlUgJFqG2ypq79DCvyv9tHjRYMDOcPFjzfl/A1/YxDvRCZz8wvZvmapQnKwFQ==} engines: {node: '>=12'} + '@kobalte/core@0.13.13': + resolution: {integrity: sha512-czBC+IQdOgJoW7DJjeh0rht7SPmTPgWsKg7Jo3RHMfwx028WxJtDylx9dJuJuD/GUae15+E4nYafu8LwuixFYQ==} + peerDependencies: + solid-js: ^1.9.8 + + '@kobalte/utils@0.9.2': + resolution: {integrity: sha512-jRVXr+zsVHxzDXRoh+CDeXzvCsFJ6uiHhqqNQ26Cw9ZsZ3D6nqPUBt1gGVtj2ZPmRL3a9Uk1v8D1aJ8/I12Dow==} + peerDependencies: + solid-js: ^1.8.8 + '@logtape/drizzle-orm@2.2.2': resolution: {integrity: sha512-Z/TrI5BbOCSJPmoyogy9RERtAxs/hlyI+e/uay1PSY68/ZddPqfudbS6MGgFylAiACprJ0d0zEiGeysUQUcQ2A==} peerDependencies: @@ -1501,6 +1531,61 @@ packages: '@shikijs/vscode-textmate@10.0.2': resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==} + '@solid-primitives/event-listener@2.4.6': + resolution: {integrity: sha512-5I0YJcTVYIWoMmgBSROBZGcz+ymhew/pGTg2dHW74BUjFKsV8Li4bOZYl0YAGP4mHw5o4UBd9/BEesqBci3wxw==} + peerDependencies: + solid-js: ^1.6.12 + + '@solid-primitives/keyed@1.5.3': + resolution: {integrity: sha512-zNadtyYBhJSOjXtogkGHmRxjGdz9KHc8sGGVAGlUABkE8BED2tbIZoxkwSqzOwde8OcUEH0bb5DLZUWIMvyBSA==} + peerDependencies: + solid-js: ^1.6.12 + + '@solid-primitives/map@0.4.13': + resolution: {integrity: sha512-B1zyFbsiTQvqPr+cuPCXO72sRuczG9Swncqk5P74NCGw1VE8qa/Ry9GlfI1e/VdeQYHjan+XkbE3rO2GW/qKew==} + peerDependencies: + solid-js: ^1.6.12 + + '@solid-primitives/media@2.3.6': + resolution: {integrity: sha512-pk49gPOq/UMRUJ+pTSrOfBiR8xJjRYHXIf1iR/jSnyQ/KroU+ZXhkZzavC7hvfp2vJeOTW5k2/HN0r3Q1VJ7Pw==} + peerDependencies: + solid-js: ^1.6.12 + + '@solid-primitives/props@3.2.4': + resolution: {integrity: sha512-MXXdvi2TSB6d+0N6ueA/HP1j/Kh9SEc4WdF1ZDMLwPagxW6pIHHSS9xbRO0RjqSVpNP4j0nxCWT1hx3CkJNhNA==} + peerDependencies: + solid-js: ^1.6.12 + + '@solid-primitives/refs@1.1.4': + resolution: {integrity: sha512-bLjwIs6ZPu8NQnuw04sU3Zc8qKSpbc0umUU/O4SHf6oWOdO4+dHY8vb1T7C4b/Tg103+9WGr6sEE0+NFlbaB/A==} + peerDependencies: + solid-js: ^1.6.12 + + '@solid-primitives/resize-observer@2.2.0': + resolution: {integrity: sha512-9Fuu/EWBeGj+atGHRJp70HKhdfalmpjwxY8a32NZixdLNmfCJ45AfhLQNr6uOzETbbiMx4iCKlTrJ8KZCHC2Ww==} + peerDependencies: + solid-js: ^1.6.12 + + '@solid-primitives/rootless@1.5.4': + resolution: {integrity: sha512-TOIZa1VUfVJ+9nkCcRajw3U4t9vBOP1HxX1WHNTbXq32mXwlqTvUnC4CRIilohcryBkT9u2ZkhUDSHRTaGp55g==} + peerDependencies: + solid-js: ^1.6.12 + + '@solid-primitives/static-store@0.1.4': + resolution: {integrity: sha512-LgtVaVBtB7EbmS4+M0b8xY5Iq6pUWXBsIC4VgtrFKDGDdyCaDt88sHk0fUlx1Enxm/XZnZyLXJABRoa39RjJqA==} + peerDependencies: + solid-js: ^1.6.12 + + '@solid-primitives/trigger@1.2.4': + resolution: {integrity: sha512-Ju0e+ZOD7hpOp7nptJimvDSZHWFvIvF9iBWMvuwt30smX7c5wmB8Kmc0AdDuv0wOTi06PQ1J5IrP1WJbH2yUBQ==} + peerDependencies: + solid-js: ^1.6.12 + + '@solid-primitives/utils@6.4.1': + resolution: {integrity: sha512-ISSB5QX1qP2ynrheIpYwc4oKR5Ny4siNuUyf1qZniy+Il+p/PtDB0QK1Dnle8noiHpwRD3gpPdubOC3qI/Zamg==} + peerDependencies: + solid-js: ^1.6.12 + '@solidjs/meta@0.29.4': resolution: {integrity: sha512-zdIWBGpR9zGx1p1bzIPqF5Gs+Ks/BH8R6fWhmUa/dcK1L2rUC8BAcZJzNRYBQv74kScf1TSOs0EY//Vd/I0V8g==} peerDependencies: @@ -1521,6 +1606,9 @@ packages: '@solidjs/router': optional: true + '@swc/helpers@0.5.23': + resolution: {integrity: sha512-5lSsMOTXURePglDfvuAQUqkGek9Hg2kksOYay2m0+XR++b2NWYL/4sWyuvVBIs8oKnJaxkdi9whaL/sqN13afw==} + '@tybys/wasm-util@0.10.3': resolution: {integrity: sha512-F3fo1MYrRJYL3zER0OUOmkutjr1Vp23m7OsSgp7nq4SP6OqX6C/56XFIPAl5bt3zaBRjmW7SGz3u/6LwFpYcOg==} @@ -3143,6 +3231,16 @@ packages: solid-js@1.9.14: resolution: {integrity: sha512-sAEXC0Kk0S1EDg+8ysEWJDbYhA3RRoEjwuySUGlKIemeo0I5YZfOyumNjNs9Sv3y2nmhD+0rW66ag2HsMuQiGQ==} + solid-presence@0.2.0: + resolution: {integrity: sha512-YM92o+jvpzX3XGaD4rLYmq/Kc2ZVh47GSCLEufHBFQQIurvZTs8SoGJxO8BJGNDxBKdcS8F3dYhW1SDXp4BNjA==} + peerDependencies: + solid-js: ^1.8 + + solid-prevent-scroll@0.1.11: + resolution: {integrity: sha512-2PComVCDHaQN/5t7ogEqUYeHasritZKXZ8Sb/VLkl0Web8o9YhEwOo8LSujJEahvMlYCNyKt0zRJeHldOAeWZg==} + peerDependencies: + solid-js: ^1.8 + solid-refresh@0.6.3: resolution: {integrity: sha512-F3aPsX6hVw9ttm5LYlth8Q15x6MlI/J3Dn+o3EQyRTtTxidepSTwAYdozt01/YA+7ObcciagGEyXIopGZzQtbA==} peerDependencies: @@ -3692,6 +3790,11 @@ snapshots: fast-wrap-ansi: 0.2.2 sisteransi: 1.0.5 + '@corvu/utils@0.4.2(solid-js@1.9.14)': + dependencies: + '@floating-ui/dom': 1.8.0 + solid-js: 1.9.14 + '@drizzle-team/brocli@0.11.0': {} '@electric-sql/pglite@0.5.3': {} @@ -3953,6 +4056,17 @@ snapshots: '@fedify/uri-template@2.3.1': {} + '@floating-ui/core@1.8.0': + dependencies: + '@floating-ui/utils': 0.2.12 + + '@floating-ui/dom@1.8.0': + dependencies: + '@floating-ui/core': 1.8.0 + '@floating-ui/utils': 0.2.12 + + '@floating-ui/utils@0.2.12': {} + '@graphql-tools/executor@1.5.3(graphql@16.14.2)': dependencies: '@graphql-tools/utils': 11.1.0(graphql@16.14.2) @@ -4028,6 +4142,10 @@ snapshots: '@humanwhocodes/retry@0.4.3': {} + '@internationalized/number@3.6.7': + dependencies: + '@swc/helpers': 0.5.23 + '@ioredis/commands@1.10.0': optional: true @@ -4060,6 +4178,28 @@ snapshots: dependencies: jsbi: 4.3.2 + '@kobalte/core@0.13.13(solid-js@1.9.14)': + dependencies: + '@floating-ui/dom': 1.8.0 + '@internationalized/number': 3.6.7 + '@kobalte/utils': 0.9.2(solid-js@1.9.14) + '@solid-primitives/props': 3.2.4(solid-js@1.9.14) + '@solid-primitives/resize-observer': 2.2.0(solid-js@1.9.14) + solid-js: 1.9.14 + solid-presence: 0.2.0(solid-js@1.9.14) + solid-prevent-scroll: 0.1.11(solid-js@1.9.14) + + '@kobalte/utils@0.9.2(solid-js@1.9.14)': + dependencies: + '@solid-primitives/event-listener': 2.4.6(solid-js@1.9.14) + '@solid-primitives/keyed': 1.5.3(solid-js@1.9.14) + '@solid-primitives/map': 0.4.13(solid-js@1.9.14) + '@solid-primitives/media': 2.3.6(solid-js@1.9.14) + '@solid-primitives/props': 3.2.4(solid-js@1.9.14) + '@solid-primitives/refs': 1.1.4(solid-js@1.9.14) + '@solid-primitives/utils': 6.4.1(solid-js@1.9.14) + solid-js: 1.9.14 + '@logtape/drizzle-orm@2.2.2(@logtape/logtape@2.3.0-dev.840)': dependencies: '@logtape/logtape': 2.3.0-dev.840 @@ -4449,6 +4589,65 @@ snapshots: '@shikijs/vscode-textmate@10.0.2': {} + '@solid-primitives/event-listener@2.4.6(solid-js@1.9.14)': + dependencies: + '@solid-primitives/utils': 6.4.1(solid-js@1.9.14) + solid-js: 1.9.14 + + '@solid-primitives/keyed@1.5.3(solid-js@1.9.14)': + dependencies: + solid-js: 1.9.14 + + '@solid-primitives/map@0.4.13(solid-js@1.9.14)': + dependencies: + '@solid-primitives/trigger': 1.2.4(solid-js@1.9.14) + solid-js: 1.9.14 + + '@solid-primitives/media@2.3.6(solid-js@1.9.14)': + dependencies: + '@solid-primitives/event-listener': 2.4.6(solid-js@1.9.14) + '@solid-primitives/rootless': 1.5.4(solid-js@1.9.14) + '@solid-primitives/static-store': 0.1.4(solid-js@1.9.14) + '@solid-primitives/utils': 6.4.1(solid-js@1.9.14) + solid-js: 1.9.14 + + '@solid-primitives/props@3.2.4(solid-js@1.9.14)': + dependencies: + '@solid-primitives/utils': 6.4.1(solid-js@1.9.14) + solid-js: 1.9.14 + + '@solid-primitives/refs@1.1.4(solid-js@1.9.14)': + dependencies: + '@solid-primitives/utils': 6.4.1(solid-js@1.9.14) + solid-js: 1.9.14 + + '@solid-primitives/resize-observer@2.2.0(solid-js@1.9.14)': + dependencies: + '@solid-primitives/event-listener': 2.4.6(solid-js@1.9.14) + '@solid-primitives/rootless': 1.5.4(solid-js@1.9.14) + '@solid-primitives/static-store': 0.1.4(solid-js@1.9.14) + '@solid-primitives/utils': 6.4.1(solid-js@1.9.14) + solid-js: 1.9.14 + + '@solid-primitives/rootless@1.5.4(solid-js@1.9.14)': + dependencies: + '@solid-primitives/utils': 6.4.1(solid-js@1.9.14) + solid-js: 1.9.14 + + '@solid-primitives/static-store@0.1.4(solid-js@1.9.14)': + dependencies: + '@solid-primitives/utils': 6.4.1(solid-js@1.9.14) + solid-js: 1.9.14 + + '@solid-primitives/trigger@1.2.4(solid-js@1.9.14)': + dependencies: + '@solid-primitives/utils': 6.4.1(solid-js@1.9.14) + solid-js: 1.9.14 + + '@solid-primitives/utils@6.4.1(solid-js@1.9.14)': + dependencies: + solid-js: 1.9.14 + '@solidjs/meta@0.29.4(solid-js@1.9.14)': dependencies: solid-js: 1.9.14 @@ -4492,6 +4691,10 @@ snapshots: - crossws - supports-color + '@swc/helpers@0.5.23': + dependencies: + tslib: 2.8.1 + '@tybys/wasm-util@0.10.3': dependencies: tslib: 2.8.1 @@ -5962,6 +6165,16 @@ snapshots: seroval: 1.5.4 seroval-plugins: 1.5.4(seroval@1.5.4) + solid-presence@0.2.0(solid-js@1.9.14): + dependencies: + '@corvu/utils': 0.4.2(solid-js@1.9.14) + solid-js: 1.9.14 + + solid-prevent-scroll@0.1.11(solid-js@1.9.14): + dependencies: + '@corvu/utils': 0.4.2(solid-js@1.9.14) + solid-js: 1.9.14 + solid-refresh@0.6.3(solid-js@1.9.14)(supports-color@10.2.2): dependencies: '@babel/generator': 7.29.8 From a13ae233ec452639cd02be2b53cbb4563968dc73 Mon Sep 17 00:00:00 2001 From: "Kim, Hyeonseo" Date: Tue, 1 Sep 2026 13:19:41 +0900 Subject: [PATCH 02/12] Apply Headless component to sign-in.tsx Rebased onto solid-relay-integration with Codex assistance. Codex resolved conflicts while preserving the parent branch behavior and the original change intent. Verified as part of the rewritten stack with mise run check and mise run build. Assisted-by: Codex:gpt-5.6-sol --- packages/web/src/routes/sign-in.tsx | 38 ++++++++++++++++------------- 1 file changed, 21 insertions(+), 17 deletions(-) diff --git a/packages/web/src/routes/sign-in.tsx b/packages/web/src/routes/sign-in.tsx index 83f5bb6..7827025 100644 --- a/packages/web/src/routes/sign-in.tsx +++ b/packages/web/src/routes/sign-in.tsx @@ -14,9 +14,12 @@ // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . +import { Alert } from "@kobalte/core/alert"; +import { Button } from "@kobalte/core/button"; +import { TextField } from "@kobalte/core/text-field"; import { Title } from "@solidjs/meta"; import { graphql } from "relay-runtime"; -import { Show, createSignal } from "solid-js"; +import { Match, Show, Switch, createSignal } from "solid-js"; import { createMutation } from "solid-relay"; import type { SignInMutation } from "./__generated__/SignInMutation.graphql.ts"; @@ -97,21 +100,19 @@ export default function SignInPage() {
- - +
{(formResult) => ( -

- {formResult().message} -

+ + + {formResult().message} + + + + {formResult().message} + + )} From a12be60b59d13e15cacb72cff047dfaa1c06144b Mon Sep 17 00:00:00 2001 From: "Kim, Hyeonseo" Date: Tue, 1 Sep 2026 13:34:33 +0900 Subject: [PATCH 03/12] Apply CSS Module Rebased onto solid-relay-integration with Codex assistance. Codex resolved CSS Module conflicts while preserving the parent branch Solid Relay flows, retained the parent deletion of the incomplete actor page, and corrected the success message semantics. Verified with mise run check and mise run build. Assisted-by: Codex:gpt-5.6-sol --- packages/web/src/app.css | 303 +----------------- packages/web/src/app.module.css | 142 ++++++++ packages/web/src/app.tsx | 25 +- packages/web/src/form.module.css | 179 +++++++++++ packages/web/src/routes/sign-in.css | 21 -- packages/web/src/routes/sign-in.tsx | 32 +- .../src/routes/workspace/create/instance.tsx | 26 +- 7 files changed, 372 insertions(+), 356 deletions(-) create mode 100644 packages/web/src/app.module.css create mode 100644 packages/web/src/form.module.css delete mode 100644 packages/web/src/routes/sign-in.css diff --git a/packages/web/src/app.css b/packages/web/src/app.css index b646702..925cf57 100644 --- a/packages/web/src/app.css +++ b/packages/web/src/app.css @@ -36,313 +36,20 @@ input { font: inherit; } -.app-shell { - min-height: 100svh; -} - -.app-header { - background: color-mix(in srgb, var(--bg) 92%, transparent); - border-bottom: 1px solid var(--line); - position: sticky; - top: 0; - z-index: 10; -} - -.app-header-inner { - align-items: center; - display: flex; - height: var(--header-h); - margin: 0 auto; - max-width: var(--container); - padding: 0 var(--gutter); -} - -.brand { - align-items: center; - color: var(--ink); - display: flex; +h1, +h2 { font-family: var(--font-serif); - font-size: 1.25rem; - font-weight: 700; - gap: 0.65rem; letter-spacing: var(--tracking-heading); - text-decoration: none; -} - -.brand img { - border-radius: 50%; -} - -.app-nav { - align-self: stretch; - display: flex; - gap: 0.25rem; - margin-left: clamp(1.5rem, 5vw, 4rem); -} - -.app-nav a, -.header-action { - align-items: center; - color: var(--ink-soft); - display: flex; - font-size: 0.9rem; - font-weight: 600; - padding: 0 0.85rem; - position: relative; - text-decoration: none; -} - -.app-nav a:hover, -.header-action:hover, -.app-nav a.is-active, -.header-action.is-active { - color: var(--ink); -} - -.app-nav a.is-active::after { - background: var(--accent); - bottom: -1px; - content: ""; - height: 3px; - left: 0.85rem; - position: absolute; - right: 0.85rem; -} - -.header-action { - border: 1px solid var(--line-strong); - border-radius: var(--radius-pill); - margin-left: auto; - min-height: 2.4rem; -} - -.header-action.is-active { - background: var(--accent-tint); - border-color: var(--accent-soft); -} - -.app-header a:focus-visible { - outline: 3px solid var(--accent-soft); - outline-offset: 0.2rem; -} - -.app-content { - margin: 0 auto; - max-width: var(--container); - min-height: calc(100svh - var(--header-h)); - padding: clamp(2rem, 5vw, 4rem) var(--gutter); -} - -.app-content > main:not(.form-page) { - width: 100%; -} - -.app-content > main:not(.form-page) :is(h1, h2, p) { margin-top: 0; } -.app-content h1, -.app-content h2 { - font-family: var(--font-serif); - letter-spacing: var(--tracking-heading); -} - -.app-content h1 { +h1 { font-size: var(--text-heading-2); line-height: var(--leading-heading); } -.app-content p { +p { color: var(--ink-soft); line-height: var(--leading-body); -} - -.form-page { - align-items: center; - display: flex; - justify-content: center; - min-height: calc(100svh - var(--header-h) - clamp(4rem, 10vw, 8rem)); -} - -.panel { - background: var(--card); - border: 1px solid var(--line); - border-radius: var(--radius); - box-shadow: var(--shadow-sm); -} - -.form-panel { - max-width: 28rem; - padding: clamp(1.5rem, 4vw, 2rem); - width: 100%; -} - -.panel-header { - border-bottom: 1px solid var(--line); - margin: 0 calc(clamp(1.5rem, 4vw, 2rem) * -1) 1.5rem; - padding: 0 clamp(1.5rem, 4vw, 2rem) 1.5rem; -} - -.panel-header h1 { - font-size: 1.65rem; - margin: 0 0 0.5rem; -} - -.panel-header p { - font-size: 0.95rem; - margin: 0; -} - -.form-panel form { - display: grid; - gap: 1rem; -} - -.field { - display: grid; - gap: 0.5rem; -} - -.field-heading { - align-items: baseline; - display: flex; - font-size: 0.9rem; - font-weight: 650; - justify-content: space-between; -} - -.field-status { - color: var(--ink-faint); - font-family: var(--font-mono); - font-size: 0.68rem; - font-weight: 500; - letter-spacing: 0.04em; - text-transform: uppercase; -} - -.field-status.required { - color: var(--accent-strong); -} - -.field input { - background: var(--surface-2); - border: 1px solid var(--line-strong); - border-radius: var(--radius-sm); - color: var(--ink); - min-width: 0; - padding: 0.9rem 1rem; - transition: - border-color var(--duration-fast) var(--ease-standard), - box-shadow var(--duration-fast) var(--ease-standard); -} - -.field input::placeholder { - color: var(--ink-faint); -} - -.field input:focus { - border-color: var(--accent); - box-shadow: 0 0 0 3px var(--accent-tint); - outline: none; -} - -.field input:read-only { - border-style: dashed; - color: var(--ink-soft); - cursor: default; - font-family: var(--font-mono); -} - -.field-hint { - color: var(--ink-faint); - font-size: 0.78rem; - line-height: 1.45; - margin: 0; -} - -.button { - align-items: center; - border: 0; - border-radius: var(--radius-sm); - cursor: pointer; - display: inline-flex; - font-weight: 700; - justify-content: center; - min-height: 2.9rem; - padding: 0.75rem 1.1rem; -} - -.button:focus-visible { - outline: 3px solid var(--accent-soft); - outline-offset: 0.2rem; -} - -.button.primary { - background: var(--accent); - color: var(--on-accent); - transition: - background var(--duration-fast) var(--ease-standard), - transform var(--duration-fast) var(--ease-standard); -} - -.button.primary:hover:not(:disabled) { - background: var(--accent-strong); -} - -.button:disabled { - cursor: wait; - opacity: 0.65; -} - -.notice { - background: var(--accent-tint); - border-radius: var(--radius-sm); - color: var(--ink); - line-height: 1.5; - margin: 1.25rem 0 0; - padding: 0.85rem 1rem; -} - -.notice.error { - border-left: 3px solid var(--danger); -} - -@media (max-width: 600px) { - .app-header-inner { - padding: 0 1rem; - } - - .brand span { - display: none; - } - - .app-nav { - margin-left: 0.75rem; - } - - .app-nav a, - .header-action { - padding-inline: 0.65rem; - } - - .app-nav a.is-active::after { - left: 0.65rem; - right: 0.65rem; - } - - .app-content { - padding: 1.5rem 1rem 3rem; - } - - .form-page { - align-items: flex-start; - min-height: auto; - } -} - -@media (prefers-reduced-motion: reduce) { - .button.primary, - .field input { - transition: none; - } + margin-top: 0; } diff --git a/packages/web/src/app.module.css b/packages/web/src/app.module.css new file mode 100644 index 0000000..1a7d69a --- /dev/null +++ b/packages/web/src/app.module.css @@ -0,0 +1,142 @@ +/* +DrFed: A web-based platform for developing and debugging ActivityPub apps +Copyright (C) 2026 DrFed team + +This program is free software: you can redistribute it and/or modify +it under the terms of the GNU Affero General Public License as published by +the Free Software Foundation, either version 3 of the License, or +(at your option) any later version. + +This program is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +GNU Affero General Public License for more details. + +You should have received a copy of the GNU Affero General Public License +along with this program. If not, see . +*/ + +.shell { + min-height: 100svh; +} + +.header { + background: color-mix(in srgb, var(--bg) 92%, transparent); + border-bottom: 1px solid var(--line); + position: sticky; + top: 0; + z-index: 10; +} + +.headerInner { + align-items: center; + display: flex; + height: var(--header-h); + margin: 0 auto; + max-width: var(--container); + padding: 0 var(--gutter); +} + +.brand { + align-items: center; + color: var(--ink); + display: flex; + font-family: var(--font-serif); + font-size: 1.25rem; + font-weight: 700; + gap: 0.65rem; + letter-spacing: var(--tracking-heading); + text-decoration: none; +} + +.brand img { + border-radius: 50%; +} + +.navigation { + align-self: stretch; + display: flex; + gap: 0.25rem; + margin-left: clamp(1.5rem, 5vw, 4rem); +} + +.navigation a, +.headerAction { + align-items: center; + color: var(--ink-soft); + display: flex; + font-size: 0.9rem; + font-weight: 600; + padding: 0 0.85rem; + position: relative; + text-decoration: none; +} + +.navigation a:hover, +.headerAction:hover, +.navigation a.active, +.headerAction.active { + color: var(--ink); +} + +.navigation a.active::after { + background: var(--accent); + bottom: -1px; + content: ""; + height: 3px; + left: 0.85rem; + position: absolute; + right: 0.85rem; +} + +.headerAction { + border: 1px solid var(--line-strong); + border-radius: var(--radius-pill); + margin-left: auto; + min-height: 2.4rem; +} + +.headerAction.active { + background: var(--accent-tint); + border-color: var(--accent-soft); +} + +.header a:focus-visible { + outline: 3px solid var(--accent-soft); + outline-offset: 0.2rem; +} + +.content { + margin: 0 auto; + max-width: var(--container); + min-height: calc(100svh - var(--header-h)); + padding: clamp(2rem, 5vw, 4rem) var(--gutter); +} + +@media (max-width: 600px) { + .headerInner { + padding: 0 1rem; + } + + .brand span { + display: none; + } + + .navigation { + margin-left: 0.75rem; + } + + .navigation a, + .headerAction { + padding-inline: 0.65rem; + } + + .navigation a.active::after { + left: 0.65rem; + right: 0.65rem; + } + + .content { + padding: 1.5rem 1rem 3rem; + } +} diff --git a/packages/web/src/app.tsx b/packages/web/src/app.tsx index 77c1c66..eeb22aa 100644 --- a/packages/web/src/app.tsx +++ b/packages/web/src/app.tsx @@ -25,6 +25,8 @@ import { RelayEnvironmentProvider } from "solid-relay"; import { createRelayEnvironment } from "./RelayEnvironment.ts"; +import styles from "./app.module.css"; + export default function App() { const environment = createRelayEnvironment(); @@ -34,31 +36,34 @@ export default function App() { root={(props) => ( DrFed -
-
-
- +
+
+
+ DrFed -
-
+
{props.children}
diff --git a/packages/web/src/form.module.css b/packages/web/src/form.module.css new file mode 100644 index 0000000..5041f80 --- /dev/null +++ b/packages/web/src/form.module.css @@ -0,0 +1,179 @@ +/* +DrFed: A web-based platform for developing and debugging ActivityPub apps +Copyright (C) 2026 DrFed team + +This program is free software: you can redistribute it and/or modify +it under the terms of the GNU Affero General Public License as published by +the Free Software Foundation, either version 3 of the License, or +(at your option) any later version. + +This program is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +GNU Affero General Public License for more details. + +You should have received a copy of the GNU Affero General Public License +along with this program. If not, see . +*/ + +.page { + align-items: center; + display: flex; + justify-content: center; + min-height: calc(100svh - var(--header-h) - clamp(4rem, 10vw, 8rem)); +} + +.panel { + background: var(--card); + border: 1px solid var(--line); + border-radius: var(--radius); + box-shadow: var(--shadow-sm); + max-width: 28rem; + padding: clamp(1.5rem, 4vw, 2rem); + width: 100%; +} + +.header { + border-bottom: 1px solid var(--line); + margin: 0 calc(clamp(1.5rem, 4vw, 2rem) * -1) 1.5rem; + padding: 0 clamp(1.5rem, 4vw, 2rem) 1.5rem; +} + +.header h1 { + font-size: 1.65rem; + margin: 0 0 0.5rem; +} + +.header p { + font-size: 0.95rem; + margin: 0; +} + +.form { + display: grid; + gap: 1rem; +} + +.field { + display: grid; + gap: 0.5rem; +} + +.fieldHeading { + align-items: baseline; + display: flex; + font-size: 0.9rem; + font-weight: 650; + justify-content: space-between; +} + +.fieldStatus { + color: var(--ink-faint); + font-family: var(--font-mono); + font-size: 0.68rem; + font-weight: 500; + letter-spacing: 0.04em; + text-transform: uppercase; +} + +.required { + color: var(--accent-strong); +} + +.input { + background: var(--surface-2); + border: 1px solid var(--line-strong); + border-radius: var(--radius-sm); + color: var(--ink); + min-width: 0; + padding: 0.9rem 1rem; + transition: + border-color var(--duration-fast) var(--ease-standard), + box-shadow var(--duration-fast) var(--ease-standard); +} + +.input::placeholder { + color: var(--ink-faint); +} + +.input:focus { + border-color: var(--accent); + box-shadow: 0 0 0 3px var(--accent-tint); + outline: none; +} + +.input:read-only { + border-style: dashed; + color: var(--ink-soft); + cursor: default; + font-family: var(--font-mono); +} + +.hint { + color: var(--ink-faint); + font-size: 0.78rem; + line-height: 1.45; + margin: 0; +} + +.button { + align-items: center; + background: var(--accent); + border: 0; + border-radius: var(--radius-sm); + color: var(--on-accent); + cursor: pointer; + display: inline-flex; + font-weight: 700; + justify-content: center; + min-height: 2.9rem; + padding: 0.75rem 1.1rem; + transition: + background var(--duration-fast) var(--ease-standard), + transform var(--duration-fast) var(--ease-standard); +} + +.button:focus-visible { + outline: 3px solid var(--accent-soft); + outline-offset: 0.2rem; +} + +.button:hover:not(:disabled) { + background: var(--accent-strong); +} + +.button:disabled { + cursor: wait; + opacity: 0.65; +} + +.notice { + background: var(--accent-tint); + border-radius: var(--radius-sm); + color: var(--ink); + line-height: 1.5; + margin: 1.25rem 0 0; + padding: 0.85rem 1rem; +} + +.error { + border-left: 3px solid var(--danger); +} + +.success { + border-left: 3px solid var(--accent); +} + +@media (max-width: 600px) { + .page { + align-items: flex-start; + min-height: auto; + } +} + +@media (prefers-reduced-motion: reduce) { + .button, + .input { + transition: none; + } +} diff --git a/packages/web/src/routes/sign-in.css b/packages/web/src/routes/sign-in.css deleted file mode 100644 index e9e9be1..0000000 --- a/packages/web/src/routes/sign-in.css +++ /dev/null @@ -1,21 +0,0 @@ -/* -DrFed: A web-based platform for developing and debugging ActivityPub apps -Copyright (C) 2026 DrFed team - -This program is free software: you can redistribute it and/or modify -it under the terms of the GNU Affero General Public License as published by -the Free Software Foundation, either version 3 of the License, or -(at your option) any later version. - -This program is distributed in the hope that it will be useful, -but WITHOUT ANY WARRANTY; without even the implied warranty of -MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the -GNU Affero General Public License for more details. - -You should have received a copy of the GNU Affero General Public License -along with this program. If not, see . -*/ - -.auth-panel .notice.success { - border-left: 3px solid var(--accent); -} diff --git a/packages/web/src/routes/sign-in.tsx b/packages/web/src/routes/sign-in.tsx index 7827025..f9ad1d7 100644 --- a/packages/web/src/routes/sign-in.tsx +++ b/packages/web/src/routes/sign-in.tsx @@ -24,7 +24,7 @@ import { createMutation } from "solid-relay"; import type { SignInMutation } from "./__generated__/SignInMutation.graphql.ts"; -import "./sign-in.css"; +import styles from "~/form.module.css"; const signInMutation = graphql` mutation SignInMutation($email: Email!, $verifyUrl: URITemplate) { @@ -87,32 +87,32 @@ export default function SignInPage() { }; return ( -
+
Sign in — DrFed -
-
+
+

Sign in

Enter your email address to receive a secure sign-in link.

-
- - + + + Email address - Required + + Required + - - - {(formResult) => ( - - - - {formResult().message} - - - - - - {formResult().message} - - - - )} + + {result()?.message} + + } + > + + {result()?.message} +
From dd8089773cae6dfd9a7c33638614ce62dc11ba6c Mon Sep 17 00:00:00 2001 From: "Kim, Hyeonseo" Date: Tue, 1 Sep 2026 14:08:19 +0900 Subject: [PATCH 06/12] Make Styles folder --- packages/web/src/app.tsx | 6 +++--- packages/web/src/routes/sign-in.tsx | 2 +- packages/web/src/routes/workspace/create/instance.tsx | 2 +- packages/web/src/{ => styles}/app.css | 0 packages/web/src/{ => styles}/app.module.css | 0 packages/web/src/{ => styles}/drfed.css | 0 packages/web/src/{ => styles}/form.module.css | 0 7 files changed, 5 insertions(+), 5 deletions(-) rename packages/web/src/{ => styles}/app.css (100%) rename packages/web/src/{ => styles}/app.module.css (100%) rename packages/web/src/{ => styles}/drfed.css (100%) rename packages/web/src/{ => styles}/form.module.css (100%) diff --git a/packages/web/src/app.tsx b/packages/web/src/app.tsx index eeb22aa..921abd9 100644 --- a/packages/web/src/app.tsx +++ b/packages/web/src/app.tsx @@ -19,13 +19,13 @@ import { A, Router } from "@solidjs/router"; import { FileRoutes } from "@solidjs/start/router"; import { Suspense } from "solid-js"; -import "./drfed.css"; -import "./app.css"; +import "./styles/drfed.css"; +import "./styles/app.css"; import { RelayEnvironmentProvider } from "solid-relay"; import { createRelayEnvironment } from "./RelayEnvironment.ts"; -import styles from "./app.module.css"; +import styles from "./styles/app.module.css"; export default function App() { const environment = createRelayEnvironment(); diff --git a/packages/web/src/routes/sign-in.tsx b/packages/web/src/routes/sign-in.tsx index 927b465..9ccb717 100644 --- a/packages/web/src/routes/sign-in.tsx +++ b/packages/web/src/routes/sign-in.tsx @@ -24,7 +24,7 @@ import { createMutation } from "solid-relay"; import type { SignInMutation } from "./__generated__/SignInMutation.graphql.ts"; -import styles from "~/form.module.css"; +import styles from "~/styles/form.module.css"; const signInMutation = graphql` mutation SignInMutation($email: Email!, $verifyUrl: URITemplate) { diff --git a/packages/web/src/routes/workspace/create/instance.tsx b/packages/web/src/routes/workspace/create/instance.tsx index 6f32fa4..de69867 100644 --- a/packages/web/src/routes/workspace/create/instance.tsx +++ b/packages/web/src/routes/workspace/create/instance.tsx @@ -23,7 +23,7 @@ import { createMutation } from "solid-relay"; import type { CreateInstanceMutation } from "./__generated__/CreateInstanceMutation.graphql.ts"; -import styles from "~/form.module.css"; +import styles from "~/styles/form.module.css"; const createInstanceMutation = graphql` mutation CreateInstanceMutation($slug: String!) { diff --git a/packages/web/src/app.css b/packages/web/src/styles/app.css similarity index 100% rename from packages/web/src/app.css rename to packages/web/src/styles/app.css diff --git a/packages/web/src/app.module.css b/packages/web/src/styles/app.module.css similarity index 100% rename from packages/web/src/app.module.css rename to packages/web/src/styles/app.module.css diff --git a/packages/web/src/drfed.css b/packages/web/src/styles/drfed.css similarity index 100% rename from packages/web/src/drfed.css rename to packages/web/src/styles/drfed.css diff --git a/packages/web/src/form.module.css b/packages/web/src/styles/form.module.css similarity index 100% rename from packages/web/src/form.module.css rename to packages/web/src/styles/form.module.css From bbfc535e289c939f939cd8ced7c1f1a1d687e48d Mon Sep 17 00:00:00 2001 From: "Kim, Hyeonseo" Date: Tue, 1 Sep 2026 14:11:54 +0900 Subject: [PATCH 07/12] Revert Show in sing-in.tsx --- packages/web/src/routes/sign-in.tsx | 29 +++++++++++++++++------------ 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/packages/web/src/routes/sign-in.tsx b/packages/web/src/routes/sign-in.tsx index 9ccb717..8190302 100644 --- a/packages/web/src/routes/sign-in.tsx +++ b/packages/web/src/routes/sign-in.tsx @@ -19,7 +19,7 @@ import { Button } from "@kobalte/core/button"; import { TextField } from "@kobalte/core/text-field"; import { Title } from "@solidjs/meta"; import { graphql } from "relay-runtime"; -import { Show, createSignal } from "solid-js"; +import { Match, Show, Switch, createSignal } from "solid-js"; import { createMutation } from "solid-relay"; import type { SignInMutation } from "./__generated__/SignInMutation.graphql.ts"; @@ -126,17 +126,22 @@ export default function SignInPage() { - - {result()?.message} - - } - > - - {result()?.message} - + + {(formResult) => ( + + + + {formResult().message} + + + + + + {formResult().message} + + + + )}
From 737a1cb31b9c06d2becaa9cd1fdab162cb1c0e89 Mon Sep 17 00:00:00 2001 From: "Kim, Hyeonseo" Date: Tue, 1 Sep 2026 14:15:24 +0900 Subject: [PATCH 08/12] Apply display:block --- packages/web/src/styles/form.module.css | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/web/src/styles/form.module.css b/packages/web/src/styles/form.module.css index e9c2a55..8217954 100644 --- a/packages/web/src/styles/form.module.css +++ b/packages/web/src/styles/form.module.css @@ -152,6 +152,7 @@ along with this program. If not, see . line-height: 1.5; margin: 1.25rem 0 0; padding: 0.85rem 1rem; + display: block; } .error { From 6068b5115735a32560010f47160c68b9937a965c Mon Sep 17 00:00:00 2001 From: "Kim, Hyeonseo" Date: Tue, 1 Sep 2026 14:24:49 +0900 Subject: [PATCH 09/12] Apply Kobalte to instance create page --- .../src/routes/workspace/create/instance.tsx | 35 ++++++++++--------- 1 file changed, 19 insertions(+), 16 deletions(-) diff --git a/packages/web/src/routes/workspace/create/instance.tsx b/packages/web/src/routes/workspace/create/instance.tsx index de69867..7063487 100644 --- a/packages/web/src/routes/workspace/create/instance.tsx +++ b/packages/web/src/routes/workspace/create/instance.tsx @@ -15,6 +15,8 @@ // along with this program. If not, see . import { faker } from "@faker-js/faker"; +import { Button } from "@kobalte/core/button"; +import { TextField } from "@kobalte/core/text-field"; import { Title } from "@solidjs/meta"; import { useNavigate } from "@solidjs/router"; import { graphql } from "relay-runtime"; @@ -109,31 +111,32 @@ export default function CreateInstancePage() {
- - +
From 5fde945a76e99552f573f49127b0e116c5c31858 Mon Sep 17 00:00:00 2001 From: "Kim, Hyeonseo" Date: Tue, 1 Sep 2026 16:00:10 +0900 Subject: [PATCH 10/12] Seperate InstanceSummary Component --- .../web/src/components/InstanceSummary.tsx | 44 +++++++++++++++++++ packages/web/src/routes/workspace/index.tsx | 21 ++------- 2 files changed, 48 insertions(+), 17 deletions(-) create mode 100644 packages/web/src/components/InstanceSummary.tsx diff --git a/packages/web/src/components/InstanceSummary.tsx b/packages/web/src/components/InstanceSummary.tsx new file mode 100644 index 0000000..cb1c90b --- /dev/null +++ b/packages/web/src/components/InstanceSummary.tsx @@ -0,0 +1,44 @@ +// DrFed: A web-based platform for developing and debugging ActivityPub apps +// Copyright (C) 2026 DrFed team +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see . + +import { Link } from "@kobalte/core/link"; +import { graphql } from "relay-runtime"; +import { createFragment } from "solid-relay"; + +import type { InstanceSummary_instance$key } from "./__generated__/InstanceSummary_instance.graphql"; + +export default function InstanceSummary(props: { + $instance: InstanceSummary_instance$key; +}) { + const data = createFragment( + graphql` + fragment InstanceSummary_instance on Instance { + id + host + } + `, + () => props.$instance, + ); + + return ( +

+ {data()?.host} + + Create Actors + +

+ ); +} diff --git a/packages/web/src/routes/workspace/index.tsx b/packages/web/src/routes/workspace/index.tsx index 9dc94b3..9b5f6cb 100644 --- a/packages/web/src/routes/workspace/index.tsx +++ b/packages/web/src/routes/workspace/index.tsx @@ -16,10 +16,11 @@ import { graphql } from "relay-runtime"; import { For, Show } from "solid-js"; -import { createFragment, createLazyLoadQuery } from "solid-relay"; +import { createLazyLoadQuery } from "solid-relay"; -import type { InstanceSummary_instance$key } from "./__generated__/InstanceSummary_instance.graphql.ts"; -import type { WorkspaceQuery } from "./__generated__/WorkspaceQuery.graphql.ts"; +import InstanceSummary from "~/components/InstanceSummary"; + +import type { WorkspaceQuery } from "./__generated__/WorkspaceQuery.graphql"; const workspaceQuery = graphql` query WorkspaceQuery { @@ -35,20 +36,6 @@ const workspaceQuery = graphql` } `; -function InstanceSummary(props: { $instance: InstanceSummary_instance$key }) { - const data = createFragment( - graphql` - fragment InstanceSummary_instance on Instance { - id - host - } - `, - () => props.$instance, - ); - - return

{data()?.host}

; -} - export default function WorkspacePage() { const query = createLazyLoadQuery( workspaceQuery, From 061f422e77749638a1543fd04f7f5bf2e45f3621 Mon Sep 17 00:00:00 2001 From: "Kim, Hyeonseo" Date: Tue, 1 Sep 2026 16:36:54 +0900 Subject: [PATCH 11/12] Make Temporary create Actors UI --- packages/web/src/app.tsx | 2 +- .../web/src/components/InstanceSummary.tsx | 4 +- .../workspace/create/[instance_id]/actors.tsx | 96 +++++++++++++++++++ 3 files changed, 98 insertions(+), 4 deletions(-) create mode 100644 packages/web/src/routes/workspace/create/[instance_id]/actors.tsx diff --git a/packages/web/src/app.tsx b/packages/web/src/app.tsx index 921abd9..0dd0bbf 100644 --- a/packages/web/src/app.tsx +++ b/packages/web/src/app.tsx @@ -47,7 +47,7 @@ export default function App() { class={styles.navigation} aria-label="Primary navigation" > - + Workspace diff --git a/packages/web/src/components/InstanceSummary.tsx b/packages/web/src/components/InstanceSummary.tsx index cb1c90b..a98a71b 100644 --- a/packages/web/src/components/InstanceSummary.tsx +++ b/packages/web/src/components/InstanceSummary.tsx @@ -36,9 +36,7 @@ export default function InstanceSummary(props: { return (

{data()?.host} - - Create Actors - + Create Actors

); } diff --git a/packages/web/src/routes/workspace/create/[instance_id]/actors.tsx b/packages/web/src/routes/workspace/create/[instance_id]/actors.tsx new file mode 100644 index 0000000..2efd762 --- /dev/null +++ b/packages/web/src/routes/workspace/create/[instance_id]/actors.tsx @@ -0,0 +1,96 @@ +// DrFed: A web-based platform for developing and debugging ActivityPub apps +// Copyright (C) 2026 DrFed team +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see . + +import { Button } from "@kobalte/core/button"; +import { NumberField } from "@kobalte/core/number-field"; +import { Title } from "@solidjs/meta"; +import { + type RouteDefinition, + type RouteSectionProps, + query, +} from "@solidjs/router"; +import { graphql } from "relay-runtime"; +import { + createPreloadedQuery, + loadQuery, + useRelayEnvironment, +} from "solid-relay"; + +import type { GetHostQuery } from "./__generated__/GetHostQuery.graphql"; + +import styles from "~/styles/form.module.css"; + +const getHostQuery = graphql` + query GetHostQuery($instanceId: ID!) { + instance: node(id: $instanceId) { + ... on Instance { + host + } + } + } +`; + +const loadInstanceQuery = query( + (instanceId: string) => + loadQuery(useRelayEnvironment()(), getHostQuery, { + instanceId, + }), + "GetHostQuery", +); + +export const route = { + preload({ params }) { + if (params.instance_id === undefined) { + throw new Error("Missing instance_id route parameter."); + } + return loadInstanceQuery(params.instance_id); + }, +} satisfies RouteDefinition; + +type RouteData = ReturnType; + +export default function CreateActorsPage(props: RouteSectionProps) { + const data = createPreloadedQuery( + getHostQuery, + () => props.data, + ); + + return ( +
+ Create Actors + +
+
+

Create Actors

+

Selected Instance: {data()?.instance?.host}

+
+
+ + The Number of Actors + + + DrFed generates actors in {data()?.instance?.host}. + + + + +
+
+
+ ); +} From 1e601f32cd634c7c02b2eac1f3dc653ee75121aa Mon Sep 17 00:00:00 2001 From: "Kim, Hyeonseo" Date: Fri, 4 Sep 2026 15:51:32 +0900 Subject: [PATCH 12/12] Fix lint error --- packages/web/src/components/InstanceSummary.tsx | 2 +- .../web/src/routes/workspace/create/[instance_id]/actors.tsx | 3 +-- packages/web/src/routes/workspace/index.tsx | 4 ++-- 3 files changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/web/src/components/InstanceSummary.tsx b/packages/web/src/components/InstanceSummary.tsx index a98a71b..6667096 100644 --- a/packages/web/src/components/InstanceSummary.tsx +++ b/packages/web/src/components/InstanceSummary.tsx @@ -18,7 +18,7 @@ import { Link } from "@kobalte/core/link"; import { graphql } from "relay-runtime"; import { createFragment } from "solid-relay"; -import type { InstanceSummary_instance$key } from "./__generated__/InstanceSummary_instance.graphql"; +import type { InstanceSummary_instance$key } from "./__generated__/InstanceSummary_instance.graphql.tsx"; export default function InstanceSummary(props: { $instance: InstanceSummary_instance$key; diff --git a/packages/web/src/routes/workspace/create/[instance_id]/actors.tsx b/packages/web/src/routes/workspace/create/[instance_id]/actors.tsx index 2efd762..5483a43 100644 --- a/packages/web/src/routes/workspace/create/[instance_id]/actors.tsx +++ b/packages/web/src/routes/workspace/create/[instance_id]/actors.tsx @@ -29,7 +29,7 @@ import { useRelayEnvironment, } from "solid-relay"; -import type { GetHostQuery } from "./__generated__/GetHostQuery.graphql"; +import type { GetHostQuery } from "./__generated__/GetHostQuery.graphql.tsx"; import styles from "~/styles/form.module.css"; @@ -71,7 +71,6 @@ export default function CreateActorsPage(props: RouteSectionProps) { return (
Create Actors -

Create Actors

diff --git a/packages/web/src/routes/workspace/index.tsx b/packages/web/src/routes/workspace/index.tsx index 9b5f6cb..a293530 100644 --- a/packages/web/src/routes/workspace/index.tsx +++ b/packages/web/src/routes/workspace/index.tsx @@ -18,9 +18,9 @@ import { graphql } from "relay-runtime"; import { For, Show } from "solid-js"; import { createLazyLoadQuery } from "solid-relay"; -import InstanceSummary from "~/components/InstanceSummary"; +import InstanceSummary from "~/components/InstanceSummary.tsx"; -import type { WorkspaceQuery } from "./__generated__/WorkspaceQuery.graphql"; +import type { WorkspaceQuery } from "./__generated__/WorkspaceQuery.graphql.tsx"; const workspaceQuery = graphql` query WorkspaceQuery {