npm - @agentprojectcontext/apx - Versions diffs - 1.57.0 → 1.58.0 - Mend

@agentprojectcontext/apx 1.57.0 → 1.58.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 (47) hide show

package/package.json +1 -1
package/src/core/apc/paths.js +7 -0
package/src/core/stores/organization.js +152 -0
package/src/core/stores/project-files.js +199 -0
package/src/core/stores/tasks.js +36 -3
package/src/host/daemon/api/agents.js +22 -2
package/src/host/daemon/api/files-project.js +99 -0
package/src/host/daemon/api/organization.js +88 -0
package/src/host/daemon/api/shared.js +7 -0
package/src/host/daemon/api/tasks.js +14 -0
package/src/host/daemon/api.js +4 -0
package/src/interfaces/cli/commands/org.js +77 -0
package/src/interfaces/cli/index.js +48 -0
package/src/interfaces/web/dist/assets/index-Cl0WXtxF.css +1 -0
package/src/interfaces/web/dist/assets/index-DPAuXATr.js +705 -0
package/src/interfaces/web/dist/assets/index-DPAuXATr.js.map +1 -0
package/src/interfaces/web/dist/index.html +2 -2
package/src/interfaces/web/src/components/agents/AgentFormFields.tsx +123 -0
package/src/interfaces/web/src/components/common/ConfirmDialog.tsx +51 -0
package/src/interfaces/web/src/components/files/FileBrowser.tsx +138 -0
package/src/interfaces/web/src/components/files/FileTree.tsx +133 -0
package/src/interfaces/web/src/components/files/FileViewer.tsx +167 -0
package/src/interfaces/web/src/components/files/MarkdownEditor.tsx +48 -0
package/src/interfaces/web/src/components/files/MarkdownPreview.tsx +146 -0
package/src/interfaces/web/src/components/files/NewFileDialog.tsx +66 -0
package/src/interfaces/web/src/components/structure/StructureDialogs.tsx +172 -0
package/src/interfaces/web/src/components/tasks/TaskDetailPanel.tsx +142 -0
package/src/interfaces/web/src/components/tasks/taskStatus.tsx +57 -0
package/src/interfaces/web/src/i18n/en.ts +104 -0
package/src/interfaces/web/src/i18n/es.ts +104 -0
package/src/interfaces/web/src/lib/api/organization.ts +18 -0
package/src/interfaces/web/src/lib/api/projectFiles.ts +19 -0
package/src/interfaces/web/src/lib/api/tasks.ts +16 -1
package/src/interfaces/web/src/lib/api.ts +2 -0
package/src/interfaces/web/src/lib/slug.ts +11 -0
package/src/interfaces/web/src/screens/ProjectScreen.tsx +21 -2
package/src/interfaces/web/src/screens/project/AgentDetailScreen.tsx +31 -11
package/src/interfaces/web/src/screens/project/AgentsTab.tsx +24 -7
package/src/interfaces/web/src/screens/project/DocsTab.tsx +13 -0
package/src/interfaces/web/src/screens/project/FilesTab.tsx +12 -0
package/src/interfaces/web/src/screens/project/Overview.tsx +122 -10
package/src/interfaces/web/src/screens/project/StructureTab.tsx +147 -0
package/src/interfaces/web/src/screens/project/TasksTab.tsx +101 -62
package/src/interfaces/web/src/types/daemon.ts +63 -0
package/src/interfaces/web/dist/assets/index-CEI8DfVg.css +0 -1
package/src/interfaces/web/dist/assets/index-DJ-ocXOR.js +0 -651
package/src/interfaces/web/dist/assets/index-DJ-ocXOR.js.map +0 -1

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-DJ-ocXOR.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-CEI8DfVg.css">
+    <script type="module" crossorigin src="/assets/index-DPAuXATr.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-Cl0WXtxF.css">
   </head>
   <body class="bg-background text-foreground antialiased">
     <div id="root"></div>

package/src/interfaces/web/src/components/agents/AgentFormFields.tsx ADDED Viewed

