@geminilight/mindos 0.5.52 → 0.5.55

package/app/components/panels/AgentsPanelAgentGroups.tsx

@@ -0,0 +1,116 @@
+'use client';
+
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import type { AgentInfo } from '../settings/types';
+import type { McpContextValue } from '@/hooks/useMcpData';
+import AgentsPanelAgentListRow, { type AgentsPanelAgentListRowCopy } from './AgentsPanelAgentListRow';
+
+type AgentsCopy = {
+  rosterLabel: string;
+  sectionConnected: string;
+  sectionDetected: string;
+  sectionNotDetected: string;
+};
+
+export function AgentsPanelAgentGroups({
+  connected,
+  detected,
+  notFound,
+  onOpenDetail,
+  selectedAgentKey,
+  mcp,
+  listCopy,
+  showNotDetected,
+  setShowNotDetected,
+  p,
+}: {
+  connected: AgentInfo[];
+  detected: AgentInfo[];
+  notFound: AgentInfo[];
+  onOpenDetail?: (key: string) => void;
+  selectedAgentKey?: string | null;
+  mcp: Pick<McpContextValue, 'installAgent'>;
+  listCopy: AgentsPanelAgentListRowCopy;
+  showNotDetected: boolean;
+  setShowNotDetected: (v: boolean | ((prev: boolean) => boolean)) => void;
+  p: AgentsCopy;
+}) {
+  const open = onOpenDetail ?? (() => {});
+
+  return (
+    <div>
+      <div className="px-0 py-1 mb-0.5">
+        <span className="text-2xs font-semibold text-muted-foreground uppercase tracking-wider">{p.rosterLabel}</span>
+      </div>
+      {connected.length > 0 && (
+        <section className="mb-3">
+          <h3 className="text-[11px] font-medium text-muted-foreground/90 uppercase tracking-wider mb-2 pl-0.5">
+            {p.sectionConnected} ({connected.length})
+          </h3>
+          <div className="space-y-1.5">
+            {connected.map(agent => (
+              <AgentsPanelAgentListRow
+                key={agent.key}
+                agent={agent}
+                agentStatus="connected"
+                selected={selectedAgentKey === agent.key}
+                onOpenDetail={() => open(agent.key)}
+                onInstallAgent={mcp.installAgent}
+                copy={listCopy}
+              />
+            ))}
+          </div>
+        </section>
+      )}
+
+      {detected.length > 0 && (
+        <section className="mb-3">
+          <h3 className="text-[11px] font-medium text-muted-foreground/90 uppercase tracking-wider mb-2 pl-0.5">
+            {p.sectionDetected} ({detected.length})
+          </h3>
+          <div className="space-y-1.5">
+            {detected.map(agent => (
+              <AgentsPanelAgentListRow
+                key={agent.key}
+                agent={agent}
+                agentStatus="detected"
+                selected={selectedAgentKey === agent.key}
+                onOpenDetail={() => open(agent.key)}
+                onInstallAgent={mcp.installAgent}
+                copy={listCopy}
+              />
+            ))}
+          </div>
+        </section>
+      )}
+
+      {notFound.length > 0 && (
+        <section>
+          <button
+            type="button"
+            onClick={() => setShowNotDetected(!showNotDetected)}
+            className="flex items-center gap-1 text-[11px] font-medium text-muted-foreground uppercase tracking-wider mb-2 hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm pl-0.5"
+          >
+            {showNotDetected ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
+            {p.sectionNotDetected} ({notFound.length})
+          </button>
+          {showNotDetected && (
+            <div className="space-y-1.5">
+              {notFound.map(agent => (
+                <AgentsPanelAgentListRow
+                  key={agent.key}
+                  agent={agent}
+                  agentStatus="notFound"
+                  selected={selectedAgentKey === agent.key}
+                  onOpenDetail={() => open(agent.key)}
+                  onInstallAgent={mcp.installAgent}
+                  copy={listCopy}
+                />
+              ))}
+            </div>
+          )}
+        </section>
+      )}
+    </div>
+  );
+}

package/app/components/panels/AgentsPanelAgentListRow.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import { useState } from 'react';
+import { ChevronRight, Loader2 } from 'lucide-react';
+import type { AgentInfo } from '../settings/types';
+
+export type AgentsPanelAgentListStatus = 'connected' | 'detected' | 'notFound';
+
+export interface AgentsPanelAgentListRowCopy {
+  installing: string;
+  install: (name: string) => string;
+}
+
+export default function AgentsPanelAgentListRow({
+  agent,
+  agentStatus,
+  selected = false,
+  onOpenDetail,
+  onInstallAgent,
+  copy,
+}: {
+  agent: AgentInfo;
+  agentStatus: AgentsPanelAgentListStatus;
+  selected?: boolean;
+  onOpenDetail: () => void;
+  onInstallAgent: (key: string) => Promise<boolean>;
+  copy: AgentsPanelAgentListRowCopy;
+}) {
+  const dot =
+    agentStatus === 'connected' ? 'bg-emerald-500' : agentStatus === 'detected' ? 'bg-amber-500' : 'bg-zinc-400';
+
+  return (
+    <div
+      className={`
+        group flex items-center gap-0 rounded-xl border transition-all duration-150
+        ${selected
+          ? 'border-border ring-2 ring-ring/50 bg-[var(--amber-dim)]/45'
+          : 'border-border/70 bg-card/50 hover:border-border hover:bg-muted/25'}
+      `}
+    >
+      <button
+        type="button"
+        onClick={onOpenDetail}
+        className="flex flex-1 min-w-0 items-center gap-2.5 text-left rounded-xl pl-3 pr-2 py-2.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      >
+        <span className={`w-2 h-2 rounded-full shrink-0 ring-2 ring-background ${dot}`} />
+        <span className="text-sm font-medium text-foreground truncate leading-tight">{agent.name}</span>
+        {agentStatus === 'connected' && agent.transport && (
+          <span className="text-2xs font-mono tabular-nums px-1.5 py-0.5 rounded-md bg-muted/90 text-muted-foreground shrink-0 border border-border/50">
+            {agent.transport}
+          </span>
+        )}
+        <span className="flex-1 min-w-[4px]" />
+        <ChevronRight
+          size={15}
+          className={`shrink-0 transition-opacity duration-150 ${selected ? 'text-[var(--amber)] opacity-90' : 'text-muted-foreground/45 group-hover:text-muted-foreground/80'}`}
+          aria-hidden
+        />
+      </button>
+
+      {agentStatus === 'detected' && (
+        <div className="pr-2 py-2 shrink-0">
+          <AgentInstallButton agentKey={agent.key} agentName={agent.name} onInstallAgent={onInstallAgent} copy={copy} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function AgentInstallButton({
+  agentKey,
+  agentName,
+  onInstallAgent,
+  copy,
+}: {
+  agentKey: string;
+  agentName: string;
+  onInstallAgent: (key: string) => Promise<boolean>;
+  copy: AgentsPanelAgentListRowCopy;
+}) {
+  const [installing, setInstalling] = useState(false);
+
+  const handleInstall = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setInstalling(true);
+    await onInstallAgent(agentKey);
+    setInstalling(false);
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={handleInstall}
+      disabled={installing}
+      className="flex items-center gap-1 px-2 py-1.5 text-2xs rounded-lg font-medium text-[var(--amber-foreground)] disabled:opacity-50 transition-colors shrink-0 bg-[var(--amber)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+    >
+      {installing ? <Loader2 size={10} className="animate-spin" /> : null}
+      {installing ? copy.installing : copy.install(agentName)}
+    </button>
+  );
+}

package/app/components/panels/AgentsPanelHubNav.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { type RefObject } from 'react';
+import { LayoutDashboard, Server, Zap } from 'lucide-react';
+import { PanelNavRow } from './PanelNavRow';
+
+type HubCopy = {
+  navOverview: string;
+  navMcp: string;
+  navSkills: string;
+};
+
+export function AgentsPanelHubNav({
+  copy,
+  connectedCount,
+  overviewRef,
+  skillsRef,
+  scrollTo,
+  openAdvancedConfig,
+}: {
+  copy: HubCopy;
+  connectedCount: number;
+  overviewRef: RefObject<HTMLDivElement | null>;
+  skillsRef: RefObject<HTMLDivElement | null>;
+  scrollTo: (el: HTMLElement | null) => void;
+  openAdvancedConfig: () => void;
+}) {
+  return (
+    <div className="py-2">
+      <PanelNavRow
+        icon={<LayoutDashboard size={14} className="text-[var(--amber)]" />}
+        title={copy.navOverview}
+        badge={<span className="text-2xs tabular-nums text-muted-foreground">{connectedCount}</span>}
+        onClick={() => scrollTo(overviewRef.current)}
+      />
+      <PanelNavRow
+        icon={<Server size={14} className="text-muted-foreground" />}
+        title={copy.navMcp}
+        onClick={openAdvancedConfig}
+      />
+      <PanelNavRow
+        icon={<Zap size={14} className="text-muted-foreground" />}
+        title={copy.navSkills}
+        onClick={() => scrollTo(skillsRef.current)}
+      />
+    </div>
+  );
+}

package/app/components/panels/DiscoverPanel.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import Link from 'next/link';
-import { Lightbulb, Blocks, Zap, LayoutTemplate, ChevronRight, User, Download, RefreshCw, Repeat, Rocket, Search, Handshake, ShieldCheck } from 'lucide-react';
+import { Lightbulb, Blocks, Zap, LayoutTemplate, User, Download, RefreshCw, Repeat, Rocket, Search, Handshake, ShieldCheck } from 'lucide-react';
 import PanelHeader from './PanelHeader';
+import { PanelNavRow, ComingSoonBadge } from './PanelNavRow';
 import { useLocale } from '@/lib/LocaleContext';
 import { useCases } from '@/components/explore/use-cases';
 import { openAskModal } from '@/hooks/useAskModal';
@@ -13,46 +13,6 @@ interface DiscoverPanelProps {
   onMaximize?: () => void;
 }
 
-/** Navigation entry — clickable row linking to a page or showing coming soon */
-function NavEntry({
-  icon,
-  title,
-  badge,
-  href,
-  onClick,
-}: {
-  icon: React.ReactNode;
-  title: string;
-  badge?: React.ReactNode;
-  href?: string;
-  onClick?: () => void;
-}) {
-  const content = (
-    <>
-      <span className="flex items-center justify-center w-7 h-7 rounded-md bg-muted shrink-0">{icon}</span>
-      <span className="text-sm font-medium text-foreground flex-1">{title}</span>
-      {badge}
-      <ChevronRight size={14} className="text-muted-foreground shrink-0" />
-    </>
-  );
-
-  const className = "flex items-center gap-3 px-4 py-2.5 hover:bg-muted/50 transition-colors cursor-pointer";
-
-  if (href) {
-    return <Link href={href} className={className}>{content}</Link>;
-  }
-  return <button onClick={onClick} className={`${className} w-full`}>{content}</button>;
-}
-
-/** Coming soon badge */
-function ComingSoonBadge({ label }: { label: string }) {
-  return (
-    <span className="text-2xs px-2 py-0.5 rounded-full bg-muted text-muted-foreground shrink-0">
-      {label}
-    </span>
-  );
-}
-
 /** Compact use case row */
 function UseCaseRow({
   icon,
@@ -112,23 +72,23 @@ export default function DiscoverPanel({ active, maximized, onMaximize }: Discove
       <div className="flex-1 overflow-y-auto min-h-0">
         {/* Navigation entries */}
         <div className="py-2">
-          <NavEntry
+          <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"
           />
-          <NavEntry
+          <PanelNavRow
             icon={<Blocks size={14} className="text-muted-foreground" />}
             title={d.pluginMarket}
             badge={<ComingSoonBadge label={d.comingSoon} />}
           />
-          <NavEntry
+          <PanelNavRow
             icon={<Zap size={14} className="text-muted-foreground" />}
             title={d.skillMarket}
             badge={<ComingSoonBadge label={d.comingSoon} />}
           />
-          <NavEntry
+          <PanelNavRow
             icon={<LayoutTemplate size={14} className="text-muted-foreground" />}
             title={d.spaceTemplates}
             badge={<ComingSoonBadge label={d.comingSoon} />}

package/app/components/panels/EchoPanel.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { usePathname } from 'next/navigation';
+import { UserRound, Bookmark, Sun, History, Brain } from 'lucide-react';
+import PanelHeader from './PanelHeader';
+import { PanelNavRow } from './PanelNavRow';
+import { useLocale } from '@/lib/LocaleContext';
+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 }> = {
+    'about-you': { icon: <UserRound size={14} />, title: e.aboutYouTitle },
+    continued: { icon: <Bookmark size={14} />, title: e.continuedTitle },
+    daily: { icon: <Sun size={14} />, title: e.dailyEchoTitle },
+    'past-you': { icon: <History size={14} />, title: e.pastYouTitle },
+    growth: { icon: <Brain size={14} />, title: e.intentGrowthTitle },
+  };
+
+  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">
+        <div className="flex flex-col py-1">
+          {ECHO_SEGMENT_ORDER.map((segment) => {
+            const row = rowBySegment[segment];
+            const href = ECHO_SEGMENT_HREF[segment];
+            const isActive = pathname === href || pathname.startsWith(`${href}/`);
+            return (
+              <div key={segment} className="border-b border-border/60 last:border-b-0">
+                <PanelNavRow href={href} icon={row.icon} title={row.title} active={isActive} />
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

package/app/components/panels/PanelNavRow.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import Link from 'next/link';
+import { ChevronRight } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+/** Row matching Discover panel nav: icon tile, title, optional badge, chevron. */
+export function PanelNavRow({
+  icon,
+  title,
+  badge,
+  href,
+  onClick,
+  active,
+}: {
+  icon: ReactNode;
+  title: string;
+  badge?: React.ReactNode;
+  href?: string;
+  onClick?: () => void;
+  /** When true, row shows selected state (e.g. current Echo segment). */
+  active?: boolean;
+}) {
+  const content = (
+    <>
+      <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-muted">{icon}</span>
+      <span className="flex-1 text-left text-sm font-medium text-foreground">{title}</span>
+      {badge}
+      <ChevronRight size={14} className="shrink-0 text-muted-foreground" />
+    </>
+  );
+
+  const showRail = Boolean(active && href);
+
+  const className = cn(
+    'relative flex items-center gap-3 py-2.5 transition-colors duration-150 rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+    showRail ? 'bg-[var(--amber-dim)]/40 pl-3.5 pr-4 text-foreground' : 'px-4',
+    href && !showRail && 'cursor-pointer hover:bg-muted/50',
+    showRail && 'cursor-default',
+    !href && 'cursor-pointer hover:bg-muted/50',
+  );
+
+  if (href) {
+    return (
+      <Link href={href} className={className} aria-current={active ? 'page' : undefined}>
+        {showRail ? (
+          <span
+            className="pointer-events-none absolute bottom-[22%] left-0 top-[22%] w-0.5 rounded-r-full bg-[var(--amber)]"
+            aria-hidden
+          />
+        ) : null}
+        {content}
+      </Link>
+    );
+  }
+  return (
+    <button type="button" onClick={onClick} className={cn(className, 'w-full')}>
+      {content}
+    </button>
+  );
+}
+
+export function ComingSoonBadge({ label }: { label: string }) {
+  return (
+    <span className="text-2xs px-2 py-0.5 rounded-full bg-muted text-muted-foreground shrink-0">{label}</span>
+  );
+}

package/app/components/panels/agents-panel-resolve-status.ts

@@ -0,0 +1,13 @@
+export type AgentsPanelAgentDetailStatus = 'connected' | 'detected' | 'notFound';
+
+export function resolveAgentDetailStatus(
+  key: string,
+  connected: { key: string }[],
+  detected: { key: string }[],
+  notFound: { key: string }[],
+): AgentsPanelAgentDetailStatus | null {
+  if (connected.some(a => a.key === key)) return 'connected';
+  if (detected.some(a => a.key === key)) return 'detected';
+  if (notFound.some(a => a.key === key)) return 'notFound';
+  return null;
+}

package/app/hooks/useSettingsAiAvailable.ts

@@ -0,0 +1,29 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { isAiConfiguredForAsk, type SettingsJsonForAi } from '@/lib/settings-ai-client';
+
+export function useSettingsAiAvailable(): { ready: boolean; loading: boolean } {
+  const [ready, setReady] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let cancelled = false;
+    fetch('/api/settings', { cache: 'no-store' })
+      .then((r) => r.json())
+      .then((d: SettingsJsonForAi) => {
+        if (!cancelled) setReady(isAiConfiguredForAsk(d));
+      })
+      .catch(() => {
+        if (!cancelled) setReady(false);
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  return { ready, loading };
+}

package/app/lib/echo-insight-prompt.ts

@@ -0,0 +1,44 @@
+import type { EchoSegment } from '@/lib/echo-segments';
+
+export function buildEchoInsightUserPrompt(opts: {
+  locale: 'en' | 'zh';
+  segment: EchoSegment;
+  segmentTitle: string;
+  factsHeading: string;
+  emptyTitle: string;
+  emptyBody: string;
+  continuedDrafts: string;
+  continuedTodos: string;
+  subEmptyHint: string;
+  dailyLineLabel: string;
+  dailyLine: string;
+  growthIntentLabel: string;
+  growthIntent: string;
+}): string {
+  const lang = opts.locale === 'zh' ? 'Chinese' : 'English';
+  const lines: string[] = [
+    `Echo section: ${opts.segmentTitle}`,
+    `${opts.factsHeading}: ${opts.emptyTitle}`,
+    opts.emptyBody,
+  ];
+
+  if (opts.segment === 'continued') {
+    lines.push(`${opts.continuedDrafts} — ${opts.subEmptyHint}`, `${opts.continuedTodos} — ${opts.subEmptyHint}`);
+  }
+  if (opts.segment === 'daily' && opts.dailyLine.trim()) {
+    lines.push(`${opts.dailyLineLabel}: ${opts.dailyLine.trim()}`);
+  }
+  if (opts.segment === 'growth' && opts.growthIntent.trim()) {
+    lines.push(`${opts.growthIntentLabel}: ${opts.growthIntent.trim()}`);
+  }
+
+  const context = lines.join('\n\n');
+
+  return `You are a reflective assistant inside MindOS Echo (a personal, local-first notes companion). The user is viewing one Echo section. Below is exactly what they see on screen right now—it may be an empty-state placeholder until indexing fills the list.
+
+--- Visible context ---
+${context}
+---
+
+Write a short insight in ${lang} as Markdown (under 220 words). Tone: warm, restrained, "quiet notebook"—not a hype coach. If the context is only generic empty copy, acknowledge that briefly and offer 2–3 reflection prompts instead of inventing files or facts. Do not claim you read their whole library. Prefer answering from this context; avoid unnecessary tool use.`;
+}

package/app/lib/echo-segments.ts

@@ -0,0 +1,27 @@
+/**
+ * Echo content routes: segment slugs and validation.
+ * Keep in sync with `wiki/specs/spec-echo-content-pages.md`.
+ */
+
+export const ECHO_SEGMENT_IDS = ['about-you', 'continued', 'daily', 'past-you', 'growth'] as const;
+
+export type EchoSegment = (typeof ECHO_SEGMENT_IDS)[number];
+
+export const ECHO_SEGMENT_ORDER: readonly EchoSegment[] = ECHO_SEGMENT_IDS;
+
+/** App Router paths for each segment (single source for panel + in-page nav). */
+export const ECHO_SEGMENT_HREF: Record<EchoSegment, string> = {
+  'about-you': '/echo/about-you',
+  continued: '/echo/continued',
+  daily: '/echo/daily',
+  'past-you': '/echo/past-you',
+  growth: '/echo/growth',
+};
+
+export function isEchoSegment(value: string): value is EchoSegment {
+  return (ECHO_SEGMENT_IDS as readonly string[]).includes(value);
+}
+
+export function defaultEchoSegment(): EchoSegment {
+  return 'about-you';
+}