@lotics/ui 14.2.0 → 14.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/ai_patterns.md +26 -9
- package/docs/catalog.md +7 -4
- package/docs/templates.md +32 -20
- package/examples/tpl_item_list.tsx +319 -58
- package/examples/tpl_record.tsx +24 -15
- package/package.json +3 -6
- package/src/follow_scroll.tsx +32 -37
- package/examples/tpl_documents.tsx +0 -808
package/docs/ai_patterns.md
CHANGED
|
@@ -39,7 +39,7 @@ Three shapes:
|
|
|
39
39
|
|
|
40
40
|
The Document desk's Use-AI fork IS this table as UI: Extract data (1) · Cross-check (2) ·
|
|
41
41
|
Edit with AI (3) — one entry point, three outcome shapes
|
|
42
|
-
([`
|
|
42
|
+
([`tpl_record`](../examples/tpl_record.tsx)'s Documents section).
|
|
43
43
|
|
|
44
44
|
## Command / compose — `Composer`
|
|
45
45
|
|
|
@@ -138,14 +138,20 @@ pass it as the `error` prop and it renders as a terminal danger row under the tr
|
|
|
138
138
|
|
|
139
139
|
**In a bounded container, wrap it in `FollowScroll`.** An `AgentRun` streaming inside a dialog,
|
|
140
140
|
drawer, or fixed-height panel grows BELOW the fold — a plain scroll container doesn't follow. Wrap
|
|
141
|
-
the feed: `<FollowScroll style={{ maxHeight: … }}><AgentRun … /></FollowScroll>` —
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
141
|
+
the feed: `<FollowScroll style={{ maxHeight: … }}><AgentRun … /></FollowScroll>` — the same
|
|
142
|
+
inverted-list mechanism as a chat message list, packaged as a wrapper: the follow happens at
|
|
143
|
+
LAYOUT level (each growth paints already pinned — no scroll-after-paint flash), scrolling up
|
|
144
|
+
releases it, and the feed stays at the newest content when the run settles (`AgentProgress`'s
|
|
145
|
+
expanded panel does this). When settling REPLACES the feed with different content (a results
|
|
146
|
+
pane), swap `FollowScroll` for a plain scroller on the phase flip — the remount opens the new
|
|
147
|
+
content at the top; a transcript that persists just stays in `FollowScroll`. A full-page chat
|
|
148
|
+
list is already inverted and doesn't need the wrapper.
|
|
145
149
|
|
|
146
150
|
Fed natively by `@lotics/app-sdk`'s `useAgentRun().parts` (reasoning + per-tool I/O + state come
|
|
147
151
|
for free — no hand-assembly): `<AgentRun parts={run.parts} state={…} error={run.error} />` — see
|
|
148
|
-
[the SDK doc](../../app-sdk/docs/ai.md) for the hook.
|
|
152
|
+
[the SDK doc](../../app-sdk/docs/ai.md) for the hook. The `ai` package is a regular dependency of
|
|
153
|
+
`@lotics/ui` — its part TYPES resolve transitively in any consumer's typecheck with nothing to
|
|
154
|
+
install; the imports are type-only (purity-enforced), so no `ai` runtime ever enters a bundle.
|
|
149
155
|
**Reasoning only shows when the model produces it** — the declared model must support thinking
|
|
150
156
|
(Sonnet / Opus, not Haiku); the renderer shows every reasoning part it's handed.
|
|
151
157
|
|
|
@@ -171,7 +177,7 @@ when done.
|
|
|
171
177
|
|
|
172
178
|
Every "the agent proposes → the human accepts / edits / dismisses → nothing auto-applies" surface
|
|
173
179
|
composes from twelve pieces in three groups (all in `@lotics/ui/change_review`; worked example:
|
|
174
|
-
[`
|
|
180
|
+
[`tpl_record`](../examples/tpl_record.tsx)'s Use-AI extract flow).
|
|
175
181
|
|
|
176
182
|
**Frame**
|
|
177
183
|
|
|
@@ -278,7 +284,9 @@ Back / Next / Cancel / Submit (Next/Submit primary), the step position an eyebro
|
|
|
278
284
|
question — no progress bar, and no eyebrow at all for a single question. Each step is a `Clarify`; advance only once the
|
|
279
285
|
current question is answered; `onSubmit` gives one `{ value, custom }` per question (aligned by index,
|
|
280
286
|
`custom` true when the answer came from "Other…"), `onCancel` dismisses. All navigation chrome is
|
|
281
|
-
locale-wired (the `clarify` slice). The multi-question form of the ask-back.
|
|
287
|
+
locale-wired (the `clarify` slice). The multi-question form of the ask-back. Worked example:
|
|
288
|
+
[`tpl_item_list`](../examples/tpl_item_list.tsx)'s intake fork (the wizard between the analyze
|
|
289
|
+
and import runs).
|
|
282
290
|
|
|
283
291
|
## Provenance — `Sources`
|
|
284
292
|
|
|
@@ -362,7 +370,7 @@ ranked set, don't cram it into chat prose:
|
|
|
362
370
|
so the alternatives are first-class and picking a different one changes the outcome; refining
|
|
363
371
|
the description re-ranks. For look-up-and-explain: tariff/classification codes, fee lookup,
|
|
364
372
|
policy Q&A, a spec/compliance desk. (NOT a chat with the answer in a bubble.)
|
|
365
|
-
- **Document desk** ([`
|
|
373
|
+
- **Document desk** (in [`tpl_record`](../examples/tpl_record.tsx) — THE go-to for
|
|
366
374
|
document-driven records) — the record's files block feeds ONE "Use AI" entry that FORKS into
|
|
367
375
|
the two document tasks, each a specialized run with a task-pure result: **Extract** (files
|
|
368
376
|
read → fields already matching fold into one quiet line → every add / update / conflict a
|
|
@@ -376,6 +384,15 @@ ranked set, don't cram it into chat prose:
|
|
|
376
384
|
full-page `FileGalleryModal`. Plus **Create documents**: a readiness checklist (unchecked by
|
|
377
385
|
default, missing inputs called out) → generate → the files land back on the record. Never merge
|
|
378
386
|
the two AI tasks into one mixed output — the fork is the design.
|
|
387
|
+
- **Intake desk** (in [`tpl_item_list`](../examples/tpl_item_list.tsx)'s "Enter data" fork) — the
|
|
388
|
+
register's New CTA leads with AI: a `FileDropzone` hero → a short ANALYZE run reads the files →
|
|
389
|
+
`ClarifyWizard` asks the ambiguities the analysis surfaced → the IMPORT run drafts records →
|
|
390
|
+
`ChangeRecord` cards + one Apply land the rows; the manual VARIANTS sit below the dropzone as
|
|
391
|
+
`CardSelectItem`s, each opening the classic create-then-refine form. The template mocks the
|
|
392
|
+
clarify step as TWO app-orchestrated phases (analyze-run → wizard → import-run); a real app
|
|
393
|
+
can do it in ONE run — every app agent carries `ask_user_choice`, so the run PARKS on the
|
|
394
|
+
agent's own question and `useAgentRun().pendingChoice`/`answerChoice` drive the same
|
|
395
|
+
`ClarifyWizard` (see the SDK's [ai doc](../../app-sdk/docs/ai.md)).
|
|
379
396
|
- **Triage** — an inbox the agent classified + routed is a `ChangeReview` of `Change`s (body: the
|
|
380
397
|
item + the agent's call; the standard Keep/Drop verbs; Keep-all covers the high-confidence
|
|
381
398
|
sweep). Leads, tickets, documents, emails.
|
package/docs/catalog.md
CHANGED
|
@@ -1001,10 +1001,13 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
|
|
|
1001
1001
|
- **`agent_progress`** — `AgentProgress`: `AgentRun`'s compact, floating, expandable form (same
|
|
1002
1002
|
`parts` prop) — a composer's working state.
|
|
1003
1003
|
- **`follow_scroll`** — `FollowScroll`: a scroll container that FOLLOWS its growing content —
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1004
|
+
the chat message list's inverted mechanism packaged as a wrapper (single-cell inverted list),
|
|
1005
|
+
so the follow happens at LAYOUT level: each growth paints already pinned (no flash), scrolling
|
|
1006
|
+
up releases it, and short content still reads top-down. Wrap a streaming `AgentRun` with it in
|
|
1007
|
+
any bounded container (a dialog, a drawer, a panel — put the height bound on `style`);
|
|
1008
|
+
`AgentProgress`'s expanded panel uses it. Inherits the inverted pattern's quirks (scrollbar
|
|
1009
|
+
thumb runs opposite; keyboard paging inverted) — same as chat. A full-page chat list is
|
|
1010
|
+
already inverted and doesn't need it.
|
|
1008
1011
|
- **`confidence`** — `Confidence` + `ConfidenceLevel` + `levelFromScore`: calibrated
|
|
1009
1012
|
high/med/low; localized via the provider.
|
|
1010
1013
|
- **`change_review`** — the COMPOUND review family — frame: `ChangeReview` provider/stack ·
|
package/docs/templates.md
CHANGED
|
@@ -50,7 +50,7 @@ the package index is [../AGENTS.md](../AGENTS.md).
|
|
|
50
50
|
| Shift signup + staffing | `tpl_shifts` |
|
|
51
51
|
| AI produces a visual artifact on a canvas | `tpl_dieline` |
|
|
52
52
|
| AI ranks answers — look-up-and-explain | `tpl_lookup` |
|
|
53
|
-
| AI over a record's documents (extract / cross-check / generate) | `
|
|
53
|
+
| AI over a record's documents (extract / cross-check / generate) | `tpl_record` — its Documents + Document set sections |
|
|
54
54
|
|
|
55
55
|
## Composition rules — how a record surface is assembled
|
|
56
56
|
|
|
@@ -204,6 +204,17 @@ screens — register, per-row action, gated selection, and act-on-many in one. T
|
|
|
204
204
|
newest first — an entry's attachments ride its expandable details as a thumbnail grid
|
|
205
205
|
whose press opens the shared `FileGalleryModal`.
|
|
206
206
|
- A closing `DangerZone`.
|
|
207
|
+
- **The "Enter data" INTAKE FORK** (the New CTA) — AI FIRST, the form as fallback, one phased
|
|
208
|
+
dialog: a `FileDropzone` hero (drop the customer's files) → a short ANALYZE stream
|
|
209
|
+
(`AgentRun` in a `FollowScroll`) reads them → `ClarifyWizard` asks the ambiguities the
|
|
210
|
+
analysis surfaced (described options, one custom-answer slot) → the IMPORT stream drafts the
|
|
211
|
+
records → `ChangeRecord` cards to Keep/Drop (fee editable in place) + one outcome-named
|
|
212
|
+
Apply that really lands the rows in the register (no drawer on a bulk landing). BELOW the
|
|
213
|
+
dropzone, "or enter manually" → the record VARIANTS as `CardSelectItem`s, each opening the
|
|
214
|
+
same THREE-field create-then-refine form (a single manual create still opens its drawer).
|
|
215
|
+
The template mocks the clarify step as two app-orchestrated phases; a real app can do it in
|
|
216
|
+
ONE run — every app agent carries `ask_user_choice`, so the run parks on the agent's own
|
|
217
|
+
question and `useAgentRun().pendingChoice`/`answerChoice` drive the same `ClarifyWizard`.
|
|
207
218
|
|
|
208
219
|
### `tpl_pick` — the guided queue
|
|
209
220
|
|
|
@@ -266,15 +277,13 @@ billing, and quick-capture templates. Top → bottom:
|
|
|
266
277
|
(dashed add-ghost when unset), sized to the list's `trailingWidth` so the title never overlaps.
|
|
267
278
|
(Contrast the General section's dates/assignee, the same editors in the default `variant="form"`
|
|
268
279
|
— a zinc-50 chip + hover-border + the full member chip.)
|
|
269
|
-
- **Documents** — the Agents "Document desk" pattern (
|
|
270
|
-
|
|
271
|
-
`FloatingActionBar` → ONE "Use AI" fork (extract / cross-check / edit-with-AI).
|
|
272
|
-
row's leading visual is a `FileThumbnail` in ONE square 32px slot — an image file
|
|
273
|
-
it as a real thumbnail, a document centers its badge in it — never a bare `FileBadge`
|
|
274
|
-
(mixed footprints misalign the identity column).
|
|
275
|
-
|
|
276
|
-
Create moves to the Document set OUTPUT section below; `tpl_documents` (no output
|
|
277
|
-
pipeline on its page) keeps the toolbar "Create documents" dialog.
|
|
280
|
+
- **Documents** — the Agents "Document desk" pattern (this template is its worked example —
|
|
281
|
+
see the Agents chapter below): the register `Table` (search · Add files) whose selection
|
|
282
|
+
feeds the `FloatingActionBar` → ONE "Use AI" fork (extract / cross-check / edit-with-AI).
|
|
283
|
+
Every row's leading visual is a `FileThumbnail` in ONE square 32px slot — an image file
|
|
284
|
+
fills it as a real thumbnail, a document centers its badge in it — never a bare `FileBadge`
|
|
285
|
+
(mixed footprints misalign the identity column). The desk holds what ARRIVES; generation
|
|
286
|
+
lives in the Document set OUTPUT section below.
|
|
278
287
|
- **Customer — the LINKED-RECORD reference** via **`LinkedRecordBox`**: another record's data
|
|
279
288
|
NEVER renders as field rows on this one — a BORDERED, fully pressable box (glyph anchor ·
|
|
280
289
|
identity · facts stacked VERTICALLY) whose press opens the detail drawer; the verbs ride the
|
|
@@ -460,8 +469,9 @@ double-shift days flagged). Accepting and assigning move the board live.
|
|
|
460
469
|
## Agents
|
|
461
470
|
|
|
462
471
|
Screens where AI does the work and the human reviews. `tpl_dieline` *produces* an artifact;
|
|
463
|
-
`tpl_lookup`
|
|
464
|
-
contracts and the propose→review→apply
|
|
472
|
+
`tpl_lookup` *structures* information for a decision; the document desk (in `tpl_record`)
|
|
473
|
+
does both over a record's files. The AI component contracts and the propose→review→apply
|
|
474
|
+
loop live in [ai_patterns.md](./ai_patterns.md).
|
|
465
475
|
|
|
466
476
|
### `tpl_dieline` — the design canvas
|
|
467
477
|
|
|
@@ -484,12 +494,15 @@ rows, policy `Callout`s, `Confidence`, and `Sources`. The flow is input → matc
|
|
|
484
494
|
a single confident verdict: classification is ambiguous, so the alternatives are first-class.
|
|
485
495
|
Refine the description in a follow-up and the ranking updates.
|
|
486
496
|
|
|
487
|
-
###
|
|
497
|
+
### The document desk — in `tpl_record`
|
|
488
498
|
|
|
489
|
-
THE worked example for everything document-driven on a record
|
|
490
|
-
|
|
499
|
+
THE worked example for everything document-driven on a record lives on the record template
|
|
500
|
+
(its Documents section — no standalone template). A record's files block feeds ONE
|
|
501
|
+
**"Use AI"** entry — the one AI entry point, never per-row AI buttons (the per-row `⋯`
|
|
491
502
|
menu holds only Rename/Download). Inside its dialog the run FORKS into three tasks as
|
|
492
|
-
`CardSelectItem`s (select → a confirming footer CTA, never one-click)
|
|
503
|
+
`CardSelectItem`s (select → a confirming footer CTA, never one-click), and the streaming
|
|
504
|
+
phase runs inside a `FollowScroll` (swapped back to `DialogScrollArea` on the phase flip,
|
|
505
|
+
so review opens at the top):
|
|
493
506
|
|
|
494
507
|
- **Extract** (read the documents, fill the record) — the open `ChangeFields` review: ONE
|
|
495
508
|
`Change` section per record whose body stacks a `ChangeField` per proposed value (label ·
|
|
@@ -502,10 +515,9 @@ menu holds only Rename/Download). Inside its dialog the run FORKS into three tas
|
|
|
502
515
|
- **Edit with AI** — the `askAi` handoff: dialogue-shaped file iteration happens in the
|
|
503
516
|
platform chat (the documents attached to a fresh thread), not in the app.
|
|
504
517
|
|
|
505
|
-
|
|
506
|
-
(
|
|
507
|
-
|
|
508
|
-
PENDING (previewable) until the user commits them onto the record.
|
|
518
|
+
GENERATION is separate and deterministic — the record's Document set OUTPUT section
|
|
519
|
+
(readiness checklist → template fill with a `loading` trigger, never `AgentRun` theater;
|
|
520
|
+
the set appears at once).
|
|
509
521
|
|
|
510
522
|
All mock — `useState` plus a timer streams the `AgentRun`; a real app drives the same
|
|
511
523
|
components from its live agent run.
|