@@ -0,0 +1,123 @@
+import { useState } from "react";
+import useSWR from "swr";
+import { Plus } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { Field, Input } from "../ui";
+import { UiSelect } from "../UiSelect";
+import { Org } from "../../lib/api/organization";
+import { t } from "../../i18n";
+import type { AgentAutonomy } from "../../types/daemon";
+import { AreaDialog, RoleDialog } from "../structure/StructureDialogs";
+// ── Emoji ────────────────────────────────────────────────────────────────────
+export function EmojiInput({ value, onChange }: { value: string; onChange: (v: string) => void }) {
+  return (
+    <Input
+      value={value}
+      onChange={(e) => onChange([...e.target.value].slice(-2).join(""))}
+      className="text-center text-lg"
+      placeholder="🤖"
+      aria-label={t("agents_form.emoji")}
+    />
+  );
+}
+// ── Autonomy (permission mode) segmented control ─────────────────────────────
+const AUTONOMY_OPTIONS: { value: AgentAutonomy; labelKey: "auto_total" | "auto_automatico" | "auto_permiso" }[] = [
+  { value: "total", labelKey: "auto_total" },
+  { value: "automatico", labelKey: "auto_automatico" },
+  { value: "permiso", labelKey: "auto_permiso" },
+];
+export function AutonomyPicker({ value, onChange }: { value: string; onChange: (v: AgentAutonomy) => void }) {
+  return (
+    <div className="inline-flex w-full rounded-lg border border-border p-0.5">
+      {AUTONOMY_OPTIONS.map((opt) => (
+        <button
+          key={opt.value}
+          type="button"
+          onClick={() => onChange(opt.value)}
+          className={cn(
+            "flex-1 rounded-md px-2 py-1 text-[12px] font-medium capitalize transition-colors",
+            value === opt.value ? "bg-primary/15 text-foreground" : "text-muted-foreground hover:text-foreground",
+          )}
+        >
+          {t(`agents_form.${opt.labelKey}`)}
+        </button>
+      ))}
+    </div>
+  );
+}
+// ── Area + Role selects (fed by the project org structure) ──────────────────
+// Quick-create area/role via floating dialogs (Panda's "org quick actions"),
+// keeping the picker simple. On create we refetch and auto-select the new item.
+export function AreaRoleFields({
+  pid, area, role, onArea, onRole,
+}: {
+  pid: string;
+  area: string;
+  role: string;
+  onArea: (v: string) => void;
+  onRole: (v: string) => void;
+}) {
+  const org = useSWR(`/projects/${pid}/organization`, () => Org.get(pid));
+  const [areaDialog, setAreaDialog] = useState(false);
+  const [roleDialog, setRoleDialog] = useState(false);
+  const areas = org.data?.areas ?? [];
+  const roles = org.data?.roles ?? [];
+  // Roles offered: those in the selected area, plus general (no-area) roles.
+  const roleChoices = roles.filter((r) => (area ? r.area === area || r.area === null : true));
+  const areaOptions = [{ value: "", label: t("structure.no_area") }, ...areas.map((a) => ({ value: a.slug, label: a.name }))];
+  const roleOptions = [{ value: "", label: t("agents_form.no_role") }, ...roleChoices.map((r) => ({ value: r.slug, label: r.name }))];
+  return (
+    <div className="space-y-3">
+      <div className="grid grid-cols-2 gap-3">
+        <Field label={t("agents_form.area")}>
+          <div className="flex items-center gap-1">
+            <UiSelect value={area} onChange={(v) => { onArea(v); }} options={areaOptions} placeholder={t("structure.no_area")} className="flex-1" />
+            <QuickAdd label={t("structure.new_area")} onClick={() => setAreaDialog(true)} />
+          </div>
+        </Field>
+        <Field label={t("agents_form.role")}>
+          <div className="flex items-center gap-1">
+            <UiSelect value={role} onChange={onRole} options={roleOptions} placeholder={t("agents_form.no_role")} className="flex-1" />
+            <QuickAdd label={t("structure.new_role")} onClick={() => setRoleDialog(true)} />
+          </div>
+        </Field>
+      </div>
+      <AreaDialog
+        open={areaDialog}
+        onClose={() => setAreaDialog(false)}
+        pid={pid}
+        onSaved={() => void org.mutate()}
+      />
+      <RoleDialog
+        open={roleDialog}
+        onClose={() => setRoleDialog(false)}
+        pid={pid}
+        areas={areas}
+        presetArea={area || null}
+        onSaved={() => void org.mutate()}
+      />
+    </div>
+  );
+}
+function QuickAdd({ label, onClick }: { label: string; onClick: () => void }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      title={label}
+      aria-label={label}
+      className="flex size-9 shrink-0 items-center justify-center rounded-lg border border-border text-muted-foreground hover:bg-accent hover:text-foreground"
+    >
+      <Plus className="size-4" />
+    </button>
+  );
+}

