@g9tm/aiassistant-svelte 0.0.0-stage → 1.0.0

package/dist/pages/admin/AdminModels.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+  // The "Models" group: providers (from a preset, a key sent once, a test that reads the models), the host's
+  // backends with their usage windows, and the gateway's keys (a key shown once) and its request log.
+  import { AdminClient, adminTexts } from "@g9tm/aiassistant/admin";
+  import type { ProviderView, WindowSetView } from "@g9tm/aiassistant/admin";
+  import { useUi } from "../../context.js";
+
+  let { level = "app" }: { level?: string } = $props();
+  const ui = useUi();
+  const t = adminTexts(ui.texts).t;
+  const admin = new AdminClient(ui.assistant.api);
+  let providers = $state<ProviderView[]>([]);
+  let presets = $state<{ id: string; baseUrl: string }[]>([]);
+  let backends = $state<{ id: string; state: string; until: string | null; usage: WindowSetView | null }[]>([]);
+  let keys = $state<{ id: string; name: string; revoked: boolean; lastUsedAt: string | null }[]>([]);
+  let log = $state<{ count: number; errors: number; tokens: number }>({ count: 0, errors: 0, tokens: 0 });
+  let preset = $state("");
+  let newId = $state("");
+  let secret = $state("");
+  let keyName = $state("");
+  let shown = $state<string | null>(null);
+  let error = $state<string | null>(null);
+
+  async function load(): Promise<void> {
+    try {
+      const p = await admin.providers();
+      providers = p.providers;
+      presets = p.presets;
+      backends = await admin.backends().catch(() => []);
+      keys = await admin.gatewayKeys().catch(() => []);
+      log = await admin.gatewayRequests(1).catch(() => ({ count: 0, errors: 0, tokens: 0, rows: [] }));
+      error = null;
+    } catch (e) {
+      error = e instanceof Error ? e.message : "error.network";
+    }
+  }
+  $effect(() => { void load(); });
+
+  async function add(): Promise<void> {
+    const id = (newId || preset).trim();
+    if (!id) return;
+    try {
+      await admin.saveProvider(id, { preset: preset || undefined, secret: secret || undefined, level });
+      secret = "";
+      newId = "";
+      await load();
+    } catch (e) { error = e instanceof Error ? e.message : "error.network"; }
+  }
+
+  async function test(id: string): Promise<void> {
+    try { const p = await admin.testProvider(id); providers = providers.map((x) => (x.id === id ? p : x)); } catch (e) { error = e instanceof Error ? e.message : "error.network"; }
+  }
+
+  async function makeKey(): Promise<void> {
+    if (!keyName.trim()) return;
+    try { shown = await admin.createGatewayKey(keyName.trim()); keyName = ""; await load(); } catch (e) { error = e instanceof Error ? e.message : "error.network"; }
+  }
+</script>
+
+{#if error}<p class="g9a-note" role="alert">{t("error.network")}</p>{/if}
+<h4>{t("admin.providers")}</h4>
+<ul>
+  {#each providers as p (p.id)}
+    <li data-state={p.state}>
+      <strong dir="ltr">{p.id}</strong> · {p.state} · {p.level} · <span dir="ltr">{p.route}</span>{#if p.defaultModel} · <span dir="ltr">{p.defaultModel}</span>{/if} · {p.models.length}
+      <button type="button" onclick={() => test(p.id)}>{t("admin.test")}</button>
+      <button type="button" onclick={async () => { await admin.deleteProvider(p.id).catch(() => undefined); await load(); }}>{t("admin.remove")}</button>
+    </li>
+  {/each}
+</ul>
+<form class="g9a-row" onsubmit={(e) => { e.preventDefault(); void add(); }}>
+  <select bind:value={preset} aria-label={t("admin.providers")}>
+    <option value="">—</option>
+    {#each presets as x (x.id)}<option value={x.id}>{x.id}</option>{/each}
+  </select>
+  <input dir="ltr" bind:value={newId} placeholder="id" aria-label="id" />
+  <input dir="ltr" type="password" bind:value={secret} placeholder={t("admin.secret")} aria-label={t("admin.secret")} autocomplete="off" />
+  <button type="submit">{t("admin.add")}</button>
+</form>
+
+{#if backends.length > 0}
+  <h4>{t("admin.backends")}</h4>
+  <ul>
+    {#each backends as b (b.id)}
+      <li data-state={b.state}><span dir="ltr">{b.id}</span> · {b.state}{#if b.until} · {new Date(b.until).toLocaleString(ui.texts.locale)}{/if}
+        {#each b.usage?.windows ?? [] as w (w.name)} · {w.name} {Math.round(w.usedPercent)}%{/each}</li>
+    {/each}
+  </ul>
+{/if}
+
+<h4>{t("admin.gateway")}</h4>
+<p>{log.count} · ✗ {log.errors} · {log.tokens}</p>
+{#if shown}<p class="g9a-note">{t("admin.key_once")} <code dir="ltr">{shown}</code></p>{/if}
+<ul>
+  {#each keys as k (k.id)}
+    <li data-revoked={k.revoked}>{k.name}{#if k.lastUsedAt} · {new Date(k.lastUsedAt).toLocaleString(ui.texts.locale)}{/if}
+      {#if !k.revoked}<button type="button" onclick={async () => { await admin.revokeGatewayKey(k.id).catch(() => undefined); await load(); }}>{t("admin.remove")}</button>{/if}</li>
+  {/each}
+</ul>
+<form class="g9a-row" onsubmit={(e) => { e.preventDefault(); void makeKey(); }}>
+  <input bind:value={keyName} placeholder={t("admin.gateway")} aria-label={t("admin.gateway")} />
+  <button type="submit">{t("admin.add")}</button>
+</form>

package/dist/pages/admin/AdminModels.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    level?: string;
+};
+declare const AdminModels: import("svelte").Component<$$ComponentProps, {}, "">;
+type AdminModels = ReturnType<typeof AdminModels>;
+export default AdminModels;

package/dist/pages/admin/AdminUsage.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+  // The usage ledger: the model-free rate, by capability and model, the subscription windows, the latest calls, and
+  // a run's black box when a call is opened.
+  import { faDigits } from "@g9tm/aiassistant";
+  import type { CallView, TimelineLine, UsageGroupView, UsageView, WindowSetView } from "@g9tm/aiassistant/admin";
+  import { AdminClient, adminTexts } from "@g9tm/aiassistant/admin";
+  import { useUi } from "../../context.js";
+
+  const ui = useUi();
+  const t = adminTexts(ui.texts).t;
+  const admin = new AdminClient(ui.assistant.api);
+  let days = $state(7);
+  let usage = $state<UsageView | null>(null);
+  let windows = $state<WindowSetView[]>([]);
+  let calls = $state<CallView[]>([]);
+  let box = $state<{ runId: string; lines: TimelineLine[] } | null>(null);
+  let error = $state<string | null>(null);
+
+  const pct = (x: number): string => {
+    const s = String(Math.round(x * 100)) + "%";
+    return ui.texts.locale === "fa" ? faDigits(s) : s;
+  };
+
+  async function load(d: number): Promise<void> {
+    try {
+      [usage, windows, calls] = await Promise.all([admin.usage(d), admin.windows().catch(() => []), admin.calls(d, 50)]);
+      error = null;
+    } catch (e) {
+      error = e instanceof Error ? e.message : "error.network";
+    }
+  }
+  $effect(() => { void load(days); });
+
+  async function open(runId: string): Promise<void> {
+    try { box = { runId, lines: (await admin.timeline(runId)).lines }; } catch { box = null; }
+  }
+</script>
+
+{#snippet groupTable(title: string, groups: UsageGroupView[])}
+  <h4>{t(title)}</h4>
+  <table>
+    <tbody>
+      {#each groups as g (g.id)}
+        <tr>
+          <th scope="row" dir="ltr">{g.id}</th>
+          <td>{g.rows}</td>
+          <td>{pct(g.rows === 0 ? 0 : g.withoutModel / g.rows)}</td>
+          <td>{t("admin.tokens", { in: g.tokensIn, cached: g.tokensCached, out: g.tokensOut })}</td>
+          <td>{g.avgMs} ms</td>
+          <td>{g.errors > 0 ? "✗ " + String(g.errors) : ""}</td>
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+{/snippet}
+
+{#if error}<p class="g9a-note" role="alert">{t("error.network")}</p>{/if}
+<label>
+  <select bind:value={days}>
+    {#each [1, 7, 30, 90] as d (d)}<option value={d}>{d}</option>{/each}
+  </select>
+</label>
+{#if usage}
+  <p><strong>{t("admin.without_model", { percent: pct(usage.withoutModelRate) })}</strong> · {t("admin.rows", { count: usage.rows })}</p>
+  {@render groupTable("admin.capabilities", usage.capabilities)}
+  {@render groupTable("admin.route", usage.models)}
+{/if}
+{#if windows.length > 0}
+  <h4>{t("admin.windows")}</h4>
+  {#each windows as s (s.backend)}
+    {#each s.windows as w (w.name)}
+      <p class="g9a-usage-chip" style={"--g9a-usage: " + String(w.usedPercent) + "%"}>{s.backend} · {w.name} · {t("usage.left", { percent: pct(1 - w.usedPercent / 100) })}</p>
+    {/each}
+  {/each}
+{/if}
+<h4>{t("admin.calls")}</h4>
+<ul>
+  {#each calls as c (c.id)}
+    <li data-outcome={c.outcome}>
+      {#if c.runId}<button type="button" onclick={() => open(c.runId ?? "")}>{c.capability} · {c.role} #{c.round}</button>{:else}{c.capability} · {c.role}{/if}
+      · <span dir="ltr">{c.model ?? "—"}</span> · {c.outcome} · {c.tokensIn}/{c.tokensOut} · {c.ms} ms
+    </li>
+  {/each}
+</ul>
+{#if box}
+  <h4>{t("admin.timeline")} · <span dir="ltr">{box.runId}</span></h4>
+  <ol>
+    {#each box.lines as line, i (i)}
+      <li data-kind={line.kind} data-bad={line.bad}><time>{new Date(line.at).toLocaleTimeString(ui.texts.locale)}</time> {line.title} <span dir="ltr">{line.detail}</span></li>
+    {/each}
+  </ol>
+{/if}

package/dist/pages/admin/AdminUsage.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const AdminUsage: import("svelte").Component<Record<string, never>, {}, "">;
+type AdminUsage = ReturnType<typeof AdminUsage>;
+export default AdminUsage;

package/dist/parts/Composer.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+  // The composer: input, attach (only when the host can pick a file), mic (only when the host can dictate), send or stop.
+  import { can } from "@g9tm/aiassistant";
+  import { cls, sty, useUi } from "../context.js";
+
+  let { busy, attachments, placeholder = undefined }: { busy: boolean; attachments: { id: string; name: string; kind: string }[]; placeholder?: string | undefined } = $props();
+  const ui = useUi();
+  const t = ui.texts.t;
+  const host = ui.assistant.host;
+  let text = $state("");
+  let input: HTMLTextAreaElement | undefined = $state();
+
+  async function send(): Promise<void> {
+    if (busy) { await ui.assistant.stop(); return; }
+    const value = text;
+    if (await ui.assistant.send(value)) text = "";
+  }
+
+  async function attach(): Promise<void> {
+    const f = await host.pickFile?.([".pdf", ".xlsx", ".csv", "image/*"]);
+    if (f) await ui.assistant.attach(f.name, f.bytes);
+  }
+
+  async function dictate(): Promise<void> {
+    const said = await host.dictate?.();
+    if (said) text = (text + " " + said).trim();
+  }
+
+  // Recording: a tap starts, a second tap stops and the server turns the audio into text (shown only when it can).
+  let stopRecording = $state<(() => Promise<{ bytes: Uint8Array; mime: string } | null>) | null>(null);
+  const live = ui.assistant.stateWatch;
+  let voice = $state(live.state.voice);
+  $effect(() => live.subscribe((s) => { voice = s.voice; }));
+  async function record(): Promise<void> {
+    if (stopRecording) {
+      const stop = stopRecording;
+      stopRecording = null;
+      const audio = await stop();
+      if (audio) {
+        const said = await ui.assistant.api.speech(audio.bytes, audio.mime).catch(() => "");
+        if (said) text = (text + " " + said).trim();
+      }
+      return;
+    }
+    stopRecording = (await host.record?.().catch(() => null)) ?? null;
+  }
+
+  export function focus(): void {
+    input?.focus();
+  }
+</script>
+
+<form class={cls(ui, "composer")} style={sty(ui, "composer")} onsubmit={(e) => { e.preventDefault(); void send(); }}>
+  {#if attachments.length > 0}
+    <div class={cls(ui, "file-chips")}>
+      {#each attachments as a (a.id)}
+        <span class={cls(ui, "file-chip")}>{a.name}<button type="button" aria-label={t("files.remove")} onclick={() => ui.assistant.detach(a.id)}>×</button></span>
+      {/each}
+    </div>
+  {/if}
+  <div class="g9a-composer-row">
+    {#if can(host, "attach")}<button type="button" class={cls(ui, "composer.attach")} aria-label={t("composer.attach")} onclick={attach}>📎</button>{/if}
+    <textarea bind:this={input} bind:value={text} class={cls(ui, "composer.input")} rows="1" placeholder={placeholder ?? t("composer.placeholder")} aria-label={placeholder ?? t("composer.placeholder")}
+      onkeydown={(e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); void send(); } }}></textarea>
+    {#if can(host, "mic")}<button type="button" class={cls(ui, "composer.mic")} aria-label={t("composer.mic")} onclick={dictate}>🎙</button>
+    {:else if voice && can(host, "record")}<button type="button" class={cls(ui, "composer.mic")} aria-label={t("composer.mic")} aria-pressed={stopRecording !== null} onclick={record}>{stopRecording ? "■" : "🎙"}</button>{/if}
+    <button type="submit" class={cls(ui, busy ? "composer.stop" : "composer.send")}>{busy ? t("composer.stop") : t("composer.send")}</button>
+  </div>
+</form>

package/dist/parts/Composer.svelte.d.ts

@@ -0,0 +1,14 @@
+type $$ComponentProps = {
+    busy: boolean;
+    attachments: {
+        id: string;
+        name: string;
+        kind: string;
+    }[];
+    placeholder?: string | undefined;
+};
+declare const Composer: import("svelte").Component<$$ComponentProps, {
+    focus: () => void;
+}, "">;
+type Composer = ReturnType<typeof Composer>;
+export default Composer;

package/dist/parts/Message.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  // One message: its text (revealed only when it arrived in front of the person), blocks, card, provenance and feedback.
+  import { untrack } from "svelte";
+  import type { MessageView } from "@g9tm/aiassistant";
+  import { cls, override, useUi } from "../context.js";
+  import BlockView from "../blocks/BlockView.svelte";
+  import ApprovalCard from "../cards/ApprovalCard.svelte";
+  import Cards from "../cards/Cards.svelte";
+  import RevealText from "./RevealText.svelte";
+  import Small from "./Small.svelte";
+
+  let { message, plans, runId }: { message: MessageView; plans: ReadonlyMap<string, import("@g9tm/aiassistant").PlanView>; runId: string | null } = $props();
+  const ui = useUi();
+  const t = ui.texts.t;
+  // Decided once, when the message first appears (the list is keyed by id): an answer seen once is never revealed again.
+  const reveal = untrack(() => ui.assistant.watched.reveal(message.id) && message.role === "assistant" && !message.pending);
+  const Approval = $derived(override(ui, "ApprovalCard") ?? ApprovalCard);
+  const Other = $derived(override(ui, "Card") ?? Cards);
+  const plan = $derived(message.card?.kind === "plan" ? plans.get(message.card.id) : undefined);
+  let copied = $state(false);
+</script>
+
+<div class={cls(ui, "message") + " " + cls(ui, message.role === "user" ? "message.user" : "message.assistant")} data-kind={message.kind} data-pending={message.pending}>
+  {#if message.card}
+    {#if plan}<Approval {plan} />{:else if message.card.kind !== "plan"}<Other card={message.card} {runId} />{/if}
+  {:else}
+    {#if message.text.length > 0}<div class={cls(ui, "message.text")}><RevealText text={message.text} {reveal} /></div>{/if}
+    {#each message.blocks as b, i (i)}<BlockView block={b} />{/each}
+    {#if message.next.length > 0}
+      <div class={cls(ui, "block.actions")}>{#each message.next as n (n)}<button type="button" class={cls(ui, "block.action")} onclick={() => ui.assistant.send(n)}>{n}</button>{/each}</div>
+    {/if}
+    {#if message.role === "assistant"}
+      <div class={cls(ui, "message.feedback")}>
+        <Small kind="provenance" provenance={message.provenance} />
+        {#if ui.assistant.host.copy}<button type="button" onclick={async () => { await ui.assistant.host.copy?.(message.text); copied = true; }}>{copied ? "✓" : t("feedback.copy")}</button>{/if}
+        {#if message.provenance === "learned"}<button type="button" onclick={() => ui.assistant.notRight(message.id)}>{t("feedback.not_right")}</button>{/if}
+      </div>
+    {/if}
+  {/if}
+</div>

package/dist/parts/Message.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { MessageView } from "@g9tm/aiassistant";
+type $$ComponentProps = {
+    message: MessageView;
+    plans: ReadonlyMap<string, import("@g9tm/aiassistant").PlanView>;
+    runId: string | null;
+};
+declare const Message: import("svelte").Component<$$ComponentProps, {}, "">;
+type Message = ReturnType<typeof Message>;
+export default Message;

package/dist/parts/MessageList.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  // The messages, opened at the end; a new question stays at the top of the view so its answer is read from the start.
+  // New messages are announced politely to screen readers.
+  import type { MessageView, PlanView } from "@g9tm/aiassistant";
+  import { cls, override, useUi } from "../context.js";
+  import Message from "./Message.svelte";
+
+  let { messages, plans, runId }: { messages: MessageView[]; plans: ReadonlyMap<string, PlanView>; runId: string | null } = $props();
+  const ui = useUi();
+  const Item = $derived(override(ui, "Message") ?? Message);
+  let box: HTMLDivElement | undefined = $state();
+  let count = 0;
+  $effect(() => {
+    const n = messages.length;
+    if (!box || n === count) return;
+    const last = messages[n - 1];
+    const node = box.querySelector<HTMLElement>('[data-id="' + CSS.escape(last?.id ?? "") + '"]');
+    if (count === 0) box.scrollTop = box.scrollHeight; // history opens at its end
+    else if (last?.role === "user" && node) box.scrollTop = node.offsetTop - box.offsetTop; // the question at the top
+    count = n;
+  });
+</script>
+
+<div class={cls(ui, "messages")} bind:this={box} aria-live="polite">
+  {#each messages as m (m.id)}
+    <div data-id={m.id}><Item message={m} {plans} {runId} /></div>
+  {/each}
+</div>

package/dist/parts/MessageList.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { MessageView, PlanView } from "@g9tm/aiassistant";
+type $$ComponentProps = {
+    messages: MessageView[];
+    plans: ReadonlyMap<string, PlanView>;
+    runId: string | null;
+};
+declare const MessageList: import("svelte").Component<$$ComponentProps, {}, "">;
+type MessageList = ReturnType<typeof MessageList>;
+export default MessageList;

package/dist/parts/RevealText.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  // Reveals an answer that arrived in front of the person over about 1.5 s; history and reduced motion show it whole.
+  import { onDestroy } from "svelte";
+  import { visibleText, REVEAL_MS } from "@g9tm/aiassistant";
+  import { cls, useUi } from "../context.js";
+  import { Ticker } from "../store.svelte.js";
+  import TextView from "./TextView.svelte";
+
+  let { text, reveal = false }: { text: string; reveal?: boolean } = $props();
+  const ui = useUi();
+  const started = Date.now();
+  const ticker = new Ticker();
+  const animate = $derived(reveal && !ui.assistant.host.reducedMotion);
+  $effect(() => {
+    if (animate) ticker.start(80);
+  });
+  const shown = $derived(animate ? visibleText(text, ticker.now - started, false) : text);
+  $effect(() => {
+    if (ticker.now - started >= REVEAL_MS) ticker.stop();
+  });
+  onDestroy(() => ticker.stop());
+</script>
+
+<div class={cls(ui, "reveal-text")} aria-busy={shown.length < text.length}>
+  <TextView text={shown} />
+</div>

package/dist/parts/RevealText.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    text: string;
+    reveal?: boolean;
+};
+declare const RevealText: import("svelte").Component<$$ComponentProps, {}, "">;
+type RevealText = ReturnType<typeof RevealText>;
+export default RevealText;

package/dist/parts/Small.svelte

@@ -0,0 +1,24 @@
+<script lang="ts" module>
+  // Small parts used across the components (each also exported on its own).
+  export type SmallKind = "provenance" | "mode" | "usage";
+</script>
+
+<script lang="ts">
+  import { windowView, type AssistantState, type Provenance } from "@g9tm/aiassistant";
+  import { cls, useUi } from "../context.js";
+
+  let { kind, provenance = null, state = null }: { kind: SmallKind; provenance?: Provenance | null; state?: AssistantState | null } = $props();
+  const ui = useUi();
+  const t = ui.texts.t;
+  const until = $derived(state?.until ? new Date(state.until).toLocaleTimeString(ui.texts.locale === "fa" ? "fa-IR" : "en-GB", { hour: "2-digit", minute: "2-digit" }) : null);
+  const usage = $derived(state?.usage[0] ? windowView(state.usage[0], Date.now()) : null);
+</script>
+
+{#if kind === "provenance" && provenance}
+  <span class={cls(ui, "message.provenance")} data-provenance={provenance}>{t("provenance." + provenance)}</span>
+{:else if kind === "mode" && state && state.mode !== "on"}
+  <div class={cls(ui, "mode-banner")} role="status">{state.mode === "off" ? t("mode.off") : until ? t("mode.offline_until", { until }) : t("mode.offline")}</div>
+{:else if kind === "usage" && usage}
+  <span class={cls(ui, "usage-chip")} style={"--g9a-usage:" + String(Math.round(usage.left * 100)) + "%"}>{t("usage.left", { percent: Math.round(usage.left * 100) + "%" })}</span>
+{/if}
+

package/dist/parts/Small.svelte.d.ts

@@ -0,0 +1,10 @@
+export type SmallKind = "provenance" | "mode" | "usage";
+import { type AssistantState, type Provenance } from "@g9tm/aiassistant";
+type $$ComponentProps = {
+    kind: SmallKind;
+    provenance?: Provenance | null;
+    state?: AssistantState | null;
+};
+declare const Small: import("svelte").Component<$$ComponentProps, {}, "">;
+type Small = ReturnType<typeof Small>;
+export default Small;

package/dist/parts/StagesThinking.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  // Named stages lit by the run's real stage events (a pipeline's roles too); never a show of thinking.
+  import type { RunView } from "@g9tm/aiassistant";
+  import { cls, useUi } from "../context.js";
+
+  let { run, names = {} }: { run: RunView; names?: Record<string, string> } = $props();
+  const ui = useUi();
+  const name = (s: RunView["stages"][number]): string => (s.role ? (new Map(Object.entries(names)).get(s.role) ?? s.role) : ui.texts.t("stage." + s.id));
+</script>
+
+<div class={cls(ui, "stages-thinking")}>
+  {#each run.stages.filter((s) => s.id === "role" || names[s.id] !== undefined || s.id !== "waiting") as s, i (i)}
+    <span data-state={s.state} data-stage={s.id}>{name(s)}</span>
+  {/each}
+</div>

package/dist/parts/StagesThinking.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { RunView } from "@g9tm/aiassistant";
+type $$ComponentProps = {
+    run: RunView;
+    names?: Record<string, string>;
+};
+declare const StagesThinking: import("svelte").Component<$$ComponentProps, {}, "">;
+type StagesThinking = ReturnType<typeof StagesThinking>;
+export default StagesThinking;

package/dist/parts/TextView.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  // The model's text as safe tokens: paragraphs, lists, bold, code, links (https on the host's hosts only). Never HTML.
+  import { parseText, type Inline } from "@g9tm/aiassistant";
+  import { useUi } from "../context.js";
+
+  let { text }: { text: string } = $props();
+  const ui = useUi();
+  const blocks = $derived(parseText(text, ui.assistant.host.linkHosts ?? []));
+
+  function open(e: MouseEvent, href: string): void {
+    if (ui.assistant.host.openUrl) {
+      e.preventDefault();
+      ui.assistant.host.openUrl(href);
+    }
+  }
+</script>
+
+{#snippet line(xs: Inline[])}
+  {#each xs as x, i (i)}
+    {#if x.kind === "bold"}<strong>{x.text}</strong>
+    {:else if x.kind === "code"}<code>{x.text}</code>
+    {:else if x.kind === "link" && x.href}<a href={x.href} target="_blank" rel="noopener noreferrer" onclick={(e) => open(e, x.href ?? "")}>{x.text}</a>
+    {:else}{x.text}{/if}
+  {/each}
+{/snippet}
+
+{#each blocks as b, i (i)}
+  {#if b.kind === "paragraph"}
+    <p class="g9a-p">{@render line(b.inlines)}</p>
+  {:else if b.ordered}
+    <ol class="g9a-list">{#each b.items as it, n (n)}<li>{@render line(it)}</li>{/each}</ol>
+  {:else}
+    <ul class="g9a-list">{#each b.items as it, n (n)}<li>{@render line(it)}</li>{/each}</ul>
+  {/if}
+{/each}
+

package/dist/parts/TextView.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    text: string;
+};
+declare const TextView: import("svelte").Component<$$ComponentProps, {}, "">;
+type TextView = ReturnType<typeof TextView>;
+export default TextView;

package/dist/parts/ThinkingOrb.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  // The thinking orb: transform and opacity only; static with reduced motion.
+  import { cls, useUi } from "../context.js";
+  const ui = useUi();
+</script>
+
+<span class={cls(ui, "thinking-orb")} data-still={ui.assistant.host.reducedMotion} aria-hidden="true"></span>

package/dist/parts/ThinkingOrb.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ThinkingOrb: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ThinkingOrb = InstanceType<typeof ThinkingOrb>;
+export default ThinkingOrb;

package/dist/parts/WorkCard.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  // "Working": the run's real stages (from its stage events), the progress line, tools, the clock, stop; after 40 s,
+  // "still working". The thinking orb is static with reduced motion.
+  import { onDestroy, untrack } from "svelte";
+  import { finished, LONG_RUNNING_MS, type RunView } from "@g9tm/aiassistant";
+  import { cls, useUi } from "../context.js";
+  import { Ticker } from "../store.svelte.js";
+  import ThinkingOrb from "./ThinkingOrb.svelte";
+
+  let { run }: { run: RunView } = $props();
+  const ui = useUi();
+  const t = ui.texts.t;
+  const ticker = new Ticker();
+  // The clock of this run: set again when another run comes into the same card (a second question).
+  const runId = $derived(run.runId);
+  const started = $derived.by(() => { void runId; return untrack(() => Date.now() - run.elapsedMs); });
+  $effect(() => {
+    if (finished(run)) ticker.stop();
+    else ticker.start(1000);
+  });
+  onDestroy(() => ticker.stop());
+  const seconds = $derived(Math.max(0, Math.round((ticker.now - started) / 1000)));
+  const long = $derived(run.longRunning || ticker.now - started >= LONG_RUNNING_MS);
+  const label = (s: RunView["stages"][number]): string => (s.id === "role" ? t("stage.role", { role: s.role ?? "" }) : t("stage." + s.id));
+</script>
+
+{#if !finished(run) && run.state !== "waiting-confirm" && run.state !== "waiting-answer"}
+  <div class={cls(ui, "work")} role="status">
+    <ThinkingOrb />
+    <div class="g9a-work-main">
+      <div class="g9a-work-head"><strong>{long ? t("work.long") : t("work.title")}</strong><span class={cls(ui, "work.elapsed")}>{t("work.elapsed", { seconds })}</span></div>
+      <div class="g9a-stages">
+        {#each run.stages.filter((s) => s.id !== "waiting") as s, i (i)}<span class={cls(ui, "work.stage")} data-state={s.state}>{label(s)}</span>{/each}
+      </div>
+      {#if run.progress}<div class={cls(ui, "work.progress")}>{t(run.progress.key, run.progress.args)}</div>{/if}
+      {#each run.tools.slice(-3) as tool, i (i)}<div class={cls(ui, "work.tool")} data-state={tool.state}>{t(tool.title.key) === tool.title.key ? tool.name : t(tool.title.key)}</div>{/each}
+      {#if run.streamingText}<div class="g9a-stream">{run.streamingText}</div>{/if}
+    </div>
+    <button type="button" class={cls(ui, "composer.stop")} onclick={() => ui.assistant.stop()}>{t("composer.stop")}</button>
+  </div>
+{/if}

package/dist/parts/WorkCard.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type RunView } from "@g9tm/aiassistant";
+type $$ComponentProps = {
+    run: RunView;
+};
+declare const WorkCard: import("svelte").Component<$$ComponentProps, {}, "">;
+type WorkCard = ReturnType<typeof WorkCard>;
+export default WorkCard;

package/dist/slots/Dialog.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  // The default Dialog slot: above the panel (sheetLayer + 1), Escape closes, focus returns to what opened it.
+  import type { Snippet } from "svelte";
+  import { useUi } from "../context.js";
+
+  let { open = $bindable(false), label, children }: { open?: boolean; label: string; children: Snippet } = $props();
+  const ui = useUi();
+  let before: Element | null = null;
+  $effect(() => {
+    if (open) before = document.activeElement;
+    else if (before instanceof HTMLElement) before.focus();
+  });
+</script>
+
+{#if open}
+  <div class="g9a-dialog" role="dialog" aria-modal="true" aria-label={label} style:z-index={ui.layer + 1} tabindex="-1"
+    onkeydown={(e) => { if (e.key === "Escape") open = false; }}>
+    {@render children()}
+  </div>
+{/if}

package/dist/slots/Dialog.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    open?: boolean;
+    label: string;
+    children: Snippet;
+};
+declare const Dialog: import("svelte").Component<$$ComponentProps, {}, "open">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;