@geminilight/mindos 0.6.74 → 0.6.75

package/_standalone/components/agents/agent-activity-shared.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+/**
+ * Shared types and helpers for Agent Activity UI components.
+ * Used by both AgentActivitySection (full audit log) and RecentActivityFeed (compact list).
+ */
+
+import { Terminal, FileEdit, FilePlus, Trash2, Search, Clock } from 'lucide-react';
+
+// ─── Types ─────────────────────────────────────────────────────────────────────
+
+export interface AgentOp {
+  id?: string;
+  ts: string;
+  tool: string;
+  params: Record<string, unknown>;
+  result: 'ok' | 'error';
+  message?: string;
+  agentName?: string;
+}
+
+export type OpKind = 'read' | 'write' | 'create' | 'delete' | 'search' | 'other';
+
+// ─── Helpers ───────────────────────────────────────────────────────────────────
+
+export function opKind(tool: string): OpKind {
+  if (/search/.test(tool)) return 'search';
+  if (/read|list|get/.test(tool)) return 'read';
+  if (/create/.test(tool)) return 'create';
+  if (/delete/.test(tool)) return 'delete';
+  if (/write|update|insert|append/.test(tool)) return 'write';
+  return 'other';
+}
+
+export const KIND_LABEL: Record<string, Record<OpKind, string>> = {
+  en: { read: 'Read', write: 'Write', create: 'Create', delete: 'Delete', search: 'Search', other: 'Other' },
+  zh: { read: '读取', write: '写入', create: '创建', delete: '删除', search: '搜索', other: '其他' },
+};
+
+export const KIND_STYLE: Record<OpKind, { bg: string; text: string; border: string }> = {
+  read:   { bg: 'rgba(138,180,216,0.10)', text: 'var(--tool-read)', border: 'rgba(138,180,216,0.25)' },
+  write:  { bg: 'rgba(200,135,58,0.10)',  text: 'var(--amber)', border: 'rgba(200,135,58,0.25)' },
+  create: { bg: 'rgba(122,173,128,0.10)', text: 'var(--success)', border: 'rgba(122,173,128,0.25)' },
+  delete: { bg: 'rgba(200,80,80,0.10)',   text: 'var(--error)', border: 'rgba(200,80,80,0.25)' },
+  search: { bg: 'rgba(200,160,216,0.10)', text: 'var(--tool-search)', border: 'rgba(200,160,216,0.25)' },
+  other:  { bg: 'var(--muted)', text: 'var(--muted-foreground)', border: 'var(--border)' },
+};
+
+export const KIND_COLOR: Record<OpKind, string> = {
+  read: 'text-blue-400',
+  write: 'text-[var(--amber)]',
+  create: 'text-[var(--success)]',
+  delete: 'text-[var(--error)]',
+  search: 'text-purple-400',
+  other: 'text-muted-foreground',
+};
+
+export function OpIcon({ kind, size = 13 }: { kind: OpKind; size?: number }) {
+  if (kind === 'read')   return <Clock size={size} />;
+  if (kind === 'write')  return <FileEdit size={size} />;
+  if (kind === 'create') return <FilePlus size={size} />;
+  if (kind === 'delete') return <Trash2 size={size} />;
+  if (kind === 'search') return <Search size={size} />;
+  return <Terminal size={size} />;
+}
+
+export function formatTs(ts: string): string {
+  try {
+    const d = new Date(ts);
+    return d.toLocaleString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit' });
+  } catch { return ts; }
+}
+
+export function relativeTs(ts: string): string {
+  const diff = Date.now() - new Date(ts).getTime();
+  const m = Math.floor(diff / 60000);
+  const h = Math.floor(diff / 3600000);
+  const d = Math.floor(diff / 86400000);
+  if (m < 1) return '<1m';
+  if (m < 60) return `${m}m`;
+  if (h < 24) return `${h}h`;
+  return `${d}d`;
+}
+
+export function getFilePath(params: Record<string, unknown>): string | null {
+  return typeof params.path === 'string' ? params.path : null;
+}
+
+/** Compact colored badge showing operation kind with icon + localized label. */
+export function KindBadge({ kind, locale, size = 'md' }: { kind: OpKind; locale?: string; size?: 'sm' | 'md' }) {
+  const style = KIND_STYLE[kind];
+  const lang = locale?.startsWith('zh') ? 'zh' : 'en';
+  const label = KIND_LABEL[lang][kind];
+  const iconSize = size === 'sm' ? 9 : 10;
+  const fontSize = size === 'sm' ? '0.6rem' : '0.68rem';
+  const padding = size === 'sm' ? '1px 6px' : '2px 8px';
+
+  return (
+    <span className="font-display" style={{
+      display: 'inline-flex', alignItems: 'center', gap: 3,
+      padding, borderRadius: 999, fontSize,
+      fontWeight: 600,
+      background: style.bg, color: style.text, border: `1px solid ${style.border}`,
+      flexShrink: 0, whiteSpace: 'nowrap',
+    }}>
+      <OpIcon kind={kind} size={iconSize} />
+      {label}
+    </span>
+  );
+}

