Use @kenn-io/kata-ui to embed Kata issue details
mainThe @kenn-io/kata-ui package provides Svelte components for rendering read-only Kata issue details within trusted hosts.
Key Architectural Principles:
- No Networking/Routing: The package does not perform network requests, manage routing, or own persistence state. The host application is responsible for fetching data.
- Data Flow: The host must fetch a canonical Kata issue-detail response, verify its compatibility using
supportsKataAPISchema, transform it usingprojectIssueDetail, and then pass the resulting model to theIssueDetailcomponent. - Security: The package only receives Kata wire data and host-supplied callbacks. Do not expose daemon bearer tokens or browser-session headers to the package. All data fetching should occur through an authenticated backend or credential broker.
<script lang="ts">
import {
IssueDetail,
projectIssueDetail,
supportsKataAPISchema,
type KataIssueDetailModel,
type KataIssueDetailWire,
} from '@kenn-io/kata-ui'
let {
apiSchemaVersion,
wire
}: {
apiSchemaVersion?: string;
wire: KataIssueDetailWire
} = $props()
const compatible = $derived(supportsKataAPISchema(apiSchemaVersion ?? ''))
const detail: KataIssueDetailModel | undefined = $derived(
compatible ? projectIssueDetail(wire) : undefined,
)
</script>
{#if detail}
<IssueDetail {detail} />
{:else}
<p>This Kata daemon is not compatible with the embedded issue detail.</p>
{/if}