diff --git a/apps/web/package.json b/apps/web/package.json
index 054c429..55f3aab 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -13,6 +13,7 @@
     "@code/auth": "workspace:*",
     "@code/backend": "workspace:*",
     "@code/env": "workspace:*",
+    "@code/primitives": "workspace:*",
     "@code/ui": "workspace:*",
     "@flue/react": "1.0.0-beta.9",
     "@flue/sdk": "1.0.0-beta.9",
@@ -40,7 +41,7 @@
     "tailwindcss": "catalog:",
     "typescript": "catalog:",
     "vite": "catalog:",
-    "vitest": "catalog:",
-    "vite-tsconfig-paths": "^6.1.1"
+    "vite-tsconfig-paths": "^6.1.1",
+    "vitest": "catalog:"
   }
 }
diff --git a/apps/web/src/components/projects/project-workspace-page.tsx b/apps/web/src/components/projects/project-workspace-page.tsx
index b171063..3c317ba 100644
--- a/apps/web/src/components/projects/project-workspace-page.tsx
+++ b/apps/web/src/components/projects/project-workspace-page.tsx
@@ -3,296 +3,702 @@ import { Button } from "@code/ui/components/button";
 import { Input } from "@code/ui/components/input";
 import { Textarea } from "@code/ui/components/textarea";
 import {
+  ArrowUpRight,
   Bot,
+  CircleAlert,
   ExternalLink,
-  FileText,
+  FolderGit2,
   GitFork,
-  Play,
+  GitPullRequest,
+  LoaderCircle,
   Plus,
+  Sparkles,
 } from "lucide-react";
 
 import UserMenu from "@/components/user-menu";
 import { useProjectWorkspace } from "@/hooks/use-project-workspace";
+import type {
+  ProjectIssueSummary,
+  ProjectLoopView,
+} from "@/lib/projects/project-evidence";
 
