activity, capabilities, chat history and the locale picker (21 -> 2)

The locale picker's labels are now AUTONYMS computed from Intl -- each language named in its own language, so "Português europeu" reads as Portuguese whichever locale the UI is in. That is the convention for a language picker and the useful behaviour: somebody who cannot read the current language still has to find theirs. CapabilityPage interpolated the capability KIND into six strings by lowercasing it in code. "skill" does not lowercase into a Portuguese noun, so kind is a parameter now. What is left is two strings, both deliberate: see the next commit message.
2026-08-23 05:37:04 +00:00
parent 0b85d42197
commit bde59eb74e
8 changed files with 120 additions and 39 deletions
@@ -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>
@@ -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;
@@ -301,6 +302,7 @@ export const CapabilityChat = ({
 };

 export const FrontmatterBlock = ({ yaml }: { yaml: string }) => {
+  const { t } = useTranslation();
  const [open, setOpen] = useState(false);

  return (
@@ -310,7 +312,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 +332,7 @@ export const CapabilityList = ({
  showCreate,
  onShowCreateChange,
 }: CapabilityListProps) => {
+  const { t, tUi } = useTranslation();
  const client = useClient();
  const qc = useQueryClient();
  const [internalCreating, setInternalCreating] = useState(false);
@@ -356,7 +359,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 +430,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 +455,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 +472,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 +501,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 +530,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 +558,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 +610,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>
@@ -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 });
      }
    })();
@@ -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>
+  );
+};
@@ -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
@@ -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';
@@ -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}}",
@@ -672,5 +673,30 @@
      "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"
  }
 }
@@ -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}}",
@@ -672,5 +673,30 @@
      "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"
  }
 }