@lotics/ui 7.19.3 → 8.0.0

package/examples/tpl_briefing.tsx

@@ -1,121 +0,0 @@
-import { useState } from "react";
-import { ScrollView, View } from "react-native";
-import { Text } from "@lotics/ui/text";
-import { colors } from "@lotics/ui/colors";
-import { KPIStrip } from "@lotics/ui/kpi_strip";
-import { SegmentedControl } from "@lotics/ui/segmented_control";
-import { Sources } from "@lotics/ui/sources";
-import { Finding, type FindingSeverity } from "@lotics/ui/finding";
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Template · Briefing — the agent reads the period's data and writes a short
-// narrative, then a RANKED list of what needs attention. Each finding carries a
-// severity, a headline metric, the sources it rests on, and the one action it
-// suggests. Unlike a dashboard (raw charts), this is the agent's COMMENTARY:
-// what changed, what's at risk, what to do. The leadership digest / daily ops
-// brief / anomaly scan. The narrative explains; the findings are the worklist.
-// ─────────────────────────────────────────────────────────────────────────────
-
-interface F {
-  severity: FindingSeverity;
-  title: string;
-  detail: string;
-  metric: string;
-  metricCaption: string;
-  action: string;
-  sources: { id: string; label: string; kind: "record" | "table" | "document" }[];
-}
-
-const NARRATIVE: Record<"today" | "week", string> = {
-  today:
-    "Volume held steady at 41 active shipments. Three reefer containers to Hamburg are inside the demurrage window and need a pickup booked today. Cash collection is lagging — five invoices crossed 30 days overdue. On-time delivery improved on the back of the new Cát Lái slotting.",
-  week:
-    "A solid week: 268 shipments moved, on-time delivery up 6 points after the Cát Lái slotting change. Two ocean lanes slipped below the 12% margin target on bunker surcharges. Receivables remain the soft spot — ₫120M is now past 30 days, concentrated in two accounts.",
-};
-
-const FINDINGS: Record<"today" | "week", F[]> = {
-  today: [
-    { severity: "critical", title: "3 reefer containers at demurrage risk", detail: "Hamburg shipments HBL-4471/4472/4480 hit free-time expiry at 18:00 today; no pickup is booked.", metric: "₫48M", metricCaption: "exposure", action: "Open the shipments", sources: [{ id: "a1", label: "SHIP-4471", kind: "record" }, { id: "a2", label: "Demurrage tracker", kind: "table" }] },
-    { severity: "warning", title: "5 invoices overdue past 30 days", detail: "Two accounts — Crestline and Meridian — make up most of the balance. No promise-to-pay logged this week.", metric: "₫120M", metricCaption: "overdue", action: "Open receivables", sources: [{ id: "a3", label: "Aged receivables", kind: "table" }] },
-    { severity: "warning", title: "Margin on the Hamburg lane below target", detail: "Bunker surcharge rose 9%; the lane is at 9.8% gross vs the 12% floor.", metric: "−2.2 pts", metricCaption: "vs target", action: "Review lane pricing", sources: [{ id: "a4", label: "Lane P&L", kind: "table" }] },
-    { severity: "positive", title: "On-time delivery improving", detail: "The Cát Lái slotting change lifted on-time pickups for the third day running.", metric: "+6 pts", metricCaption: "3-day", action: "See the trend", sources: [{ id: "a5", label: "OTD report", kind: "document" }] },
-  ],
-  week: [
-    { severity: "critical", title: "Receivables concentration risk", detail: "₫120M past 30 days sits in two accounts; one is also near its credit limit.", metric: "2", metricCaption: "accounts", action: "Open receivables", sources: [{ id: "b1", label: "Aged receivables", kind: "table" }] },
-    { severity: "warning", title: "Two ocean lanes below margin target", detail: "Hamburg and Rotterdam slipped under 12% on bunker surcharges sustained all week.", metric: "2", metricCaption: "lanes", action: "Review lane pricing", sources: [{ id: "b2", label: "Lane P&L", kind: "table" }] },
-    { severity: "positive", title: "On-time delivery up 6 points", detail: "The slotting change held all week — the strongest OTD in two months.", metric: "+6 pts", metricCaption: "this week", action: "See the trend", sources: [{ id: "b3", label: "OTD report", kind: "document" }] },
-    { severity: "info", title: "RFQ volume rising", detail: "12 new quote requests this week, ahead of the trailing average — capacity planning should get ahead of it.", metric: "12", metricCaption: "RFQs", action: "Open the pipeline", sources: [{ id: "b4", label: "Quote pipeline", kind: "table" }] },
-  ],
-};
-
-export function TplBriefing() {
-  const [period, setPeriod] = useState<"today" | "week">("today");
-  const findings = FINDINGS[period];
-  const attention = findings.filter((f) => f.severity === "critical" || f.severity === "warning").length;
-
-  return (
-    <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ padding: 28 }}>
-      <View style={{ width: "100%", maxWidth: 860, alignSelf: "center", gap: 16 }}>
-        <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 16 }}>
-          <View style={{ flex: 1, gap: 2 }}>
-            <Text size="xl" weight="semibold">Operations briefing</Text>
-            <Text size="sm" color="muted">What the agent sees in the numbers — and what needs a decision</Text>
-          </View>
-          <SegmentedControl
-            accessibilityLabel="Period"
-            options={[
-              { label: "Today", value: "today" },
-              { label: "This week", value: "week" },
-            ]}
-            value={period}
-            onValueChange={setPeriod}
-          />
-        </View>
-
-        {/* the generated narrative */}
-        <View style={{ borderWidth: 1, borderColor: colors.zinc[200], backgroundColor: colors.white, borderRadius: 14, padding: 18, gap: 12 }}>
-          <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-            <Text size="xs" color="muted" weight="medium" style={{ flex: 1 }}>Summary</Text>
-            <Text size="xs" color="muted">{period === "today" ? "as of 14:20" : "week to date"}</Text>
-          </View>
-          <Text size="md" style={{ lineHeight: 22 }}>{NARRATIVE[period]}</Text>
-          <Sources
-            label="Read from"
-            onOpen={() => {}}
-            sources={[
-              { id: "n1", label: "Shipments", kind: "table" },
-              { id: "n2", label: "Aged receivables", kind: "table" },
-              { id: "n3", label: "Lane P&L", kind: "table" },
-            ]}
-          />
-        </View>
-
-        <KPIStrip
-          items={[
-            { label: "Active shipments", value: period === "today" ? 41 : 268, format: "number", trend: period === "today" ? 0 : 4 },
-            { label: "On-time delivery", value: "94%", trend: 6 },
-            { label: "Overdue receivables", value: 120_000_000, format: "currency", compact: true, tone: "danger" },
-            { label: "Needs attention", value: attention, format: "number", tone: attention > 0 ? "warning" : "default" },
-          ]}
-        />
-
-        <View style={{ gap: 10 }}>
-          <Text size="sm" weight="semibold">Needs attention</Text>
-          {findings.map((f, i) => (
-            <Finding
-              key={i}
-              severity={f.severity}
-              title={f.title}
-              detail={f.detail}
-              metric={f.metric}
-              metricCaption={f.metricCaption}
-              sources={f.sources}
-              onOpenSource={() => {}}
-              action={{ label: f.action, onPress: () => {} }}
-            />
-          ))}
-        </View>
-      </View>
-    </ScrollView>
-  );
-}

