chore: dev dep @playwright/test

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

components/history-item.tsx

@@ -0,0 +1,30 @@
+"use client";
+import { rename, remove } from "@/lib/actions";
+
+export function HistoryItem({ row }: { row: { id: string; title: string; status: string; created_at: number } }) {
+  // The server actions take (previousState, formData) for useActionState; a plain <form action> passes only
+  // formData, so bind the unused slot here rather than duplicating two single-arg actions.
+  const doRename = (fd: FormData) => rename(null, fd);
+  const doRemove = (fd: FormData) => remove(null, fd);
+  const when = new Date(row.created_at).toLocaleString(undefined,
+    { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
+  return <li className="card" style={{ padding: "var(--qai-space-md)", display: "grid", gap: "var(--qai-space-s)" }}>
+    <a href={`/app/${row.id}`} style={{ color: "var(--qai-ink)", textDecoration: "none", fontSize: "var(--qai-text-sm)" }}>
+      {row.title}{row.status !== "done" && <span className="pill" style={{ marginInlineStart: 8 }}>{row.status}</span>}
+    </a>
+    <div style={{ display: "flex", gap: "var(--qai-space-s)", alignItems: "center", flexWrap: "wrap" }}>
+      <span className="label">{when}</span>
+      <form action={doRename} style={{ display: "flex", gap: 4, marginLeft: "auto" }}>
+        <input type="hidden" name="id" value={row.id} />
+        <input className="field" name="title" aria-label="New name" defaultValue={row.title}
+               style={{ width: 90, padding: "4px 6px" }} />
+        <button className="btn" style={{ padding: "4px 8px" }}>Save</button>
+      </form>
+      {/* Delete is the only destructive action in the product: it never fires on a stray click. */}
+      <form action={doRemove} onSubmit={(e) => { if (!confirm("Delete this analysis?")) e.preventDefault(); }}>
+        <input type="hidden" name="id" value={row.id} />
+        <button className="btn" style={{ padding: "4px 8px" }}>Delete</button>
+      </form>
+    </div>
+  </li>;
+}