AC Updates

Author: ginobuzz

CLAUDE.md

@@ -132,7 +132,7 @@ A component appearing here doesn't mean it's actively used in the default repo 
 | Component | What it is | Props | Notes |
 |-----------|------------|-------|-------|
 | `Avatar` | Person / agent / group / channel avatar. Circle for people/agents/groups, rounded-square for channels. Renders an image if `contact.avatar` is set, else an agent logo (via `shared/agentLogos.jsx`) for agents, else `contact.initials` over `contact.color`. | `contact`, `size = 36`, `hideStatus = false` | Status dot auto-draws when `contact.status` is set and auto-scales (~28% of avatar). Pass `hideStatus` to suppress it (e.g. inside `TypingIndicator`). Contacts with `logoInset: true` render the image at 60% inside the avatar with a 1px `#E0E0E0` border — use for edge-to-edge logo PNGs that would otherwise clip (e.g. Figma). See `DESIGN_GUIDE.md` for established sizes per surface. |
-| `LinkCard` | Rich external-link card used inside message bubbles — icon tile + title/subtitle. Today supports Jira and GitHub icon treatments. | `link: { source, title, subtitle, url }` | `source: 'jira' \| 'github'`. Extend the icon set inside the component when a new source is needed. |
+| `LinkCard` | Rich external-link card used inside message bubbles — icon tile + title/subtitle. | `link: { source, title, subtitle, url }` | `source: 'jira' \| 'github' \| 'figma'`. Figma renders the multi-color Figma logo on a dark tile. Extend the icon set inside the component when a new source is needed. |
 | `IconButton` | Accessible icon-only button: consistent reset, hover state, required `aria-label`. | `label`, `active?`, `className?`, `children`, plus any native `<button>` props | Use this instead of hand-rolling a `<button>` with an SVG — callers still add their own className for size/color. |
 | `PrivateDisclaimer` | Lock icon + "Only you can see this conversation" strip. | `text?` (override the default copy) | Used inside private message bubbles and above the agents-rail chat thread. |
 | `TypingIndicator` | Canonical "X is typing" UI — avatar + 3 bouncing dots. **Whenever a task says "typing indicator", it means this.** | `contact`, `avatarSize = 32`, `dotSize = 5`, `className?` | Component owns only the avatar + dots visual; positioning is the caller's job. Main canvas: floats above `Compose` with the avatar's bottom ~10% tucked behind the compose box top edge (see `.chat-compose-area` / `.chat-compose-typing` in `ChatView.css`). Agents rail: in-flow above the rail compose. Add new surface-specific CSS rather than forking the component. |

DESIGN_GUIDE.md

@@ -161,22 +161,52 @@ New-session empty state for an agent chat: centered 72px avatar + agent name + s
 
 **Agents send rich, interactive content via the [Adaptive Cards framework](https://adaptivecards.microsoft.com/)** — the format the Teams team recommends for agent-authored content. When the user asks you to have an agent send content (status summaries, ticket details, action prompts, etc.), reach for an adaptive card rather than freeform text when the content is structured.
 
-In the prototype's message model, adaptive cards attach to a message via `message.cards` — an array of card objects. The minimal shape rendered today:
+In the prototype's message model, adaptive cards attach to a message via `message.cards` — an array of card objects. The renderer (in `MessageRow.jsx`) currently supports:
 
 ```js
 {
-  accentColor: '#CA5010',            // left border color
-  title: 'Keep users logged in when switching between agents',
+  accentColor: '#5B5FC7',                  // left border color (3px stripe)
+
+  // Header row — optional Office-app icon tile + title + optional badge.
+  iconType: 'word',                        // 'word' | 'excel' | 'powerpoint' | 'outlook' | 'teams'
+  title: 'Northwind partner readout — Brief.docx',
+  subtitle: 'One-pager covering scope, status, key risks, and partner asks.',
+  badge: { text: 'Ready', tone: 'green' }, // tone: 'amber' | 'green' | 'purple' | 'neutral'
+
+  // Plan steps with status pips (pending → running → done).
+  steps: [
+    { text: 'Aggregate context from the last 30 days', status: 'done' },
+    { text: 'Pull external signals with citations', status: 'running' },
+    { text: 'Draft one-page brief in Word', status: 'pending' },
+  ],
+
+  // Grouped sections — each can mix headings, bullets, free text, and facts.
+  sections: [
+    { heading: 'Sources', bullets: ['Northwind launch channel', '3 partner email threads'] },
+    { heading: 'Output', text: 'One-page Word summary with inline citations.' },
+  ],
+
+  // Inline label/value pairs (still useful for compact metadata).
   facts: [
-    { label: 'Status', value: 'In Progress' },
-    { label: 'Priority', value: 'High' },
-    { label: 'Due', value: 'April 22' },
+    { label: 'Citations', value: '8 sources' },
+    { label: 'Saved to', value: 'Northwind / Launch /' },
   ],
-  actions: ['View in Jira'],         // rendered as inline link-style buttons
+
+  // Subtle metadata strip with a top divider — good for "Generated by..." lines.
+  footer: 'Generated by Cowork · Mon 9:11 AM',
+
+  // Link-style action buttons.
+  actions: ['Open in Word', 'Show citations'],
 }
 ```
 
-Real Adaptive Cards support richer elements (images, input fields, action sets, containers). Extend the renderer in `MessageRow.jsx` and the CSS in `ChatView.css` (`.adaptive-card` and `.card-*`) as the prototype needs them — match the [official Adaptive Cards samples](https://adaptivecards.microsoft.com/) for visual fidelity.
+Schema rules:
+- **Office-app icon tiles** (`iconType: 'word' | 'excel' | 'powerpoint' | 'outlook' | 'teams'`) render a 32px rounded-square tile with the brand color and capital letter — use them for **artifact cards** so generated deliverables read as M365 outputs at a glance. Pair with `accentColor` matching the brand color (`#2B579A` Word, `#217346` Excel, `#B7472A` PowerPoint, `#0078D4` Outlook, `#5B5FC7` Teams).
+- **Plan cards** should use `iconType: 'teams'`, `badge: { text: 'Awaiting approval', tone: 'amber' }`, and `steps` with all `status: 'pending'`. Use `actions: ['Approve & run', 'Edit plan']` (or similar) so the plan reads as a checkpoint.
+- **Artifact cards** (a deliverable Cowork produced) should use the matching Office `iconType`, a `subtitle` describing what the artifact is, optionally a `badge: { text: 'Ready', tone: 'green' }`, and a `footer: 'Generated by Cowork · <time>'`.
+- **Daily/recurring outputs** (digests, summaries, reports) should use `sections` with one heading per theme — preserves the "scannable, themed" reading pattern users expect from agent reports.
+
+Real Adaptive Cards support richer elements still (images, input fields, action sets, containers, choice sets). Extend the renderer in `MessageRow.jsx` and the CSS in `ChatView.css` (`.adaptive-card`, `.card-*`) as the prototype needs them — match the [official Adaptive Cards samples](https://adaptivecards.microsoft.com/) and the [design best-practices guide](https://adaptivecards.microsoft.com/?topic=design-best-practices) for visual fidelity.
 
 ## Teams and channels