package/examples/tpl_compare.tsx

@@ -1,133 +0,0 @@
-import { useState } from "react";
-import { ScrollView, View } from "react-native";
-import { Text } from "@lotics/ui/text";
-import { colors } from "@lotics/ui/colors";
-import { Callout, CalloutText, CalloutTitle } from "@lotics/ui/callout";
-import { ScoredOption } from "@lotics/ui/scored_option";
-import type { SpecRow } from "@lotics/ui/spec_list";
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Template · Compare — the agent SCORES and ranks the options against the
-// criteria, shows its reasoning and the key specs, and the human picks one. The
-// agent does the legwork (gather, normalise, score); the choice stays the
-// human's. Quotes, carriers, suppliers, plans, routes. The recommended option
-// wears a RECOMMENDED label; selecting one settles the shortlist to the decision.
-// ─────────────────────────────────────────────────────────────────────────────
-
-interface O {
-  id: string;
-  rank: number;
-  title: string;
-  subtitle: string;
-  score: number;
-  rationale: string;
-  specs: SpecRow[];
-  recommended?: boolean;
-}
-
-const OPTIONS: O[] = [
-  {
-    id: "o1",
-    rank: 1,
-    title: "Maersk — Cát Lái → Hamburg",
-    subtitle: "Direct, weekly service · reefer guaranteed",
-    score: 0.92,
-    rationale: "Best balance: only 4% above the cheapest, but the most reliable schedule and guaranteed reefer plugs — lowest demurrage risk for time-sensitive cargo.",
-    recommended: true,
-    specs: [
-      { label: "All-in rate", value: "$2,840" },
-      { label: "Transit", value: "28 days" },
-      { label: "Schedule reliability", value: "94%" },
-      { label: "Free time", value: "14 days" },
-    ],
-  },
-  {
-    id: "o2",
-    rank: 2,
-    title: "CMA CGM — Cát Lái → Hamburg",
-    subtitle: "1 transshipment at Singapore",
-    score: 0.78,
-    rationale: "Cheapest of the four, but the Singapore transshipment adds three days and a reliability hit — workable for non-urgent cargo.",
-    specs: [
-      { label: "All-in rate", value: "$2,730" },
-      { label: "Transit", value: "31 days" },
-      { label: "Schedule reliability", value: "86%" },
-      { label: "Free time", value: "10 days" },
-    ],
-  },
-  {
-    id: "o3",
-    rank: 3,
-    title: "Hapag-Lloyd — Cát Lái → Hamburg",
-    subtitle: "Direct, premium service",
-    score: 0.64,
-    rationale: "Fastest transit and strong reliability, but the premium rate is hard to justify unless the customer pays for speed.",
-    specs: [
-      { label: "All-in rate", value: "$3,210" },
-      { label: "Transit", value: "26 days" },
-      { label: "Schedule reliability", value: "92%" },
-      { label: "Free time", value: "10 days" },
-    ],
-  },
-  {
-    id: "o4",
-    rank: 4,
-    title: "ONE — Cát Lái → Hamburg",
-    subtitle: "2 transshipments · no reefer guarantee",
-    score: 0.41,
-    rationale: "Lowest score: two transshipments and no guaranteed reefer plug make it unsuitable for frozen cargo, despite a mid-range rate.",
-    specs: [
-      { label: "All-in rate", value: "$2,910" },
-      { label: "Transit", value: "34 days" },
-      { label: "Schedule reliability", value: "79%" },
-      { label: "Free time", value: "7 days" },
-    ],
-  },
-];
-
-export function TplCompare() {
-  const [chosen, setChosen] = useState<string | null>(null);
-  const pick = OPTIONS.find((o) => o.id === chosen) ?? null;
-
-  return (
-    <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ padding: 28 }}>
-      <View style={{ width: "100%", maxWidth: 720, alignSelf: "center", gap: 16 }}>
-        <View style={{ gap: 2 }}>
-          <Text size="xl" weight="semibold">Freight options</Text>
-          <Text size="sm" color="muted">Ocean · Cát Lái → Hamburg · 2×40HC reefer · frozen shrimp</Text>
-        </View>
-
-        <View style={{ borderLeftWidth: 2, borderLeftColor: colors.zinc[300], paddingLeft: 12 }}>
-          <Text size="sm" color="muted">
-            The agent scored four quotes against cost, transit time and schedule reliability, weighted for time-sensitive reefer cargo.
-          </Text>
-        </View>
-
-        {pick ? (
-          <Callout tone="neutral">
-            <CalloutTitle>Chosen · {pick.title}</CalloutTitle>
-            <CalloutText>{pick.specs[0].label} {String(pick.specs[0].value)} · {String(pick.specs[1].value)} transit. Booking can proceed on this option.</CalloutText>
-          </Callout>
-        ) : null}
-
-        <View style={{ gap: 12 }}>
-          {OPTIONS.map((o) => (
-            <ScoredOption
-              key={o.id}
-              rank={o.rank}
-              title={o.title}
-              subtitle={o.subtitle}
-              score={o.score}
-              rationale={o.rationale}
-              specs={o.specs}
-              recommended={o.recommended}
-              selected={chosen === o.id}
-              selectLabel="Choose this option"
-              onSelect={() => setChosen((c) => (c === o.id ? null : o.id))}
-            />
-          ))}
-        </View>
-      </View>
-    </ScrollView>
-  );
-}

