Adds a durable persistence layer for @copilotkit/bot, replacing the
in-memory-only ActionStore with a pluggable StateStore.
- StateStore interface (kv/list/lock/dedup/queue) with a shared
conformance suite; MemoryStore default plus @copilotkit/bot-store-redis
and @copilotkit/bot-store-postgres backends.
- createBot({ store }): typed per-thread state via Standard Schema,
action snapshots persisted through the store, per-conversation turn
lock (onLockConflict drop|force), and inbound-event dedup keyed on a
stable eventId. ActionStore is kept as a deprecated alias.
- Cross-platform transcripts (bot.transcripts + identity resolver) with
age-bounded retention (prune on append + filter on read), and
runAgent({ transcript: true }) to auto-inject history and capture the
reply.
- createBot({ components }) re-registers components so durable actions
re-fire after a restart; restart-durability demo in examples/slack.
- Dedup is marked seen only after the turn lock is acquired, so a turn
dropped on lock-conflict does not burn its eventId (no lost retries).
- Release lockstep: bot-store-redis/postgres version with bot + bot-ui.
The opengenui route used the nonexistent model id "openai/gpt-5.2", causing
every chat turn to error. Switch to "openai/gpt-4o", the verified-real id used
by the sibling showcase/shell copilotkit route.
The example's API routes import @copilotkit/runtime/v2 (a server-only package),
but next.config.ts lacked serverExternalPackages, so Next.js attempted to bundle
it. Add serverExternalPackages: ["@copilotkit/runtime"] (base package name covers
the /v2 subpath), mirroring showcase/shell/next.config.ts.
Add display-only generative-UI the copilot renders on request:
- showPendingApprovals — the dashboard's interactive approval table, in chat
- showSpendingTrend, showBudgetUsage, showSpendBreakdown, showIncomeVsExpenses —
brand-styled charts (dependency-free, hand-rolled SVG/CSS)
- showApprovalFlow — a diagram of how an over-limit charge gets cleared
Registered globally in copilot-context (so they work on any route) and routed
via the agent prompt.
- Cards page: the credit-card grid compressed each card (wrapping the holder /
valid-thru text) when the chat panel narrowed the content area. It's now a
horizontal-scroll row — each card holds a 300px minimum and grows to fill on
wide screens, scrolling instead of squishing.
- overflow-x:auto forces overflow-y:auto, which clipped the cards' soft drop
shadows; matching negative-margin/padding pairs give the shadows room inside
the scroll viewport without moving the cards.
- Chat: space stacked HITL/action cards so consecutive cards no longer share an
edge (CopilotKit stacks them with no row-gap).
Adds a cookbook recipe + runnable showcase that gives the Built-in Agent
OAuth-backed Arcade tools (Gmail, Google News) and renders Arcade's one-time
authorization step as a generative-UI "Connect" card in the chat.
- docs: showcase/shell-docs/src/content/docs/cookbook/arcade.mdx (+ meta.json, index card)
- app: examples/showcases/arcade-tools (Next.js App Router, single-route runtime)
Co-authored-by: Cursor <cursoragent@cursor.com>
useCreditCards() kept per-instance React state and was called independently by
the dashboard page and by copilot-context (where the chat's approve / finalize /
open-exception tools live). A mutation made through one instance refetched only
itself — so when the agent approved an over-limit charge in chat, the dashboard
pending table kept showing it as pending until a manual reload.
Add a module-level revalidation bus: each useCreditCards() instance registers a
refetch callback, and every mutation calls notifyDataChanged() to fan a refetch
out to all live instances. The dashboard now reflects agent-driven approvals
immediately (verified: recall-approve in chat drops the charge from the pending
table with no reload).
Adds a "What each mode actually recalls" subsection to the demo README: in OSS
mode the taught workflow is recalled only within the same conversation (the
saved procedure is echoed back into that thread), so a brand-new chat won't know
it — that's expected. Cross-conversation persistence is what the external
Intelligence backend provides. Names the symptom explicitly so reviewers aren't
surprised when a new conversation "doesn't know" the workflow in OSS mode.
Rework the dashboard's Pending approval view and fix two approval-gate UX bugs
on the banking demo (PR #5266):
- Table layout: replace the center-stacked per-row card with a scannable table
(Merchant / Amount / Policy / Actions). Actions are check / x icon buttons plus
a "more actions" overflow menu holding File policy exception. Status is its own
column (Over limit / Cleared / Within limit), and Approve is gated until the
charge is actually clearable.
- Fix the table shrinking when the more-actions menu opens: the Radix menu is
modal by default and engaged react-remove-scroll, whose scrollbar compensation
reflowed the table. Set modal={false} (a row menu needn't be modal) and add
whitespace-nowrap to the status badges.
- Fix "cannot approve after filing an exception": the inline card offered all
codes, including non-justifying ones that set activeExceptionId (flipping the
row to Cleared) but never lift the server gate, so the approve 422'd silently.
The card exists to clear an over-limit charge, so it now offers only justifying
codes. The gate itself is unchanged.
Verified live in OSS dev: file (justifying) -> Cleared -> approve succeeds; the
menu opens without reflow; lint + build green.
The recorder was a floating HUD overlay, which read as a different UI element
from the in-chat cards (e.g. "Save this workflow?"). Fold the live step feed
into the demonstration card itself: the `awaitDashboardDemonstration` card is
now titled "Recording your workflow" (with a REC pulse), keeps the
non-directional copy, and embeds a reactive `<RecordingSteps/>` child that
narrates each captured action inside the card. Removes the floating panel and
its CSS. Same card chrome as the other cards, so it reads consistently in the
conversation.
`RecordingSteps` subscribes to the recording context itself (not via the host
card's render closure), so it updates live as each step is logged without a
stale-closure dep.
Address review feedback on the banking self-learning "teach a workflow" loop
(PR #5266):
- Recorder HUD: a floating "Recording your workflow" panel narrates each officer
action live (Opened Dashboard -> Opened Transactions -> Opened Pending approval
-> Opened the exception form -> Filed the policy exception -> Approved the
charge), driven by logStep on the nav / tab / file-exception / approve call
sites. New recording-feed.tsx; steps + logStep added to recording-context.
- Non-directional demonstration: the await card is retitled "Show me how" and no
longer lists the steps ("go ahead and do it yourself now and I'll watch and
learn"); the agent's spoken handoff is likewise generic.
- Fix the "nothing happens after I'm done" stall: the model sometimes asked
"should I save this?" in prose instead of calling saveLearnedWorkflow, leaving
no Save card to click. The await tool-result is now directive (call
saveLearnedWorkflow; the card is how you ask), reinforced in the prompt.
- Harden the ending: after saving, the agent treats the demonstrated charge as
already cleared and waits, instead of re-running the freshly-saved procedure
on it.
Verified end-to-end in OSS dev (taught Google Ads, recalled AWS); lint + build
green.
Rework the banking demo's teach-a-workflow loop so the officer demonstrates the
over-limit unlock on the actual dashboard instead of an inline chat card, and so
the first over-limit approve request no longer shows an approval card that fails.
When asked to approve an over-limit charge it has no saved procedure for, the
agent now declines and offers to record (no approval card). The officer opens the
new Dashboard -> Transactions -> Pending approval view, files a policy exception
and approves the charge there; a waiting card holds the chat until they click
"I'm done". The agent then saves the procedure and applies it itself to a
different over-limit charge.
Move the teach/recall HITL tools (offerWorkflowRecording,
awaitDashboardDemonstration, saveLearnedWorkflow, openPolicyException,
finalizePolicyException, approveTransaction) and the agent data/permission
readables into the global CopilotContext. A route-scoped registration unmounts
when the officer navigates to the dashboard, which drops the in-progress card and
prevents the followUp from firing; global registration survives navigation and
renders on every route.
The demonstrated exception code is captured via the recording context and handed
to the Save step, so the saved procedure names the exact code used. The agent
prompt is updated for the decline+offer and dashboard handoff, and still never
spells out the unlock or names a justifying code.
Verified end-to-end in OSS dev (lint + build green, gate smoke 3/3): Beat 1 shows
no card, the dashboard demonstration clears the Google Ads charge, and recall
clears the AWS charge via the learned procedure.
The self-learning recorder POSTs to the annotate endpoint, which only exists with an
Intelligence backend; in OSS mode it returns 422. Call sites logged that rejection with
console.error, which Next.js 16 surfaces as a full-screen dev error overlay mid-demo even
though the failure is expected and harmless.
Swallow the failure in the recorder seam (useRecordUserActionInCurrentThread): catch it and
log quietly via console.debug instead of letting it reject. Recording stays best-effort — a
no-op without an Intelligence backend, and unchanged (records normally) with one.
Drive the FOR-137 self-learning story as an agent-orchestrated, narrated loop. When an
over-limit approval is rejected, the agent offers to record a workflow; the officer
demonstrates by filing a policy exception; the agent summarizes and saves the procedure;
then it applies that procedure itself to a different over-limit charge. Same-session recall
works by echoing the learned procedure back into the thread.
page.tsx: three new human-in-the-loop tools (offerWorkflowRecording,
recordExceptionDemonstration, saveLearnedWorkflow) plus a transactions agent-readable so the
agent resolves a charge the user names to the right id instead of guessing.
openPolicyException now returns the new exception id, and the agent-driven exception tools
are followUp:true so the recall chain (open then finalize then approve) does not stall.
route.ts: TEACH & RECALL prompt rules and an ACTION DISCIPLINE carve-out. The prompt does
not restate the unlock procedure, preserving the learning invariant.
policy-exception-inline.tsx: surface the demonstrated exception code via onFiled(code).
scripts/over-limit-gate-smoke.mjs: regression guard proving only a finalized
justifying-code exception lifts the policy-limit gate.
Verified end-to-end in OSS dev mode (lint and build green): the demonstration clears the
Google Ads charge and recall clears the AWS charge with a single successful approve.
Rewire the before-first-message suggestion pills to drive the FOR-137
self-learning story: (1) the teachable over-limit ask, (2) surface the pending
charges so the officer can demonstrate the unlock, (3) recall on a different
over-limit charge on a fresh thread. Titles stay symptom-only so they do not
hint at the exception path the agent is meant to learn on its own.
The banking demo's human-in-the-loop tools registered their render in a
mount-keyed effect (useFrontendTool), so without a deps array the render
closure froze on the EMPTY initial cards/policies/transactions. Those arrays
load async after mount, so the registered render kept filtering empty data:
showAndApproveTransactions painted a card with no rows (the agent-driven
approve flow appeared to do nothing), and assignPolicyToCard / setCardPin /
addNoteToTransaction showed raw ids instead of the resolved card/transaction.
Pass the data each render reads as the useHumanInTheLoop deps so it
re-registers when that data loads, mirroring the existing selectCard and
showTransactions (useComponent) deps. addNewCard / openPolicyException /
finalizePolicyException render their args only, so they are left as-is.
Verified against unmodified workspace react-core: the agent-driven approval
card now renders the Google Ads charge with its over-limit badge and the
file-exception action instead of a blank card.
The model answered 'show me the unapproved transactions' with one
showAndApproveTransactions call per pending transaction (parallel tool
calls). Parallel calls to the same useHumanInTheLoop tool wedge the
render at inProgress, nobody can respond, and the thread is then
poisoned — every later run fails with 'Tool results are missing for
tool calls …'. Make the tool take a comma-separated id list and
instruct the model to call it exactly once; the renderer's existing
string .includes() filter was already written for a combined call.
(An array schema renders an empty tool slot — react-core issue — so
the param stays a string.)
Verified live in OSS mode: single call streams complete args +
RUN_FINISHED, the approval card renders with per-row Approve/Deny,
deny fires the recording vignette (data-recording=true) and POSTs
/annotate; over-limit approve is rejected by the server gate as
designed. In Intelligence mode the BFF /annotate path records 200.
The unavailable-actions agent context had an unconditional "the user does
not have permission to perform these actions" description. For Admins the
list is empty, and the model read the menacing description plus "[]" as a
blanket prohibition — refusing showAndApproveTransactions and every other
gated tool even though they were forwarded with the run. Reframe the
description so an empty list explicitly means no restrictions and refusals
are only allowed for listed actions.
Verified live in Intelligence mode: before, the agent answered "you don't
have permission" as Admin; after, it calls showAndApproveTransactions
(wire capture shows the corrected context and the tool call).
scripts/self-learning-smoke.mjs proves the banking demo's recording seam
end-to-end against a running Intelligence backend: posts four teaching
actions through the demo BFF /api/copilotkit/annotate (the platform
requires UUID clientEventIds), optionally runs one sl-worker sweep when
INTELLIGENCE_REPO is set, and asserts the distilled vendor policy reads
back through the platform /mcp knowledge tool. Wired as the
test:self-learning package script and documented in the README.
Verified live: PASS 6/6 against Intelligence @ mme/learn-from-user-activity
(records as rows 13-16, sweep editCount=0 steady-state, recall returns the
pre-cleared vendor policy).
next lint was removed in Next 16, so the demo's lint script failed before
linting anything. Switch to eslint . with a flat eslint.config.mjs built on
eslint-config-next's native flat exports (same shape as the other Next 16
example apps), and fix the findings the new react-hooks rules surfaced:
- actions.ts / team/actions.ts: wrap mount fetches in an async IIFE so
set-state-in-effect can see the setState calls are asynchronous
- auth-context: derive currentUser from selection ?? team[0] instead of
syncing state in an effect
- use-theme: lazy-init theme from localStorage (SSR-guarded) and apply the
DOM class in an effect keyed on theme; hoist applyTheme to module scope
- threads-drawer: copy timeout maps to locals inside the effect so cleanup
does not read refs that may have changed
The 'Known gap' section predated the recording fix: the hook exists as
useLearnFromUserActionInCurrentThread and record-user-action.ts is now a
real adapter. Document the /annotate flow and the backend route
requirement (/connector/annotate) instead.
Dashboard, copilot chat panel, and the learning-mode recording vignette
(the violet glow shown while an officer demonstration is being recorded).
PNGs are LFS-tracked per the repo .gitattributes.
Replace the no-op recorder shim with a real adapter over the v2 hook
(renamed from useRecordUserActionInCurrentThread in #4839/#5073): call-site
{title, description, previousData, newData, metadata} maps to the hook's
{title, description, data: {previous, next, metadata}}, with threadId
sourced from the surrounding chat config provider.
Add an optional INTELLIGENCE_USER_ID / INTELLIGENCE_USER_NAME override to
identifyUser for backends that enforce org membership of the asserted user
(e.g. a local Intelligence stack with seeded fixture users); the default
remains the derived northwind-<role> identity. Documented in the README.
Verified end-to-end against Intelligence @ mme/learn-from-user-activity
(PUT /connector/annotate): record -> cpki.sl_annotations -> sl-worker
distill -> /project knowledge file -> recall via /mcp. Recording requires a
backend that exposes /connector/annotate; the OSS default path
(InMemoryAgentRunner, no INTELLIGENCE_* env) is unchanged.
New users were still discovering cloud.copilotkit.ai through docs pages,
the README, example READMEs, and in-app banners/console messages. Replace
all user-facing web links with dashboard.operations.copilotkit.ai (the
destination the marketing-site CTAs already use). Functional API endpoints
(api.cloud.copilotkit.ai) are deliberately untouched since existing cloud
customers depend on them.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Left over from instrumenting the HITL render lifecycle while verifying that
clicking a card in the in-chat picker resolves `respond()` and triggers the
agent's continuation run.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Teach-mode UX (staged on the no-op recorder shim, ready for the live hook):
- Suggested-prompt pill leads the welcome screen — "Approve the $5,000
Marketing transaction" — a one-click path straight into the
over-policy-limit gate (seed t-1: Google Ads -$5,000, Marketing limit
$5,000 / spent $500). The same pill drives both halves of the arc:
fails pre-learning, succeeds post-learning.
- Pulsating violet recording vignette frames the canvas while the officer
is teaching. Ref-counted around every `recordUserAction` call so it
stays continuous across opened+finalized; minimum 1.2s visible duration;
non-blocking; static fallback under prefers-reduced-motion. Mounted at
z-1300 to read clearly even over the docked chat panel.
- Inline policy-exception card replaces the popup modal: the officer's
whole demonstration (see symptom → file exception → record) now
happens in the chat as a single HITL card, with identical REST
callers and identical `policy_exception.opened`→`finalized` recording
payloads to the old modal.
CK v2 provider fix:
- Swap the v1 `CopilotKit` compatibility bridge for the v2-native
`CopilotKitProvider`. The bridge wraps the chat in a heavier stack
(ThreadsProvider + a second CopilotChatConfigurationProvider + listeners);
that churn re-fires CopilotChat's /connect effect cleanup mid-run, and
the cleanup calls AG-UI `detachActiveRun()` — which silently tears down
the in-flight run the instant the agent emits a frontend HITL tool call.
Symptom was a clean run with no error but no HITL render. With
CopilotKitProvider the `/connect` storm and ERR_ABORTED are gone and
runs complete cleanly. The inbox keeps working because v2 `useThreads`
reads CopilotKitProvider's own context.
- `reactStrictMode: false` in next.config to remove the dev double-mount
that aggravates the same teardown class. Production unaffected.
Other:
- Switch model to `openai/gpt-5.4-mini-2026-03-17` (verified reachable;
same tool-calling surface).
- Add `selectCard` HITL tool + visual `CardPicker` (in-chat brand+last4
picker) so card-targeted flows (PIN, policy assign) get a visual
picker instead of a text list.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
examples/showcases/teach-mode/ was a stray, non-runnable folder under examples/showcases (which is for runnable showcases). Moved the cookbook (README), LEARNING-TRACK-PLAN, and verify-teachable-gate.sh into examples/showcases/banking/docs/teach-mode/, dropped the duplicate record-user-action.ts (the demo's real seam lives at src/lib/record-user-action.ts), and fixed internal references.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Continues the closed draft #5183 on top of the merged #5180. Adds: v2 Threads as a docked chat side panel + inbox; the self-learning teachable policy-exception gate (symptom-only over-limit gate, justifying-exception unlock, recipe withheld; OSS default, env-gated CopilotKitIntelligence); the Aurora design system; a reusable teach-mode cookbook (examples/showcases/teach-mode/); and a learning-track plan. 53 files, scoped to examples/showcases/{banking,teach-mode}.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Northstar AI CRM — a full-featured agentic sales CRM for an enterprise
hardware seller, built with CopilotKit, the AG-UI protocol, and a
TypeScript Strands agent (@strands-agents/sdk + @ag-ui/aws-strands).
The first TypeScript Strands example under examples/.
Highlights:
- Agentic canvas: tool calls render on the workspace — quote approval
opens a quote page; analyze_team and generate_weekly_report open
dedicated report pages; frontend tools navigate the workspace.
- Generative UI cards, human-in-the-loop follow-up approval, and a live
STATE_SNAPSHOT that syncs a SQLite CRM store with the board,
dashboard, and report pages.
- Dashboard, pipeline (Kanban), products, team, and reports surfaces.
Self-contained under examples/showcases/strands-crm with an agent/ +
frontend/ split and a concurrently dev script; listed in
examples/README.md.
## Summary
Makes the `examples/showcases/banking/` SaaS demo customer-ready by
migrating it to **CopilotKit v2** and polishing it into a credible,
reliable reference. Closes the non-memory gaps from FOR-133's assessment
(FOR-138).
- **v2 migration**: v2 Hono runtime route (`BuiltInAgent` +
`createCopilotHonoHandler` + `InMemoryAgentRunner`), `CopilotKit`
provider + `CopilotPopup`, hooks moved to `@copilotkit/react-core/v2`
(`useAgentContext`, `useHumanInTheLoop`, `useComponent`, Zod params), on
`workspace:*` packages.
- **File-backed data store**: domain data in `src/data/seed.json` behind
a typed `src/lib/store.ts` (in-memory, resets to seed on restart). Clean
seam left for the memory track (FOR-137).
- **Credible identity + data**: Northwind Finance / Alex Morgan /
`@northwind.example`, refreshed transaction dates + future card
expiries, `Intl` currency formatting.
- **Dropped** the SQL page + fake-MSA RAG feature (and committed
ServiceNow secret) — focused fintech story.
- **Framework/build**: Next 16 async route `params`, Tailwind v4 (so the
v2 stylesheet imports normally), correct `next`/`react` versions, single
lockfile, accurate v2 README.
- **Tests**: LLM-free Playwright smoke test (also fails on
hydration/uncaught errors).
## Verified live (real OpenAI key)
Full golden path works end-to-end: chat renders → "show transactions for
card 4242" renders the generative-UI list → "add a card" → HITL approval
card → Approve → new card appears in the grid. 0 console errors. Build +
typecheck + smoke test green; no committed secrets.
Three v2 chat-rendering bugs were found and fixed by running it live:
use the full `CopilotKit` provider (not the low-level
`CopilotKitProvider`, which omits `ThreadsProvider`); set
`useSingleEndpoint={false}` to match the multi-endpoint route; and use
`useComponent` with a `deps` array for display-only generative UI
(avoids a stale-closure empty render).
## Non-goals (deliberately out of scope)
- Real auth.
- Conversation threads + long-term/self-learning memory → FOR-137.
- Deleting the duplicate `enterprise-brex` demo + repointing its deploy.
## Test plan
- [ ] `pnpm --filter demo-saas-copilot build` succeeds
- [ ] `pnpm --filter demo-saas-copilot exec tsc --noEmit` clean
- [ ] `pnpm --filter demo-saas-copilot test:e2e` passes
- [ ] With `OPENAI_API_KEY` set: run the golden path (transactions
gen-UI, add-card HITL → approve → grid update)
## Known minor follow-ups
- Removing deprecated `showDevConsole` surfaces the v2 Web Inspector /
announcement banner.
- Newly-added cards get a near-term generated expiry.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
The static/quality format job runs in check mode on push and was failing
on main: `ruff format --check .` flagged 5 unformatted Python files under
examples/showcases/a2ui-pdf-analyst/agent (main.py, src/dynamic_agent.py,
src/fixed_agent.py, src/multimodal_middleware.py, src/pdf_tools.py). The
oxfmt JS/TS check already passes, so this is ruff-only drift. Applied
`ruff format` (pinned 0.15.13, matching CI); diff is formatting-only.
Display-only generative UI must use useComponent (not useFrontendTool): its
render is unconditional so the card persists after the tool call completes.
Also pass [transactions, cards] as deps so the renderer re-registers when the
data loads -- otherwise the closure captures the initial empty transactions
and the list renders empty.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
The migration mounted the low-level CopilotKitProvider, which omits the
ThreadsProvider that holds the rendered message thread, so the agent ran but
the transcript stayed empty. Use the full CopilotKit provider, and set
useSingleEndpoint={false} to match the multi-endpoint Hono route (the default
single-endpoint transport 404s against it).
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
- cards PUT handler: stop console.info'ing the request body, which
included the plaintext PIN on every PIN-change request.
- wrapper.tsx: drop the duplicate ./globals.css import (already
imported in app/layout.tsx, which is the canonical place).
- copilot-context.tsx: replace window.location.pathname read during
render with usePathname() from next/navigation, matching how
components/layout.tsx already derives the current route.
- next.config.mjs: remove the eslint.ignoreDuringBuilds block — Next 16
no longer runs ESLint at build, and the key now produces an
"Unrecognized key(s): 'eslint'" warning. Confirmed warning is gone.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
package.json was pinning next@14 / react@18, but the root pnpm.overrides
were already forcing next@16 / react@19 at install time and the code uses
Next 16 async params. Bump the declared ranges to ^16.0.10 / ^19 (and
@types/react{,-dom} to ^19) so the manifest matches reality and matches
the v2 reference demos (mcp-apps, generative-ui-playground).
Also drop examples/showcases/banking/pnpm-lock.yaml: the demo is a
workspace package (listed in root pnpm-workspace.yaml and resolved in the
root pnpm-lock.yaml), so the per-demo lockfile was vestigial v1 cruft
that contradicted the v2 migration.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Replace v1-era hooks/data references with the actual v2 surface:
useAgentContext / useFrontendTool / useHumanInTheLoop from
@copilotkit/react-core/v2, the Hono runtime route, the seed.json + store
data layer, and the Northwind identity. Drop mentions of removed
SQL/MSA/ServiceNow/RAG features.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Remove the /Hydration/i pattern from the ignored-console-errors filter so
Next.js hydration mismatches surface as real failures, and add a
page.on("pageerror", ...) listener that records uncaught exceptions and
asserts none occurred. pageerrors are not filtered — any uncaught
exception fails the smoke test.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Adds a CI-safe Playwright smoke test that verifies the banking showcase
boots and the CopilotKit v2 popup opens with its configured suggestion
pills, without invoking the agent (so it runs in CI without secrets).
Covers:
- Document title shows the Northwind Finance brand
- Credit-cards dashboard renders ("Credit Cards" heading)
- CopilotPopup launcher opens the dialog (Northwind Copilot)
- Three suggestion pills render: View transactions, Add a card,
Assign a policy
The dev server gets a dummy OPENAI_API_KEY so the runtime route boots,
but the test never sends a chat message or clicks a suggestion.
.gitignore: ignore test-results/, playwright-report/, and
tsconfig.tsbuildinfo so they don't become clutter.
Banking was on Tailwind v3, which made the pre-compiled v2 stylesheet
(`@copilotkit/react-core/v2/styles.css`, built as Tailwind v4 output)
incompatible with the PostCSS pipeline. A temporary inline-CSS hack in
`layout.tsx` worked around this. Migrate to Tailwind v4 to match the
canonical v2 demos and remove the hack.
- package.json: tailwindcss ^4, add @tailwindcss/postcss ^4, replace
tailwindcss-animate with tw-animate-css (v4 drop-in)
- postcss.config.mjs: switch plugin to @tailwindcss/postcss
- globals.css: use @import "tailwindcss" + @import "tw-animate-css";
add @custom-variant dark for the existing .dark/.light class toggle;
move shadcn color/radius mapping into @theme inline (preserves
bg-background/text-foreground/rounded-{lg,md,sm} semantics)
- tailwind.config.ts: deleted; theme now lives in CSS
- components.json: clear stale tailwind.config reference
- layout.tsx: drop the readFileSync/dangerouslySetInnerHTML inline-CSS
workaround; import "@copilotkit/react-core/v2/styles.css" the normal
way alongside ./globals.css
Verified: tsc clean, next build clean, Playwright-rendered all four
pages (/, /dashboard, /cards, /team) with computed-style checks
(sidebar bg-gray-900 dark, rounded-lg=8px, .border=1px) and opened
the copilot popup which renders fully styled with the v2 stylesheet.
The banking showcase was migrated to CopilotKit v2 but `src/app/layout.tsx`
still imported the removed `@copilotkit/react-ui/styles.css`, causing every
route to 500 with "Module not found". Drop the dead import.
Banking is still on Tailwind v3, while the v2 stylesheet
(`@copilotkit/react-core/v2/styles.css`) is pre-compiled Tailwind v4 output
containing bare `@layer base { ... }` rules. Tailwind v3's PostCSS plugin
rejects `@layer base` without a matching `@tailwind base` directive, so any
CSS import routed through the JS/TSX pipeline fails the build. Move the v2
stylesheet load to a server-side `fs.readFileSync` + inline `<style>` tag in
the root layout so the CSS reaches the browser without passing through
PostCSS / Tailwind v3. This avoids a full Tailwind v4 migration of the app.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
- Replace toy team names and @example.com emails with credible
professional names and @northwind.example addresses (preserve ids,
roles, team assignments). Default Admin is Alex Morgan.
- Set <title> metadata to IDENTITY.brand (Northwind Finance).
- Add formatCurrency helper in lib/utils.ts and route all money
rendering (transactions list, credit-card details, dashboard +
cards summary tiles) through it so amounts always render as
$10,000.00 / -$1,000.00.
- Instruct the Northwind Copilot prompt to treat the rendered
showTransactions list as the single source of truth so prose no
longer restates counts/totals and contradicts the rendered list.
- Remove stray console.log and tighten == to === in components/layout.tsx.
Replace the in-memory `data` literal in `api/v1/data.ts` with a
file-seeded, module-singleton store:
- `src/data/seed.json` holds the seed (cards, team, policies,
transactions) with refreshed dates (within ~60 days of 2026-06-02)
and valid future card expiries.
- `src/lib/store.ts` deep-clones the seed at module init and exposes
typed read accessors (cards/team/policies/transactions, findCard,
findPolicy, findTransaction) plus the exact mutator set the routes
use (addCard, updateCardPin, assignPolicyToCard, addPolicy,
updateTransaction, addMember, updateMember, removeMember).
- All `src/app/api/v1/**/route.ts` files now read/write through the
store. `data.ts` retains the shared interfaces/enums/CARD_COLORS/
generateUniqueId and drops the literal `data` constant.
- Mutations persist for the running server process and reset to seed
on restart (intentional demo behavior; no disk write-back).
- Domain-data only — conversation threads/memory live in a separate
ticket (FOR-137).
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
GeneralJerel