npm - @agentprojectcontext/apx - Versions diffs - 1.32.2 → 1.33.0 - Mend

@agentprojectcontext/apx 1.32.2 → 1.33.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (38) hide show

package/src/interfaces/web/dist/index.html CHANGED Viewed

@@ -18,8 +18,8 @@
     <link rel="apple-touch-icon" href="/favicon/dark/apple-touch-icon.png" media="(prefers-color-scheme: dark)" />
     <link rel="manifest" href="/favicon/white/site.webmanifest" media="(prefers-color-scheme: light)" />
     <link rel="manifest" href="/favicon/dark/site.webmanifest" media="(prefers-color-scheme: dark)" />
-    <script type="module" crossorigin src="/assets/index-BkybwwRn.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-34U_Mp1M.css">
+    <script type="module" crossorigin src="/assets/index-DWsE_8Nz.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-7dVT2O1S.css">
   </head>
   <body class="bg-background text-foreground antialiased">
     <div id="root"></div>

package/src/interfaces/web/package-lock.json CHANGED Viewed

@@ -2236,9 +2236,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001797",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001797.tgz",
-      "integrity": "sha512-l8xKG+gwAIExZGl9FrF7KUwuOmk6wbEPC9Xoy/RtnWv1XG0Q4LFlagaLpUv3Kiza3W/wm27zy0yWJEieYKAP6w==",
+      "version": "1.0.30001799",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001799.tgz",
+      "integrity": "sha512-hG1bReV+OUU+MOqK4t/ZWI0tZOyz3rqS9XuhOUz1cIcbwBKjOyJEJuw9ER5JuNyqxNk8u/JUVbGibBOL1yrjFw==",
       "dev": true,
       "funding": [
         {

package/src/interfaces/web/src/App.tsx CHANGED Viewed

@@ -17,7 +17,7 @@ import { TooltipProvider } from "./components/ui/tooltip";
 import { useTheme } from "./hooks/useTheme";
 import { useProjects } from "./hooks/useProjects";
 import { useTokenBootstrap } from "./hooks/useTokenBootstrap";
-import { NavCollapseProvider, useNavCollapseCtx, usePageLabel } from "./hooks/useNavCollapseCtx";
+import { NavCollapseProvider, useNavCollapseCtx, usePageActions, usePageLabel } from "./hooks/useNavCollapseCtx";
 import { NavToggle } from "./components/common/TabNav";
 import { t } from "./i18n";
@@ -131,6 +131,7 @@ function TopBar({
             : project ? `${projectKindLabel(project.kind)} · ${project.path}` : "")
         : "";
   const nav = useNavCollapseCtx();
+  const pageActions = usePageActions();
   return (
     <header className="flex h-10 shrink-0 items-center gap-2 border-b border-border/50 px-3">
       {nav && <NavToggle collapsed={nav.collapsed} onToggle={nav.toggle} />}
@@ -138,6 +139,7 @@ function TopBar({
         {crumb}
         {subtitle && <span className="text-muted-fg/50"> · {subtitle}</span>}
       </span>
+      {pageActions}
       <button
         type="button"
         onClick={onToggleTheme}

package/src/interfaces/web/src/components/UiSelect.tsx CHANGED Viewed

@@ -25,6 +25,7 @@ export function UiSelect({
   placeholder = "— elegir —",
   disabled,
   className,
+  showIcon = false,
 }: {
   value: string;
   onChange: (value: string) => void;
@@ -32,13 +33,22 @@ export function UiSelect({
   placeholder?: string;
   disabled?: boolean;
   className?: string;
+  showIcon?: boolean;
 }) {
   return (
     <Select value={value} onValueChange={(v) => onChange((v as string) ?? "")} disabled={disabled}>
       <SelectTrigger className={cn("h-9 w-full", className)}>
-        {/* Show the option's label in the trigger, not the raw value key. */}
         <SelectValue placeholder={placeholder}>
-          {(val) => options.find((o) => o.value === val)?.label ?? (val as string)}
+          {(val) => {
+            const opt = options.find((o) => o.value === val);
+            const Icon = showIcon ? opt?.icon : undefined;
+            return (
+              <span className="flex min-w-0 items-center gap-1.5">
+                {Icon && <Icon className="size-3.5 shrink-0" />}
+                <span className="truncate">{opt?.label ?? (val as string)}</span>
+              </span>
+            );
+          }}
         </SelectValue>
       </SelectTrigger>
       {/* side=bottom + alignItemWithTrigger=false → dropdown sits BELOW the

package/src/interfaces/web/src/components/code/CodeArtifactsTab.tsx CHANGED Viewed

@@ -1,37 +1,63 @@
-import { useState } from "react";
+import { useRef, useState } from "react";
 import useSWR from "swr";
-import { ChevronRight, Copy, RefreshCw, Trash2, FileCode2, Play } from "lucide-react";
+import { Copy, RefreshCw, Trash2, FileCode2, Play, Pencil, Eye, SquarePen } from "lucide-react";
 import { cn } from "../../lib/cn";
 import { t } from "../../i18n";
 import { Empty, Spinner } from "../ui";
 import { Artifacts, type ArtifactEntry, type ArtifactRunResult } from "../../lib/api/artifacts";
 import { useToast } from "../Toast";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogClose,
+} from "../ui/dialog";
+import { Tip } from "../ui/tip";
 interface Props {
   pid: string;
+  onRunInTerminal?: (cmd: string) => void;
+  onEditArtifact?: (name: string) => void;
 }
 function ArtifactRow({
   pid,
   entry,
   onDeleted,
+  onRenamed,
+  onRunInTerminal,
+  onEditArtifact,
 }: {
   pid: string;
   entry: ArtifactEntry;
   onDeleted: () => void;
+  onRenamed: () => void;
+  onRunInTerminal?: (cmd: string) => void;
+  onEditArtifact?: (name: string) => void;
 }) {
-  const [open, setOpen] = useState(false);
   const [running, setRunning] = useState(false);
   const [runResult, setRunResult] = useState<ArtifactRunResult | null>(null);
   const toast = useToast();
-  const detail = useSWR(open ? ["artifact", pid, entry.name] : null, () =>
-    Artifacts.read(pid, entry.name),
-  );
-  // Daemon-side detection: a file is runnable if it has the exec bit OR
-  // starts with a shebang. Locally we can only check the shebang from the
-  // fetched content; if it's missing we still show Run (the daemon will
-  // 400 cleanly and the toast surfaces the reason).
+  // Rename state
+  const [renaming, setRenaming] = useState(false);
+  const [renameValue, setRenameValue] = useState(entry.name);
+  const renameInputRef = useRef<HTMLInputElement>(null);
+  // View dialog state
+  const [viewOpen, setViewOpen] = useState(false);
+  // Delete confirmation dialog
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  // Load detail only when the view dialog is open
+  const detailKey = viewOpen ? ["artifact", pid, entry.name] : null;
+  const detail = useSWR(detailKey, () => Artifacts.read(pid, entry.name), {
+    revalidateOnFocus: false,
+  });
   const looksRunnable = !detail.data?.content || detail.data.content.startsWith("#!");
   const copy = async (text: string) => {
@@ -59,137 +85,249 @@ function ArtifactRow({
   };
   const remove = async () => {
-    if (!window.confirm(t("code_module.artifacts_delete_confirm"))) return;
+    setDeleting(true);
     try {
       await Artifacts.remove(pid, entry.name);
+      setDeleteOpen(false);
       onDeleted();
     } catch (e) {
       toast.error((e as Error).message);
+    } finally {
+      setDeleting(false);
+    }
+  };
+  const startRename = () => {
+    setRenameValue(entry.name);
+    setRenaming(true);
+    // Focus after paint
+    requestAnimationFrame(() => renameInputRef.current?.select());
+  };
+  const commitRename = async () => {
+    const trimmed = renameValue.trim();
+    setRenaming(false);
+    if (!trimmed || trimmed === entry.name) return;
+    try {
+      await Artifacts.rename(pid, entry.name, trimmed);
+      onRenamed();
+    } catch (e) {
+      toast.error((e as Error).message);
     }
   };
   return (
     <li className="rounded-md border border-border">
-      <button
-        type="button"
-        onClick={() => setOpen((v) => !v)}
-        className="flex w-full items-center gap-2 px-2 py-1.5 text-left text-xs hover:bg-accent/40"
-      >
-        <ChevronRight
-          className={cn(
-            "size-3 shrink-0 transition-transform",
-            open && "rotate-90",
-          )}
-        />
+      {/* Row header: file icon + name (or rename input) + size */}
+      <div className="flex w-full items-center gap-2 px-2 py-1.5 text-xs">
         <FileCode2 className="size-3.5 shrink-0 text-emerald-600 dark:text-emerald-400" />
-        <span className="min-w-0 flex-1 truncate font-mono">{entry.name}</span>
+        {renaming ? (
+          <input
+            ref={renameInputRef}
+            value={renameValue}
+            onChange={(e) => setRenameValue(e.target.value)}
+            onBlur={() => void commitRename()}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") void commitRename();
+              if (e.key === "Escape") setRenaming(false);
+            }}
+            autoFocus
+            className="min-w-0 flex-1 rounded border border-border bg-background px-1 py-0.5 font-mono text-xs outline-none focus:ring-1 focus:ring-ring"
+          />
+        ) : (
+          <span className="min-w-0 flex-1 truncate font-mono">{entry.name}</span>
+        )}
+        <Tip content="Renombrar">
+          <button
+            type="button"
+            onClick={startRename}
+            className="shrink-0 rounded p-0.5 text-muted-foreground hover:bg-accent hover:text-foreground"
+          >
+            <Pencil className="size-3" />
+          </button>
+        </Tip>
         <span className="shrink-0 font-mono text-[10px] text-muted-foreground">
           {entry.size}b
         </span>
-      </button>
-      {open && (
-        <div className="space-y-2 border-t border-border p-2">
-          <div className="flex flex-wrap items-center gap-1">
-            <code className="min-w-0 flex-1 truncate rounded bg-muted px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground">
-              {entry.path}
-            </code>
-            {looksRunnable && (
-              <button
-                type="button"
-                onClick={() => void run()}
-                disabled={running}
-                title={t("code_module.artifacts_run")}
-                className={cn(
-                  "inline-flex items-center gap-1 rounded px-1.5 py-1 text-[10px] font-medium",
-                  running
-                    ? "bg-muted text-muted-foreground"
-                    : "bg-emerald-500/15 text-emerald-700 hover:bg-emerald-500/25 dark:text-emerald-300",
-                )}
-              >
-                {running ? <Spinner size={10} /> : <Play className="size-3" />}
-                {t("code_module.artifacts_run")}
-              </button>
-            )}
+      </div>
+      {/* Action bar — always visible */}
+      <div className="space-y-2 border-t border-border p-2">
+        <div className="flex w-full min-w-0 items-center gap-1 rounded bg-muted px-1.5 py-0.5">
+          <code className="min-w-0 flex-1 truncate font-mono text-[10px] text-muted-foreground">
+            {entry.path}
+          </code>
+          <Tip content={t("code_module.artifacts_copy_path")}>
             <button
               type="button"
               onClick={() => void copy(entry.path)}
-              title={t("code_module.artifacts_copy_path")}
-              className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+              className="shrink-0 rounded p-0.5 text-muted-foreground hover:bg-accent hover:text-foreground"
             >
               <Copy className="size-3" />
             </button>
+          </Tip>
+        </div>
+        <div className="flex flex-wrap items-center gap-1 mt-1">
+          {/* Ver button */}
+          <Dialog open={viewOpen} onOpenChange={setViewOpen}>
+            <Tip content="Ver contenido">
+              <button
+                type="button"
+                onClick={() => setViewOpen(true)}
+                className="inline-flex items-center gap-1 rounded px-1.5 py-1 text-[10px] font-medium bg-blue-500/15 text-blue-700 hover:bg-blue-500/25 dark:text-blue-300"
+              >
+                <Eye className="size-3" />
+                Ver
+              </button>
+            </Tip>
+            <DialogContent className="sm:max-w-lg">
+              <DialogHeader>
+                <DialogTitle className="font-mono text-sm">{entry.name}</DialogTitle>
+              </DialogHeader>
+              {detail.isLoading ? (
+                <div className="flex justify-center py-6">
+                  <Spinner size={16} />
+                </div>
+              ) : (
+                <pre className="max-h-96 overflow-auto rounded bg-muted/50 p-3 font-mono text-[11px] leading-tight whitespace-pre-wrap break-all">
+                  {detail.data?.content ?? ""}
+                </pre>
+              )}
+              <DialogFooter showCloseButton />
+            </DialogContent>
+          </Dialog>
+          {/* Editar — opens as a file tab in the main panel */}
+          <Tip content="Editar contenido">
             <button
               type="button"
-              onClick={() => void remove()}
-              title={t("code_module.artifacts_delete")}
-              className="rounded p-1 text-rose-600 hover:bg-rose-50 dark:text-rose-400 dark:hover:bg-rose-950"
+              onClick={() => onEditArtifact?.(entry.name)}
+              className="inline-flex items-center gap-1 rounded px-1.5 py-1 text-[10px] font-medium bg-violet-500/15 text-violet-700 hover:bg-violet-500/25 dark:text-violet-300"
             >
-              <Trash2 className="size-3" />
+              <SquarePen className="size-3" />
+              Editar
             </button>
-          </div>
-          <div className="text-[10px] text-muted-foreground">
-            {t("code_module.artifacts_run_hint")}{" "}
-            <code className="rounded bg-muted px-1 font-mono">
-              apx artifact run {entry.name}
-            </code>
-          </div>
-          {runResult && (
-            <div className="space-y-1">
-              <div className="flex items-center gap-2 text-[10px]">
-                <span
+          </Tip>
+          {/* Run button */}
+          {looksRunnable && (
+            <Tip content={t("code_module.artifacts_run")}>
+              <button
+                type="button"
+                onClick={() => onRunInTerminal?.(`apx artifact run ${entry.name}`)}
+                className="inline-flex items-center gap-1 rounded px-1.5 py-1 text-[10px] font-medium bg-emerald-500/15 text-emerald-700 hover:bg-emerald-500/25 dark:text-emerald-300"
+              >
+                <Play className="size-3" />
+                {t("code_module.artifacts_run")}
+              </button>
+            </Tip>
+          )}
+          {/* Eliminar — confirmation dialog */}
+          <Dialog open={deleteOpen} onOpenChange={setDeleteOpen}>
+            <Tip content={t("code_module.artifacts_delete")}>
+              <button
+                type="button"
+                onClick={() => setDeleteOpen(true)}
+                className="ml-auto rounded p-1 text-rose-600 hover:bg-rose-50 dark:text-rose-400 dark:hover:bg-rose-950"
+              >
+                <Trash2 className="size-3" />
+              </button>
+            </Tip>
+            <DialogContent className="sm:max-w-sm">
+              <DialogHeader>
+                <DialogTitle className="font-mono text-sm">
+                  {t("code_module.artifacts_delete")} — {entry.name}
+                </DialogTitle>
+              </DialogHeader>
+              <p className="px-1 text-sm text-muted-foreground">
+                {t("code_module.artifacts_delete_confirm")}
+              </p>
+              <DialogFooter>
+                <DialogClose
+                  render={
+                    <button
+                      type="button"
+                      className="rounded px-3 py-1.5 text-xs font-medium hover:bg-accent"
+                    />
+                  }
+                >
+                  Cancelar
+                </DialogClose>
+                <button
+                  type="button"
+                  onClick={() => void remove()}
+                  disabled={deleting}
                   className={cn(
-                    "rounded px-1.5 py-0.5 font-mono",
-                    runResult.ok
-                      ? "bg-emerald-500/15 text-emerald-700 dark:text-emerald-300"
-                      : "bg-rose-500/15 text-rose-700 dark:text-rose-300",
+                    "inline-flex items-center gap-1.5 rounded px-3 py-1.5 text-xs font-medium",
+                    deleting
+                      ? "bg-muted text-muted-foreground"
+                      : "bg-rose-500/15 text-rose-700 hover:bg-rose-500/25 dark:text-rose-300",
                   )}
                 >
-                  exit {runResult.exitCode ?? runResult.signal ?? "?"}
-                </span>
-                {runResult.timedOut && (
-                  <span className="rounded bg-amber-500/15 px-1.5 py-0.5 font-mono text-amber-700 dark:text-amber-300">
-                    timeout
-                  </span>
-                )}
-                {runResult.truncated && (
-                  <span className="rounded bg-amber-500/15 px-1.5 py-0.5 font-mono text-amber-700 dark:text-amber-300">
-                    truncated
-                  </span>
+                  {deleting && <Spinner size={10} />}
+                  Eliminar
+                </button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </div>
+        <div className="mt-1 text-[10px] text-muted-foreground">
+          {t("code_module.artifacts_run_hint")}{" "}
+          <code className="rounded bg-muted px-1 font-mono">
+            apx artifact run {entry.name}
+          </code>
+        </div>
+        {/* Run result display */}
+        {runResult && (
+          <div className="space-y-1">
+            <div className="flex items-center gap-2 text-[10px]">
+              <span
+                className={cn(
+                  "rounded px-1.5 py-0.5 font-mono",
+                  runResult.ok
+                    ? "bg-emerald-500/15 text-emerald-700 dark:text-emerald-300"
+                    : "bg-rose-500/15 text-rose-700 dark:text-rose-300",
                 )}
-                <span className="font-mono text-muted-foreground">
-                  {runResult.durationMs}ms
+              >
+                exit {runResult.exitCode ?? runResult.signal ?? "?"}
+              </span>
+              {runResult.timedOut && (
+                <span className="rounded bg-amber-500/15 px-1.5 py-0.5 font-mono text-amber-700 dark:text-amber-300">
+                  timeout
                 </span>
-              </div>
-              {runResult.stdout && (
-                <pre className="max-h-32 overflow-auto rounded bg-background/60 p-2 text-[10px] leading-tight">
-                  {runResult.stdout}
-                </pre>
               )}
-              {runResult.stderr && (
-                <pre className="max-h-32 overflow-auto rounded bg-rose-500/5 p-2 text-[10px] leading-tight text-rose-700 dark:text-rose-300">
-                  {runResult.stderr}
-                </pre>
+              {runResult.truncated && (
+                <span className="rounded bg-amber-500/15 px-1.5 py-0.5 font-mono text-amber-700 dark:text-amber-300">
+                  truncated
+                </span>
               )}
+              <span className="font-mono text-muted-foreground">
+                {runResult.durationMs}ms
+              </span>
             </div>
-          )}
-          {detail.isLoading ? (
-            <div className="flex justify-center py-2">
-              <Spinner size={12} />
-            </div>
-          ) : detail.data?.content ? (
-            <pre className="max-h-64 overflow-auto rounded bg-muted/50 p-2 text-[10px] leading-tight">
-              {detail.data.content}
-            </pre>
-          ) : null}
-        </div>
-      )}
+            {runResult.stdout && (
+              <pre className="max-h-32 overflow-auto rounded bg-background/60 p-2 text-[10px] leading-tight">
+                {runResult.stdout}
+              </pre>
+            )}
+            {runResult.stderr && (
+              <pre className="max-h-32 overflow-auto rounded bg-rose-500/5 p-2 text-[10px] leading-tight text-rose-700 dark:text-rose-300">
+                {runResult.stderr}
+              </pre>
+            )}
+          </div>
+        )}
+      </div>
     </li>
   );
 }
 // Artifacts tab: managed files stored under <project>/artifacts/. The agent
 // puts reusable scripts here so the user can run them from a terminal.
-export function CodeArtifactsTab({ pid }: Props) {
+export function CodeArtifactsTab({ pid, onRunInTerminal, onEditArtifact }: Props) {
   const list = useSWR(pid ? ["artifacts", pid] : null, () => Artifacts.list(pid));
   const entries = list.data || [];
   return (
@@ -200,14 +338,15 @@ export function CodeArtifactsTab({ pid }: Props) {
             ? t("code_module.artifacts_count", { n: entries.length })
             : ""}
         </span>
-        <button
-          type="button"
-          onClick={() => void list.mutate()}
-          title="↻"
-          className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
-        >
-          {list.isLoading ? <Spinner size={12} /> : <RefreshCw className="size-3" />}
-        </button>
+        <Tip content="Recargar">
+          <button
+            type="button"
+            onClick={() => void list.mutate()}
+            className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+          >
+            {list.isLoading ? <Spinner size={12} /> : <RefreshCw className="size-3" />}
+          </button>
+        </Tip>
       </div>
       <div className="min-h-0 flex-1 overflow-y-auto px-3 pb-3">
         {entries.length === 0 ? (
@@ -220,6 +359,9 @@ export function CodeArtifactsTab({ pid }: Props) {
                 pid={pid}
                 entry={a}
                 onDeleted={() => void list.mutate()}
+                onRenamed={() => void list.mutate()}
+                onRunInTerminal={onRunInTerminal}
+                onEditArtifact={onEditArtifact}
               />
             ))}
           </ul>

package/src/interfaces/web/src/components/code/CodeChangesTab.tsx CHANGED Viewed

@@ -3,6 +3,7 @@ import { ChevronRight, FilePlus2, FilePen, FileX2, RefreshCw } from "lucide-reac
 import { cn } from "../../lib/cn";
 import { t } from "../../i18n";
 import { Empty, Spinner } from "../ui";
+import { Tip } from "../ui/tip";
 import { DiffView } from "./DiffView";
 import type { CodeChanges, CodeFileChange } from "../../lib/api/code";
@@ -60,14 +61,15 @@ export function CodeChangesTab({ changes, loading, onRefresh }: Props) {
         <span className="text-[11px] text-muted-foreground">
           {files.length > 0 ? t("code_module.changes_files", { n: files.length }) : ""}
         </span>
-        <button
-          type="button"
-          onClick={onRefresh}
-          title="↻"
-          className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
-        >
-          {loading ? <Spinner size={12} /> : <RefreshCw className="size-3" />}
-        </button>
+        <Tip content="Recargar">
+          <button
+            type="button"
+            onClick={onRefresh}
+            className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+          >
+            {loading ? <Spinner size={12} /> : <RefreshCw className="size-3" />}
+          </button>
+        </Tip>
       </div>
       <div className="min-h-0 flex-1 overflow-y-auto px-3 pb-3">
         {changes && !changes.git ? (

package/src/interfaces/web/src/components/code/CodeComposer.tsx CHANGED Viewed

@@ -2,6 +2,7 @@ import { Hammer, ClipboardList } from "lucide-react";
 import { cn } from "../../lib/cn";
 import { t } from "../../i18n";
 import { ChatInput } from "../ui/chat-input";
+import { Tip } from "../ui/tip";
 import { ModelPicker } from "../chat/ModelPicker";
 import type { CodeMode } from "../../lib/api/code";
@@ -29,22 +30,23 @@ function ModeToggle({
   disabled?: boolean;
 }) {
   const item = (m: CodeMode, label: string, hint: string, Icon: typeof Hammer) => (
-    <button
-      type="button"
-      disabled={disabled}
-      title={hint}
-      data-testid={`code-mode-${m}`}
-      aria-pressed={mode === m}
-      onClick={() => onChange(m)}
-      className={cn(
-        "flex items-center gap-1 rounded-md px-2 py-0.5 text-[11px] font-medium transition-colors disabled:opacity-50",
-        mode === m
-          ? "bg-background text-foreground shadow-sm"
-          : "text-muted-foreground hover:text-foreground",
-      )}
-    >
-      <Icon className="size-3" /> {label}
-    </button>
+    <Tip content={hint}>
+      <button
+        type="button"
+        disabled={disabled}
+        data-testid={`code-mode-${m}`}
+        aria-pressed={mode === m}
+        onClick={() => onChange(m)}
+        className={cn(
+          "flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium transition-colors disabled:opacity-50",
+          mode === m
+            ? "bg-background text-foreground shadow-sm"
+            : "text-muted-foreground hover:text-foreground",
+        )}
+      >
+        <Icon className="size-3.5" /> {label}
+      </button>
+    </Tip>
   );
   return (
     <div className="flex items-center gap-0.5 rounded-lg border border-border bg-muted/60 p-0.5">
@@ -75,7 +77,8 @@ export function CodeComposer({
       busy={busy}
       disabled={disabled}
       placeholder={t("code_module.placeholder")}
-      maxRows={12}
+      minRows={1}
+      maxRows={6}
       footer={
         <div className="flex items-center gap-2">
           <ModeToggle mode={mode} onChange={onModeChange} disabled={busy} />