feat: show value preview ghost rows on board page near-empty state

Replace process-oriented encouragement card with value-oriented copy
and 2-3 ghost/example task rows that preview what the board looks like
when populated. Ghost rows show marketing-relevant examples with reduced
opacity, EXAMPLE badges, and pointer-events-none styling.

Author: marian2js

apps/desktop/src/features/board/components/BoardWorkspace.tsx

@@ -1,10 +1,11 @@
-import { useCallback, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { AlertCircleIcon, LayoutDashboardIcon, ListChecksIcon, MessageSquareIcon, RefreshCwIcon, SearchIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import type { SidecarClient } from "@/lib/sidecar/client";
 import { useTaskList } from "@/features/board/hooks/useTaskList";
 import { useLeadingTask } from "@/features/board/hooks/useLeadingTask";
 import { useBoardFilters } from "@/features/board/hooks/useBoardFilters";
+import { getGhostTasks } from "@/features/board/lib/ghost-tasks";
 import { TaskList, TaskListSkeleton } from "./TaskList";
 import { TaskDetailPanel } from "./TaskDetailPanel";
 import { LeadingTaskCard } from "./LeadingTaskCard";
@@ -99,6 +100,11 @@ function BoardContent({
     refreshLeading();
   }, [refresh, refreshLeading]);
 
+  const ghostTasks = useMemo(
+    () => getGhostTasks(filteredTasks.length),
+    [filteredTasks.length],
+  );
+
   return (
     <div className="flex flex-1 flex-col overflow-y-auto p-5 lg:p-6">
       {!isLoading && !error && tasks.length > 0 && (
@@ -211,6 +217,7 @@ function BoardContent({
             <TaskList
               tasks={filteredTasks}
               groups={groupedTasks}
+              ghostTasks={ghostTasks}
               leadingTaskId={leadingTask?.taskId ?? null}
               onTaskSelect={(id) => setSelectedTaskId(id)}
               onSetLeadingTask={handleSetLeadingTask}
@@ -219,14 +226,14 @@ function BoardContent({
           {filteredTasks.length <= 3 && (
             <div className="mt-6 flex items-start gap-3 rounded-lg border border-primary/10 bg-primary/[0.02] px-4 py-3.5 dark:border-primary/[0.06] dark:bg-primary/[0.015]">
               <div className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-primary/8 ring-1 ring-primary/10">
-                <MessageSquareIcon className="size-4 text-primary/70" />
+                <ListChecksIcon className="size-4 text-primary/70" />
               </div>
               <div className="space-y-1">
                 <p className="text-[12px] font-medium text-foreground/80">
-                  Create tasks from chat or actions
+                  Your follow-up tasks appear here
                 </p>
                 <p className="text-[11px] leading-relaxed text-muted-foreground/60">
-                  Ask your CMO or specialists to plan work, and tasks will appear here automatically. You can also run actions from the dashboard.
+                  As you run marketing jobs, follow-up tasks appear here for review and action. Run a job from the dashboard or ask a specialist in chat.
                 </p>
                 <div className="mt-2 flex items-center gap-2">
                   <Button asChild size="xs">

apps/desktop/src/features/board/components/TaskList.tsx

@@ -16,6 +16,7 @@ import { ReviewIndicator } from "./ReviewIndicator";
 import { formatRelativeTime } from "@/features/board/lib/format-relative-time";
 import { sanitizeTaskTitle } from "@/features/board/lib/sanitize-task-title";
 import type { TaskGroup } from "@/features/board/lib/board-grouping";
+import { GHOST_TASK_PREFIX } from "@/features/board/lib/ghost-tasks";
 
 // ---------------------------------------------------------------------------
 // TaskRow (simplified)
@@ -101,6 +102,48 @@ function TaskRow({ task, isLeading, onSelect, onSetLeadingTask }: TaskRowProps)
   );
 }
 
+// ---------------------------------------------------------------------------
+// GhostRow (preview example rows)
+// ---------------------------------------------------------------------------
+
+function GhostRow({ task }: { task: TaskRecord }) {
+  return (
+    <TableRow className="pointer-events-none border-border/10">
+      {/* Title */}
+      <TableCell className="max-w-[400px] py-3 pl-5 text-[13px] font-medium text-foreground/25">
+        <div className="flex items-center gap-2 overflow-hidden">
+          <span className="truncate">{sanitizeTaskTitle(task.title)}</span>
+          <span className="inline-flex shrink-0 items-center rounded-sm border border-dashed border-primary/20 bg-primary/[0.04] px-1.5 py-px font-mono text-[9px] font-semibold uppercase tracking-widest text-primary/40">
+            EXAMPLE
+          </span>
+        </div>
+      </TableCell>
+
+      {/* Status */}
+      <TableCell className="py-3 opacity-25">
+        <TaskStatusBadge status={task.status} />
+      </TableCell>
+
+      {/* Context */}
+      <TableCell className="py-3">
+        <span className="text-muted-foreground/15">&mdash;</span>
+      </TableCell>
+
+      {/* Updated */}
+      <TableCell className="py-3 font-mono text-[11px] text-muted-foreground/15 tabular-nums">
+        &mdash;
+      </TableCell>
+
+      {/* Owner */}
+      <TableCell className="py-3">
+        <span className="font-mono text-[11px] text-muted-foreground/20 uppercase tracking-wider">
+          {task.owner || "\u2014"}
+        </span>
+      </TableCell>
+    </TableRow>
+  );
+}
+
 // ---------------------------------------------------------------------------
 // GroupHeader
 // ---------------------------------------------------------------------------
@@ -156,6 +199,7 @@ function GroupHeader({ label, count, isExpanded, onToggle }: GroupHeaderProps) {
 interface TaskListProps {
   tasks: TaskRecord[];
   groups?: TaskGroup[];
+  ghostTasks?: TaskRecord[];
   leadingTaskId?: string | null;
   onTaskSelect: (taskId: string) => void;
   onSetLeadingTask?: (taskId: string) => void;
@@ -164,11 +208,13 @@ interface TaskListProps {
 export function TaskList({
   tasks,
   groups,
+  ghostTasks,
   leadingTaskId,
   onTaskSelect,
   onSetLeadingTask,
 }: TaskListProps) {
   const isGrouped = groups && groups.length > 0 && !(groups.length === 1 && groups[0]!.key === "__all__");
+  const showGhosts = ghostTasks && ghostTasks.length > 0 && !isGrouped;
 
   return (
     <div className="flex-1 overflow-y-auto">
@@ -204,6 +250,10 @@ export function TaskList({
               />
             ))
           )}
+          {showGhosts &&
+            ghostTasks.map((ghost) => (
+              <GhostRow key={ghost.taskId} task={ghost} />
+            ))}
         </TableBody>
       </Table>
     </div>

apps/desktop/src/features/board/lib/ghost-tasks.ts

@@ -0,0 +1,57 @@
+import type { TaskRecord } from "@opengoat/contracts";
+
+export const GHOST_TASK_PREFIX = "__ghost__";
+
+const GHOST_TASKS: TaskRecord[] = [
+  {
+    taskId: `${GHOST_TASK_PREFIX}1`,
+    title: "Homepage hero rewrite — review & approve",
+    description: "Review the updated homepage hero copy generated from the Website Conversion workflow.",
+    status: "pending",
+    owner: "Website Conversion",
+    assignedTo: "",
+    createdAt: "",
+    updatedAt: "",
+    statusReason: undefined,
+    blockers: [],
+    artifacts: [],
+    worklog: [],
+  },
+  {
+    taskId: `${GHOST_TASK_PREFIX}2`,
+    title: "SEO proof pages — publish to blog",
+    description: "Publish the generated SEO/AEO content pages after review.",
+    status: "todo",
+    owner: "SEO / AEO",
+    assignedTo: "",
+    createdAt: "",
+    updatedAt: "",
+    statusReason: undefined,
+    blockers: [],
+    artifacts: [],
+    worklog: [],
+  },
+  {
+    taskId: `${GHOST_TASK_PREFIX}3`,
+    title: "Product Hunt launch checklist — complete before launch",
+    description: "Review and complete the pre-launch distribution checklist.",
+    status: "todo",
+    owner: "Distribution",
+    assignedTo: "",
+    createdAt: "",
+    updatedAt: "",
+    statusReason: undefined,
+    blockers: [],
+    artifacts: [],
+    worklog: [],
+  },
+];
+
+/**
+ * Returns ghost/example task rows for the board preview.
+ * Shows up to 3 example rows when the board has fewer than 3 real tasks.
+ */
+export function getGhostTasks(realTaskCount: number): TaskRecord[] {
+  const needed = Math.max(0, 3 - realTaskCount);
+  return GHOST_TASKS.slice(0, needed);
+}

test/ui/board-empty-state-cta.test.ts

@@ -78,7 +78,7 @@ describe("Board empty state CTA buttons", () => {
   describe("CTA in promotional banner", () => {
     it("promotional banner also includes action links", () => {
       const bannerTextIdx = boardWorkspaceSrc.indexOf(
-        "Create tasks from chat or actions",
+        "Your follow-up tasks appear here",
       );
       expect(bannerTextIdx).toBeGreaterThan(-1);
       // After the banner text, there should be CTA buttons before the section closes

test/ui/board-ghost-tasks.test.ts

@@ -0,0 +1,154 @@
+import { beforeAll, describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+const boardWorkspaceSrc = readFileSync(
+  resolve(
+    __dirname,
+    "../../apps/desktop/src/features/board/components/BoardWorkspace.tsx",
+  ),
+  "utf-8",
+);
+
+const taskListSrc = readFileSync(
+  resolve(
+    __dirname,
+    "../../apps/desktop/src/features/board/components/TaskList.tsx",
+  ),
+  "utf-8",
+);
+
+const ghostTasksSrc = readFileSync(
+  resolve(
+    __dirname,
+    "../../apps/desktop/src/features/board/lib/ghost-tasks.ts",
+  ),
+  "utf-8",
+);
+
+// ---------------------------------------------------------------------------
+// Ghost task data module
+// ---------------------------------------------------------------------------
+
+describe("Ghost tasks data module", () => {
+  it("exports a getGhostTasks function", () => {
+    expect(ghostTasksSrc).toMatch(/export\s+function\s+getGhostTasks/);
+  });
+
+  it("exports the GHOST_TASK_PREFIX constant", () => {
+    expect(ghostTasksSrc).toMatch(/export\s+const\s+GHOST_TASK_PREFIX/);
+  });
+
+  it("contains marketing-relevant example task titles", () => {
+    // At least one example about homepage/website conversion
+    expect(ghostTasksSrc).toMatch(/homepage|hero|rewrite|website/i);
+    // At least one about SEO/content
+    expect(ghostTasksSrc).toMatch(/seo|blog|content|pages/i);
+    // At least one about distribution/launch
+    expect(ghostTasksSrc).toMatch(/launch|distribution|product hunt|checklist/i);
+  });
+
+  it("returns fewer ghost tasks as real task count increases", () => {
+    // The function takes a count and returns 3 - count (capped at 0)
+    expect(ghostTasksSrc).toMatch(/Math\.max|3\s*-/);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Ghost row rendering in TaskList
+// ---------------------------------------------------------------------------
+
+describe("Ghost row rendering in TaskList", () => {
+  it("TaskList accepts a ghostTasks prop", () => {
+    expect(taskListSrc).toMatch(/ghostTasks/);
+  });
+
+  it("renders ghost rows with visually distinct styling", () => {
+    // Ghost rows should have reduced opacity or dashed border
+    expect(taskListSrc).toMatch(/opacity|dashed|ghost/i);
+  });
+
+  it("renders an EXAMPLE badge on ghost rows", () => {
+    expect(taskListSrc).toMatch(/EXAMPLE/);
+  });
+
+  it("ghost rows are not clickable / have no interactive behavior", () => {
+    // Ghost rows should use pointer-events-none or not have onClick
+    expect(taskListSrc).toMatch(/pointer-events-none|GhostRow/);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// BoardWorkspace integration
+// ---------------------------------------------------------------------------
+
+describe("BoardWorkspace ghost task integration", () => {
+  it("imports getGhostTasks from the lib module", () => {
+    expect(boardWorkspaceSrc).toMatch(/getGhostTasks/);
+  });
+
+  it("passes ghost tasks to TaskList when tasks < 3", () => {
+    expect(boardWorkspaceSrc).toMatch(/ghostTasks/);
+  });
+
+  it("has value-oriented encouragement copy instead of process instruction", () => {
+    // Should NOT have the old process-oriented copy
+    expect(boardWorkspaceSrc).not.toContain("Create tasks from chat or actions");
+    // Should have value-oriented copy
+    expect(boardWorkspaceSrc).toMatch(/follow-up|tasks appear here|review and action/i);
+  });
+
+  it("no longer references 'Create tasks from chat or actions'", () => {
+    expect(boardWorkspaceSrc).not.toContain("Create tasks from chat or actions");
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Ghost task logic unit tests
+// ---------------------------------------------------------------------------
+
+describe("getGhostTasks function behavior", () => {
+  let getGhostTasks: (count: number) => Array<{ taskId: string; title: string; status: string }>;
+  let GHOST_TASK_PREFIX: string;
+
+  beforeAll(async () => {
+    const mod = await import(
+      resolve(
+        __dirname,
+        "../../apps/desktop/src/features/board/lib/ghost-tasks.ts",
+      )
+    );
+    getGhostTasks = mod.getGhostTasks;
+    GHOST_TASK_PREFIX = mod.GHOST_TASK_PREFIX;
+  });
+
+  it("returns 3 ghost tasks when 0 real tasks", () => {
+    expect(getGhostTasks(0)).toHaveLength(3);
+  });
+
+  it("returns 2 ghost tasks when 1 real task", () => {
+    expect(getGhostTasks(1)).toHaveLength(2);
+  });
+
+  it("returns 1 ghost task when 2 real tasks", () => {
+    expect(getGhostTasks(2)).toHaveLength(1);
+  });
+
+  it("returns 0 ghost tasks when 3+ real tasks", () => {
+    expect(getGhostTasks(3)).toHaveLength(0);
+    expect(getGhostTasks(10)).toHaveLength(0);
+  });
+
+  it("all ghost task IDs start with the ghost prefix", () => {
+    const ghosts = getGhostTasks(0);
+    for (const t of ghosts) {
+      expect(t.taskId).toMatch(new RegExp(`^${GHOST_TASK_PREFIX}`));
+    }
+  });
+
+  it("ghost tasks have unique IDs", () => {
+    const ghosts = getGhostTasks(0);
+    const ids = ghosts.map((t) => t.taskId);
+    expect(new Set(ids).size).toBe(ids.length);
+  });
+});