@lotics/ui 5.9.0 → 5.10.1

package/examples/tpl_task_board.tsx

@@ -0,0 +1,473 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Pressable, ScrollView, StyleSheet, View } from "react-native";
+import { Text } from "@lotics/ui/text";
+import { colors, solid, asColorName } from "@lotics/ui/colors";
+import { Icon } from "@lotics/ui/icon";
+import { CheckCircle } from "@lotics/ui/check_circle";
+import { OptionBadge, type OptionValue } from "@lotics/ui/option_badge";
+import { MemberChip } from "@lotics/ui/member_chip";
+import { Avatar } from "@lotics/ui/avatar";
+import { SearchInput } from "@lotics/ui/search_input";
+import { FilterChip } from "@lotics/ui/filter_chip";
+import { OptionList } from "@lotics/ui/option_list";
+import { Button } from "@lotics/ui/button";
+import { InlineTextInput } from "@lotics/ui/inline_text_input";
+import { InlineMemberSelect } from "@lotics/ui/inline_member_select";
+import { InlineDatePicker } from "@lotics/ui/inline_date_picker";
+import { InlineSelect } from "@lotics/ui/inline_select";
+import { Select } from "@lotics/ui/select";
+import { TextInputField } from "@lotics/ui/text_input_field";
+import { Popover, PopoverTrigger, PopoverContent } from "@lotics/ui/popover";
+import { FilesEditor } from "@lotics/ui/files_editor";
+import { FileThumbnail, type DisplayFile } from "@lotics/ui/file_thumbnail";
+import { DataGrid, gridRowStyle, type DataGridColumn, type DataGridGroup } from "@lotics/ui/data_grid";
+import { cycleSort, sortBy, type SortState } from "@lotics/ui/sort_header";
+import { Composer } from "@lotics/ui/composer";
+import { AgentRun, type AgentRunItem } from "@lotics/ui/agent_run";
+import { ChangeReview, ChangeReviewActions, type ChangeReviewItemStatus } from "@lotics/ui/change_review";
+import { Dialog, DialogHeader, DialogHeaderTitle, DialogScrollArea, DialogFooter } from "@lotics/ui/dialog";
+import { CompletionState } from "@lotics/ui/completion_state";
+import { Confidence, type ConfidenceLevel } from "@lotics/ui/confidence";
+import { toISODate } from "@lotics/ui/format_date";
+
+type TagOption = { value: string; label: string };
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Template · Task board — the manager's view, built on the `DataGrid` primitive
+// (the inline-managed grouped table). The board OWNS its data, state, toolbar,
+// columns and per-group add; `DataGrid` owns the sortable header, the collapsible
+// grouped sections and the aligned rows. Sibling: tpl_pipeline (same shape, deals).
+// Moderate data only — for 10k+ records you browse, use the paginated register.
+// ─────────────────────────────────────────────────────────────────────────────
+
+const MEMBERS = [
+  { id: "m1", name: "Mai Anh" },
+  { id: "m2", name: "Trọng" },
+  { id: "m3", name: "Linh" },
+  { id: "m4", name: "Sơn" },
+];
+const MEMBER_OPTS = MEMBERS.map((m) => ({ value: m.id, label: m.name }));
+const memberName = (id: string | null) => MEMBERS.find((m) => m.id === id)?.name ?? "—";
+
+type Status = "todo" | "doing" | "done";
+const STATUS: Record<Status, OptionValue> = {
+  todo: { key: "todo", label: "To do", color: null },
+  doing: { key: "doing", label: "Doing", color: "amber" },
+  done: { key: "done", label: "Done", color: "emerald" },
+};
+const STATUS_ORDER = Object.keys(STATUS) as Status[];
+const STATUS_OPTIONS = STATUS_ORDER.map((s) => ({ value: s, label: STATUS[s].label }));
+const renderStatusBadge = (o: { value: string }) => <OptionBadge value={STATUS[o.value as Status]} variant="dot" />;
+
+const TAGS: Record<string, OptionValue> = {
+  client: { key: "client", label: "Client", color: "blue" },
+  design: { key: "design", label: "Design", color: "cyan" },
+  print: { key: "print", label: "Print", color: "amber" },
+  urgent: { key: "urgent", label: "Urgent", color: "rose" },
+};
+const TAG_OPTIONS: TagOption[] = Object.values(TAGS).map((t) => ({ value: String(t.key), label: t.label }));
+const tagOf = (k: string): TagOption => ({ value: k, label: TAGS[k]?.label ?? k });
+const tagBadge = (t: TagOption): OptionValue => TAGS[t.value] ?? { key: t.value, label: t.label, color: null };
+const renderTagBadge = (o: { value: string; label?: string }) => <OptionBadge value={tagBadge({ value: o.value, label: o.label ?? o.value })} variant="dot" />;
+
+interface Task {
+  id: string;
+  title: string;
+  ownerId: string | null;
+  due: string | null;
+  status: Status;
+  tags: TagOption[];
+  files: DisplayFile[];
+}
+
+const day = (n: number): string => {
+  const d = new Date();
+  d.setDate(d.getDate() + n);
+  return toISODate(d);
+};
+
+// A self-contained SVG data-URI image so seeds preview offline in the gallery.
+const sampleImage = (label: string, fill: string): DisplayFile => ({
+  id: `seed-${label}`,
+  filename: `${label}.png`,
+  mimeType: "image/png",
+  url: "data:image/svg+xml," + encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="320" height="240"><rect width="320" height="240" fill="${fill}"/><text x="160" y="128" font-family="sans-serif" font-size="22" fill="white" text-anchor="middle">${label}</text></svg>`),
+});
+
+// New attachments map a picked browser File → a DisplayFile (local object URL).
+// A host wires its own upload here; the template just previews in place.
+let fileSeq = 0;
+const toDisplayFiles = (files: File[]): DisplayFile[] =>
+  files.map((f) => ({ id: `f${++fileSeq}`, filename: f.name, mimeType: f.type || "application/octet-stream", url: URL.createObjectURL(f) }));
+
+const SEED: Task[] = [
+  { id: "t1", title: "Send VITTORIA their quote", ownerId: "m1", due: day(-2), status: "doing", tags: [tagOf("client"), tagOf("urgent")], files: [sampleImage("quote-draft", "#3b82f6")] },
+  { id: "t2", title: "Finalize the gift-box packaging design", ownerId: "m3", due: day(0), status: "doing", tags: [tagOf("design")], files: [] },
+  { id: "t3", title: "Sign off the die-cut sample", ownerId: "m1", due: day(0), status: "todo", tags: [tagOf("design"), tagOf("print")], files: [sampleImage("die-cut", "#10b981"), sampleImage("sample-2", "#f59e0b")] },
+  { id: "t4", title: "Order 300g ivory board stock", ownerId: "m2", due: day(3), status: "todo", tags: [tagOf("print")], files: [] },
+  { id: "t5", title: "Schedule the first delivery batch", ownerId: "m4", due: day(9), status: "todo", tags: [], files: [] },
+  { id: "t6", title: "Draft the 2026 print contract", ownerId: null, due: null, status: "todo", tags: [tagOf("client")], files: [] },
+  { id: "t7", title: "Update the Q3 price list", ownerId: "m3", due: day(-5), status: "done", tags: [], files: [] },
+];
+
+type GroupBy = "status" | "assignee" | "due";
+const GROUP_OPTIONS: { value: GroupBy; label: string }[] = [
+  { value: "status", label: "Status" },
+  { value: "assignee", label: "Assignee" },
+  { value: "due", label: "Due date" },
+];
+
+function dueBucketKey(due: string | null): string {
+  if (!due) return "none";
+  const d = due.slice(0, 10);
+  const today = day(0);
+  if (d < today) return "overdue";
+  if (d === today) return "today";
+  if (d <= day(7)) return "week";
+  return "later";
+}
+const DUE_LABELS: Record<string, string> = { overdue: "Overdue", today: "Today", week: "This week", later: "Later", none: "No date" };
+const DUE_ORDER = ["overdue", "today", "week", "later", "none"];
+const DUE_PRESET: Record<string, string | null> = { overdue: day(-1), today: day(0), week: day(3), later: day(14), none: null };
+
+function presetFor(groupBy: GroupBy | null, key: string): Partial<Task> {
+  if (groupBy === "status") return { status: key as Status };
+  if (groupBy === "assignee") return { ownerId: key === "none" ? null : key };
+  if (groupBy === "due") return { due: DUE_PRESET[key] ?? null };
+  return {};
+}
+
+function sortValue(t: Task, key: string): string | number {
+  switch (key) {
+    case "title": return t.title.toLowerCase();
+    case "assignee": return t.ownerId ? memberName(t.ownerId).toLowerCase() : "￿";
+    case "due": return t.due ?? "￿";
+    case "status": return STATUS_ORDER.indexOf(t.status);
+    case "tags": return t.tags[0]?.label.toLowerCase() ?? "￿";
+    default: return "";
+  }
+}
+
+// ── AI · draft tasks from notes — agent proposes, the manager keeps/edits/drops ──
+type Phase = "idle" | "reading" | "review" | "done";
+interface Proposal { id: string; title: string; due: string | null; confidence: ConfidenceLevel; source: string }
+const DRAFT_STEPS: { label: string; detail: string }[] = [
+  { label: "Split the notes into candidate tasks", detail: "6 lines" },
+  { label: "Drop greetings and lines that aren't actions", detail: "kept 4" },
+  { label: "Infer a due date from each phrase", detail: "2 dated · 2 left open" },
+];
+const DRAFTED: Proposal[] = [
+  { id: "p1", title: "Send VITTORIA the revised quote", due: day(1), confidence: "high", source: "“…told VITTORIA they'd have the updated quote by tomorrow.”" },
+  { id: "p2", title: "Re-check the die-cut sample with the workshop", due: day(3), confidence: "medium", source: "“…workshop to measure the sample again, maybe Thursday.”" },
+  { id: "p3", title: "Order 300g ivory board for the gift-box run", due: null, confidence: "high", source: "“…order the ivory stock this week.”" },
+  { id: "p4", title: "Sit in on the Tet carton press check", due: null, confidence: "low", source: "“…someone should be there for the Tet print run.”" },
+];
+
+export function TplTaskBoard() {
+  const [tasks, setTasks] = useState<Task[]>(SEED);
+  const [query, setQuery] = useState("");
+  const [groupBy, setGroupBy] = useState<GroupBy | null>("status"); // null = ungrouped (cleared)
+  const [assigneeFilter, setAssigneeFilter] = useState<string[]>([]);
+  const [tagFilter, setTagFilter] = useState<string[]>([]);
+  const [collapsed, setCollapsed] = useState<Set<string>>(() => new Set());
+  const toggleCollapse = (key: string) =>
+    setCollapsed((c) => { const n = new Set(c); if (n.has(key)) n.delete(key); else n.add(key); return n; });
+  const [sort, setSort] = useState<SortState | null>(null);
+  const onSort = (key: string) => setSort((s) => cycleSort(s, key));
+
+  const patch = (id: string, next: Partial<Task>) =>
+    setTasks((ts) => ts.map((t) => (t.id === id ? { ...t, ...next } : t)));
+  const addTask = (t: Omit<Task, "id">) =>
+    setTasks((ts) => [...ts, { id: `n${ts.length}-${t.title.length}`, ...t }]);
+  const addFiles = (id: string, picked: File[]) =>
+    setTasks((ts) => ts.map((t) => (t.id === id ? { ...t, files: [...t.files, ...toDisplayFiles(picked)] } : t)));
+  const removeFile = (id: string, fileId: string) =>
+    setTasks((ts) => ts.map((t) => (t.id === id ? { ...t, files: t.files.filter((f) => f.id !== fileId) } : t)));
+
+  // Draft-from-notes AI flow — agent proposes, manager keeps/edits/drops, commit adds tasks.
+  const [draftOpen, setDraftOpen] = useState(false);
+  const [phase, setPhase] = useState<Phase>("idle");
+  const [revealed, setRevealed] = useState(0);
+  const [proposals, setProposals] = useState<Proposal[]>([]);
+  const [decisions, setDecisions] = useState<Record<string, ChangeReviewItemStatus>>({});
+  const [addedCount, setAddedCount] = useState(0);
+
+  const startDraft = useCallback(() => { setRevealed(0); setPhase("reading"); }, []);
+  const resetDraft = useCallback(() => { setProposals([]); setDecisions({}); setRevealed(0); setPhase("idle"); }, []);
+  const closeDraft = useCallback(() => { setDraftOpen(false); resetDraft(); }, [resetDraft]);
+  const editProposal = useCallback((id: string, p: Partial<Proposal>) =>
+    setProposals((ps) => ps.map((x) => (x.id === id ? { ...x, ...p } : x))), []);
+  const decide = useCallback((id: string, status: ChangeReviewItemStatus | null) =>
+    setDecisions((dec) => { const n = { ...dec }; if (status) n[id] = status; else delete n[id]; return n; }), []);
+  const acceptedCount = proposals.filter((p) => decisions[p.id] === "accepted").length;
+  const addAccepted = useCallback(() => {
+    const accepted = proposals.filter((p) => decisions[p.id] === "accepted");
+    setTasks((ts) => [...ts, ...accepted.map((p, i) => ({ id: `d-${p.id}-${i}`, title: p.title, ownerId: null, due: p.due, status: "todo" as Status, tags: [], files: [] }))]);
+    setAddedCount(accepted.length);
+    setPhase("done");
+  }, [proposals, decisions]);
+
+  useEffect(() => {
+    if (phase !== "reading") return;
+    if (revealed >= DRAFT_STEPS.length) {
+      const t = setTimeout(() => { setProposals(DRAFTED); setPhase("review"); }, 850);
+      return () => clearTimeout(t);
+    }
+    const t = setTimeout(() => setRevealed((r) => r + 1), revealed === 0 ? 280 : 680);
+    return () => clearTimeout(t);
+  }, [phase, revealed]);
+
+  const runItems: AgentRunItem[] = [
+    { type: "text", id: "intro", text: "I read your notes and pulled out the work." },
+    ...DRAFT_STEPS.slice(0, Math.min(revealed + 1, DRAFT_STEPS.length)).map((s, i): AgentRunItem => ({
+      type: "step", id: `s${i}`, label: s.label, detail: i < revealed ? s.detail : undefined, status: i < revealed ? "done" : "running",
+    })),
+  ];
+  if (revealed >= DRAFT_STEPS.length) {
+    runItems.push({ type: "text", id: "outro", text: `Drafted ${DRAFTED.length} tasks — keep the ones that look right, edit any before adding.` });
+  }
+
+  const propertyCols: DataGridColumn<Task>[] = [
+    { key: "assignee", label: "Assignee", width: 168, sortable: true, cell: (t) => <InlineMemberSelect members={MEMBERS} value={t.ownerId} onSave={(id) => patch(t.id, { ownerId: id })} placeholder="Unassigned" accessibilityLabel="Assignee" /> },
+    { key: "due", label: "Due", width: 150, sortable: true, cell: (t) => <InlineDatePicker value={t.due} optionalTime onSave={(v) => patch(t.id, { due: v })} placeholder="No date" accessibilityLabel="Due date" /> },
+    { key: "status", label: "Status", width: 132, sortable: true, cell: (t) => <InlineSelect value={t.status} options={STATUS_OPTIONS} onSave={(s) => patch(t.id, { status: s })} renderSelected={renderStatusBadge} renderOptionContent={renderStatusBadge} accessibilityLabel="Status" /> },
+    { key: "tags", label: "Tags", width: 210, cell: (t) => <Select multi searchable allowCustom value={t.tags.map((tag) => tag.value)} onValueChange={(next) => patch(t.id, { tags: next.map(tagOf) })} options={TAG_OPTIONS} renderSelected={renderTagBadge} renderOptionContent={renderTagBadge} style={{ borderColor: "transparent" }} placeholder="Add tags" accessibilityLabel="Tags" /> },
+  ];
+  const filesCol: DataGridColumn<Task> = {
+    key: "files", label: "Files", width: 116, sortable: false,
+    cell: (t) => <FilesCell files={t.files} onAdd={(fs) => addFiles(t.id, fs)} onRemove={(id) => removeFile(t.id, id)} />,
+  };
+  const visibleProps = propertyCols.filter((c) => c.key !== groupBy);
+  const addCols = [...visibleProps, filesCol];
+  const columns: DataGridColumn<Task>[] = [
+    { key: "title", label: "Task", sortable: true, cell: (t) => <InlineTextInput value={t.title} onSave={(v) => patch(t.id, { title: v })} struck={t.status === "done"} accessibilityLabel="Title" /> },
+    ...addCols,
+  ];
+
+  const groups = useMemo<DataGridGroup<Task>[]>(() => {
+    const q = query.trim().toLowerCase();
+    const pool = tasks.filter((t) => {
+      if (q && !(t.title.toLowerCase().includes(q) || t.tags.some((tag) => tag.label.toLowerCase().includes(q)))) return false;
+      if (assigneeFilter.length > 0 && !(t.ownerId && assigneeFilter.includes(t.ownerId))) return false;
+      if (tagFilter.length > 0 && !t.tags.some((tag) => tagFilter.includes(tag.value))) return false;
+      return true;
+    });
+    let out: DataGridGroup<Task>[];
+    if (!groupBy) {
+      out = [{ key: "all", items: pool }];
+    } else if (groupBy === "status") {
+      out = STATUS_ORDER.map((s) => ({ key: s, header: <OptionBadge value={STATUS[s]} variant="dot" />, items: pool.filter((t) => t.status === s) }));
+    } else if (groupBy === "assignee") {
+      out = [
+        ...MEMBERS.map((m) => ({ key: m.id, header: <MemberChip name={m.name} size={22} />, items: pool.filter((t) => t.ownerId === m.id) })),
+        { key: "none", header: <Text size="sm" color="muted">Unassigned</Text>, items: pool.filter((t) => !t.ownerId) },
+      ];
+    } else {
+      out = DUE_ORDER.map((k) => ({ key: k, header: <Text size="xs" weight="semibold" color="muted" style={styles.bucketHead}>{DUE_LABELS[k]}</Text>, items: pool.filter((t) => dueBucketKey(t.due) === k) }));
+    }
+    const sorted = out.map((g) => ({ ...g, items: sortBy(g.items, sort, sortValue) }));
+    return groupBy === "status" ? sorted : sorted.filter((g) => g.items.length > 0);
+  }, [tasks, query, groupBy, assigneeFilter, tagFilter, sort]);
+
+  return (
+    <>
+    <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ paddingVertical: 28, paddingHorizontal: 24, paddingBottom: 96 }}>
+      <View style={{ maxWidth: 1040, width: "100%", alignSelf: "center", gap: 16 }}>
+        <Text size="xl" weight="semibold">Task board</Text>
+
+        <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+          <View style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: 8, flex: 1 }}>
+            <View style={{ flexGrow: 1, flexBasis: 240, minWidth: 200, maxWidth: 360 }}>
+              <SearchInput value={query} onChangeText={setQuery} placeholder="Search tasks…" accessibilityLabel="Search tasks" />
+            </View>
+          <FilterChip label="Group by" summary={groupBy ? GROUP_OPTIONS.find((g) => g.value === groupBy)?.label : undefined} onClear={() => setGroupBy(null)} clearLabel="Clear grouping">
+            {({ close }) => <OptionList search={{ mode: "none" }} options={GROUP_OPTIONS} value={groupBy ?? undefined} onValueChange={(v) => v && setGroupBy(v)} onRequestClose={close} />}
+          </FilterChip>
+          <FilterChip
+            label="Assignee"
+            summary={assigneeFilter.length > 0 ? <View style={styles.summary}>{assigneeFilter.slice(0, 4).map((id) => <Avatar key={id} name={memberName(id)} size={20} />)}</View> : undefined}
+            onClear={() => setAssigneeFilter([])}
+            clearLabel="Clear assignee filter"
+          >
+            <OptionList search={{ mode: "none" }} multi options={MEMBER_OPTS} value={assigneeFilter} onValueChange={setAssigneeFilter} renderOptionContent={(o) => <MemberChip name={o.label ?? memberName(o.value)} size={22} />} />
+          </FilterChip>
+          <FilterChip
+            label="Tag"
+            summary={tagFilter.length > 0 ? <View style={styles.summary}>{tagFilter.map((v) => <View key={v} style={[styles.summaryDot, { backgroundColor: solid(asColorName(TAGS[v]?.color)) }]} />)}</View> : undefined}
+            onClear={() => setTagFilter([])}
+            clearLabel="Clear tag filter"
+          >
+            <OptionList search={{ mode: "none" }} multi options={TAG_OPTIONS} value={tagFilter} onValueChange={setTagFilter} renderOptionContent={(o) => <OptionBadge value={tagBadge({ value: o.value, label: o.label ?? o.value })} variant="dot" />} />
+          </FilterChip>
+          </View>
+          <Button title="Draft from notes" color="primary" onPress={() => setDraftOpen(true)} />
+        </View>
+
+        <DataGrid
+          columns={columns}
+          groups={groups}
+          getRowKey={(t) => t.id}
+          leading={{ width: 20, render: (t) => <CheckCircle checked={t.status === "done"} onChange={(on) => patch(t.id, { status: on ? "done" : "todo" })} accessibilityLabel={t.title} /> }}
+          sort={sort}
+          onSort={onSort}
+          collapsed={collapsed}
+          onToggleCollapse={toggleCollapse}
+          renderGroupFooter={(g) => <TaskAddRow preset={presetFor(groupBy, g.key)} columns={addCols} onAdd={addTask} />}
+        />
+      </View>
+    </ScrollView>
+
+    {/* Draft from notes — Composer → AgentRun → ChangeReview → commit (adds tasks). */}
+    <Dialog open={draftOpen} onOpenChange={(o) => { if (!o) closeDraft(); }} maxWidth={620}>
+      <DialogHeader><DialogHeaderTitle>Draft from notes</DialogHeaderTitle></DialogHeader>
+      <DialogScrollArea>
+        {phase === "idle" ? (
+          <View style={{ gap: 12 }}>
+            <Text size="sm" color="muted">Paste meeting notes, a brief, or an email. Lotics drafts tasks from it — nothing is added until you review and keep them.</Text>
+            <Composer onSend={startDraft} placeholder="Paste your notes…" autoFocus sendLabel="Draft tasks" />
+          </View>
+        ) : null}
+        {phase === "reading" ? <AgentRun items={runItems} state={revealed >= DRAFT_STEPS.length ? "done" : "streaming"} /> : null}
+        {phase === "review" ? (
+          <ChangeReview
+            title="Drafted tasks"
+            summary={`${proposals.length} from your notes — keep, edit, or drop each. A “Low” mark is worth a glance.`}
+            items={proposals}
+            getKey={(p) => p.id}
+            statusOf={(p) => decisions[p.id] ?? "pending"}
+            renderItem={(p) => <TaskProposal proposal={p} onEdit={editProposal} />}
+            renderSummary={(p, kept) => (
+              <Text size="sm" numberOfLines={1} color={kept ? "default" : "muted"} style={kept ? undefined : { textDecorationLine: "line-through" }}>{p.title}</Text>
+            )}
+            onAcceptItem={(i) => decide(proposals[i].id, "accepted")}
+            onRejectItem={(i) => decide(proposals[i].id, "rejected")}
+            onUndoItem={(i) => decide(proposals[i].id, null)}
+          />
+        ) : null}
+        {phase === "done" ? (
+          <CompletionState title={`${addedCount} ${addedCount === 1 ? "task" : "tasks"} added`} summary="They're on the board now." />
+        ) : null}
+      </DialogScrollArea>
+      {phase === "review" ? (
+        <DialogFooter>
+          <ChangeReviewActions items={proposals} statusOf={(p) => decisions[p.id] ?? "pending"} onAcceptItem={(i) => decide(proposals[i].id, "accepted")} onApply={addAccepted} onDiscard={resetDraft} applyLabel={`Add ${acceptedCount} ${acceptedCount === 1 ? "task" : "tasks"}`} />
+        </DialogFooter>
+      ) : phase === "done" ? (
+        <DialogFooter>
+          <Button title="Draft more" color="secondary" onPress={resetDraft} />
+          <Button title="Done" color="primary" onPress={closeDraft} />
+        </DialogFooter>
+      ) : null}
+    </Dialog>
+    </>
+  );
+}
+
+function TaskProposal({ proposal, onEdit }: { proposal: Proposal; onEdit: (id: string, p: Partial<Proposal>) => void }) {
+  return (
+    <View style={{ gap: 10 }}>
+      <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 12 }}>
+        <View style={{ flex: 1 }}>
+          <InlineTextInput value={proposal.title} onSave={(v) => onEdit(proposal.id, { title: v })} accessibilityLabel="Task title" />
+        </View>
+        <View style={{ paddingTop: 10 }}><Confidence level={proposal.confidence} /></View>
+      </View>
+      <View style={{ width: 220 }}>
+        <InlineDatePicker value={proposal.due} optionalTime onSave={(v) => onEdit(proposal.id, { due: v })} placeholder="No date" accessibilityLabel="Due date" />
+      </View>
+      <View style={styles.source}><Text size="xs" color="muted">{proposal.source}</Text></View>
+    </View>
+  );
+}
+
+// In the grid, the cell shows a glanceable thumbnail preview (the first couple of
+// files + a "+N" count, or a paperclip when empty); pressing reveals a popover
+// with the full `FilesEditor` (preview, download, remove, attach, select mode).
+function FilesCell({ files, onAdd, onRemove }: { files: DisplayFile[]; onAdd: (picked: File[]) => void; onRemove: (id: string) => void }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <Popover open={open} onOpenChange={setOpen} side="bottom" align="end">
+      <PopoverTrigger>
+        <Pressable
+          onPress={() => setOpen(true)}
+          accessibilityRole="button"
+          accessibilityLabel={files.length > 0 ? `${files.length} attachments` : "Add attachment"}
+          style={({ hovered }: { hovered?: boolean }) => [styles.clip, hovered ? styles.clipHover : null]}
+        >
+          {files.length > 0 ? (
+            <View pointerEvents="none" style={styles.clipPreview}>
+              {files.slice(0, 2).map((f) => <FileThumbnail key={f.id} file={f} size={30} />)}
+              {files.length > 2 ? <Text size="xs" weight="medium" color="muted" tabular>+{files.length - 2}</Text> : null}
+            </View>
+          ) : (
+            <Icon name="paperclip" size={15} color={colors.zinc[400]} />
+          )}
+        </Pressable>
+      </PopoverTrigger>
+      <PopoverContent>
+        <View style={{ width: 340, padding: 8 }}>
+          <FilesEditor files={files} itemSize={76} onAdd={onAdd} onRemove={onRemove} />
+        </View>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function TaskAddRow({ preset, columns, onAdd }: { preset: Partial<Task>; columns: DataGridColumn<Task>[]; onAdd: (t: Omit<Task, "id">) => void }) {
+  const [title, setTitle] = useState("");
+  const [ownerId, setOwnerId] = useState<string | null>(null);
+  const [due, setDue] = useState<string | null>(null);
+  const [status, setStatus] = useState<Status>("todo");
+  const [tags, setTags] = useState<TagOption[]>([]);
+
+  const submit = () => {
+    const t = title.trim();
+    if (!t) return;
+    onAdd({ title: t, ownerId, due, status, tags, files: [], ...preset });
+    setTitle("");
+    setOwnerId(null);
+    setDue(null);
+    setStatus("todo");
+    setTags([]);
+  };
+
+  // Files are added once a task exists (per-row paperclip), so the add row leaves
+  // that column empty — the width is still reserved so the columns stay aligned.
+  const editor = (key: string) =>
+    key === "assignee" ? <InlineMemberSelect members={MEMBERS} value={ownerId} onSave={setOwnerId} placeholder="Assignee" accessibilityLabel="Assignee" />
+    : key === "due" ? <InlineDatePicker value={due} optionalTime onSave={setDue} placeholder="No date" accessibilityLabel="Due date" />
+    : key === "status" ? <InlineSelect value={status} options={STATUS_OPTIONS} onSave={setStatus} renderSelected={renderStatusBadge} renderOptionContent={renderStatusBadge} accessibilityLabel="Status" />
+    : key === "tags" ? <Select multi searchable allowCustom value={tags.map((tag) => tag.value)} onValueChange={(next) => setTags(next.map(tagOf))} options={TAG_OPTIONS} renderSelected={renderTagBadge} renderOptionContent={renderTagBadge} style={{ borderColor: "transparent" }} placeholder="Add tags" accessibilityLabel="Tags" />
+    : null;
+
+  return (
+    <View style={[gridRowStyle, styles.add]}>
+      <View style={styles.ring} />
+      <View style={styles.addField}>
+        <View style={{ flex: 1 }}>
+          <TextInputField value={title} onChangeText={setTitle} onSubmitEditing={submit} placeholder="Add a task…" style={styles.input} accessibilityLabel="Add a task" />
+        </View>
+        {title.trim() ? <Button title="Save" color="primary" onPress={submit} /> : null}
+      </View>
+      {columns.map((c) => (
+        <View key={c.key} style={{ width: c.width }}>{editor(c.key)}</View>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  bucketHead: { letterSpacing: 0.3, textTransform: "uppercase" },
+  add: { opacity: 0.9 },
+  ring: { width: 20, height: 20, borderRadius: 10, borderWidth: 1.5, borderColor: colors.zinc[300], borderStyle: "dashed" },
+  input: { borderWidth: 0, backgroundColor: "transparent" },
+  addField: { flex: 1, flexDirection: "row", alignItems: "center", gap: 8, paddingRight: 4 },
+  // Match the inline-editor cells' resting box (INLINE_CONTROL_HEIGHT = 40) so the
+  // files field lines up with the others — and that height affords a larger thumbnail.
+  clip: { flexDirection: "row", alignItems: "center", gap: 6, minHeight: 40, paddingHorizontal: 8, borderRadius: 8, cursor: "pointer" },
+  clipHover: { backgroundColor: colors.zinc[100] },
+  clipPreview: { flexDirection: "row", alignItems: "center", gap: 6 },
+  summary: { flexDirection: "row", alignItems: "center", gap: 4 },
+  summaryDot: { width: 8, height: 8, borderRadius: 999 },
+  source: { borderLeftWidth: 2, borderLeftColor: colors.zinc[200], paddingLeft: 10 },
+});