package/examples/tpl_crosscheck.tsx

@@ -1,120 +0,0 @@
-import { useState } from "react";
-import { ScrollView, View } from "react-native";
-import { Text } from "@lotics/ui/text";
-import { colors } from "@lotics/ui/colors";
-import { KPIStrip } from "@lotics/ui/kpi_strip";
-import { Callout, CalloutText, CalloutTitle } from "@lotics/ui/callout";
-import { Discrepancy, type DiscrepancyValue } from "@lotics/ui/discrepancy";
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Template · Cross-check — the agent compares the documents of one transaction
-// and surfaces every field whose value DISAGREES across sources. Each card lays
-// the conflicting values side by side (with where each came from), marks the one
-// the agent believes, and the human resolves to a truth or flags it. The audit /
-// 3-way-match / contract-vs-invoice desk. Symmetric (N sources disagree), unlike
-// a before→after edit. The agreeing fields stay out of the way — only conflicts
-// need a decision.
-// ─────────────────────────────────────────────────────────────────────────────
-
-interface D {
-  id: string;
-  field: string;
-  values: DiscrepancyValue[];
-  note: string;
-}
-
-const SEED: D[] = [
-  {
-    id: "d1",
-    field: "Total cartons",
-    values: [
-      { source: "Shipping instruction", value: "525" },
-      { source: "Commercial invoice", value: "520", recommended: true },
-      { source: "Packing list", value: "520" },
-    ],
-    note: "Two of three documents agree at 520; the SI looks stale — it predates the final load.",
-  },
-  {
-    id: "d2",
-    field: "Net weight",
-    values: [
-      { source: "Commercial invoice", value: "11,980 kg" },
-      { source: "Packing list", value: "12,050 kg", recommended: true },
-    ],
-    note: "The packing list carries the measured weight; the CI rounded for the invoice.",
-  },
-  {
-    id: "d3",
-    field: "Incoterm",
-    values: [
-      { source: "Shipping instruction", value: "FOB" },
-      { source: "Commercial invoice", value: "CIF", recommended: true },
-    ],
-    note: "The commercial invoice governs the sale terms — CIF matches the freight prepaid on the bill of lading.",
-  },
-  {
-    id: "d4",
-    field: "HS code",
-    values: [
-      { source: "Commercial invoice", value: "0306.17", recommended: true },
-      { source: "Customs draft", value: "0306.16" },
-    ],
-    note: "0306.16 is cold-water shrimp; the goods are warm-water Penaeidae → 0306.17. The CI is right — fix the draft.",
-  },
-];
-
-const CHECKED = 22;
-
-export function TplCrosscheck() {
-  const [res, setRes] = useState<Record<string, { idx?: number; flagged?: boolean }>>({});
-
-  const resolvedCount = Object.values(res).filter((r) => r.idx != null || r.flagged).length;
-  const openCount = SEED.length - resolvedCount;
-
-  return (
-    <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ padding: 28 }}>
-      <View style={{ width: "100%", maxWidth: 760, alignSelf: "center", gap: 16 }}>
-        <View style={{ gap: 2 }}>
-          <Text size="xl" weight="semibold">Document cross-check</Text>
-          <Text size="sm" color="muted">Shipment HBL-4471 · Shipping instruction · Commercial invoice · Packing list · Customs draft</Text>
-        </View>
-
-        <KPIStrip
-          items={[
-            { label: "Fields checked", value: CHECKED, format: "number" },
-            { label: "In agreement", value: CHECKED - SEED.length, format: "number" },
-            { label: "Disagree", value: openCount, format: "number", tone: openCount > 0 ? "danger" : "default", info: "Fields whose value differs across the documents — each needs a resolution before the set can be filed." },
-            { label: "Resolved", value: resolvedCount, format: "number" },
-          ]}
-        />
-
-        {openCount > 0 ? (
-          <Callout tone="warning">
-            <CalloutTitle>{openCount} of {CHECKED} fields disagree across the documents</CalloutTitle>
-            <CalloutText>The agent reconciled the other {CHECKED - SEED.length}. Resolve each conflict to a source of truth, or flag it for the desk.</CalloutText>
-          </Callout>
-        ) : (
-          <Callout tone="success">
-            <CalloutTitle>All conflicts resolved</CalloutTitle>
-            <CalloutText>Every field now has a single source of truth — the document set is ready to file.</CalloutText>
-          </Callout>
-        )}
-
-        <View style={{ gap: 10 }}>
-          {SEED.map((d) => (
-            <Discrepancy
-              key={d.id}
-              field={d.field}
-              values={d.values}
-              note={d.note}
-              resolvedIndex={res[d.id]?.idx}
-              flagged={res[d.id]?.flagged}
-              onResolve={(idx) => setRes((p) => ({ ...p, [d.id]: { idx } }))}
-              onFlag={() => setRes((p) => ({ ...p, [d.id]: { flagged: true } }))}
-            />
-          ))}
-        </View>
-      </View>
-    </ScrollView>
-  );
-}

