Merge pull request #14 from httpsphl/feat/languages

The app in English, Portuguese and Spanish, with a language picker

Author: httpsphl

CLAUDE.md

@@ -57,6 +57,7 @@ Em dev, use `$env:BOTLOFT_HOME = "$PWD\.dev\home"` (caminho absoluto) no daemon
 - IDs são ULID com prefixo (`crw_`, `bot_`, `msg_`, `dlv_`, `tsk_`, `cht_`, `apr_`, `att_`). Tempo em ms Unix.
 - Tudo que é específico de Windows fica em `crates/botloftd/src/platform/`. O resto do daemon não chama Win32 direto.
 - A UI depende só da interface `BotloftApi` (`app/src/lib/api.ts`). Testes de componente usam `FakeBotloft`.
+- Nenhum texto de interface escrito direto no componente: tudo vai em `app/src/i18n/{en,pt-BR,es}/<área>.ts` e é lido com `useT()` (ou `t()` fora do React). Texto novo entra nos três idiomas no mesmo commit; o TypeScript acusa o que faltar (spec 15.6). Palavras simples, sem "daemon" nem outro jargão.
 - Nunca edite `app/src/lib/protocol.gen.ts` à mão.
 - Commits pequenos, no formato Conventional Commits (`feat(courier): ...`).
 

app/src-tauri/tauri.bundle.conf.json

@@ -6,6 +6,7 @@
     "windows": {
       "nsis": {
         "installMode": "currentUser",
+        "languages": ["English", "PortugueseBR", "Spanish"],
         "installerHooks": "./windows/hooks.nsh"
       }
     }

app/src/features/bots/BotDialog.tsx

@@ -1,5 +1,6 @@
 import { Check } from "lucide-react";
 import { type FormEvent, useState } from "react";
+import { useT } from "../../i18n";
 import { errorText } from "../../lib/api";
 import { AVATAR_PALETTE, type Bot, type CrewId, FIELD_LIMITS } from "../../lib/protocol.gen";
 import { useApi, useApp } from "../../store/context";
