jwc-global

Direct answer: make this an explicit AI UI sourcing contract before implementation.

What needs to happen:

  1. Lock the source rule

    • Primary: https://elements.ai-sdk.dev/
    • Secondary: https://www.assistant-ui.com/
    • No shadcn.io AI blocks, HeroUI AI, OpenHands AI chat UI, random templates, or copied AI component patterns unless they are only non-AI shell/layout references.
  2. Create a component-source ledger For every AI-related surface, record:

    • needed surface: chat, prompt input, reasoning, tool call, sources, artifact, file tree, terminal, task queue, checkpoint, schema display, etc.
    • primary AI Elements component/example URL
    • if unavailable, assistant-ui fallback URL
    • screenshot/reference image path
    • adaptation note: tokens, layout, behavior, accessibility
  3. Use AI Elements IDE as the primary workbench reference The target surface is:

    • left: file/artifact tree
    • center: Monaco editor/diff plus terminal
    • right: AI chat/reasoning/tool/source panel

    AI Elements already has the matching IDE example, so that becomes the default design cue.

  4. Store visual references under E:\kai-chattr\docs\images

    That folder exists and already has Claude Code / VS Code reference screenshots. Add AI Elements captures there, preferably in a subfolder like: E:\kai-chattr\docs\images\ai-elements\

  5. Implement through wrappers, not raw scattering Install/copy AI Elements into local component files, then wrap them in JWC/KAI components:

    • components/ai-elements/* = vendor/source-copied primitives
    • components/workbench/* = product-specific composition
    • Monaco replaces CodeBlock where editing/diffing is required
  6. Fallback rule Assistant-ui is allowed only when the ledger says: "AI Elements does not provide this component/cue." Otherwise AI Elements wins, even if assistant-ui has a nicer version.

Verified against current docs: AI Elements is shadcn/ui-based, React 19 / Next App Router / Tailwind v4 compatible, and includes the workbench-relevant components; assistant-ui is a React AI chat/component/runtime system and should stay secondary.