@tailor-platform/app-shell 1.18.0 → 1.20.0

package/skills/app-shell-patterns/references/components/ai-chat.md

@@ -84,6 +84,17 @@ Other props spread onto the root `<div>`.
 
 Other props spread onto the region's outer `<div>`.
 
+While the root's `status` is `"submitted"`, the conversation automatically appends a [`Spinner`](./spinner.md) and localized “Thinking…” status at the end. This covers the initial reply wait, tool execution, and the next reply wait after a tool result. The indicator disappears when text starts streaming, or when the request finishes, fails, or is stopped. It participates in the conversation's normal auto-scroll behavior; no separate loader state is needed.
+
+### `AIChat.ToolCall`
+
+A compact label for one model-requested tool call. Each label occupies its own row, so multiple calls stack vertically. It does not imply execution success, render tool arguments/results, or manage history.
+
+| Prop        | Type                           | Default  | Description                                      |
+| ----------- | ------------------------------ | -------- | ------------------------------------------------ |
+| `call`      | `{ id: string; name: string }` | required | A `toolCalls` element returned by `useAIChat()`. |
+| `className` | `string`                       | -        | Merged onto the outer row, not the badge.        |
+
 ### `AIChat.Composer`
 
 | Prop            | Type                        | Default  | Description                                                                      |
@@ -112,17 +123,18 @@ Most props stay inside their region. These `AIChat.Composer` props land on **ano
 
 `onValueChange` is wrapped rather than forwarded — it is called from the `Textarea`'s `onChange`, and again with `""` after a submit. `defaultValue` seeds the composer's own state and is never forwarded. Nothing on `AIChat`, `AIChat.Header`, or `AIChat.Conversation` reaches another AppShell component.
 
-Three attached parts wrap an AppShell component. They expose only the props the part's job needs rather than inheriting the wrapped component's surface, so its visual treatment is fixed and not yours to change:
+Four attached parts wrap an AppShell component. They expose only the props the part's job needs rather than inheriting the wrapped component's surface, so its visual treatment is fixed and not yours to change:
 
 | Part                                | Wraps                                                      | Accepts                                                       | Fixed                              |
 | ----------------------------------- | ---------------------------------------------------------- | ------------------------------------------------------------- | ---------------------------------- |
 | `AIChat.Suggestion`                 | [`Button`](./button.md)                                    | `suggestion`, `onSelect`, `className`, `disabled`, `children` | `variant="secondary"`, `size="sm"` |
 | `AIChat.Action`                     | [`Button`](./button.md) inside a [`Tooltip`](./tooltip.md) | `label`, `onClick`, `className`, `disabled`, `children`       | `variant="ghost"`, `size="icon"`   |
 | `AIChat.ChainOfThoughtSearchResult` | [`Badge`](./badge.md)                                      | `className`, `children`, `variant`                            | —                                  |
+| `AIChat.ToolCall`                   | [`Badge`](./badge.md)                                      | `call`, `className`                                           | `variant="neutral"`                |
 
 `variant` stays open on `ChainOfThoughtSearchResult` because conveying status is what a `Badge` is for. `AIChat.Action`'s `label` becomes both the accessible name and the tooltip text.
 
-One thing to know about `className` on these: it is merged with `cn()`, which is not configured for AppShell's internal prefix, so it cannot reliably override a base utility from the wrapped component. Add properties the component doesn't set, and reach for the wrapped component's own props or variants to change ones it does — see [Styling AppShell components](../concepts/styling-theming.md#styling-appshell-components).
+`ToolCall` applies `className` to its outer row, not the inner badge. For `Suggestion`, `Action`, and `ChainOfThoughtSearchResult`, `className` is merged with `cn()`, which is not configured for AppShell's internal prefix, so it cannot reliably override a base utility from the wrapped component. Add properties the component doesn't set, and reach for the wrapped component's own props or variants to change ones it does — see [Styling AppShell components](../concepts/styling-theming.md#styling-appshell-components).
 
 ## Filling the page
 
@@ -261,6 +273,28 @@ Structured step timeline for agentic turns — the discrete plan being executed,
 
 `status` is `"complete" | "active" | "pending"`.
 
+### Tool calls during the active flow
+
+`useAIChat()` returns a transient `toolCalls` list separately from `messages`. Render it with `AIChat.ToolCall` after the message history inside `AIChat.Conversation`:
+
+```tsx
+{
+  toolCalls.length > 0 ? (
+    <AIChat.Message from="assistant">
+      {toolCalls.map((call) => (
+        <AIChat.ToolCall key={call.id} call={call} />
+      ))}
+    </AIChat.Message>
+  ) : null;
+}
+```
+
+Each call renders on its own row, in the order supplied. Labels are localized automatically.
+
+The list clears when the response finishes, is stopped, or fails. It does not create tool messages or persist in the conversation log.
+
+These names record model requests, not execution success. Tool arguments and results stay internal. Do not infer a `ToolHeader` success or running state from name-only metadata.
+
 ### Tool
 
 Collapsible tool-call card. Maps 1:1 to the AI SDK's tool-part lifecycle, so a streaming loop can update a call in place as parts arrive.
@@ -279,7 +313,7 @@ Collapsible tool-call card. Maps 1:1 to the AI SDK's tool-part lifecycle, so a s
 
 ### Sources
 