package/src/interfaces/web/src/components/common/ConfirmDialog.tsx ADDED Viewed

@@ -0,0 +1,51 @@
+import { useState } from "react";
+import { Dialog, Button } from "../ui";
+import { t } from "../../i18n";
+// Reusable confirm dialog for destructive/executing actions (project rule:
+// never native confirm()). Shows a loading state while the action runs.
+export function ConfirmDialog({
+  open,
+  onClose,
+  onConfirm,
+  title,
+  description,
+  confirmLabel,
+  destructive = true,
+}: {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => Promise<void> | void;
+  title: string;
+  description?: string;
+  confirmLabel?: string;
+  destructive?: boolean;
+}) {
+  const [busy, setBusy] = useState(false);
+  const run = async () => {
+    setBusy(true);
+    try {
+      await onConfirm();
+      onClose();
+    } finally {
+      setBusy(false);
+    }
+  };
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      title={title}
+      footer={
+        <>
+          <Button variant="ghost" onClick={onClose} disabled={busy}>{t("common.cancel")}</Button>
+          <Button variant={destructive ? "destructive" : "primary"} onClick={() => void run()} loading={busy}>
+            {confirmLabel ?? t("common.confirm")}
+          </Button>
+        </>
+      }
+    >
+      <p className="text-sm text-muted-foreground">{description}</p>
+    </Dialog>
+  );
+}

package/src/interfaces/web/src/components/files/FileBrowser.tsx ADDED Viewed

