Attachment tray

Three chips in three states above a composer. Attached is not the same as read: one file is extracted and reports the share of the context budget it took, one is still extracting, and one uploaded perfectly with no text layer inside it.

npx shadcn@latest add progress button
npm i lucide-react

Tokens this needs: --card, --card-foreground, --muted, --muted-foreground, --border, --status-warn, --chart-1, --scale-seq-1, --scale-seq-3
The status, chart, scale, state and direction names are an extension,
not a rename. shadcn has --destructive and five --chart-* and nothing
else in this territory.

────────────────────────────────────────────────────────────────────────
// AttachmentTray.tsx
────────────────────────────────────────────────────────────────────────

import { X } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Progress } from "@/components/ui/progress";
import { cn } from "@/lib/utils";

/**
 * Attached is not the same as read. The states in between are where the
 * honesty lives, and the set is closed so a chip can never sit in a state the
 * tray has no words for.
 */
export type Attachment = { id: string; name: string } & (
  | { state: "uploading"; progress: number }
  | { state: "extracting"; progress: number }
  /** Read, in whole or in part. `used` of `total` is what the model will see. */
  | { state: "ready"; used: number; total: number; unit: "pages" | "rows" | "tokens"; tokens: number }
  /** Uploaded perfectly and holds nothing a text model can read. */
  | { state: "empty"; reason: string }
  | { state: "failed"; reason: string }
);

type Props = {
  items: Attachment[];
  /** The window the documents and the conversation draw on, in tokens. */
  budget: number;
  /** What the conversation itself has used so far. */
  conversationTokens: number;
  /** The wrong file gets picked constantly. */
  onRemove: (id: string) => void;
};

/** The second line of a chip. Silent truncation is the failure, so a partial
 *  read says how much was used rather than just "ready". */
const status = (a: Attachment) => {
  switch (a.state) {
    case "uploading": return "uploading…";
    case "extracting": return "extracting…";
    case "ready": return a.used < a.total ? `${a.used} of ${a.total} ${a.unit} used` : `${a.total} ${a.unit} read`;
    case "empty": return a.reason;
    case "failed": return `extraction failed: ${a.reason}`;
  }
};

export function AttachmentTray({ items, budget, conversationTokens, onRemove }: Props) {
  const documentTokens = items.reduce((n, a) => n + (a.state === "ready" ? a.tokens : 0), 0);
  const share = (n: number) => `${Math.min(100, Math.round((n / budget) * 1000) / 10)}%`;

  return (
    <div>
      <ul className="flex flex-wrap gap-3" aria-label="Attachments">
        {items.map((a) => {
          const flagged = a.state === "empty" || a.state === "failed";
          return (
            <li
              key={a.id}
              className={cn("flex items-start gap-2 rounded-md border bg-muted px-3 py-2", flagged && "border-status-warn")}
            >
              <div className="min-w-0">
                <p className="truncate text-xs text-card-foreground" title={a.name}>{a.name}</p>
                <p className={cn("mt-0.5 text-[11px] tabular-nums", flagged ? "text-status-warn" : "text-muted-foreground")}>
                  {status(a)}
                </p>
                {(a.state === "uploading" || a.state === "extracting") && (
                  <Progress
                    value={a.progress}
                    aria-label={`${a.name} ${a.state}`}
                    className="mt-1 h-[3px] w-[140px] bg-muted-foreground/20 [&>div]:bg-chart-1"
                  />
                )}
              </div>
              <Button
                variant="ghost"
                size="sm"
                className="-mr-2 -mt-1 h-6 w-6 p-0 text-muted-foreground"
                onClick={() => onRemove(a.id)}
                aria-label={`Remove ${a.name}`}
              >
                <X className="size-3" />
              </Button>
            </li>
          );
        })}
      </ul>

      {/* One window, two claimants. The documents crowd the conversation and
          the viewer needs to see that before the answer comes back short. */}
      <div className="mt-4">
        <div
          className="flex h-3 w-full overflow-hidden rounded-[2px] bg-muted"
          role="img"
          aria-label={`documents ${share(documentTokens)} and conversation ${share(conversationTokens)} of the context budget`}
        >
          <span className="bg-scale-seq-3" style={{ width: share(documentTokens) }} />
          <span className="bg-scale-seq-1" style={{ width: share(conversationTokens) }} />
        </div>
        <div className="relative mt-1.5 h-4 text-[11px] text-muted-foreground">
          <span className="absolute left-0">documents</span>
          <span className="absolute" style={{ left: share(documentTokens) }}>conversation</span>
          <span className="absolute right-0">context budget</span>
        </div>
      </div>
    </div>
  );
}

────────────────────────────────────────────────────────────────────────
// demo.tsx
────────────────────────────────────────────────────────────────────────

import { useState } from "react";
import { AttachmentTray, type Attachment } from "./AttachmentTray";

/**
 * Three chips in three states. The lease was read in part and says so, the
 * spreadsheet is still extracting, and the 2019 scan uploaded fine with no
 * text layer inside it. The budget is a 200k window: the lease took 128k of
 * it and the conversation has used 32k.
 */
const ITEMS: Attachment[] = [
  { id: "lease", name: "lease.pdf", state: "ready", used: 40, total: 312, unit: "pages", tokens: 128_000 },
  { id: "figures", name: "figures.xlsx", state: "extracting", progress: 41 },
  { id: "scan", name: "scan-2019.pdf", state: "empty", reason: "no text layer, nothing to read" },
];

export default function Demo() {
  const [items, setItems] = useState(ITEMS);
  return (
    <div className="rounded-lg border bg-card p-4">
      <AttachmentTray
        items={items}
        budget={200_000}
        conversationTokens={32_000}
        onRemove={(id) => setItems(items.filter((a) => a.id !== id))}
      />
    </div>
  );
}