Terminal-Config (Theme/Icon/Titel), UI-Überarbeitung, i18n de/en

- Terminal-Einstellungen pro Projekt in ai-control.json: 5 Themes
  (Paletten in terminal.ts, Fenster-BG gespiegelt in terminal.rs),
  Dock-Icon (PNG/ICNS via NSApplication in RunEvent::Ready),
  Fenstertitel mit Fallback Projektname; Zahnrad-Dialog mit Datei-Picker
  (tauri-plugin-dialog)
- UI: Catppuccin-Mocha-Token, JetBrains Mono für Namen/Pfade/Chips,
  feste Tabellenspalten, Status-Punkt mit Glow, Pool-Projekte als
  Hover-Popover, Buttons ausgerichtet (Zahnrad links von Starten/Beenden)
- i18n: vue-i18n, Deutsch/Englisch, Umschalter im Header (localStorage)
- generate_context nur noch einmal expandiert (Release-Build-Fehler)

src/components/PoolList.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from "vue";
 import { invoke } from "@tauri-apps/api/core";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 interface Pool {
   name: string;
@@ -19,9 +22,9 @@ const dKey = ref("");
 
 const dialogTitle = computed(() => {
   if (!dialog.value) return "";
-  if (dialog.value.mode === "oauth") return "Neuen oAuth-Pool anlegen";
-  if (dialog.value.editing) return `API-Key ändern – ${dName.value}`;
-  return "Neuen API-Key-Pool anlegen";
+  if (dialog.value.mode === "oauth") return t("pools.newOauthPool");
+  if (dialog.value.editing) return t("pools.editKey", { name: dName.value });
+  return t("pools.newApikeyPool");
 });
 
 function openNew(mode: Mode) {
@@ -128,65 +131,89 @@ onMounted(refresh);
 <template>
   <div class="toolbar">
     <button class="primary" :disabled="busy" @click="openNew('oauth')">
-      + oAuth
+      {{ $t("pools.newOauth") }}
     </button>
     <button class="primary" :disabled="busy" @click="openNew('apikey')">
-      + apiKey
+      {{ $t("pools.newApikey") }}
     </button>
   </div>
 
   <p v-if="error" class="error">{{ error }}</p>
 
-  <table v-if="pools.length">
+  <table v-if="pools.length" class="grid">
+    <colgroup>
+      <col />
+      <col class="col-type" />
+      <col class="col-projects" />
+      <col class="col-actions-wide" />
+    </colgroup>
     <thead>
       <tr>
-        <th>Pool</th>
-        <th>Typ</th>
-        <th class="actions-col">Aktionen</th>
+        <th>{{ $t("pools.pool") }}</th>
+        <th>{{ $t("pools.type") }}</th>
+        <th></th>
+        <th></th>
       </tr>
     </thead>
     <tbody>
       <tr v-for="p in pools" :key="p.name">
-        <td><strong>{{ p.name }}</strong></td>
+        <td class="cell-name">
+          <strong>{{ p.name }}</strong>
+        </td>
         <td>
           <span class="badge" :class="p.credentialType">{{ p.credentialType }}</span>
         </td>
-        <td class="actions-col">
-          <template v-if="p.credentialType === 'oauth'">
-            <button :disabled="busy" @click="relogin(p.name)">Neu anmelden</button>
-            <button :disabled="busy" @click="renew(p.name)">Token erneuern</button>
-          </template>
-          <template v-else>
-            <button :disabled="busy" @click="openEditKey(p.name)">Key ändern</button>
-          </template>
-          <button
-            v-if="!p.projects.length"
-            class="danger"
-            :disabled="busy"
-            @click="askDelete(p.name)"
-          >
-            Löschen
-          </button>
-          <span v-else class="assigned" :title="p.projects.join(', ')">
-            zugeordnet: {{ p.projects.join(", ") }}
+        <td>
+          <span v-if="p.projects.length" class="assigned">
+            {{ $t("pools.assigned", p.projects.length) }}
+            <span class="pop">
+              <span v-for="name in p.projects" :key="name" class="pop-item">
+                {{ name }}
+              </span>
+            </span>
+          </span>
+        </td>
+        <td class="cell-actions">
+          <span class="row-actions">
+            <template v-if="p.credentialType === 'oauth'">
+              <button :disabled="busy" @click="relogin(p.name)">
+                {{ $t("pools.relogin") }}
+              </button>
+              <button :disabled="busy" @click="renew(p.name)">
+                {{ $t("pools.renewToken") }}
+              </button>
+            </template>
+            <template v-else>
+              <button :disabled="busy" @click="openEditKey(p.name)">
+                {{ $t("pools.changeKey") }}
+              </button>
+            </template>
+            <button
+              v-if="!p.projects.length"
+              class="danger"
+              :disabled="busy"
+              @click="askDelete(p.name)"
+            >
+              {{ $t("pools.delete") }}
+            </button>
           </span>
         </td>
       </tr>
     </tbody>
   </table>
-  <p v-else class="empty">Noch keine Pools angelegt.</p>
+  <p v-else class="empty">{{ $t("pools.empty") }}</p>
 
-  <div v-if="dialog" class="modal-backdrop" @click.self="closeDialog">
-    <form class="modal" @submit.prevent="submit">
-      <h2>{{ dialogTitle }}</h2>
+  <div v-if="dialog" class="overlay" @click.self="closeDialog">
+    <form class="dialog" @submit.prevent="submit">
+      <h3>{{ dialogTitle }}</h3>
 
-      <label v-if="!dialog.editing">
-        <span>Name</span>
-        <input v-model="dName" placeholder="z. B. Mx9Privat" autofocus required />
+      <label v-if="!dialog.editing" class="field">
+        {{ $t("pools.name") }}
+        <input v-model="dName" placeholder="z. B. privateDefault" autofocus required />
       </label>
 
-      <label v-if="dialog.mode === 'apikey'">
-        <span>API-Key</span>
+      <label v-if="dialog.mode === 'apikey'" class="field">
+        {{ $t("pools.apiKey") }}
         <input
           v-model="dKey"
           type="password"
@@ -197,148 +224,35 @@ onMounted(refresh);
       </label>
 
       <p v-if="dialog.mode === 'oauth'" class="hint">
-        Nach „Login starten“ öffnet sich der Browser zur Anmeldung gegen dein Abo.
+        {{ $t("pools.oauthHint") }}
       </p>
       <p v-if="busy && dialog.mode === 'oauth'" class="hint busy">
-        Warte auf die Anmeldung im Browser…
+        {{ $t("pools.oauthWaiting") }}
       </p>
 
-      <div class="modal-actions">
-        <button type="button" :disabled="busy" @click="closeDialog">Abbrechen</button>
+      <div class="actions">
+        <button type="button" :disabled="busy" @click="closeDialog">
+          {{ $t("pools.cancel") }}
+        </button>
         <button type="submit" class="primary" :disabled="busy">
-          {{ dialog.mode === "oauth" ? "Login starten" : "Speichern" }}
+          {{ dialog.mode === "oauth" ? $t("pools.startLogin") : $t("pools.save") }}
         </button>
       </div>
     </form>
   </div>
 
-  <div v-if="deleteName" class="modal-backdrop" @click.self="deleteName = null">
-    <div class="modal">
-      <h2>Pool löschen</h2>
-      <p class="hint">
-        Pool <strong>{{ deleteName }}</strong> und seine Credential-Datei werden
-        gelöscht. Das lässt sich nicht rückgängig machen.
-      </p>
-      <div class="modal-actions">
+  <div v-if="deleteName" class="overlay" @click.self="deleteName = null">
+    <div class="dialog">
+      <h3>{{ $t("pools.deletePool") }}</h3>
+      <p class="hint">{{ $t("pools.deleteWarning", { name: deleteName }) }}</p>
+      <div class="actions">
         <button type="button" :disabled="busy" @click="deleteName = null">
-          Abbrechen
+          {{ $t("pools.cancel") }}
         </button>
         <button class="danger" :disabled="busy" @click="confirmDelete">
-          Löschen
+          {{ $t("pools.delete") }}
         </button>
       </div>
     </div>
   </div>
 </template>
-
-<style scoped>
-.toolbar {
-  display: flex;
-  gap: 0.5rem;
-  margin-bottom: 1.25rem;
-}
-
-.primary {
-  background: #4a4af0;
-  border-color: #4a4af0;
-  color: #fff;
-}
-.primary:hover:not(:disabled) {
-  background: #5b5bf5;
-}
-button:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-
-.actions-col {
-  text-align: right;
-  white-space: nowrap;
-}
-.actions-col button {
-  margin-left: 0.4rem;
-}
-.danger {
-  color: #ff6b6b;
-  border-color: #ff6b6b55;
-}
-.danger:hover:not(:disabled) {
-  background: #ff6b6b22;
-}
-.assigned {
-  color: #888;
-  font-size: 0.8rem;
-}
-
-.badge {
-  display: inline-block;
-  padding: 0.1rem 0.5rem;
-  border-radius: 999px;
-  font-size: 0.75rem;
-  border: 1px solid #444;
-  color: #cfcfd6;
-}
-.badge.oauth {
-  border-color: #3ecf6a55;
-  color: #3ecf6a;
-}
-.badge.apikey {
-  border-color: #f0a84a55;
-  color: #f0a84a;
-}
-
-.empty {
-  color: #888;
-}
-
-.modal-backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.55);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 10;
-}
-.modal {
-  display: flex;
-  flex-direction: column;
-  gap: 0.9rem;
-  background: #23232a;
-  border: 1px solid #3a3a44;
-  border-radius: 12px;
-  padding: 1.5rem;
-  min-width: 24rem;
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
-}
-.modal h2 {
-  font-size: 1rem;
-  margin: 0;
-}
-.modal label {
-  display: flex;
-  flex-direction: column;
-  gap: 0.3rem;
-}
-.modal label span {
-  font-size: 0.8rem;
-  color: #999;
-}
-.modal input {
-  width: 100%;
-}
-.hint {
-  margin: 0;
-  font-size: 0.8rem;
-  color: #999;
-}
-.hint.busy {
-  color: #4a9af5;
-}
-.modal-actions {
-  display: flex;
-  gap: 0.5rem;
-  justify-content: flex-end;
-  margin-top: 0.25rem;
-}
-</style>