@@ -0,0 +1,138 @@
+import { useState } from "react";
+import useSWR from "swr";
+import { RefreshCw, FilePlus2, FolderOpen } from "lucide-react";
+import { ProjectFiles, type FileScope } from "../../lib/api/projectFiles";
+import type { FileNode, FileContent } from "../../types/daemon";
+import { Spinner, Button, Empty } from "../ui";
+import { useToast } from "../Toast";
+import { t } from "../../i18n";
+import { FileTree } from "./FileTree";
+import { FileViewer } from "./FileViewer";
+import { NewFileDialog } from "./NewFileDialog";
+// Shared file browser used by both /files (scope=project) and /docs
+// (scope=docs). One component, two roots — the docs surface is just the same
+// browser with `editable` on and a "new document" affordance.
+export function FileBrowser({
+  pid,
+  scope,
+  editable = false,
+  emptyHint,
+}: {
+  pid: string;
+  scope: FileScope;
+  /** Allow editing text/markdown + creating/deleting files (docs surface). */
+  editable?: boolean;
+  emptyHint?: string;
+}) {
+  const toast = useToast();
+  const [selected, setSelected] = useState<string | null>(null);
+  const [newOpen, setNewOpen] = useState(false);
+  const treeKey = `/projects/${pid}/fs/tree?scope=${scope}`;
+  const tree = useSWR(treeKey, () => ProjectFiles.tree(pid, scope));
+  const fileKey = selected ? `/projects/${pid}/fs/file?scope=${scope}&path=${selected}` : null;
+  const file = useSWR<FileContent | null>(fileKey, () => (selected ? ProjectFiles.read(pid, selected, scope) : null));
+  const onSelect = (node: FileNode) => setSelected(node.path);
+  const onSave = editable
+    ? async (content: string) => {
+        if (!selected) return;
+        await ProjectFiles.write(pid, selected, content, scope);
+        toast.success(t("files.saved"));
+        void file.mutate();
+      }
+    : undefined;
+  const onDelete = editable
+    ? async (node: FileNode) => {
+        await ProjectFiles.remove(pid, node.path, scope);
+        if (selected === node.path) setSelected(null);
+        toast.success(t("files.deleted"));
+        void tree.mutate();
+      }
+    : undefined;
+  const onCreated = (path: string) => {
+    setNewOpen(false);
+    setSelected(path);
+    void tree.mutate();
+  };
+  const nodes = tree.data?.tree ?? [];
+  const isEmpty = !tree.isLoading && nodes.length === 0;
+  return (
+    <div className="flex h-full min-h-0 overflow-hidden rounded-xl border border-border bg-card">
+      {/* Sidebar: tree */}
+      <div className="flex w-64 shrink-0 flex-col border-r border-border">
+        <div className="flex shrink-0 items-center gap-2 border-b border-border px-3 py-2">
+          <FolderOpen className="size-4 text-muted-foreground" />
+          <span className="flex-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+            {scope === "docs" ? t("files.docs_label") : t("files.files_label")}
+          </span>
+          {editable && (
+            <button
+              type="button"
+              data-testid="docs-new"
+              onClick={() => setNewOpen(true)}
+              className="text-muted-foreground hover:text-foreground"
+              aria-label={t("files.new_doc")}
+              title={t("files.new_doc")}
+            >
+              <FilePlus2 className="size-4" />
+            </button>
+          )}
+          <button
+            type="button"
+            onClick={() => void tree.mutate()}
+            className="text-muted-foreground hover:text-foreground"
+            aria-label={t("common.refresh")}
+          >
+            <RefreshCw className={tree.isValidating ? "size-3.5 animate-spin" : "size-3.5"} />
+          </button>
+        </div>
+        <div className="min-h-0 flex-1 overflow-y-auto p-1.5">
+          {tree.isLoading ? (
+            <div className="flex justify-center py-6"><Spinner size={14} /></div>
+          ) : isEmpty ? (
+            <div className="p-3">
+              <Empty>
+                <div className="space-y-2">
+                  <p>{emptyHint ?? t("files.empty")}</p>
+                  {editable && (
+                    <Button size="sm" variant="secondary" onClick={() => setNewOpen(true)}>
+                      <FilePlus2 className="size-3.5" />{t("files.new_doc")}
+                    </Button>
+                  )}
+                </div>
+              </Empty>
+            </div>
+          ) : (
+            <FileTree nodes={nodes} selectedPath={selected} onSelect={onSelect} onDelete={onDelete} />
+          )}
+          {tree.data?.truncated && (
+            <p className="px-2 py-1 text-[10px] text-muted-foreground/60">{t("files.truncated")}</p>
+          )}
+        </div>
+      </div>
+      {/* Main: viewer */}
+      <div className="flex min-w-0 flex-1 flex-col">
+        <FileViewer file={file.data ?? null} loading={!!fileKey && file.isLoading} onSave={onSave} />
+      </div>
+      {editable && (
+        <NewFileDialog
+          open={newOpen}
+          onClose={() => setNewOpen(false)}
+          pid={pid}
+          scope={scope}
+          onCreated={onCreated}
+        />
+      )}
+    </div>
+  );
+}

package/src/interfaces/web/src/components/files/FileTree.tsx ADDED Viewed

