Merge gitea/develop into feat/public-share-assistant

Resolve conflicts with the independently-merged ai-agent-roles feature: - ai-chat.module.ts: keep BOTH AiAgentRolesModule and the public-share wiring (Share/Search modules, PublicShareChatController, services). - ai.service.ts: take develop's getChatModel ChatModelOverride superset, which already covers the public-share model-id-only override. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-20 18:40:58 +03:00
parent 90e9b0a3f4 4c1d1aa2ee
commit 0c46f60ddf
70 changed files with 4028 additions and 1847 deletions
@@ -0,0 +1,209 @@
+import { useEffect } from "react";
+import { z } from "zod/v4";
+import {
+  Button,
+  Group,
+  Select,
+  Stack,
+  Switch,
+  Text,
+  TextInput,
+  Textarea,
+} from "@mantine/core";
+import { useForm } from "@mantine/form";
+import { zod4Resolver } from "mantine-form-zod-resolver";
+import { useTranslation } from "react-i18next";
+import {
+  useCreateAiRoleMutation,
+  useUpdateAiRoleMutation,
+} from "@/features/ai-chat/queries/ai-chat-query.ts";
+import {
+  IAiRole,
+  IAiRoleCreate,
+  IAiRoleUpdate,
+} from "@/features/ai-chat/types/ai-chat.types.ts";
+
+// Supported drivers for the optional model override (mirrors server AI_DRIVERS).
+// "" => use the workspace default driver/model.
+const DRIVER_OPTIONS = [
+  { value: "", label: "Workspace default" },
+  { value: "openai", label: "OpenAI" },
+  { value: "gemini", label: "Gemini" },
+  { value: "ollama", label: "Ollama" },
+];
+
+const formSchema = z.object({
+  name: z.string().min(1),
+  emoji: z.string(),
+  description: z.string(),
+  instructions: z.string().min(1),
+  // "" => no driver override (use the workspace driver).
+  driver: z.enum(["", "openai", "gemini", "ollama"]),
+  chatModel: z.string(),
+  enabled: z.boolean(),
+});
+
+type FormValues = z.infer<typeof formSchema>;
+
+interface AiAgentRoleFormProps {
+  // When provided, edits an existing role; otherwise creates one.
+  role?: IAiRole;
+  onClose: () => void;
+}
+
+export default function AiAgentRoleForm({
+  role,
+  onClose,
+}: AiAgentRoleFormProps) {
+  const { t } = useTranslation();
+  const isEdit = Boolean(role);
+
+  const createMutation = useCreateAiRoleMutation();
+  const updateMutation = useUpdateAiRoleMutation();
+
+  const form = useForm<FormValues>({
+    validate: zod4Resolver(formSchema),
+    initialValues: {
+      name: role?.name ?? "",
+      emoji: role?.emoji ?? "",
+      description: role?.description ?? "",
+      instructions: role?.instructions ?? "",
+      driver: (role?.modelConfig?.driver ?? "") as FormValues["driver"],
+      chatModel: role?.modelConfig?.chatModel ?? "",
+      enabled: role?.enabled ?? true,
+    },
+  });
+
+  // Re-hydrate when the target role changes (reusing the modal).
+  useEffect(() => {
+    form.setValues({
+      name: role?.name ?? "",
+      emoji: role?.emoji ?? "",
+      description: role?.description ?? "",
+      instructions: role?.instructions ?? "",
+      driver: (role?.modelConfig?.driver ?? "") as FormValues["driver"],
+      chatModel: role?.modelConfig?.chatModel ?? "",
+      enabled: role?.enabled ?? true,
+    });
+    form.resetDirty();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [role?.id]);
+
+  // Build the model override payload: null when neither a driver nor a model id
+  // is set (use the workspace default).
+  function resolveModelConfig(values: FormValues) {
+    const driver = values.driver || undefined;
+    const chatModel = values.chatModel.trim() || undefined;
+    if (!driver && !chatModel) return null;
+    return { driver, chatModel };
+  }
+
+  async function handleSubmit(values: FormValues) {
+    const modelConfig = resolveModelConfig(values);
+
+    if (isEdit && role) {
+      const payload: IAiRoleUpdate = {
+        id: role.id,
+        name: values.name,
+        emoji: values.emoji,
+        description: values.description,
+        instructions: values.instructions,
+        modelConfig,
+        enabled: values.enabled,
+      };
+      await updateMutation.mutateAsync(payload);
+    } else {
+      const payload: IAiRoleCreate = {
+        name: values.name,
+        emoji: values.emoji || undefined,
+        description: values.description || undefined,
+        instructions: values.instructions,
+        modelConfig,
+        enabled: values.enabled,
+      };
+      await createMutation.mutateAsync(payload);
+    }
+
+    onClose();
+  }
+
+  const isSaving = createMutation.isPending || updateMutation.isPending;
+
+  return (
+    <Stack>
+      <TextInput
+        label={t("Role name")}
+        placeholder={t("e.g. Proofreader")}
+        {...form.getInputProps("name")}
+      />
+
+      <TextInput
+        label={t("Emoji")}
+        description={t("Optional. Shown as the chat badge.")}
+        maxLength={8}
+        {...form.getInputProps("emoji")}
+      />
+
+      <TextInput
+        label={t("Description")}
+        description={t("Optional. A short note about what this role does.")}
+        {...form.getInputProps("description")}
+      />
+
+      <Textarea
+        label={t("Instructions")}
+        description={t(
+          "The built-in safety framework is always added automatically.",
+        )}
+        autosize
+        minRows={4}
+        maxRows={14}
+        {...form.getInputProps("instructions")}
+      />
+
+      <Group grow align="flex-start">
+        <Select
+          label={t("Model provider override")}
+          description={t("Optional. Defaults to the workspace provider.")}
+          data={DRIVER_OPTIONS}
+          allowDeselect={false}
+          comboboxProps={{ withinPortal: true }}
+          {...form.getInputProps("driver")}
+        />
+        <TextInput
+          label={t("Model override")}
+          description={t("Optional. Defaults to the workspace model.")}
+          placeholder={t("e.g. gpt-4o-mini")}
+          {...form.getInputProps("chatModel")}
+        />
+      </Group>
+      <Text size="xs" c="dimmed" mt={-8}>
+        {t(
+          "If you choose a different provider, it must already be configured in AI settings.",
+        )}
+      </Text>
+
+      <Switch
+        label={t("Enabled")}
+        checked={form.values.enabled}
+        onChange={(event) =>
+          form.setFieldValue("enabled", event.currentTarget.checked)
+        }
+      />
+
+      <Group justify="flex-end" mt="sm">
+        <Button type="button" variant="default" onClick={onClose}>
+          {t("Cancel")}
+        </Button>
+        <Button
+          type="button"
+          onClick={() => handleSubmit(form.values)}
+          disabled={isSaving || !form.isValid()}
+          loading={isSaving}
+        >
+          {t("Save")}
+        </Button>
+      </Group>
+    </Stack>
+  );
+}
@@ -0,0 +1,175 @@
+import { useState } from "react";
+import {
+  ActionIcon,
+  Badge,
+  Box,
+  Button,
+  Group,
+  Modal,
+  Paper,
+  Stack,
+  Switch,
+  Text,
+} from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { modals } from "@mantine/modals";
+import { IconPencil, IconPlus, IconTrash } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import useUserRole from "@/hooks/use-user-role.tsx";
+import {
+  useAiRolesQuery,
+  useDeleteAiRoleMutation,
+  useUpdateAiRoleMutation,
+} from "@/features/ai-chat/queries/ai-chat-query.ts";
+import { IAiRole } from "@/features/ai-chat/types/ai-chat.types.ts";
+import AiAgentRoleForm from "./ai-agent-role-form.tsx";
+
+/**
+ * Admin section: list / add / edit / delete reusable agent roles. A role
+ * replaces the agent's persona (instructions) and may optionally override the
+ * model; the safety framework is always still applied. The add/edit form lives
+ * in `AiAgentRoleForm`, opened in a modal.
+ */
+export default function AiAgentRoles() {
+  const { t } = useTranslation();
+  const { isAdmin } = useUserRole();
+
+  const { data: roles, isLoading } = useAiRolesQuery(isAdmin);
+  const updateMutation = useUpdateAiRoleMutation();
+  const deleteMutation = useDeleteAiRoleMutation();
+
+  const [opened, { open, close }] = useDisclosure(false);
+  // The role being edited; undefined => the modal is in "create" mode.
+  const [editing, setEditing] = useState<IAiRole | undefined>(undefined);
+
+  if (!isAdmin) {
+    return (
+      <Text size="sm" c="dimmed">
+        {t("Only workspace admins can manage AI provider settings.")}
+      </Text>
+    );
+  }
+
+  function openCreate() {
+    setEditing(undefined);
+    open();
+  }
+
+  function openEdit(role: IAiRole) {
+    setEditing(role);
+    open();
+  }
+
+  function confirmDelete(role: IAiRole) {
+    modals.openConfirmModal({
+      title: t("Delete role"),
+      children: (
+        <Text size="sm">
+          {t("Are you sure you want to delete this role?")}
+        </Text>
+      ),
+      labels: { confirm: t("Delete"), cancel: t("Cancel") },
+      confirmProps: { color: "red" },
+      onConfirm: () => deleteMutation.mutate(role.id),
+    });
+  }
+
+  return (
+    <Paper withBorder radius="md" p="lg">
+      <Group justify="space-between" align="center" wrap="nowrap">
+        <Group gap="xs" align="center" wrap="nowrap">
+          <Box
+            w={9}
+            h={9}
+            bg="green.6"
+            style={{ borderRadius: "50%", flex: "none" }}
+          />
+          <Text fw={600}>{t("Agent roles")}</Text>
+        </Group>
+        <Button
+          leftSection={<IconPlus size={16} />}
+          variant="default"
+          size="xs"
+          onClick={openCreate}
+        >
+          {t("Add role")}
+        </Button>
+      </Group>
+      <Text size="xs" c="dimmed" mt={4}>
+        {t(
+          "Reusable presets that shape the agent's behavior (and optionally its model). Picked when starting a new chat.",
+        )}
+      </Text>
+
+      {!isLoading && (!roles || roles.length === 0) && (
+        <Text size="sm" c="dimmed" mt="sm">
+          {t("No roles configured")}
+        </Text>
+      )}
+
+      <Stack gap="xs" mt="sm">
+        {roles?.map((role) => (
+          <Group key={role.id} justify="space-between" wrap="nowrap">
+            <Stack gap={2} style={{ minWidth: 0 }}>
+              <Group gap="xs">
+                <Text fw={500} truncate>
+                  {role.emoji ? `${role.emoji} ` : ""}
+                  {role.name}
+                </Text>
+                {role.modelConfig?.chatModel && (
+                  <Badge size="xs" variant="light">
+                    {role.modelConfig.chatModel}
+                  </Badge>
+                )}
+              </Group>
+              {role.description && (
+                <Text size="xs" c="dimmed" truncate>
+                  {role.description}
+                </Text>
+              )}
+            </Stack>
+
+            <Group gap="xs" wrap="nowrap">
+              <Switch
+                size="sm"
+                checked={role.enabled}
+                aria-label={t("Enabled")}
+                onChange={(event) =>
+                  updateMutation.mutate({
+                    id: role.id,
+                    enabled: event.currentTarget.checked,
+                  })
+                }
+              />
+              <ActionIcon
+                variant="subtle"
+                aria-label={t("Edit")}
+                onClick={() => openEdit(role)}
+              >
+                <IconPencil size={16} />
+              </ActionIcon>
+              <ActionIcon
+                variant="subtle"
+                color="red"
+                aria-label={t("Delete")}
+                onClick={() => confirmDelete(role)}
+              >
+                <IconTrash size={16} />
+              </ActionIcon>
+            </Group>
+          </Group>
+        ))}
+      </Stack>
+
+      <Modal
+        opened={opened}
+        onClose={close}
+        title={editing ? t("Edit role") : t("Add role")}
+        size="lg"
+      >
+        {/* Remount the form per target so its internal state re-hydrates. */}
+        <AiAgentRoleForm key={editing?.id ?? "new"} role={editing} onClose={close} />
+      </Modal>
+    </Paper>
+  );
+}
@@ -47,6 +47,21 @@ interface AiMcpServerFormProps {
  onClose: () => void;
 }

+// Build the form's field values from a (possibly undefined) server. Used both
+// for the initial mount and for re-hydration when the modal is reused for a
+// different server, so the two stay in sync. authHeader is always empty: it is
+// a write-only secret buffer never echoed back from the server.
+function buildInitialValues(server?: IAiMcpServer): FormValues {
+  return {
+    name: server?.name ?? "",
+    transport: server?.transport ?? "http",
+    url: server?.url ?? "",
+    authHeader: "",
+    toolAllowlist: server?.toolAllowlist ?? [],
+    enabled: server?.enabled ?? true,
+  };
+}
+
 // Tavily preset (§8.10): the API key goes in the Authorization HEADER, not the URL.
 const TAVILY_PRESET = {
  name: "Tavily",
@@ -72,26 +87,12 @@ export default function AiMcpServerForm({

  const form = useForm<FormValues>({
    validate: zod4Resolver(formSchema),
-    initialValues: {
-      name: server?.name ?? "",
-      transport: server?.transport ?? "http",
-      url: server?.url ?? "",
-      authHeader: "",
-      toolAllowlist: server?.toolAllowlist ?? [],
-      enabled: server?.enabled ?? true,
-    },
+    initialValues: buildInitialValues(server),
  });

  // Re-hydrate when the target server changes (e.g. reusing the modal).
  useEffect(() => {
-    form.setValues({
-      name: server?.name ?? "",
-      transport: server?.transport ?? "http",
-      url: server?.url ?? "",
-      authHeader: "",
-      toolAllowlist: server?.toolAllowlist ?? [],
-      enabled: server?.enabled ?? true,
-    });
+    form.setValues(buildInitialValues(server));
    form.resetDirty();
    setHasHeaders(server?.hasHeaders ?? false);
    setHeadersCleared(false);
@@ -0,0 +1,20 @@
+import { describe, it, expect } from 'vitest';
+import { resolveCardStatus } from './ai-provider-settings';
+
+describe('resolveCardStatus', () => {
+  it('returns "off" when not configured and not enabled', () => {
+    expect(resolveCardStatus(false, false)).toBe('off');
+  });
+
+  it('returns "warning" when enabled but not configured (misconfig, not silent "off")', () => {
+    expect(resolveCardStatus(false, true)).toBe('warning');
+  });
+
+  it('returns "configured" when configured but disabled', () => {
+    expect(resolveCardStatus(true, false)).toBe('configured');
+  });
+
+  it('returns "ready" when configured and enabled', () => {
+    expect(resolveCardStatus(true, true)).toBe('ready');
+  });
+});
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { z } from "zod/v4";
 import {
-  Anchor,
+  ActionIcon,
  Badge,
  Box,
  Button,
@@ -15,12 +15,13 @@ import {
  Text,
  Textarea,
  TextInput,
+  Tooltip,
  useMantineTheme,
 } from "@mantine/core";
 import { useForm } from "@mantine/form";
 import { useDisclosure } from "@mantine/hooks";
 import { zod4Resolver } from "mantine-form-zod-resolver";
-import { IconPencil } from "@tabler/icons-react";
+import { IconPencil, IconX } from "@tabler/icons-react";
 import { useAtom } from "jotai";
 import { notifications } from "@mantine/notifications";
 import { useTranslation } from "react-i18next";
@@ -62,8 +63,15 @@ const formSchema = z.object({

 type FormValues = z.infer<typeof formSchema>;

-// Status of an endpoint card, drives the little status dot color.
-type CardStatus = "ok" | "error" | "idle";
+// Four-state endpoint health shown by the header dot. Derived synchronously
+// from the form values + feature toggle — never from a network probe (the
+// "Test endpoint" button still surfaces the live probe result as text).
+//   "ready"     (green)  — required fields filled AND the feature is ON
+//   "configured"(yellow) — required fields filled but the feature is OFF
+//   "off"       (gray)   — required fields missing (nothing to enable)
+//   "warning"   (orange) — feature is ON but required fields are missing
+//                          (a real misconfiguration: it won't work as-is)
+type CardStatus = "ready" | "configured" | "off" | "warning";

 // Resolve a "Base URL + path" hint defensively: trim a single trailing slash
 // off the base, then append the path. Empty base falls back to `fallback`
@@ -73,21 +81,53 @@ function resolveUrl(base: string, path: string, fallback = ""): string {
  return `${trimmed}${path}`;
 }

-// Small colored dot used in each card header.
-function StatusDot({ status }: { status: CardStatus }) {
+// Pure + unit-testable. `configured` = the endpoint has the fields it needs
+// to work; `enabled` = the workspace feature toggle for this endpoint is ON.
+// The "enabled && !configured" case is surfaced as "warning" instead of "off"
+// so a misconfiguration (feature on, endpoint not filled) is not hidden.
+export function resolveCardStatus(
+  configured: boolean,
+  enabled: boolean,
+): CardStatus {
+  if (configured) return enabled ? "ready" : "configured";
+  return enabled ? "warning" : "off";
+}
+
+// Translate the dot's tooltip label. Kept in one place so all three endpoint
+// cards share identical wording.
+function cardStatusLabel(status: CardStatus, t: (k: string) => string): string {
+  switch (status) {
+    case "ready":
+      return t("Configured and enabled");
+    case "configured":
+      return t("Configured but disabled");
+    case "warning":
+      return t("Enabled but not configured");
+    default:
+      return t("Not configured");
+  }
+}
+
+// Small colored dot used in each card header, with a tooltip label so the
+// state is readable without relying on color alone (colorblind access).
+function StatusDot({ status, label }: { status: CardStatus; label: string }) {
  const theme = useMantineTheme();
  const color =
-    status === "ok"
+    status === "ready"
      ? theme.colors.green[6]
-      : status === "error"
-        ? theme.colors.red[6]
-        : theme.colors.gray[5];
+      : status === "configured"
+        ? theme.colors.yellow[6]
+        : status === "warning"
+          ? theme.colors.orange[6]
+          : theme.colors.gray[5];
  return (
-    <Box
-      w={9}
-      h={9}
-      style={{ borderRadius: "50%", background: color, flex: "none" }}
-    />
+    <Tooltip label={label} position="top" withArrow>
+      <Box
+        w={9}
+        h={9}
+        style={{ borderRadius: "50%", background: color, flex: "none" }}
+      />
+    </Tooltip>
  );
 }

@@ -399,21 +439,23 @@ export default function AiProviderSettings() {
    );
  }

-  const chatStatus: CardStatus = chatTest.data
-    ? chatTest.data.ok
-      ? "ok"
-      : "error"
-    : "idle";
-  const embedStatus: CardStatus = embedTest.data
-    ? embedTest.data.ok
-      ? "ok"
-      : "error"
-    : "idle";
-  const sttStatus: CardStatus = sttTest.data
-    ? sttTest.data.ok
-      ? "ok"
-      : "error"
-    : "idle";
+  // Per-endpoint "configured" predicate, derived from the LIVE form values
+  // (the dot reacts as the admin types). A key is NOT required — local
+  // servers (Ollama, speaches) work without one. Embeddings and Voice
+  // inherit the chat base URL when their own is empty (see resolveUrl).
+  const v = form.values;
+  const chatBase = v.baseUrl.trim();
+  const chatConfigured = v.chatModel.trim() !== "" && chatBase !== "";
+  const embedConfigured =
+    v.embeddingModel.trim() !== "" &&
+    (v.embeddingBaseUrl.trim() !== "" || chatBase !== "");
+  const sttConfigured =
+    v.sttModel.trim() !== "" &&
+    (v.sttBaseUrl.trim() !== "" || chatBase !== "");
+
+  const chatStatus = resolveCardStatus(chatConfigured, chatEnabled);
+  const embedStatus = resolveCardStatus(embedConfigured, searchEnabled);
+  const sttStatus = resolveCardStatus(sttConfigured, dictationEnabled);

  const chatResolved = resolveUrl(form.values.baseUrl, "/chat/completions");
  const embedResolved = resolveUrl(
@@ -450,7 +492,7 @@ export default function AiProviderSettings() {
      <Paper withBorder radius="md" p="lg">
        <Group justify="space-between" align="center" wrap="nowrap">
          <Group gap="xs" align="center" wrap="nowrap">
-            <StatusDot status={chatStatus} />
+            <StatusDot status={chatStatus} label={cardStatusLabel(chatStatus, t)} />
            <Text fw={600}>{t("Chat / LLM")}</Text>
            <Badge size="sm" variant="light" color="gray">
              {t("root")}
@@ -476,19 +518,34 @@ export default function AiProviderSettings() {
            disabled={isLoading}
            {...form.getInputProps("chatModel")}
          />
-          <Stack gap={4}>
-            <PasswordInput
-              label={t("API key")}
-              placeholder={hasApiKey ? t("•••• set") : ""}
-              autoComplete="off"
-              {...form.getInputProps("apiKey")}
-            />
-            {hasApiKey && (
-              <Anchor component="button" type="button" c="red" size="xs" onClick={handleClearKey}>
-                {t("Clear")}
-              </Anchor>
-            )}
-          </Stack>
+          {/* The key field is write-only: the stored key never loads back, so the
+              built-in visibility toggle reveals nothing. Replace it with a Clear
+              action in the right section. Passing rightSection suppresses the eye
+              (Mantine). While typing a new key (buffer non-empty) fall back to
+              the default eye so the user can verify what they typed. */}
+          <PasswordInput
+            label={t("API key")}
+            placeholder={hasApiKey ? t("•••• set") : ""}
+            autoComplete="off"
+            rightSection={
+              hasApiKey && form.values.apiKey.length === 0 ? (
+                <Tooltip label={t("Clear")} position="top" withArrow>
+                  <ActionIcon
+                    variant="subtle"
+                    color="red"
+                    size="sm"
+                    aria-label={t("Clear")}
+                    type="button"
+                    onClick={handleClearKey}
+                  >
+                    <IconX size={16} />
+                  </ActionIcon>
+                </Tooltip>
+              ) : undefined
+            }
+            rightSectionPointerEvents="all"
+            {...form.getInputProps("apiKey")}
+          />
        </Group>

        <TextInput
@@ -593,7 +650,7 @@ export default function AiProviderSettings() {
      <Paper withBorder radius="md" p="lg">
        <Group justify="space-between" align="center" wrap="nowrap">
          <Group gap="xs" align="center" wrap="nowrap">
-            <StatusDot status={embedStatus} />
+            <StatusDot status={embedStatus} label={cardStatusLabel(embedStatus, t)} />
            <Text fw={600}>{t("Embeddings")}</Text>
          </Group>
          <Switch
@@ -614,29 +671,38 @@ export default function AiProviderSettings() {
            disabled={isLoading}
            {...form.getInputProps("embeddingModel")}
          />
-          <Stack gap={4}>
-            <PasswordInput
-              label={t("Embedding API key")}
-              placeholder={
-                hasEmbeddingApiKey
-                  ? t("•••• set")
-                  : t("Leave empty to use the chat API key")
-              }
-              autoComplete="off"
-              {...form.getInputProps("embeddingApiKey")}
-            />
-            {hasEmbeddingApiKey && (
-              <Anchor
-                component="button"
-                type="button"
-                c="red"
-                size="xs"
-                onClick={handleClearEmbeddingKey}
-              >
-                {t("Clear")}
-              </Anchor>
-            )}
-          </Stack>
+          {/* The key field is write-only: the stored key never loads back, so the
+              built-in visibility toggle reveals nothing. Replace it with a Clear
+              action in the right section. Passing rightSection suppresses the eye
+              (Mantine). While typing a new key (buffer non-empty) fall back to
+              the default eye so the user can verify what they typed. */}
+          <PasswordInput
+            label={t("Embedding API key")}
+            placeholder={
+              hasEmbeddingApiKey
+                ? t("•••• set")
+                : t("Leave empty to use the chat API key")
+            }
+            autoComplete="off"
+            rightSection={
+              hasEmbeddingApiKey && form.values.embeddingApiKey.length === 0 ? (
+                <Tooltip label={t("Clear")} position="top" withArrow>
+                  <ActionIcon
+                    variant="subtle"
+                    color="red"
+                    size="sm"
+                    aria-label={t("Clear")}
+                    type="button"
+                    onClick={handleClearEmbeddingKey}
+                  >
+                    <IconX size={16} />
+                  </ActionIcon>
+                </Tooltip>
+              ) : undefined
+            }
+            rightSectionPointerEvents="all"
+            {...form.getInputProps("embeddingApiKey")}
+          />
        </Group>

        <TextInput
@@ -710,7 +776,7 @@ export default function AiProviderSettings() {
      <Paper withBorder radius="md" p="lg">
        <Group justify="space-between" align="center" wrap="nowrap">
          <Group gap="xs" align="center" wrap="nowrap">
-            <StatusDot status={sttStatus} />
+            <StatusDot status={sttStatus} label={cardStatusLabel(sttStatus, t)} />
            <Text fw={600}>{t("Voice / STT")}</Text>
          </Group>
          <Switch
@@ -733,29 +799,38 @@ export default function AiProviderSettings() {
            disabled={isLoading}
            {...form.getInputProps("sttModel")}
          />
-          <Stack gap={4}>
-            <PasswordInput
-              label={t("API key")}
-              placeholder={
-                hasSttApiKey
-                  ? t("•••• set")
-                  : t("Leave empty to use the chat API key")
-              }
-              autoComplete="off"
-              {...form.getInputProps("sttApiKey")}
-            />
-            {hasSttApiKey && (
-              <Anchor
-                component="button"
-                type="button"
-                c="red"
-                size="xs"
-                onClick={handleClearSttKey}
-              >
-                {t("Clear")}
-              </Anchor>
-            )}
-          </Stack>
+          {/* The key field is write-only: the stored key never loads back, so the
+              built-in visibility toggle reveals nothing. Replace it with a Clear
+              action in the right section. Passing rightSection suppresses the eye
+              (Mantine). While typing a new key (buffer non-empty) fall back to
+              the default eye so the user can verify what they typed. */}
+          <PasswordInput
+            label={t("API key")}
+            placeholder={
+              hasSttApiKey
+                ? t("•••• set")
+                : t("Leave empty to use the chat API key")
+            }
+            autoComplete="off"
+            rightSection={
+              hasSttApiKey && form.values.sttApiKey.length === 0 ? (
+                <Tooltip label={t("Clear")} position="top" withArrow>
+                  <ActionIcon
+                    variant="subtle"
+                    color="red"
+                    size="sm"
+                    aria-label={t("Clear")}
+                    type="button"
+                    onClick={handleClearSttKey}
+                  >
+                    <IconX size={16} />
+                  </ActionIcon>
+                </Tooltip>
+              ) : undefined
+            }
+            rightSectionPointerEvents="all"
+            {...form.getInputProps("sttApiKey")}
+          />
        </Group>

        <Select