keyed the dock, header and shell chrome (555 -> 487)

Layout reaches zero. The dock, header, user menu, theme switcher, spotlight, shortcuts modal, screen-error fallback, rescan and bug report. Three things worth knowing: CORE_DOCK_ITEMS now carries labelKey instead of label, and one useDockItems() hook resolves the composed list. DashboardLayout, Spotlight and DockSettings each spread the same two sources before, so each would have had to resolve labels itself. Plugin tiles keep the name from their own manifest — a plugin's strings are not ours. Spotlight resolves labels INSIDE the hook, so rank() still matches what the reader can see rather than a dot-path. Its to: '/settings/...' literals are untouched, which is what docs:check parses — verified still 20 offered, 0 missing. The rescan toast said 'N skill(s)'. That is English giving up on a plural, so it is now a real plural entry per noun and reads correctly at 0, 1 and 2 in both locales. ThemeSwitcher used t as its theme loop variable; renamed to entry.
2026-08-23 04:40:39 +00:00
parent 6d8709c05a
commit 926034750f
17 changed files with 685 additions and 179 deletions
@@ -1,16 +1,18 @@
 import { Bug } from 'lucide-react';
 import { useBugReport } from './use-bug-report';
+import { useTranslation } from '@/lib/i18n';
 import { BugReportDialog } from './BugReportDialog';

 export const BugReportButton = () => {
  const bugReport = useBugReport();
+  const { t } = useTranslation();

  return (
    <>
      <button
        onClick={bugReport.handleOpen}
        className="flex h-8 w-8 items-center justify-center rounded-full bg-destructive text-destructive-foreground transition-transform hover:scale-110"
-        aria-label="Report a bug"
+        aria-label={t('bugReport.label')}
      >
        <Bug size={16} />
      </button>
@@ -3,6 +3,7 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '
 import { Button } from '@/components/ui/button';
 import { Textarea } from '@/components/ui/textarea';
 import { Loader2 } from 'lucide-react';
+import { useTranslation } from '@/lib/i18n';

 type BugReportDialogProps = {
  open: boolean;
@@ -21,6 +22,7 @@ export const BugReportDialog = ({
  onClose,
  onSubmit,
 }: BugReportDialogProps) => {
+  const { t, tUi } = useTranslation();
  const [description, setDescription] = useState('');

  const previewUrl = useMemo(() => (screenshot ? URL.createObjectURL(screenshot) : null), [screenshot]);
@@ -36,7 +38,7 @@ export const BugReportDialog = ({
    <Dialog open={open} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-lg">
        <DialogHeader>
-          <DialogTitle>Report a Bug</DialogTitle>
+          <DialogTitle>{t('bugReport.title')}</DialogTitle>
        </DialogHeader>

        <div className="space-y-4">
@@ -46,34 +48,32 @@ export const BugReportDialog = ({
                <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
              </div>
            ) : previewUrl ? (
-              <img src={previewUrl} alt="Screenshot" className="max-h-48 w-full object-contain" />
+              <img src={previewUrl} alt={t('bugReport.screenshot')} className="max-h-48 w-full object-contain" />
            ) : (
              <div className="flex h-40 items-center justify-center text-sm text-muted-foreground">
-                No screenshot captured
+                {t('bugReport.noScreenshot')}
              </div>
            )}
          </div>

          <Textarea
-            placeholder="Describe what went wrong..."
+            placeholder={t('bugReport.describePlaceholder')}
            value={description}
            onChange={(ev) => setDescription(ev.target.value)}
            rows={4}
            autoFocus
          />

-          <p className="text-xs text-muted-foreground">
-            Console logs, browser info, and recent API errors are collected automatically.
-          </p>
+          <p className="text-xs text-muted-foreground">{t('bugReport.collectedNote')}</p>
        </div>

        <DialogFooter>
          <Button variant="outline" onClick={onClose} disabled={submitting}>
-            Cancel
+            {tUi('button.cancel')}
          </Button>
          <Button onClick={handleSubmit} disabled={!canSubmit}>
-            {submitting ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
-            Submit
+            {submitting ? <Loader2 className="me-2 h-4 w-4 animate-spin" /> : null}
+            {t('bugReport.submit')}
          </Button>
        </DialogFooter>
      </DialogContent>
@@ -6,6 +6,7 @@ import { useGlobal } from 'hooks/useGlobal';
 import type { ErrorDetails } from 'hooks/useClient';
 import { getConsoleBuffer } from '@/lib/console-buffer';
 import { toast } from 'sonner';
+import { useTranslation } from '@/lib/i18n';

 export const useBugReport = () => {
  const [open, setOpen] = useState(false);
@@ -14,6 +15,7 @@ export const useBugReport = () => {
  const [submitting, setSubmitting] = useState(false);
  const client = useClient();
  const { user } = useAuth();
+  const { t } = useTranslation();
  const [apiError] = useGlobal<ErrorDetails | null>('API_ERROR', null);

  const handleOpen = useCallback(async () => {
@@ -57,15 +59,15 @@ export const useBugReport = () => {
        }

        await client.post('/bug-report', formData);
-        toast.success('Bug report submitted');
+        toast.success(t('bugReport.submitted'));
        handleClose();
      } catch {
-        toast.error('Failed to submit bug report');
+        toast.error(t('bugReport.failed'));
      } finally {
        setSubmitting(false);
      }
    },
-    [screenshot, client, user, apiError, handleClose],
+    [screenshot, client, user, apiError, handleClose, t],
  );

  return { open, capturing, submitting, screenshot, handleOpen, handleClose, handleSubmit };
@@ -6,7 +6,7 @@ import { ErrorBoundary } from '@/components/ErrorBoundary';
 import { ScreenErrorFallback } from './ScreenErrorFallback';
 import { Background } from './Background';
 import { Header } from './Header';
-import { Dock, CORE_DOCK_ITEMS, dockItemsFromPlugins, defaultDockPaths } from './Dock';
+import { Dock, useDockItems, defaultDockPaths } from './Dock';
 import { Spotlight } from './Spotlight/Spotlight';
 import { ShortcutsModal } from './ShortcutsModal';
 import { useIsTouch } from './useIsTouch';
@@ -24,10 +24,8 @@ export function DashboardLayout({ children }: DashboardLayoutProps) {
  // will then slam is worse than one that never showed it.
  // The shell's own items plus whatever the installed sidecars contribute. `plugins` already excludes
  // anything uninstalled or disabled, so an absent feature has no tile at all rather than a dead one.
-  const permitted = useMemo(
-    () => [...CORE_DOCK_ITEMS, ...dockItemsFromPlugins(plugins)].filter((item) => canVisit(item.to)),
-    [canVisit, plugins],
-  );
+  const allDockItems = useDockItems(plugins);
+  const permitted = useMemo(() => allDockItems.filter((item) => canVisit(item.to)), [canVisit, allDockItems]);
  const { items: visibleItems } = useDock(
    permitted,
    useMemo(() => defaultDockPaths(plugins), [plugins]),
@@ -1,10 +1,12 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { NavLink } from 'react-router';
 import type { LucideIcon } from 'lucide-react';
 import { resolveIcon } from 'officerdev';
 import type { PluginManifest } from 'hooks/usePermissions';
+import { useTranslation, type AppTranslationKey } from '@/lib/i18n';

 export type DockItem = {
+  /** Already resolved for the active locale — see `useDockItems`. */
  label: string;
  to: string;
  color: string;
@@ -169,22 +171,22 @@ import {
 * These are the baseline — chat, files, the terminal and the app's own screens — plus Gitea, which is in
 * the light profile because it fronts a remote instance and installs nothing locally.
 */
-export const CORE_DOCK_ITEMS: DockItem[] = [
-  { label: 'Home', to: '/', icon: Home, color: '#f59e0b' },
-  { label: 'Files', to: '/files', icon: FolderOpen, color: '#fbbf24' },
-  { label: 'Chat', to: '/chat', icon: MessageCircle, color: '#60a5fa' },
-  { label: 'Command HQ', to: '/command-hq', icon: Radar, color: '#f43f5e' },
-  { label: 'Editor', to: '/code-editor', icon: Code, color: '#a78bfa' },
-  { label: 'Jobs', to: '/jobs', icon: Workflow, color: '#14b8a6' },
-  { label: 'Terminal', to: '/terminal', icon: Monitor, color: '#f97316' },
-  { label: 'Browser', to: '/browser', icon: Globe, color: '#06b6d4' },
-  { label: 'Monitor', to: '/system-monitor', icon: Activity, color: '#0ea5e9' },
-  { label: 'Activity', to: '/activity', icon: Radio, color: '#f59e0b' },
-  { label: 'Dashboards', to: '/dashboards', icon: LayoutGrid, color: '#8b5cf6' },
+export const CORE_DOCK_ITEMS: CoreDockItem[] = [
+  { labelKey: 'nav.home', to: '/', icon: Home, color: '#f59e0b' },
+  { labelKey: 'nav.files', to: '/files', icon: FolderOpen, color: '#fbbf24' },
+  { labelKey: 'nav.chat', to: '/chat', icon: MessageCircle, color: '#60a5fa' },
+  { labelKey: 'nav.commandHq', to: '/command-hq', icon: Radar, color: '#f43f5e' },
+  { labelKey: 'nav.editor', to: '/code-editor', icon: Code, color: '#a78bfa' },
+  { labelKey: 'nav.jobs', to: '/jobs', icon: Workflow, color: '#14b8a6' },
+  { labelKey: 'nav.terminal', to: '/terminal', icon: Monitor, color: '#f97316' },
+  { labelKey: 'nav.browser', to: '/browser', icon: Globe, color: '#06b6d4' },
+  { labelKey: 'nav.monitor', to: '/system-monitor', icon: Activity, color: '#0ea5e9' },
+  { labelKey: 'nav.activity', to: '/activity', icon: Radio, color: '#f59e0b' },
+  { labelKey: 'nav.dashboards', to: '/dashboards', icon: LayoutGrid, color: '#8b5cf6' },
  // Core because it is the door into another account's filesystem, and the permission that gates it is
  // `kind: 'app'` — so `canVisit()` hides the tile from anyone not granted it, which is the same treatment
  // every other grantable tile here gets.
-  { label: 'SendOff', to: '/sendoff', icon: Send, color: '#22d3ee' },
+  { labelKey: 'nav.sendOff', to: '/sendoff', icon: Send, color: '#22d3ee' },
  // Core since 2026-08-19. These were contributed by the app-store `caldav` entry until calendar and
  // contacts became core, and deleting that entry took their tiles with it — the routes kept working
  // while the dock and the settings list went silent about them, which is exactly the shape of failure
@@ -194,16 +196,16 @@ export const CORE_DOCK_ITEMS: DockItem[] = [
  // the same voxel mark the phone apps show. `tile: 'bare'` for the same reason a plugin's artwork
  // does — the art brings its own frame, and a coloured square behind it reads as a mistake. `color`
  // still earns its place: the active glow, the indicator dot and the settings tint all use it.
-  { label: 'Calendar', to: '/calendar', image: '/icons/calendar.png', tile: 'bare', color: '#ef4444' },
-  { label: 'Contacts', to: '/contacts', image: '/icons/contacts.png', tile: 'bare', color: '#8b5cf6' },
+  { labelKey: 'nav.calendar', to: '/calendar', image: '/icons/calendar.png', tile: 'bare', color: '#ef4444' },
+  { labelKey: 'nav.contacts', to: '/contacts', image: '/icons/contacts.png', tile: 'bare', color: '#8b5cf6' },
  // Core because the tailnet is the perimeter — origin checking was removed on the grounds that the
  // tailnet stands in its place, so administering it cannot be an optional extra. It is `kind: 'admin'`,
  // and DashboardLayout filters every tile through canVisit(), so a member never sees this one.
  // Core by necessity: the store is how every other feature arrives, so it can never be one of the
  // things that disappears when uninstalled.
-  { label: 'App store', to: '/app-store', icon: Store, color: '#64748b' },
+  { labelKey: 'nav.appStore', to: '/app-store', icon: Store, color: '#64748b' },
  // Core, not contributed by a plugin: this is the screen that installs them, so it cannot arrive with one.
-  { label: 'Marketplace', to: '/marketplace', icon: Puzzle, color: '#94a3b8' },
+  { labelKey: 'nav.marketplace', to: '/marketplace', icon: Puzzle, color: '#94a3b8' },
 ];

 /**
@@ -213,6 +215,30 @@ export const CORE_DOCK_ITEMS: DockItem[] = [
 * have to survive being JSON from a marketplace. An unknown name resolves to a neutral box rather than
 * throwing: a plugin naming an icon this build does not have should look plain, not break the dock.
 */
+/**
+ * A shell tile before its label is resolved. `labelKey` rather than `label` because these are the only
+ * dock entries the platform owns the words for — a plugin's tile carries the name from its own manifest,
+ * which is the plugin's string and not ours to translate (docs/localization.md open question 3).
+ */
+type CoreDockItem = Omit<DockItem, 'label'> & { labelKey: AppTranslationKey };
+
+/**
+ * The composed dock, with the shell's own labels in the active locale.
+ *
+ * One place rather than three: DashboardLayout, Spotlight and DockSettings each built this list by
+ * spreading the same two sources, and each would otherwise have to resolve labels itself.
+ */
+export function useDockItems(plugins: PluginManifest[]): DockItem[] {
+  const { t } = useTranslation();
+  return useMemo(
+    () => [
+      ...CORE_DOCK_ITEMS.map(({ labelKey, ...item }) => ({ ...item, label: t(labelKey) })),
+      ...dockItemsFromPlugins(plugins),
+    ],
+    [t, plugins],
+  );
+}
+
 export function dockItemsFromPlugins(plugins: PluginManifest[]): DockItem[] {
  return plugins.flatMap((plugin) => {
    const tile = (t: {
@@ -13,6 +13,7 @@ import { RescanButton } from '../Rescan/RescanButton';
 import { usePageTitle } from '@/state/usePageTitle';
 import { useAuth } from 'hooks/useAuth';
 import { useThemeAsset } from '@/components/ui/ThemeProvider';
+import { useTranslation } from '@/lib/i18n';
 // import { BugReportButton } from '../BugReport/BugReportButton';

 // Center title: click to rename this browser tab. The name is kept in sessionStorage, so it survives a
@@ -20,14 +21,15 @@ import { useThemeAsset } from '@/components/ui/ThemeProvider';
 // the field hand the tab back to the route's own name.
 function EditablePageTitle() {
  const [title, rename] = usePageTitle();
+  const { t } = useTranslation();

  return (
    <EditableTitle
      value={title}
      onCommit={rename}
      allowEmpty
-      ariaLabel="Tab name"
-      hint="Click to rename this tab — clear it to go back to the page name"
+      ariaLabel={t('header.tabName')}
+      hint={t('header.tabNameHint')}
      className="header-ink pointer-events-auto max-w-[50vw] cursor-text truncate text-base font-bold transition-opacity hover:opacity-70 md:text-xl"
      inputClassName="header-ink header-ink-border pointer-events-auto max-w-[50vw] border-b bg-transparent text-center text-base font-bold outline-none md:text-xl"
    />
@@ -48,6 +50,7 @@ export function Header({ dockItems, hidden }: HeaderProps) {
  const [open, setOpen] = useState(false);
  const isTouch = useIsTouch();
  const { user } = useAuth();
+  const { t } = useTranslation();
  // The mark comes from the theme — a white-labelled build replaces it without touching this file.
  const logo = useThemeAsset('--logo-src');

@@ -81,7 +84,7 @@ export function Header({ dockItems, hidden }: HeaderProps) {
            */}
            <div
              role="img"
-              aria-label="Officer"
+              aria-label={t('header.logoAlt')}
              className="h-8 md:h-12 w-24 md:w-36 bg-contain bg-left bg-no-repeat"
              /* No skew. The wordmark is drawn, kerned pair by pair, and shipped as the finished mark —
                 shearing it in CSS was how the OLD logo got its slant, and doing it to this one distorts
@@ -119,7 +122,7 @@ export function Header({ dockItems, hidden }: HeaderProps) {
        <Sheet open={open} onOpenChange={setOpen}>
          <SheetContent side="left">
            <SheetHeader>
-              <SheetTitle>Navigation</SheetTitle>
+              <SheetTitle>{t('header.navigation')}</SheetTitle>
            </SheetHeader>
            <nav className="flex flex-col gap-1 mt-4 px-2">
              {dockItems.map((item) => (
@@ -3,6 +3,7 @@ import { Link } from 'react-router';
 import { Loader2, ListOrdered } from 'lucide-react';
 import { useClient } from 'hooks/useClient';
 import { usePermissions } from 'hooks/usePermissions';
+import { useTranslation } from '@/lib/i18n';

 type Counts = { running: number; runningJobId: string | null; queued: number };

@@ -15,6 +16,7 @@ type Counts = { running: number; runningJobId: string | null; queued: number };
 export const JobsIndicator = () => {
  const client = useClient();
  const { can } = usePermissions();
+  const { t } = useTranslation();
  const allowed = can('tasks');
  const [counts, setCounts] = useState<Counts>({ running: 0, runningJobId: null, queued: 0 });

@@ -44,7 +46,7 @@ export const JobsIndicator = () => {
    <div className="flex items-center gap-1.5">
      <Link
        to={counts.runningJobId ? `/jobs/${counts.runningJobId}` : '/jobs'}
-        title={counts.running ? 'Running job' : 'Nothing running'}
+        title={counts.running ? t('header.jobsRunning') : t('header.jobsNothingRunning')}
        className={`${pill} text-white ${counts.running ? 'bg-blue-500/60 hover:bg-blue-500/75' : 'bg-black/25 hover:bg-black/35'}`}
      >
        <Loader2 className={`h-3.5 w-3.5 ${counts.running ? 'animate-spin' : ''}`} />
@@ -52,7 +54,7 @@ export const JobsIndicator = () => {
      </Link>
      <Link
        to="/jobs"
-        title="Queued jobs"
+        title={t('header.jobsQueued')}
        className={`${pill} text-white ${counts.queued ? 'bg-amber-500/70 hover:bg-amber-500/85' : 'bg-black/25 hover:bg-black/35'}`}
      >
        <ListOrdered className="h-3.5 w-3.5" />
@@ -5,6 +5,7 @@ import { favouritesFirst, groupByFamily, rotateToSelected } from 'theme';
 import * as Dropdown from '@/components/ui/dropdown-menu';
 import { useTheme, useThemeKeys } from '@/components/ui/ThemeProvider';
 import { useThemeFavorites } from '@/state/useThemeFavorites';
+import { useTranslation } from '@/lib/i18n';

 const {
  DropdownMenu,
@@ -32,6 +33,7 @@ const {
 */
 export const ThemeSwitcher = () => {
  const { theme, themeId, setTheme, themes } = useTheme();
+  const { t } = useTranslation();
  const { favorites, isFavorite, toggle } = useThemeFavorites();
  // Declared before the key hook, which needs the toggle: `f` in the list and `ctrl+shift+f` from anywhere.
  const { open, setOpen, focused, setFocused } = useThemeKeys({ onToggleFavorite: toggle });
@@ -50,7 +52,7 @@ export const ThemeSwitcher = () => {
  */
  const ordered = useMemo(() => {
    const rotated = rotateToSelected(themes, themeId);
-    const listed = onlyFavorites ? rotated.filter((t) => favorites.has(t.id)) : rotated;
+    const listed = onlyFavorites ? rotated.filter((entry) => favorites.has(entry.id)) : rotated;
    return favouritesFirst(listed, favorites);
    // `favorites` is a fresh Set each render; its CONTENTS are what matter, so key on those.
  }, [themes, themeId, onlyFavorites, [...favorites].sort().join(',')]);
@@ -62,10 +64,11 @@ export const ThemeSwitcher = () => {
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <button
-            title={`Theme: ${theme.name}  ·  ctrl+shift+←/→ cycle · ctrl+shift+space browse · ctrl+shift+f ${
-              isFavorite(themeId) ? 'unstar' : 'star'
-            }`}
-            aria-label={`Theme: ${theme.name}`}
+            title={t('theme.pillTitle', {
+              name: theme.name,
+              starAction: isFavorite(themeId) ? t('theme.unstar') : t('theme.star'),
+            })}
+            aria-label={t('theme.pillLabel', { name: theme.name })}
            // Named rather than a palette glyph: with 227 themes the one you are wearing is worth
            // reading at a glance, and an icon cannot say which that is. Same pill as JobsIndicator so
            // the cluster stays one shape.
@@ -89,8 +92,8 @@ export const ThemeSwitcher = () => {
        <DropdownMenuContent align="end" className="z-50 flex max-h-[70vh] w-64 flex-col overflow-hidden p-0">
          <div className="shrink-0 border-b border-border px-2 py-1.5">
            <DropdownMenuLabel className="px-0 py-0 text-xs font-normal leading-relaxed text-muted-foreground">
-              <span className="block">ctrl+shift+←/→ cycle · ctrl+shift+space browse</span>
-              <span className="block">ctrl+? for every shortcut</span>
+              <span className="block">{t('theme.cycleHint')}</span>
+              <span className="block">{t('theme.everyShortcutHint')}</span>
            </DropdownMenuLabel>
            <button
              type="button"
@@ -105,35 +108,41 @@ export const ThemeSwitcher = () => {
              }`}
            >
              <Star className={`h-3.5 w-3.5 ${onlyFavorites ? 'fill-current' : ''}`} />
-              {onlyFavorites ? `Favourites only (${favorites.size})` : `Favourites (${favorites.size})`}
+              {onlyFavorites
+                ? t('theme.favouritesOnly', { count: favorites.size })
+                : t('theme.favourites', { count: favorites.size })}
            </button>
          </div>

          <div className="min-h-0 flex-1 overflow-y-auto p-1">
            {ordered.length === 0 ? (
-              <p className="px-2 py-6 text-center text-xs text-muted-foreground">
-                No favourites yet — star one with the button on its row.
-              </p>
+              <p className="px-2 py-6 text-center text-xs text-muted-foreground">{t('theme.noFavourites')}</p>
            ) : (
              families.map(([family, entries]) => (
                <div key={family}>
-                  {entries.map((t) => (
-                    <DropdownMenuItem key={t.id} onClick={() => setTheme(t.id)} className="cursor-pointer pr-1">
-                      <Check className={`mr-2 h-4 w-4 shrink-0 ${t.id === themeId ? 'opacity-100' : 'opacity-0'}`} />
-                      <span className="min-w-0 flex-1 truncate">{t.name}</span>
+                  {entries.map((entry) => (
+                    <DropdownMenuItem key={entry.id} onClick={() => setTheme(entry.id)} className="cursor-pointer pr-1">
+                      <Check
+                        className={`mr-2 h-4 w-4 shrink-0 ${entry.id === themeId ? 'opacity-100' : 'opacity-0'}`}
+                      />
+                      <span className="min-w-0 flex-1 truncate">{entry.name}</span>
                      {/* A sibling of the row's action, never nested inside it — starring is not choosing. */}
                      <button
                        type="button"
-                        aria-label={isFavorite(t.id) ? `Unstar ${t.name}` : `Star ${t.name}`}
-                        title={isFavorite(t.id) ? 'Remove from favourites' : 'Add to favourites'}
+                        aria-label={
+                          isFavorite(entry.id)
+                            ? t('theme.unstarNamed', { name: entry.name })
+                            : t('theme.starNamed', { name: entry.name })
+                        }
+                        title={isFavorite(entry.id) ? t('theme.removeFromFavourites') : t('theme.addToFavourites')}
                        onClick={(ev) => {
                          ev.preventDefault();
                          ev.stopPropagation();
-                          toggle(t.id);
+                          toggle(entry.id);
                        }}
                        className="ml-1 shrink-0 rounded p-1 text-muted-foreground hover:text-primary"
                      >
-                        <Star className={`h-3.5 w-3.5 ${isFavorite(t.id) ? 'fill-current text-primary' : ''}`} />
+                        <Star className={`h-3.5 w-3.5 ${isFavorite(entry.id) ? 'fill-current text-primary' : ''}`} />
                      </button>
                    </DropdownMenuItem>
                  ))}
@@ -165,22 +174,24 @@ export const ThemeSwitcher = () => {
                  first. Both lists agreeing is the point: "the one below the one I have on" has to mean the
                  same thing in both, or the browse teaches you an order the menu then contradicts. */}
              <ul className="flex max-h-[70vh] flex-col gap-1 overflow-y-auto">
-                {ordered.map((t) => {
-                  const isFocused = t.id === focused;
+                {ordered.map((entry) => {
+                  const isFocused = entry.id === focused;
                  return (
-                    <li key={t.id}>
+                    <li key={entry.id}>
                      <button
-                        onMouseEnter={() => setFocused(t.id)}
+                        onMouseEnter={() => setFocused(entry.id)}
                        onClick={() => {
-                          setTheme(t.id);
+                          setTheme(entry.id);
                          setOpen(false);
                        }}
                        className={`flex w-full items-center gap-2 rounded-md px-4 py-1 text-left transition-all cursor-pointer ${
                          isFocused ? 'text-2xl font-extrabold' : 'text-lg opacity-60 hover:opacity-100'
                        }`}
                      >
-                        <span className="min-w-0 flex-1 truncate">{t.name}</span>
-                        {t.id === themeId && <span className="shrink-0 text-xs opacity-70">active</span>}
+                        <span className="min-w-0 flex-1 truncate">{entry.name}</span>
+                        {entry.id === themeId && (
+                          <span className="shrink-0 text-xs opacity-70">{t('theme.active')}</span>
+                        )}
                        {/*
                          A span, not a button: this sits inside the row's own <button>, and a button inside
                          a button is invalid HTML that browsers resolve by dropping one of them. The click
@@ -190,18 +201,24 @@ export const ThemeSwitcher = () => {
                        <span
                          role="button"
                          tabIndex={-1}
-                          aria-label={isFavorite(t.id) ? `Unstar ${t.name}` : `Star ${t.name}`}
-                          title={isFavorite(t.id) ? 'Remove from favourites (f)' : 'Add to favourites (f)'}
+                          aria-label={
+                            isFavorite(entry.id)
+                              ? t('theme.unstarNamed', { name: entry.name })
+                              : t('theme.starNamed', { name: entry.name })
+                          }
+                          title={
+                            isFavorite(entry.id) ? t('theme.removeFromFavouritesKey') : t('theme.addToFavouritesKey')
+                          }
                          onClick={(ev) => {
                            // Or the row's own onClick applies the theme and closes the overlay, which is
                            // the opposite of what starring is for.
                            ev.preventDefault();
                            ev.stopPropagation();
-                            toggle(t.id);
+                            toggle(entry.id);
                          }}
                          className="shrink-0 rounded p-1 opacity-70 hover:opacity-100"
                        >
-                          <Star className={`h-4 w-4 ${isFavorite(t.id) ? 'fill-current' : ''}`} />
+                          <Star className={`h-4 w-4 ${isFavorite(entry.id) ? 'fill-current' : ''}`} />
                        </span>
                      </button>
                    </li>
@@ -210,9 +227,7 @@ export const ThemeSwitcher = () => {
              </ul>
              {/* Always visible: it sits outside the scroll box above, for the same reason the dropdown's
                  header does. */}
-              <p className="mt-6 text-center text-xs opacity-60">
-                j/k or ↑/↓ move · l or → preview · f star · h or ← reset · enter keep · esc cancel
-              </p>
+              <p className="mt-6 text-center text-xs opacity-60">{t('theme.browseHint')}</p>
            </div>
          </div>,
          document.body,
@@ -27,13 +27,13 @@ export function UserMenu() {
      <DropdownMenuContent align="end" className="z-10 w-48">
        <DropdownMenuItem asChild className="cursor-pointer">
          <Link to="/settings/profile">
-            <User className="mr-2 h-4 w-4" />
+            <User className="me-2 h-4 w-4" />
            {t('header.userMenu.profile')}
          </Link>
        </DropdownMenuItem>
        <DropdownMenuItem asChild className="cursor-pointer">
          <Link to="/settings/system">
-            <Settings className="mr-2 h-4 w-4" />
+            <Settings className="me-2 h-4 w-4" />
            {t('header.userMenu.systemSettings')}
          </Link>
        </DropdownMenuItem>
@@ -42,14 +42,14 @@ export function UserMenu() {
            (navigation-audit M8.) */}
        <DropdownMenuItem asChild className="cursor-pointer">
          <Link to="/settings/ai">
-            <Bot className="mr-2 h-4 w-4" />
-            AI
+            <Bot className="me-2 h-4 w-4" />
+            {t('header.userMenu.ai')}
          </Link>
        </DropdownMenuItem>
        <DropdownMenuItem asChild className="cursor-pointer">
          <Link to="/settings/integrations">
-            <Puzzle className="mr-2 h-4 w-4" />
-            Integrations
+            <Puzzle className="me-2 h-4 w-4" />
+            {t('header.userMenu.integrations')}
          </Link>
        </DropdownMenuItem>
        {/* Owner only. This is tidiness, not access control — the route stays reachable and its
@@ -58,15 +58,15 @@ export function UserMenu() {
        {user?.role === 'Super Admin' && (
          <DropdownMenuItem asChild className="cursor-pointer">
            <Link to="/settings/user-management">
-              <UserCog className="mr-2 h-4 w-4" />
-              User Management
+              <UserCog className="me-2 h-4 w-4" />
+              {t('header.userMenu.userManagement')}
            </Link>
          </DropdownMenuItem>
        )}
        <DropdownMenuSeparator />
        <DropdownMenuItem asChild className="cursor-pointer">
          <Link to="/auth/signout">
-            <LogOut className="mr-2 h-4 w-4" />
+            <LogOut className="me-2 h-4 w-4" />
            {t('header.userMenu.signOut')}
          </Link>
        </DropdownMenuItem>
@@ -4,9 +4,29 @@ import { useQueryClient } from '@tanstack/react-query';
 import { toast } from 'sonner';
 import { useClient } from 'hooks/useClient';
 import { usePermissions } from 'hooks/usePermissions';
+import { useTranslation, type AppTranslationKey } from '@/lib/i18n';

 type RescanResponse = { ok: boolean; counts: Record<string, number> };

+/**
+ * One key per counted noun rather than one sentence with six numbers in it.
+ *
+ * Each noun pluralizes on its own count — English needs it for `1 task` vs `2 tasks`, and a locale with
+ * more than two categories needs it for every value. Assembling the sentence in code and translating only
+ * the frame would have hardcoded English plural rules into the frame.
+ *
+ * Spelled out as literal pairs rather than built from the count name: a key assembled at runtime defeats
+ * the type checker and cannot be grepped (see the key naming convention in docs/localization.md).
+ */
+const RESCAN_COUNTS: readonly (readonly [string, AppTranslationKey])[] = [
+  ['tasks', 'rescan.counts.tasks'],
+  ['agents', 'rescan.counts.agents'],
+  ['tools', 'rescan.counts.tools'],
+  ['skills', 'rescan.counts.skills'],
+  ['processes', 'rescan.counts.processes'],
+  ['affordances', 'rescan.counts.affordances'],
+];
+
 // Item query caches the header refreshes after a rescan (matches the queryKeys used by the
 // Automation and Capability pages).
 const ITEM_QUERY_KEYS = ['tasks', 'task-categories', 'skills', 'tools', 'processes', 'agents', 'agent-categories'];
@@ -15,6 +35,7 @@ export function RescanButton() {
  const client = useClient();
  const qc = useQueryClient();
  const { can } = usePermissions();
+  const { t } = useTranslation();
  const [loading, setLoading] = useState(false);

  // `POST /api/rescan` belongs to the `items` capability — skills, tools, agents and processes on the
@@ -32,32 +53,28 @@ export function RescanButton() {
      // you next open that page. This refreshes every item cache immediately, wherever you press it.
      await Promise.all(ITEM_QUERY_KEYS.map((key) => qc.invalidateQueries({ queryKey: [key], refetchType: 'all' })));
      const c = res.counts ?? {};
-      toast.success(
-        `Rescanned items — ${c.tasks ?? 0} tasks, ${c.agents ?? 0} agents, ${c.tools ?? 0} tools, ${c.skills ?? 0} skills, ${c.processes ?? 0} processes, ${c.affordances ?? 0} affordances`,
-        {
-          // Two things said here rather than left to be discovered.
-          //
-          // A rescan cannot reach a chat that is already open — its system prompt was assembled when it
-          // started. And a SKILL.md with no `description` is COUNTED as a skill but never offered to an
-          // agent, because the loader skips it: a line that does not say when to reach for something
-          // costs context in every conversation and earns nothing. So a skill can be present, listed and
-          // editable while being invisible to every agent, and the only symptom is two numbers
-          // disagreeing where nobody is comparing them.
-          description:
-            [
-              c.affordances || c.skillsOffered
-                ? 'Applies to new chats — an open one keeps what it started with.'
-                : null,
-              typeof c.skills === 'number' && typeof c.skillsOffered === 'number' && c.skillsOffered < c.skills
-                ? `${c.skills - c.skillsOffered} skill(s) have no description, so no agent is offered them.`
-                : null,
-            ]
-              .filter(Boolean)
-              .join(' ') || undefined,
-        },
-      );
+      const summary = RESCAN_COUNTS.map(([noun, key]) => t(key, { count: c[noun] ?? 0 })).join(', ');
+      toast.success(t('rescan.done', { summary }), {
+        // Two things said here rather than left to be discovered.
+        //
+        // A rescan cannot reach a chat that is already open — its system prompt was assembled when it
+        // started. And a SKILL.md with no `description` is COUNTED as a skill but never offered to an
+        // agent, because the loader skips it: a line that does not say when to reach for something
+        // costs context in every conversation and earns nothing. So a skill can be present, listed and
+        // editable while being invisible to every agent, and the only symptom is two numbers
+        // disagreeing where nobody is comparing them.
+        description:
+          [
+            c.affordances || c.skillsOffered ? t('rescan.newChatsOnly') : null,
+            typeof c.skills === 'number' && typeof c.skillsOffered === 'number' && c.skillsOffered < c.skills
+              ? t('rescan.noDescription', { count: c.skills - c.skillsOffered })
+              : null,
+          ]
+            .filter(Boolean)
+            .join(' ') || undefined,
+      });
    } catch {
-      toast.error('Failed to rescan items');
+      toast.error(t('rescan.failed'));
    } finally {
      setLoading(false);
    }
@@ -68,8 +85,8 @@ export function RescanButton() {
      onClick={rescan}
      disabled={loading}
      className="flex h-8 w-8 items-center justify-center rounded-full bg-black/20 text-duck-dark transition-transform hover:scale-110 disabled:opacity-50"
-      aria-label="Rescan items"
-      title="Rescan officer-items (apply changes without restarting)"
+      aria-label={t('rescan.label')}
+      title={t('rescan.title')}
    >
      <RotateCw size={16} className={loading ? 'animate-spin' : ''} />
    </button>
@@ -4,6 +4,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import { AlertTriangle } from 'lucide-react';
 import { useClient } from 'hooks/useClient';
 import { Button } from '@/components/ui/button';
+import { useTranslation } from '@/lib/i18n';

 type ScreenErrorFallbackProps = { error: Error; reset: () => void };

@@ -18,6 +19,7 @@ type ScreenErrorFallbackProps = { error: Error; reset: () => void };
 export const ScreenErrorFallback = ({ error, reset }: ScreenErrorFallbackProps) => {
  const client = useClient();
  const queryClient = useQueryClient();
+  const { t } = useTranslation();
  const [confirming, setConfirming] = useState(false);
  const [resetting, setResetting] = useState(false);

@@ -46,36 +48,34 @@ export const ScreenErrorFallback = ({ error, reset }: ScreenErrorFallbackProps)
      <div className="flex items-start gap-3">
        <AlertTriangle className="mt-1 size-6 shrink-0 text-amber-500" />
        <div className="space-y-1">
-          <h1 className="text-xl font-semibold">This screen failed to render</h1>
-          <p className="text-muted-foreground text-sm">
-            Nothing was lost — this is a display failure, not a data one. Agent transcripts, jobs and files are
-            untouched.
-          </p>
+          <h1 className="text-xl font-semibold">{t('screenError.title')}</h1>
+          <p className="text-muted-foreground text-sm">{t('screenError.description')}</p>
        </div>
      </div>

      <details className="bg-muted/40 rounded-md border p-3 text-sm">
-        <summary className="cursor-pointer select-none font-medium">{error.message || 'Unknown error'}</summary>
+        <summary className="cursor-pointer select-none font-medium">
+          {error.message || t('screenError.unknownError')}
+        </summary>
        <pre className="mt-2 max-h-64 overflow-auto whitespace-pre-wrap text-xs opacity-70">{error.stack}</pre>
      </details>

      <div className="flex flex-wrap gap-2">
-        <Button onClick={reset}>Try again</Button>
+        <Button onClick={reset}>{t('screenError.tryAgain')}</Button>
        <Button variant="secondary" onClick={() => window.location.reload()}>
-          Reload
+          {t('screenError.reload')}
        </Button>
        <Button variant="secondary" asChild>
-          <Link to="/">Go home</Link>
+          <Link to="/">{t('screenError.goHome')}</Link>
        </Button>
      </div>

      <div className="space-y-2 border-t pt-4">
        <p className="text-muted-foreground text-sm">
-          If it fails again in the same place, a saved panel layout is the usual cause. Resetting puts every screen's
-          panes back to their defaults. <strong>Your dashboards are not touched.</strong>
+          {t('screenError.resetHint')} <strong>{t('screenError.dashboardsSafe')}</strong>
        </p>
        <Button variant={confirming ? 'destructive' : 'outline'} disabled={resetting} onClick={resetScreenLayouts}>
-          {resetting ? 'Resetting…' : confirming ? 'Yes — reset every screen layout' : 'Reset screen layouts'}
+          {resetting ? t('screenError.resetting') : confirming ? t('screenError.resetConfirm') : t('screenError.reset')}
        </Button>
      </div>
    </div>
@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { Keyboard } from 'lucide-react';
 import { isShortcutsChord, SHORTCUT_SECTIONS } from '@/state/shortcuts';
+import { useTranslation } from '@/lib/i18n';

 /*
  `Ctrl+?` — every shortcut the shell owns, on one screen.
@@ -27,6 +28,7 @@ const Row = ({ keys, description }: { keys: string; description: string }) => (

 export const ShortcutsModal = () => {
  const [open, setOpen] = useState(false);
+  const { t } = useTranslation();

  useEffect(() => {
    const onKey = (ev: KeyboardEvent) => {
@@ -57,8 +59,8 @@ export const ShortcutsModal = () => {
      >
        <div className="flex shrink-0 items-center gap-2 border-b border-border px-5 py-3">
          <Keyboard className="h-4 w-4 text-muted-foreground" />
-          <h2 className="text-sm font-semibold">Keyboard shortcuts</h2>
-          <span className="ml-auto text-xs text-muted-foreground">Ctrl+? · Esc to close</span>
+          <h2 className="text-sm font-semibold">{t('shortcutsModal.title')}</h2>
+          <span className="ms-auto text-xs text-muted-foreground">{t('shortcutsModal.hint')}</span>
        </div>

        {/* Only this scrolls — the header stays, for the same reason the theme dropdown's does. */}
@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router';
 import { Search } from 'lucide-react';
 import { rank } from './match';
 import { useSpotlightItems, type SpotlightItem } from './useSpotlightItems';
+import { useTranslation } from '@/lib/i18n';

 // Spotlight: type a few letters, go somewhere.
 //
@@ -181,6 +182,7 @@ export const Spotlight = () => {
  const inputRef = useRef<HTMLInputElement | null>(null);
  const navigate = useNavigate();
  const items = useSpotlightItems();
+  const { t } = useTranslation();

  const results = useMemo(() => rank(items, query), [items, query]);

@@ -287,14 +289,14 @@ export const Spotlight = () => {
            ref={inputRef}
            value={query}
            onChange={(ev) => setQuery(ev.target.value)}
-            placeholder="Go to…"
+            placeholder={t('spotlight.placeholder')}
            className="w-full bg-transparent py-4 text-base text-foreground outline-none placeholder:text-muted-foreground"
          />
        </div>

        <div className="max-h-[60vh] overflow-y-auto p-2">
          {results.length === 0 ? (
-            <p className="px-3 py-6 text-center text-sm text-muted-foreground">Nothing matches “{query}”.</p>
+            <p className="px-3 py-6 text-center text-sm text-muted-foreground">{t('spotlight.noResults', { query })}</p>
          ) : (
            results.map((result, i) => (
              <Row
@@ -19,7 +19,8 @@ import {
  Wrench,
 } from 'lucide-react';
 import { usePermissions } from 'hooks/usePermissions';
-import { CORE_DOCK_ITEMS, dockItemsFromPlugins } from '../Dock';
+import { useTranslation, type AppTranslationKey } from '@/lib/i18n';
+import { useDockItems } from '../Dock';

 // What Spotlight can take you to.
 //
@@ -40,6 +41,7 @@ import { CORE_DOCK_ITEMS, dockItemsFromPlugins } from '../Dock';
 export type SpotlightItem = {
  /** Stable across renders — used as the React key and for the recency store. */
  id: string;
+  /** Resolved for the active locale, because `rank()` matches what the reader can actually see. */
  label: string;
  /** Where it goes. Matched against `canVisit` for anything not already filtered. */
  to: string;
@@ -78,64 +80,137 @@ export type SpotlightItem = {
 * `hint` is what makes them findable — typing "keys" should reach the API keys screen, and the label alone
 * does not say where it lives.
 */
-const SETTINGS_ITEMS: SpotlightItem[] = [
+type SettingsItem = Omit<SpotlightItem, 'label' | 'hint'> & {
+  labelKey: AppTranslationKey;
+  hintKey?: AppTranslationKey;
+};
+
+const SETTINGS_ITEMS: SettingsItem[] = [
  // Profile — ProfileSettings/index.tsx
-  { id: 'set:profile', label: 'Profile', to: '/settings/profile', hint: 'avatar, name, email', icon: User },
-  { id: 'set:password', label: 'Change password', to: '/settings/profile/change-password', icon: Lock },
+  {
+    id: 'set:profile',
+    labelKey: 'settings.sections.profile.label',
+    to: '/settings/profile',
+    hintKey: 'settings.sections.profile.hint',
+    icon: User,
+  },
+  {
+    id: 'set:password',
+    labelKey: 'settings.sections.changePassword.label',
+    to: '/settings/profile/change-password',
+    icon: Lock,
+  },
  {
    id: 'set:api-keys',
-    label: 'API keys',
+    labelKey: 'settings.sections.apiKeys.label',
    to: '/settings/profile/api-keys',
-    hint: 'keys that sign in as you',
+    hintKey: 'settings.sections.apiKeys.hint',
    icon: KeyRound,
  },
  {
    id: 'set:languages',
-    label: 'Languages',
+    labelKey: 'settings.sections.languages.label',
    to: '/settings/profile/languages',
-    hint: 'spoken and translation',
+    hintKey: 'settings.sections.languages.hint',
    icon: Globe,
  },
-  { id: 'set:voice', label: 'Voice', to: '/settings/profile/voice', hint: 'text-to-speech', icon: Volume2 },
-  { id: 'set:dock', label: 'Dock', to: '/settings/profile/dock', hint: 'choose and reorder', icon: LayoutGrid },
+  {
+    id: 'set:voice',
+    labelKey: 'settings.sections.voice.label',
+    to: '/settings/profile/voice',
+    hintKey: 'settings.sections.voice.hint',
+    icon: Volume2,
+  },
+  {
+    id: 'set:dock',
+    labelKey: 'settings.sections.dock.label',
+    to: '/settings/profile/dock',
+    hintKey: 'settings.sections.dock.hint',
+    icon: LayoutGrid,
+  },
  // AI — AISettings.tsx
-  { id: 'set:ai-my-models', label: 'My Models', to: '/settings/ai/my-models', icon: Sparkles },
-  { id: 'set:ai-channel-models', label: 'Channel Models', to: '/settings/ai/member-models', icon: Sparkles },
-  { id: 'set:ai-default-models', label: 'Default Models', to: '/settings/ai/default-models', icon: Sparkles },
-  { id: 'set:ai-harnesses', label: 'Providers', to: '/settings/ai/ai-harnesses', hint: 'harnesses', icon: Bot },
+  {
+    id: 'set:ai-my-models',
+    labelKey: 'settings.sections.myModels.label',
+    to: '/settings/ai/my-models',
+    icon: Sparkles,
+  },
+  {
+    id: 'set:ai-channel-models',
+    labelKey: 'settings.sections.channelModels.label',
+    to: '/settings/ai/member-models',
+    icon: Sparkles,
+  },
+  {
+    id: 'set:ai-default-models',
+    labelKey: 'settings.sections.defaultModels.label',
+    to: '/settings/ai/default-models',
+    icon: Sparkles,
+  },
+  {
+    id: 'set:ai-harnesses',
+    labelKey: 'settings.sections.providers.label',
+    to: '/settings/ai/ai-harnesses',
+    hintKey: 'settings.sections.providers.hint',
+    icon: Bot,
+  },
  // System — SystemSettings.tsx
-  { id: 'set:tts', label: 'Text to Speech', to: '/settings/system/tts', icon: Volume2 },
-  { id: 'set:stt', label: 'Speech to Text', to: '/settings/system/stt', icon: Mic },
-  { id: 'set:ocr', label: 'OCR', to: '/settings/system/ocr', icon: ScanText },
+  { id: 'set:tts', labelKey: 'settings.sections.tts.label', to: '/settings/system/tts', icon: Volume2 },
+  { id: 'set:stt', labelKey: 'settings.sections.stt.label', to: '/settings/system/stt', icon: Mic },
+  { id: 'set:ocr', labelKey: 'settings.sections.ocr.label', to: '/settings/system/ocr', icon: ScanText },
  {
    id: 'set:maintenance',
-    label: 'Rebuild & restart',
+    labelKey: 'settings.sections.maintenance.label',
    to: '/settings/system/maintenance',
-    hint: 'maintenance',
+    hintKey: 'settings.sections.maintenance.hint',
    icon: Cpu,
  },
-  { id: 'set:smtp', label: 'SMTP', to: '/settings/system/smtp', hint: 'outgoing mail', icon: Mail },
+  {
+    id: 'set:smtp',
+    labelKey: 'settings.sections.smtp.label',
+    to: '/settings/system/smtp',
+    hintKey: 'settings.sections.smtp.hint',
+    icon: Mail,
+  },
  // Integrations — IntegrationsSettings
-  { id: 'set:google-oauth', label: 'Google OAuth', to: '/settings/integrations/google-oauth', icon: KeyRound },
-  { id: 'set:apify', label: 'Apify', to: '/settings/integrations/apify', icon: Wrench },
+  {
+    id: 'set:google-oauth',
+    labelKey: 'settings.sections.googleOauth.label',
+    to: '/settings/integrations/google-oauth',
+    icon: KeyRound,
+  },
+  { id: 'set:apify', labelKey: 'settings.sections.apify.label', to: '/settings/integrations/apify', icon: Wrench },
  {
    id: 'set:dav',
-    label: 'Calendar & Contacts sync',
+    labelKey: 'settings.sections.davSync.label',
    to: '/settings/integrations/dav-app-passwords',
-    hint: 'app passwords',
+    hintKey: 'settings.sections.davSync.hint',
    icon: CalendarDays,
  },
  // Users — UserManagement
-  { id: 'set:users', label: 'Accounts', to: '/settings/user-management/users', hint: 'users', icon: Users },
-  { id: 'set:permissions', label: 'Permissions', to: '/settings/user-management/permissions', icon: ShieldCheck },
+  {
+    id: 'set:users',
+    labelKey: 'settings.sections.accounts.label',
+    to: '/settings/user-management/users',
+    hintKey: 'settings.sections.accounts.hint',
+    icon: Users,
+  },
+  {
+    id: 'set:permissions',
+    labelKey: 'settings.sections.permissions.label',
+    to: '/settings/user-management/permissions',
+    icon: ShieldCheck,
+  },
 ];

 /** Everything Spotlight can offer this account, in a stable order. */
 export function useSpotlightItems(): SpotlightItem[] {
  const { canVisit, plugins } = usePermissions();
+  const { t } = useTranslation();
+  const dockItems = useDockItems(plugins);

  return useMemo(() => {
-    const fromDock: SpotlightItem[] = [...CORE_DOCK_ITEMS, ...dockItemsFromPlugins(plugins)]
+    const fromDock: SpotlightItem[] = dockItems
      .filter((item) => canVisit(item.to))
      .map((item) => ({
        id: `nav:${item.to}`,
@@ -149,8 +224,14 @@ export function useSpotlightItems(): SpotlightItem[] {

    // Settings go through `canVisit` too. `usePermissions` fails OPEN by design — hiding a door is a
    // courtesy and the 403 is the lock — so this cannot lock anyone out of their own settings.
-    const settings = SETTINGS_ITEMS.filter((item) => canVisit(item.to));
+    const settings: SpotlightItem[] = SETTINGS_ITEMS.filter((item) => canVisit(item.to)).map(
+      ({ labelKey, hintKey, ...item }) => ({
+        ...item,
+        label: t(labelKey),
+        ...(hintKey ? { hint: t(hintKey) } : {}),
+      }),
+    );

    return [...fromDock, ...settings];
-  }, [canVisit, plugins]);
+  }, [canVisit, dockItems, t]);
 }
@@ -3,7 +3,7 @@ import { X, Plus, RotateCcw } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { useDock } from 'officerdev';
 import { usePermissions } from 'hooks/usePermissions';
-import { CORE_DOCK_ITEMS, dockItemsFromPlugins, defaultDockPaths } from '@/Screens/Dashboard/Layout/Dock';
+import { useDockItems, defaultDockPaths } from '@/Screens/Dashboard/Layout/Dock';

 type DockPillProps = {
  label: string;
@@ -107,7 +107,7 @@ export const DockSettings = () => {
  // Same composition as the dock itself. Offering a pin for an uninstalled feature would let someone
  // pin a tile that cannot appear, which reads as the setting being broken.
  const { plugins } = usePermissions();
-  const allDockItems = useMemo(() => [...CORE_DOCK_ITEMS, ...dockItemsFromPlugins(plugins)], [plugins]);
+  const allDockItems = useDockItems(plugins);
  const { items, allItems, setItems, reset } = useDock(
    allDockItems,
    useMemo(() => defaultDockPaths(plugins), [plugins]),
@@ -46,23 +46,201 @@
        "translateToLabel": "Translate to",
        "translateToHint": "Target language when translating content you don't speak."
      }
+    },
+    "sections": {
+      "profile": {
+        "label": "Profile",
+        "hint": "avatar, name, email"
+      },
+      "changePassword": {
+        "label": "Change password"
+      },
+      "apiKeys": {
+        "label": "API keys",
+        "hint": "keys that sign in as you"
+      },
+      "languages": {
+        "label": "Languages",
+        "hint": "spoken and translation"
+      },
+      "voice": {
+        "label": "Voice",
+        "hint": "text-to-speech"
+      },
+      "dock": {
+        "label": "Dock",
+        "hint": "choose and reorder"
+      },
+      "myModels": {
+        "label": "My Models"
+      },
+      "channelModels": {
+        "label": "Channel Models"
+      },
+      "defaultModels": {
+        "label": "Default Models"
+      },
+      "providers": {
+        "label": "Providers",
+        "hint": "harnesses"
+      },
+      "tts": {
+        "label": "Text to Speech"
+      },
+      "stt": {
+        "label": "Speech to Text"
+      },
+      "ocr": {
+        "label": "OCR"
+      },
+      "maintenance": {
+        "label": "Rebuild & restart",
+        "hint": "maintenance"
+      },
+      "smtp": {
+        "label": "SMTP",
+        "hint": "outgoing mail"
+      },
+      "googleOauth": {
+        "label": "Google OAuth"
+      },
+      "apify": {
+        "label": "Apify"
+      },
+      "davSync": {
+        "label": "Calendar & Contacts sync",
+        "hint": "app passwords"
+      },
+      "accounts": {
+        "label": "Accounts",
+        "hint": "users"
+      },
+      "permissions": {
+        "label": "Permissions"
+      }
    }
  },
  "header": {
    "userMenu": {
      "profile": "Profile",
      "systemSettings": "System Settings",
-      "signOut": "Sign Out"
+      "signOut": "Sign Out",
+      "ai": "AI",
+      "integrations": "Integrations",
+      "userManagement": "User Management"
+    },
+    "tabName": "Tab name",
+    "tabNameHint": "Click to rename this tab — clear it to go back to the page name",
+    "logoAlt": "Officer",
+    "navigation": "Navigation",
+    "jobsRunning": "Running job",
+    "jobsNothingRunning": "Nothing running",
+    "jobsQueued": "Queued jobs"
+  },
+  "nav": {
+    "home": "Home",
+    "files": "Files",
+    "chat": "Chat",
+    "commandHq": "Command HQ",
+    "editor": "Editor",
+    "jobs": "Jobs",
+    "terminal": "Terminal",
+    "browser": "Browser",
+    "monitor": "Monitor",
+    "activity": "Activity",
+    "dashboards": "Dashboards",
+    "sendOff": "SendOff",
+    "calendar": "Calendar",
+    "contacts": "Contacts",
+    "appStore": "App store",
+    "marketplace": "Marketplace"
+  },
+  "theme": {
+    "pillTitle": "Theme: {{name}}  ·  ctrl+shift+←/→ cycle · ctrl+shift+space browse · ctrl+shift+f {{starAction}}",
+    "pillLabel": "Theme: {{name}}",
+    "star": "star",
+    "unstar": "unstar",
+    "cycleHint": "ctrl+shift+←/→ cycle · ctrl+shift+space browse",
+    "everyShortcutHint": "ctrl+? for every shortcut",
+    "favouritesOnly": "Favourites only ({{count}})",
+    "favourites": "Favourites ({{count}})",
+    "noFavourites": "No favourites yet — star one with the button on its row.",
+    "starNamed": "Star {{name}}",
+    "unstarNamed": "Unstar {{name}}",
+    "addToFavourites": "Add to favourites",
+    "removeFromFavourites": "Remove from favourites",
+    "addToFavouritesKey": "Add to favourites (f)",
+    "removeFromFavouritesKey": "Remove from favourites (f)",
+    "active": "active",
+    "browseHint": "j/k or ↑/↓ move · l or → preview · f star · h or ← reset · enter keep · esc cancel"
+  },
+  "spotlight": {
+    "placeholder": "Go to…",
+    "noResults": "Nothing matches “{{query}}”."
+  },
+  "shortcutsModal": {
+    "title": "Keyboard shortcuts",
+    "hint": "Ctrl+? · Esc to close"
+  },
+  "screenError": {
+    "title": "This screen failed to render",
+    "description": "Nothing was lost — this is a display failure, not a data one. Agent transcripts, jobs and files are untouched.",
+    "unknownError": "Unknown error",
+    "tryAgain": "Try again",
+    "reload": "Reload",
+    "goHome": "Go home",
+    "resetHint": "If it fails again in the same place, a saved panel layout is the usual cause. Resetting puts every screen’s panes back to their defaults.",
+    "dashboardsSafe": "Your dashboards are not touched.",
+    "resetting": "Resetting…",
+    "resetConfirm": "Yes — reset every screen layout",
+    "reset": "Reset screen layouts"
+  },
+  "rescan": {
+    "label": "Rescan items",
+    "title": "Rescan officer-items (apply changes without restarting)",
+    "failed": "Failed to rescan items",
+    "done": "Rescanned items — {{summary}}",
+    "counts": {
+      "tasks": {
+        "one": "{{count}} task",
+        "other": "{{count}} tasks"
+      },
+      "agents": {
+        "one": "{{count}} agent",
+        "other": "{{count}} agents"
+      },
+      "tools": {
+        "one": "{{count}} tool",
+        "other": "{{count}} tools"
+      },
+      "skills": {
+        "one": "{{count}} skill",
+        "other": "{{count}} skills"
+      },
+      "processes": {
+        "one": "{{count}} process",
+        "other": "{{count}} processes"
+      },
+      "affordances": {
+        "one": "{{count}} affordance",
+        "other": "{{count}} affordances"
+      }
+    },
+    "newChatsOnly": "Applies to new chats — an open one keeps what it started with.",
+    "noDescription": {
+      "one": "{{count}} skill has no description, so no agent is offered it.",
+      "other": "{{count}} skills have no description, so no agent is offered them."
    }
  },
-  "dock": {
-    "chat": "Chat",
-    "files": "Files",
-    "terminal": "Terminal",
-    "plans": "Plans",
-    "skills": "Skills",
-    "tasks": "Tasks",
-    "processes": "Processes",
-    "logs": "Logs"
+  "bugReport": {
+    "label": "Report a bug",
+    "title": "Report a Bug",
+    "describePlaceholder": "Describe what went wrong...",
+    "screenshot": "Screenshot",
+    "noScreenshot": "No screenshot captured",
+    "collectedNote": "Console logs, browser info, and recent API errors are collected automatically.",
+    "submitted": "Bug report submitted",
+    "failed": "Failed to submit bug report",
+    "submit": "Submit"
  }
 }
@@ -46,23 +46,201 @@
        "translateToLabel": "Traduzir para",
        "translateToHint": "Idioma alvo ao traduzir conteúdo que não falas."
      }
+    },
+    "sections": {
+      "profile": {
+        "label": "Perfil",
+        "hint": "avatar, nome, email"
+      },
+      "changePassword": {
+        "label": "Alterar palavra-passe"
+      },
+      "apiKeys": {
+        "label": "Chaves de API",
+        "hint": "chaves que iniciam sessão como você"
+      },
+      "languages": {
+        "label": "Idiomas",
+        "hint": "falados e tradução"
+      },
+      "voice": {
+        "label": "Voz",
+        "hint": "conversão de texto em fala"
+      },
+      "dock": {
+        "label": "Dock",
+        "hint": "escolher e reordenar"
+      },
+      "myModels": {
+        "label": "Os meus modelos"
+      },
+      "channelModels": {
+        "label": "Modelos do canal"
+      },
+      "defaultModels": {
+        "label": "Modelos predefinidos"
+      },
+      "providers": {
+        "label": "Fornecedores",
+        "hint": "harnesses"
+      },
+      "tts": {
+        "label": "Texto para fala"
+      },
+      "stt": {
+        "label": "Fala para texto"
+      },
+      "ocr": {
+        "label": "OCR"
+      },
+      "maintenance": {
+        "label": "Reconstruir e reiniciar",
+        "hint": "manutenção"
+      },
+      "smtp": {
+        "label": "SMTP",
+        "hint": "correio a enviar"
+      },
+      "googleOauth": {
+        "label": "Google OAuth"
+      },
+      "apify": {
+        "label": "Apify"
+      },
+      "davSync": {
+        "label": "Sincronização de Calendário e Contactos",
+        "hint": "palavras-passe de aplicação"
+      },
+      "accounts": {
+        "label": "Contas",
+        "hint": "utilizadores"
+      },
+      "permissions": {
+        "label": "Permissões"
+      }
    }
  },
  "header": {
    "userMenu": {
      "profile": "Perfil",
      "systemSettings": "Definições do Sistema",
-      "signOut": "Terminar Sessão"
+      "signOut": "Terminar Sessão",
+      "ai": "IA",
+      "integrations": "Integrações",
+      "userManagement": "Gestão de Utilizadores"
+    },
+    "tabName": "Nome do separador",
+    "tabNameHint": "Clique para renomear este separador — limpe-o para voltar ao nome da página",
+    "logoAlt": "Officer",
+    "navigation": "Navegação",
+    "jobsRunning": "Trabalho em execução",
+    "jobsNothingRunning": "Nada em execução",
+    "jobsQueued": "Trabalhos em fila"
+  },
+  "nav": {
+    "home": "Início",
+    "files": "Ficheiros",
+    "chat": "Chat",
+    "commandHq": "Command HQ",
+    "editor": "Editor",
+    "jobs": "Trabalhos",
+    "terminal": "Terminal",
+    "browser": "Navegador",
+    "monitor": "Monitor",
+    "activity": "Atividade",
+    "dashboards": "Painéis",
+    "sendOff": "SendOff",
+    "calendar": "Calendário",
+    "contacts": "Contactos",
+    "appStore": "Loja de aplicações",
+    "marketplace": "Marketplace"
+  },
+  "theme": {
+    "pillTitle": "Tema: {{name}}  ·  ctrl+shift+←/→ percorrer · ctrl+shift+space explorar · ctrl+shift+f {{starAction}}",
+    "pillLabel": "Tema: {{name}}",
+    "star": "marcar",
+    "unstar": "desmarcar",
+    "cycleHint": "ctrl+shift+←/→ percorrer · ctrl+shift+space explorar",
+    "everyShortcutHint": "ctrl+? para todos os atalhos",
+    "favouritesOnly": "Apenas favoritos ({{count}})",
+    "favourites": "Favoritos ({{count}})",
+    "noFavourites": "Ainda não há favoritos — marque um com o botão na sua linha.",
+    "starNamed": "Marcar {{name}}",
+    "unstarNamed": "Desmarcar {{name}}",
+    "addToFavourites": "Adicionar aos favoritos",
+    "removeFromFavourites": "Remover dos favoritos",
+    "addToFavouritesKey": "Adicionar aos favoritos (f)",
+    "removeFromFavouritesKey": "Remover dos favoritos (f)",
+    "active": "ativo",
+    "browseHint": "j/k ou ↑/↓ mover · l ou → pré-visualizar · f marcar · h ou ← reiniciar · enter manter · esc cancelar"
+  },
+  "spotlight": {
+    "placeholder": "Ir para…",
+    "noResults": "Nada corresponde a “{{query}}”."
+  },
+  "shortcutsModal": {
+    "title": "Atalhos de teclado",
+    "hint": "Ctrl+? · Esc para fechar"
+  },
+  "screenError": {
+    "title": "Este ecrã não conseguiu ser apresentado",
+    "description": "Nada foi perdido — esta é uma falha de apresentação, não de dados. As transcrições do agente, os trabalhos e os ficheiros estão intactos.",
+    "unknownError": "Erro desconhecido",
+    "tryAgain": "Tentar novamente",
+    "reload": "Recarregar",
+    "goHome": "Ir para o início",
+    "resetHint": "Se falhar novamente no mesmo local, a causa habitual é um layout de painéis guardado. Reiniciar devolve os painéis de todos os ecrãs às predefinições.",
+    "dashboardsSafe": "Os seus painéis não são afetados.",
+    "resetting": "A reiniciar…",
+    "resetConfirm": "Sim — reiniciar o layout de todos os ecrãs",
+    "reset": "Reiniciar layouts dos ecrãs"
+  },
+  "rescan": {
+    "label": "Reanalisar itens",
+    "title": "Reanalisar officer-items (aplicar alterações sem reiniciar)",
+    "failed": "Falha ao reanalisar itens",
+    "done": "Itens reanalisados — {{summary}}",
+    "counts": {
+      "tasks": {
+        "one": "{{count}} tarefa",
+        "other": "{{count}} tarefas"
+      },
+      "agents": {
+        "one": "{{count}} agente",
+        "other": "{{count}} agentes"
+      },
+      "tools": {
+        "one": "{{count}} ferramenta",
+        "other": "{{count}} ferramentas"
+      },
+      "skills": {
+        "one": "{{count}} skill",
+        "other": "{{count}} skills"
+      },
+      "processes": {
+        "one": "{{count}} processo",
+        "other": "{{count}} processos"
+      },
+      "affordances": {
+        "one": "{{count}} affordance",
+        "other": "{{count}} affordances"
+      }
+    },
+    "newChatsOnly": "Aplica-se a novos chats — um chat aberto mantém o que tinha ao iniciar.",
+    "noDescription": {
+      "one": "{{count}} skill não tem descrição, pelo que não é oferecida a nenhum agente.",
+      "other": "{{count}} skills não têm descrição, pelo que não são oferecidas a nenhum agente."
    }
  },
-  "dock": {
-    "chat": "Chat",
-    "files": "Ficheiros",
-    "terminal": "Terminal",
-    "plans": "Planos",
-    "skills": "Skills",
-    "tasks": "Tarefas",
-    "processes": "Processos",
-    "logs": "Registos"
+  "bugReport": {
+    "label": "Comunicar um erro",
+    "title": "Comunicar um erro",
+    "describePlaceholder": "Descreva o que aconteceu...",
+    "screenshot": "Captura de ecrã",
+    "noScreenshot": "Nenhuma captura de ecrã obtida",
+    "collectedNote": "Os registos da consola, a informação do navegador e os erros recentes da API são recolhidos automaticamente.",
+    "submitted": "Comunicação de erro enviada",
+    "failed": "Falha ao enviar a comunicação de erro",
+    "submit": "Enviar"
  }
 }