package/examples/tpl_draft.tsx

@@ -1,163 +0,0 @@
-import { useEffect, useState } from "react";
-import { ScrollView, View } from "react-native";
-import { colors } from "@lotics/ui/colors";
-import { Text } from "@lotics/ui/text";
-import { Button } from "@lotics/ui/button";
-import { Card, CardBody, CardFooter, CardHeader, CardHeaderTitle } from "@lotics/ui/card";
-import { SegmentedControl } from "@lotics/ui/segmented_control";
-import { TextInputField } from "@lotics/ui/text_input_field";
-import { DotsIndicator } from "@lotics/ui/dots_indicator";
-import { CompletionState } from "@lotics/ui/completion_state";
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Template · AI draft generation — a FOURTH AI workflow shape: the agent writes
-// a first DRAFT from context, and the human refines it. The feedback differs
-// from the others — the OUTPUT itself streams (the reply text fills in live),
-// then becomes an editable surface the person edits before sending. Tone +
-// length steer the generation; Regenerate re-drafts. AI drafts, the human owns
-// the final words. All mock — the recipe, not a model.
-// ─────────────────────────────────────────────────────────────────────────────
-
-type Tone = "friendly" | "formal";
-type Length = "short" | "detailed";
-
-const INBOUND =
-  "Hi — we're launching a new product line and need about 5,000 corrugated mailers " +
-  "(FEFCO 0427) per month. Could you share pricing and a lead time?";
-
-const OPENING: Record<Tone, string> = {
-  friendly: "Hi Maya,\n\nThanks for reaching out — exciting to hear about the new line!",
-  formal: "Dear Ms. Tran,\n\nThank you for your enquiry regarding corrugated mailers.",
-};
-const OFFER: Record<Length, string> = {
-  short:
-    "For 5,000 FEFCO 0427 mailers a month we can offer 8,200₫/unit at that volume, with a 7–10 day lead time after artwork sign-off.",
-  detailed:
-    "For 5,000 FEFCO 0427 mailers a month, our volume price is 8,200₫/unit (B-flute, 1-colour print). Lead time is 7–10 working days after artwork sign-off, and the first run includes the cutting die at no charge. We can hold this pricing for 30 days, and step it down again past 10,000 units a month.",
-};
-const CLOSE: Record<Tone, string> = {
-  friendly: "Happy to send samples whenever you're ready — just say the word.\n\nBest,\nLan",
-  formal: "We would be glad to provide samples upon request.\n\nKind regards,\nLan Nguyen\nSunrise Packaging",
-};
-const draftFor = (tone: Tone, length: Length) =>
-  `${OPENING[tone]}\n\n${OFFER[length]}\n\n${CLOSE[tone]}`;
-
-export function TplDraft() {
-  const [phase, setPhase] = useState<"idle" | "drafting" | "ready" | "sent">("idle");
-  const [tone, setTone] = useState<Tone>("friendly");
-  const [length, setLength] = useState<Length>("short");
-  const [draft, setDraft] = useState("");
-  const [target, setTarget] = useState("");
-  const [revealed, setRevealed] = useState(0);
-
-  // Stream the draft text in, word by word, then hand it to the editor.
-  useEffect(() => {
-    if (phase !== "drafting") return;
-    const words = target.split(" ");
-    if (revealed >= words.length) {
-      setDraft(target);
-      setPhase("ready");
-      return;
-    }
-    const t = setTimeout(() => setRevealed((r) => r + 2), revealed === 0 ? 200 : 45);
-    return () => clearTimeout(t);
-  }, [phase, revealed, target]);
-
-  const startDraft = () => {
-    setTarget(draftFor(tone, length));
-    setRevealed(0);
-    setDraft("");
-    setPhase("drafting");
-  };
-
-  const streamed = phase === "drafting" ? target.split(" ").slice(0, revealed).join(" ") : "";
-
-  return (
-    <ScrollView style={{ backgroundColor: colors.white }} contentContainerStyle={{ padding: 28, paddingBottom: 80 }}>
-      <View style={{ maxWidth: 720, width: "100%", alignSelf: "center", gap: 16 }}>
-        <View style={{ gap: 2 }}>
-          <Text size="xl" weight="semibold">Reply to inquiry</Text>
-          <Text size="sm" color="muted">The agent drafts a reply from the message; you set the tone, then edit before sending.</Text>
-        </View>
-
-        <Card style={{ padding: 0 }}>
-          <CardHeader><CardHeaderTitle>Inbound</CardHeaderTitle></CardHeader>
-          <CardBody>
-            <View style={{ flexDirection: "row", gap: 10 }}>
-              <View style={{ width: 28, height: 28, borderRadius: 14, backgroundColor: colors.zinc[200], alignItems: "center", justifyContent: "center" }}>
-                <Text size="xs" weight="semibold" color="muted">MT</Text>
-              </View>
-              <Text size="sm" style={{ flex: 1 }}>{INBOUND}</Text>
-            </View>
-          </CardBody>
-        </Card>
-
-        {phase === "sent" ? (
-          <Card>
-            <CompletionState title="Reply sent" summary="Your edited draft was sent to Maya Tran.">
-              <Button title="Draft another" color="secondary" onPress={() => { setPhase("idle"); setDraft(""); }} />
-            </CompletionState>
-          </Card>
-        ) : (
-          <Card style={{ padding: 0 }}>
-            <CardHeader>
-              <CardHeaderTitle info="Tone and length steer the draft; you edit the result before it goes out.">Your reply</CardHeaderTitle>
-            </CardHeader>
-            <CardBody>
-              <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 16 }}>
-                <View style={{ gap: 6 }}>
-                  <Text size="xs" color="muted" weight="medium">Tone</Text>
-                  <SegmentedControl
-                    accessibilityLabel="Tone"
-                    options={[{ label: "Friendly", value: "friendly" }, { label: "Formal", value: "formal" }]}
-                    value={tone}
-                    onValueChange={setTone}
-                    disabled={phase === "drafting"}
-                  />
-                </View>
-                <View style={{ gap: 6 }}>
-                  <Text size="xs" color="muted" weight="medium">Length</Text>
-                  <SegmentedControl
-                    accessibilityLabel="Length"
-                    options={[{ label: "Short", value: "short" }, { label: "Detailed", value: "detailed" }]}
-                    value={length}
-                    onValueChange={setLength}
-                    disabled={phase === "drafting"}
-                  />
-                </View>
-              </View>
-
-              {phase === "idle" ? (
-                <View style={{ alignItems: "flex-start", paddingTop: 4 }}>
-                  <Button title="Draft a reply" color="primary" onPress={startDraft} />
-                </View>
-              ) : null}
-
-              {phase === "drafting" ? (
-                <View style={{ borderWidth: 1, borderColor: colors.zinc[200], borderRadius: 10, padding: 14, gap: 10, backgroundColor: colors.white }}>
-                  <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-                    <Text size="xs" color="muted" weight="medium" style={{ flex: 1 }}>Drafting</Text>
-                    <DotsIndicator size={5} color={colors.zinc[900]} />
-                  </View>
-                  <Text size="sm">{streamed}</Text>
-                </View>
-              ) : null}
-
-              {phase === "ready" ? (
-                <TextInputField value={draft} onChangeText={setDraft} multiline numberOfLines={12} autoGrow />
-              ) : null}
-            </CardBody>
-
-            {phase === "ready" ? (
-              <CardFooter>
-                <View style={{ flex: 1 }} />
-                <Button title="Regenerate" color="secondary" icon="rotate-ccw" onPress={startDraft} />
-                <Button title="Send reply" color="primary" onPress={() => setPhase("sent")} />
-              </CardFooter>
-            ) : null}
-          </Card>
-        )}
-      </View>
-    </ScrollView>
-  );
-}