@geminilight/mindos 0.6.2 → 0.6.3

package/app/components/agents/AgentDetailContent.tsx

@@ -214,45 +214,70 @@ export default function AgentDetailContent({ agentKey }: { agentKey: string }) {
         {a.backToOverview}
       </Link>
 
-      {/* ═══════════ AGENT PROFILE (consolidated header) ═══════════ */}
-      <section className="rounded-xl border border-border bg-gradient-to-b from-card to-card/80 overflow-hidden">
-        <div className="flex items-center gap-4 p-5">
+      {/* ═══════════ AGENT PROFILE ═══════════ */}
+      <section className="rounded-xl border border-border bg-card overflow-hidden">
+        <div className="flex items-center gap-3.5 px-5 py-4">
           <AgentAvatar name={agent.name} status={status} size="md" />
           <div className="min-w-0 flex-1">
-            <h1 className="text-xl font-semibold tracking-tight font-display text-foreground">{agent.name}</h1>
-            <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 mt-1">
-              <span className={`text-2xs font-medium px-2 py-0.5 rounded-full ${
+            <h1 className="text-lg font-semibold tracking-tight font-display text-foreground">{agent.name}</h1>
+            <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 mt-0.5 text-2xs text-muted-foreground/60">
+              <span className={`font-medium px-1.5 py-px rounded-full ${
                 status === 'connected' ? 'bg-success/10 text-success'
                   : status === 'detected' ? 'bg-[var(--amber-subtle)] text-[var(--amber)]'
                     : 'bg-muted text-muted-foreground'
               }`}>{status}</span>
-              <span className="text-2xs text-muted-foreground/60 font-mono">{agent.transport ?? agent.preferredTransport}</span>
-              <span className="text-2xs text-muted-foreground/30" aria-hidden="true">·</span>
-              <span className="text-2xs text-muted-foreground/60">{agent.skillMode ?? a.na}</span>
+              <span className="font-mono">{agent.transport ?? agent.preferredTransport}</span>
+              <span className="text-muted-foreground/25" aria-hidden="true">·</span>
+              <span>{agent.skillMode ?? a.na}</span>
             </div>
           </div>
         </div>
-        <div className="flex flex-wrap items-center gap-x-5 gap-y-1 text-xs text-muted-foreground/70 px-5 py-3 border-t border-border/50 bg-muted/[0.03]">
-          <span>{a.detail.format}: <span className="text-foreground/80 font-medium">{agent.format}</span></span>
-          <span>{a.detail.lastActivityAt}: <span className="text-foreground/80 tabular-nums font-medium">{agent.runtimeLastActivityAt ?? a.na}</span></span>
-          <span className="font-medium text-foreground/80 tabular-nums">{configuredMcpServers.length} MCP · {nativeInstalledSkills.length} skills</span>
+        <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-2xs text-muted-foreground/50 px-5 py-2 border-t border-border/40">
+          <span>{agent.format} <span className="text-muted-foreground/30">·</span> {formatRelativeTime(agent.runtimeLastActivityAt)}</span>
+          <span className="tabular-nums">{configuredMcpServers.length} MCP <span className="text-muted-foreground/30">·</span> {nativeInstalledSkills.length} skills</span>
         </div>
       </section>
 
       {/* ═══════════ MCP MANAGEMENT ═══════════ */}
-      <section className="rounded-xl border border-border bg-card p-5 space-y-4">
-        <h2 className="text-sm font-semibold text-foreground flex items-center gap-2">
-          <div className="w-6 h-6 rounded-md bg-muted/50 flex items-center justify-center">
-            <Server size={13} className="text-muted-foreground/70" />
+      <section className="rounded-xl border border-border bg-card p-4 space-y-3">
+        <div className="flex items-center justify-between">
+          <h2 className="text-xs font-semibold text-foreground flex items-center gap-2">
+            <Server size={12} className="text-muted-foreground/50" />
+            {a.detail.mcpManagement}
+          </h2>
+          <div className="flex items-center gap-1.5">
+            {!isMindOS && (
+              <ActionButton
+                onClick={() => void handleCopySnippet()}
+                disabled={false}
+                busy={false}
+                label={snippetCopied ? a.detail.mcpCopied : a.detail.mcpCopySnippet}
+              />
+            )}
+            <ActionButton
+              onClick={() => void mcp.refresh()}
+              disabled={false}
+              busy={false}
+              label={a.detail.mcpRefresh}
+            />
+            {!isMindOS && (
+              <ActionButton
+                onClick={() => void handleApplyMcpConfig(currentScope, currentTransport)}
+                disabled={mcpBusy}
+                busy={mcpBusy}
+                label={a.detail.mcpReconnect}
+              />
+            )}
           </div>
-          {a.detail.mcpManagement}
-        </h2>
+        </div>
+
+        {mcpMessage && <p className="text-2xs text-muted-foreground animate-in fade-in duration-200">{mcpMessage}</p>}
 
-        {/* MCP status row */}
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-3 text-sm">
+        {/* MCP status metadata */}
+        <div className="flex flex-wrap gap-x-6 gap-y-1 py-2 border-y border-border/30">
           {isMindOS ? (
             <>
-              <DetailLine label="Status" value={mcp.status?.running ? '● Running' : '○ Stopped'} />
+              <DetailLine label="Status" value={mcp.status?.running ? 'Running' : 'Stopped'} />
               <DetailLine label="Endpoint" value={mcp.status?.endpoint ?? a.na} />
               <DetailLine label="Tools" value={mcp.status?.toolCount != null ? String(mcp.status.toolCount) : a.na} />
             </>
@@ -265,11 +290,11 @@ export default function AgentDetailContent({ agentKey }: { agentKey: string }) {
           )}
         </div>
 
-        {/* Configured MCP servers with management */}
-        <div className="rounded-xl border border-border/60 bg-background/50 p-4 space-y-2.5">
+        {/* Configured MCP servers */}
+        <div className="space-y-2">
           <div className="flex items-center justify-between">
-            <p className="text-xs font-semibold text-foreground">{a.detail.configuredMcpServers}</p>
-            <span className="text-2xs text-muted-foreground/60 tabular-nums">{a.detail.configuredMcpServersCount(configuredMcpServers.length)}</span>
+            <p className="text-2xs font-medium text-muted-foreground/60 uppercase tracking-wider">{a.detail.configuredMcpServers}</p>
+            <span className="text-2xs text-muted-foreground/40 tabular-nums">{configuredMcpServers.length}</span>
           </div>
 
           {mcpHint && (
@@ -279,32 +304,30 @@ export default function AgentDetailContent({ agentKey }: { agentKey: string }) {
           )}
 
           {configuredMcpServers.length === 0 ? (
-            <p className="text-xs text-muted-foreground">{a.detail.configuredMcpServersEmpty}</p>
+            <p className="text-2xs text-muted-foreground/50">{a.detail.configuredMcpServersEmpty}</p>
           ) : (
-            <div className="space-y-1.5 max-h-[280px] overflow-y-auto">
+            <div className="space-y-1 max-h-[240px] overflow-y-auto">
               {configuredMcpServers.map((name) => {
                 const sharedWith = (crossAgentMcpMap.get(name) ?? []).filter((n) => n !== agent.name);
                 return (
-                  <div key={name} className="flex items-center gap-2.5 rounded-lg border border-border/40 bg-muted/[0.02] px-3 py-2.5 group/mcp hover:border-border/60 hover:bg-muted/[0.06] hover:shadow-[0_1px_3px_rgba(0,0,0,0.02)] transition-all duration-150">
-                    <div className="w-5 h-5 rounded-md bg-[var(--amber)]/[0.08] flex items-center justify-center shrink-0">
-                      <Server size={10} className="text-[var(--amber)]" />
-                    </div>
-                    <span className="text-xs font-medium text-foreground flex-1 min-w-0 truncate">{name}</span>
+                  <div key={name} className="flex items-center gap-2 rounded-md px-2 py-1.5 group/mcp hover:bg-muted/30 transition-colors duration-100">
+                    <Server size={11} className="text-muted-foreground/40 shrink-0" />
+                    <span className="text-xs text-foreground flex-1 min-w-0 truncate">{name}</span>
                     {sharedWith.length > 0 && (
-                      <div className="flex items-center gap-1">
+                      <div className="flex items-center gap-0.5">
                         {sharedWith.slice(0, 3).map((n) => (
                           <AgentAvatar key={n} name={n} size="sm" />
                         ))}
-                        {sharedWith.length > 3 && <span className="text-2xs text-muted-foreground">+{sharedWith.length - 3}</span>}
+                        {sharedWith.length > 3 && <span className="text-2xs text-muted-foreground/50">+{sharedWith.length - 3}</span>}
                       </div>
                     )}
                     <button
                       type="button"
                       onClick={() => setConfirmMcpRemove(name)}
-                      className="text-2xs text-muted-foreground hover:text-destructive cursor-pointer opacity-0 group-hover/mcp:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded px-1 py-0.5 transition-all duration-150"
+                      className="text-muted-foreground/40 hover:text-destructive cursor-pointer opacity-0 group-hover/mcp:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded p-0.5 transition-all duration-150"
                       aria-label={`${a.detail.mcpServerRemove} ${name}`}
                     >
-                      <Trash2 size={12} />
+                      <Trash2 size={11} />
                     </button>
                   </div>
                 );
@@ -312,50 +335,19 @@ export default function AgentDetailContent({ agentKey }: { agentKey: string }) {
             </div>
           )}
         </div>
-
-        {/* MCP actions */}
-        <div className="flex flex-wrap items-center gap-2">
-          {!isMindOS && (
-            <ActionButton
-              onClick={() => void handleCopySnippet()}
-              disabled={false}
-              busy={false}
-              label={snippetCopied ? a.detail.mcpCopied : a.detail.mcpCopySnippet}
-            />
-          )}
-          <ActionButton
-            onClick={() => void mcp.refresh()}
-            disabled={false}
-            busy={false}
-            label={a.detail.mcpRefresh}
-          />
-          {!isMindOS && (
-            <ActionButton
-              onClick={() => void handleApplyMcpConfig(currentScope, currentTransport)}
-              disabled={mcpBusy}
-              busy={mcpBusy}
-              label={a.detail.mcpReconnect}
-              variant="primary"
-            />
-          )}
-        </div>
-        {!isMindOS && <p className="text-2xs text-muted-foreground truncate">{snippet.path}</p>}
-        {mcpMessage && <p className="text-xs text-muted-foreground animate-in fade-in duration-200">{mcpMessage}</p>}
       </section>
 
       {/* ═══════════ SKILL ASSIGNMENTS ═══════════ */}
-      <section className="rounded-xl border border-border bg-card p-5 space-y-4">
+      <section className="rounded-xl border border-border bg-card p-4 space-y-3">
         <div className="flex items-center justify-between">
-          <h2 className="text-sm font-semibold text-foreground flex items-center gap-2">
-            <div className="w-6 h-6 rounded-md bg-muted/50 flex items-center justify-center">
-              <Zap size={13} className="text-muted-foreground/70" />
-            </div>
+          <h2 className="text-xs font-semibold text-foreground flex items-center gap-2">
+            <Zap size={12} className="text-muted-foreground/50" />
             {a.detail.skillAssignments}
           </h2>
-          <div className="flex items-center gap-2 text-2xs text-muted-foreground/60 tabular-nums">
-            <span className="px-1.5 py-0.5 rounded bg-muted/40">MindOS {skillSummary.total}</span>
-            <span className="px-1.5 py-0.5 rounded bg-emerald-500/[0.06] text-emerald-600 dark:text-emerald-400">{a.detail.skillsEnabled.split(' ')[0]} {skillSummary.enabled}</span>
-            <span className="px-1.5 py-0.5 rounded bg-muted/40">{a.detail.nativeInstalledSkills} {nativeInstalledSkills.length}</span>
+          <div className="flex items-center gap-1.5 text-2xs text-muted-foreground/50 tabular-nums">
+            <span>{skillSummary.enabled}/{skillSummary.total} enabled</span>
+            <span className="text-muted-foreground/25">·</span>
+            <span>{nativeInstalledSkills.length} native</span>
           </div>
         </div>
 
@@ -528,9 +520,26 @@ export default function AgentDetailContent({ agentKey }: { agentKey: string }) {
 
 function DetailLine({ label, value }: { label: string; value: string }) {
   return (
-    <div className="rounded-lg border border-border/60 bg-muted/[0.02] px-3.5 py-2.5 hover:bg-muted/[0.06] transition-colors duration-100">
-      <p className="text-2xs text-muted-foreground/60 mb-1 uppercase tracking-wider">{label}</p>
-      <p className="text-sm text-foreground font-medium truncate">{value}</p>
+    <div className="flex items-baseline gap-2 px-0.5">
+      <span className="text-2xs text-muted-foreground/50 uppercase tracking-wider shrink-0 min-w-[60px]">{label}</span>
+      <span className="text-xs text-foreground/80 font-mono truncate">{value}</span>
     </div>
   );
 }
+
+function formatRelativeTime(iso: string | undefined | null): string {
+  if (!iso) return '—';
+  try {
+    const diff = Date.now() - new Date(iso).getTime();
+    if (diff < 0) return 'just now';
+    const mins = Math.floor(diff / 60000);
+    if (mins < 1) return 'just now';
+    if (mins < 60) return `${mins}m ago`;
+    const hrs = Math.floor(mins / 60);
+    if (hrs < 24) return `${hrs}h ago`;
+    const days = Math.floor(hrs / 24);
+    return `${days}d ago`;
+  } catch {
+    return iso;
+  }
+}

package/app/lib/pi-integration/mcporter.ts

@@ -2,12 +2,11 @@ import os from 'os';
 import path from 'path';
 import { Type } from '@sinclair/typebox';
 import type { AgentTool, AgentToolResult } from '@mariozechner/pi-agent-core';
-import {
-  createRuntime,
-  createCallResult,
-  type Runtime,
-  type ServerToolInfo,
-} from 'mcporter';
+
+// mcporter is ESM-only — must use dynamic import() to avoid CJS resolution failure
+type McporterModule = typeof import('mcporter');
+type Runtime = Awaited<ReturnType<McporterModule['createRuntime']>>;
+type ServerToolInfo = { name: string; description?: string; inputSchema?: unknown };
 
 export interface McporterServerSummary {
   name: string;
@@ -65,6 +64,13 @@ const TOOL_TIMEOUT_MS = 30_000;
 
 let _runtime: Runtime | null = null;
 let _runtimePromise: Promise<Runtime | null> | null = null;
+let _mcporter: McporterModule | null = null;
+
+async function loadMcporter(): Promise<McporterModule> {
+  if (_mcporter) return _mcporter;
+  _mcporter = await import('mcporter');
+  return _mcporter;
+}
 
 async function getRuntime(): Promise<Runtime | null> {
   if (_runtime) return _runtime;
@@ -72,7 +78,8 @@ async function getRuntime(): Promise<Runtime | null> {
 
   _runtimePromise = (async () => {
     try {
-      const rt = await createRuntime({
+      const mod = await loadMcporter();
+      const rt = await mod.createRuntime({
         configPath: MCP_CONFIG_PATH,
         clientInfo: { name: 'mindos', version: '1.0.0' },
       });
@@ -178,7 +185,8 @@ export async function callMcporterTool(
     args,
     timeoutMs: TOOL_TIMEOUT_MS,
   });
-  const result = createCallResult(raw);
+  const mod = await loadMcporter();
+  const result = mod.createCallResult(raw);
   return result.text('\n') ?? JSON.stringify(raw);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geminilight/mindos",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "description": "MindOS — Human-Agent Collaborative Mind System. Local-first knowledge base that syncs your mind to all AI Agents via MCP.",
   "keywords": [
     "mindos",