-const statusStyle: Record<Doc<"projectIssues">["status"], string> = {
-  completed:
-    "border-emerald-500/40 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
-  failed: "border-destructive/40 bg-destructive/10 text-destructive",
-  "needs-input":
-    "border-amber-500/40 bg-amber-500/10 text-amber-700 dark:text-amber-300",
-  open: "border-border bg-muted/40 text-muted-foreground",
-  queued: "border-blue-500/40 bg-blue-500/10 text-blue-700 dark:text-blue-300",
-  working: "border-blue-500/40 bg-blue-500/10 text-blue-700 dark:text-blue-300",
+interface Project {
+  readonly id: string;
+  readonly name: string;
+  readonly sources: readonly {
+    readonly defaultBranch?: string;
+    readonly host: string;
+    readonly repositoryPath: string;
+    readonly url: string;
+  }[];
+}
+
+const formatStatus = (status: Doc<"projectIssues">["status"]): string => {
+  if (status === "needs-input") {
+    return "Needs input";
+  }
+  if (status === "working") {
+    return "In progress";
+  }
+  return status.charAt(0).toUpperCase() + status.slice(1);
 };
 
+const statusClasses: Record<Doc<"projectIssues">["status"], string> = {
+  completed: "bg-emerald-500/15 text-emerald-700 dark:text-emerald-300",
+  failed: "bg-destructive/15 text-destructive",
+  "needs-input": "bg-orange-500/15 text-orange-700 dark:text-orange-300",
+  open: "bg-muted text-muted-foreground",
+  queued: "bg-violet-500/15 text-violet-700 dark:text-violet-300",
+  working: "bg-blue-500/15 text-blue-700 dark:text-blue-300",
+};
+
+const verificationIconClass = (
+  verification: ProjectLoopView["verification"]
+): string => {
+  if (verification === "passed") {
+    return "text-emerald-600";
+  }
+  if (verification === "failed" || verification === "blocked") {
+    return "text-orange-600";
+  }
+  return "text-muted-foreground";
+};
+
+const checkStateClass = (
+  state: ProjectLoopView["verificationChecks"][number]["state"]
+): string => {
+  if (state === "complete") {
+    return "bg-emerald-500 text-white";
+  }
+  if (state === "attention") {
+    return "bg-orange-500 text-white";
+  }
+  if (state === "current") {
+    return "bg-blue-500 text-white";
+  }
+  return "bg-muted text-muted-foreground";
+};
+
+const LoadingLine = ({ label }: { readonly label: string }) => (
+  <div className="flex items-center gap-2 text-xs text-muted-foreground">
+    <LoaderCircle className="size-3.5 animate-spin" />
+    {label}
+  </div>
+);
+
 interface RepositoryFormProps {
   readonly busy: boolean;
-  readonly onChange: (value: string) => void;
-  readonly onSubmit: () => void;
+  readonly onRepositoryChange: (value: string) => void;
+  readonly onRepositorySubmit: () => void;
   readonly value: string;
 }
 
 const RepositoryForm = ({
   busy,
-  onChange,
-  onSubmit,
+  onRepositoryChange,
+  onRepositorySubmit,
   value,
 }: RepositoryFormProps) => (
   <form
-    className="space-y-2 border-b p-3"
+    className="space-y-3 border-b border-border/70 p-4"
     onSubmit={(event) => {
       event.preventDefault();
-      onSubmit();
+      onRepositorySubmit();
     }}
   >
-    <div className="space-y-1">
-      <label className="text-xs font-medium" htmlFor="git-repository">
-        Public Git repository
-      </label>
-      <p className="text-xs text-muted-foreground">
-        Import with a public HTTP(S) Git URL.
+    <div>
+      <p className="text-[11px] font-semibold uppercase tracking-[0.12em] text-muted-foreground">
+        Connect project
+      </p>
+      <p className="mt-1 text-xs leading-5 text-muted-foreground">
+        Bring a public repository into the project loop.
       </p>
     </div>
     <Input
-      id="git-repository"
-      onChange={(event) => onChange(event.target.value)}
+      aria-label="Public Git repository URL"
+      onChange={(event) => onRepositoryChange(event.target.value)}
       placeholder="https://github.com/owner/repo"
       required
       value={value}
     />
     <Button className="w-full" disabled={busy} type="submit">
-      <GitFork data-icon="inline-start" />
-      {busy ? "Importing" : "Import repository"}
+      {busy ? (
+        <LoaderCircle className="animate-spin" data-icon="inline-start" />
+      ) : (
+        <GitFork data-icon="inline-start" />
+      )}
+      {busy ? "Connecting" : "Connect repository"}
     </Button>
   </form>
 );
 
-interface ProjectListProps {
-  readonly projects:
-    | readonly {
-        readonly id: string;
-        readonly name: string;
-        readonly sources: readonly {
-          readonly host: string;
-          readonly repositoryPath: string;
-          readonly url: string;
-        }[];
-      }[]
-    | undefined;
+interface ProjectSidebarProps {
+  readonly onProjectSelect: (projectId: Id<"projects">) => void;
+  readonly projects: readonly Project[] | undefined;
   readonly selectedId: Id<"projects"> | null;
-  readonly onSelect: (projectId: Id<"projects">) => void;
 }
 
-const ProjectList = ({ projects, selectedId, onSelect }: ProjectListProps) => {
-  const renderContent = () => {
+const ProjectSidebar = ({
+  onProjectSelect,
+  projects,
+  selectedId,
+}: ProjectSidebarProps) => {
+  const renderProjects = () => {
     if (projects === undefined) {
-      return (
-        <p className="p-3 text-xs text-muted-foreground">Loading projects...</p>
-      );
+      return <LoadingLine label="Loading projects" />;
     }
     if (projects.length === 0) {
       return (
-        <p className="p-3 text-xs leading-relaxed text-muted-foreground">
-          Import a repository to create its project artifacts and issue queue.
+        <p className="text-xs leading-5 text-muted-foreground">
+          Connect a repository to create the first project workspace.
         </p>
       );
     }
     return (
-      <div className="grid gap-1">
-        {projects.map((project) => (
-          <button
-            className={`w-full border px-3 py-2 text-left transition-colors ${
-              selectedId === project.id
-                ? "border-foreground/30 bg-muted"
-                : "border-transparent hover:bg-muted/60"
-            }`}
-            key={project.id}
-            onClick={() => onSelect(project.id as Id<"projects">)}
-            type="button"
-          >
-            <span className="block truncate text-sm font-medium">
-              {project.name}
-            </span>
-            <span className="block truncate text-xs text-muted-foreground">
-              {project.sources[0]?.host}
-              {project.sources[0]?.repositoryPath}
-            </span>
-          </button>
-        ))}
+      <div className="grid gap-1.5">
+        {projects.map((project) => {
+          const [source] = project.sources;
+          const selected = selectedId === project.id;
+          return (
+            <button
+              className={`w-full border px-3 py-2.5 text-left transition-colors ${
+                selected
+                  ? "border-foreground/20 bg-foreground text-background"
+                  : "border-transparent hover:border-border hover:bg-muted/60"
+              }`}
+              key={project.id}
+              onClick={() => onProjectSelect(project.id as Id<"projects">)}
+              type="button"
+            >
+              <span className="block truncate text-sm font-medium">
+                {project.name}
+              </span>
+              <span
+                className={`mt-1 block truncate text-[11px] ${
+                  selected ? "text-background/65" : "text-muted-foreground"
+                }`}
+              >
+                {source
+                  ? `${source.host}/${source.repositoryPath}`
+                  : "No source"}
+              </span>
+            </button>
+          );
+        })}
       </div>
     );
   };
 
   return (
-    <nav
-      aria-label="Connected projects"
-      className="min-h-0 flex-1 overflow-y-auto p-2"
-    >
-      {renderContent()}
-    </nav>
-  );
-};
-
-interface ArtifactGridProps {
-  readonly artifacts: readonly Doc<"projectArtifacts">[] | undefined;
-}
-
-const renderArtifacts = (artifacts: ArtifactGridProps["artifacts"]) => {
-  if (artifacts === undefined) {
-    return <p className="text-xs text-muted-foreground">Loading artifacts...</p>;
-  }
-  if (artifacts.length === 0) {
-    return <p className="text-xs text-muted-foreground">No artifacts yet.</p>;
-  }
-  return (
-    <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
-      {artifacts.map((artifact) => (
-        <div className="border p-3" key={artifact._id}>
-          <FileText className="mb-2 size-4 text-muted-foreground" />
-          <p className="truncate text-xs font-medium">{artifact.path}</p>
-          <p className="text-[10px] text-muted-foreground">
-            rev {artifact.revision}
+    <aside className="flex min-h-0 flex-col border-b border-border/70 bg-card/35 md:border-r md:border-b-0">
+      <div className="flex items-center justify-between border-b border-border/70 px-4 py-3">
+        <div>
+          <p className="text-sm font-semibold">Projects</p>
+          <p className="text-xs text-muted-foreground">
+            Your connected workspaces
           </p>
         </div>
-      ))}
-    </div>
+        <FolderGit2 className="size-4 text-muted-foreground" />
+      </div>
+      <nav
+        aria-label="Connected projects"
+        className="min-h-0 flex-1 overflow-y-auto p-3"
+      >
+        {renderProjects()}
+      </nav>
+      <div className="border-t border-border/70 p-3">
+        <div className="flex items-start gap-2 border bg-muted/45 p-3">
+          <Sparkles className="mt-0.5 size-3.5 shrink-0 text-lime-600 dark:text-lime-300" />
+          <p className="text-[11px] leading-4 text-muted-foreground">
+            Project context stays attached to every issue and run.
+          </p>
+        </div>
+      </div>
+    </aside>
   );
 };
 
-const ArtifactGrid = ({ artifacts }: ArtifactGridProps) => (
-  <section aria-labelledby="artifact-heading" className="space-y-3">
-    <h2 id="artifact-heading" className="text-sm font-semibold">
-      Project artifacts
-    </h2>
-    {renderArtifacts(artifacts)}
-  </section>
-);
-
 interface IssueComposerProps {
   readonly body: string;
   readonly busy: boolean;
-  readonly onBodyChange: (value: string) => void;
-  readonly onSubmit: () => void;
-  readonly onTitleChange: (value: string) => void;
+  readonly onIssueBodyChange: (value: string) => void;
+  readonly onIssueSubmit: () => void;
+  readonly onIssueTitleChange: (value: string) => void;
   readonly title: string;
 }
 
 const IssueComposer = ({
   body,
   busy,
-  onBodyChange,
-  onSubmit,
-  onTitleChange,
+  onIssueBodyChange,
+  onIssueSubmit,
+  onIssueTitleChange,
   title,
 }: IssueComposerProps) => (
   <form
-    className="space-y-3"
+    className="border border-border/70 bg-card/60 p-4 shadow-[0_14px_32px_-24px_rgb(0_0_0/0.45)] sm:p-5"
     onSubmit={(event) => {
       event.preventDefault();
-      onSubmit();
+      onIssueSubmit();
     }}
   >
-    <h2 className="text-sm font-semibold">New issue</h2>
-    <Input
-      onChange={(event) => onTitleChange(event.target.value)}
-      placeholder="Issue title"
-      required
-      value={title}
-    />
-    <Textarea
-      onChange={(event) => onBodyChange(event.target.value)}
-      placeholder="Describe the issue..."
-      required
-      rows={4}
-      value={body}
-    />
-    <Button className="w-full" disabled={busy} type="submit">
-      <Plus data-icon="inline-start" />
-      {busy ? "Creating" : "Create issue"}
-    </Button>
+    <div className="flex items-start justify-between gap-4">
+      <div>
+        <p className="text-[11px] font-semibold uppercase tracking-[0.12em] text-muted-foreground">
+          Create work
+        </p>
+        <h2 className="mt-1 text-base font-semibold tracking-tight">
+          What should Zopu move forward?
+        </h2>
+      </div>
+      <div className="grid size-8 shrink-0 place-items-center bg-lime-400 text-black">
+        <Plus className="size-4" />
+      </div>
+    </div>
+    <div className="mt-4 grid gap-2.5">
+      <Input
+        aria-label="Issue title"
+        onChange={(event) => onIssueTitleChange(event.target.value)}
+        placeholder="Outcome or issue title"
+        required
+        value={title}
+      />
+      <Textarea
+        aria-label="Issue description"
+        onChange={(event) => onIssueBodyChange(event.target.value)}
+        placeholder="Describe the desired result, constraints, or evidence to start from."
+        required
+        rows={3}
+        value={body}
+      />
+    </div>
+    <div className="mt-3 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+      <p className="text-[11px] leading-4 text-muted-foreground">
+        The issue becomes durable project work before an agent run starts.
+      </p>
+      <Button className="w-full sm:w-auto" disabled={busy} type="submit">
+        {busy ? (
+          <LoaderCircle className="animate-spin" data-icon="inline-start" />
+        ) : (
+          <Plus data-icon="inline-start" />
+        )}
+        {busy ? "Creating" : "Create issue"}
+      </Button>
+    </div>
   </form>
 );
 
-interface IssueListProps {
-  readonly issues: readonly Doc<"projectIssues">[] | undefined;
-  readonly pendingAction: string | null;
-  readonly onStart: (
+interface IssueCardProps {
+  readonly issue: Doc<"projectIssues">;
+  readonly selected: boolean;
+  readonly onIssueSelect: (issueId: Id<"projectIssues">) => void;
+  readonly onIssueStart: (
     issueId: Id<"projectIssues">,
     issueNumber: number,
     title: string
   ) => void;
+  readonly pendingAction: string | null;
 }
 
-const IssueList = ({ issues, pendingAction, onStart }: IssueListProps) => {
+const IssueCard = ({
+  issue,
+  onIssueSelect,
+  onIssueStart,
+  pendingAction,
+  selected,
+}: IssueCardProps) => {
+  const canStart = issue.status === "open" || issue.status === "failed";
+  const startPending = pendingAction === `issue:${issue._id}`;
+
+  return (
+    <article
+      className={`border p-4 transition-colors ${
+        selected
+          ? "border-blue-500/35 bg-blue-500/5"
+          : "border-border/70 bg-card/45 hover:border-foreground/20"
+      }`}
+    >
+      <button
+        className="w-full text-left"
+        onClick={() => onIssueSelect(issue._id)}
+        type="button"
+      >
+        <div className="flex flex-wrap items-center justify-between gap-2">
+          <span className="text-[11px] font-semibold uppercase tracking-[0.12em] text-muted-foreground">
+            Issue #{issue.number}
+          </span>
+          <span
+            className={`rounded-full px-2 py-1 text-[10px] font-semibold ${statusClasses[issue.status]}`}
+          >
+            {formatStatus(issue.status)}
+          </span>
+        </div>
+        <h3 className="mt-3 text-sm font-semibold leading-5">{issue.title}</h3>
+        <p className="mt-1.5 line-clamp-2 text-xs leading-5 text-muted-foreground">
+          {issue.body}
+        </p>
+      </button>
+      <div className="mt-4 flex items-center justify-between gap-3 border-t border-border/60 pt-3">
+        <p className="text-[11px] text-muted-foreground">
+          Updated{" "}
+          {new Intl.DateTimeFormat(undefined, {
+            hour: "numeric",
+            minute: "2-digit",
+          }).format(issue.updatedAt)}
+        </p>
+        {canStart ? (
+          <Button
+            disabled={startPending}
+            onClick={() => onIssueStart(issue._id, issue.number, issue.title)}
+            size="sm"
+            type="button"
+            variant="outline"
+          >
+            {startPending ? (
+              <LoaderCircle className="animate-spin" data-icon="inline-start" />
+            ) : (
+              <Bot data-icon="inline-start" />
+            )}
+            {startPending ? "Starting" : "Start work"}
+          </Button>
+        ) : null}
+      </div>
+    </article>
+  );
+};
+
+const IssueList = ({
+  issues,
+  onIssueSelect,
+  onIssueStart,
+  pendingAction,
+  selectedId,
+}: {
+  readonly issues: readonly Doc<"projectIssues">[] | undefined;
+  readonly onIssueSelect: (issueId: Id<"projectIssues">) => void;
+  readonly onIssueStart: IssueCardProps["onIssueStart"];
+  readonly pendingAction: string | null;
+  readonly selectedId: Id<"projectIssues"> | null;
+}) => {
   if (issues === undefined) {
-    return <p className="text-xs text-muted-foreground">Loading issues...</p>;
+    return <LoadingLine label="Loading issues" />;
   }
   if (issues.length === 0) {
     return (
-      <p className="text-xs text-muted-foreground">
-        No issues yet. Create one to start agent work.
-      </p>
+      <div className="border border-dashed border-border p-7 text-center">
+        <Bot className="mx-auto size-5 text-muted-foreground" />
+        <p className="mt-3 text-sm font-medium">
+          No issues in this project yet
+        </p>
+        <p className="mx-auto mt-1 max-w-xs text-xs leading-5 text-muted-foreground">
+          Create a small, outcome-shaped issue and it will become the first
+          visible loop.
+        </p>
+      </div>
     );
   }
   return (
-    <div className="space-y-2">
-      <h2 className="text-sm font-semibold">Issues</h2>
+    <div className="space-y-3">
       {issues.map((issue) => (
-        <div className="border p-3" key={issue._id}>
-          <div className="flex items-center justify-between gap-2">
-            <span className="text-sm font-medium">
-              #{issue.number} · {issue.title}
-            </span>
-            <span
-              className={`rounded border px-2 py-0.5 text-[10px] font-medium ${statusStyle[issue.status]}`}
-            >
-              {issue.status}
-            </span>
-          </div>
-          <p className="mt-1 line-clamp-2 text-xs text-muted-foreground">
-            {issue.body}
-          </p>
-          {(issue.status === "open" || issue.status === "failed") && (
-            <Button
-              className="mt-2"
-              disabled={pendingAction === `issue:${issue._id}`}
-              onClick={() => onStart(issue._id, issue.number, issue.title)}
-              size="sm"
-              variant="outline"
-            >
-              <Play data-icon="inline-start" />
-              {pendingAction === `issue:${issue._id}` ? "Starting" : "Start"}
-            </Button>
-          )}
-        </div>
+        <IssueCard
+          issue={issue}
+          key={issue._id}
+          onIssueSelect={onIssueSelect}
+          onIssueStart={onIssueStart}
+          pendingAction={pendingAction}
+          selected={issue._id === selectedId}
+        />
       ))}
     </div>
   );
 };
 
+const Stat = ({
+  label,
+  tone,
+  value,
+}: {
+  readonly label: string;
+  readonly tone: string;
+  readonly value: number;
+}) => (
+  <div className={`border border-border/70 p-3 ${tone}`}>
+    <p className="text-[10px] font-semibold uppercase tracking-[0.12em] text-muted-foreground">
+      {label}
+    </p>
+    <p className="mt-1 text-2xl font-semibold tracking-tight">{value}</p>
+  </div>
+);
+
+const ProjectStats = ({
+  summary,
+}: {
+  readonly summary: ProjectIssueSummary;
+}) => (
+  <div className="grid grid-cols-3 gap-2 sm:gap-3">
+    <Stat label="Active" tone="bg-blue-500/5" value={summary.active} />
+    <Stat label="Needs you" tone="bg-orange-500/5" value={summary.needsInput} />
+    <Stat label="Shipped" tone="bg-emerald-500/5" value={summary.completed} />
+  </div>
+);
+
+interface IssueDetailProps {
+  readonly issue: Doc<"projectIssues"> | undefined;
+  readonly onOpenPullRequest: (url: string) => void;
+  readonly onIssueStart: (
+    issueId: Id<"projectIssues">,
+    issueNumber: number,
+    title: string
+  ) => void;
+  readonly pendingAction: string | null;
+  readonly projectLoop: ProjectLoopView | null;
+}
+
+const IssueDetail = ({
+  issue,
+  onOpenPullRequest,
+  onIssueStart,
+  pendingAction,
+  projectLoop,
+}: IssueDetailProps) => {
+  if (!issue || !projectLoop) {
+    return (
+      <aside className="border border-dashed border-border p-6 lg:sticky lg:top-6">
+        <p className="text-[11px] font-semibold uppercase tracking-[0.12em] text-muted-foreground">
+          Selected work
+        </p>
+        <h2 className="mt-2 text-lg font-semibold">
+          Choose an issue to inspect its loop
+        </h2>
+        <p className="mt-2 text-sm leading-6 text-muted-foreground">
+          Progress, verification, activity, and review artifacts will stay
+          together here.
+        </p>
+      </aside>
+    );
+  }
+
+  const canStart = issue.status === "open" || issue.status === "failed";
+  const startPending = pendingAction === `issue:${issue._id}`;
+
+  return (
+    <aside className="space-y-4 lg:sticky lg:top-6">
+      <section className="border border-border/70 bg-card/60 p-5 shadow-[0_14px_32px_-24px_rgb(0_0_0/0.45)]">
+        <div className="flex items-start justify-between gap-4">
+          <div>
+            <p className="text-[11px] font-semibold uppercase tracking-[0.12em] text-muted-foreground">
+              Issue #{issue.number}
+            </p>
+            <h2 className="mt-2 text-xl font-semibold leading-7 tracking-tight">
+              {issue.title}
+            </h2>
+          </div>
+          <span
+            className={`rounded-full px-2 py-1 text-[10px] font-semibold ${statusClasses[issue.status]}`}
+          >
+            {formatStatus(issue.status)}
+          </span>
+        </div>
+        <p className="mt-3 text-sm leading-6 text-muted-foreground">
+          {issue.body}
+        </p>
+
+        <div className="mt-5">
+          <div className="flex items-center justify-between gap-3 text-xs font-medium">
+            <span>{projectLoop.progress}% complete</span>
+            <span className="text-muted-foreground">
+              {projectLoop.status.label}
+            </span>
+          </div>
+          <div className="mt-2 h-2 bg-muted">
+            <div
+              className="h-full bg-blue-600 transition-[width] dark:bg-blue-400"
+              style={{ width: `${projectLoop.progress}%` }}
+            />
+          </div>
+        </div>
+
+        <div className="mt-5 border-t border-border/70 pt-4">
+          <p className="text-[10px] font-semibold uppercase tracking-[0.12em] text-muted-foreground">
+            Current state
+          </p>
+          <p className="mt-2 text-sm leading-6">{projectLoop.currentState}</p>
+        </div>
+
+        <div className="mt-4 flex items-start gap-3 border border-lime-500/25 bg-lime-400/10 p-3">
+          <ArrowUpRight className="mt-0.5 size-4 shrink-0 text-lime-700 dark:text-lime-300" />
+          <div>
+            <p className="text-[10px] font-semibold uppercase tracking-[0.12em] text-lime-800 dark:text-lime-200">
+              Next move
+            </p>
+            <p className="mt-1 text-sm font-medium">{projectLoop.nextAction}</p>
+          </div>
+        </div>
+
+        {canStart ? (
+          <Button
+            className="mt-4 w-full"
+            disabled={startPending}
+            onClick={() => onIssueStart(issue._id, issue.number, issue.title)}
+            type="button"
+          >
+            {startPending ? (
+              <LoaderCircle className="animate-spin" data-icon="inline-start" />
+            ) : (
+              <Bot data-icon="inline-start" />
+            )}
+            {startPending
+              ? "Starting project manager"
+              : "Start project manager"}
+          </Button>
+        ) : null}
+      </section>
+
+      <section className="border border-border/70 bg-card/45 p-5">
+        <div className="flex items-center justify-between gap-3">
+          <div>
+            <p className="text-[11px] font-semibold uppercase tracking-[0.12em] text-muted-foreground">
+              Verification
+            </p>
+            <h3 className="mt-1 text-base font-semibold">
+              Evidence earns the next step
+            </h3>
+          </div>
+          <CircleAlert
+            className={`size-4 ${verificationIconClass(projectLoop.verification)}`}
+          />
+        </div>
+        <p className="mt-2 text-xs leading-5 text-muted-foreground">
+          {projectLoop.verificationNote}
+        </p>
+        <div className="mt-4 space-y-2">
+          {projectLoop.verificationChecks.map((check) => (
+            <div
+              className="flex items-start gap-3 border border-border/60 p-3"
+              key={check.label}
+            >
+              <span
+                className={`mt-0.5 grid size-4 place-items-center rounded-full ${checkStateClass(check.state)}`}
+              >
+                <span className="text-[9px]">
+                  {check.state === "complete" ? "✓" : ""}
+                </span>
+              </span>
+              <div className="min-w-0">
+                <p className="text-xs font-medium">{check.label}</p>
+                <p className="mt-0.5 text-[11px] leading-4 text-muted-foreground">
+                  {check.detail}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <section className="border border-border/70 bg-card/45 p-5">
+        <div className="flex items-center justify-between gap-3">
+          <div>
+            <p className="text-[11px] font-semibold uppercase tracking-[0.12em] text-muted-foreground">
+              Gitea artifact
+            </p>
+            <h3 className="mt-1 text-base font-semibold">
+              Pull request review
+            </h3>
+          </div>
+          <GitPullRequest className="size-4 text-muted-foreground" />
+        </div>
+        {projectLoop.pullRequest.state === "available" &&
+        projectLoop.pullRequest.reviewUrl ? (
+          <div className="mt-4 border border-emerald-500/25 bg-emerald-500/10 p-3">
+            <p className="text-sm font-medium">
+              {projectLoop.pullRequest.number
+                ? `PR #${projectLoop.pullRequest.number} is ready for review`
+                : "Pull request is ready for review"}
+            </p>
+            <p className="mt-1 text-xs leading-5 text-muted-foreground">
+              Verification evidence is attached to this project loop.
+            </p>
+            <Button
+              className="mt-3"
+              onClick={() =>
+                onOpenPullRequest(projectLoop.pullRequest.reviewUrl as string)
+              }
+              type="button"
+              variant="outline"
+            >
+              <ExternalLink data-icon="inline-start" />
+              Review changes
+            </Button>
+          </div>
+        ) : (
+          <div className="mt-4 border border-dashed border-border p-3">
+            <p className="text-sm font-medium">Review link pending</p>
+            <p className="mt-1 text-xs leading-5 text-muted-foreground">
+              The slot is ready for a Gitea pull request when the agent
+              publishes one. The rest of the run remains observable now.
+            </p>
+          </div>
+        )}
+      </section>
+
+      <section className="border border-border/70 bg-card/45 p-5">
+        <div className="flex items-center gap-2">
+          <Sparkles className="size-3.5 text-lime-600 dark:text-lime-300" />
+          <p className="text-[11px] font-semibold uppercase tracking-[0.12em] text-muted-foreground">
+            Recent activity
+          </p>
+        </div>
+        <div className="mt-4 space-y-4">
+          {projectLoop.activity.map((item) => (
+            <div className="flex gap-3" key={`${item.label}-${item.time}`}>
+              <div className="mt-1.5 size-1.5 shrink-0 rounded-full bg-foreground/50" />
+              <div className="min-w-0">
+                <p className="text-xs font-medium">{item.label}</p>
+                <p className="mt-0.5 text-xs leading-5 text-muted-foreground">
+                  {item.detail}
+                </p>
+                <p className="mt-1 text-[10px] text-muted-foreground/75">
+                  {item.time}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+    </aside>
+  );
+};
+
 export const ProjectWorkspacePage = () => {
   const workspace = useProjectWorkspace();
-  const handleRepositoryChange = workspace.setRepository;
-  const handleRepositorySubmit = workspace.connectRepository;
-  const handleProjectSelect = workspace.setSelectedProjectId;
+  const projectSource = workspace.selectedProject?.sources[0];
   const handleIssueBodyChange = workspace.setIssueBody;
+  const handleIssueSelect = workspace.setSelectedIssueId;
+  const handleIssueStart = workspace.startIssue;
   const handleIssueSubmit = workspace.raiseIssue;
   const handleIssueTitleChange = workspace.setIssueTitle;
-  const handleIssueStart = workspace.startIssue;
-  const projectSource = workspace.selectedProject?.sources[0];
+  const handleProjectSelect = workspace.setSelectedProjectId;
+  const handleRepositoryChange = workspace.setRepository;
+  const handleRepositorySubmit = workspace.connectRepository;
 
   return (
     <main className="min-h-svh bg-background text-foreground">
-      <header className="border-b">
-        <div className="mx-auto flex max-w-[1400px] items-center justify-between px-4 py-3 md:px-6">
-          <div className="flex items-center gap-3">
-            <div className="grid size-8 place-items-center border bg-muted">
-              <Bot className="size-4" />
+      <header className="border-b border-border/70 bg-background/90 backdrop-blur">
+        <div className="mx-auto flex max-w-[1540px] items-center justify-between gap-4 px-4 py-3 sm:px-6">
+          <div className="flex min-w-0 items-center gap-3">
+            <div className="grid size-9 shrink-0 place-items-center bg-lime-400 text-black">
+              <span className="text-base font-semibold">Z</span>
             </div>
-            <div>
-              <p className="text-sm font-semibold">Project manager</p>
-              <p className="text-xs text-muted-foreground">
-                Git · Flue · AgentOS
+            <div className="min-w-0">
+              <div className="flex items-center gap-2">
+                <p className="text-sm font-semibold">Zopu</p>
+                <span className="size-1.5 rounded-full bg-emerald-500" />
+                <span className="text-xs text-muted-foreground">
+                  Project loop
+                </span>
+              </div>
+              <p className="truncate text-[11px] text-muted-foreground">
+                Connect context, move issues, review outcomes.
               </p>
             </div>
           </div>
@@ -300,89 +706,199 @@ export const ProjectWorkspacePage = () => {
         </div>
       </header>
 
-      <div className="mx-auto grid min-h-[calc(100svh-57px)] max-w-[1400px] md:grid-cols-[260px_1fr]">
-        <aside className="flex min-h-0 flex-col border-b md:border-r md:border-b-0">
+      <div className="mx-auto grid min-h-[calc(100svh-65px)] max-w-[1540px] md:grid-cols-[250px_minmax(0,1fr)]">
+        <div className="flex min-h-0 flex-col">
           <RepositoryForm
             busy={workspace.pendingAction === "connect"}
-            onChange={handleRepositoryChange}
-            onSubmit={handleRepositorySubmit}
+            onRepositoryChange={handleRepositoryChange}
+            onRepositorySubmit={handleRepositorySubmit}
             value={workspace.repository}
           />
-          <ProjectList
-            onSelect={handleProjectSelect}
+          <ProjectSidebar
+            onProjectSelect={handleProjectSelect}
             projects={workspace.projects}
             selectedId={workspace.selectedProjectId}
           />
-        </aside>
+        </div>
 
-        <div className="min-w-0 p-4 md:p-6 lg:p-8">
+        <div className="min-w-0 px-4 py-5 sm:px-6 sm:py-7 lg:px-8">
           {workspace.error ? (
-            <div className="mb-4 border border-destructive/40 bg-destructive/10 p-3 text-sm text-destructive">
-              {workspace.error}
+            <div className="mb-5 flex items-start gap-3 border border-destructive/35 bg-destructive/10 p-3 text-sm text-destructive">
+              <CircleAlert className="mt-0.5 size-4 shrink-0" />
+              <p>{workspace.error}</p>
             </div>
           ) : null}
 
           {workspace.selectedProject ? (
-            <div className="grid gap-8">
-              <div className="flex flex-col gap-3 border-b pb-5 sm:flex-row sm:items-end sm:justify-between">
-                <div>
-                  <p className="text-xs text-muted-foreground">
-                    Connected repository
-                  </p>
-                  <h1 className="text-2xl font-semibold tracking-tight">
+            <div className="space-y-6">
+              <section className="flex flex-col gap-4 border-b border-border/70 pb-5 lg:flex-row lg:items-end lg:justify-between">
+                <div className="min-w-0">
+                  <div className="flex flex-wrap items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.12em] text-muted-foreground">
+                    <span>Project workspace</span>
+                    <span>/</span>
+                    <span className="truncate">
+                      {projectSource?.host ?? "Repository"}
+                    </span>
+                  </div>
+                  <h1 className="mt-2 text-3xl font-semibold sm:text-4xl">
                     {workspace.selectedProject.name}
                   </h1>
-                  <p className="mt-1 max-w-2xl text-sm text-muted-foreground">
-                    {projectSource?.host}/{projectSource?.repositoryPath}
+                  <p className="mt-2 flex items-center gap-2 text-sm text-muted-foreground">
+                    <FolderGit2 className="size-4" />
+                    <span className="truncate">
+                      {projectSource
+                        ? `${projectSource.host}/${projectSource.repositoryPath}`
+                        : "No repository source"}
+                    </span>
                   </p>
                 </div>
-                <Button
-                  onClick={() =>
-                    window.open(
-                      projectSource?.url,
-                      "_blank",
-                      "noopener,noreferrer"
-                    )
-                  }
-                  type="button"
-                  variant="outline"
+                {projectSource ? (
+                  <Button
+                    className="w-full sm:w-auto"
+                    onClick={() =>
+                      window.open(
+                        projectSource.url,
+                        "_blank",
+                        "noopener,noreferrer"
+                      )
+                    }
+                    type="button"
+                    variant="outline"
+                  >
+                    <ExternalLink data-icon="inline-start" />
+                    Open repository
+                  </Button>
+                ) : null}
+              </section>
+
+              <section className="grid gap-3 lg:grid-cols-[minmax(0,1fr)_minmax(300px,0.72fr)]">
+                <div className="border border-border/70 bg-blue-500/5 p-5 sm:p-6">
+                  <div className="flex flex-wrap items-center justify-between gap-3">
+                    <div className="flex items-center gap-2">
+                      <span className="grid size-7 place-items-center rounded-full bg-blue-600 text-white dark:bg-blue-400 dark:text-blue-950">
+                        <Bot className="size-3.5" />
+                      </span>
+                      <p className="text-sm font-semibold">Work in motion</p>
+                    </div>
+                    <span className="rounded-full bg-blue-500/15 px-2 py-1 text-[10px] font-semibold text-blue-700 dark:text-blue-300">
+                      Context attached
+                    </span>
+                  </div>
+                  <h2 className="mt-7 max-w-xl text-2xl font-semibold tracking-tight sm:text-3xl">
+                    Make the next useful move visible.
+                  </h2>
+                  <p className="mt-2 max-w-2xl text-sm leading-6 text-muted-foreground">
+                    Every issue carries the project context, agent run,
+                    verification evidence, and review artifact as one durable
+                    loop.
+                  </p>
+                  <div className="mt-6 flex flex-wrap items-center gap-2 text-[10px] font-semibold uppercase tracking-[0.1em] text-muted-foreground">
+                    {[
+                      ["01", "Issue"],
+                      ["02", "Run"],
+                      ["03", "Verify"],
+                      ["04", "Review"],
+                    ].map(([number, label]) => (
+                      <div className="flex items-center gap-2" key={number}>
+                        <span className="grid size-5 place-items-center rounded-full bg-background text-[9px] text-foreground">
+                          {number}
+                        </span>
+                        <span>{label}</span>
+                        {number === "04" ? null : (
+                          <span className="px-1 text-border">/</span>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+                <div className="border border-border/70 bg-card/50 p-4 sm:p-5">
+                  <div className="flex items-center justify-between gap-3">
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-[0.12em] text-muted-foreground">
+                        Project pulse
+                      </p>
+                      <p className="mt-1 text-sm font-semibold">
+                        No hidden queue
+                      </p>
+                    </div>
+                    <Sparkles className="size-4 text-lime-600 dark:text-lime-300" />
+                  </div>
+                  <p className="mt-4 text-sm leading-6 text-muted-foreground">
+                    The cards below are the current durable issues. Open one to
+                    follow the work, not a transient chat session.
+                  </p>
+                  <div className="mt-5">
+                    <ProjectStats summary={workspace.issueSummary} />
+                  </div>
+                </div>
+              </section>
+
+              <IssueComposer
+                body={workspace.issueBody}
+                busy={workspace.pendingAction === "issue"}
+                onIssueBodyChange={handleIssueBodyChange}
+                onIssueSubmit={handleIssueSubmit}
+                onIssueTitleChange={handleIssueTitleChange}
+                title={workspace.issueTitle}
+              />
+
+              <div className="grid items-start gap-6 lg:grid-cols-[minmax(0,1.05fr)_minmax(350px,0.8fr)]">
+                <section
+                  aria-labelledby="active-work-heading"
+                  className="min-w-0"
                 >
-                  <ExternalLink data-icon="inline-start" />
-                  Open repository
-                </Button>
-              </div>
+                  <div className="mb-3 flex items-end justify-between gap-3">
+                    <div>
+                      <p className="text-[11px] font-semibold uppercase tracking-[0.12em] text-muted-foreground">
+                        Durable queue
+                      </p>
+                      <h2
+                        className="mt-1 text-lg font-semibold"
+                        id="active-work-heading"
+                      >
+                        Issues in this project
+                      </h2>
+                    </div>
+                    <span className="text-xs text-muted-foreground">
+                      {workspace.issueSummary.total} total
+                    </span>
+                  </div>
+                  <IssueList
+                    issues={workspace.issues}
+                    onIssueSelect={handleIssueSelect}
+                    onIssueStart={handleIssueStart}
+                    pendingAction={workspace.pendingAction}
+                    selectedId={workspace.selectedIssueId}
+                  />
+                </section>
 
-              <ArtifactGrid artifacts={workspace.artifacts} />
-
-              <div className="grid items-start gap-5 lg:grid-cols-[minmax(280px,380px)_1fr]">
-                <IssueComposer
-                  body={workspace.issueBody}
-                  busy={workspace.pendingAction === "issue"}
-                  onBodyChange={handleIssueBodyChange}
-                  onSubmit={handleIssueSubmit}
-                  onTitleChange={handleIssueTitleChange}
-                  title={workspace.issueTitle}
-                />
-                <IssueList
-                  issues={workspace.issues}
-                  onStart={handleIssueStart}
+                <IssueDetail
+                  issue={workspace.selectedIssue}
+                  onOpenPullRequest={(url) =>
+                    window.open(url, "_blank", "noopener,noreferrer")
+                  }
+                  onIssueStart={handleIssueStart}
                   pendingAction={workspace.pendingAction}
+                  projectLoop={workspace.projectLoop}
                 />
               </div>
             </div>
           ) : (
-            <div className="grid min-h-[60svh] place-items-center text-center">
-              <div className="max-w-sm space-y-2">
-                <GitFork className="mx-auto size-7 text-muted-foreground" />
-                <h1 className="text-xl font-semibold">
-                  Import your first repository
+            <section className="grid min-h-[65svh] place-items-center border border-dashed border-border p-8 text-center">
+              <div className="max-w-md">
+                <div className="mx-auto grid size-12 place-items-center bg-lime-400 text-black">
+                  <GitFork className="size-5" />
+                </div>
+                <h1 className="mt-5 text-2xl font-semibold tracking-tight">
+                  Connect a project to start the loop
                 </h1>
-                <p className="text-sm text-muted-foreground">
-                  Zopu creates the project artifact set and opens an issue queue
-                  for agent work.
+                <p className="mt-2 text-sm leading-6 text-muted-foreground">
+                  Import a repository, keep its context attached, then turn a
+                  clear outcome into an issue that can be started, verified, and
+                  reviewed.
                 </p>
               </div>
-            </div>
+            </section>
           )}
         </div>
       </div>
diff --git a/apps/web/src/hooks/use-project-workspace.ts b/apps/web/src/hooks/use-project-workspace.ts
index 1bce781..6c30cc4 100644
--- a/apps/web/src/hooks/use-project-workspace.ts
+++ b/apps/web/src/hooks/use-project-workspace.ts
@@ -4,6 +4,11 @@ import { useFlueClient } from "@flue/react";
 import { useAction, useMutation, useQuery } from "convex/react";
 import { useState } from "react";
 
+import {
+  buildProjectLoopView,
+  summarizeProjectIssues,
+} from "@/lib/projects/project-evidence";
+
 const errorMessage = (error: unknown) =>
   error instanceof Error ? error.message : String(error);
 
@@ -15,6 +20,8 @@ export const useProjectWorkspace = () => {
   const [repository, setRepository] = useState("");
   const [issueTitle, setIssueTitle] = useState("");
   const [issueBody, setIssueBody] = useState("");
+  const [selectedIssueId, setSelectedIssueId] =
+    useState<Id<"projectIssues"> | null>(null);
   const [pendingAction, setPendingAction] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
   const importPublicGit = useAction(api.projects.importPublicGit);
@@ -55,11 +62,12 @@ export const useProjectWorkspace = () => {
     setPendingAction("issue");
     setError(null);
     try {
-      await createIssue({
+      const issueId = await createIssue({
         body: issueBody,
         projectId: activeProjectId,
         title: issueTitle,
       });
+      setSelectedIssueId(issueId);
       setIssueTitle("");
       setIssueBody("");
     } catch (caughtError) {
@@ -94,23 +102,36 @@ export const useProjectWorkspace = () => {
     projects?.find(
       (project) => project.id === (activeProjectId as unknown as string)
     ) ?? null;
+  const selectedIssue =
+    issues?.find((issue) => issue._id === selectedIssueId) ?? issues?.[0];
+  const projectLoop = buildProjectLoopView({
+    artifacts,
+    issue: selectedIssue,
+    source: selectedProject?.sources[0],
+  });
+  const issueSummary = summarizeProjectIssues(issues);
 
   return {
     artifacts,
     connectRepository,
     error,
     issueBody,
+    issueSummary,
     issueTitle,
     issues,
     pendingAction,
+    projectLoop,
     projects,
     raiseIssue,
     repository,
+    selectedIssue,
+    selectedIssueId,
     selectedProject,
     selectedProjectId: activeProjectId,
     setIssueBody,
     setIssueTitle,
     setRepository,
+    setSelectedIssueId,
     setSelectedProjectId,
     startIssue,
   } as const;
diff --git a/apps/web/src/lib/projects/project-evidence.test.ts b/apps/web/src/lib/projects/project-evidence.test.ts
new file mode 100644
index 0000000..21e0cda
--- /dev/null
+++ b/apps/web/src/lib/projects/project-evidence.test.ts
@@ -0,0 +1,91 @@
+import type { Doc, Id } from "@code/backend/convex/_generated/dataModel";
+import { describe, expect, test } from "vitest";
+
+import {
+  buildProjectLoopView,
+  summarizeProjectIssues,
+} from "./project-evidence";
+
+const makeIssue = (
+  status: Doc<"projectIssues">["status"],
+  issueId: Id<"projectIssues"> = "issue-1" as Id<"projectIssues">
+): Doc<"projectIssues"> =>
+  ({
+    _creationTime: 1,
+    _id: issueId,
+    body: "Make the project loop visible in the web app.",
+    createdAt: 1000,
+    number: 8,
+    projectId: "project-1",
+    status,
+    title: "Build project loop UI",
+    updatedAt: 2000,
+  }) as Doc<"projectIssues">;
+
+const makeArtifact = (content: string): Doc<"projectArtifacts"> =>
+  ({
+    _creationTime: 1,
+    _id: "artifact-1",
+    content,
+    createdAt: 1000,
+    path: "artifacts.md",
+    projectId: "project-1",
+    revision: 2,
+    updatedAt: 2000,
+  }) as Doc<"projectArtifacts">;
+
+describe("project evidence", () => {
+  test("turns published PR evidence into a review action", () => {
+    const view = buildProjectLoopView({
+      artifacts: [
+        makeArtifact(
+          "Verification: 14 unit tests passed.\nPull request: PR #42"
+        ),
+      ],
+      issue: makeIssue("completed"),
+      source: {
+        host: "git.example.com",
+        repositoryPath: "puter/zopu",
+        url: "https://git.example.com/puter/zopu",
+      },
+    });
+
+    expect(view?.progress).toBe(100);
+    expect(view?.verification).toBe("passed");
+    expect(view?.pullRequest.reviewUrl).toBe(
+      "https://git.example.com/puter/zopu/pulls/42"
+    );
+    expect(view?.verificationNote).toContain(
+      "Verification: 14 unit tests passed."
+    );
+  });
+
+  test("keeps the review slot pending when no PR is published", () => {
+    const view = buildProjectLoopView({
+      artifacts: [
+        makeArtifact("The run is recording implementation evidence."),
+      ],
+      issue: makeIssue("working"),
+      source: undefined,
+    });
+
+    expect(view?.verification).toBe("running");
+    expect(view?.pullRequest.state).toBe("pending");
+    expect(view?.pullRequest.reviewUrl).toBeUndefined();
+  });
+
+  test("summarizes the project queue without inventing work", () => {
+    const summary = summarizeProjectIssues([
+      makeIssue("working"),
+      makeIssue("needs-input", "issue-2" as Id<"projectIssues">),
+      makeIssue("completed", "issue-3" as Id<"projectIssues">),
+    ]);
+
+    expect(summary).toEqual({
+      active: 2,
+      completed: 1,
+      needsInput: 1,
+      total: 3,
+    });
+  });
+});
diff --git a/apps/web/src/lib/projects/project-evidence.ts b/apps/web/src/lib/projects/project-evidence.ts
new file mode 100644
index 0000000..7cb8070
--- /dev/null
+++ b/apps/web/src/lib/projects/project-evidence.ts
@@ -0,0 +1,325 @@
+import type { Doc } from "@code/backend/convex/_generated/dataModel";
+import {
+  getProjectWorkProgress,
+  getProjectWorkStatus,
+} from "@code/primitives/project-work";
+import type {
+  ProjectIssueStatus,
+  ProjectVerificationStatus,
+} from "@code/primitives/project-work";
+
+type ProjectIssue = Doc<"projectIssues">;
+type ProjectArtifact = Doc<"projectArtifacts">;
+
+export interface ProjectSourceSummary {
+  readonly host: string;
+  readonly repositoryPath: string;
+  readonly url: string;
+}
+
+export interface ProjectIssueSummary {
+  readonly active: number;
+  readonly completed: number;
+  readonly needsInput: number;
+  readonly total: number;
+}
+
+export interface ProjectVerificationCheck {
+  readonly detail: string;
+  readonly label: string;
+  readonly state: "attention" | "complete" | "current" | "upcoming";
+}
+
+export interface ProjectActivityItem {
+  readonly detail: string;
+  readonly label: string;
+  readonly time: string;
+}
+
+export interface ProjectPullRequest {
+  readonly number: number | undefined;
+  readonly reviewUrl: string | undefined;
+  readonly state: "available" | "pending";
+}
+
+export interface ProjectLoopView {
+  readonly activity: readonly ProjectActivityItem[];
+  readonly currentState: string;
+  readonly nextAction: string;
+  readonly progress: number;
+  readonly pullRequest: ProjectPullRequest;
+  readonly status: ReturnType<typeof getProjectWorkStatus>;
+  readonly verification: ProjectVerificationStatus;
+  readonly verificationChecks: readonly ProjectVerificationCheck[];
+  readonly verificationNote: string;
+}
+
+const STATUS_TEXT: Readonly<Record<ProjectIssueStatus, string>> = {
+  completed:
+    "Implementation and verification are complete. Review the resulting change.",
+  failed:
+    "The run stopped with its workspace preserved. Review the failure and retry when ready.",
+  "needs-input":
+    "The run is paused until a project decision or missing piece is resolved.",
+  open: "The issue is ready to start. Zopu will keep the project context attached to the run.",
+  queued: "The issue is queued for the project manager to pick up.",
+  working:
+    "The project manager is working through the issue and recording durable evidence.",
+};
+
+const NEXT_ACTION: Readonly<Record<ProjectIssueStatus, string>> = {
+  completed: "Review the pull request",
+  failed: "Review the failure and retry",
+  "needs-input": "Resolve the open question",
+  open: "Start the project manager",
+  queued: "Watch the run progress",
+  working: "Wait for verification",
+};
+
+const formatTime = (timestamp: number): string =>
+  new Intl.DateTimeFormat(undefined, {
+    hour: "numeric",
+    minute: "2-digit",
+  }).format(timestamp);
+
+const relativeTime = (timestamp: number): string => {
+  const minutes = Math.max(0, Math.round((Date.now() - timestamp) / 60_000));
+  if (minutes < 1) {
+    return "just now";
+  }
+  if (minutes < 60) {
+    return `${minutes}m ago`;
+  }
+  const hours = Math.round(minutes / 60);
+  if (hours < 24) {
+    return `${hours}h ago`;
+  }
+  return `${Math.round(hours / 24)}d ago`;
+};
+
+const allArtifactText = (artifacts: readonly ProjectArtifact[]): string =>
+  artifacts.map((artifact) => artifact.content).join("\n");
+
+const extractPullRequest = (
+  artifacts: readonly ProjectArtifact[],
+  source: ProjectSourceSummary | undefined
+): ProjectPullRequest => {
+  const text = allArtifactText(artifacts);
+  const urlMatch = text.match(/https?:\/\/[^\s)]+\/pulls\/\d+/iu)?.[0];
+  const numberMatch = text.match(/\bPR\s*#(?<number>\d+)\b/iu);
+  const numberValue = numberMatch?.groups?.number;
+  const number = numberValue ? Number(numberValue) : undefined;
+  let reviewUrl = urlMatch;
+  if (!reviewUrl && number && source) {
+    reviewUrl = `${source.url.replace(/\/$/u, "")}/pulls/${number}`;
+  }
+
+  return {
+    number,
+    reviewUrl,
+    state: reviewUrl ? "available" : "pending",
+  };
+};
+
+const extractVerificationNote = (
+  artifacts: readonly ProjectArtifact[],
+  status: ProjectIssueStatus
+): string => {
+  const evidenceLine = allArtifactText(artifacts)
+    .split("\n")
+    .map((line) => line.trim())
+    .find((line) => /verification|tests?|browser|passed|failed/iu.test(line));
+
+  if (evidenceLine) {
+    return evidenceLine.replace(/^[-*#\s]+/u, "").slice(0, 140);
+  }
+  if (status === "completed") {
+    return "The agent reported completion after its verification step.";
+  }
+  if (status === "failed") {
+    return "Verification did not complete successfully.";
+  }
+  if (status === "working") {
+    return "Verification will appear here as the run records evidence.";
+  }
+  return "No verification evidence has been recorded yet.";
+};
+
+const makeRunCheck = (status: ProjectIssueStatus): ProjectVerificationCheck => {
+  if (status === "queued") {
+    return {
+      detail: "Agent admission is queued",
+      label: "Agent run",
+      state: "current",
+    };
+  }
+  if (status === "open") {
+    return {
+      detail: "Start the issue to create a run",
+      label: "Agent run",
+      state: "upcoming",
+    };
+  }
+  return {
+    detail: "Project manager run is attached",
+    label: "Agent run",
+    state: "complete",
+  };
+};
+
+const makeVerificationCheck = (
+  verification: ProjectVerificationStatus
+): ProjectVerificationCheck => {
+  if (verification === "passed") {
+    return {
+      detail: "Verification passed",
+      label: "Verification",
+      state: "complete",
+    };
+  }
+  if (verification === "failed") {
+    return {
+      detail: "Review the preserved failure",
+      label: "Verification",
+      state: "attention",
+    };
+  }
+  if (verification === "blocked") {
+    return {
+      detail: "Waiting on a project decision",
+      label: "Verification",
+      state: "attention",
+    };
+  }
+  if (verification === "running") {
+    return {
+      detail: "Evidence is being recorded",
+      label: "Verification",
+      state: "current",
+    };
+  }
+  return {
+    detail: "No verification result yet",
+    label: "Verification",
+    state: "upcoming",
+  };
+};
+
+const makeChecks = (
+  status: ProjectIssueStatus,
+  verification: ProjectVerificationStatus,
+  pullRequest: ProjectPullRequest
+): readonly ProjectVerificationCheck[] => {
+  const issueCheck: ProjectVerificationCheck =
+    status === "open"
+      ? {
+          detail: "Waiting to be started",
+          label: "Issue accepted",
+          state: "upcoming",
+        }
+      : {
+          detail: "Issue context is attached",
+          label: "Issue accepted",
+          state: "complete",
+        };
+  const pullRequestCheck: ProjectVerificationCheck =
+    pullRequest.state === "available"
+      ? {
+          detail: "Ready for human review",
+          label: "Gitea pull request",
+          state: "complete",
+        }
+      : {
+          detail: "Appears after a verified run publishes one",
+          label: "Gitea pull request",
+          state: "upcoming",
+        };
+  return [
+    issueCheck,
+    makeRunCheck(status),
+    makeVerificationCheck(verification),
+    pullRequestCheck,
+  ];
+};
+
+const buildActivity = (
+  issue: ProjectIssue,
+  artifacts: readonly ProjectArtifact[],
+  statusLabel: string
+): readonly ProjectActivityItem[] => {
+  const artifact = [...artifacts]
+    .toSorted((left, right) => right.updatedAt - left.updatedAt)
+    .find((candidate) => candidate.path !== "work.md");
+  const items: ProjectActivityItem[] = [
+    {
+      detail: `Issue #${issue.number} entered the project loop`,
+      label: "Issue created",
+      time: formatTime(issue.createdAt),
+    },
+  ];
+
+  if (issue.updatedAt !== issue.createdAt) {
+    items.unshift({
+      detail: `Status is now ${statusLabel.toLowerCase()}`,
+      label: "Work state updated",
+      time: relativeTime(issue.updatedAt),
+    });
+  }
+
+  if (artifact) {
+    items.unshift({
+      detail: `Durable project evidence changed in ${artifact.path}`,
+      label: "Evidence recorded",
+      time: relativeTime(artifact.updatedAt),
+    });
+  }
+
+  return items.slice(0, 3);
+};
+
+export const summarizeProjectIssues = (
+  issues: readonly ProjectIssue[] | undefined
+): ProjectIssueSummary => {
+  if (!issues) {
+    return { active: 0, completed: 0, needsInput: 0, total: 0 };
+  }
+  return {
+    active: issues.filter(
+      (issue) => !["completed", "failed"].includes(issue.status)
+    ).length,
+    completed: issues.filter((issue) => issue.status === "completed").length,
+    needsInput: issues.filter((issue) => issue.status === "needs-input").length,
+    total: issues.length,
+  };
+};
+
+export const buildProjectLoopView = ({
+  artifacts,
+  issue,
+  source,
+}: {
+  readonly artifacts: readonly ProjectArtifact[] | undefined;
+  readonly issue: ProjectIssue | undefined;
+  readonly source: ProjectSourceSummary | undefined;
+}): ProjectLoopView | null => {
+  if (!issue) {
+    return null;
+  }
+
+  const status = getProjectWorkStatus(issue.status);
+  const { verification } = status;
+  const resolvedArtifacts = artifacts ?? [];
+  const pullRequest = extractPullRequest(resolvedArtifacts, source);
+
+  return {
+    activity: buildActivity(issue, resolvedArtifacts, status.label),
+    currentState: STATUS_TEXT[issue.status],
+    nextAction: NEXT_ACTION[issue.status],
+    progress: getProjectWorkProgress(issue.status),
+    pullRequest,
+    status,
+    verification,
+    verificationChecks: makeChecks(issue.status, verification, pullRequest),
+    verificationNote: extractVerificationNote(resolvedArtifacts, issue.status),
+  };
+};
diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
index b4317ca..ff07550 100644
--- a/apps/web/tsconfig.json
+++ b/apps/web/tsconfig.json
@@ -1,5 +1,10 @@
 {
-  "include": ["**/*", "**/.server/**/*", "**/.client/**/*", ".react-router/types/**/*"],
+  "include": [
+    "**/*",
+    "**/.server/**/*",
+    "**/.client/**/*",
+    ".react-router/types/**/*"
+  ],
   "compilerOptions": {
     "lib": ["DOM", "DOM.Iterable", "ES2024"],
     "types": ["node", "vite/client"],
@@ -10,6 +15,8 @@
     "rootDirs": [".", "./.react-router/types"],
     "paths": {
       "@/*": ["./src/*"],
+      "@code/primitives": ["../../packages/primitives/src/index.ts"],
+      "@code/primitives/*": ["../../packages/primitives/src/*"],
       "@code/ui/*": ["../../packages/ui/src/*"]
     },
     "esModuleInterop": true,
diff --git a/packages/primitives/package.json b/packages/primitives/package.json
index 7b3f661..c94426b 100644
--- a/packages/primitives/package.json
+++ b/packages/primitives/package.json
@@ -7,6 +7,7 @@
     ".": "./src/index.ts",
     "./agent-os": "./src/agent-os.ts",
     "./project": "./src/project.ts",
+    "./project-work": "./src/project-work.ts",
     "./signal": "./src/signal.ts"
   },
   "scripts": {
diff --git a/packages/primitives/src/index.ts b/packages/primitives/src/index.ts
index d252f41..e0b0f9f 100644
--- a/packages/primitives/src/index.ts
+++ b/packages/primitives/src/index.ts
@@ -1,4 +1,5 @@
 // oxlint-disable-next-line no-barrel-file -- The package root intentionally exposes its public modules.
 export * from "./agent-os";
 export * from "./project";
+export * from "./project-work";
 export * from "./signal";
diff --git a/packages/primitives/src/project-work.test.ts b/packages/primitives/src/project-work.test.ts
new file mode 100644
index 0000000..47e57d7
--- /dev/null
+++ b/packages/primitives/src/project-work.test.ts
@@ -0,0 +1,30 @@
+import { describe, expect, test } from "vitest";
+
+import { getProjectWorkProgress, getProjectWorkStatus } from "./project-work";
+
+describe("project work state mapping", () => {
+  test("maps issue and run statuses to the same product language", () => {
+    expect(getProjectWorkStatus("working")).toEqual({
+      label: "In progress",
+      phase: "active",
+      verification: "running",
+    });
+    expect(getProjectWorkStatus("needs-input")).toEqual({
+      label: "Needs your input",
+      phase: "waiting",
+      verification: "blocked",
+    });
+  });
+
+  test("keeps progress monotonic through the normal loop", () => {
+    expect(getProjectWorkProgress("open")).toBeLessThan(
+      getProjectWorkProgress("queued")
+    );
+    expect(getProjectWorkProgress("queued")).toBeLessThan(
+      getProjectWorkProgress("working")
+    );
+    expect(getProjectWorkProgress("working")).toBeLessThan(
+      getProjectWorkProgress("completed")
+    );
+  });
+});
diff --git a/packages/primitives/src/project-work.ts b/packages/primitives/src/project-work.ts
new file mode 100644
index 0000000..86eea71
--- /dev/null
+++ b/packages/primitives/src/project-work.ts
@@ -0,0 +1,115 @@
+export const PROJECT_ISSUE_STATUSES = [
+  "open",
+  "queued",
+  "working",
+  "needs-input",
+  "completed",
+  "failed",
+] as const;
+
+export type ProjectIssueStatus = (typeof PROJECT_ISSUE_STATUSES)[number];
+
+export const PROJECT_RUN_STATUSES = [
+  "ready",
+  "queued",
+  "working",
+  "needs-input",
+  "completed",
+  "failed",
+] as const;
+
+export type ProjectRunStatus = (typeof PROJECT_RUN_STATUSES)[number];
+
+export type ProjectWorkPhase =
+  | "captured"
+  | "queued"
+  | "active"
+  | "waiting"
+  | "completed"
+  | "failed";
+
+export type ProjectVerificationStatus =
+  | "not-started"
+  | "running"
+  | "blocked"
+  | "passed"
+  | "failed";
+
+export interface ProjectWorkStatus {
+  readonly label: string;
+  readonly phase: ProjectWorkPhase;
+  readonly verification: ProjectVerificationStatus;
+}
+
+const STATUS_MAP: Readonly<
+  Record<ProjectIssueStatus | ProjectRunStatus, ProjectWorkStatus>
+> = {
+  completed: {
+    label: "Completed",
+    phase: "completed",
+    verification: "passed",
+  },
+  failed: {
+    label: "Failed",
+    phase: "failed",
+    verification: "failed",
+  },
+  "needs-input": {
+    label: "Needs your input",
+    phase: "waiting",
+    verification: "blocked",
+  },
+  open: {
+    label: "Ready to start",
+    phase: "captured",
+    verification: "not-started",
+  },
+  queued: {
+    label: "Queued",
+    phase: "queued",
+    verification: "not-started",
+  },
+  ready: {
+    label: "Ready",
+    phase: "queued",
+    verification: "not-started",
+  },
+  working: {
+    label: "In progress",
+    phase: "active",
+    verification: "running",
+  },
+};
+
+export const getProjectWorkStatus = (
+  status: ProjectIssueStatus | ProjectRunStatus
+): ProjectWorkStatus => STATUS_MAP[status];
+
+export const getProjectWorkProgress = (
+  status: ProjectIssueStatus | ProjectRunStatus
+): number => {
+  switch (status) {
+    case "completed": {
+      return 100;
+    }
+    case "failed": {
+      return 58;
+    }
+    case "needs-input": {
+      return 78;
+    }
+    case "working": {
+      return 68;
+    }
+    case "queued":
+    case "ready": {
+      return 24;
+    }
+    case "open": {
+      return 8;
+    }
+    default: {
+      return 0;
+    }
+  }
+};