From 0b7c62b419dfb446fee562b64755a9118aaaacd6 Mon Sep 17 00:00:00 2001
From: Mikkel Georgsen <msgeorgsen@gmail.com>
Date: Mon, 30 Mar 2026 23:49:50 +0200
Subject: [PATCH] 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     | 3 ++-
 ui/src/components/ApprovalPayload.tsx | 5 +++--
 ui/src/components/CompanySwitcher.tsx | 5 +++--
 ui/src/components/NewAgentDialog.tsx  | 5 +++--
 ui/src/components/NewGoalDialog.tsx   | 3 ++-
 ui/src/components/Sidebar.tsx         | 3 ++-
 6 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/ui/src/components/ActivityRow.tsx b/ui/src/components/ActivityRow.tsx
index ebfe23c5..cc776457 100644
--- a/ui/src/components/ActivityRow.tsx
+++ b/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">
diff --git a/ui/src/components/ApprovalPayload.tsx b/ui/src/components/ApprovalPayload.tsx
index 83b55c73..cc01ef31 100644
--- a/ui/src/components/ApprovalPayload.tsx
+++ b/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",
-  approve_ceo_strategy: "CEO Strategy",
+  hire_agent: `${VOCAB.hire} Agent`,
+  approve_ceo_strategy: `${VOCAB.ceo} Strategy`,
   budget_override_required: "Budget Override",
 };
 
diff --git a/ui/src/components/CompanySwitcher.tsx b/ui/src/components/CompanySwitcher.tsx
index aefe1020..4a1e81ef 100644
--- a/ui/src/components/CompanySwitcher.tsx
+++ b/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>
diff --git a/ui/src/components/NewAgentDialog.tsx b/ui/src/components/NewAgentDialog.tsx
index 15114bf7..b819e602 100644
--- a/ui/src/components/NewAgentDialog.tsx
+++ b/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";
@@ -156,7 +157,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>
@@ -164,7 +165,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 */}
diff --git a/ui/src/components/NewGoalDialog.tsx b/ui/src/components/NewGoalDialog.tsx
index 0bb9ffcb..bb187d43 100644
--- a/ui/src/components/NewGoalDialog.tsx
+++ b/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",
diff --git a/ui/src/components/Sidebar.tsx b/ui/src/components/Sidebar.tsx
index b8cea2ca..b46ee9ed 100644
--- a/ui/src/components/Sidebar.tsx
+++ b/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} />