Spec — AI artifact panel

Pattern: Claude Artifacts. Consumer principal: Kortex workspace roadmap. Reusa code-block.kmd (#109) e KVG (existente) como renderers internos.

Princípios

1. Adaptive layout — side panel em desktop/web; bottom sheet em mobile (per app-layout/canonical-layouts.kmd window-size-classes).
2. Live edit — user edita; AI recebe diff context próxima mensagem (não real-time WebSocket; explicit submit).
3. Type-specific renderers — code / KVG / markdown / HTML / mermaid; extensível via plugin registry.
4. Versioning linear — history per artifact; rollback. Sem branching (manter simples).

R1 — Anatomia

Desktop layout (Expanded width-class):

┌─────────────────────────────────┬──────────────────────────────┐
│  Chat (60%)                     │  Artifact Panel (40%)        │
│                                 │ ┌──────────────────────────┐ │
│  [user bubble]                  │ │ artifact_title    [actions]│ │
│  [assistant bubble]             │ ├──────────────────────────┤ │
│   "Here's a chart..."           │ │ [tab: Code | Preview | Diff] │ │
│   [artifact thumbnail]          │ ├──────────────────────────┤ │
│                                 │ │                          │ │
│                                 │ │ [rendered content]       │ │
│                                 │ │                          │ │
│                                 │ ├──────────────────────────┤ │
│                                 │ │ [edit] [download] [share]│ │
│                                 │ └──────────────────────────┘ │
└─────────────────────────────────┴──────────────────────────────┘

Mobile layout (Compact width-class): bottom sheet com handle drag; expands fullscreen via swipe-up.

Slots:

R2 — Artifact types (v1)

Plugin extension: produtos podem registrar renderers custom via koder_kit/plugin_registry:

KoderArtifactRegistry.register(
  type: "kortex.chart",
  renderer: (data) => KortexChartWidget(data: data),
);

R3 — Tabs

• Code: source view (default for code, markdown, html, mermaid).
• Preview: rendered output (default for kvg; available for HTML/markdown/mermaid).
• Diff: shows changes vs. previous version (visible only when version > 1).

Tab persistence: per-artifact per-session.

R4 — Live edit

Edit toggle button puts panel into edit mode:

• Code/markdown/html/mermaid: monospace editor (CodeMirror/Monaco-equivalent).
• KVG: structured editor (drag/edit handles).

On save:

• New version persisted (R5 versioning).
• Status chip "Edited by user" no chat bubble that spawned this artifact.
• Next user prompt automatically includes diff context: AI sees <artifact_diff>...</artifact_diff> block.

R5 — Versioning

Linear history:

v1 (created) → v2 (AI edit) → v3 (user edit) → v4 (AI edit) → ...

• Each version: timestamp + author (user_id or "ai:") + delta.
• Rollback: tap version → preview → confirm restore (creates new version pointing to that state, doesn't delete history).
• Max kept versions per artifact: 50 (configurable per workspace; older snapshot-pruned).

R6 — Download + share

• Download: file with appropriate extension (.kvg, .md, .html, .mmd, .dart, etc.).
• Share via Hub: publish to hub.koder.dev/artifacts/<slug>; private vs public toggle; share link copy.

R7 — Surface bindings

R8 — Acessibilidade

• Panel é role="region" aria-label="Artifact: {title}".
• Tabs: role="tablist" + role="tab" + aria-controls.
• Editor: integrates surface keyboard editing semantics.
• Live region announce version changes.
• Reduced-motion: panel transition instant.

R9 — Multi-tenant + persistência

• Artifact storage per (koder_user_id, workspace_id, artifact_id).
• Hub publishing crosses tenant boundary only with explicit public: true flag.
• Versions retained per policies/identity-data-retention.kmd.

R10 — i18n

R11 — Per-preset variation

Per-preset cards estilo + footer. Same content; cosmetic only.

T-suite

• T1 Mount: open artifact → panel rendered with title + Code tab default (or Preview for KVG).
• T2 Adaptive layout: window Expanded → side panel; window Compact → bottom sheet.
• T3 Tab switch: tap Preview → renders preview pane.
• T4 Edit: tap Edit → editor mode; modify; save → new version v2 created.
• T5 Diff: v2 exists → Diff tab visible; renders side-by-side or unified.
• T6 Version restore: tap v1 → confirm → new v3 == v1 content.
• T7 Plugin renderer: register custom type → artifact of that type uses custom renderer.
• T8 Download: correct file extension + content.
• T9 Share to Hub: public toggle → artifact accessible at hub URL.
• T10 Live edit diff context: edit artifact → next user prompt includes diff block in gateway request.
• T11 A11y: tablist navigation via arrow keys; screen reader announces version transitions.
• N1 Cross-tenant: artifact from workspace A not loadable em workspace B (404).

Cross-link

• Companion: code-block.kmd, chat-message-bubble.kmd (spawn point), KVG specs
• Layout: app-layout/canonical-layouts.kmd (window-size-classes)
• Policies: multi-tenant-by-default.kmd, identity-data-retention.kmd
• Plugin registry: engines/sdk/koder_kit/lib/src/plugin_registry/
• Refs: Claude Artifacts, assistant-ui Artifacts example