@g9tm/aiassistant-svelte 0.0.0-stage → 1.1.0

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/pages/texts.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The few words of the person's pages the core catalogue does not have (its history.*, routine.*, csv.* and pdf.* keys
+ * are shared with the other renderer): the host's texts and overrides win, then the core's, then these.
+ */
+import { type Texts } from "@g9tm/aiassistant";
+/** The pages' texts over the assistant's: a key the host or the core knows keeps its text. */
+export declare function pageTexts(texts: Texts): Texts;
+/** Every key the pages add (for hosts that translate to another language). */
+export declare function pageKeys(): string[];

package/dist/pages/texts.js

@@ -0,0 +1,42 @@
+/**
+ * The few words of the person's pages the core catalogue does not have (its history.*, routine.*, csv.* and pdf.* keys
+ * are shared with the other renderer): the host's texts and overrides win, then the core's, then these.
+ */
+import { createTexts } from "@g9tm/aiassistant";
+const FA = {
+    "history.tabs": "گفت‌وگوها",
+    "history.empty": "چیزی اینجا نیست",
+    "history.untitled": "بی‌نام",
+    "routine.list": "روال‌ها",
+    "routine.empty": "هنوز روالی نیست",
+    "routine.search": "جست‌وجو…",
+    "routine.none_found": "چیزی پیدا نشد",
+    "routine.change": "تغییر",
+    "routine.failed": "اجرا نشد",
+};
+const EN = {
+    "history.tabs": "Conversations",
+    "history.empty": "Nothing here",
+    "history.untitled": "Untitled",
+    "routine.list": "Routines",
+    "routine.empty": "No routines yet",
+    "routine.search": "Search…",
+    "routine.none_found": "Nothing found",
+    "routine.change": "Change",
+    "routine.failed": "It did not run",
+};
+/** The pages' texts over the assistant's: a key the host or the core knows keeps its text. */
+export function pageTexts(texts) {
+    const own = createTexts(texts.locale, texts.locale === "fa" ? FA : EN);
+    return {
+        locale: texts.locale,
+        t(key, args) {
+            const v = texts.t(key, args);
+            return v !== key ? v : own.t(key, args);
+        },
+    };
+}
+/** Every key the pages add (for hosts that translate to another language). */
+export function pageKeys() {
+    return Object.keys(EN).sort();
+}

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/PdfButton.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  // "Download PDF" of the open conversation, once it has messages: the server's signed link (ten minutes), opened by the
+  // host. Busy while the link is asked for; a notice if it could not be made. Hidden when the host cannot open links.
+  import { onDestroy } from "svelte";
+  import { obj, str } from "@g9tm/aiassistant";
+  import { useUi } from "../context.js";
+  import { AssistantState } from "../store.svelte.js";
+  import { pageTexts } from "../pages/texts.js";
+
+  const ui = useUi();
+  const t = pageTexts(ui.texts).t;
+  const live = new AssistantState(ui.assistant);
+  onDestroy(() => live.dispose());
+  const id = $derived(live.current.conversationId);
+  const shown = $derived(id !== null && live.current.messages.length > 0 && typeof ui.assistant.host.openUrl === "function");
+  let busy = $state(false);
+  let failed = $state(false);
+
+  async function download(): Promise<void> {
+    if (!id || busy) return;
+    busy = true;
+    failed = false;
+    try {
+      const url = str(obj(await ui.assistant.api.documentLink(id))["url"]);
+      if (!/^(https:\/\/|\/(?!\/))/u.test(url)) throw new Error("no link"); // the server's own path or https only
+      ui.assistant.host.openUrl?.(url);
+    } catch {
+      failed = true;
+    }
+    busy = false;
+  }
+</script>
+
+{#if shown}
+  <button type="button" class="g9a-pdf" aria-busy={busy} disabled={busy} onclick={download}>{busy ? t("pdf.busy") : t("pdf.download")}</button>
+  {#if failed}<span class="g9a-note g9a-pdf__failed" role="alert">{t("pdf.failed")}</span>{/if}
+{/if}

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

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

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;

package/dist/slots/PinPad.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+  // The default PinPad slot: a numeric code field (a host may give its own).
+  let { value = $bindable(""), label }: { value?: string; label: string } = $props();
+</script>
+
+<input class="g9a-pin" type="password" inputmode="numeric" autocomplete="one-time-code" aria-label={label} placeholder={label} bind:value />

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

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