feat: reframe specialist roster from role-first to outcome-first display

Add produces field to SpecialistMeta with concrete output noun-phrases
per specialist. Flip chip visual hierarchy so produces pills lead after
the name, demoting role text to subtle secondary position. Update
section heading from "Your AI Team" to "Your Specialists".

Author: marian2js

apps/desktop/src/features/agents/specialist-meta.ts

@@ -4,6 +4,8 @@ export interface SpecialistMeta {
   role: string;
   /** Outcome-focused "best for" statement shown on dashboard cards. */
   bestAt: string;
+  /** Concrete output noun-phrases this specialist helps produce. */
+  produces: string[];
   icon: string;
   starterSuggestions: [string, string, string];
 }
@@ -13,6 +15,7 @@ export const SPECIALIST_META: Record<string, SpecialistMeta> = {
     name: "CMO",
     role: "Top-level marketing lead who routes work, synthesizes across specialists, and helps when you're unsure where to start",
     bestAt: "Best for prioritizing your next move, coordinating specialists, and getting cross-channel strategy",
+    produces: ["Marketing priorities", "Cross-channel strategy", "Specialist coordination"],
     icon: "brain",
     starterSuggestions: [
       "What's the highest-leverage marketing move for my company right now?",
@@ -24,6 +27,7 @@ export const SPECIALIST_META: Record<string, SpecialistMeta> = {
     name: "Market Intel",
     role: "Competitor, community, customer-voice, and market-research specialist",
     bestAt: "Best for competitor research, community mapping, and understanding customer language",
+    produces: ["Competitor maps", "Community targets", "Customer language analysis"],
     icon: "search",
     starterSuggestions: [
       "Map my competitor landscape and find messaging gaps.",
@@ -35,6 +39,7 @@ export const SPECIALIST_META: Record<string, SpecialistMeta> = {
     name: "Positioning",
     role: "Sharpens how the company should be framed, differentiated, and messaged",
     bestAt: "Best for one-liners, differentiation angles, and ICP-specific messaging",
+    produces: ["Value props", "One-liners", "Category framing"],
     icon: "target",
     starterSuggestions: [
       "Sharpen my one-liner to stand out from competitors.",
@@ -46,6 +51,7 @@ export const SPECIALIST_META: Record<string, SpecialistMeta> = {
     name: "Website Conversion",
     role: "Improves the website's ability to convert visitors into users or customers",
     bestAt: "Best for homepage hero rewrites, CTA optimization, and conversion audits",
+    produces: ["Hero rewrites", "CTA rewrites", "Conversion audits"],
     icon: "layout",
     starterSuggestions: [
       "Rewrite my homepage hero with 3 variants.",
@@ -57,6 +63,7 @@ export const SPECIALIST_META: Record<string, SpecialistMeta> = {
     name: "SEO/AEO",
     role: "Owns search visibility and answer-engine visibility",
     bestAt: "Best for search wedges, comparison pages, and AI-answer opportunities",
+    produces: ["Search wedges", "Comparison pages", "Answer-engine opportunities"],
     icon: "globe",
     starterSuggestions: [
       "Find my best SEO quick wins by effort vs. impact.",
@@ -68,6 +75,7 @@ export const SPECIALIST_META: Record<string, SpecialistMeta> = {
     name: "Distribution",
     role: "Owns launches, communities, directories, and founder-led distribution",
     bestAt: "Best for Product Hunt launches, community posts, and channel strategy",
+    produces: ["Launch packs", "Community targets", "Launch sequencing"],
     icon: "megaphone",
     starterSuggestions: [
       "Create a Product Hunt launch pack.",
@@ -79,6 +87,7 @@ export const SPECIALIST_META: Record<string, SpecialistMeta> = {
     name: "Content",
     role: "Owns ongoing founder-led and product-led content production",
     bestAt: "Best for founder-led content ideas, editorial briefs, and repurposing plans",
+    produces: ["Content ideas", "Editorial briefs", "Repurposing plans"],
     icon: "pen-tool",
     starterSuggestions: [
       "Generate 10 founder-led content ideas with hooks.",
@@ -90,6 +99,7 @@ export const SPECIALIST_META: Record<string, SpecialistMeta> = {
     name: "Outbound",
     role: "Owns direct outreach and messaging sequences",
     bestAt: "Best for cold email sequences, subject lines, and segment-specific outreach",
+    produces: ["Cold outreach sequences", "Subject lines", "Outreach angles"],
     icon: "send",
     starterSuggestions: [
       "Draft a 3-email cold outreach sequence.",

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

@@ -19,7 +19,7 @@ export function DashboardAgentRoster({ specialists, onChat }: DashboardAgentRost
         <div className="flex size-6 shrink-0 items-center justify-center rounded-md bg-primary/8">
           <UsersIcon className="size-3 text-primary" />
         </div>
-        <h2 className="section-label">Your AI Team</h2>
+        <h2 className="section-label">Your Specialists</h2>
         <span className="rounded-full bg-muted/50 px-2 py-0.5 font-mono text-[10px] tabular-nums text-muted-foreground">
           {specialists.length}
         </span>

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

@@ -14,7 +14,6 @@ export function DashboardSpecialistChip({ specialist, onChat }: DashboardSpecial
   const isManager = specialist.category === "manager";
   const colors = getSpecialistColors(specialist.id);
   const meta = getSpecialistMeta(specialist.id);
-  const exampleJobs = specialist.outputTypes?.slice(0, 2) ?? [];
 
   return (
     <button
@@ -64,42 +63,37 @@ export function DashboardSpecialistChip({ specialist, onChat }: DashboardSpecial
               </span>
             ) : null}
           </div>
-          <p className={cn(
-            "mt-0.5 leading-snug text-muted-foreground/70 line-clamp-1",
-            isManager ? "text-[12px]" : "text-[11px]",
-          )}>
-            {specialist.role}
-          </p>
         </div>
       </div>
 
-      {/* Best at — outcome-focused description */}
-      {meta?.bestAt ? (
-        <p className={cn(
-          "leading-relaxed text-muted-foreground",
-          isManager ? "text-[13px]" : "text-[12px]",
-        )}>
-          {meta.bestAt}
-        </p>
-      ) : null}
-
-      {/* Example jobs from outputTypes */}
-      {exampleJobs.length > 0 ? (
-        <div className={cn(
-          "flex gap-x-4 gap-y-1.5 rounded-lg border border-border/15 bg-muted/15 px-3 py-2 dark:border-white/[0.03] dark:bg-white/[0.015]",
-          isManager ? "flex-wrap" : "flex-col",
-        )}>
-          {exampleJobs.map((job) => (
-            <div key={job} className="flex items-center gap-2">
-              <span className={cn("size-1.5 shrink-0 rounded-full", colors.dotColor)} />
-              <span className="text-[11px] font-medium leading-tight text-muted-foreground">
-                {job}
-              </span>
-            </div>
+      {/* Produces — concrete output pills (outcome-first) */}
+      {meta?.produces && meta.produces.length > 0 ? (
+        <div className="flex flex-wrap gap-1.5">
+          {meta.produces.map((output) => (
+            <span
+              key={output}
+              className={cn(
+                "inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-[11px] font-medium leading-tight",
+                isManager
+                  ? "bg-primary/[0.06] text-primary/80"
+                  : cn("bg-muted/30 dark:bg-white/[0.04]", colors.iconText, "opacity-80"),
+              )}
+            >
+              <span className={cn("size-1 shrink-0 rounded-full", colors.dotColor)} />
+              {output}
+            </span>
           ))}
         </div>
       ) : null}
 
+      {/* Role — demoted to subtle secondary text */}
+      <p className={cn(
+        "leading-snug text-muted-foreground/50 line-clamp-1",
+        isManager ? "text-[11px]" : "text-[10px]",
+      )}>
+        {specialist.role}
+      </p>
+
       {/* Chat CTA — always visible, more prominent on hover */}
       <div className="mt-auto flex justify-end pt-1">
         <span className={cn(

apps/desktop/src/features/dashboard/components/dashboard-agent-roster.test.ts

@@ -22,7 +22,7 @@ void test("DashboardAgentRoster: accepts specialists and onChat props", () => {
 
 void test("DashboardAgentRoster: renders section header with team icon", () => {
   assert.ok(
-    src.includes("Your AI Team") || src.includes("Agent Roster"),
+    src.includes("Your Specialists") || src.includes("Your AI Team") || src.includes("Agent Roster"),
     "Expected section header text",
   );
 });

apps/desktop/src/features/dashboard/components/dashboard-specialist-outcome.test.ts

@@ -0,0 +1,80 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+const chipSrc = readFileSync(
+  resolve(import.meta.dirname, "DashboardSpecialistChip.tsx"),
+  "utf-8",
+);
+
+const metaSrc = readFileSync(
+  resolve(import.meta.dirname, "../../../features/agents/specialist-meta.ts"),
+  "utf-8",
+);
+
+void test("specialist-meta: SpecialistMeta interface includes produces field", () => {
+  assert.ok(
+    metaSrc.includes("produces:") || metaSrc.includes("produces :"),
+    "Expected 'produces' field in SpecialistMeta interface",
+  );
+});
+
+void test("specialist-meta: every specialist has a produces array", () => {
+  const specialistIds = [
+    "cmo",
+    "market-intel",
+    "positioning",
+    "website-conversion",
+    "seo-aeo",
+    "distribution",
+    "content",
+    "outbound",
+  ];
+  for (const id of specialistIds) {
+    // Find the specialist block and check it contains produces
+    // Keys may be quoted or unquoted depending on whether they contain hyphens
+    const hasKey = metaSrc.includes(`"${id}":`) || metaSrc.includes(`${id}:`);
+    assert.ok(
+      hasKey,
+      `Expected specialist '${id}' in SPECIALIST_META`,
+    );
+  }
+  // Check that produces appears at least 8 times (once per specialist)
+  const producesCount = (metaSrc.match(/produces:/g) || []).length;
+  assert.ok(
+    producesCount >= 8,
+    `Expected at least 8 'produces:' entries, found ${producesCount}`,
+  );
+});
+
+void test("DashboardSpecialistChip: renders produces pills from meta", () => {
+  assert.ok(
+    chipSrc.includes("produces") || chipSrc.includes("meta?.produces"),
+    "Expected DashboardSpecialistChip to reference 'produces' field from meta",
+  );
+});
+
+void test("DashboardSpecialistChip: produces pills appear before role text", () => {
+  // The produces rendering should appear before the role text in the component
+  const producesIndex = chipSrc.indexOf("produces");
+  const roleIndex = chipSrc.indexOf("specialist.role");
+  assert.ok(
+    producesIndex > 0 && roleIndex > 0 && producesIndex < roleIndex,
+    "Expected 'produces' rendering to appear before 'specialist.role' in the chip component",
+  );
+});
+
+void test("DashboardSpecialistChip: no longer shows bestAt as primary description", () => {
+  // bestAt should either not appear or appear only after produces
+  const bestAtIndex = chipSrc.indexOf("bestAt");
+  const producesIndex = chipSrc.indexOf("produces");
+  if (bestAtIndex >= 0) {
+    assert.ok(
+      producesIndex < bestAtIndex,
+      "If bestAt is still rendered, produces should come first",
+    );
+  }
+  // Either way, produces must be present
+  assert.ok(producesIndex >= 0, "Expected 'produces' to be rendered in chip");
+});