Skip to content

feat: rich configurable chat (composer, per-answer activity & usage, history, workspace, i18n) + 3-tab demo with chess (0.0.10) - #15

Merged
siarheidudko merged 4 commits into
mainfrom
claude/agents-review-improvements-2m2406
Oct 3, 2026
Merged

feat: rich configurable chat (composer, per-answer activity & usage, history, workspace, i18n) + 3-tab demo with chess (0.0.10)#15
siarheidudko merged 4 commits into
mainfrom
claude/agents-review-improvements-2m2406

Conversation

@siarheidudko

@siarheidudko siarheidudko commented Oct 2, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

This PR adds a full chat UI on top of the @dudko.dev/agent-web features. The guide is docs/chat.md; the README and CLAUDE.md are updated. Releases as 0.0.10 and depends on @dudko.dev/agent-web 0.0.20 (peer >=0.0.20).

<AgentChat>

Transcript

  • Every answer keeps its own activity: steps, each tool call (≈tokens, duration, returned images), thoughts, subagents and consent decisions.
  • Usage per answer, by kind: in / out / think / cached, plus duration.
  • The conversation total is shown in the header.

Saved chats and workspace

  • Saved chats in IndexedDB: ChatHistoryStore, useChatHistory, ChatHistoryList. A chat id doubles as the agent's memory session.
  • A workspace panel over the core's VirtualFileSystem: FilesPanel, useVirtualFiles.

Configurability

  • show* props for every part.
  • labels and <AgentLabelsProvider> for i18n; counted phrases are functions, so plurals work in any language.
  • Render props: renderContent, renderToolCall, renderMessage, renderAttachment, renderApproval.
  • slots, swappable components, theme, classNames.

Layout

  • Side panels overlay the chat on a narrow panel.
  • Menus are fixed-positioned next to their anchor.
  • Touch and phone layout.

<AgentComposer>

  • Notices for limits, compaction, start errors and refused attachments.
  • Attachments by "+", Ctrl+V, and drag & drop onto the composer, the panel or the whole window.
  • Capability checks with clear refusals; optional convertFile (e.g. PDF → Markdown); images are downscaled to ≤1.15 MP before upload.
  • "/" commands: built-ins plus skills.
  • Toolbar: run timer, running agents, model + thinking chip, consent chip ("⚡ Auto"), speech-to-text mic, send / stop.

Hooks and reducer

  • useAgent adds: run(goal, { images, files, attachments, label }), consent, compact, sessionId, loadChat.
  • useMcpServers (several MCP servers) and useSpeechToText.
  • The reducer adds: per-message activity, tool timing, totalUsage, and a load action.

Demo

Three tabs:

  • Notes: attachments, PDF → Markdown in the browser via @dudko.dev/pdf-to-md-core, and fs_* tools over a shared workspace.
  • MCP servers: any number of servers, plus a 185-tool mock catalogue to show tool search.
  • Chess vs agent: the user's move triggers the agent; analyst subagents run in Web Workers.

Also an Agent settings panel (consent, thinking, limits, compaction, skills, chat UI toggles, theme, Russian labels) and Markdown answers through renderContent.

Merge order

  1. dudko-dev/agent — released as 0.0.31.
  2. dudko-dev/agent-web — released as 0.0.20.
  3. This PR — depends on the published 0.0.20.

Checks (against the published @dudko.dev/agent-web@0.0.20)

  • Library: typecheck, format, build, and 43 unit tests pass.
  • Demo: typecheck and build pass.
  • npm run test:e2e: 12/12. MCP: several servers, the OAuth round-trip, reconnect after a reload, an unreachable server. Agent, against a scripted Gemini endpoint: tool calls and tokens, chat history, images, drop on the window, consent, slash commands, the chess trigger, Russian labels.
  • CI is green: Library, Demo, Browser.
  • Rendered in Chromium on desktop and on a 390×844 phone viewport.

🤖 Generated with Claude Code

