release 2026.08.23.04

The web UI can be read in Portuguese. The shell and shared components are fully
keyed, 581 keys across two complete catalogues, with the build failing on a
missing one. Plus an endpoint for spawning an agent, and spawned agents becoming
visible in both directions.

No schema change and no dependency change. db:push should report nothing, and the
plan says to stop and report it if it does not.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

deploy/2026.08.23.04.md

@@ -0,0 +1,61 @@
+# 2026.08.23.04
+
+The web UI can be read in Portuguese. The shell and the shared components are fully keyed — 581 keys across
+two locales, with the build failing on a missing one — plus an endpoint for spawning an agent, and spawned
+agents becoming visible in both directions.
+
+**No schema change.** Nothing under `src/databases/**/schema.ts` moved across
+`deploy/2026.08.23.03..HEAD`. `bun db:push` is still a step because it is cheap and it verifies the
+database agrees with the code, but it should report no changes.
+
+**No dependency change.** `bun.lock` is untouched. **Do not run `bun install`.**
+
+## What is in it
+
+- **Localization, phases 0 through 2.** `src/apps/officer-web` and `src/workspaces/components` have no
+  hardcoded user-facing strings left: 555 and 47 occurrences respectively, both now zero. `en-GB` and
+  `pt-PT` are complete and in step at 581 keys.
+- **Every locale ships a complete catalogue.** There is no fallback between regional variants, so a
+  Portuguese reader is never served Brazilian wording. What enforces that is a **key-parity test that fails
+  the build** on a gap — verified by removing one key and watching it go red.
+- **The language picker offers only locales that exist.** It listed about twenty codes, eighteen of which
+  silently rendered English. Stored bare codes widen on read (`en` → `en-GB`), with no database migration.
+- **Dates, numbers and plurals follow the account's locale**, not the browser's, through `useFormat()` and
+  `Intl.PluralRules`. Roughly 23 call sites moved.
+- **`POST /api/sub-agents/spawn`** — an endpoint for starting an agent from a prompt, for callers that are
+  not a chat and so cannot reach the harness's own tool. Budget-checked before spawning, and it refuses with
+  a 429 naming the window rather than burning the last of one.
+- **Spawned agents are visible in both directions.** A commander's pane lists its children as links; opening
+  one shows which commander started it, linking back.
+- **A dropped sidecar command says so.** `sendFire` did nothing when no sidecar was registered — no log, no
+  error — so answering a question during a restart window vanished and the card spun forever.
+
+## Every host
+
+1. `git fetch origin --tags` then `git merge --ff-only deploy/2026.08.23.04`
+2. `bun db:push` — expect **no changes**. If it wants to alter something, stop and report it: that means
+   this tree and that host's database disagree about something this release did not touch.
+3. `bun run plugins:update`
+4. `pm2 restart officer`
+
+`officer` only. Step 3 restarts each plugin's own sidecar; that is the script's behaviour and belongs in the
+report.
+
+**`macbookpro`:** append `/opt/homebrew/bin` to PATH for the `bun` commands, run `pm2` separately.
+
+## What to check, this release
+
+The visible change is the language picker in profile settings. It should offer exactly **English (UK)** and
+**Português (Portugal)** and nothing else. A host still offering twenty languages did not pick up the
+frontend bundle.
+
+No direct SQL is needed and none is authorised.
+
+## Hosts
+
+- **`edge-pertento-bridge`** — skipped, per `docs/servers.md`. Name it and spend nothing on it.
+- **`production-pertento-bridge`** — deployed cleanly last release after being two behind. Nothing expected.
+
+## `officer-dev` — skip it
+
+The rollout runs from here. It is already at this commit and `officer` has been restarted on it.

docs/localization.md

@@ -25,35 +25,44 @@ the server does instead, which is the one decision that reaches outside this bou
 
 ## What exists today, and what it cannot do
 
-There is already an i18n system. It is small, hand-rolled, has no npm dependency, and it works. It is
-also about **5% deployed**, and that gap is the whole job.
+**Updated 2026-08-23, after phases 0, 1 and 2.** This section described the pre-phase-0 world for long
+enough that the next reader would have started from a false picture — bare `en.json`, 46 keys, three
+components. All of that is now history and is kept below only as the "before" column, because the shape of
+the gap is the argument for the plan and deleting it would leave the phases looking arbitrary.
 
-|                                           |                                                                            |
-| ----------------------------------------- | -------------------------------------------------------------------------- |
-| `src/workspaces/i18n/`                    | the package: `I18nProvider`, `useTranslation`, `resolveKey`, `interpolate` |
-| `src/apps/officer-web/lib/i18n.ts`        | a typed wrapper binding keys to `en.json`                                  |
-| `src/apps/officer-web/lib/I18nBridge.tsx` | reads `settings.languages.default`, feeds the provider                     |
-| `src/apps/officer-web/locales/`           | `en.json` and `pt.json` — **46 keys each, in sync**                        |
-| components actually using it              | **3** — `UserMenu`, `Languages`, `ChangePassword`                          |
+|                            | before phase 0         | now                                           |
+| -------------------------- | ---------------------- | --------------------------------------------- |
+| catalogs                   | `en.json`, `pt.json`   | `en-GB.json`, `pt-PT.json` per workspace      |
+| keys                       | 46                     | **581** — 538 `app.*`, 43 `ui.*`              |
+| workspaces with a catalog  | 1 (`officer-web`)      | 3 (`officer-web`, `components`, `officerdev`) |
+| components using it        | 3                      | all of `officer-web` and `components`         |
+| plural rules               | none                   | `Intl.PluralRules`, per locale                |
+| dates and numbers          | browser locale         | `useFormat()`, the account's locale           |
+| a missing key              | rendered its dot-path  | falls back to English, warns in dev           |
+| locales offered vs shipped | ~20 offered, 2 existed | only shipped locales are offered              |
+| parity enforcement         | none                   | **a gap fails the build**                     |
 
-What it already does well, and which this plan keeps: dot-path lookup, `{{param}}` interpolation,
-fallback to `en`, and **type-safe keys** via `TranslationKeys<typeof en>` — a wrong key is a
-typecheck failure, which is worth more than it sounds when one agent is editing 400 files.
+Still standing from the original description, and still true: the package is hand-rolled, has no npm
+dependency, and gives type-safe keys — a wrong key is a typecheck failure, which is worth more than it
+sounds when one agent is editing hundreds of files.
 
-**What it cannot do yet**, each of which is a task below:
+**What remains:** `src/workspaces/officerdev` — the panels — and then translation. `panel.*` is scaffolded,
+wired into the bridge, and empty.
 
