@geminilight/mindos 0.6.74 → 0.6.75

package/_standalone/components/panels/AgentsPanelHubNav.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import { usePathname, useSearchParams } from 'next/navigation';
+import { Globe, History, LayoutDashboard, MessageSquare, Server, Zap } from 'lucide-react';
+import { PanelNavRow } from './PanelNavRow';
+
+type HubCopy = {
+  navOverview: string;
+  navMcp: string;
+  navSkills: string;
+  navChannels: string;
+  navNetwork: string;
+  navSessions: string;
+  navActivity?: string;
+};
+
+export function AgentsPanelHubNav({
+  copy,
+  connectedCount,
+  mcpEnabled = true,
+  channelsActive = false,
+  onChannelsClick,
+}: {
+  copy: HubCopy;
+  connectedCount: number;
+  mcpEnabled?: boolean;
+  channelsActive?: boolean;
+  onChannelsClick?: () => void;
+}) {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const tab = searchParams.get('tab');
+  const inAgentsRoute = pathname === '/agents';
+
+  // When channels view is active, suppress route-based active states
+  const routeActive = !channelsActive;
+
+  return (
+    <div className="py-2">
+      <PanelNavRow
+        icon={<LayoutDashboard size={14} className={routeActive && inAgentsRoute && (tab === null || tab === 'overview') ? 'text-[var(--amber)]' : 'text-muted-foreground'} />}
+        title={copy.navOverview}
+        badge={<span className="text-2xs tabular-nums text-muted-foreground/60 px-1.5 py-0.5 rounded bg-muted/40 font-medium">{connectedCount}</span>}
+        href="/agents"
+        active={routeActive && inAgentsRoute && (tab === null || tab === 'overview')}
+      />
+      {mcpEnabled && (
+        <PanelNavRow
+          icon={<Server size={14} className={routeActive && inAgentsRoute && tab === 'mcp' ? 'text-[var(--amber)]' : 'text-muted-foreground'} />}
+          title={copy.navMcp}
+          href="/agents?tab=mcp"
+          active={routeActive && inAgentsRoute && tab === 'mcp'}
+        />
+      )}
+      <PanelNavRow
+        icon={<Zap size={14} className={routeActive && inAgentsRoute && tab === 'skills' ? 'text-[var(--amber)]' : 'text-muted-foreground'} />}
+        title={copy.navSkills}
+        href="/agents?tab=skills"
+        active={routeActive && inAgentsRoute && tab === 'skills'}
+      />
+      <PanelNavRow
+        icon={<MessageSquare size={14} className={channelsActive ? 'text-[var(--amber)]' : 'text-muted-foreground'} />}
+        title={copy.navChannels}
+        onClick={onChannelsClick}
+        active={channelsActive}
+      />
+      <PanelNavRow
+        icon={<Globe size={14} className={routeActive && inAgentsRoute && tab === 'a2a' ? 'text-[var(--amber)]' : 'text-muted-foreground'} />}
+        title={copy.navNetwork}
+        href="/agents?tab=a2a"
+        active={routeActive && inAgentsRoute && tab === 'a2a'}
+      />
+      {/* Sessions tab hidden */}
+    </div>
+  );
+}

package/_standalone/components/panels/DiscoverPanel.tsx

