feat: replace empty state in recent outputs with proof-of-value gallery

Show 6 example output types (Hero Rewrite Draft, SEO Opportunity Map, etc.)
with specialist attribution and color-coded type badges when no outputs exist,
replacing the dead "No outputs yet" text with actionable content.

Author: marian2js

apps/desktop/src/features/dashboard/components/DashboardWorkspace.tsx

@@ -372,6 +372,7 @@ function DashboardContent({
             agentId={agentId}
             client={client}
             onNavigate={handleOutputNavigate}
+            onSpecialistChat={handleSpecialistChat}
           />
 
           {/* Action cards — secondary in Mode B */}
@@ -436,6 +437,7 @@ function DashboardContent({
             agentId={agentId}
             client={client}
             onNavigate={handleOutputNavigate}
+            onSpecialistChat={handleSpecialistChat}
           />
 
           {/* Board summary — bottom, only if tasks exist */}

apps/desktop/src/features/dashboard/components/RecentOutputs.tsx

@@ -1,16 +1,32 @@
-import { PackageIcon } from "lucide-react";
+import { ArrowRightIcon, PackageIcon } from "lucide-react";
 import type { ArtifactRecord } from "@opengoat/contracts";
 import type { SidecarClient } from "@/lib/sidecar/client";
 import { useRecentArtifacts } from "@/features/dashboard/hooks/useRecentArtifacts";
 import { ArtifactCard } from "@/features/dashboard/components/ArtifactCard";
 import { BundleCard } from "@/features/dashboard/components/BundleCard";
 import { getSpecialistMeta, SPECIALIST_META } from "@/features/agents/specialist-meta";
+import { getSpecialistColors } from "@/features/agents/specialist-meta";
+import { getArtifactTypeConfig } from "@/features/dashboard/lib/artifact-type-config";
+
+const EXAMPLE_OUTPUTS: Array<{
+  name: string;
+  type: string;
+  specialistId: string;
+}> = [
+  { name: "Hero Rewrite Draft",          type: "copy_draft",       specialistId: "website-conversion" },
+  { name: "SEO Opportunity Map",         type: "research_brief",   specialistId: "seo-aeo" },
+  { name: "Competitor Messaging Matrix",  type: "matrix",           specialistId: "market-intel" },
+  { name: "Product Hunt Launch Pack",    type: "launch_pack",      specialistId: "distribution" },
+  { name: "Content Ideas Bundle",        type: "content_calendar", specialistId: "content" },
+  { name: "Cold Email Sequence",         type: "email_sequence",   specialistId: "outbound" },
+];
 
 export interface RecentOutputsProps {
   agentId: string;
   client: SidecarClient;
   onPreview?: (artifactId: string) => void;
   onNavigate?: (artifact: ArtifactRecord) => void;
+  onSpecialistChat?: (specialistId: string) => void;
 }
 
 /** Resolve a specialist display name from an artifact's createdBy field. */
@@ -27,7 +43,7 @@ function resolveSpecialistName(createdBy: string): string | undefined {
   return undefined;
 }
 
-export function RecentOutputs({ agentId, client, onPreview, onNavigate }: RecentOutputsProps) {
+export function RecentOutputs({ agentId, client, onPreview, onNavigate, onSpecialistChat }: RecentOutputsProps) {
   const { standaloneArtifacts, bundleGroups, isLoading, isEmpty } = useRecentArtifacts(agentId, client);
 
   // Avoid layout flash — return null while loading
@@ -70,11 +86,53 @@ export function RecentOutputs({ agentId, client, onPreview, onNavigate }: Recent
         ) : null}
       </div>
 
-      {/* Empty state */}
+      {/* Empty state — proof-of-value gallery */}
       {isEmpty ? (
-        <p className="text-xs text-muted-foreground/50 ml-9">
-          No outputs yet — run an action above to get started
-        </p>
+        <div className="ml-9">
+          <p className="mb-3 text-[13px] font-medium text-muted-foreground">
+            Your team can produce:
+          </p>
+          <div className="grid grid-cols-2 gap-2">
+            {EXAMPLE_OUTPUTS.map((example, idx) => {
+              const typeConfig = getArtifactTypeConfig(example.type);
+              const specialist = getSpecialistMeta(example.specialistId);
+              const colors = getSpecialistColors(example.specialistId);
+              const isStartCard = idx === 0;
+
+              return (
+                <button
+                  key={example.name}
+                  type="button"
+                  className="group/example flex flex-col items-start gap-1.5 rounded-lg border border-dashed border-border/40 p-3 text-left transition-colors hover:border-border/70 hover:bg-muted/30"
+                  onClick={() => onSpecialistChat?.(example.specialistId)}
+                >
+                  {/* Type badge */}
+                  <span className={`inline-block rounded px-1.5 py-0.5 font-mono text-[10px] uppercase tracking-wider ${typeConfig.badgeClassName}`}>
+                    {typeConfig.label}
+                  </span>
+
+                  {/* Output name */}
+                  <span className="text-[13px] font-medium leading-tight text-foreground">
+                    {example.name}
+                  </span>
+
+                  {/* Specialist attribution */}
+                  <span className={`text-[11px] ${colors.iconText}`}>
+                    {specialist?.name}
+                  </span>
+
+                  {/* Start CTA — first card only */}
+                  {isStartCard && (
+                    <span className="mt-0.5 inline-flex items-center gap-1 text-[11px] font-medium text-primary opacity-70 transition-opacity group-hover/example:opacity-100">
+                      Start here
+                      <ArrowRightIcon className="size-3 transition-transform group-hover/example:translate-x-0.5" />
+                    </span>
+                  )}
+                </button>
+              );
+            })}
+          </div>
+        </div>
       ) : (
         /* Outputs list */
         <div className="space-y-3">

test/features/dashboard/RecentOutputs.test.ts

@@ -16,31 +16,25 @@ const bundleCardSrc = readSrc("components/BundleCard.tsx");
 const dashboardSrc = readSrc("components/DashboardWorkspace.tsx");
 
 // ---------------------------------------------------------------------------
-// RecentOutputs — empty state (compact inline)
+// RecentOutputs — empty state (proof-of-value gallery)
 // ---------------------------------------------------------------------------
 describe("RecentOutputs empty state", () => {
-  it("shows 'No outputs yet' message when empty", () => {
-    expect(componentSrc).toContain("No outputs yet");
+  it("shows proof-of-value gallery heading when empty", () => {
+    expect(componentSrc).toContain("Your team can produce");
   });
 
-  it("suggests running an action to get started", () => {
-    expect(
-      componentSrc.includes("run an action") ||
-        componentSrc.includes("get started"),
-    ).toBe(true);
+  it("shows example output names in empty state gallery", () => {
+    expect(componentSrc).toContain("Hero Rewrite Draft");
+    expect(componentSrc).toContain("SEO Opportunity Map");
+    expect(componentSrc).toContain("Competitor Messaging Matrix");
   });
 
-  it("uses compact inline text instead of tall dashed-border card", () => {
-    // Should NOT have the old tall dashed-border empty state container
-    expect(componentSrc).not.toContain("border-dashed");
-    // Should NOT have the stacked vertical layout with centered icon
-    expect(componentSrc).not.toContain("flex-col items-center gap-2");
-    expect(componentSrc).not.toContain("py-8");
+  it("uses 2-column grid layout for example outputs", () => {
+    expect(componentSrc).toContain("grid-cols-2");
   });
 
-  it("renders empty state as a single muted paragraph", () => {
-    // The empty state should be a compact <p> with muted styling
-    expect(componentSrc).toMatch(/isEmpty[\s\S]*?<p\s+className="[^"]*text-muted-foreground/);
+  it("includes a Start CTA for routing to specialist", () => {
+    expect(componentSrc).toContain("Start here");
   });
 });
 

test/ui/recent-outputs-empty-state.test.ts

@@ -0,0 +1,88 @@
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+const desktopSrc = resolve(__dirname, "../../apps/desktop/src");
+const readFile = (relPath: string) =>
+  readFileSync(resolve(desktopSrc, relPath), "utf-8");
+
+const COMPONENT_PATH = "features/dashboard/components/RecentOutputs.tsx";
+const DASHBOARD_PATH = "features/dashboard/components/DashboardWorkspace.tsx";
+
+// ═══════════════════════════════════════════════════════
+// RecentOutputs — structure validation
+// ═══════════════════════════════════════════════════════
+
+describe("RecentOutputs structure", () => {
+  it("exports a named function", () => {
+    const src = readFile(COMPONENT_PATH);
+    expect(src).toContain("export function RecentOutputs");
+  });
+
+  it("accepts onSpecialistChat prop", () => {
+    const src = readFile(COMPONENT_PATH);
+    expect(src).toContain("onSpecialistChat");
+  });
+});
+
+// ═══════════════════════════════════════════════════════
+// RecentOutputs — proof-of-value empty state
+// ═══════════════════════════════════════════════════════
+
+describe("RecentOutputs proof-of-value empty state", () => {
+  it("defines EXAMPLE_OUTPUTS constant", () => {
+    const src = readFile(COMPONENT_PATH);
+    expect(src).toContain("EXAMPLE_OUTPUTS");
+  });
+
+  it("includes all 6 human-readable example output names", () => {
+    const src = readFile(COMPONENT_PATH);
+    expect(src).toContain("Hero Rewrite Draft");
+    expect(src).toContain("Competitor Messaging Matrix");
+    expect(src).toContain("SEO Opportunity Map");
+    expect(src).toContain("Product Hunt Launch Pack");
+    expect(src).toContain("Content Ideas Bundle");
+    expect(src).toContain("Cold Email Sequence");
+  });
+
+  it("imports getArtifactTypeConfig for type badge colors", () => {
+    const src = readFile(COMPONENT_PATH);
+    expect(src).toContain("getArtifactTypeConfig");
+  });
+
+  it("imports getSpecialistMeta for specialist attribution", () => {
+    const src = readFile(COMPONENT_PATH);
+    expect(src).toContain("getSpecialistMeta");
+  });
+
+  it("imports getSpecialistColors for specialist color tokens", () => {
+    const src = readFile(COMPONENT_PATH);
+    expect(src).toContain("getSpecialistColors");
+  });
+
+  it("uses grid-cols-2 for 2-column gallery layout", () => {
+    const src = readFile(COMPONENT_PATH);
+    expect(src).toContain("grid-cols-2");
+  });
+
+  it("includes a Start CTA in the empty state", () => {
+    const src = readFile(COMPONENT_PATH);
+    expect(src).toMatch(/Start/);
+  });
+
+  it("shows 'Your team can produce' heading", () => {
+    const src = readFile(COMPONENT_PATH);
+    expect(src).toContain("Your team can produce");
+  });
+});
+
+// ═══════════════════════════════════════════════════════
+// DashboardWorkspace — prop threading
+// ═══════════════════════════════════════════════════════
+
+describe("DashboardWorkspace passes onSpecialistChat to RecentOutputs", () => {
+  it("threads handleSpecialistChat as onSpecialistChat prop", () => {
+    const src = readFile(DASHBOARD_PATH);
+    expect(src).toContain("onSpecialistChat={handleSpecialistChat}");
+  });
+});