apps/web/src/features/conversation/lib · scn-chat · Tangled

ATProto-based AI Assistant Chat interface.

scn-chat apps web src features conversation lib

6 files

· Retry busy providers. Don't retry spent keys. Add messaging for users. · 2w ago

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.

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.

composer-handoff.ts

On a reload, the composer's box takes typing before the page's code loads. The page's frame, which the server sends in place of the client-only chats, now holds the composer's frame at the foot of the panel: a plain textarea in the composer's card, with Attach, the model select's loading line, and Send disabled, so Enter only adds a line. The conversation's column shows it again while its code downloads. Each frame that gives way leaves its text, cursor, and focus in composer-handoff.ts, and the frame or composer that takes its place puts them back, so the swap can't be seen. Only a composer that starts empty takes a draft, never one editing a message. The frame and the composer are built from the same parts in composer-parts.tsx, and the composer binds its form field to MessageBox. An open chat's box says neither "Ask anything" nor "Reply" until its messages arrive, and sends nothing until then, since the message wouldn't know which one it answers. On a reload the turn skeleton in the page's frame shows at once, and the skeletons that take its place carry that on rather than vanishing to fade in again. The web UI spec describes it, with tests, including one that hydrates the server's frame, and an acceptance criterion.

load-conversation.ts

Load less and rerender less. The new-chat page no longer downloads the Markdown renderer: the conversation and the search results load with React.lazy, the chat route's loader starts the conversation's download, the new-chat page starts it once it shows, and opening the search starts the results', so what / downloads drops from 335 KB to 184 KB with brotli. Streamdown imports rehype-raw for its defaults, which markdown.tsx leaves out, so vite.config.ts aliases it to an empty stand-in in parts/no-raw.ts, keeping parse5 out of the build and the Markdown chunk from 163 KB to 71 KB gzipped. The logo's paths are rounded to two decimals, from 10.0 KB to 6.6 KB gzipped. The chat routes' loader starts the models, attachment types, and profile queries without waiting for them, and their head preconnects to the avatar's CDN. attachmentTypesQuery moves to its own module, so the loader doesn't bring the store's hooks into the entry. Pointing at or focusing a link preloads its route, the query cache deciding what is stale.

Port the conversation header, message actions, and scrolling from design-reference. The header spans the panel over a fade, its title renames the chat when clicked, and a quiet toolbar holds Jump to, a blurred layer stacking your messages that scrolls to the one picked and makes it glow, Share as a floating SharePanel, and More with Rename and Sync this chat, one panel at a time. Messages carry icon actions in main's keyed list: edit, copy, and details on yours, copy, regenerate, and More with Regenerate with and details on a reply, and Stop on a pending one, and the shared view shows details. Following the conversation glides down and tracks whether the reader is at the bottom without rerendering it. Floating menus share useDismiss and MenuItem.

reply-stream.ts

Retry busy providers. Don't retry spent keys. Add messaging for users.