[feat] Redesign the Files pane on /m with list view, writes and autosave editing

web/ee/.gitignore

@@ -36,5 +36,5 @@ next-env.d.ts
 
 
 
-# pdfjs worker copied into public/ at dev+build time (see ../oss/scripts/copy-pdf-worker.mjs)
+# pdfjs worker copied into public/ at dev+build time (see ../packages/agenta-entities/scripts/copy-pdf-worker.mjs)
 public/pdf.worker.min.mjs

web/ee/package.json

@@ -6,10 +6,10 @@
         "node": "24.x"
     },
     "scripts": {
-        "dev": "node ../oss/scripts/copy-pdf-worker.mjs public && next dev --turbopack",
-        "dev:local": "node ../oss/scripts/copy-pdf-worker.mjs public && ENV_FILE=.local.env next dev",
-        "dev:turbo": "node ../oss/scripts/copy-pdf-worker.mjs public && ENV_FILE=.local.env next dev --turbo",
-        "build": "node ../oss/scripts/copy-pdf-worker.mjs public && next build && cp -r public/. ./.next/standalone/ee/public && cp -r .next/static/. ./.next/standalone/ee/.next/static",
+        "dev": "node ../packages/agenta-entities/scripts/copy-pdf-worker.mjs public && next dev --turbopack",
+        "dev:local": "node ../packages/agenta-entities/scripts/copy-pdf-worker.mjs public && ENV_FILE=.local.env next dev",
+        "dev:turbo": "node ../packages/agenta-entities/scripts/copy-pdf-worker.mjs public && ENV_FILE=.local.env next dev --turbo",
+        "build": "node ../packages/agenta-entities/scripts/copy-pdf-worker.mjs public && next build && cp -r public/. ./.next/standalone/ee/public && cp -r .next/static/. ./.next/standalone/ee/.next/static",
         "start": "next start",
         "lint": "next lint",
         "lint-fix": "next lint --fix",

web/mobile/.gitignore

@@ -3,3 +3,5 @@
 tsconfig.tsbuildinfo
 # runtime config written by web/entrypoint.sh (dev mounts this dir from the host)
 public/__env.js
+# pdfjs worker copied into public/ at dev+build time (see ../packages/agenta-entities/scripts/copy-pdf-worker.mjs)
+public/pdf.worker.min.mjs

web/mobile/package.json

@@ -6,8 +6,8 @@
         "node": "24.x"
     },
     "scripts": {
-        "dev": "next dev",
-        "build": "next build && cp -r public/. .next/standalone/mobile/public && cp -r .next/static .next/standalone/mobile/.next",
+        "dev": "node ../packages/agenta-entities/scripts/copy-pdf-worker.mjs public && next dev",
+        "build": "node ../packages/agenta-entities/scripts/copy-pdf-worker.mjs public && next build && cp -r public/. .next/standalone/mobile/public && cp -r .next/static .next/standalone/mobile/.next",
         "start": "next start",
         "lint": "eslint src tests && pnpm run tokens:check",
         "lint:fix": "eslint src tests --fix",

web/mobile/src/features/agents/AgentDriveCard.tsx

@@ -1,46 +1,42 @@
-import {useMemo, useState} from "react"
+import {useMemo} from "react"
 
-import {AGENT_FILES_DIR, agentMountQueryFamily, useSessionDrive} from "@agenta/entities/drive"
+import {
+    AGENT_FILES_DIR,
+    agentMountQueryFamily,
+    cleanPath,
+    humanSize,
+    itemCountLabel,
+    nameOf,
+} from "@agenta/entities/drive"
 import {latestMountFilesQueryFamily, type MountFile} from "@agenta/entities/session"
-import {File, Folder} from "@phosphor-icons/react"
-import {useAtomValue} from "jotai"
-import dynamic from "next/dynamic"
+import {
+    DriveFolderGlyph,
+    DriveTypeMark,
+    driveQuickLookAtomFamily,
+    sessionFilesPaneOpenAtomFamily,
+} from "@agenta/entity-ui/drive"
+import {useAtomValue, useStore} from "jotai"
+
+import {useStartBlankSession} from "../chat/useStartBlankSession"
 
 import {AgentOverviewCard} from "./AgentOverviewCard"
 import {AgentOverviewCardRow} from "./AgentOverviewCardRow"
 import {AgentOverviewCardSkeleton} from "./states/AgentOverviewCardSkeleton"
 
-// The whole drive explorer, pulled in only once the drawer is actually opened.
-const FilesDrawer = dynamic(
-    () => import("@agenta/entity-ui/drive").then((mod) => mod.FilesDrawer),
-    {ssr: false},
-)
-
-const ICON = 14
-/** The card shows this many, newest first, and never more: the drawer is where the whole drive lives. */
+/** Newest first; the Files pane is where the whole drive lives. */
 const LIMIT = 5
 
-const formatSize = (bytes: number | null | undefined): string | null => {
-    if (bytes == null) return null
-    if (bytes < 1024) return `${bytes} B`
-    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
-    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
-}
-
 const fileDetail = (file: MountFile): string | null =>
     file.is_folder
         ? file.item_count != null
-            ? `${file.item_count} item${file.item_count === 1 ? "" : "s"}`
+            ? itemCountLabel(file.item_count)
             : null
-        : formatSize(file.size)
+        : humanSize(file.size) || null
 
-/**
- * The agent's OWN drive — the files it carries between runs, not a session's scratch mount. The
- * same mount and file queries the shared card reads, so this and the drawer share one cache.
- */
-export const AgentDriveCard = ({agentId}: {agentId: string}) => {
-    const [openPath, setOpenPath] = useState<string | null>(null)
-    const [open, setOpen] = useState(false)
+/** The agent's own drive. Opening a file starts a session with the docked pane on it. */
+export const AgentDriveCard = ({agentId, base}: {agentId: string; base: string}) => {
+    const store = useStore()
+    const startBlank = useStartBlankSession(base)
 
     const mountsAtom = useMemo(() => agentMountQueryFamily(agentId), [agentId])
     const mounts = useAtomValue(mountsAtom)
@@ -51,15 +47,15 @@ export const AgentDriveCard = ({agentId}: {agentId: string}) => {
         [mountId],
     )
     const files = useAtomValue(filesAtom)
-    // No session id: only the agent mount loads, and only once the drawer is open.
-    const drive = useSessionDrive("", open ? agentId : undefined)
 
     const rows: MountFile[] = files.data?.files ?? []
     const isPending = mounts.isPending || (Boolean(mountId) && files.isPending)
 
+    // Seed the pane's state before the route changes; both atoms are read on mount.
     const openDrive = (path: string | null) => {
-        setOpenPath(path)
-        setOpen(true)
+        const sessionId = startBlank(agentId)
+        store.set(sessionFilesPaneOpenAtomFamily(agentId), true)
+        if (path) store.set(driveQuickLookAtomFamily(sessionId), {path})
     }
 
     return (
@@ -80,32 +76,21 @@ export const AgentDriveCard = ({agentId}: {agentId: string}) => {
                 rows.map((file) => (
                     <AgentOverviewCardRow
                         key={file.path}
-                        icon={file.is_folder ? <Folder size={ICON} /> : <File size={ICON} />}
-                        label={file.path.split("/").filter(Boolean).pop() || file.path}
+                        icon={
+                            file.is_folder ? (
+                                <DriveFolderGlyph size={16} />
+                            ) : (
+                                <DriveTypeMark path={file.path} size="mini" />
+                            )
+                        }
+                        label={nameOf(cleanPath(file.path)) || file.path}
                         detail={fileDetail(file)}
                         title={file.path}
-                        // The drive folds the agent mount in under `agent-files/`.
                         onClick={() => openDrive(`${AGENT_FILES_DIR}/${file.path}`)}
                         className="py-1.5"
                     />
                 ))
             )}
-
-            {open ? (
-                <FilesDrawer
-                    open={open}
-                    onClose={() => {
-                        setOpen(false)
-                        setOpenPath(null)
-                    }}
-                    drive={drive}
-                    scope="app"
-                    initialPath={openPath}
-                    driveIds={
-                        mountId ? [{key: "mount", label: "Drive ID", value: mountId}] : undefined
-                    }
-                />
-            ) : null}
         </AgentOverviewCard>
     )
 }

web/mobile/src/features/agents/AgentOverviewBody.tsx

@@ -129,7 +129,7 @@ export const AgentOverviewBody = ({
                 // tap away in the session workspace.
                 <div className="hidden w-full flex-col gap-3.5 lg:flex">
                     <AgentConfigCard agentId={agentId} onEdit={onEditConfig} />
-                    <AgentDriveCard agentId={agentId} />
+                    <AgentDriveCard agentId={agentId} base={base} />
                     <AgentAutomationsCard agentId={agentId} agentNames={agentNames} base={base} />
                 </div>
             }

web/mobile/src/features/chat/AssistantMarkdown.tsx

@@ -1,6 +1,8 @@
 import {useTypewriter} from "@agenta/chat/hooks"
 import ChatMarkdown from "@agenta/chat/markdown"
 import {chatFileResolver} from "@agenta/entity-ui/drive"
+import {Check, Copy} from "lucide-react"
+import type {IconMap} from "streamdown"
 
 /**
  * Streamdown's built-in classes assume a 14–30px type scale; the mobile app's base is 12px.
@@ -12,23 +14,33 @@ import {chatFileResolver} from "@agenta/entity-ui/drive"
  * From `sm:` the prose steps up to the desktop app's 14px body (oss AgentChatSlice/markdown.tsx),
  * so a wide window reads at the same scale as /w instead of staying phone-sized.
  */
-const proseClassName = [
-    "w-full min-w-0 space-y-2 overflow-hidden text-xs wrap-anywhere sm:text-sm",
+export const proseClassName = [
+    // 20/22px leading, two over the size's own: prose that reads at length wants the air.
+    "w-full min-w-0 space-y-2 overflow-hidden text-xs leading-5 wrap-anywhere sm:text-sm sm:leading-[22px]",
     "[&_a]:text-primary [&_a]:font-medium [&_a]:underline",
-    "[&_p]:text-foreground [&_p]:text-xs sm:[&_p]:text-sm",
+    "[&_p]:text-foreground [&_p]:text-xs [&_p]:leading-5 sm:[&_p]:text-sm sm:[&_p]:leading-[22px]",
     "[&_:is(h1,h2,h3,h4,h5,h6)]:mt-3 [&_:is(h1,h2,h3,h4,h5,h6)]:mb-1",
     "[&_h1]:text-base [&_:is(h2,h3)]:text-sm [&_:is(h4,h5,h6)]:text-xs sm:[&_:is(h4,h5,h6)]:text-sm",
-    "[&_:is(ul,ol)]:my-1 [&_li]:py-0.5 [&_li]:text-xs sm:[&_li]:text-sm",
-    "[&_blockquote]:my-2 [&_blockquote]:text-xs sm:[&_blockquote]:text-sm [&_blockquote_p]:text-muted-foreground",
+    "[&_:is(ul,ol)]:my-1 [&_li]:py-0.5 [&_li]:text-xs [&_li]:leading-5 sm:[&_li]:text-sm sm:[&_li]:leading-[22px]",
+    "[&_blockquote]:my-2 [&_blockquote]:text-xs [&_blockquote]:leading-5 sm:[&_blockquote]:text-sm sm:[&_blockquote]:leading-[22px] [&_blockquote_p]:text-muted-foreground",
     "[&_hr]:my-3",
     "[&_code]:text-[0.95em]",
     "[&_:is(th,td)]:px-2 [&_:is(th,td)]:py-1 [&_:is(th,td)]:text-xs",
-    "[&_[data-streamdown=code-block]]:bg-muted [&_[data-streamdown=code-block]]:rounded-md",
-    "[&_[data-streamdown=code-block-actions]]:bg-muted",
-    "[&_[data-streamdown=code-block-body]]:bg-transparent [&_[data-streamdown=code-block-body]]:p-2 [&_[data-streamdown=code-block-body]]:text-xs",
+    // A fence as one surface: Streamdown ships three borders for one block.
+    "[&_[data-streamdown=code-block]]:my-2 [&_[data-streamdown=code-block]]:gap-0 [&_[data-streamdown=code-block]]:overflow-hidden [&_[data-streamdown=code-block]]:rounded-md [&_[data-streamdown=code-block]]:border-border [&_[data-streamdown=code-block]]:bg-muted [&_[data-streamdown=code-block]]:p-0",
+    "[&_[data-streamdown=code-block-header]]:h-7 [&_[data-streamdown=code-block-header]]:border-b [&_[data-streamdown=code-block-header]]:border-border [&_[data-streamdown=code-block-header]]:px-3 [&_[data-streamdown=code-block-header]]:text-[11px] [&_[data-streamdown=code-block-header]]:tracking-[0.02em] [&_[data-streamdown=code-block-header]_span]:ml-0",
+    // The actions' sticky frame is unlabelled: reach it as the header's sibling.
+    "[&_[data-streamdown=code-block-header]+div]:-mt-7 [&_[data-streamdown=code-block-header]+div]:h-7 [&_[data-streamdown=code-block-header]+div]:top-0 [&_[data-streamdown=code-block-header]+div]:pr-1.5",
+    "[&_[data-streamdown=code-block-actions]]:rounded-none [&_[data-streamdown=code-block-actions]]:border-0 [&_[data-streamdown=code-block-actions]]:bg-transparent [&_[data-streamdown=code-block-actions]]:p-0 [&_[data-streamdown=code-block-actions]]:backdrop-blur-none",
+    "[&_[data-streamdown=code-block-copy-button]]:flex [&_[data-streamdown=code-block-copy-button]]:size-[22px] [&_[data-streamdown=code-block-copy-button]]:items-center [&_[data-streamdown=code-block-copy-button]]:justify-center [&_[data-streamdown=code-block-copy-button]]:rounded [&_[data-streamdown=code-block-copy-button]]:p-0 [&_[data-streamdown=code-block-copy-button]]:hover:bg-accent",
+    "[&_[data-streamdown=code-block-body]]:rounded-none [&_[data-streamdown=code-block-body]]:border-0 [&_[data-streamdown=code-block-body]]:bg-transparent [&_[data-streamdown=code-block-body]]:px-3 [&_[data-streamdown=code-block-body]]:py-2.5 [&_[data-streamdown=code-block-body]]:text-xs [&_[data-streamdown=code-block-body]]:leading-[18px]",
     "[&_[data-streamdown=table-wrapper]]:bg-muted",
 ].join(" ")
 
+/** The app's own glyph set on the fence's copy control — Streamdown's default is a different
+ * icon family. Module scope: one identity across streamed tokens. */
+export const markdownIcons: Partial<IconMap> = {CopyIcon: Copy, CheckIcon: Check}
+
 /**
  * Assistant message text rendered as markdown through the shared `ChatMarkdown` renderer, so
  * mobile and desktop parse, highlight, and heal identically; only the token layer differs.
@@ -38,7 +50,7 @@ const proseClassName = [
  */
 /** A markdown link to a path, not to the web, opens the file in the Files pane (#6659). Module
  * scope so the renderer's resolver context keeps a stable identity across streamed tokens. */
-const useDriveLinkResolver = () => chatFileResolver
+export const useDriveLinkResolver = () => chatFileResolver
 
 export const AssistantMarkdown = ({
     streaming,
@@ -57,6 +69,7 @@ export const AssistantMarkdown = ({
             content={revealed}
             streaming={streaming || !settled}
             useLinkResolver={useDriveLinkResolver}
+            icons={markdownIcons}
         />
     )
 }

web/mobile/src/features/chat/DriveMarkdownRenderer.tsx

@@ -0,0 +1,15 @@
+import ChatMarkdown from "@agenta/chat/markdown"
+import type {DriveMarkdownProps} from "@agenta/entity-ui/drive"
+
+import {markdownIcons, proseClassName, useDriveLinkResolver} from "./AssistantMarkdown"
+
+/** The Files pane's markdown renderer on `/m`: the chat's own, registered once in `_app`. */
+export const DriveMarkdownRenderer = ({content, className}: DriveMarkdownProps) => (
+    <ChatMarkdown
+        content={content}
+        baseClassName={proseClassName}
+        className={className}
+        useLinkResolver={useDriveLinkResolver}
+        icons={markdownIcons}
+    />
+)

web/mobile/src/features/chat/SessionTabs.tsx

@@ -5,9 +5,9 @@ import {SessionTabRail, withShortcutKey} from "@agenta/sessions-ui"
 import {shortcutAria} from "@agenta/shared/utils"
 import {ShortcutKeys} from "@agenta/ui/shortcuts"
 import {Button, SimpleTooltip} from "@agenta/ui/ui"
+import {Folder, FolderOpen} from "@phosphor-icons/react"
 import {useQuery} from "@tanstack/react-query"
 import {useAtomValue} from "jotai"
-import {ChevronsLeft} from "lucide-react"
 import {useRouter} from "next/router"
 
 import {PageTitle} from "@/components/PageTitle"
@@ -56,7 +56,10 @@ export const SessionTabs = ({
     const startBlank = useStartBlankSession(base)
     const closeTabs = useSessionTabClose({agentId, sessionId, base})
     const configCollapsed = useAtomValue(configPanelCollapsedAtom)
-    const {open: filesOpen, openPane} = useSessionFilesPane(agentId ?? sessionId, sessionId)
+    const {open: filesOpen, toggle: toggleFiles} = useSessionFilesPane(
+        agentId ?? sessionId,
+        sessionId,
+    )
     // Key leads with `session-stream`: a rename patches by key PREFIX, so a nested key never
     // matches and the title lags. The singular GET redirects onto the web app, so POST it.
     const query = useQuery({
@@ -112,40 +115,45 @@ export const SessionTabs = ({
                     !chatMaximized && configCollapsed ? <ConfigRevealButton /> : undefined
                 }
                 extra={
-                    chatMaximized ? undefined : (
-                        <>
-                            <InspectSessionButton sessionId={sessionId} />
-                            {/* Same slot and order as the desktop bar: inspector, history, then
-                                the files opener at the right edge the pane expands from. */}
-                            <SessionHistoryMenu
-                                agentId={agentId}
-                                base={base}
-                                activeSessionId={sessionId}
-                            />
-                            {filesOpen ? null : (
-                                <SimpleTooltip
-                                    title={
-                                        <span className="flex items-center gap-1.5">
-                                            Show files{" "}
-                                            <ShortcutKeys id="panel.files" tone="inverse" />
-                                        </span>
-                                    }
-                                    side="left"
-                                >
-                                    <Button
-                                        variant="ghost"
-                                        size="icon-sm"
-                                        aria-label="Show files pane"
-                                        aria-keyshortcuts={shortcutAria("panel.files")}
-                                        onClick={openPane}
-                                        className="h-7 w-7 shrink-0 p-0"
-                                    >
-                                        <ChevronsLeft size={14} />
-                                    </Button>
-                                </SimpleTooltip>
-                            )}
-                        </>
-                    )
+                    <>
+                        {chatMaximized ? null : (
+                            <>
+                                <InspectSessionButton sessionId={sessionId} />
+                                <SessionHistoryMenu
+                                    agentId={agentId}
+                                    base={base}
+                                    activeSessionId={sessionId}
+                                />
+                            </>
+                        )}
+                        {/* Shows the state and flips it; hidden below md, where the pane never mounts. */}
+                        <SimpleTooltip
+                            title={
+                                <span className="flex items-center gap-1.5">
+                                    {filesOpen ? "Hide files" : "Show files"}{" "}
+                                    <ShortcutKeys id="panel.files" tone="inverse" />
+                                </span>
+                            }
+                        >
+                            <Button
+                                variant="ghost"
+                                size="icon-sm"
+                                aria-label={filesOpen ? "Hide files pane" : "Show files pane"}
+                                aria-pressed={filesOpen}
+                                aria-keyshortcuts={shortcutAria("panel.files")}
+                                onClick={toggleFiles}
+                                // The glyph's weight carries the state; no colour shift on top.
+                                className="h-7 w-7 shrink-0 p-0 max-md:hidden"
+                            >
+                                {/* A folder says "files" where a panel glyph wouldn't; open = pane shown. */}
+                                {filesOpen ? (
+                                    <FolderOpen size={14} weight="fill" />
+                                ) : (
+                                    <Folder size={14} />
+                                )}
+                            </Button>
+                        </SimpleTooltip>
+                    </>
                 }
             />
         </>