-1. **No plural rules.** `1 file` / `2 files` has no expression. `Intl.PluralRules` is built into the
-   runtime and unused.
-2. **No locale-aware dates or numbers.** ~23 `toLocaleDateString/TimeString/String()` call sites use
-   the _browser's_ locale, not the user's chosen one, so a Portuguese UI shows American dates.
-3. **No fallback chain.** `resolveKey` falls back to `en` and nothing else, so `pt-BR` cannot inherit
-   from `pt`.
-4. **One catalog, one workspace.** `locales/` lives inside `officer-web`. The 213 panel files in
-   `officerdev` and the 91 in `components` have no catalog of their own.
-5. **Silent, ugly misses.** A missing key renders its own dot-path (`settings.profile.foo`) to the
-   user. No warning, no test.
-6. **Twenty languages offered, two that exist.** The picker in `Languages.tsx` lists ~20 codes
-   including Hebrew and Greek. Choosing any of the eighteen silently yields English.
+Two things learned doing phases 1 and 2 that the plan did not anticipate:
+
+- **`TranslationKeys` walked into a plural object**, so `t('key', { count })` — the entire point of D7 —
+  did not compile while `t('key.one')` did. The documented feature was uncompilable and the workaround was
+  not, which no test would ever have noticed because phase 1 contained no plurals. Fixed with type-level
+  assertions.
+- **The typed wrappers rebuilt `t` on every render**, which is the trap `CLAUDE.md` already records against
+  `useClient()` and the Jellyfin player. It matters the moment `t` lands in a `useMemo` dependency list,
+  which phase 2 needed immediately. Memoised.
+
+**A shape this format cannot express:** a sentence with an inline link. Splitting around the anchor gives a
+key whose Portuguese value is `"."`. The cheap fix is rephrasing so the link falls at a clause boundary;
+there is no node-level interpolation helper and adding one is a design decision, not a patch. Worth
+raising if a phase turns out to be full of them rather than absorbing it forty times.
 
 ### The size of the remaining work
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "officer",
-  "version": "2026.08.23.03",
+  "version": "2026.08.23.04",
   "private": true,
   "type": "module",
   "workspaces": [

scripts/i18n/scan-hardcoded.ts

@@ -30,8 +30,12 @@ const AREAS = [
  * 'shared components' landed 2026-08-23 (localization phase 1). It holds three `new Error()` messages
  * that must NEVER be translated; they are reported but excluded from the check, which is why the
  * neverTranslate split below has to exist for this entry to be possible at all.
+ *
+ * 'officer-web (shell)' landed 2026-08-23 (phase 2). It holds no never-translate hits of its own; what it
+ * does hold is ~30 `<Untranslated reason="foreign-ui-label">` labels quoted from Google's console, which
+ * `stripUntranslated` skips for the same reason.
  */
-const ZEROED: string[] = ['shared components'];
+const ZEROED: string[] = ['shared components', 'officer-web (shell)'];
 
 const SKIP = /node_modules|\.gen\.|[/\\]locales[/\\]|[/\\]vendor[/\\]|\.test\.|\.d\.ts$/;
 

src/apps/officer-web/Screens/Dashboard/Activity/ActivityScreen.tsx

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 import { Link, useParams } from 'react-router';
 import { useClient } from 'hooks/useClient';
 import { Radio, FileText, Activity as ActivityIcon } from 'lucide-react';
+import { useTranslation } from '@/lib/i18n';
 
 type TaskRow = { id: string; source: 'harness'; cwd: string; sizeBytes: number; updatedAt: number; active: boolean };
 type DetachedRow = { id: string; source: 'detached'; path: string; announcedAt: number };
@@ -15,6 +16,7 @@ const MAX_LINES = 600;
 // params (`task=` for a harness file, `path=` for a detached job), so the URL carries the id only and
 // the screen re-derives the param from the registry row — one address shape for both kinds.
 export const ActivityScreen = () => {
+  const { t } = useTranslation();
   const { token, get } = useClient();
   const [reg, setReg] = useState<Registry>({ tasks: [], detached: [] });
   const [regLoaded, setRegLoaded] = useState(false);
@@ -87,30 +89,32 @@ export const ActivityScreen = () => {
     <div className="flex h-full w-full">
       <aside className="flex w-72 shrink-0 flex-col overflow-y-auto border-r border-border p-3">
         <div className="mb-3 flex items-center gap-2 text-sm font-semibold text-foreground">
-          <ActivityIcon size={16} className="text-primary" /> Activity
+          <ActivityIcon size={16} className="text-primary" /> {t('activity.title')}
         </div>
 
         <div className="mb-1 px-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
-          Background tasks
+          {t('activity.backgroundTasks')}
         </div>
-        {reg.tasks.length === 0 && <p className="px-2 py-1 text-xs text-muted-foreground">none running</p>}
-        {reg.tasks.map((t) => (
+        {reg.tasks.length === 0 && (
+          <p className="px-2 py-1 text-xs text-muted-foreground">{t('activity.noneRunning')}</p>
+        )}
+        {reg.tasks.map((task) => (
           <Link
-            key={t.id}
-            to={`/activity/${encodeURIComponent(t.id)}`}
-            className={rowCls(selectedId === t.id)}
-            title={t.cwd}
+            key={task.id}
+            to={`/activity/${encodeURIComponent(task.id)}`}
+            className={rowCls(selectedId === task.id)}
+            title={task.cwd}
           >
             <span
-              className={`inline-block h-2 w-2 shrink-0 rounded-full ${t.active ? 'bg-success animate-pulse' : 'bg-muted-foreground/40'}`}
+              className={`inline-block h-2 w-2 shrink-0 rounded-full ${task.active ? 'bg-success animate-pulse' : 'bg-muted-foreground/40'}`}
             />
-            <span className="truncate font-mono text-xs">{t.id}</span>
+            <span className="truncate font-mono text-xs">{task.id}</span>
           </Link>
         ))}
 
         {reg.detached.length > 0 && (
           <div className="mb-1 mt-4 px-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
-            Detached
+            {t('activity.detached')}
           </div>
         )}
         {reg.detached.map((d) => (
@@ -169,7 +173,7 @@ export const ActivityScreen = () => {
                       no run called <span className="font-mono">{selectedId}</span> is in the registry — it finished, or
                       it never started.{' '}
                       <Link to="/activity" className="underline">
-                        Back to the list
+                        {t('activity.backToList')}
                       </Link>
                     </>
                   ) : (
@@ -187,7 +191,7 @@ export const ActivityScreen = () => {
           </>
         ) : (
           <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
-            Select a task to follow its live output
+            {t('activity.selectTask')}
           </div>
         )}
       </main>

src/apps/officer-web/Screens/Dashboard/CapabilityPage.tsx

@@ -12,6 +12,7 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } f
 import { useClient } from 'hooks/useClient';
 import { Card } from '@/components/Card';
 import { useChat, EmbeddableChat } from 'officerdev';
+import { useTranslation } from '@/lib/i18n';
 type CapabilitySummary = {
   dirName: string;
   name: string;
@@ -277,12 +278,18 @@ export const CapabilityChat = ({
   description,
   onResponseEnd,
 }: CapabilityChatProps) => {
+  const { t } = useTranslation();
   const seedFile = `${kind.toUpperCase()}.md`;
   const genericPrefix = `<frontmatter>\ninput file: ${filePath}\n${seedFile}: ${filePath}\ndir: ${resourceDir}\n\nBe aware of any extra files alongside the same dir as the ${kind} file we're handling, for possible extra context. You can also, if pertinent, create scripts or other files that will help you in the future.\n</frontmatter>`;
   const promptFrontmatter = isNew ? (buildCreationPrefix(kind, filePath, resourceDir) ?? genericPrefix) : genericPrefix;
+  /*
+    The composer's PRE-FILLED text, which the reader sees and edits — so it is translated. The hidden
+    `promptFrontmatter` above is not: that one instructs the agent and carries file paths, and is
+    machine-facing rather than something anybody reads.
+  */
   const defaultInput = isNew
-    ? (description ?? `Help me create the content for this new ${kind} file`)
-    : `Help me understand and improve this ${kind} file`;
+    ? (description ?? t('capability.createPrompt', { kind: kind.toLowerCase() }))
+    : t('capability.improvePrompt', { kind: kind.toLowerCase() });
 
   const chat = useChat(undefined, undefined, { replaceUrl: false });
 
@@ -301,6 +308,7 @@ export const CapabilityChat = ({
 };
 
 export const FrontmatterBlock = ({ yaml }: { yaml: string }) => {
+  const { t } = useTranslation();
   const [open, setOpen] = useState(false);
 
   return (
@@ -310,7 +318,7 @@ export const FrontmatterBlock = ({ yaml }: { yaml: string }) => {
         className="flex w-full items-center gap-1.5 px-3 py-1.5 text-duck-dark/50 hover:text-duck-dark/70 cursor-pointer transition-colors"
       >
         <ChevronRight className={`h-3.5 w-3.5 transition-transform ${open ? 'rotate-90' : ''}`} />
-        <span className="text-xs font-medium">Frontmatter</span>
+        <span className="text-xs font-medium">{t('capability.frontmatter')}</span>
       </button>
       {open && (
         <pre className="px-4 pb-3 text-xs text-duck-dark/60 whitespace-pre-wrap font-mono leading-relaxed">{yaml}</pre>
@@ -330,6 +338,7 @@ export const CapabilityList = ({
   showCreate,
   onShowCreateChange,
 }: CapabilityListProps) => {
+  const { t, tUi } = useTranslation();
   const client = useClient();
   const qc = useQueryClient();
   const [internalCreating, setInternalCreating] = useState(false);
@@ -356,7 +365,7 @@ export const CapabilityList = ({
       setNewName('');
       onCreate(res.dirName);
     } catch {
-      toast.error(`Failed to create ${kind}`);
+      toast.error(t('capability.createFailed', { kind: kind.toLowerCase() }));
     }
   };
 
@@ -427,7 +436,7 @@ export const CapabilityList = ({
             <input
               value={internalSearch}
               onChange={(ev) => setInternalSearch(ev.target.value)}
-              placeholder={`Search ${kind.toLowerCase()}s...`}
+              placeholder={t('capability.searchPlaceholder', { kind: `${kind.toLowerCase()}s` })}
               className="w-full rounded border border-duck-dark/15 bg-background/80 pl-7 pr-2 py-1 text-base md:text-sm text-duck-dark placeholder:text-duck-dark/30 focus:outline-none focus:ring-1 focus:ring-duck-teal/30"
             />
           </div>
@@ -452,7 +461,7 @@ export const CapabilityList = ({
           <p className="text-sm text-duck-dark/40 px-4 py-6 text-center">No {kind.toLowerCase()}s found</p>
         )}
         {items.length > 0 && filtered.length === 0 && (
-          <p className="text-sm text-duck-dark/40 px-4 py-6 text-center">No matches</p>
+          <p className="text-sm text-duck-dark/40 px-4 py-6 text-center">{t('capability.noMatches')}</p>
         )}
       </div>
     </>
@@ -469,6 +478,7 @@ export const CapabilityList = ({
  * them for free — no reset effect racing the navigation. `edit` also makes the editor pane linkable.
  */
 export const CapabilityPage = ({ kind, endpoint, queryKey, basePath }: CapabilityPageProps) => {
+  const { t, tUi } = useTranslation();
   const client = useClient();
   const qc = useQueryClient();
   const navigate = useNavigate();
@@ -497,7 +507,7 @@ export const CapabilityPage = ({ kind, endpoint, queryKey, basePath }: Capabilit
       navigate(basePath, { replace: true });
       await qc.invalidateQueries({ queryKey: [queryKey] });
     } catch {
-      toast.error(`Failed to delete ${kind}`);
+      toast.error(t('capability.deleteFailed', { kind: kind.toLowerCase() }));
     }
   };
 
@@ -526,7 +536,7 @@ export const CapabilityPage = ({ kind, endpoint, queryKey, basePath }: Capabilit
                 <ArrowLeft className="h-4 w-4 text-duck-dark/60" />
               </Link>
               <span className="text-sm font-medium text-duck-dark/70 flex-1">
-                {detail?.name ?? `Select a ${kind.toLowerCase()}`}
+                {detail?.name ?? t('capability.selectOne', { kind: kind.toLowerCase() })}
               </span>
               {detail && (
                 <>
@@ -554,10 +564,10 @@ export const CapabilityPage = ({ kind, endpoint, queryKey, basePath }: Capabilit
                   </ReactMarkdown>
                 </article>
               ) : detail ? (
-                <p className="text-sm text-duck-dark/40 text-center mt-12">Empty file</p>
+                <p className="text-sm text-duck-dark/40 text-center mt-12">{t('capability.emptyFile')}</p>
               ) : (
                 <p className="text-sm text-duck-dark/40 text-center mt-12">
-                  Select a {kind.toLowerCase()} to view its contents
+                  {t('capability.selectToView', { kind: kind.toLowerCase() })}
                 </p>
               )}
             </div>
@@ -606,10 +616,10 @@ export const CapabilityPage = ({ kind, endpoint, queryKey, basePath }: Capabilit
           </DialogHeader>
           <div className="flex justify-end gap-2 mt-2">
             <Button variant="outline" onClick={() => setDeleteConfirm(false)} className="cursor-pointer">
-              Cancel
+              {tUi('button.cancel')}
             </Button>
             <Button variant="destructive" onClick={handleDelete} className="cursor-pointer">
-              Delete
+              {t('capability.delete')}
             </Button>
           </div>
         </DialogContent>

src/apps/officer-web/Screens/Dashboard/ChatHistory/index.tsx

@@ -9,6 +9,7 @@ import { errorText } from 'helpers/error-text';
 import { useDashboardState } from 'state/useDashboardState';
 import type { ClaudeSessionDetail } from 'state/useClaudeSessions';
 import { defaultLayout, hasAppType } from './defaultLayout';
+import { useTranslation } from '@/lib/i18n';
 
 // How many messages to render on first open (anchored to the bottom); scroll-up pages older ones in.
 const CHAT_TAIL = 20;
@@ -18,6 +19,7 @@ type SessionListPageProps = {
 };
 
 export const SessionListPage = ({ isNew }: SessionListPageProps) => {
+  const { t } = useTranslation();
   // The group is a path suffix now, not ?cwd= — see officerdev/apps/ChatHistory/chat-routes.ts.
   const { sessionId, '*': splat } = useParams<{ sessionId: string; '*': string }>();
   const groupCwd = cwdFromSplat(splat);
@@ -122,7 +124,7 @@ export const SessionListPage = ({ isNew }: SessionListPageProps) => {
         // Falling back to a bare id still opens a usable pane, but silently: you get an empty chat and
         // no hint that the transcript could not be read, which is indistinguishable from a new session.
         // Most often the id is stale — the transcript was deleted or pruned out from under the link.
-        toast.error(`Could not load this conversation: ${errorText(err, 'not found')}`);
+        toast.error(t('chatHistory.loadFailed', { reason: errorText(err, 'not found') }));
         setSelected({ id: sessionId });
       }
     })();

src/apps/officer-web/Screens/Dashboard/CodeEditor/index.tsx

@@ -1,12 +1,16 @@
 import { CodeEditorView } from 'officerdev';
 import { Widget } from 'widgets/Widget';
+import { useTranslation } from '@/lib/i18n';
 
-export const CodeEditor = () => (
-  <div className="h-full w-full flex items-center justify-center">
-    <Widget title="Code Editor" className="h-[70vh] w-[70vw] overflow-hidden" resizable moveable>
-      {/* The screen is the one editor that owns the address bar, so the open file is `?file=`. The panel
+export const CodeEditor = () => {
+  const { t } = useTranslation();
+  return (
+    <div className="h-full w-full flex items-center justify-center">
+      <Widget title={t('nav.codeEditor')} className="h-[70vh] w-[70vw] overflow-hidden" resizable moveable>
+        {/* The screen is the one editor that owns the address bar, so the open file is `?file=`. The panel
           wrapper deliberately does not pass this: a dashboard can hold two editors. */}
-      <CodeEditorView className="h-full w-full" urlState />
-    </Widget>
-  </div>
-);
+        <CodeEditorView className="h-full w-full" urlState />
+      </Widget>
+    </div>
+  );
+};

src/apps/officer-web/Screens/Dashboard/Jobs/DownloadJobDetail.tsx

@@ -3,6 +3,9 @@ import { useParams, Link } from 'react-router';
 import { Loader2, CheckCircle2, XCircle, Ban, Clock, ArrowLeft, Square, Film, Music } from 'lucide-react';
 import { useClient } from 'hooks/useClient';
 import { toast } from 'sonner';
+import { useTranslation } from '@/lib/i18n';
+
+type TFn = ReturnType<typeof useTranslation>['t'];
 
 // Detail view for a `download` job — a compact two-phase progress readout (metadata → download), polled
 // from the job's persisted progress (the executor emits counter snapshots, not per-item events).
@@ -29,26 +32,40 @@ type DownloadJob = {
 const POLL_MS = 1500;
 const isTerminal = (s: string) => s === 'completed' || s === 'failed' || s === 'stopped' || s === 'interrupted';
 
-const statusBadge = (status: string) => {
+// Takes `t` because it is a module-level helper, not a component — the alternative is a hook
+// call outside a component body.
+const statusBadge = (status: string, t: TFn) => {
   switch (status) {
     case 'running':
       return {
         icon: <Loader2 className="h-4 w-4 animate-spin" />,
-        label: 'Running',
+        label: t('jobs.status.running'),
         cls: 'text-amber-600 dark:text-amber-500',
       };
     case 'pending':
-      return { icon: <Clock className="h-4 w-4" />, label: 'Queued', cls: 'text-blue-600 dark:text-blue-400' };
+      return {
+        icon: <Clock className="h-4 w-4" />,
+        label: t('jobs.status.queued'),
+        cls: 'text-blue-600 dark:text-blue-400',
+      };
     case 'completed':
-      return { icon: <CheckCircle2 className="h-4 w-4" />, label: 'Completed', cls: 'text-duck-teal' };
+      return { icon: <CheckCircle2 className="h-4 w-4" />, label: t('jobs.status.completed'), cls: 'text-duck-teal' };
     case 'failed':
-      return { icon: <XCircle className="h-4 w-4" />, label: 'Failed', cls: 'text-red-600 dark:text-red-400' };
+      return {
+        icon: <XCircle className="h-4 w-4" />,
+        label: t('jobs.status.failed'),
+        cls: 'text-red-600 dark:text-red-400',
+      };
     case 'stopped':
-      return { icon: <Ban className="h-4 w-4" />, label: 'Stopped', cls: 'text-duck-dark/50 dark:text-foreground/50' };
+      return {
+        icon: <Ban className="h-4 w-4" />,
+        label: t('jobs.status.stopped'),
+        cls: 'text-duck-dark/50 dark:text-foreground/50',
+      };
     default:
       return {
         icon: <XCircle className="h-4 w-4" />,
-        label: 'Interrupted',
+        label: t('jobs.status.interrupted'),
         cls: 'text-orange-600 dark:text-orange-400',
       };
   }
@@ -100,6 +117,7 @@ export const PhaseBar = ({
 };
 
 export const DownloadJobDetail = () => {
+  const { t } = useTranslation();
   const { id } = useParams<{ id: string }>();
   const client = useClient();
   const [job, setJob] = useState<DownloadJob | null>(null);
@@ -134,9 +152,9 @@ export const DownloadJobDetail = () => {
     if (!id) return;
     try {
       await client.post(`/jobs/${id}/stop`, {});
-      toast.success('Stop requested');
+      toast.success(t('jobs.stopRequested'));
     } catch {
-      toast.error('Failed to stop');
+      toast.error(t('jobs.stopFailed'));
     }
   };
 
@@ -149,14 +167,14 @@ export const DownloadJobDetail = () => {
   if (!job)
     return (
       <div className="flex-1 flex flex-col items-center justify-center gap-3 text-duck-dark/60 dark:text-foreground/60">
-        <span>Job not found.</span>
+        <span>{t('jobs.notFound')}</span>
         <Link to="/jobs" className="text-duck-teal hover:underline">
-          Back to jobs
+          {t('jobs.backToJobs')}
         </Link>
       </div>
     );
 
-  const badge = statusBadge(job.status);
+  const badge = statusBadge(job.status, t);
   const running = !isTerminal(job.status);
   const p = job.progress;
   const isAudio = job.inputs?.format !== 'video';
@@ -197,7 +215,7 @@ export const DownloadJobDetail = () => {
             onClick={stop}
             className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-md bg-red-500/10 text-red-600 dark:text-red-400 hover:bg-red-500/20 cursor-pointer transition-colors"
           >
-            <Square className="h-3 w-3" /> Stop
+            <Square className="h-3 w-3" /> {t('jobs.stop')}
           </button>
         )}
       </div>
@@ -206,14 +224,14 @@ export const DownloadJobDetail = () => {
         <div className="mx-auto flex max-w-md flex-col gap-5">
           <div className="text-sm text-duck-dark/60 dark:text-foreground/60">{phaseLabel}</div>
           <PhaseBar
-            label="Titles"
+            label={t('jobs.titles')}
             c={p?.meta ?? { done: 0, failed: 0, total: 0 }}
             active={p?.phase === 'metadata'}
             savedLabel="found"
             failedLabel="skipped"
           />
           <PhaseBar
-            label="Download"
+            label={t('jobs.download')}
             c={p?.dl ?? { done: 0, failed: 0, total: 0 }}
             active={p?.phase === 'download'}
             savedLabel="saved"

src/apps/officer-web/Screens/Dashboard/Jobs/JobDetail.tsx

@@ -18,6 +18,7 @@ import { Button } from '@/components/ui/button';
 import { WorkspaceLayout } from 'officerdev';
 import type { LayoutNode, PanelComponents } from 'officerdev';
 import { randomId } from 'helpers/random-id';
+import { useTranslation } from '@/lib/i18n';
 
 type Cost = { inputTokens: number; outputTokens: number; totalUSD: number };
 
@@ -162,6 +163,7 @@ type ToolCallEntryProps = {
 };
 
 const ToolCallEntry = ({ entry }: ToolCallEntryProps) => {
+  const { t } = useTranslation();
   const [expanded, setExpanded] = useState(false);
 
   return (
@@ -183,14 +185,14 @@ const ToolCallEntry = ({ entry }: ToolCallEntryProps) => {
       {expanded && (
         <div className="p-2.5 space-y-2 border-t border-duck-dark/10">
           <div>
-            <div className="text-[10px] text-duck-dark/40 uppercase mb-1">Input</div>
+            <div className="text-[10px] text-duck-dark/40 uppercase mb-1">{t('jobs.input')}</div>
             <pre className="text-duck-dark/60 whitespace-pre-wrap break-words text-[11px] max-h-40 overflow-y-auto">
               {JSON.stringify(entry.toolInput, null, 2)}
             </pre>
           </div>
           {entry.output !== undefined && (
             <div>
-              <div className="text-[10px] text-duck-dark/40 uppercase mb-1">Output</div>
+              <div className="text-[10px] text-duck-dark/40 uppercase mb-1">{t('jobs.output')}</div>
               <pre
                 className={`whitespace-pre-wrap break-words text-[11px] max-h-60 overflow-y-auto ${entry.isError ? 'text-red-500' : 'text-duck-dark/60'}`}
               >
@@ -236,6 +238,7 @@ const DEFAULT_LAYOUT: LayoutNode = {
 };
 
 const StepsPanel = () => {
+  const { t } = useTranslation();
   const ctx = useJobPanel();
   const {
     displaySteps,
@@ -255,7 +258,7 @@ const StepsPanel = () => {
   return (
     <div className="flex h-full flex-col overflow-hidden">
       <div className="px-3 py-2 border-b border-duck-dark/10">
-        <h2 className="text-xs font-medium text-duck-dark/60 uppercase tracking-wider">Steps</h2>
+        <h2 className="text-xs font-medium text-duck-dark/60 uppercase tracking-wider">{t('jobs.steps')}</h2>
       </div>
       <div className="flex-1 overflow-y-auto">
         {displaySteps.map((step, i) => {
@@ -336,6 +339,7 @@ const StepsPanel = () => {
 };
 
 const OutputPanel = () => {
+  const { t } = useTranslation();
   const ctx = useJobPanel();
   const { selectedKey, outputMap, streamingMap, outputPanelRef } = ctx;
 
@@ -345,7 +349,7 @@ const OutputPanel = () => {
   return (
     <div className="flex h-full flex-col overflow-hidden">
       <div className="px-3 py-2 border-b border-duck-dark/10 flex items-center gap-2">
-        <h2 className="text-xs font-medium text-duck-dark/60 uppercase tracking-wider">Output</h2>
+        <h2 className="text-xs font-medium text-duck-dark/60 uppercase tracking-wider">{t('jobs.output')}</h2>
         {selectedKey && (
           <span className="text-xs text-duck-dark/40 truncate">
             {selectedKey.includes(':') ? selectedKey.split(':')[1] : `step ${Number(selectedKey) + 1}`}
@@ -355,12 +359,12 @@ const OutputPanel = () => {
       <div ref={outputPanelRef} className="flex-1 overflow-y-auto p-3 space-y-2 font-mono text-xs">
         {!selectedKey && (
           <div className="flex items-center justify-center h-full text-duck-dark/30 text-sm font-sans">
-            Select a step or sub-task to view output
+            {t('jobs.selectStep')}
           </div>
         )}
         {selectedKey && selectedOutputs.length === 0 && !selectedStreaming && (
           <div className="flex items-center justify-center h-full text-duck-dark/30 text-sm font-sans">
-            No output yet
+            {t('jobs.noOutput')}
           </div>
         )}
         {selectedOutputs.map((entry) => {
@@ -385,6 +389,7 @@ const OutputPanel = () => {
 };
 
 export const PipelineJobDetail = () => {
+  const { t } = useTranslation();
   const { id } = useParams<{ id: string }>();
   const client = useClient();
 
@@ -792,15 +797,15 @@ export const PipelineJobDetail = () => {
   );
 
   if (isLoading) {
-    return <div className="flex h-full items-center justify-center text-duck-dark/30 text-sm">Loading...</div>;
+    return <div className="flex h-full items-center justify-center text-duck-dark/30 text-sm">{t('jobs.loading')}</div>;
   }
 
   if (!job) {
     return (
       <div className="flex h-full flex-col items-center justify-center gap-3 text-duck-dark/30 text-sm">
-        <span>Job not found</span>
+        <span>{t('jobs.notFound')}</span>
         <Link to="/jobs" className="text-duck-teal text-xs hover:underline">
-          Back to jobs
+          {t('jobs.backToJobs')}
         </Link>
       </div>
     );
@@ -821,7 +826,11 @@ export const PipelineJobDetail = () => {
       <Card className="px-4 py-3 shrink-0">
         <div className="flex items-center gap-3">
           {/* The other two job detail panes already do this; this was the last imperative back in Jobs. */}
-          <Link to="/jobs" aria-label="Back to jobs" className="p-1 rounded hover:bg-duck-dark/10 cursor-pointer">
+          <Link
+            to="/jobs"
+            aria-label={t('jobs.backToJobs')}
+            className="p-1 rounded hover:bg-duck-dark/10 cursor-pointer"
+          >
             <ArrowLeft className="h-4 w-4 text-duck-dark/60" />
           </Link>
           <div className="flex-1 min-w-0">
@@ -837,7 +846,7 @@ export const PipelineJobDetail = () => {
           {isRunning && (
             <Button variant="outline" size="sm" onClick={handleStop} className="gap-1.5">
               <Square className="h-3 w-3" />
-              Stop
+              {t('jobs.stop')}
             </Button>
           )}
         </div>
@@ -852,13 +861,13 @@ export const PipelineJobDetail = () => {
             {displayCost && (
               <>
                 <div className="flex items-center gap-1.5 text-duck-dark/60">
-                  <span className="text-duck-dark/40">Tokens:</span>
+                  <span className="text-duck-dark/40">{t('jobs.tokens')}</span>
                   <span className="font-mono tabular-nums">
                     {formatTokens(displayCost.inputTokens)} in / {formatTokens(displayCost.outputTokens)} out
                   </span>
                 </div>
                 <div className="flex items-center gap-1.5 text-duck-dark/60">
-                  <span className="text-duck-dark/40">Cost:</span>
+                  <span className="text-duck-dark/40">{t('jobs.cost')}</span>
                   <span className="font-mono tabular-nums">{formatCost(displayCost.totalUSD)}</span>
                 </div>
               </>

src/apps/officer-web/Screens/Dashboard/Jobs/JobsPage.tsx

@@ -22,6 +22,7 @@ import { Card } from '@/components/Card';
 import { ScriptJobDetail } from './ScriptJobDetail';
 import { DownloadJobDetail } from './DownloadJobDetail';
 import { PipelineJobDetail } from './JobDetail';
+import { useTranslation } from '@/lib/i18n';
 
 type JobSummary = {
   id: string;
@@ -99,6 +100,7 @@ const useJobsData = () => {
 
 type JobRowProps = { job: JobSummary; onAction: (ev: MouseEvent, job: JobSummary) => void };
 const JobRow = ({ job, onAction }: JobRowProps) => {
+  const { t } = useTranslation();
   const { id: activeId } = useParams<{ id: string }>();
   const isRunning = job.status === 'running';
   const target = basename(job.target);
@@ -126,7 +128,7 @@ const JobRow = ({ job, onAction }: JobRowProps) => {
       </Link>
       <button
         onClick={(ev) => onAction(ev, job)}
-        title={isRunning ? 'Stop' : 'Delete'}
+        title={isRunning ? t('jobs.stop') : 'Delete'}
         className="shrink-0 mr-2 p-1.5 rounded-md text-duck-dark/40 hover:text-red-500 hover:bg-red-500/10 md:opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"
       >
         {isRunning ? <Square className="h-4 w-4" /> : <Trash2 className="h-4 w-4" />}
@@ -144,6 +146,7 @@ const PanelHeader = ({ children }: { children: ReactNode }) => (
 // real event is wired to it. Sends { type: 'test' }, which reaches every configured channel — Discord
 // today, APNs and FCM once their credentials exist. Delete this once a real producer replaces it.
 const TestNotificationButton = () => {
+  const { t } = useTranslation();
   const client = useClient();
   const [sending, setSending] = useState(false);
 
@@ -157,12 +160,12 @@ const TestNotificationButton = () => {
       );
       const results = res?.results ?? [];
       if (results.length === 0) {
-        toast.warning('No channels configured');
+        toast.warning(t('jobs.noChannels'));
       } else {
         toast.success(results.map((r) => `${r.channel}: ${r.sent} sent`).join(', '));
       }
     } catch {
-      toast.error('Failed to send notification');
+      toast.error(t('jobs.notifyFailed'));
     } finally {
       setSending(false);
     }
@@ -172,7 +175,7 @@ const TestNotificationButton = () => {
     <button
       onClick={send}
       disabled={sending}
-      title="Send a test notification to every configured channel"
+      title={t('jobs.testNotification')}
       className="ml-auto shrink-0 flex items-center gap-1 text-xs font-medium text-duck-dark/50 hover:text-duck-teal cursor-pointer disabled:opacity-40"
     >
       <Bell className="h-3.5 w-3.5" />
@@ -182,6 +185,7 @@ const TestNotificationButton = () => {
 };
 
 const ActiveJobsPanel = () => {
+  const { t } = useTranslation();
   const { jobs, isLoading, act } = useJobsData();
   const active = [
     ...jobs.filter((j) => j.status === 'running'),
@@ -191,15 +195,17 @@ const ActiveJobsPanel = () => {
     <div className="h-full p-2">
       <Card className="h-full flex flex-col overflow-hidden">
         <PanelHeader>
-          <h2 className="text-sm font-semibold text-duck-dark">Running &amp; Queued</h2>
+          <h2 className="text-sm font-semibold text-duck-dark">{t('jobs.runningQueued')}</h2>
           {active.length > 0 && <span className="text-xs text-duck-dark/40">{active.length}</span>}
           <TestNotificationButton />
         </PanelHeader>
         <div className="flex-1 overflow-y-auto">
           {isLoading ? (
-            <div className="flex items-center justify-center h-full text-duck-dark/30 text-xs">Loading…</div>
+            <div className="flex items-center justify-center h-full text-duck-dark/30 text-xs">{t('jobs.loading')}</div>
           ) : active.length === 0 ? (
-            <div className="flex items-center justify-center h-full text-duck-dark/30 text-xs">Nothing running</div>
+            <div className="flex items-center justify-center h-full text-duck-dark/30 text-xs">
+              {t('jobs.nothingRunning')}
+            </div>
           ) : (
             active.map((job) => <JobRow key={job.id} job={job} onAction={act} />)
           )}
@@ -211,6 +217,7 @@ const ActiveJobsPanel = () => {
 
 // Bottom-left panel: finished / failed / stopped, newest first, searchable.
 const HistoryJobsPanel = () => {
+  const { t } = useTranslation();
   const { jobs, isLoading, act, clearHistory } = useJobsData();
   const [search, setSearch] = useState('');
   const history = jobs
@@ -224,12 +231,12 @@ const HistoryJobsPanel = () => {
     <div className="h-full p-2">
       <Card className="h-full flex flex-col overflow-hidden">
         <PanelHeader>
-          <h2 className="text-sm font-semibold text-duck-dark shrink-0">History</h2>
+          <h2 className="text-sm font-semibold text-duck-dark shrink-0">{t('jobs.history')}</h2>
           <div className="relative flex-1">
             <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-duck-dark/40" />
             <input
               type="text"
-              placeholder="Search…"
+              placeholder={t('jobs.search')}
               value={search}
               onChange={(ev) => setSearch(ev.target.value)}
               className="w-full pl-8 pr-3 py-1 text-sm rounded-md border border-duck-dark/15 bg-background/60 text-duck-dark placeholder:text-duck-dark/30 focus:outline-none focus:ring-1 focus:ring-duck-teal/40"
@@ -238,16 +245,16 @@ const HistoryJobsPanel = () => {
           {history.length > 0 && (
             <button
               onClick={clearHistory}
-              title="Delete all finished jobs"
+              title={t('jobs.deleteFinished')}
               className="shrink-0 text-xs font-medium text-duck-dark/50 hover:text-red-500 cursor-pointer"
             >
-              Clear all
+              {t('jobs.clearAll')}
             </button>
           )}
         </PanelHeader>
         <div className="flex-1 overflow-y-auto">
           {isLoading ? (
-            <div className="flex items-center justify-center h-full text-duck-dark/30 text-xs">Loading…</div>
+            <div className="flex items-center justify-center h-full text-duck-dark/30 text-xs">{t('jobs.loading')}</div>
           ) : history.length === 0 ? (
             <div className="flex items-center justify-center h-full text-duck-dark/30 text-xs">
               {search ? 'No matches' : 'No finished jobs'}
@@ -263,6 +270,7 @@ const HistoryJobsPanel = () => {
 
 // ── Right panel: the selected job's detail, by mode (script terminal / pipeline steps) ──
 const JobDetailPanel = () => {
+  const { t } = useTranslation();
   const { id } = useParams<{ id: string }>();
   const client = useClient();
   const [mode, setMode] = useState<string | null>(null);
@@ -284,7 +292,7 @@ const JobDetailPanel = () => {
       <div className="h-full p-2">
         <Card className="h-full flex flex-col items-center justify-center gap-2 text-duck-dark/30">
           <Inbox className="h-8 w-8" />
-          <span className="text-sm">Select a job</span>
+          <span className="text-sm">{t('jobs.selectJob')}</span>
         </Card>
       </div>
     );
@@ -301,7 +309,7 @@ const JobDetailPanel = () => {
   if (mode === 'notfound') {
     return (
       <div className="h-full p-2">
-        <Card className="h-full flex items-center justify-center text-duck-dark/50 text-sm">Job not found.</Card>
+        <Card className="h-full flex items-center justify-center text-duck-dark/50 text-sm">{t('jobs.notFound')}</Card>
       </div>
     );
   }

src/apps/officer-web/Screens/Dashboard/Jobs/ScriptJobDetail.tsx

@@ -4,6 +4,9 @@ import { Loader2, CheckCircle2, XCircle, Ban, Clock, ArrowLeft, Square } from 'l
 import { useClient } from 'hooks/useClient';
 import { toast } from 'sonner';
 import { PhaseBar, type DownloadProgress } from './DownloadJobDetail';
+import { useTranslation } from '@/lib/i18n';
+
+type TFn = ReturnType<typeof useTranslation>['t'];
 
 type ScriptJob = {
   id: string;
@@ -27,36 +30,46 @@ const isTerminal = (s: string) => s === 'completed' || s === 'failed' || s === '
 const isDownloadProgress = (p: unknown): p is DownloadProgress =>
   !!p && typeof p === 'object' && 'meta' in p && 'dl' in p;
 
-const statusBadge = (status: string, exitCode: number | null) => {
+// Takes `t` because it is a module-level helper, not a component.
+const statusBadge = (status: string, exitCode: number | null, t: TFn) => {
   switch (status) {
     case 'running':
       return {
         icon: <Loader2 className="h-4 w-4 animate-spin" />,
-        label: 'Running',
+        label: t('jobs.status.running'),
         cls: 'text-amber-600 dark:text-amber-500',
       };
     case 'pending':
-      return { icon: <Clock className="h-4 w-4" />, label: 'Queued', cls: 'text-blue-600 dark:text-blue-400' };
+      return {
+        icon: <Clock className="h-4 w-4" />,
+        label: t('jobs.status.queued'),
+        cls: 'text-blue-600 dark:text-blue-400',
+      };
     case 'completed':
-      return { icon: <CheckCircle2 className="h-4 w-4" />, label: 'Completed', cls: 'text-duck-teal' };
+      return { icon: <CheckCircle2 className="h-4 w-4" />, label: t('jobs.status.completed'), cls: 'text-duck-teal' };
     case 'failed':
       return {
         icon: <XCircle className="h-4 w-4" />,
-        label: `Failed${exitCode != null ? ` (exit ${exitCode})` : ''}`,
+        label: exitCode != null ? t('jobs.failedWithCode', { code: exitCode }) : t('jobs.status.failed'),
         cls: 'text-red-600 dark:text-red-400',
       };
     case 'stopped':
-      return { icon: <Ban className="h-4 w-4" />, label: 'Stopped', cls: 'text-duck-dark/50 dark:text-foreground/50' };
+      return {
+        icon: <Ban className="h-4 w-4" />,
+        label: t('jobs.status.stopped'),
+        cls: 'text-duck-dark/50 dark:text-foreground/50',
+      };
     default:
       return {
         icon: <XCircle className="h-4 w-4" />,
-        label: 'Interrupted',
+        label: t('jobs.status.interrupted'),
         cls: 'text-orange-600 dark:text-orange-400',
       };
   }
 };
 
 export const ScriptJobDetail = () => {
+  const { t } = useTranslation();
   const { id } = useParams<{ id: string }>();
   const client = useClient();
 
@@ -137,9 +150,9 @@ export const ScriptJobDetail = () => {
     if (!id) return;
     try {
       await client.post(`/jobs/${id}/stop`, {});
-      toast.success('Stop requested');
+      toast.success(t('jobs.stopRequested'));
     } catch {
-      toast.error('Failed to stop');
+      toast.error(t('jobs.stopFailed'));
     }
   };
 
@@ -153,15 +166,15 @@ export const ScriptJobDetail = () => {
   if (!job) {
     return (
       <div className="flex-1 flex flex-col items-center justify-center gap-3 text-duck-dark/60 dark:text-foreground/60">
-        <span>Job not found.</span>
+        <span>{t('jobs.notFound')}</span>
         <Link to="/jobs" className="text-duck-teal hover:underline">
-          Back to jobs
+          {t('jobs.backToJobs')}
         </Link>
       </div>
     );
   }
 
-  const badge = statusBadge(job.status, job.exitCode);
+  const badge = statusBadge(job.status, job.exitCode, t);
   const running = !isTerminal(job.status);
 
   return (
@@ -185,7 +198,7 @@ export const ScriptJobDetail = () => {
             onClick={stop}
             className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-md bg-red-500/10 text-red-600 dark:text-red-400 hover:bg-red-500/20 cursor-pointer transition-colors"
           >
-            <Square className="h-3 w-3" /> Stop
+            <Square className="h-3 w-3" /> {t('jobs.stop')}
           </button>
         )}
       </div>
@@ -193,14 +206,14 @@ export const ScriptJobDetail = () => {
       {isDownloadProgress(job.progress) && (
         <div className="px-5 py-4 border-b border-duck-dark/10 flex flex-col gap-4">
           <PhaseBar
-            label="Titles"
+            label={t('jobs.titles')}
             c={job.progress.meta}
             active={job.progress.phase === 'metadata'}
             savedLabel="found"
             failedLabel="skipped"
           />
           <PhaseBar
-            label="Download"
+            label={t('jobs.download')}
             c={job.progress.dl}
             active={job.progress.phase === 'download'}
             savedLabel="saved"

src/apps/officer-web/Screens/Dashboard/PasskeyGate/index.tsx

@@ -4,8 +4,10 @@ import { KeyRound } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Card } from '@/components/Card';
 import { useAuth } from 'hooks/useAuth';
+import { useTranslation } from '@/lib/i18n';
 
 export const PasskeyGate = () => {
+  const { t } = useTranslation();
   const { user, createPasskeyCredentials } = useAuth();
   const [isRegistering, setIsRegistering] = useState(false);
 
@@ -31,7 +33,7 @@ export const PasskeyGate = () => {
             <KeyRound className="h-8 w-8 text-duck-teal" />
           </div>
 
-          <h2 className="text-2xl font-bold text-duck-dark">Set up your passkey</h2>
+          <h2 className="text-2xl font-bold text-duck-dark">{t('passkeyGate.setUp')}</h2>
 
           <p className="text-duck-dark/70">
             Passkeys provide a secure, passwordless way to access your account. Each device or browser needs its own

src/apps/officer-web/lib/locales.ts

@@ -6,9 +6,22 @@
  */
 export type ShippedLocale = { code: string; label: string };
 
-export const SHIPPED_LOCALES: ShippedLocale[] = [
-  { code: 'en-GB', label: 'English (UK)' },
-  { code: 'pt-PT', label: 'Português (Portugal)' },
-];
+/**
+ * The label is an AUTONYM — each language named in its own language, so "Português" reads as Portuguese
+ * whichever locale the UI is currently in. That is the convention for a language picker and it is the
+ * useful behaviour: somebody who cannot read the current language still has to find theirs.
+ *
+ * Computed rather than written down, for the same reason the spoken-language list is (see Languages.tsx):
+ * `Intl` already knows every language's name in every locale, including its own.
+ */
+const autonym = (code: string): string => {
+  const name = new Intl.DisplayNames([code], { type: 'language', fallback: 'code' }).of(code) ?? code;
+  return name.charAt(0).toUpperCase() + name.slice(1);
+};
+
+export const SHIPPED_LOCALES: ShippedLocale[] = ['en-GB', 'pt-PT'].map((code) => ({
+  code,
+  label: autonym(code),
+}));
 
 export const FALLBACK_LOCALE = 'en-GB';

src/apps/officer-web/locales/en-GB.json

@@ -484,7 +484,8 @@
     "calendar": "Calendar",
     "contacts": "Contacts",
     "appStore": "App store",
-    "marketplace": "Marketplace"
+    "marketplace": "Marketplace",
+    "codeEditor": "Code Editor"
   },
   "theme": {
     "pillTitle": "Theme: {{name}}  ·  ctrl+shift+←/→ cycle · ctrl+shift+space browse · ctrl+shift+f {{starAction}}",
@@ -636,5 +637,68 @@
     "send": "Send · on an empty composer with something queued, send that now",
     "newline": "Newline",
     "stopTurn": "Stop the turn that is generating"
+  },
+  "jobs": {
+    "runningQueued": "Running & Queued",
+    "loading": "Loading…",
+    "nothingRunning": "Nothing running",
+    "history": "History",
+    "clearAll": "Clear all",
+    "selectJob": "Select a job",
+    "notFound": "Job not found.",
+    "backToJobs": "Back to jobs",
+    "stop": "Stop",
+    "testNotification": "Send a test notification to every configured channel",
+    "search": "Search…",
+    "deleteFinished": "Delete all finished jobs",
+    "noChannels": "No channels configured",
+    "notifyFailed": "Failed to send notification",
+    "stopRequested": "Stop requested",
+    "stopFailed": "Failed to stop",
+    "titles": "Titles",
+    "download": "Download",
+    "input": "Input",
+    "output": "Output",
+    "steps": "Steps",
+    "selectStep": "Select a step or sub-task to view output",
+    "noOutput": "No output yet",
+    "tokens": "Tokens:",
+    "cost": "Cost:",
+    "status": {
+      "running": "Running",
+      "queued": "Queued",
+      "completed": "Completed",
+      "failed": "Failed",
+      "stopped": "Stopped",
+      "interrupted": "Interrupted"
+    },
+    "failedWithCode": "Failed (exit {{code}})"
+  },
+  "activity": {
+    "title": "Activity",
+    "backgroundTasks": "Background tasks",
+    "detached": "Detached",
+    "backToList": "Back to the list",
+    "selectTask": "Select a task to follow its live output",
+    "noneRunning": "none running"
+  },
+  "passkeyGate": {
+    "setUp": "Set up your passkey"
+  },
+  "chatHistory": {
+    "loadFailed": "Could not load this conversation: {{reason}}"
+  },
+  "capability": {
+    "frontmatter": "Frontmatter",
+    "noMatches": "No matches",
+    "emptyFile": "Empty file",
+    "createFailed": "Could not create the {{kind}}",
+    "deleteFailed": "Could not delete the {{kind}}",
+    "searchPlaceholder": "Search {{kind}}…",
+    "selectOne": "Select a {{kind}}",
+    "selectToView": "Select a {{kind}} to view its contents",
+    "delete": "Delete",
+    "createPrompt": "Help me create the content for this new {{kind}} file",
+    "improvePrompt": "Help me understand and improve this {{kind}} file"
   }
 }

src/apps/officer-web/locales/pt-PT.json

@@ -484,7 +484,8 @@
     "calendar": "Calendário",
     "contacts": "Contactos",
     "appStore": "Loja de aplicações",
-    "marketplace": "Marketplace"
+    "marketplace": "Marketplace",
+    "codeEditor": "Editor de código"
   },
   "theme": {
     "pillTitle": "Tema: {{name}}  ·  ctrl+shift+←/→ percorrer · ctrl+shift+space explorar · ctrl+shift+f {{starAction}}",
@@ -636,5 +637,68 @@
     "send": "Enviar · num compositor vazio com algo em fila, enviar isso agora",
     "newline": "Nova linha",
     "stopTurn": "Parar o turno que está a gerar"
+  },
+  "jobs": {
+    "runningQueued": "Em execução e em fila",
+    "loading": "A carregar…",
+    "nothingRunning": "Nada em execução",
+    "history": "Histórico",
+    "clearAll": "Limpar tudo",
+    "selectJob": "Selecione um trabalho",
+    "notFound": "Trabalho não encontrado.",
+    "backToJobs": "Voltar aos trabalhos",
+    "stop": "Parar",
+    "testNotification": "Enviar uma notificação de teste para todos os canais configurados",
+    "search": "Pesquisar…",
+    "deleteFinished": "Eliminar todos os trabalhos terminados",
+    "noChannels": "Nenhum canal configurado",
+    "notifyFailed": "Falha ao enviar a notificação",
+    "stopRequested": "Paragem pedida",
+    "stopFailed": "Falha ao parar",
+    "titles": "Títulos",
+    "download": "Descarregar",
+    "input": "Entrada",
+    "output": "Saída",
+    "steps": "Passos",
+    "selectStep": "Selecione um passo ou subtarefa para ver a saída",
+    "noOutput": "Ainda não há saída",
+    "tokens": "Tokens:",
+    "cost": "Custo:",
+    "status": {
+      "running": "Em execução",
+      "queued": "Em fila",
+      "completed": "Concluído",
+      "failed": "Falhou",
+      "stopped": "Parado",
+      "interrupted": "Interrompido"
+    },
+    "failedWithCode": "Falhou (saída {{code}})"
+  },
+  "activity": {
+    "title": "Atividade",
+    "backgroundTasks": "Tarefas em segundo plano",
+    "detached": "Destacada",
+    "backToList": "Voltar à lista",
+    "selectTask": "Selecione uma tarefa para seguir a sua saída ao vivo",
+    "noneRunning": "nenhuma em execução"
+  },
+  "passkeyGate": {
+    "setUp": "Configure a sua passkey"
+  },
+  "chatHistory": {
+    "loadFailed": "Não foi possível carregar esta conversa: {{reason}}"
+  },
+  "capability": {
+    "frontmatter": "Frontmatter",
+    "noMatches": "Sem correspondências",
+    "emptyFile": "Ficheiro vazio",
+    "createFailed": "Não foi possível criar o {{kind}}",
+    "deleteFailed": "Não foi possível eliminar o {{kind}}",
+    "searchPlaceholder": "Pesquisar {{kind}}…",
+    "selectOne": "Selecione um {{kind}}",
+    "selectToView": "Selecione um {{kind}} para ver o seu conteúdo",
+    "delete": "Eliminar",
+    "createPrompt": "Ajuda-me a criar o conteúdo deste novo ficheiro de {{kind}}",
+    "improvePrompt": "Ajuda-me a compreender e melhorar este ficheiro de {{kind}}"
   }
 }