@agimon-ai/doompi-file-edit 0.0.1-alpha.65 → 0.0.1-alpha.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agimon-ai/doompi-file-edit",
-  "version": "0.0.1-alpha.65",
+  "version": "0.0.1-alpha.68",
   "description": "Pi extension for session-scoped file-change timelines and external editor workflows.",
   "keywords": [
     "ai",
@@ -32,7 +32,8 @@
     "src/types/domain.ts",
     "src/types/webFiles.ts",
     "src/types/fileEditsApi.ts",
-    "LICENSE"
+    "LICENSE",
+    "!src/web/**/*.stories.tsx"
   ],
   "type": "module",
   "main": "./dist/index.cjs",
@@ -70,13 +71,13 @@
     "cross-spawn": "7.0.6",
     "hono": "4.13.5",
     "ignore": "7.0.8",
-    "@agimon-ai/doompi-config": "0.0.1-alpha.64",
-    "@agimon-ai/doompi-telemetry": "0.0.1-alpha.63",
-    "@agimon-ai/doompi-extension-contracts": "0.0.1-alpha.64",
-    "@agimon-ai/doompi-ui": "0.0.1-alpha.65",
-    "@agimon-ai/doompi-web-components": "0.0.1-alpha.24",
-    "@agimon-ai/doompi-web-contracts": "0.0.1-alpha.27",
-    "@agimon-ai/doompi-web-security": "0.0.1-alpha.26"
+    "@agimon-ai/doompi-config": "0.0.1-alpha.67",
+    "@agimon-ai/doompi-extension-contracts": "0.0.1-alpha.67",
+    "@agimon-ai/doompi-telemetry": "0.0.1-alpha.66",
+    "@agimon-ai/doompi-ui": "0.0.1-alpha.68",
+    "@agimon-ai/doompi-web-components": "0.0.1-alpha.27",
+    "@agimon-ai/doompi-web-contracts": "0.0.1-alpha.30",
+    "@agimon-ai/doompi-web-security": "0.0.1-alpha.29"
   },
   "devDependencies": {
     "@earendil-works/pi-coding-agent": "0.85.1",

package/src/web/components/CommentDraft.tsx

@@ -29,8 +29,8 @@ export function CommentDraft({ snippet, startLine, endLine, onSubmit, onCancel }
 
   return (
     <div data-testid="files-comment-draft" className="flex flex-col gap-1.5 border-t border-doom-border p-2">
-      <p className="text-[9px] text-doom-faint">{range}</p>
-      <pre className="max-h-24 overflow-y-auto whitespace-pre-wrap break-words rounded border border-doom-border-soft bg-doom-deep p-1.5 font-mono text-[10px] text-doom-dim">
+      <p className="text-2xs text-doom-faint">{range}</p>
+      <pre className="max-h-24 overflow-y-auto whitespace-pre-wrap break-words rounded border border-doom-border-soft bg-doom-deep p-1.5 font-mono text-xs text-doom-dim">
         {trimSnippet(snippet, 8, 600)}
       </pre>
       <Textarea
@@ -46,7 +46,7 @@ export function CommentDraft({ snippet, startLine, endLine, onSubmit, onCancel }
           event.preventDefault();
           if (body.trim() !== '') onSubmit(body);
         }}
-        className="text-[11px]"
+        className="text-sm"
       />
       <div className="flex items-center gap-1.5">
         <Button
@@ -55,14 +55,14 @@ export function CommentDraft({ snippet, startLine, endLine, onSubmit, onCancel }
           data-testid="files-comment-add"
           disabled={body.trim() === ''}
           onClick={() => onSubmit(body)}
-          className="text-[9px]"
+          className="text-2xs"
         >
           add comment
         </Button>
-        <Button variant="ghost" size="xs" data-testid="files-comment-cancel" onClick={onCancel} className="text-[9px]">
+        <Button variant="ghost" size="xs" data-testid="files-comment-cancel" onClick={onCancel} className="text-2xs">
           cancel
         </Button>
-        <span className="text-[9px] text-doom-faint">⌘⏎ to add</span>
+        <span className="text-2xs text-doom-faint">⌘⏎ to add</span>
       </div>
     </div>
   );

package/src/web/components/DiffView.tsx

@@ -49,7 +49,7 @@ export function DiffView({ hunks, testId, onSelect }: DiffViewProps) {
 
   if (hunks.length === 0) {
     return (
-      <p data-testid={`${testId}-empty`} className="px-2 py-1 text-[10px] text-doom-faint">
+      <p data-testid={`${testId}-empty`} className="px-2 py-1 text-xs text-doom-faint">
         no lines changed
       </p>
     );
@@ -60,12 +60,12 @@ export function DiffView({ hunks, testId, onSelect }: DiffViewProps) {
       data-testid={testId}
       data-diff-surface={testId}
       onMouseUp={handleSelect}
-      className="overflow-x-auto font-mono text-[11px] leading-[1.5]"
+      className="overflow-x-auto font-mono text-sm leading-normal"
     >
       {hunks.map((hunk, position) => (
         <div key={`${hunk.start}-${position}`}>
           {position > 0 ? (
-            <div className="flex items-center gap-2 px-2 py-0.5 text-[9px] text-doom-faint">
+            <div className="flex items-center gap-2 px-2 py-0.5 text-2xs text-doom-faint">
               <span className="h-px flex-1 bg-doom-border-soft" />
               <span>⋯</span>
               <span className="h-px flex-1 bg-doom-border-soft" />

package/src/web/components/FilePanel.tsx

@@ -193,12 +193,12 @@ export function FilePanel({ filePath, relPath, sessionId, sendSessionFrame, clos
         {/* Edit is not one of the header's two toggles, so with neither lit the
             mode needs saying; picking either toggle leaves it. */}
         {view === 'edit' ? (
-          <Badge tone="neutral" data-testid="files-editing" className="shrink-0 text-[8px]">
+          <Badge tone="neutral" data-testid="files-editing" className="shrink-0 text-2xs">
             editing
           </Badge>
         ) : null}
         {detail === undefined ? null : (
-          <span className="shrink-0 text-[9px] text-doom-faint">
+          <span className="shrink-0 text-2xs text-doom-faint">
             +{detail.cumulative.additions} -{detail.cumulative.removals}
           </span>
         )}
@@ -213,7 +213,7 @@ export function FilePanel({ filePath, relPath, sessionId, sendSessionFrame, clos
               size="xs"
               data-testid={`files-view-${entry}`}
               onClick={() => setView(entry)}
-              className="text-[9px]"
+              className="text-2xs"
             >
               {entry}
             </Button>
@@ -262,12 +262,12 @@ export function FilePanel({ filePath, relPath, sessionId, sendSessionFrame, clos
       />
 
       {loading && detail === undefined ? (
-        <p data-testid="files-loading" className="px-4 py-3 text-[11px] text-doom-faint">
+        <p data-testid="files-loading" className="px-4 py-3 text-sm text-doom-faint">
           reading this file's history…
         </p>
       ) : null}
       {error === undefined ? null : (
-        <p data-testid="files-error" className="px-4 py-3 text-[11px] text-doom-red">
+        <p data-testid="files-error" className="px-4 py-3 text-sm text-doom-red">
           {error}
         </p>
       )}
@@ -276,7 +276,7 @@ export function FilePanel({ filePath, relPath, sessionId, sendSessionFrame, clos
         {detail === undefined ? null : view === 'diff' ? (
           <div className="flex flex-col">
             {detail.cumulative.note === undefined ? null : (
-              <p data-testid="files-cumulative-note" className="px-4 py-2 text-[10px] text-doom-yellow">
+              <p data-testid="files-cumulative-note" className="px-4 py-2 text-xs text-doom-yellow">
                 {detail.cumulative.note}
               </p>
             )}
@@ -288,7 +288,7 @@ export function FilePanel({ filePath, relPath, sessionId, sendSessionFrame, clos
               />
             )}
             <section className="mt-2 border-t border-doom-border">
-              <h2 className="px-4 py-2 text-[10px] font-bold tracking-wide text-doom-faint uppercase">
+              <h2 className="px-4 py-2 text-xs font-bold tracking-wide text-doom-faint uppercase">
                 {detail.versions.length} {detail.versions.length === 1 ? 'change' : 'changes'} this session
               </h2>
               {detail.versions.map((version) => (
@@ -301,22 +301,22 @@ export function FilePanel({ filePath, relPath, sessionId, sendSessionFrame, clos
                     className="w-full gap-2 rounded-none px-4 py-1.5 hover:bg-doom-panel"
                   >
                     <span className="flex w-full min-w-0 items-center gap-2">
-                      <span className="shrink-0 text-[9px] text-doom-faint">#{version.index}</span>
-                      <span className="min-w-0 flex-1 truncate text-left text-[10px] text-doom-text">
+                      <span className="shrink-0 text-2xs text-doom-faint">#{version.index}</span>
+                      <span className="min-w-0 flex-1 truncate text-left text-xs text-doom-text">
                         {versionSummary(version)}
                       </span>
                       {version.origin === 'scan' ? (
-                        <Badge tone="neutral" className="shrink-0 text-[8px]">
+                        <Badge tone="neutral" className="shrink-0 text-2xs">
                           no baseline
                         </Badge>
                       ) : null}
-                      <span className="shrink-0 text-[9px] text-doom-faint">
+                      <span className="shrink-0 text-2xs text-doom-faint">
                         {expanded === version.index ? '▾' : '▸'}
                       </span>
                     </span>
                   </Button>
                   {expanded !== version.index ? null : version.hunks === undefined ? (
-                    <p className="px-4 py-1.5 text-[10px] text-doom-faint">{version.note ?? 'nothing to show'}</p>
+                    <p className="px-4 py-1.5 text-xs text-doom-faint">{version.note ?? 'nothing to show'}</p>
                   ) : (
                     <DiffView
                       hunks={version.hunks}
@@ -331,7 +331,7 @@ export function FilePanel({ filePath, relPath, sessionId, sendSessionFrame, clos
         ) : view === 'edit' ? (
           <div className="flex h-full flex-col gap-2 p-3">
             {working?.unavailable === true ? (
-              <p data-testid="files-source-unavailable" className="text-[11px] text-doom-faint">
+              <p data-testid="files-source-unavailable" className="text-sm text-doom-faint">
                 {working.reason ?? 'this file cannot be shown'}
               </p>
             ) : (
@@ -365,7 +365,7 @@ export function FilePanel({ filePath, relPath, sessionId, sendSessionFrame, clos
                     loading={saving}
                     disabled={source === undefined || saving}
                     onClick={() => void save()}
-                    className="text-[9px]"
+                    className="text-2xs"
                   >
                     save to disk
                   </Button>
@@ -375,7 +375,7 @@ export function FilePanel({ filePath, relPath, sessionId, sendSessionFrame, clos
                       size="xs"
                       data-testid="files-revert"
                       onClick={() => setSource(undefined)}
-                      className="text-[9px]"
+                      className="text-2xs"
                     >
                       discard edits
                     </Button>
@@ -383,7 +383,7 @@ export function FilePanel({ filePath, relPath, sessionId, sendSessionFrame, clos
                   {saveNote === undefined ? null : (
                     <span
                       data-testid="files-save-note"
-                      className={saveNote === 'saved' ? 'text-[9px] text-doom-green' : 'text-[9px] text-doom-red'}
+                      className={saveNote === 'saved' ? 'text-2xs text-doom-green' : 'text-2xs text-doom-red'}
                     >
                       {saveNote}
                     </span>
@@ -398,8 +398,8 @@ export function FilePanel({ filePath, relPath, sessionId, sendSessionFrame, clos
             data-mode={previewMode}
             className={
               previewMode === 'code'
-                ? 'flex h-full flex-col gap-2 p-4 text-[12px] text-doom-text'
-                : 'flex flex-col gap-2 p-4 text-[12px] text-doom-text'
+                ? 'flex h-full flex-col gap-2 p-4 text-sm text-doom-text'
+                : 'flex flex-col gap-2 p-4 text-sm text-doom-text'
             }
             onMouseUp={() => {
               // Highlighted source knows which lines were picked, so a note on
@@ -417,7 +417,7 @@ export function FilePanel({ filePath, relPath, sessionId, sendSessionFrame, clos
             {/* A file the editor cannot hold is still a file the reader came
                 to see, so the reason is said and the bytes are shown anyway. */}
             {previewMode === 'unavailable' ? (
-              <p data-testid="files-preview-unavailable" className="text-[11px] text-doom-faint">
+              <p data-testid="files-preview-unavailable" className="text-sm text-doom-faint">
                 {working?.reason ?? 'this file cannot be shown'}
               </p>
             ) : null}
@@ -453,7 +453,7 @@ export function FilePanel({ filePath, relPath, sessionId, sendSessionFrame, clos
               // reading view rather than an empty pane.
               <pre
                 data-testid="files-preview-text"
-                className="whitespace-pre-wrap break-words font-mono text-[11px] leading-[1.5] text-doom-text"
+                className="whitespace-pre-wrap break-words font-mono text-sm leading-normal text-doom-text"
               >
                 {content}
               </pre>
@@ -475,7 +475,7 @@ export function FilePanel({ filePath, relPath, sessionId, sendSessionFrame, clos
       {comments.length === 0 ? null : (
         <footer data-testid="files-review" className="shrink-0 border-t border-doom-border px-3 py-2">
           <div className="flex items-center gap-2 pb-1">
-            <span className="flex-1 text-[10px] font-bold text-doom-hi">
+            <span className="flex-1 text-xs font-bold text-doom-hi">
               {comments.length} {comments.length === 1 ? 'comment' : 'comments'}
             </span>
             <Button
@@ -483,15 +483,15 @@ export function FilePanel({ filePath, relPath, sessionId, sendSessionFrame, clos
               size="xs"
               data-testid="files-send-review"
               onClick={sendReview}
-              className="text-[9px]"
+              className="text-2xs"
             >
               send review
             </Button>
           </div>
           {comments.map((comment) => (
             <div key={comment.id} data-testid="files-review-comment" className="flex items-start gap-2 py-0.5">
-              <span className="shrink-0 text-[9px] text-doom-faint">{commentAnchor(comment)}</span>
-              <span className="min-w-0 flex-1 truncate text-[10px] text-doom-text">{comment.body}</span>
+              <span className="shrink-0 text-2xs text-doom-faint">{commentAnchor(comment)}</span>
+              <span className="min-w-0 flex-1 truncate text-xs text-doom-text">{comment.body}</span>
               <Button
                 variant="ghost"
                 size="xs"
@@ -499,7 +499,7 @@ export function FilePanel({ filePath, relPath, sessionId, sendSessionFrame, clos
                 onClick={() => {
                   if (sessionId !== null) removeComment(sessionId, comment.id);
                 }}
-                className="shrink-0 text-[9px]"
+                className="shrink-0 text-2xs"
               >
                 remove
               </Button>

package/src/web/components/FilePreviewPanel.tsx

@@ -62,25 +62,25 @@ export function FilePreviewPanel({ filePath, sessionId, closeTransientTab }: Fil
     <div data-testid="files-preview-panel" className="flex min-h-0 flex-1 flex-col">
       <header className="flex shrink-0 items-center gap-2 border-b border-doom-border px-4 py-2">
         <Breadcrumb path={relPath} data-testid="files-preview-breadcrumb" className="min-w-0 flex-1" />
-        <span className="shrink-0 text-[9px] text-doom-faint">unchanged</span>
+        <span className="shrink-0 text-2xs text-doom-faint">unchanged</span>
         <Button
           variant="ghost"
           size="xs"
           data-testid="files-preview-close"
           onClick={() => closeTransientTab(filePreviewTabId(filePath))}
-          className="shrink-0 text-[9px]"
+          className="shrink-0 text-2xs"
         >
           close
         </Button>
       </header>
 
       {error === undefined ? null : (
-        <p data-testid="files-preview-error" className="px-4 py-3 text-[11px] text-doom-red">
+        <p data-testid="files-preview-error" className="px-4 py-3 text-sm text-doom-red">
           {error}
         </p>
       )}
       {preview === undefined && error === undefined ? (
-        <p data-testid="files-preview-loading" className="px-4 py-3 text-[11px] text-doom-faint">
+        <p data-testid="files-preview-loading" className="px-4 py-3 text-sm text-doom-faint">
           reading this file…
         </p>
       ) : null}
@@ -90,10 +90,10 @@ export function FilePreviewPanel({ filePath, sessionId, closeTransientTab }: Fil
           <div
             data-testid="files-preview"
             data-mode={previewMode}
-            className="flex h-full flex-col gap-2 p-4 text-[12px] text-doom-text"
+            className="flex h-full flex-col gap-2 p-4 text-sm text-doom-text"
           >
             {previewMode === 'unavailable' ? (
-              <p data-testid="files-preview-unavailable" className="text-[11px] text-doom-faint">
+              <p data-testid="files-preview-unavailable" className="text-sm text-doom-faint">
                 {working?.reason ?? 'this file cannot be shown'}
               </p>
             ) : null}
@@ -120,7 +120,7 @@ export function FilePreviewPanel({ filePath, sessionId, closeTransientTab }: Fil
             ) : (
               <pre
                 data-testid="files-preview-text"
-                className="whitespace-pre-wrap break-words font-mono text-[11px] leading-[1.5] text-doom-text"
+                className="whitespace-pre-wrap break-words font-mono text-sm leading-normal text-doom-text"
               >
                 {content}
               </pre>

package/src/web/components/FilesActivitySection.tsx

@@ -30,7 +30,7 @@ export function FilesActivitySection({ sessionId, openTransientTab }: WebPluginS
   };
   if (items.length === 0) {
     return (
-      <p data-testid="activity-summary-files" className="px-1 text-[10px] text-doom-faint">
+      <p data-testid="activity-summary-files" className="px-1 text-xs text-doom-faint">
         nothing changed yet
       </p>
     );
@@ -49,7 +49,7 @@ export function FilesActivitySection({ sessionId, openTransientTab }: WebPluginS
           size="xs"
           data-testid="activity-files-show-all"
           aria-label={`show all ${items.length} changed files`}
-          className="self-start px-1 pt-0.5 text-[9px] text-doom-faint"
+          className="self-start px-1 pt-0.5 text-2xs text-doom-faint"
           onClick={() => setBrowserOpen(true)}
         >
           show all {items.length} files

package/src/web/components/FilesBrowser.tsx

@@ -9,16 +9,14 @@ function FileMetadata({ item, label, recent = false }: { item: FilesItemView; la
     <span className="flex min-w-0 w-full items-center gap-1.5">
       {/* The dock passes no label and keeps the whole path; the drawer's tree
           passes what its group header has not already said. */}
-      <span className="min-w-0 flex-1 truncate text-left text-[10px] font-bold text-doom-hi">
-        {label ?? item.relPath}
-      </span>
+      <span className="min-w-0 flex-1 truncate text-left text-xs font-bold text-doom-hi">{label ?? item.relPath}</span>
       {recent ? (
-        <span data-recent="true" title="most recent change" className="shrink-0 text-[9px] text-doom-blue">
+        <span data-recent="true" title="most recent change" className="shrink-0 text-2xs text-doom-blue">
           ●
         </span>
       ) : null}
-      {item.count > 1 ? <span className="shrink-0 text-[9px] text-doom-faint">{item.count}×</span> : null}
-      <span className={`shrink-0 text-[9px] ${item.diffable ? 'text-doom-faint' : 'text-doom-yellow'}`}>
+      {item.count > 1 ? <span className="shrink-0 text-2xs text-doom-faint">{item.count}×</span> : null}
+      <span className={`shrink-0 text-2xs ${item.diffable ? 'text-doom-faint' : 'text-doom-yellow'}`}>
         {TOOL_LABEL[item.tool] ?? item.tool}
       </span>
     </span>
@@ -34,7 +32,7 @@ export function FileActivityRow({ item, onOpen }: { item: FilesItemView; onOpen:
       data-file-diffable={item.diffable}
       title={item.diffable ? item.path : `${item.path} (changed by a command, so no diff was captured)`}
       onClick={onOpen}
-      className="min-w-0 gap-0.5 rounded-[5px] px-1 py-1 hover:bg-doom-panel"
+      className="min-w-0 gap-0.5 rounded-md px-1 py-1 hover:bg-doom-panel"
     >
       <FileMetadata item={item} />
     </Button>
@@ -52,7 +50,7 @@ function FileGroupHeader({ prefix }: { prefix: string }) {
   return (
     <div
       data-testid={`files-browser-group-${prefix}`}
-      className="truncate px-4 pt-2 pb-1 text-[9px] font-bold tracking-wide text-doom-faint"
+      className="truncate px-4 pt-2 pb-1 text-2xs font-bold tracking-wide text-doom-faint"
     >
       {prefix}
     </div>
@@ -170,8 +168,8 @@ export function FilesBrowser({
       className="fixed inset-y-0 right-0 z-50 flex w-[min(440px,calc(100vw-24px))] flex-col overflow-hidden border-l border-doom-border bg-doom-rail outline-none"
     >
       <div className="flex h-11 shrink-0 items-center gap-2.5 border-b border-doom-border px-4">
-        <span className="text-[13px] font-bold text-doom-hi"># files</span>
-        <span data-testid="files-browser-total" className="text-[9px] text-doom-faint">
+        <span className="text-base font-bold text-doom-hi"># files</span>
+        <span data-testid="files-browser-total" className="text-2xs text-doom-faint">
           {items.length} changed
         </span>
         <span className="min-w-0 flex-1" />
@@ -215,7 +213,7 @@ export function FilesBrowser({
           </Button>
         ) : null}
       </div>
-      <p data-testid="files-browser-matches" className="shrink-0 px-4 pb-2 text-[9px] text-doom-faint">
+      <p data-testid="files-browser-matches" className="shrink-0 px-4 pb-2 text-2xs text-doom-faint">
         {shown.length} matches · {grouped === undefined ? 'newest change first' : 'by path'}
       </p>
       <div
@@ -224,7 +222,7 @@ export function FilesBrowser({
         aria-label="changed files"
         className="flex min-h-0 flex-1 flex-col overflow-y-auto pb-2"
       >
-        {shown.length === 0 ? <p className="px-4 py-3 text-[10px] text-doom-faint">nothing matches the path</p> : null}
+        {shown.length === 0 ? <p className="px-4 py-3 text-xs text-doom-faint">nothing matches the path</p> : null}
         {grouped === undefined
           ? shown.map((item) => (
               <BrowserFileRow
@@ -256,7 +254,7 @@ export function FilesBrowser({
             ))}
       </div>
       <div className="flex h-8 shrink-0 items-center border-t border-doom-border-soft bg-doom-deep px-4">
-        <span className="text-[9px] text-doom-faint">↑↓ choose · enter open · esc close</span>
+        <span className="text-2xs text-doom-faint">↑↓ choose · enter open · esc close</span>
       </div>
     </aside>
   );