@deck-ui/review 0.2.0

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@deck-ui/review",
+  "version": "0.2.0",
+  "type": "module",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "files": ["src"],
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@deck-ui/core": "^0.1.0"
+  },
+  "dependencies": {
+    "lucide-react": "^0.577.0",
+    "react-markdown": "^10.1.0"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/deliverable-card.tsx

@@ -0,0 +1,27 @@
+import { cn } from "@deck-ui/core";
+import ReactMarkdown from "react-markdown";
+
+export function DeliverableCard({ content }: { content: string }) {
+  return (
+    <div className="rounded-xl border border-black/[0.06] bg-white p-6 shadow-[0_1px_3px_rgba(0,0,0,0.04)]">
+      <div className="prose prose-sm prose-stone max-w-none text-foreground">
+        <ReactMarkdown>{content}</ReactMarkdown>
+      </div>
+    </div>
+  );
+}
+
+export function UserFeedback({ content }: { content: string }) {
+  return (
+    <div className="flex justify-end">
+      <div
+        className={cn(
+          "max-w-[70%] rounded-3xl bg-[#f4f4f4] px-5 py-2.5",
+          "text-sm text-foreground",
+        )}
+      >
+        {content}
+      </div>
+    </div>
+  );
+}

package/src/index.ts

@@ -0,0 +1,19 @@
+export { ReviewSplit } from "./review-split";
+export type { ReviewSplitProps } from "./review-split";
+
+export { ReviewSidebar } from "./review-sidebar";
+export type { ReviewSidebarProps } from "./review-sidebar";
+
+export { ReviewDetailPanel } from "./review-detail-panel";
+export type { ReviewDetailPanelProps } from "./review-detail-panel";
+
+export { ReviewDetail } from "./review-detail";
+export type { ReviewDetailProps } from "./review-detail";
+
+export { ReviewItem } from "./review-item";
+
+export { ReviewEmpty } from "./review-empty";
+
+export { DeliverableCard, UserFeedback } from "./deliverable-card";
+
+export type { ReviewItemData, RunStatus } from "./types";

package/src/review-detail-panel.tsx

@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+import type { ReviewItemData } from "./types";
+
+export interface ReviewDetailPanelProps {
+  item: ReviewItemData;
+  /** Render prop: the host app provides its own chat panel implementation */
+  renderChat: (props: {
+    sessionKey: string;
+    placeholder: string;
+    item: ReviewItemData;
+  }) => ReactNode;
+}
+
+export function ReviewDetailPanel({
+  item,
+  renderChat,
+}: ReviewDetailPanelProps) {
+  const sessionKey = item.sessionId ?? item.id;
+  const placeholder =
+    item.status === "needs_you"
+      ? "Give feedback or approve..."
+      : "Type a message...";
+
+  return (
+    <div className="flex-1 flex flex-col min-h-0">
+      {renderChat({ sessionKey, placeholder, item })}
+    </div>
+  );
+}

package/src/review-detail.tsx

@@ -0,0 +1,140 @@
+import { useState } from "react";
+import { Button, Input } from "@deck-ui/core";
+import { ArrowLeft, Loader2 } from "lucide-react";
+import { DeliverableCard, UserFeedback } from "./deliverable-card";
+
+export interface ReviewDetailProps {
+  parentLabel: string;
+  projectName: string;
+  deliverableContent: string;
+  onBack: () => void;
+  onApprove: (feedback: string) => Promise<void>;
+  onSendFeedback?: (text: string) => Promise<void>;
+}
+
+interface FeedbackEntry {
+  id: string;
+  from: "user" | "assistant";
+  content: string;
+}
+
+export function ReviewDetail({
+  parentLabel,
+  projectName,
+  deliverableContent,
+  onBack,
+  onApprove,
+  onSendFeedback,
+}: ReviewDetailProps) {
+  const [feedbackText, setFeedbackText] = useState("");
+  const [conversation, setConversation] = useState<FeedbackEntry[]>([]);
+  const [isRevising, setIsRevising] = useState(false);
+
+  const handleSendFeedback = async () => {
+    const trimmed = feedbackText.trim();
+    if (!trimmed || isRevising) return;
+
+    const userEntry: FeedbackEntry = {
+      id: `fb-${Date.now()}`,
+      from: "user",
+      content: trimmed,
+    };
+    setConversation((prev) => [...prev, userEntry]);
+    setFeedbackText("");
+    setIsRevising(true);
+
+    try {
+      await onSendFeedback?.(trimmed);
+    } catch {
+      // Caller handles error display
+    }
+
+    setIsRevising(false);
+  };
+
+  const handleApprove = async () => {
+    const allFeedback = conversation
+      .filter((e) => e.from === "user")
+      .map((e) => e.content)
+      .join("\n");
+    const combinedFeedback = [allFeedback, feedbackText.trim()]
+      .filter(Boolean)
+      .join("\n");
+
+    await onApprove(combinedFeedback);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSendFeedback();
+    }
+  };
+
+  return (
+    <div className="flex-1 flex flex-col min-h-0 overflow-hidden">
+      {/* Header */}
+      <div className="shrink-0 px-4 py-3 border-b border-black/[0.06]">
+        <div className="max-w-3xl mx-auto flex items-center gap-3">
+          <button
+            onClick={onBack}
+            className="flex items-center justify-center size-8 rounded-lg text-muted-foreground hover:text-foreground hover:bg-black/[0.05] transition-colors duration-200"
+            aria-label="Back to Review"
+          >
+            <ArrowLeft className="size-4" />
+          </button>
+          <div className="min-w-0">
+            <p className="text-sm font-medium text-foreground truncate">
+              {parentLabel}
+            </p>
+            <p className="text-xs text-muted-foreground">{projectName}</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Body -- scrollable */}
+      <div className="flex-1 overflow-y-auto px-4 py-6">
+        <div className="max-w-3xl mx-auto space-y-6">
+          <DeliverableCard content={deliverableContent} />
+
+          {conversation.map((entry) =>
+            entry.from === "user" ? (
+              <UserFeedback key={entry.id} content={entry.content} />
+            ) : (
+              <div key={entry.id} className="space-y-4">
+                <p className="text-sm text-foreground">{entry.content}</p>
+              </div>
+            ),
+          )}
+
+          {isRevising && (
+            <div className="flex items-center gap-2 text-sm text-muted-foreground">
+              <Loader2 className="size-3.5 animate-spin" />
+              Revising...
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Footer -- input + approve button */}
+      <div className="shrink-0 px-4 py-3 border-t border-black/[0.06]">
+        <div className="max-w-3xl mx-auto flex items-center gap-2">
+          <Input
+            value={feedbackText}
+            onChange={(e) => setFeedbackText(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Type feedback..."
+            disabled={isRevising}
+            className="flex-1 h-10 rounded-full pl-4 border-black/10"
+          />
+          <Button
+            onClick={handleApprove}
+            className="h-10 px-5 rounded-full bg-foreground text-background hover:bg-foreground/90"
+          >
+            Approve
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/review-empty.tsx

@@ -0,0 +1,15 @@
+export function ReviewEmpty() {
+  return (
+    <div className="flex-1 flex flex-col items-center pt-[20vh] gap-4 px-8">
+      <div className="space-y-2 text-center max-w-md">
+        <h1 className="text-2xl font-semibold text-foreground tracking-tight">
+          All caught up
+        </h1>
+        <p className="text-base text-muted-foreground leading-relaxed">
+          No items need your review. Your routines will produce new
+          outputs automatically, or ask Houston for a one-off task.
+        </p>
+      </div>
+    </div>
+  );
+}

package/src/review-item.tsx

@@ -0,0 +1,124 @@
+import { cn } from "@deck-ui/core";
+import { ChevronRight, Loader2 } from "lucide-react";
+import type { ReviewItemData, RunStatus } from "./types";
+
+interface ReviewItemProps {
+  item: ReviewItemData;
+  onClick: () => void;
+}
+
+function statusIndicator(status: RunStatus) {
+  switch (status) {
+    case "needs_you":
+      return (
+        <span className="relative flex size-3 shrink-0">
+          <span className="absolute inline-flex size-full rounded-full bg-[#0d0d0d]" />
+        </span>
+      );
+    case "running":
+      return (
+        <Loader2 className="size-3.5 shrink-0 animate-spin text-[#9b9b9b]" />
+      );
+    case "done":
+    case "approved":
+      return (
+        <span className="flex size-2.5 shrink-0 rounded-full border-[1.5px] border-[#9b9b9b]/40" />
+      );
+    case "error":
+    case "failed":
+      return (
+        <span className="flex size-2.5 shrink-0 text-red-600 font-bold text-xs leading-none">
+          &times;
+        </span>
+      );
+    default:
+      return (
+        <span className="flex size-2.5 shrink-0 rounded-full border-[1.5px] border-[#9b9b9b]/30" />
+      );
+  }
+}
+
+function statusLabel(status: RunStatus): string {
+  switch (status) {
+    case "needs_you":
+      return "Ready for review";
+    case "running":
+      return "Running...";
+    case "done":
+    case "approved":
+      return "Approved";
+    case "completed":
+      return "Completed";
+    case "error":
+    case "failed":
+      return "Failed";
+    default:
+      return status;
+  }
+}
+
+function relativeTime(iso: string): string {
+  const now = Date.now();
+  const then = new Date(iso).getTime();
+  const diffSec = Math.floor((now - then) / 1000);
+
+  if (diffSec < 60) return "just now";
+  if (diffSec < 3600) return `${Math.floor(diffSec / 60)} min ago`;
+  if (diffSec < 86400) return `${Math.floor(diffSec / 3600)}h ago`;
+  return `${Math.floor(diffSec / 86400)}d ago`;
+}
+
+export function ReviewItem({ item, onClick }: ReviewItemProps) {
+  const isUnreviewed = item.status === "needs_you";
+  const isRunning = item.status === "running";
+  const isFailed = item.status === "error" || item.status === "failed";
+
+  const displaySubtitle =
+    item.title === item.subtitle ? statusLabel(item.status) : item.subtitle;
+
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        "w-full text-left flex items-center gap-3 px-4 py-3 transition-colors duration-200",
+        "hover:bg-black/[0.03]",
+      )}
+    >
+      {/* Status indicator */}
+      <div className="flex items-center justify-center w-4">
+        {statusIndicator(item.status)}
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 min-w-0">
+        <p
+          className={cn(
+            "text-sm truncate",
+            isUnreviewed
+              ? "font-semibold text-[#0d0d0d]"
+              : "font-normal text-[#0d0d0d]/70",
+            isFailed && "text-red-600",
+          )}
+        >
+          {item.title}
+        </p>
+        <p className="text-xs text-[#9b9b9b] truncate mt-0.5">
+          {displaySubtitle}
+          {isRunning && item.title !== item.subtitle && (
+            <span className="animate-pulse"> &middot; Running...</span>
+          )}
+        </p>
+      </div>
+
+      {/* Timestamp */}
+      <span className="text-xs text-[#9b9b9b]/50 shrink-0">
+        {relativeTime(item.createdAt)}
+      </span>
+
+      {/* Right chevron for actionable items */}
+      {isUnreviewed && (
+        <ChevronRight className="size-4 shrink-0 text-[#9b9b9b]" />
+      )}
+    </button>
+  );
+}

package/src/review-sidebar.tsx

@@ -0,0 +1,75 @@
+import { useMemo } from "react";
+import { cn } from "@deck-ui/core";
+import type { ReviewItemData } from "./types";
+
+export interface ReviewSidebarProps {
+  items: ReviewItemData[];
+  selectedId: string | null;
+  onSelect: (id: string) => void;
+}
+
+const GROUPS = [
+  { label: "Needs You", statuses: ["needs_you"] },
+  { label: "Running", statuses: ["running"] },
+  { label: "Done", statuses: ["done", "approved", "completed"] },
+  { label: "Failed", statuses: ["error", "failed"] },
+];
+
+export function ReviewSidebar({
+  items,
+  selectedId,
+  onSelect,
+}: ReviewSidebarProps) {
+  const grouped = useMemo(() => {
+    return GROUPS.map((group) => ({
+      ...group,
+      items: items
+        .filter((item) => group.statuses.includes(item.status))
+        .sort(
+          (a, b) =>
+            new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
+        ),
+    }));
+  }, [items]);
+
+  return (
+    <div className="flex flex-col h-full bg-[#f9f9f9] border-r border-black/5">
+      <div className="flex-1 overflow-y-auto px-2 py-3">
+        {grouped.map((group) => (
+          <div key={group.label} className="mb-1">
+            <div className="flex items-center justify-between px-3 py-1">
+              <span className="text-[11px] text-[#9b9b9b]">
+                {group.label}
+              </span>
+              {group.items.length > 0 && (
+                <span className="text-[11px] text-[#cdcdcd]">
+                  {group.items.length}
+                </span>
+              )}
+            </div>
+            {group.items.length > 0 ? (
+              group.items.map((item) => (
+                <button
+                  key={item.id}
+                  onClick={() => onSelect(item.id)}
+                  className={cn(
+                    "w-full text-left px-3 py-1.5 rounded-lg transition-colors duration-100 text-[13px] truncate",
+                    item.id === selectedId
+                      ? "bg-[#ececec] text-[#0d0d0d]"
+                      : "text-[#424242] hover:bg-[#ececec]/50",
+                  )}
+                >
+                  {item.title}
+                </button>
+              ))
+            ) : (
+              <p className="px-3 py-1 text-[12px] text-[#cdcdcd] italic">
+                None
+              </p>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/review-split.tsx

@@ -0,0 +1,57 @@
+import { useMemo, useState, type ReactNode } from "react";
+import { ReviewSidebar } from "./review-sidebar";
+import { ReviewDetailPanel } from "./review-detail-panel";
+import type { ReviewItemData } from "./types";
+
+export interface ReviewSplitProps {
+  items: ReviewItemData[];
+  initialSelectedId?: string | null;
+  /** Render prop: the host app provides its own chat panel for the detail view */
+  renderChat: (props: {
+    sessionKey: string;
+    placeholder: string;
+    item: ReviewItemData;
+  }) => ReactNode;
+  /** Shown when no item is selected */
+  emptyMessage?: string;
+}
+
+export function ReviewSplit({
+  items,
+  initialSelectedId = null,
+  renderChat,
+  emptyMessage = "Select a conversation to review",
+}: ReviewSplitProps) {
+  const [selectedId, setSelectedId] = useState<string | null>(
+    initialSelectedId,
+  );
+
+  const selectedItem = useMemo(
+    () => items.find((i) => i.id === selectedId) ?? null,
+    [items, selectedId],
+  );
+
+  return (
+    <div className="flex flex-1 min-h-0 overflow-hidden">
+      {/* Left panel -- fixed width sidebar */}
+      <div className="w-[270px] shrink-0">
+        <ReviewSidebar
+          items={items}
+          selectedId={selectedId}
+          onSelect={setSelectedId}
+        />
+      </div>
+
+      {/* Right panel -- detail or empty */}
+      <div className="flex-1 min-w-0 flex flex-col min-h-0">
+        {selectedItem ? (
+          <ReviewDetailPanel item={selectedItem} renderChat={renderChat} />
+        ) : (
+          <div className="flex h-full items-center justify-center bg-white">
+            <p className="text-sm text-[#9b9b9b]">{emptyMessage}</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/styles.css

@@ -0,0 +1,2 @@
+/* @deck-ui/review — Tell Tailwind to scan this package's components */
+@source ".";

package/src/types.ts

@@ -0,0 +1,18 @@
+export type RunStatus =
+  | "running"
+  | "completed"
+  | "failed"
+  | "approved"
+  | "needs_you"
+  | "done"
+  | "error";
+
+export interface ReviewItemData {
+  id: string;
+  title: string;
+  subtitle: string;
+  status: RunStatus;
+  createdAt: string;
+  sessionId: string | null;
+  routineId: string | null;
+}