apps/web/tests/shared · scn-chat · Tangled

ATProto-based AI Assistant Chat interface.

scn-chat apps web tests shared

2 folders · 11 files

pouriade.com · Share relative timestamps as TimeAgo · 1w ago

The schema forms' choices, such as web search's engine, and the API keys page's provider use the app's Select, with the same arrow and open list as the theme's, in place of a native select. The form kit's SelectField takes options and a placeholder rather than option children, and since the Select can't be required as a native one can, adding a key with no provider says to choose one.

Share relative timestamps as TimeAgo

Group the web app's code by feature. Each folder in src/features (auth, chat-list, conversation, sharing, models, settings, admin) holds that feature's pages, layouts included, components, hooks, lib, and queries, and the routes stay thin, rendering a feature's page. Page files are named after the component they export. The query factories split from src/queries.ts into each feature's queries.ts, leaving staleTime in src/shared, which also holds the API client, errors, search params, and the schema forms that admin and settings share. inheritedModel moves from the models module to the conversation's branch module, so models no longer depends on the conversation. Tests mirror the new tree, and the specs, the architecture doc, and CLAUDE.md name the new paths.

The web app drops code nothing used, CheckboxField, LocalTime, and a second Capabilities type, keeps single-file helpers private, and moves tag parsing and the effort levels out of components into lib modules.

message.test.ts

The web app's message records are typed as the lexicon's MessageRecord, and a conversation's info as InfoRecord, from the local copy, which holds only records the server validated, through BranchMessage to the message, status, details, part, and tool views, so their reads need no casts. src/shared/message.ts holds what a status means, isPending and isFinished, which counts a status another client wrote that this app doesn't know as neither, along with a message's parts, whether it is encrypted, and who wrote it, in place of the checks written out in the message view, the message actions, the chat, the reply follower, and tool status. Tests build records with messageRecord in tests/helpers/records.ts, and the status rules are tested once.

route-states.test.tsx

Add shared primitives for the web component refactor. ErrorAlert renders an error's alert or nothing, LocalTime shows a date in the browser's locale only in the browser, and form.tsx is a createFormHook kit whose text, textarea, checkbox, and select fields bind to their field and label themselves, with a Form that submits through the form API and a SubmitButton disabled while submitting. The router's default error and pending components, RouteError and RoutePending, give every route its own boundaries, so a failed section shows its error inside its layout with a Retry that reloads it, and renderAt uses the same defaults.

search-params.test.ts

Group the web app's code by feature. Each folder in src/features (auth, chat-list, conversation, sharing, models, settings, admin) holds that feature's pages, layouts included, components, hooks, lib, and queries, and the routes stay thin, rendering a feature's page. Page files are named after the component they export. The query factories split from src/queries.ts into each feature's queries.ts, leaving staleTime in src/shared, which also holds the API client, errors, search params, and the schema forms that admin and settings share. inheritedModel moves from the models module to the conversation's branch module, so models no longer depends on the conversation. Tests mirror the new tree, and the specs, the architecture doc, and CLAUDE.md name the new paths.

Edit chat tags as chips in a tags input

The app can be installed from Chrome, Edge, and Android, or added to an iPhone's home screen, and opens in its own window. The server builds /manifest.webmanifest from the admin area's name, the icons are drawn from logo.svg on the sign-in page's dark tile by pnpm --filter @scn-chat/web icons, and theme-color tags follow the scheme fixed on the device. A hand-written service worker, stamped per build by a Vite plugin, keeps only the hashed /assets files and an offline page, leaves the API, sign-in, and XRPC to the browser, and drops the previous build's cache, so no chat content is cached (ADR 0006). The spec is specs/installable-app.md.

Port the admin area from design-reference. Users is a card to add a person over those waiting to sign in, then a search over a list of accounts, each with its initial, its DID, storage, and last activity, its roles as chips with a picker to add one, and its access at the end, where Suspend asks for a reason first. Roles and plugins are lists whose rows open their pages, which link back above their titles, a plugin's numbered in load order with its status and arrows to move it. A role's page holds its members, then its details with hosts and domains in a mono field. Access picks a registration mode from choices, with invite roles as chips that toggle. Models picks the default by a click anywhere on its row. A plugin's page holds its settings, a list of its provider's models, and a card to tick or type more. A model's capabilities are switches. Removing a role, plugin, or model, and revoking a key, confirm in place, and each sits in a red card. An issued key shows once in a green note with Copy. Cron shows the last run with a badge and the crontab line to copy. General, Turns, and Sync choose their cards per route, and the settings schemas gain clearer titles, descriptions, and units, which SchemaFields shows after a number.

useDocumentTitle.test.tsx

An open chat's browser tab shows its title before the app name, as "Tile quotes · SCN Chat", and so does a shared chat with a title, through useDocumentTitle, since the title lives in the browser store or the shared chat's query, which the router's head never sees. Until the title is known the tab keeps the route's, an untitled chat shows "New chat", and leaving the chat puts back the title it replaced unless the router has set another since, as for Settings. The web UI spec describes it, with tests and an acceptance criterion.

useServiceWorker.test.tsx

The app can be installed from Chrome, Edge, and Android, or added to an iPhone's home screen, and opens in its own window. The server builds /manifest.webmanifest from the admin area's name, the icons are drawn from logo.svg on the sign-in page's dark tile by pnpm --filter @scn-chat/web icons, and theme-color tags follow the scheme fixed on the device. A hand-written service worker, stamped per build by a Vite plugin, keeps only the hashed /assets files and an offline page, leaves the API, sign-in, and XRPC to the browser, and drops the previous build's cache, so no chat content is cached (ADR 0006). The spec is specs/installable-app.md.

useSidebar.test.tsx

A collapsed sidebar stays collapsed through a reload, never showing open first. The head's script, beside the theme's, reads the stored choice and marks the root with data-sidebar-collapsed before the first paint, which the layout's styles already follow from any ancestor, and toggling keeps that attribute current. The server's frame, which can't know the choice, needs no change on hydrating, so it no longer turns off the slide.