feat(03-02): replace display strings in UI components with VOCAB constants

- Sidebar.tsx: section label uses VOCAB.company instead of hardcoded 'Company'
- CompanySwitcher.tsx: uses VOCAB.company for placeholder and settings link
- ActivityRow.tsx: uses VOCAB.board instead of hardcoded 'Board' for user actor
- ApprovalPayload.tsx: hire_agent and approve_ceo_strategy values use VOCAB constants
- NewAgentDialog.tsx: CEO references use VOCAB.ceo
- NewGoalDialog.tsx: company level label uses VOCAB.company

ui/src/components/ActivityRow.tsx

@@ -1,4 +1,5 @@
 import { Link } from "@/lib/router";
+import { VOCAB } from "@paperclipai/branding";
 import { Identity } from "./Identity";
 import { timeAgo } from "../lib/timeAgo";
 import { cn } from "../lib/utils";
@@ -106,7 +107,7 @@ export function ActivityRow({ event, agentMap, entityNameMap, entityTitleMap, cl
     : entityLink(event.entityType, event.entityId, name);
 
   const actor = event.actorType === "agent" ? agentMap.get(event.actorId) : null;
-  const actorName = actor?.name ?? (event.actorType === "system" ? "System" : event.actorType === "user" ? "Board" : event.actorId || "Unknown");
+  const actorName = actor?.name ?? (event.actorType === "system" ? "System" : event.actorType === "user" ? VOCAB.board : event.actorId || "Unknown");
 
   const inner = (
     <div className="flex gap-3">

ui/src/components/ApprovalPayload.tsx

@@ -1,9 +1,10 @@
 import { UserPlus, Lightbulb, ShieldAlert, ShieldCheck } from "lucide-react";
+import { VOCAB } from "@paperclipai/branding";
 import { formatCents } from "../lib/utils";
 
 export const typeLabel: Record<string, string> = {
-  hire_agent: "Hire Agent",
+  hire_agent: `${VOCAB.hire} Agent`,
-  approve_ceo_strategy: "CEO Strategy",
+  approve_ceo_strategy: `${VOCAB.ceo} Strategy`,
   budget_override_required: "Budget Override",
 };
 

ui/src/components/CompanySwitcher.tsx

@@ -1,4 +1,5 @@
 import { ChevronsUpDown, Plus, Settings } from "lucide-react";
+import { VOCAB } from "@paperclipai/branding";
 import { Link } from "@/lib/router";
 import { useCompany } from "../context/CompanyContext";
 import {
@@ -40,7 +41,7 @@ export function CompanySwitcher() {
               <span className={`h-2 w-2 rounded-full shrink-0 ${statusDotColor(selectedCompany.status)}`} />
             )}
             <span className="text-sm font-medium truncate">
-              {selectedCompany?.name ?? "Select company"}
+              {selectedCompany?.name ?? `Select ${VOCAB.company.toLowerCase()}`}
             </span>
           </div>
           <ChevronsUpDown className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
@@ -66,7 +67,7 @@ export function CompanySwitcher() {
         <DropdownMenuItem asChild>
           <Link to="/company/settings" className="no-underline text-inherit">
             <Settings className="h-4 w-4 mr-2" />
-            Company Settings
+            {`${VOCAB.company} Settings`}
           </Link>
         </DropdownMenuItem>
         <DropdownMenuItem asChild>

ui/src/components/NewAgentDialog.tsx

@@ -1,4 +1,5 @@
 import { useState, type ComponentType } from "react";
+import { VOCAB } from "@paperclipai/branding";
 import { useQuery } from "@tanstack/react-query";
 import { useNavigate } from "@/lib/router";
 import { useDialog } from "../context/DialogContext";
@@ -164,7 +165,7 @@ export function NewAgentDialog() {
                   <Sparkles className="h-6 w-6 text-foreground" />
                 </div>
                 <p className="text-sm text-muted-foreground">
-                  We recommend letting your CEO handle agent setup — they know the
+                  {`We recommend letting your ${VOCAB.ceo} handle agent setup`} — they know the
                   org structure and can configure reporting, permissions, and
                   adapters.
                 </p>
@@ -172,7 +173,7 @@ export function NewAgentDialog() {
 
               <Button className="w-full" size="lg" onClick={handleAskCeo}>
                 <Bot className="h-4 w-4 mr-2" />
-                Ask the CEO to create a new agent
+                {`Ask the ${VOCAB.ceo} to create a new agent`}
               </Button>
 
               {/* Advanced link */}

ui/src/components/NewGoalDialog.tsx

@@ -1,4 +1,5 @@
 import { useRef, useState } from "react";
+import { VOCAB } from "@paperclipai/branding";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { GOAL_STATUSES, GOAL_LEVELS } from "@paperclipai/shared";
 import { useDialog } from "../context/DialogContext";
@@ -27,7 +28,7 @@ import { MarkdownEditor, type MarkdownEditorRef } from "./MarkdownEditor";
 import { StatusBadge } from "./StatusBadge";
 
 const levelLabels: Record<string, string> = {
-  company: "Company",
+  company: VOCAB.company,
   team: "Team",
   agent: "Agent",
   task: "Task",

ui/src/components/Sidebar.tsx

@@ -12,6 +12,7 @@ import {
   Repeat,
   Settings,
 } from "lucide-react";
+import { VOCAB } from "@paperclipai/branding";
 import { useQuery } from "@tanstack/react-query";
 import { SidebarSection } from "./SidebarSection";
 import { SidebarNavItem } from "./SidebarNavItem";
@@ -107,7 +108,7 @@ export function Sidebar() {
 
         <SidebarAgents />
 
-        <SidebarSection label="Company">
+        <SidebarSection label={VOCAB.company}>
           <SidebarNavItem to="/org" label="Org" icon={Network} />
           <SidebarNavItem to="/skills" label="Skills" icon={Boxes} />
           <SidebarNavItem to="/costs" label="Costs" icon={DollarSign} />