src/components/ProjectList.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref } from "vue";
 import { invoke } from "@tauri-apps/api/core";
+import { open } from "@tauri-apps/plugin-dialog";
 
 interface Project {
   name: string;
   path: string;
   pool: string | null;
   running: boolean;
+  terminal: { theme: string | null; icon: string | null; title: string | null };
 }
 
 interface Pool {
@@ -84,6 +86,58 @@ async function restartNow() {
   restarting.value = false;
 }
 
+const THEME_NAMES: [string, string][] = [
+  ["mocha", "Catppuccin Mocha"],
+  ["dracula", "Dracula"],
+  ["solarized-dark", "Solarized Dark"],
+  ["gruvbox", "Gruvbox"],
+  ["one-dark", "One Dark"],
+];
+
+interface TerminalSettings {
+  name: string;
+  theme: string;
+  icon: string | null;
+  title: string;
+}
+
+const settings = ref<TerminalSettings | null>(null);
+
+function openSettings(p: Project) {
+  settings.value = {
+    name: p.name,
+    theme: p.terminal.theme ?? "mocha",
+    icon: p.terminal.icon,
+    title: p.terminal.title ?? "",
+  };
+}
+
+async function pickIcon() {
+  const file = await open({
+    multiple: false,
+    directory: false,
+    filters: [{ name: "Icon", extensions: ["png", "icns"] }],
+  });
+  if (typeof file === "string") settings.value!.icon = file;
+}
+
+async function saveSettings() {
+  const s = settings.value!;
+  try {
+    const title = s.title.trim();
+    await invoke("set_terminal_config", {
+      project: s.name,
+      theme: s.theme === "mocha" ? null : s.theme,
+      icon: s.icon,
+      title: title === "" ? null : title,
+    });
+    settings.value = null;
+    await refresh();
+  } catch (e) {
+    error.value = String(e);
+  }
+}
+
 let timer: number;
 onMounted(() => {
   refresh();
@@ -94,61 +148,110 @@ onUnmounted(() => window.clearInterval(timer));
 
 <template>
   <p v-if="error" class="error">{{ error }}</p>
-  <table>
+  <table class="grid">
+    <colgroup>
+      <col class="col-dot" />
+      <col />
+      <col class="col-pool" />
+      <col class="col-actions" />
+    </colgroup>
     <thead>
       <tr>
         <th></th>
-        <th>Projekt</th>
-        <th>Pool</th>
+        <th>{{ $t("projects.project") }}</th>
+        <th>{{ $t("projects.pool") }}</th>
         <th></th>
       </tr>
     </thead>
     <tbody>
       <tr v-for="p in projects" :key="p.name">
-        <td>
+        <td class="cell-dot">
           <span class="dot" :class="{ on: p.running }"></span>
         </td>
-        <td>
+        <td class="cell-name">
           <strong>{{ p.name }}</strong>
           <small>{{ p.path }}</small>
         </td>
         <td>
           <select :value="p.pool ?? ''" @change="assign(p, $event)">
-            <option value="" disabled>– kein Pool –</option>
+            <option value="" disabled>{{ $t("projects.noPool") }}</option>
             <option v-for="pool in pools" :key="pool.name" :value="pool.name">
               {{ pool.name }}
             </option>
           </select>
         </td>
-        <td>
-          <button v-if="p.running" class="stop" @click="stop(p)">Beenden</button>
-          <button v-else class="start" @click="openTerminal(p)">Starten</button>
+        <td class="cell-actions">
+          <span class="row-actions">
+            <button
+              class="gear"
+              :title="$t('projects.terminalSettings')"
+              @click="openSettings(p)"
+            >
+              ⚙︎
+            </button>
+            <button v-if="p.running" class="stop" @click="stop(p)">
+              {{ $t("projects.stop") }}
+            </button>
+            <button v-else class="start" @click="openTerminal(p)">
+              {{ $t("projects.start") }}
+            </button>
+          </span>
         </td>
       </tr>
     </tbody>
   </table>
 
+  <div v-if="settings" class="overlay">
+    <div class="dialog">
+      <h3>{{ $t("projects.terminal", { name: settings.name }) }}</h3>
+      <label class="field">
+        {{ $t("projects.title") }}
+        <input v-model="settings.title" :placeholder="settings.name" />
+      </label>
+      <label class="field">
+        {{ $t("projects.theme") }}
+        <select v-model="settings.theme">
+          <option v-for="[value, label] in THEME_NAMES" :key="value" :value="value">
+            {{ label }}
+          </option>
+        </select>
+      </label>
+      <label class="field">
+        {{ $t("projects.dockIcon") }}
+        <span class="icon-row">
+          <button @click="pickIcon">{{ $t("projects.chooseFile") }}</button>
+          <button v-if="settings.icon" @click="settings.icon = null">
+            {{ $t("projects.remove") }}
+          </button>
+          <span class="icon-path">
+            {{ settings.icon ?? $t("projects.defaultIcon") }}
+          </span>
+        </span>
+      </label>
+      <p class="hint">{{ $t("projects.appliesNextStart") }}</p>
+      <div class="actions">
+        <button @click="settings = null">{{ $t("projects.cancel") }}</button>
+        <button class="primary" @click="saveSettings">
+          {{ $t("projects.save") }}
+        </button>
+      </div>
+    </div>
+  </div>
+
   <div v-if="pending" class="overlay">
     <div class="dialog">
-      <h3>{{ pending.name }} läuft noch</h3>
-      <p>
-        Der Pool-Wechsel ist gespeichert. Die laufende Session arbeitet aber
-        weiter im alten Pool — der neue gilt erst ab dem nächsten Start.
-      </p>
+      <h3>{{ $t("projects.stillRunning", { name: pending.name }) }}</h3>
+      <p>{{ $t("projects.poolChangeSaved") }}</p>
       <div class="pools">
-        <span class="chip">{{ pending.from ?? "kein Pool" }}</span>
+        <span class="chip">{{ pending.from ?? $t("projects.noPoolAssigned") }}</span>
         <span class="arrow">→</span>
         <span class="chip new">{{ pending.to }}</span>
       </div>
-      <p class="hint">
-        Der Neustart beendet die laufende Session. Der automatische
-        commit+push von claude-sync nach Sessionende entfällt dabei —
-        Ghostty fragt bei laufendem Prozess vor dem Beenden noch einmal nach.
-      </p>
+      <p class="hint">{{ $t("projects.restartHint") }}</p>
       <div class="actions">
-        <button @click="pending = null">Weiterlaufen lassen</button>
+        <button @click="pending = null">{{ $t("projects.keepRunning") }}</button>
         <button class="primary" :disabled="restarting" @click="restartNow">
-          {{ restarting ? "Starte neu …" : "Jetzt neu starten" }}
+          {{ restarting ? $t("projects.restarting") : $t("projects.restartNow") }}
         </button>
       </div>
     </div>