AI artifact panel

mandatory

Side panel split-screen (desktop/web) or bottom sheet (mobile) for AI-generated artifacts: code, KVG, markdown, HTML, mermaid diagrams. Live edit with diff context to AI on next message. Plugin renderer registry via koder_kit/plugin_registry. Claude Artifacts pattern.

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

*daptive layout*— side panel em desktopweb; bottom sheet em mobile (per `app-layoutcanonical~~layouts.kmd` window~~size-classes).
*ive edit*— user edita; AI recebe diff context próxima mensagem (não real-time WebSocket; explicit submit).
*ype-specific renderers*— code / KVG / markdown / HTML / mermaid; extensível via plugin registry.
*ersioning 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:

Slot	Content
Title	artifact title (AI~~generated or user~~renamed)
Tabs	Code / Preview / Diff (when applicable)
Body	rendered per R2
Footer actions	Edit toggle / Download / Share via Hub

R2 — Artifact types (v1)

Type	Renderer
`code`	`code-block.kmd` (#109) com tabs Code/Preview se language permite (HTML preview, Mermaid render)
`kvg`	KVG renderer existente (`engines/sdk/koder_kit/lib/src/kvg/`) — declarativo + interativo
`markdown`	Rendered markdown (formatted) + Raw toggle
`html`	Sandboxed iframe (Web) ou WebView restricted (Flutter) + Raw toggle
`mermaid`	Mermaid diagram render + Raw toggle

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

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

R3 — Tabs

*ode* source view (default for code, markdown, html, mermaid).
*review* rendered output (default for kvg; available for HTMLmarkdownmermaid).
*iff* 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:

Codemarkdownhtmlmermaid: monospace editor (CodeMirrorMonaco-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:model") + 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).

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

R7 — Surface bindings

Surface	API
Flutter	`KoderArtifactPanel({required artifact, onEdit, onDownload, onShare})` em `koder_kit/lib/src/ai/artifact_panel.dart`
Web	`<koder-artifact-panel artifact-id="...">` em `koder_web_kit`
Compose Android	`KoderArtifactPanel` (futuro)
SwiftUI iOS	idem (futuro)
CLI / TUI	Artifacts referenced inline; no panel; `koder artifact view <id>` opens em browser/editor

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

Key	en-US	pt-BR
`ai.artifact.tab.code`	"Code"	"Código"
`ai.artifact.tab.preview`	"Preview"	"Visualização"
`ai.artifact.tab.diff`	"Diff"	"Diff"
`ai.artifact.action.edit`	"Edit"	"Editar"
`ai.artifact.action.download`	"Download"	"Baixar"
`ai.artifact.action.share`	"Share"	"Compartilhar"
`ai.artifact.version.current`	"v{n} · current"	"v{n} · atual"
`ai.artifact.version.restore`	"Restore this version"	"Restaurar esta versão"
`ai.artifact.edited_by_user`	"Edited by you"	"Editado por você"

R11 — Per-preset variation

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

T-suite

*1*Mount: open artifact → panel rendered with title + Code tab default (or Preview for KVG).
*2*Adaptive layout: window Expanded → side panel; window Compact → bottom sheet.
*3*Tab switch: tap Preview → renders preview pane.
*4*Edit: tap Edit → editor mode; modify; save → new version v2 created.
*5*Diff: v2 exists → Diff tab visible; renders sidebyside or unified.
*6*Version restore: tap v1 → confirm → new v3 =v1 content.
*7*Plugin renderer: register custom type → artifact of that type uses custom renderer.
*8*Download: correct file extension + content.
*9*Share to Hub: public toggle → artifact accessible at hub URL.
*10*Live edit diff context: edit artifact → next user prompt includes diff block in gateway request.
*11*A11y: tablist navigation via arrow keys; screen reader announces version transitions.
*1*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