@@ -0,0 +1,133 @@
+import { useState, useEffect } from "react";
+import {
+  ChevronRight, ChevronDown, Folder, FolderOpen,
+  FileText, FileCode, Image as ImageIcon, File, Trash2,
+} from "lucide-react";
+import { cn } from "../../lib/cn";
+import type { FileNode, FileKind } from "../../types/daemon";
+function kindIcon(kind?: FileKind) {
+  switch (kind) {
+    case "markdown": return { Icon: FileText, color: "text-sky-500" };
+    case "text": return { Icon: FileCode, color: "text-amber-500" };
+    case "image": return { Icon: ImageIcon, color: "text-pink-500" };
+    default: return { Icon: File, color: "text-muted-foreground" };
+  }
+}
+// Ancestor dir paths of a file path, so the tree can auto-expand to a selection.
+function ancestors(path: string): string[] {
+  const parts = path.split("/");
+  const out: string[] = [];
+  for (let i = 1; i < parts.length; i++) out.push(parts.slice(0, i).join("/"));
+  return out;
+}
+function Row({
+  node, depth, selectedPath, expanded, toggle, onSelect, onDelete,
+}: {
+  node: FileNode;
+  depth: number;
+  selectedPath: string | null;
+  expanded: Set<string>;
+  toggle: (p: string) => void;
+  onSelect: (node: FileNode) => void;
+  onDelete?: (node: FileNode) => void;
+}) {
+  const isDir = node.type === "dir";
+  const open = expanded.has(node.path);
+  const selected = selectedPath === node.path;
+  const { Icon, color } = isDir
+    ? { Icon: open ? FolderOpen : Folder, color: "text-muted-foreground" }
+    : kindIcon(node.kind);
+  return (
+    <div>
+      <div
+        className={cn(
+          "group flex items-center gap-1 rounded px-1.5 py-1 text-[13px] cursor-pointer",
+          selected ? "bg-primary/15 text-foreground" : "hover:bg-accent/40 text-foreground/80",
+        )}
+        style={{ paddingLeft: depth * 12 + 6 }}
+        onClick={() => (isDir ? toggle(node.path) : onSelect(node))}
+      >
+        {isDir ? (
+          open ? <ChevronDown className="size-3.5 shrink-0 text-muted-foreground" />
+               : <ChevronRight className="size-3.5 shrink-0 text-muted-foreground" />
+        ) : (
+          <span className="w-3.5 shrink-0" />
+        )}
+        <Icon className={cn("size-3.5 shrink-0", color)} />
+        <span className="min-w-0 flex-1 truncate">{node.name}</span>
+        {onDelete && !isDir && (
+          <button
+            type="button"
+            onClick={(e) => { e.stopPropagation(); onDelete(node); }}
+            className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-red-500"
+            aria-label={`delete ${node.name}`}
+          >
+            <Trash2 className="size-3.5" />
+          </button>
+        )}
+      </div>
+      {isDir && open && node.children?.map((child) => (
+        <Row
+          key={child.path}
+          node={child}
+          depth={depth + 1}
+          selectedPath={selectedPath}
+          expanded={expanded}
+          toggle={toggle}
+          onSelect={onSelect}
+          onDelete={onDelete}
+        />
+      ))}
+    </div>
+  );
+}
+export function FileTree({
+  nodes, selectedPath, onSelect, onDelete, className,
+}: {
+  nodes: FileNode[];
+  selectedPath: string | null;
+  onSelect: (node: FileNode) => void;
+  onDelete?: (node: FileNode) => void;
+  className?: string;
+}) {
+  const [expanded, setExpanded] = useState<Set<string>>(() => new Set());
+  // Auto-expand ancestors of the current selection so it's always visible.
+  useEffect(() => {
+    if (!selectedPath) return;
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      for (const a of ancestors(selectedPath)) next.add(a);
+      return next;
+    });
+  }, [selectedPath]);
+  const toggle = (p: string) =>
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      next.has(p) ? next.delete(p) : next.add(p);
+      return next;
+    });
+  return (
+    <div className={cn("select-none", className)}>
+      {nodes.map((node) => (
+        <Row
+          key={node.path}
+          node={node}
+          depth={0}
+          selectedPath={selectedPath}
+          expanded={expanded}
+          toggle={toggle}
+          onSelect={onSelect}
+          onDelete={onDelete}
+        />
+      ))}
+    </div>
+  );
+}