@@ -0,0 +1,212 @@
+'use client';
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { useRouter } from 'next/navigation';
+import { Lightbulb, Blocks, Zap, LayoutTemplate, User, Download, RefreshCw, Repeat, Rocket, Search, Handshake, ShieldCheck, ChevronDown } from 'lucide-react';
+import PanelHeader from './PanelHeader';
+import { PanelNavRow, ComingSoonBadge } from './PanelNavRow';
+import { useLocale } from '@/lib/stores/locale-store';
+import { useCases } from '@/components/explore/use-cases.generated';
+import { openAskModal } from '@/hooks/useAskModal';
+import { getPluginRenderers, isRendererEnabled, setRendererEnabled, loadDisabledState } from '@/lib/renderers/registry';
+import { Toggle } from '../settings/Primitives';
+
+interface DiscoverPanelProps {
+  active: boolean;
+  maximized?: boolean;
+  onMaximize?: () => void;
+}
+
+/** Compact use case row */
+function UseCaseRow({
+  icon,
+  title,
+  prompt,
+  tryLabel,
+}: {
+  icon: React.ReactNode;
+  title: string;
+  prompt: string;
+  tryLabel: string;
+}) {
+  return (
+    <div className="group flex items-center gap-2.5 px-4 py-1.5 hover:bg-muted/50 transition-colors rounded-sm mx-1">
+      <span className="text-muted-foreground shrink-0">{icon}</span>
+      <span className="text-xs text-foreground truncate flex-1" title={title}>{title}</span>
+      <button
+        onClick={() => openAskModal(prompt, 'user')}
+        className="opacity-0 group-hover:opacity-100 text-2xs px-2 py-0.5 rounded text-[var(--amber-text)] bg-[var(--amber-dim)] hover:opacity-80 transition-all duration-150 shrink-0"
+      >
+        {tryLabel}
+      </button>
+    </div>
+  );
+}
+
+/** Map use case id → lucide icon */
+const useCaseIcons: Record<string, React.ReactNode> = {
+  c1: <User size={12} />,          // Inject Identity
+  c2: <Download size={12} />,      // Save Information
+  c3: <RefreshCw size={12} />,     // Cross-Agent Handoff
+  c4: <Repeat size={12} />,        // Experience → SOP
+  c5: <Lightbulb size={12} />,     // Capture Ideas
+  c6: <Rocket size={12} />,        // Project Cold Start
+  c7: <Search size={12} />,        // Research & Archive
+  c8: <Handshake size={12} />,     // Network Management
+  c9: <ShieldCheck size={12} />,   // Audit & Correct
+};
+
+export default function DiscoverPanel({ active, maximized, onMaximize }: DiscoverPanelProps) {
+  const { t } = useLocale();
+  const d = t.panels.discover;
+  const e = t.explore;
+  const p = t.panels.plugins;
+  const router = useRouter();
+
+  const [pluginsMounted, setPluginsMounted] = useState(false);
+  const [showPlugins, setShowPlugins] = useState(false);
+  const [, forceUpdate] = useState(0);
+  const [existingFiles, setExistingFiles] = useState<Set<string>>(new Set());
+  const fetchedRef = useRef(false);
+
+  useEffect(() => {
+    loadDisabledState();
+    setPluginsMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (!pluginsMounted || fetchedRef.current) return;
+    fetchedRef.current = true;
+    const entryPaths = getPluginRenderers().map(r => r.entryPath).filter((ep): ep is string => !!ep);
+    if (entryPaths.length === 0) return;
+    fetch('/api/files')
+      .then(r => r.ok ? r.json() : [])
+      .then((allPaths: string[]) => {
+        const pathSet = new Set(allPaths);
+        setExistingFiles(new Set(entryPaths.filter(ep => pathSet.has(ep))));
+      })
+      .catch((err) => { console.warn("[DiscoverPanel] fetch /api/files failed:", err); });
+  }, [pluginsMounted]);
+
+  const handleToggle = useCallback((id: string, enabled: boolean) => {
+    setRendererEnabled(id, enabled);
+    forceUpdate(n => n + 1);
+    window.dispatchEvent(new Event('renderer-state-changed'));
+  }, []);
+
+  const handleOpenPlugin = useCallback((entryPath: string) => {
+    router.push(`/view/${entryPath.split('/').map(encodeURIComponent).join('/')}`);
+  }, [router]);
+
+  const getUseCaseText = (id: string): { title: string; prompt: string } | undefined => {
+    const map: Record<string, { title: string; desc: string; prompt: string }> = {
+      c1: e.c1, c2: e.c2, c3: e.c3, c4: e.c4, c5: e.c5,
+      c6: e.c6, c7: e.c7, c8: e.c8, c9: e.c9,
+    };
+    return map[id];
+  };
+
+  const renderers = pluginsMounted ? getPluginRenderers() : [];
+  const enabledCount = pluginsMounted ? renderers.filter(r => isRendererEnabled(r.id)).length : 0;
+
+  return (
+    <div className={`flex flex-col h-full ${active ? '' : 'hidden'}`}>
+      <PanelHeader title={d.title} maximized={maximized} onMaximize={onMaximize} />
+      <div className="flex-1 overflow-y-auto min-h-0">
+        {/* Navigation entries */}
+        <div className="py-2">
+          <PanelNavRow
+            icon={<Lightbulb size={14} className="text-[var(--amber)]" />}
+            title={d.useCases}
+            badge={<span className="text-2xs tabular-nums text-muted-foreground">{useCases.length}</span>}
+            href="/explore"
+          />
+          <PanelNavRow
+            icon={<Blocks size={14} className="text-muted-foreground" />}
+            title={d.pluginMarket}
+            badge={<ComingSoonBadge label={d.comingSoon} />}
+          />
+          <PanelNavRow
+            icon={<Zap size={14} className="text-muted-foreground" />}
+            title={d.skillMarket}
+            badge={<ComingSoonBadge label={d.comingSoon} />}
+          />
+          <PanelNavRow
+            icon={<LayoutTemplate size={14} className="text-muted-foreground" />}
+            title={d.spaceTemplates}
+            badge={<ComingSoonBadge label={d.comingSoon} />}
+          />
+        </div>
+
+        <div className="mx-4 border-t border-border" />
+
+        {/* Installed extensions (merged from Plugins panel) */}
+        <div className="py-2">
+          <button
+            type="button"
+            onClick={() => setShowPlugins(v => !v)}
+            className="w-full flex items-center gap-1.5 px-4 py-1.5 text-left"
+          >
+            <ChevronDown size={11} className={`text-muted-foreground transition-transform duration-150 ${showPlugins ? '' : '-rotate-90'}`} />
+            <Blocks size={13} className="text-muted-foreground shrink-0" />
+            <span className="text-2xs font-medium text-muted-foreground uppercase tracking-wider flex-1">
+              {p.title}
+            </span>
+            <span className="text-2xs text-muted-foreground tabular-nums">{enabledCount}/{renderers.length}</span>
+          </button>
+          <div className={`grid transition-[grid-template-rows] duration-200 ease-out ${showPlugins ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'}`}>
+            <div className="overflow-hidden" {...(!showPlugins && { inert: true } as React.HTMLAttributes<HTMLDivElement>)}>
+              {renderers.map(r => {
+                const enabled = isRendererEnabled(r.id);
+                const fileExists = r.entryPath ? existingFiles.has(r.entryPath) : false;
+                const canOpen = enabled && r.entryPath && fileExists;
+                return (
+                  <div
+                    key={r.id}
+                    className={`flex items-center gap-2 px-4 py-1.5 mx-1 rounded-sm transition-colors ${canOpen ? 'cursor-pointer hover:bg-muted/50' : ''} ${!enabled ? 'opacity-50' : ''}`}
+                    onClick={canOpen ? () => handleOpenPlugin(r.entryPath!) : undefined}
+                    role={canOpen ? 'link' : undefined}
+                    tabIndex={canOpen ? 0 : undefined}
+                    onKeyDown={canOpen ? (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleOpenPlugin(r.entryPath!); } } : undefined}
+                  >
+                    <span className="text-sm shrink-0" suppressHydrationWarning>{r.icon}</span>
+                    <span className="text-xs text-foreground truncate flex-1" title={r.name}>{r.name}</span>
+                    {r.core ? (
+                      <span className="text-2xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground shrink-0">{p.core}</span>
+                    ) : (
+                      <div onClick={e => e.stopPropagation()}>
+                        <Toggle checked={enabled} onChange={v => handleToggle(r.id, v)} size="sm" />
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+
+        <div className="mx-4 border-t border-border" />
+
+        {/* Quick try — use case list */}
+        <div className="py-2">
+          <div className="px-4 py-1.5">
+            <span className="text-2xs font-medium text-muted-foreground uppercase tracking-wider">{d.useCases}</span>
+          </div>
+          {useCases.map(uc => {
+            const data = getUseCaseText(uc.id);
+            if (!data) return null;
+            return (
+              <UseCaseRow
+                key={uc.id}
+                icon={useCaseIcons[uc.id] || <Lightbulb size={12} />}
+                title={data.title}
+                prompt={data.prompt}
+                tryLabel={d.tryIt}
+              />
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

package/_standalone/components/panels/EchoPanel.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { usePathname } from 'next/navigation';
+import { Footprints, Brain, Eye } from 'lucide-react';
+import PanelHeader from './PanelHeader';
+import { PanelNavRow } from './PanelNavRow';
+import EchoSidebarStats from './EchoSidebarStats';
+import { useLocale } from '@/lib/stores/locale-store';
+import { ECHO_SEGMENT_HREF, ECHO_SEGMENT_ORDER, type EchoSegment } from '@/lib/echo-segments';
+
+interface EchoPanelProps {
+  active: boolean;
+  maximized?: boolean;
+  onMaximize?: () => void;
+}
+
+export default function EchoPanel({ active, maximized, onMaximize }: EchoPanelProps) {
+  const { t } = useLocale();
+  const e = t.panels.echo;
+  const pathname = usePathname() ?? '';
+
+  const rowBySegment: Record<EchoSegment, { icon: ReactNode; title: string }> = {
+    imprint: { icon: <Footprints size={14} />, title: e.imprintTitle },
+    growth: { icon: <Brain size={14} />, title: e.growthTitle },
+    self: { icon: <Eye size={14} />, title: e.selfTitle },
+  };
+
+  return (
+    <div className={`flex flex-col h-full ${active ? '' : 'hidden'}`}>
+      <PanelHeader title={e.title} maximized={maximized} onMaximize={onMaximize} />
+      <div className="flex-1 overflow-y-auto min-h-0 flex flex-col">
+        <div className="flex flex-col gap-0.5 py-1.5">
+          {ECHO_SEGMENT_ORDER.map((segment) => {
+            const row = rowBySegment[segment];
+            const href = ECHO_SEGMENT_HREF[segment];
+            const isActive = pathname === href || pathname.startsWith(`${href}/`);
+            return (
+              <PanelNavRow key={segment} href={href} icon={row.icon} title={row.title} active={isActive} />
+            );
+          })}
+        </div>
+        <div className="mt-auto">
+          <EchoSidebarStats />
+        </div>
+      </div>
+    </div>
+  );
+}

package/_standalone/components/panels/EchoSidebarStats.tsx

@@ -0,0 +1,136 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { TrendingUp, MessageSquare, AlertCircle } from 'lucide-react';
+import type { ContentChangeEvent } from '@/lib/fs';
+import { apiFetch } from '@/lib/api';
+import { useLocale } from '@/lib/stores/locale-store';
+
+interface EchoStats {
+  fileCount: number;
+  unreadChanges: number;
+  sessionCount: number;
+}
+
+export default function EchoSidebarStats() {
+  const [stats, setStats] = useState<EchoStats | null>(null);
+  const [recentEvents, setRecentEvents] = useState<ContentChangeEvent[]>([]);
+  const [loading, setLoading] = useState(true);
+  const { t } = useLocale();
+
+  useEffect(() => {
+    const loadStats = async () => {
+      try {
+        setLoading(true);
+        const [monitoring, changes, sessions] = await Promise.all([
+          apiFetch<any>('/api/monitoring'),
+          apiFetch<any>('/api/changes?op=list&limit=3'),
+          apiFetch<any>('/api/ask-sessions'),
+        ]);
+
+        setStats({
+          fileCount: monitoring?.knowledgeBase?.fileCount ?? 0,
+          unreadChanges: changes?.events?.length ?? 0,
+          sessionCount: Array.isArray(sessions) ? sessions.length : 0,
+        });
+
+        setRecentEvents((changes?.events ?? []).slice(0, 3));
+      } catch (err) {
+        console.warn('[EchoSidebarStats] Failed to load stats:', err);
+        setStats({ fileCount: 0, unreadChanges: 0, sessionCount: 0 });
+        setRecentEvents([]);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadStats();
+    const interval = setInterval(loadStats, 10000); // Refresh every 10s
+    return () => clearInterval(interval);
+  }, []);
+
+  if (loading || !stats) {
+    return (
+      <div className="px-3 py-2 text-xs text-muted-foreground">
+        <div className="h-2 w-20 bg-muted rounded animate-pulse" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-2 px-3 py-3 border-t border-border">
+      {/* Quick Stats */}
+      <div className="grid grid-cols-3 gap-2">
+        <div className="flex flex-col items-center p-1.5 rounded bg-muted/40 hover:bg-muted/60 transition-colors cursor-default">
+          <div className="text-sm font-semibold text-foreground">{stats.fileCount}</div>
+          <div className="text-xs text-muted-foreground truncate">Files</div>
+        </div>
+        <div className="flex flex-col items-center p-1.5 rounded bg-muted/40 hover:bg-muted/60 transition-colors cursor-default">
+          <div className="text-sm font-semibold text-foreground">{stats.unreadChanges}</div>
+          <div className="text-xs text-muted-foreground truncate">Changes</div>
+        </div>
+        <div className="flex flex-col items-center p-1.5 rounded bg-muted/40 hover:bg-muted/60 transition-colors cursor-default">
+          <div className="text-sm font-semibold text-foreground">{stats.sessionCount}</div>
+          <div className="text-xs text-muted-foreground truncate">Chats</div>
+        </div>
+      </div>
+
+      {/* Recent Activity */}
+      {recentEvents.length > 0 && (
+        <div className="flex flex-col gap-1">
+          <div className="text-xs font-medium text-muted-foreground px-0.5">Recent</div>
+          {recentEvents.map((evt) => {
+            const relTime = formatRelativeTime(evt.ts);
+            const iconType = getIconForOp(evt.op);
+            const fileName = evt.path.split('/').pop() || evt.path;
+            return (
+              <div key={evt.id} className="flex items-start gap-2 p-1.5 rounded hover:bg-muted/40 transition-colors text-xs">
+                <span className="text-muted-foreground shrink-0 mt-0.5">{iconType}</span>
+                <div className="min-w-0 flex-1">
+                  <p className="text-foreground truncate font-medium" title={fileName}>{fileName}</p>
+                  <p className="text-muted-foreground text-2xs">{relTime}</p>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function getIconForOp(op: string): React.ReactNode {
+  switch (op) {
+    case 'create':
+      return <TrendingUp size={12} className="text-success" />;
+    case 'write':
+    case 'append':
+      return <AlertCircle size={12} className="text-foreground" />;
+    case 'delete':
+      return <AlertCircle size={12} className="text-destructive" />;
+    case 'rename':
+    case 'move':
+      return <MessageSquare size={12} className="text-muted-foreground" />;
+    default:
+      return <AlertCircle size={12} className="text-muted-foreground" />;
+  }
+}
+
+function formatRelativeTime(isoString: string): string {
+  try {
+    const date = new Date(isoString);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    const diffHours = Math.floor(diffMs / 3600000);
+    const diffDays = Math.floor(diffMs / 86400000);
+
+    if (diffMins < 1) return 'now';
+    if (diffMins < 60) return `${diffMins}m ago`;
+    if (diffHours < 24) return `${diffHours}h ago`;
+    if (diffDays < 7) return `${diffDays}d ago`;
+    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+  } catch {
+    return 'recently';
+  }
+}

package/_standalone/components/panels/IMChannelsView.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
+import { CheckCircle2, Circle, Loader2, AlertCircle, RefreshCw } from 'lucide-react';
+import { useLocale } from '@/lib/stores/locale-store';
+import { PLATFORMS, type PlatformStatus } from '@/lib/im/platforms';
+
+/** Simple sidebar nav list for IM channels — icon + name + status dot. */
+export default function IMChannelsView() {
+  const { t } = useLocale();
+  const im = t.panels.im;
+  const searchParams = useSearchParams();
+  const activePlatform = searchParams.get('platform');
+
+  const [statuses, setStatuses] = useState<PlatformStatus[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+
+  const fetchStatuses = useCallback(async () => {
+    setError(false);
+    try {
+      const res = await fetch('/api/im/status');
+      if (res.ok) {
+        const data = await res.json();
+        setStatuses(data.platforms ?? []);
+      } else {
+        setError(true);
+      }
+    } catch {
+      setError(true);
+    }
+    setLoading(false);
+  }, []);
+
+  useEffect(() => { fetchStatuses(); }, [fetchStatuses]);
+
+  if (loading) {
+    return (
+      <div className="flex justify-center py-8">
+        <Loader2 size={16} className="animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex flex-col items-center gap-2 py-8 px-3">
+        <AlertCircle size={16} className="text-muted-foreground" />
+        <p className="text-2xs text-muted-foreground">{im.fetchError}</p>
+        <button
+          type="button"
+          onClick={() => { setLoading(true); fetchStatuses(); }}
+          className="inline-flex items-center gap-1 text-2xs text-muted-foreground hover:text-foreground transition-colors"
+        >
+          <RefreshCw size={11} /> {im.retry}
+        </button>
+      </div>
+    );
+  }
+
+  const configuredCount = statuses.filter(s => s.connected).length;
+  const getStatus = (id: string) => statuses.find(s => s.platform === id);
+
+  return (
+    <div className="flex flex-col py-1">
+      {/* Section header */}
+      <div className="flex items-center gap-2 px-3 py-1.5 mb-0.5">
+        <span className="text-2xs font-medium text-muted-foreground uppercase tracking-wider">{im.title}</span>
+        {configuredCount > 0 && (
+          <span className="text-2xs text-muted-foreground/60">{configuredCount} {im.connected}</span>
+        )}
+      </div>
+
+      {/* Platform list */}
+      <div className="flex flex-col">
+        {PLATFORMS.map(({ id, name, icon }) => {
+          const status = getStatus(id);
+          const isConnected = status?.connected ?? false;
+          const isActive = activePlatform === id;
+
+          return (
+            <Link
+              key={id}
+              href={`/agents?tab=channels&platform=${id}`}
+              className={`
+                relative flex items-center gap-2.5 px-3 py-2 text-left rounded-sm transition-colors
+                ${isActive
+                  ? 'bg-[var(--amber-dim)]/40 pl-3.5'
+                  : 'hover:bg-muted/50'
+                }
+              `}
+            >
+              {isActive && (
+                <span
+                  className="pointer-events-none absolute bottom-[22%] left-0 top-[22%] w-0.5 rounded-r-full bg-[var(--amber)]"
+                  aria-hidden
+                />
+              )}
+              <span className="text-sm">{icon}</span>
+              <span className="text-sm flex-1 truncate text-foreground">{name}</span>
+              {isConnected ? (
+                <CheckCircle2 size={14} className="text-success shrink-0" />
+              ) : (
+                <Circle size={14} className="text-border shrink-0" />
+              )}
+            </Link>
+          );
+        })}
+      </div>
+    </div>
+  );
+}