Collaborative documents and little apps your agent can build, inspect and maintain.

# Launch plan: billing v2

<Summary>Ship **this Thursday** unless the load test fails. Vote on the day below.</Summary>

<Stats>
  <Stat label="Beta signups" value="1,284" delta="+18%" />
  <Stat label="Open bugs" value="7" delta="-5" invert />
  <Stat label="p95 checkout" value="420ms" delta="-12%" invert />
</Stats>

```mermaid
flowchart LR
  Freeze[Code freeze] --> Load[Load test] --> Ship
  Load -- fails --> Fix[Fix and retest] --> Load
```

<Chart type="area" data="signups.json" x="week" y="signups" height={200} />

## Decide

<Poll id="day" question="When do we launch?" options={["This Thursday", "Next Thursday"]} />

<Approval id="go" title="Go for launch" description="Sign off once your part is ready." approvers={["priya.shah@example.com", "marcus.lee@example.com", "tom.okafor@example.com"]} />

<Checklist id="launch" items={["Docs", "Status page", "Announcement email"]} />

<Comments />

import { useState } from "react";
import { Avatar, Input } from "@a/ui";
import { useSharedMap, useViewer } from "@a/hooks";
import { ThumbsUp } from "lucide-react";

type Card = { col: string; text: string; by: string | null };
const COLUMNS = ["Went well", "To improve", "Actions"];

export default function Retro() {
  const cards = useSharedMap<Card>("card");
  const votes = useSharedMap<boolean>("vote"); // vote/<card>/<email>
  const { email, canWrite } = useViewer();
  const [drafts, setDrafts] = useState<Record<string, string>>({});
  const count = (id: string) => votes.entries.filter(([k]) => k.startsWith(`${id}/`)).length;
  const mine = (id: string) => votes.get(`${id}/${email}`);

  function add(col: string) {
    const text = drafts[col]?.trim();
    if (!text || !canWrite) return;
    cards.set(crypto.randomUUID(), { col, text, by: email });
    setDrafts({ ...drafts, [col]: "" });
  }
  function vote(id: string) {
    const key = `${id}/${email}`;
    mine(id) ? votes.delete(key) : votes.set(key, true);
  }

  return (
    <div className="grid min-h-full content-start gap-4 px-5 pt-5 pb-20 sm:grid-cols-3">
      {COLUMNS.map((col) => (
        <section key={col} className="flex flex-col gap-2">
          <h2 className="text-sm font-semibold text-muted-foreground">{col}</h2>
          {cards.entries
            .filter(([, c]) => c.col === col)
            .sort((a, b) => count(b[0]) - count(a[0]))
            .map(([id, c]) => (
              <div key={id} className="flex items-start gap-2 rounded-lg border border-border bg-card p-3 text-sm">
                <Avatar email={c.by ?? undefined} size="sm" />
                <span className="flex-1">{c.text}</span>
                <button
                  className={`flex items-center gap-1 text-xs ${mine(id) ? "text-primary" : "text-muted-foreground"}`}
                  disabled={!canWrite}
                  onClick={() => vote(id)}
                >
                  <ThumbsUp className="size-3.5" /> {count(id)}
                </button>
              </div>
            ))}
          <Input
            placeholder="Add a card…"
            value={drafts[col] ?? ""}
            disabled={!canWrite}
            onChange={(e) => setDrafts({ ...drafts, [col]: e.target.value })}
            onKeyDown={(e) => e.key === "Enter" && add(col)}
          />
        </section>
      ))}
    </div>
  );
}

# Cloud costs: September

<Summary>Spend fell **14%** to $18.2k after CI moved to spot instances.</Summary>

<Stats>
  <Stat label="Total" value="$18.2k" delta="-14%" invert />
  <Stat label="Compute" value="$11.0k" delta="-22%" invert />
  <Stat label="Storage" value="$4.1k" delta="+6%" invert />
</Stats>

<Chart type="bar" data="monthly.json" x="month" y="compute storage network" stacked height={220} />

<Table
  data="services.json"
  columns={["service", "team", { key: "cost", format: "currency" }, { key: "change", format: "percent" }]}
  sort="-cost"
  search
/>

<Callout tone="warning" title="Storage keeps growing">
  Logs are kept for 90 days. Keeping 30 would save about $900 a month.
</Callout>

## October budgets

<Form
  id="budget"
  title="Your team's October budget"
  description="One answer per team lead. You can change yours until the 25th."
  fields={[
    { name: "team", label: "Team", type: "select", options: ["Platform", "Search", "Data", "Web"], required: true },
    { name: "budget", label: "Budget ($)", type: "number", required: true },
    { name: "logs", label: "Cut log retention to 30 days", type: "checkbox" },
  ]}
/>

<Notes id="followups" placeholder="Follow-ups for next month…" rows={3} />