package/src/interfaces/web/src/components/files/FileViewer.tsx ADDED Viewed

@@ -0,0 +1,167 @@
+import { useEffect, useState } from "react";
+import { Save, RotateCcw, Pencil, Eye, Columns2, FileQuestion, Download } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { Spinner } from "../ui";
+import { t } from "../../i18n";
+import type { FileContent } from "../../types/daemon";
+import { MarkdownPreview } from "./MarkdownPreview";
+import { MarkdownEditor } from "./MarkdownEditor";
+function ToolbarButton({
+  onClick, active, disabled, children,
+}: { onClick: () => void; active?: boolean; disabled?: boolean; children: React.ReactNode }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      className={cn(
+        "inline-flex items-center gap-1 rounded px-2 py-0.5 text-[11px] font-medium transition-colors disabled:opacity-40",
+        active ? "bg-primary/15 text-foreground" : "text-muted-foreground hover:bg-accent hover:text-foreground",
+      )}
+    >
+      {children}
+    </button>
+  );
+}
+function CodeView({ content }: { content: string }) {
+  return (
+    <div className="min-h-0 flex-1 overflow-auto">
+      <table className="w-full border-collapse font-mono text-[12px] leading-[1.6]">
+        <tbody>
+          {content.split("\n").map((line, i) => (
+            <tr key={i} className="hover:bg-accent/20">
+              <td className="w-12 select-none border-r border-border/30 px-3 text-right align-top text-[10px] text-muted-foreground/40" aria-hidden="true">
+                {i + 1}
+              </td>
+              <td className="whitespace-pre px-4 align-top text-foreground/90">{line || " "}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+// Type-aware file view/editor. Markdown gets a preview + optional split editor;
+// text/code get a line-numbered view + optional textarea; images render inline;
+// binaries show metadata only. `onSave` (docs, editable text) turns on editing.
+export function FileViewer({
+  file, loading, onSave,
+}: {
+  file: FileContent | null;
+  loading?: boolean;
+  onSave?: (content: string) => Promise<void> | void;
+}) {
+  const editable = typeof onSave === "function";
+  const [draft, setDraft] = useState("");
+  const [editing, setEditing] = useState(false);
+  const [showPreview, setShowPreview] = useState(true);
+  const [saving, setSaving] = useState(false);
+  // Reset local state whenever a different file loads.
+  useEffect(() => {
+    setDraft(file?.content ?? "");
+    setEditing(false);
+    setShowPreview(true);
+  }, [file?.path, file?.content]);
+  if (loading) {
+    return <div className="flex flex-1 items-center justify-center"><Spinner size={16} /></div>;
+  }
+  if (!file) {
+    return (
+      <div className="flex flex-1 items-center justify-center text-sm text-muted-foreground">
+        {t("files.select_prompt")}
+      </div>
+    );
+  }
+  const isMarkdown = file.kind === "markdown";
+  const isText = file.kind === "text" || file.kind === "markdown";
+  const dirty = editing && draft !== (file.content ?? "");
+  const save = async () => {
+    if (!onSave || !dirty) return;
+    setSaving(true);
+    try {
+      await onSave(draft);
+      setEditing(false);
+    } finally {
+      setSaving(false);
+    }
+  };
+  return (
+    <div className="flex h-full min-h-0 flex-col bg-card/40" data-testid="file-viewer">
+      {/* Header / toolbar */}
+      <div className="flex shrink-0 items-center gap-2 border-b border-border px-3 py-1.5">
+        <span className="min-w-0 flex-1 truncate font-mono text-[11px] text-muted-foreground">
+          {file.path}
+          {dirty && <span className="ml-1 text-amber-400">•</span>}
+        </span>
+        {isMarkdown && editing && (
+          <ToolbarButton onClick={() => setShowPreview((v) => !v)} active={showPreview}>
+            <Columns2 className="size-3" />{t("files.preview")}
+          </ToolbarButton>
+        )}
+        {editable && isText && (
+          editing ? (
+            <>
+              <ToolbarButton onClick={() => { setDraft(file.content ?? ""); setEditing(false); }} disabled={saving}>
+                <RotateCcw className="size-3" />{t("files.discard")}
+              </ToolbarButton>
+              <ToolbarButton onClick={() => void save()} disabled={!dirty || saving} active={dirty}>
+                {saving ? <Spinner size={10} /> : <Save className="size-3" />}{t("files.save")}
+              </ToolbarButton>
+            </>
+          ) : (
+            <ToolbarButton onClick={() => setEditing(true)}>
+              <Pencil className="size-3" />{t("files.edit")}
+            </ToolbarButton>
+          )
+        )}
+      </div>
+      {/* Body */}
+      {isMarkdown ? (
+        editing ? (
+          <MarkdownEditor value={draft} onChange={setDraft} showPreview={showPreview} onSave={() => void save()} />
+        ) : (
+          <div className="min-h-0 flex-1 overflow-y-auto p-4"><MarkdownPreview content={file.content ?? ""} /></div>
+        )
+      ) : file.kind === "text" ? (
+        editing ? (
+          <textarea
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+            onKeyDown={(e) => { if ((e.metaKey || e.ctrlKey) && e.key === "s") { e.preventDefault(); void save(); } }}
+            spellCheck={false}
+            className="min-h-0 flex-1 resize-none bg-transparent p-4 font-mono text-[12px] leading-[1.6] text-foreground/90 outline-none"
+          />
+        ) : (
+          <CodeView content={file.content ?? ""} />
+        )
+      ) : file.kind === "image" && file.encoding === "base64" ? (
+        <div className="flex min-h-0 flex-1 items-center justify-center overflow-auto p-4">
+          <img
+            src={`data:${file.mime};base64,${file.content}`}
+            alt={file.name}
+            className="max-h-full max-w-full rounded object-contain"
+          />
+        </div>
+      ) : (
+        <div className="flex flex-1 flex-col items-center justify-center gap-2 text-sm text-muted-foreground">
+          <FileQuestion className="size-8 opacity-50" />
+          <span>{file.too_large ? t("files.too_large") : t("files.no_preview")}</span>
+          <span className="flex items-center gap-1 text-xs opacity-70">
+            <Download className="size-3" />{(file.size / 1024).toFixed(1)} KB
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/interfaces/web/src/components/files/MarkdownEditor.tsx ADDED Viewed

@@ -0,0 +1,48 @@
+import { cn } from "../../lib/cn";
+import { MarkdownPreview } from "./MarkdownPreview";
+// A plain-textarea markdown editor with an optional live side-by-side preview.
+// Deliberately not a heavyweight editor (Monaco/CodeMirror) — a styled textarea
+// is fast, dependency-free, and enough for docs/specs. The parent owns the
+// toolbar (save / preview toggle) and passes `showPreview`.
+export function MarkdownEditor({
+  value,
+  onChange,
+  showPreview = false,
+  placeholder,
+  onSave,
+  className,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  showPreview?: boolean;
+  placeholder?: string;
+  onSave?: () => void;
+  className?: string;
+}) {
+  return (
+    <div className={cn("flex min-h-0 flex-1", className)}>
+      <textarea
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onKeyDown={(e) => {
+          if (onSave && (e.metaKey || e.ctrlKey) && e.key === "s") {
+            e.preventDefault();
+            onSave();
+          }
+        }}
+        placeholder={placeholder}
+        spellCheck={false}
+        className={cn(
+          "min-h-0 resize-none bg-transparent p-4 font-mono text-[13px] leading-[1.7] text-foreground/90 outline-none",
+          showPreview ? "w-1/2 border-r border-border" : "w-full",
+        )}
+      />
+      {showPreview && (
+        <div className="min-h-0 w-1/2 overflow-y-auto p-4">
+          <MarkdownPreview content={value} />
+        </div>
+      )}
+    </div>
+  );
+}