feat(chat): tool_call — progressive states, icons and compact bursts - #647
Draft
mplatts wants to merge 5 commits into
Draft
feat(chat): tool_call — progressive states, icons and compact bursts#647mplatts wants to merge 5 commits into
mplatts wants to merge 5 commits into
Conversation
Adds the answer-grounding pattern to the chat family. Prompt the model to
cite with [^N] footnote markers, hand the same source maps to markdown/1,
and the markers become numbered chips; chat_sources/1 renders the deduped
source list underneath.
- citation/1: an inline chip. A real <a> (opens the source in a new tab
with no JS) carrying aria-label="Source N: {title}". The preview card is
pure CSS on :hover / :focus-within and marked aria-hidden, since its
content is already in the accessible name and the sources list.
- chat_sources/1: native <details>/<summary>, matching reasoning/1's
no-JS approach. Deduped by URL, `expanded` opens on render,
`max_visible` tucks the overflow behind a nested "Show all" reveal,
and a nil/empty list renders nothing at all.
- markdown/1 gains a `sources` attr; to_html/2 gains a `:sources` option
for the streaming path.
Marker splicing runs on the already-sanitized MDEx output, walking it as a
tag/text token stream so markers are only rewritten in text nodes, never
inside attributes or <pre>/<code>. Chip markup is minted from the numeric
index plus escaped source fields, so model-controlled text can never reach
the page as live markup. Only complete markers match, so a half-streamed
"[^" is left alone until its closing bracket arrives.
No new dependencies, no new JS hook, no changes to any existing attr
default or test.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
prompt_input takes an %UploadConfig{} and renders the whole composer
attachment flow; message_attachments renders the received side.
prompt_input, when `upload` is set:
- a paperclip <label> wrapping a visually hidden live_file_input, so the
file picker is keyboard-operable and the input keeps its focus ring
- phx-drop-target on the form plus a drag-over tint driven by LiveView's
phx-drop-target-active class
- a chip strip from @upload.entries: live_img_preview thumbnails for
images, icon + name + formatted size for everything else, a
role="progressbar" ring driven by entry.progress (also exposed as
data-progress and a CSS custom property), and a remove button pushing
on_cancel_upload with phx-value-ref
- inline errors under the composer with role="alert", config-level first
and per-entry ones named with their file
- paste-a-screenshot in the existing PetalChatComposer hook: clipboard
files go onto the hidden input and an input event fires, which is the
only thing LiveView's upload machinery watches. Text pastes fall
through untouched.
message_attachments/1 renders images as a grid (one large, two or more
tiled) and files as download rows, images first in a mixed list. String
or atom keys both accepted, nil sizes omit the size span.
With no `upload` the composer renders exactly as before - asserted.
No new dependencies, no new hook file.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Chat.questionnaire/1 renders a question spec as a form inside the transcript, and renders it back as a quiet summary once the app has the answer. Server-driven throughout: a plain phx-submit, no client state, no client form engine, no JS hook. - four field types: :single_select, :multi_select, :text, :scale - four states: pending, submitting, resolved, skipped - composes field/1 rather than reinventing inputs - radio-card when the options carry descriptions, radio-group when they don't (overridable per field with style: "cards" | "buttons"), checkbox-group for multi-select, text for text. Required markers, labels and error scaffolding come from field/1. - the scale is the only new input rendering: five real radios sharing a name in a segmented row, so arrow keys move between steps natively - specs accept string or atom keys and normalise once at the top a11y: every question is a <fieldset> with a <legend> naming it (and marking it required), the form is aria-labelledby the title, the scale's end captions are tied in with aria-describedby, submitting disables every control and announces via role="status", and resolved leaves nothing focusable behind - no disabled form pretending to be live. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Member
Author
ScreenshotsCompact burst — five calls, five states.
The caption in that shot also records the a11y reasoning: compact rows carry A call mid-run
Light-mode screenshot is missing, and I want to be straight about whyCONTRIBUTING asks for light and dark. Both captures here are dark. The implementing agent was interrupted by host-machine sleep before it reached the light pass, and when I went to capture it myself This needs a light-mode screenshot before it leaves draft. Everything else is verified. Verified independently
That last row is worth noting: this is the one place in the batch where the layering was verified by locating the actual opening and closing lines rather than trusting the description. #639 (Filters) claimed the same thing and turned out to have appended into the unlayered tail. |
mplatts
added a commit
that referenced
this pull request
Aug 12, 2026
Contributor
|
Audit note: this branch (feat/chat-tool-call @ 2ab104f) is byte-identical to feat/chat-questionnaire (#646) — compare shows ahead 0 / behind 0, and the three commits here are the #643/#644/#646 stack. None of the issue #618 tool-states work is in the diff: chat.ex still has the legacy 4-attr tool_call/1 and there's no pending/compact/duration/state-machine code in default.css, dev.exs, the showcase, or the tests. The PR body describes work verified in a working tree that never got committed (the body's own authorship note mentions the interruption). Needs the actual commits pushed — or a rebuild from the #618 brief. Also heads-up: #643 → #644 → #646 are stacked commits, so they'll need to merge in stack order with rebases between. |
…s, unique ids Audit round on #617. (1) A required single-select was decoration only. `field/1` consumed `required` for the label asterisk and never put it on the radio inputs, so a required question submitted empty despite the docs promising browser enforcement - and the test masked it, because `html =~ "required"` passes on the `pc-label--required` class alone. `required` now reaches every radio in the radio-group and radio-card clauses (native radio semantics: required on any radio in the group makes the group required), the attr doc says what it does per type, and the test asserts `input[type=radio][required]` through LazyHTML. checkbox-group stays marker-only on purpose - native `required` on a checkbox demands that box, not one of the set - and both the moduledoc and the `:spec` doc now say so instead of overpromising to the MCP schema surface. (2) `answer_for/2` fell back to `String.to_atom/1` on field ids. Those ids come off a model-emitted spec, so that is an atom-table leak by design of the component's own use case. It scans the resolved map for a matching atom key instead, and a test asserts a never-seen field id is still not an existing atom after a render. (3) Duplicate DOM ids when one spec rendered twice on a page. Three places: questionnaire fields now take `id="{spec_id}-{field_id}"` so radio-card inputs and text inputs are namespaced per questionnaire; the playground's `single_cards` demo no longer reuses `q-framework` verbatim while the flow card above it renders the same spec (clicking a label activated the other copy); and the showcase's resolved example gives its framework and scope copies their own ids. Guarded by a test that renders every Showcase.Chat example and asserts no id repeats. (4) Focus and fill: `outline-2 outline-offset-2 outline-primary-500` appears nowhere else in default.css, so submit/skip take the house `ring-2 ring-primary-500/50` and the scale step takes the inset ring (it sits inside a clipped row, where an outset ring would be cut). The checked scale step moves from primary-500 to primary-600, matching every other solid fill in the library and holding white text with more room to spare. (5) A spec with no title rendered an empty `<h3>` that `aria-labelledby` pointed at. The header and the label wiring are now skipped when there is no title. 994 tests, 0 failures, 1 skipped (988 before).
…ebuild) Closes #618. Rebuilt from the issue brief: PR #647 was opened but its branch never diverged from feat/chat-questionnaire, so none of this ever landed. tool_call/1 used to be a static row with a header glyph. Real agentic UIs need the lifecycle a streaming model actually emits, so `state` is now the source of truth: :pending, :input_streaming, :running, :complete, :error. It is server-driven end to end - the parent LiveView patches one assign as the stream progresses and the card follows. No client state machine, no new hook, no JS. Reconciling state with status. `state` defaults to nil rather than :complete, and only then is the legacy `status` consulted. Defaulting `state` to :complete would have made "unset" and "explicitly complete" indistinguishable, so an old call site passing status={:running} would have rendered a check. nil is the only default that keeps both attrs honest. Every pre-state call site therefore renders byte-for-byte what it did before, and the two original tests pass untouched. Where things live. The rendered widget in the default slot is not a payload - it is generative UI, it can own phx-click, forms and streams - so it stays visible in the body and is never collapsed. Only `input` and `output` go behind disclosures, and only once the call has settled: there is nothing honest to show while the arguments are still arriving. They take the JSON string you actually hold when a function call streams back, pretty-printed with Jason.Formatter after a Jason.decode check, so invalid JSON is shown verbatim rather than swallowed. Disclosures are native <details>/<summary>, matching reasoning/1 and chat_sources/1 on this branch. The browser owns the expanded state and the Enter/Space handling, which is also why there is no hand-written aria-expanded: a static one on a summary the user can toggle would go stale immediately. Compact bursts. `compact` drops the card chrome to one dense line per call with hairlines between consecutive rows. A settled row is itself the disclosure; an in-progress row has nothing to reveal, so it stays a plain <div role="status"> rather than an empty <details> - which also keeps the status role off an element whose semantics would fight it. A compact error keeps its message inline in the row so the failure reads without expanding, and the retry actions live in the reveal rather than nested inside the <summary>. Slot naming. Phoenix refuses a slot whose name collides with an attr, so the brief's :icon/:input/:output slots became :tool_icon, :input_panel and :output_panel. The attrs kept the brief's names because `icon` matches marker/1 and action_button/1, and those names surface in the props table. Visuals. Pending and input_streaming compose the existing pc-skeleton primitives (shimmer rests as a static bar under prefers-reduced-motion) and the thread's own pc-chat__typing dots, rather than inventing a second waiting idiom. Running adds an indeterminate hairline under the header, resting full-width and dimmed under reduced motion. Error now rides the danger ramp across the border, the header text and the badge - the badge was amber-500, an off-ramp colour, and a red card with an amber badge reads as two different signals. That is a deliberate visual change to existing status={:error} cards; it is scoped to .pc-chat__tool--error so nothing else moves. Accessibility. In-progress cards carry role="status"; every state also renders a visually-hidden word next to the tool name, so the state never lands as colour alone. Glyphs, skeleton and chevrons are aria-hidden. Panel summaries take a focus-visible ring, inset-free since nothing clips them, and their radius clamps off the panel's own clamped radius. One HEEx wart worth knowing: any component written with an explicit closing tag gets a default slot even when the caller only passed named slots, so reaching for <:error_actions> alone would leave a whitespace-only body drawing a separator and 12px of nothing. Detecting that in Elixir means rendering the slot to check it, which raises on a live_component - so the guard is CSS: a body with no element child drops its separator and block padding. Whitespace collapses to zero height; the rare text-only body still reads, just tight to the header. Playground gets a mocked agent run (four Process.send_after hops, each patching one assign), a five-call compact burst, and state/compact/icon dials on the existing chat page. No new nav slug. mix test 1023 (994 -> 1023), npm test 163 unchanged, mix credo unchanged at 15 refactoring / 31 readability, mix format clean, no new dependencies.
Contributor
|
Rebuilt. The branch has been reset onto the polished questionnaire stack head and now carries the actual #618 work as one commit (it previously held only #646's commits - see the earlier audit note). 1,023 Elixir tests (+29), format and credo clean, no JS, no new deps. Three design calls flagged for Nic's review:
Stack reminder: this merges LAST, after #643 → #644 → #646, with a rebase between each. |
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #647 +/- ##
==========================================
+ Coverage 92.40% 92.78% +0.38%
==========================================
Files 119 119
Lines 5066 5530 +464
==========================================
+ Hits 4681 5131 +450
- Misses 385 399 +14 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #618
Stack position
This is the top of the chat stack and should merge last:
#643 chat_sources→#644 attachments→#646 questionnaire→ #618 (this PR)It branches off
feat/chat-questionnaire, so the diff GitHub shows here is cumulative across all four. That is expected.What shipped
Tool calls render a lifecycle rather than one static row — pending, running, complete and error each get their own treatment, with a per-state icon and inspectable input/output panels. Consecutive rapid calls collapse into a compact burst so a long agent trace stays readable.
lib/petal_components/chat.ex(+283)assets/default.css(+162)test/petal/chat_test.exs(+259)lib/petal_components/showcase/chat.ex(+83), already registered/c/chatpage that step a call through every state (+279 indev.exs)CHANGELOG.mdunder### UnreleasedVerification
mix testnpm testmix format --check-formattedmix compile --force --warnings-as-errorsmix credofeat/chat-questionnaire(45 both sides; the pre-existingchat.exnesting finding shifts 418 → 677 as lines are added above it)Backward compatibility
Zero deletions from
test/petal/chat_test.exs. Every pre-existing chat test — including those added by #643, #644 and #646 — passes unmodified. No existing attr default changed.CSS layering
New rules are wrapped in their own
@layer components { }block (opens at line 8053, closes at 8210), not appended into the unlayered tail. That matters: rules after ~line 7016 indefault.csssit outside any layer and therefore beat consumer utilities passed throughclass, which would silently breakclassoverrides on this component.Note on authorship
The agent that wrote this was interrupted twice by infrastructure failures (the host machine slept mid-response) and never got to commit. The work was complete and verified in place; I ran every gate above against the working tree before committing it as-is. No code was changed during recovery.