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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agimon-ai/doompi-mcp",
-  "version": "0.0.1-alpha.65",
+  "version": "0.0.1-alpha.68",
   "description": "Domain-aware MCP server selection and access boundaries for Pi sessions composed with DoomPi.",
   "keywords": [
     "ai",
@@ -34,7 +34,8 @@
     "src/prompts",
     "README.md",
     "LICENSE",
-    "package.json"
+    "package.json",
+    "!src/web/**/*.stories.tsx"
   ],
   "type": "module",
   "main": "./dist/index.cjs",
@@ -69,11 +70,11 @@
     "open": "11.0.2",
     "typebox": "1.3.25",
     "yaml": "2.9.0",
-    "@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-config": "0.0.1-alpha.64",
-    "@agimon-ai/doompi-web-contracts": "0.0.1-alpha.27"
+    "@agimon-ai/doompi-config": "0.0.1-alpha.67",
+    "@agimon-ai/doompi-extension-contracts": "0.0.1-alpha.67",
+    "@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"
   },
   "devDependencies": {
     "@earendil-works/pi-coding-agent": "0.85.1",
@@ -84,6 +85,7 @@
     "@types/react": "19.2.18",
     "@vitest/coverage-v8": "5.0.0",
     "react": "19.2.8",
+    "react-dom": "19.2.8",
     "tsdown": "0.23.0",
     "typescript": "7.0.2",
     "vitest": "5.0.0"

package/src/web/components/McpRepositorySettingsPanel.tsx

@@ -52,7 +52,7 @@ export function McpRepositorySettingsPanel({ repository, request, requestWithSte
   }, [authorizationId, authorizationStatus, repositoryId, request]);
 
   if (!repository) {
-    return <p className="py-3 text-[10px] text-doom-faint">Select a repository to inspect its synced MCP catalog.</p>;
+    return <p className="py-3 text-xs text-doom-faint">Select a repository to inspect its synced MCP catalog.</p>;
   }
 
   const catalog = state.repositoryId === repository.id ? state.catalog : undefined;
@@ -63,7 +63,7 @@ export function McpRepositorySettingsPanel({ repository, request, requestWithSte
     <div className="flex flex-col gap-3" data-testid="mcp-repository-settings">
       <div className="flex flex-col items-stretch gap-2 rounded border border-doom-border bg-doom-panel px-3 py-2 min-[560px]:flex-row min-[560px]:items-center">
         <Badge>{catalog?.sync.fresh ? 'synced' : 'sync required'}</Badge>
-        <span className="min-w-0 text-[10px] leading-relaxed text-doom-muted min-[560px]:flex-1">
+        <span className="min-w-0 text-xs leading-relaxed text-doom-muted min-[560px]:flex-1">
           {catalog?.sync.fresh
             ? 'Cached inspection is local. Discovery contacts the configured servers.'
             : catalog
@@ -76,7 +76,7 @@ export function McpRepositorySettingsPanel({ repository, request, requestWithSte
           loading={busy === 'loading'}
           disabled={busy !== undefined}
           onClick={() => void loadMcpSettings(request, repository.id)}
-          className="w-full text-[10px] min-[560px]:w-auto"
+          className="w-full text-xs min-[560px]:w-auto"
         >
           refresh cache
         </Button>
@@ -86,7 +86,7 @@ export function McpRepositorySettingsPanel({ repository, request, requestWithSte
           loading={busy === 'discovering'}
           disabled={busy !== undefined || !catalog?.sync.fresh}
           onClick={() => setConfirmDiscovery(true)}
-          className="w-full text-[10px] min-[560px]:w-auto"
+          className="w-full text-xs min-[560px]:w-auto"
         >
           discover live
         </Button>
@@ -94,7 +94,7 @@ export function McpRepositorySettingsPanel({ repository, request, requestWithSte
 
       {!confirmDiscovery ? null : (
         <div className="flex flex-col items-stretch gap-2 rounded border border-doom-accent/50 bg-doom-accent/5 px-3 py-2 min-[560px]:flex-row min-[560px]:items-center">
-          <span className="min-w-0 text-[10px] leading-relaxed text-doom-hi min-[560px]:flex-1">
+          <span className="min-w-0 text-xs leading-relaxed text-doom-hi min-[560px]:flex-1">
             Discovery starts configured processes and contacts remote MCP servers. Continue?
           </span>
           <Button
@@ -104,7 +104,7 @@ export function McpRepositorySettingsPanel({ repository, request, requestWithSte
               setConfirmDiscovery(false);
               void discoverMcpSettings(requestWithStepUp, repository.id);
             }}
-            className="w-full text-[10px] min-[560px]:w-auto"
+            className="w-full text-xs min-[560px]:w-auto"
           >
             confirm discovery
           </Button>
@@ -112,23 +112,23 @@ export function McpRepositorySettingsPanel({ repository, request, requestWithSte
             variant="ghost"
             size="xs"
             onClick={() => setConfirmDiscovery(false)}
-            className="w-full text-[10px] min-[560px]:w-auto"
+            className="w-full text-xs min-[560px]:w-auto"
           >
             cancel
           </Button>
         </div>
       )}
 
-      {!error ? null : <p className="rounded border border-doom-red/40 px-3 py-2 text-[10px] text-doom-red">{error}</p>}
+      {!error ? null : <p className="rounded border border-doom-red/40 px-3 py-2 text-xs text-doom-red">{error}</p>}
 
       {authorization ? (
         <div className="flex flex-col gap-2 rounded border border-doom-border bg-doom-panel px-3 py-2">
           <div className="flex flex-wrap items-center gap-2">
-            <span className="min-w-0 basis-full text-[10px] font-bold text-doom-hi min-[560px]:basis-auto">
+            <span className="min-w-0 basis-full text-xs font-bold text-doom-hi min-[560px]:basis-auto">
               {authorization.serverName}
             </span>
             <Badge>{authorization.status}</Badge>
-            <span className="min-w-0 flex-1 text-[9px] text-doom-faint">authorization flow</span>
+            <span className="min-w-0 flex-1 text-2xs text-doom-faint">authorization flow</span>
             {TERMINAL_AUTHORIZATION.has(authorization.status) ? null : (
               <Button
                 variant="ghost"
@@ -136,7 +136,7 @@ export function McpRepositorySettingsPanel({ repository, request, requestWithSte
                 loading={busy === 'cancelling'}
                 disabled={busy !== undefined}
                 onClick={() => void cancelMcpFlow(requestWithStepUp, repository.id, authorization.id)}
-                className="w-full text-[10px] min-[560px]:w-auto"
+                className="w-full text-xs min-[560px]:w-auto"
               >
                 cancel
               </Button>
@@ -147,17 +147,17 @@ export function McpRepositorySettingsPanel({ repository, request, requestWithSte
               href={authorization.authorizationUrl}
               target="_blank"
               rel="noreferrer noopener"
-              className="w-fit text-[10px] text-doom-accent underline underline-offset-2"
+              className="w-fit text-xs text-doom-accent underline underline-offset-2"
             >
               open authorization page
             </a>
           )}
-          {!authorization.error ? null : <p className="text-[9px] text-doom-red">{authorization.error}</p>}
+          {!authorization.error ? null : <p className="text-2xs text-doom-red">{authorization.error}</p>}
         </div>
       ) : null}
 
       {!catalog || catalog.servers.length === 0 ? (
-        <p className="rounded border border-dashed border-doom-border px-3 py-4 text-[10px] text-doom-faint">
+        <p className="rounded border border-dashed border-doom-border px-3 py-4 text-xs text-doom-faint">
           {busy === 'loading' ? 'Reading the cached catalog.' : 'No MCP servers are enabled in the synced selection.'}
         </p>
       ) : (
@@ -168,7 +168,7 @@ export function McpRepositorySettingsPanel({ repository, request, requestWithSte
               className="flex flex-col gap-2 rounded border border-doom-border bg-doom-panel px-3 py-2"
             >
               <div className="flex flex-wrap items-center gap-2">
-                <span className="min-w-0 basis-full truncate text-[11px] font-bold text-doom-hi min-[560px]:basis-auto min-[560px]:flex-1">
+                <span className="min-w-0 basis-full truncate text-sm font-bold text-doom-hi min-[560px]:basis-auto min-[560px]:flex-1">
                   {server.name}
                 </span>
                 <Badge>{server.state}</Badge>
@@ -179,14 +179,14 @@ export function McpRepositorySettingsPanel({ repository, request, requestWithSte
                   size="xs"
                   disabled={busy !== undefined || !catalog.sync.fresh}
                   onClick={() => setConfirmAuthorization(server.name)}
-                  className="w-full text-[10px] min-[560px]:w-auto"
+                  className="w-full text-xs min-[560px]:w-auto"
                 >
                   authorize
                 </Button>
               </div>
               {confirmAuthorization !== server.name ? null : (
                 <div className="flex flex-col items-stretch gap-2 border-t border-doom-border pt-2 min-[560px]:flex-row min-[560px]:items-center">
-                  <span className="min-w-0 text-[9px] leading-relaxed text-doom-muted min-[560px]:flex-1">
+                  <span className="min-w-0 text-2xs leading-relaxed text-doom-muted min-[560px]:flex-1">
                     Start a bounded OAuth attempt for this server? A passkey may be required.
                   </span>
                   <Button
@@ -196,7 +196,7 @@ export function McpRepositorySettingsPanel({ repository, request, requestWithSte
                       setConfirmAuthorization(undefined);
                       void authorizeMcpServer(requestWithStepUp, repository.id, server.name);
                     }}
-                    className="w-full text-[10px] min-[560px]:w-auto"
+                    className="w-full text-xs min-[560px]:w-auto"
                   >
                     continue
                   </Button>
@@ -204,22 +204,22 @@ export function McpRepositorySettingsPanel({ repository, request, requestWithSte
                     variant="ghost"
                     size="xs"
                     onClick={() => setConfirmAuthorization(undefined)}
-                    className="w-full text-[10px] min-[560px]:w-auto"
+                    className="w-full text-xs min-[560px]:w-auto"
                   >
                     cancel
                   </Button>
                 </div>
               )}
               <details>
-                <summary className="cursor-pointer text-[9px] text-doom-muted">
+                <summary className="cursor-pointer text-2xs text-doom-muted">
                   {String(server.tools.length)} cached {server.tools.length === 1 ? 'tool' : 'tools'}
                 </summary>
                 <div className="mt-2 flex flex-col gap-1 border-t border-doom-border pt-2">
                   {server.tools.length === 0 ? (
-                    <span className="text-[9px] text-doom-faint">Run discovery to populate capabilities.</span>
+                    <span className="text-2xs text-doom-faint">Run discovery to populate capabilities.</span>
                   ) : (
                     server.tools.map((tool) => (
-                      <div key={tool.piName} className="flex min-w-0 gap-2 text-[9px]">
+                      <div key={tool.piName} className="flex min-w-0 gap-2 text-2xs">
                         <code className="shrink-0 text-doom-hi">{tool.name}</code>
                         <span className="truncate text-doom-faint">{tool.description ?? tool.piName}</span>
                       </div>
@@ -227,19 +227,19 @@ export function McpRepositorySettingsPanel({ repository, request, requestWithSte
                   )}
                 </div>
               </details>
-              {!server.error ? null : <p className="text-[9px] text-doom-red">{server.error}</p>}
+              {!server.error ? null : <p className="text-2xs text-doom-red">{server.error}</p>}
             </div>
           ))}
         </div>
       )}
 
       {catalog?.droppedServers.length ? (
-        <p className="text-[9px] text-doom-faint">
+        <p className="text-2xs text-doom-faint">
           Policy omitted {String(catalog.droppedServers.length)} configured servers.
         </p>
       ) : null}
       {catalog?.diagnostics.map((diagnostic) => (
-        <p key={diagnostic} className="text-[9px] text-doom-red">
+        <p key={diagnostic} className="text-2xs text-doom-red">
           {diagnostic}
         </p>
       ))}

package/src/web/components/McpSessionAuthSection.tsx

@@ -102,8 +102,8 @@ export function McpSessionAuthSection({
       {servers.length === 0 ? null : (
         <section data-testid="context-mcp-auth" className="flex flex-col gap-2 border-b border-doom-border px-3 py-3">
           <div className="flex flex-col gap-0.5">
-            <p className="text-[9px] font-bold uppercase tracking-wide text-doom-faint">MCP servers</p>
-            <p className="text-[9px] leading-relaxed text-doom-muted">
+            <p className="text-2xs font-bold uppercase tracking-wide text-doom-faint">MCP servers</p>
+            <p className="text-2xs leading-relaxed text-doom-muted">
               Open sign-in in a new tab, or copy the link from the authorization dialog.
             </p>
           </div>
@@ -115,8 +115,8 @@ export function McpSessionAuthSection({
               return (
                 <li key={item.name} className="flex min-w-0 flex-col gap-1 px-1 py-0.5">
                   <div className="flex min-w-0 items-center gap-2">
-                    <span className="min-w-0 flex-1 truncate text-[10px] text-doom-hi">{item.name}</span>
-                    <span className="text-[9px] text-doom-muted">{item.state.replace(/-/g, ' ')}</span>
+                    <span className="min-w-0 flex-1 truncate text-xs text-doom-hi">{item.name}</span>
+                    <span className="text-2xs text-doom-muted">{item.state.replace(/-/g, ' ')}</span>
                     <Button
                       variant="subtle"
                       size="xs"
@@ -133,23 +133,23 @@ export function McpSessionAuthSection({
                           setTarget({ sessionId, name: item.name });
                         }
                       }}
-                      className="shrink-0 text-[8px] font-bold"
+                      className="shrink-0 text-2xs font-bold"
                     >
                       {item.state === 'connected' ? 'manage' : 'authorize'}
                     </Button>
                   </div>
                   {tools.length === 0 ? (
-                    <p className="pl-3 text-[9px] text-doom-faint">no tools reported</p>
+                    <p className="pl-3 text-2xs text-doom-faint">no tools reported</p>
                   ) : (
                     <ul aria-label={`${item.name} tools`} className="flex flex-col">
                       {tools.map((tool) => (
                         <li key={tool.name} className="flex min-w-0 items-center gap-2 py-px pl-3">
                           <span
-                            className={`min-w-0 flex-1 truncate text-[9px] ${tool.active ? 'text-doom-muted' : 'text-doom-faint'}`}
+                            className={`min-w-0 flex-1 truncate text-2xs ${tool.active ? 'text-doom-muted' : 'text-doom-faint'}`}
                           >
                             {tool.name}
                           </span>
-                          <span className="w-14 shrink-0 text-right text-[9px] text-doom-faint">
+                          <span className="w-14 shrink-0 text-right text-2xs text-doom-faint">
                             {tool.active ? tokenEstimate(tool.tokens) : `(${tokenEstimate(tool.tokens)})`}
                           </span>
                         </li>
@@ -174,7 +174,7 @@ export function McpSessionAuthSection({
         <DialogContent data-testid="mcp-authorization-dialog">
           <DialogHeader className="items-start px-4 py-4 sm:px-5">
             <div className="flex min-w-0 flex-1 flex-col gap-1.5">
-              <DialogTitle className="break-words text-[14px] leading-snug">
+              <DialogTitle className="break-words text-base leading-snug">
                 {server?.state === 'connected' ? 'Manage' : 'Authorize'} {selected?.name}
               </DialogTitle>
               <DialogDescription className="max-w-2xl">
@@ -185,7 +185,7 @@ export function McpSessionAuthSection({
             </div>
           </DialogHeader>
           <DialogBody className="px-4 py-4 sm:px-5 sm:py-5">
-            <p role="status" className="text-[11px] text-doom-muted">
+            <p role="status" className="text-sm text-doom-muted">
               {server?.state === 'connected'
                 ? 'Authorization complete. This server is connected.'
                 : server?.state === 'closed'
@@ -199,7 +199,7 @@ export function McpSessionAuthSection({
                         : 'This server is no longer available in the session.'}
             </p>
             {popupBlocked ? (
-              <p className="text-[10px] text-doom-muted">
+              <p className="text-xs text-doom-muted">
                 The browser blocked the new tab. Open the link below when it is ready.
               </p>
             ) : null}
@@ -215,7 +215,7 @@ export function McpSessionAuthSection({
                   href={authorizationUrl}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="text-[11px] text-doom-accent underline underline-offset-2"
+                  className="text-sm text-doom-accent underline underline-offset-2"
                 >
                   open authorization page
                 </a>
@@ -225,7 +225,7 @@ export function McpSessionAuthSection({
               </div>
             ) : null}
             {copyFeedback ? (
-              <p role="status" className="text-[10px] text-doom-muted">
+              <p role="status" className="text-xs text-doom-muted">
                 {copyFeedback}
               </p>
             ) : null}