package/_standalone/components/agents/agent-detail-primitives.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+/**
+ * Shared primitives and utility functions for agent detail sub-sections.
+ */
+
+/** Simple label–value pair used across detail sections. */
+export function DetailLine({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex items-baseline gap-2 px-0.5 min-w-0">
+      <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 min-w-0">{value}</span>
+    </div>
+  );
+}
+
+/** Compact stat card for metric display. */
+export function StatCard({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="rounded-lg border border-border/40 bg-muted/10 px-3 py-2.5">
+      <p className="text-2xs text-muted-foreground/50 uppercase tracking-wider mb-0.5">{label}</p>
+      <p className="text-sm font-medium text-foreground font-mono tabular-nums">{value}</p>
+    </div>
+  );
+}
+
+/** Format an ISO timestamp as relative time (e.g. "5m ago", "2h ago"). */
+export 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/_standalone/components/ask/AgentSelectorCapsule.tsx

@@ -0,0 +1,218 @@
+'use client';
+
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { Bot, ChevronDown, X, Check } from 'lucide-react';
+import type { AcpAgentSelection } from '@/hooks/useAskModal';
+import type { DetectedAgent } from '@/hooks/useAcpDetection';
+import { useLocale } from '@/lib/stores/locale-store';
+
+interface AgentSelectorCapsuleProps {
+  selectedAgent: AcpAgentSelection | null;
+  onSelect: (agent: AcpAgentSelection | null) => void;
+  installedAgents: DetectedAgent[];
+  loading?: boolean;
+}
+
+interface DropdownPos {
+  top: number;
+  left: number;
+  direction: 'up' | 'down';
+}
+
+export default function AgentSelectorCapsule({
+  selectedAgent,
+  onSelect,
+  installedAgents,
+  loading = false,
+}: AgentSelectorCapsuleProps) {
+  const { t } = useLocale();
+  const p = t.panels.agents;
+  const [open, setOpen] = useState(false);
+  const [pos, setPos] = useState<DropdownPos | null>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Position the dropdown relative to the trigger, rendered via portal
+  useEffect(() => {
+    if (!open || !triggerRef.current) return;
+    const rect = triggerRef.current.getBoundingClientRect();
+    const spaceAbove = rect.top;
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const estimatedH = 200; // approximate dropdown height
+    const direction: 'up' | 'down' = spaceAbove > spaceBelow && spaceAbove > estimatedH ? 'up' : 'down';
+
+    setPos({
+      left: rect.left,
+      top: direction === 'up' ? rect.top - 6 : rect.bottom + 6,
+      direction,
+    });
+  }, [open]);
+
+  // Close dropdown on outside click
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (
+        triggerRef.current && !triggerRef.current.contains(target) &&
+        dropdownRef.current && !dropdownRef.current.contains(target)
+      ) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [open]);
+
+  // Close on Escape
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setOpen(false);
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [open]);
+
+  // Reposition on scroll/resize while open
+  useEffect(() => {
+    if (!open || !triggerRef.current) return;
+    const reposition = () => {
+      if (!triggerRef.current) return;
+      const rect = triggerRef.current.getBoundingClientRect();
+      const spaceAbove = rect.top;
+      const spaceBelow = window.innerHeight - rect.bottom;
+      const estimatedH = 200;
+      const direction: 'up' | 'down' = spaceAbove > spaceBelow && spaceAbove > estimatedH ? 'up' : 'down';
+      setPos({
+        left: rect.left,
+        top: direction === 'up' ? rect.top - 6 : rect.bottom + 6,
+        direction,
+      });
+    };
+    window.addEventListener('scroll', reposition, true);
+    window.addEventListener('resize', reposition);
+    return () => {
+      window.removeEventListener('scroll', reposition, true);
+      window.removeEventListener('resize', reposition);
+    };
+  }, [open]);
+
+  const handleSelectDefault = useCallback(() => {
+    onSelect(null);
+    setOpen(false);
+  }, [onSelect]);
+
+  const handleSelectAgent = useCallback((agent: DetectedAgent) => {
+    onSelect({ id: agent.id, name: agent.name });
+    setOpen(false);
+  }, [onSelect]);
+
+  const handleClear = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+    onSelect(null);
+  }, [onSelect]);
+
+  const isDefault = !selectedAgent;
+  const displayName = selectedAgent?.name ?? p.acpDefaultAgent;
+
+  // Only show if there are installed agents to choose from
+  if (!loading && installedAgents.length === 0 && !selectedAgent) return null;
+
+  const dropdown = open && pos ? (
+    <div
+      ref={dropdownRef}
+      role="listbox"
+      aria-label={p.acpSelectAgent}
+      className="fixed z-50 min-w-[180px] max-w-[240px] rounded-lg border border-border bg-card shadow-lg py-1 animate-in fade-in-0 zoom-in-95 duration-100"
+      style={{
+        left: pos.left,
+        ...(pos.direction === 'up'
+          ? { bottom: window.innerHeight - pos.top }
+          : { top: pos.top }),
+      }}
+    >
+      {/* Default MindOS option */}
+      <button
+        type="button"
+        role="option"
+        aria-selected={isDefault}
+        onClick={handleSelectDefault}
+        className="flex w-full items-center gap-2 px-3 py-1.5 text-xs text-left transition-colors hover:bg-muted"
+      >
+        <Bot size={12} className="shrink-0 text-muted-foreground" />
+        <span className="flex-1 truncate font-medium">{p.acpDefaultAgent}</span>
+        {isDefault && <Check size={11} className="shrink-0 text-[var(--amber)]" />}
+      </button>
+
+      {/* Divider */}
+      {installedAgents.length > 0 && (
+        <div className="mx-2 my-1 border-t border-border/60" />
+      )}
+
+      {/* Installed ACP agents */}
+      {installedAgents.map((agent) => {
+        const isSelected = selectedAgent?.id === agent.id;
+        return (
+          <button
+            key={agent.id}
+            type="button"
+            role="option"
+            aria-selected={isSelected}
+            onClick={() => handleSelectAgent(agent)}
+            className="flex w-full items-center gap-2 px-3 py-1.5 text-xs text-left transition-colors hover:bg-muted"
+          >
+            <span className="w-2 h-2 rounded-full bg-[var(--success)] shrink-0" />
+            <span className="flex-1 truncate">{agent.name}</span>
+            {isSelected && <Check size={11} className="shrink-0 text-[var(--amber)]" />}
+          </button>
+        );
+      })}
+    </div>
+  ) : null;
+
+  return (
+    <>
+      <button
+        ref={triggerRef}
+        type="button"
+        onClick={() => setOpen(v => !v)}
+        className={`
+          inline-flex items-center gap-1 rounded-full px-2.5 py-0.5
+          text-2xs font-medium transition-colors
+          border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring
+          ${isDefault
+            ? 'bg-muted/50 border-border/50 text-muted-foreground hover:bg-muted hover:text-foreground'
+            : 'bg-[var(--amber)]/10 border-[var(--amber)]/25 text-foreground hover:bg-[var(--amber)]/15'
+          }
+        `}
+        title={p.acpChangeAgent}
+        aria-expanded={open}
+        aria-haspopup="listbox"
+      >
+        {isDefault ? (
+          <Bot size={11} className="shrink-0 text-muted-foreground" />
+        ) : (
+          <span className="w-1.5 h-1.5 rounded-full bg-[var(--success)] shrink-0" />
+        )}
+        <span className="truncate max-w-[120px]">{displayName}</span>
+        {selectedAgent ? (
+          <span
+            role="button"
+            tabIndex={0}
+            onClick={handleClear}
+            onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleClear(e as unknown as React.MouseEvent); } }}
+            className="p-0.5 -mr-1 rounded-full text-muted-foreground hover:text-foreground transition-colors"
+            aria-label={`Remove ${selectedAgent.name}`}
+          >
+            <X size={9} />
+          </span>
+        ) : (
+          <ChevronDown size={10} className="shrink-0 text-muted-foreground" />
+        )}
+      </button>
+      {typeof document !== 'undefined' && dropdown && createPortal(dropdown, document.body)}
+    </>
+  );
+}