-Compact "Used N sources" citation trigger under a grounded answer.
+Compact "Used N sources" citation trigger under a grounded answer. Supply source data from your application; `useAIChat()` does not return citation metadata.
 
 ```tsx
 <AIChat.Sources>

package/skills/app-shell-patterns/references/components/app-shell.md

@@ -232,14 +232,14 @@ Access the configured timezone in components using [`useTimeZone`](../api/use-ti
 - **Description:** Global error boundary component applied to all routes
 
 ```tsx
-import { useRouteError } from "@tailor-platform/app-shell";
+import { Text, useRouteError } from "@tailor-platform/app-shell";
 
 const GlobalErrorBoundary = () => {
   const error = useRouteError() as Error;
   return (
     <div className="p-8">
-      <h1 className="text-xl font-bold mb-4">Something went wrong</h1>
-      <p className="text-red-600">{error.message}</p>
+      <Text.h1 className="mb-4">Something went wrong</Text.h1>
+      <Text.p className="text-danger-text">{error.message}</Text.p>
     </div>
   );
 };
@@ -432,6 +432,7 @@ import {
   SidebarLayout,
   defineModule,
   defineResource,
+  Text,
   useRouteError,
 } from "@tailor-platform/app-shell";
 import { Building } from "lucide-react";
@@ -450,8 +451,8 @@ const ErrorBoundary = () => {
   const error = useRouteError() as Error;
   return (
     <div className="p-8">
-      <h1 className="text-xl font-bold">Error</h1>
-      <p>{error.message}</p>
+      <Text.h1>Error</Text.h1>
+      <Text.p>{error.message}</Text.p>
     </div>
   );
 };

package/skills/app-shell-patterns/references/components/badge.md

@@ -32,6 +32,7 @@ function BasicUsage() {
       <Badge variant="subtle-warning">Subtle Warning</Badge>
       <Badge variant="subtle-error">Subtle Error</Badge>
       <Badge variant="subtle-info">Subtle Info</Badge>
+      <Badge variant="subtle-neutral">Subtle Neutral</Badge>
     </div>
   );
 }
@@ -54,6 +55,7 @@ Filled variants for high emphasis, plus subtle variants for lower-emphasis statu
 <Badge variant="subtle-warning">Needs Attention</Badge>
 <Badge variant="subtle-error">Needs Review</Badge>
 <Badge variant="subtle-info">In Progress</Badge>
+<Badge variant="subtle-neutral">Archived</Badge>
 ```
 
 ### Outline Variants with Status Dots
@@ -74,9 +76,9 @@ _Generated from the type surface — first-party props only._
 
 ### BadgeProps
 
-| Prop       | Type                                                                                                                                                                                                                                                           | Default     | Description          |
-| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -------------------- |
-| `variant?` | `"error" \| "neutral" \| "success" \| "warning" \| "info" \| "default" \| "subtle-success" \| "subtle-warning" \| "subtle-error" \| "subtle-info" \| "outline-success" \| "outline-warning" \| "outline-error" \| "outline-info" \| "outline-neutral" \| null` | `"default"` | Visual style variant |
+| Prop       | Type                                                                                                                                                                                                                                                                               | Default     | Description          |
+| ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -------------------- |
+| `variant?` | `"error" \| "neutral" \| "success" \| "warning" \| "info" \| "default" \| "subtle-success" \| "subtle-warning" \| "subtle-error" \| "subtle-info" \| "subtle-neutral" \| "outline-success" \| "outline-warning" \| "outline-error" \| "outline-info" \| "outline-neutral" \| null` | `"default"` | Visual style variant |
 
 ## Exports
 
@@ -99,6 +101,7 @@ type BadgeVariant =
   | "subtle-warning" // Low-emphasis yellow
   | "subtle-error" // Low-emphasis red/destructive
   | "subtle-info" // Low-emphasis blue
+  | "subtle-neutral" // Low-emphasis gray
   // Outline variants with status dots
   | "outline-success"
   | "outline-warning"
@@ -225,6 +228,7 @@ function ProductBadge({ product }: { product: Product }) {
 | `subtle-warning` | ![Subtle yellow badge] | Low-emphasis pending or attention states   |
 | `subtle-error`   | ![Subtle red badge]    | Low-emphasis failures or exceptions        |
 | `subtle-info`    | ![Subtle blue badge]   | Low-emphasis informational or in-progress  |
+| `subtle-neutral` | ![Subtle gray badge]   | Low-emphasis tags with no status           |
 
 ### Outline Variants
 

package/skills/app-shell-patterns/references/components/card.md

@@ -25,7 +25,7 @@ function BasicUsage() {
     <Card.Root>
       <Card.Header title="Order Details" description="Summary of order #1234" />
       <Card.Content>
-        <p>Content goes here</p>
+        <Text.p>Content goes here</Text.p>
       </Card.Content>
     </Card.Root>
   );
@@ -154,7 +154,7 @@ For a scrollable list, put the overflow on `Card.Content`. Rows supply their own
 ```tsx
 <Card.Root>
   <Card.Content>
-    <p>No header needed for this card.</p>
+    <Text.p>No header needed for this card.</Text.p>
   </Card.Content>
 </Card.Root>
 ```