@@ -12,6 +13,7 @@ type Props = { onClose(): void } & ({ crewId: CrewId; bot?: undefined } | { bot:
 
 /** Creates a bot in `crewId`, or edits `bot`. */
 export function BotDialog(props: Props) {
+  const t = useT();
   const api = useApi();
   const putBot = useApp((state) => state.putBot);
   const selectBot = useApp((state) => state.selectBot);
@@ -58,59 +60,57 @@ export function BotDialog(props: Props) {
   const formId = "bot-form";
   return (
     <Dialog
-      title={editing ? `Edit ${editing.name}` : "New bot"}
+      title={editing ? t.bots.dialog.editTitle(editing.name) : t.bots.dialog.newTitle}
       onClose={props.onClose}
       width="lg"
       footer={
         <>
-          <Button onClick={props.onClose}>Cancel</Button>
+          <Button onClick={props.onClose}>{t.common.cancel}</Button>
           <Button variant="primary" type="submit" form={formId} disabled={busy}>
-            {editing ? "Save" : "Create bot"}
+            {editing ? t.bots.dialog.save : t.bots.dialog.create}
           </Button>
         </>
       }
     >
       <form id={formId} onSubmit={submit} className="flex flex-col gap-4">
         <div className="grid grid-cols-[1fr_1.4fr] gap-3">
           <TextField
-            label="Name"
+            label={t.bots.dialog.name}
             value={name}
             max={FIELD_LIMITS.name}
             onChange={(event) => setName(event.target.value)}
-            placeholder="Reviewer"
-            hint="Other bots reach it by the handle made from this name."
+            placeholder={t.bots.dialog.namePlaceholder}
+            hint={t.bots.dialog.nameHint}
             autoFocus
             required
           />
           <TextField
-            label="Role"
+            label={t.bots.dialog.role}
             value={role}
             max={FIELD_LIMITS.role}
             onChange={(event) => setRole(event.target.value)}
-            placeholder="Reviews pull requests before they merge"
+            placeholder={t.bots.dialog.rolePlaceholder}
           />
         </div>
         <TextArea
-          label="Instructions"
+          label={t.bots.dialog.instructions}
           value={instructions}
           max={FIELD_LIMITS.instructions}
           rows={8}
           onChange={(event) => setInstructions(event.target.value)}
-          placeholder="How this bot works, what it may do on its own and when to ask."
-          hint={
-            editing
-              ? "Saved to the bot's rules now; the bot reads them the next time it starts."
-              : undefined
-          }
+          placeholder={t.bots.dialog.instructionsPlaceholder}
+          hint={editing ? t.bots.dialog.instructionsHint : undefined}
         />
         <fieldset className="flex flex-col gap-1.5">
-          <legend className="mb-1.5 font-medium text-ink-soft text-sm">Color</legend>
+          <legend className="mb-1.5 font-medium text-ink-soft text-sm">
+            {t.bots.dialog.color}
+          </legend>
           <div className="flex items-center gap-1.5">
             {AVATAR_PALETTE.map((swatch) => (
               <button
                 key={swatch}
                 type="button"
-                aria-label={`Color ${swatch}`}
+                aria-label={t.bots.dialog.swatch(swatch)}
                 aria-pressed={color === swatch}
                 onClick={() => setColor(swatch)}
                 className={`relative rounded-[3px] p-0.5 ${color === swatch ? "ring-2 ring-accent" : ""}`}
@@ -123,7 +123,7 @@ export function BotDialog(props: Props) {
             ))}
           </div>
           {!editing && color === undefined && (
-            <p className="text-muted text-xs">Left unset, the bot gets the crew's next color.</p>
+            <p className="text-muted text-xs">{t.bots.dialog.colorUnset}</p>
           )}
         </fieldset>
         {error && (

app/src/features/bots/BotHeader.tsx

@@ -10,6 +10,7 @@ import {
   RotateCw,
 } from "lucide-react";
 import { useState } from "react";
+import { useT } from "../../i18n";
 import type { Bot, Crew } from "../../lib/protocol.gen";
 import { useApi, useApp, useHost } from "../../store/context";
 import { Button } from "../../ui/Button";
@@ -34,6 +35,8 @@ export function BotHeader({
   detailsOpen: boolean;
   onToggleDetails(): void;
 }) {
+  const t = useT();
+  const words = t.bots.header;
   const api = useApi();
   const host = useHost();
   const putBot = useApp((state) => state.putBot);
@@ -42,11 +45,11 @@ export function BotHeader({
   const stopped = bot.paused || crew.paused;
 
   const setPaused = (paused: boolean) =>
-    attempt(paused ? "Could not pause the bot" : "Could not resume the bot", async () =>
+    attempt(paused ? words.failed.pause : words.failed.resume, async () =>
       putBot(await api.call("bots.setPaused", { botId: bot.id, paused })),
     );
   const restart = (fresh: boolean) =>
-    attempt("Could not restart the bot", async () =>
+    attempt(words.failed.restart, async () =>
       putBot(await api.call("bots.restart", { botId: bot.id, fresh })),
     );
 
@@ -62,73 +65,71 @@ export function BotHeader({
         </div>
         <div className="mt-0.5 flex items-center gap-3 text-sm">
           <BotStateBadge bot={bot} crewPaused={crew.paused} />
-          <span className="truncate text-muted">{bot.role || "No role"}</span>
+          <span className="truncate text-muted">{bot.role || words.noRole}</span>
         </div>
       </div>
       {bot.paused ? (
         <Button icon={Play} onClick={() => setPaused(false)}>
-          Resume
+          {words.resume}
         </Button>
       ) : (
         <Button icon={Pause} onClick={() => setPaused(true)}>
-          Pause
+          {words.pause}
         </Button>
       )}
       <Button icon={RotateCw} disabled={stopped} onClick={() => restart(false)}>
-        Restart
+        {words.restart}
       </Button>
       <Button
         variant={detailsOpen ? "secondary" : "ghost"}
         icon={PanelRight}
-        label={detailsOpen ? "Hide details" : "Show details"}
+        label={detailsOpen ? words.hideDetails : words.showDetails}
         aria-pressed={detailsOpen}
         onClick={onToggleDetails}
       />
       <Menu
-        label="More bot actions"
+        label={words.more}
         icon={Ellipsis}
         items={[
-          { label: "Edit", icon: Pencil, onSelect: () => setOpen("edit") },
+          { label: words.edit, icon: Pencil, onSelect: () => setOpen("edit") },
           {
-            label: "Restart with a new conversation",
+            label: words.restartFresh,
             icon: RefreshCcw,
             disabled: stopped,
             onSelect: () => setOpen("fresh"),
           },
           {
-            label: "Open folder",
+            label: words.openFolder,
             icon: FolderOpen,
-            onSelect: () =>
-              attempt("Could not open the folder", () => host.openPath(bot.workspace)),
+            onSelect: () => attempt(words.failed.openFolder, () => host.openPath(bot.workspace)),
           },
-          { label: "Archive bot", icon: Archive, danger: true, onSelect: () => setOpen("archive") },
+          { label: words.archive, icon: Archive, danger: true, onSelect: () => setOpen("archive") },
         ]}
       />
 
       {open === "edit" && <BotDialog bot={bot} onClose={close} />}
       {open === "fresh" && (
         <Confirm
-          title="Start a new conversation?"
-          confirmLabel="Restart"
+          title={words.fresh.title}
+          confirmLabel={words.fresh.confirm}
           onClose={close}
           onConfirm={() => restart(true)}
         >
-          {bot.name} restarts without its current conversation. Its folder and its CLAUDE.md stay as
-          they are.
+          {words.fresh.body(bot.name)}
         </Confirm>
       )}
       {open === "archive" && (
         <Confirm
-          title={`Archive ${bot.name}?`}
-          confirmLabel="Archive bot"
+          title={words.archiveConfirm.title(bot.name)}
+          confirmLabel={words.archiveConfirm.confirm}
           onClose={close}
           onConfirm={() =>
-            attempt("Could not archive the bot", async () =>
+            attempt(words.failed.archive, async () =>
               putBot(await api.call("bots.archive", { botId: bot.id })),
             )
           }
         >
-          The bot stops and leaves the crew. Messages still waiting for it are not delivered.
+          {words.archiveConfirm.body}
         </Confirm>
       )}
     </header>

app/src/features/bots/BotStateBadge.tsx

@@ -11,6 +11,7 @@ import {
   Power,
   RotateCw,
 } from "lucide-react";
+import { type Messages, t, useT } from "../../i18n";
 import type { Bot, BotState } from "../../lib/protocol.gen";
 
 type Tone = "ok" | "work" | "warn" | "danger" | "quiet";
@@ -24,57 +25,38 @@ export interface StateView {
   hint: string;
 }
 
-const views: Record<BotState, StateView> = {
-  offline: { label: "Offline", tone: "quiet", icon: Power, hint: "Not running." },
-  launching: {
-    label: "Starting",
-    tone: "work",
-    icon: LoaderCircle,
-    spin: true,
-    hint: "Claude Code is starting.",
-  },
-  idle: { label: "Idle", tone: "ok", icon: CircleDot, hint: "Ready for work." },
-  busy: { label: "Working", tone: "work", icon: Activity, hint: "Working on something." },
-  needs_approval: {
-    label: "Needs approval",
-    tone: "warn",
-    icon: Hand,
-    hint: "Waiting for you to allow or deny a tool in its chat.",
-  },
-  rate_limited: {
-    label: "Usage limit",
-    tone: "warn",
-    icon: Hourglass,
-    hint: "Your Claude plan hit its usage limit; messages wait until it resets.",
-  },
-  auth_error: {
-    label: "Sign-in needed",
-    tone: "danger",
-    icon: KeyRound,
-    hint: "Claude Code is not signed in, or the account can't be used. Sign in to Claude and the bot starts again by itself. Already signed in? Check your Claude plan, then restart the bot.",
-  },
-  backoff: {
-    label: "Restarting",
-    tone: "warn",
-    icon: RotateCw,
-    hint: "It stopped unexpectedly; Botloft starts it again shortly.",
-  },
-  archived: { label: "Archived", tone: "quiet", icon: Archive, hint: "Archived." },
-};
+/** How a state looks; its words come from the current language. */
+type Look = Omit<StateView, "label" | "hint">;
 
-const paused: StateView = {
-  label: "Paused",
-  tone: "quiet",
-  icon: Pause,
-  hint: "Paused; resume to start it.",
+const looks: Record<BotState, Look> = {
+  offline: { tone: "quiet", icon: Power },
+  launching: { tone: "work", icon: LoaderCircle, spin: true },
+  idle: { tone: "ok", icon: CircleDot },
+  busy: { tone: "work", icon: Activity },
+  needs_approval: { tone: "warn", icon: Hand },
+  rate_limited: { tone: "warn", icon: Hourglass },
+  auth_error: { tone: "danger", icon: KeyRound },
+  backoff: { tone: "warn", icon: RotateCw },
+  archived: { tone: "quiet", icon: Archive },
 };
 
-/** How a bot's state reads in the UI. Paused and stopped reads as paused. */
-export function stateView(bot: Pick<Bot, "state" | "paused">, crewPaused = false): StateView {
+const pausedLook: Look = { tone: "quiet", icon: Pause };
+
+/**
+ * How a bot's state reads in the UI. Paused and stopped reads as paused.
+ * Components pass the messages from `useT()` so they follow a language
+ * change; other callers get the current language.
+ */
+export function stateView(
+  bot: Pick<Bot, "state" | "paused">,
+  crewPaused = false,
+  messages: Messages = t(),
+): StateView {
+  const words = messages.bots.states;
   if ((bot.paused || crewPaused) && bot.state === "offline") {
-    return paused;
+    return { ...pausedLook, ...words.paused };
   }
-  return views[bot.state];
+  return { ...looks[bot.state], ...words[bot.state] };
 }
 
 const toneText: Record<Tone, string> = {
@@ -94,7 +76,8 @@ export function BotStateBadge({
   crewPaused?: boolean;
   compact?: boolean;
 }) {
-  const view = stateView(bot, crewPaused);
+  const messages = useT();
+  const view = stateView(bot, crewPaused, messages);
   const Icon = view.icon;
   return (
     <span