https://claude.ai/code/session_01A7jHa5Pim4ufrdgxg561G5

claude added 4 commits October 2, 2026 23:34
@claude
feat: rich chat — per-answer activity and usage, composer, history, w…
05a7d80 
…orkspace, i18n

- AgentChat: every answer keeps its steps, tool calls (≈tokens, duration,
  returned images), thoughts, subagents and consent decisions; tokens by kind
  per answer and in total; saved chats in IndexedDB (ChatHistoryStore,
  useChatHistory, ChatHistoryList) and a workspace panel over the core's
  VirtualFileSystem (FilesPanel, useVirtualFiles). Side panels overlay a narrow
  panel. Configurable: show* props, labels (AgentLabelsProvider), render props,
  slots, swappable components, theme, classNames.
- AgentComposer: notices, "+" / Ctrl+V / drag & drop (self, window or a ref)
  for images, PDFs and files with capability checks and optional conversion,
  image downscaling before upload, slash commands (built-ins + skills), run
  timer, running agents, model + thinking chip, consent chip, speech to text.
- Reducer: per-message activity, tool timing, totalUsage, load action.
- useAgent: run(goal, { images, files, attachments, label }), sessionId,
  loadChat; useMcpServers for several MCP servers.
- Demo: three tabs (notes, MCP servers, chess vs agent with worker
  subagents), agent + chat UI settings, Russian labels, PDF → Markdown via
  @dudko.dev/pdf-to-md-core, a shared workspace with fs_* tools.
- Tests: chat helpers/labels/history/reducer units; e2e for several MCP
  servers and the agent against a scripted Gemini endpoint.
- Docs: docs/chat.md, README, demo README, CLAUDE.md.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01A7jHa5Pim4ufrdgxg561G5
@claude
fix(ui): menus never clipped, one-row toolbar, phone layout, drop ove…
3601f9a 
…rlay over the zone

- Composer menus are placed fixed next to their anchor (above when there is
  room), so a panel's overflow can't clip them; .awr-chat no longer sets
  container-type (it made the panel the containing block for fixed menus) —
  narrow mode is the JS-measured .awr-chat--narrow class.
- The toolbar keeps one row: the model chip shrinks with an ellipsis, and a
  narrow composer (compactWidth) shows icons and numbers only.
- Header usage is compact on a narrow panel; ContextMeter hides when empty;
  side-panel headers leave room for the close button; touch targets grow on
  coarse pointers and the input is 16px (no iOS zoom).
- The drop overlay covers the whole drop zone (window, panel or composer).
- Demo: Markdown answers via renderContent, a wider chat column, scrollable
  tabs on phones, the board before the chat on the chess tab.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01A7jHa5Pim4ufrdgxg561G5
@claude
fix(ui): translucent drop overlay with a dashed outline
70bec7f 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01A7jHa5Pim4ufrdgxg561G5
@claude
chore: depend on @dudko.dev/agent-web 0.0.20; release 0.0.10
2418fb2 
The chat builds on the core's 0.0.20 surface (VirtualFileSystem, attachments,
consent, tool search, subagents, context editing): peer floor >=0.0.20,
devDependency ^0.0.20 in the library and the demo. Checked against the
published 0.0.20: typecheck, format, build, unit tests, demo typecheck and
build, and the 12 Playwright e2e flows.

Version 0.0.10.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01A7jHa5Pim4ufrdgxg561G5
@siarheidudko siarheidudko changed the title feat: rich configurable chat (composer, per-answer activity & usage, history, workspace, i18n) + 3-tab demo with chess feat: rich configurable chat (composer, per-answer activity & usage, history, workspace, i18n) + 3-tab demo with chess (0.0.10) Oct 3, 2026
@siarheidudko
siarheidudko marked this pull request as ready for review October 3, 2026 00:45
@siarheidudko
siarheidudko merged commit 43c05f4 into main Oct 3, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@siarheidudko @claude