[Init] Initial commit - NetMesh terminal manager

components/systemManager/SystemPanelUi.tsx

@@ -0,0 +1,625 @@
+import { Loader2, RefreshCw, Search, Unplug } from 'lucide-react';
+import React, { memo, useEffect, useRef, useState, type ReactNode } from 'react';
+import { cn } from '../../lib/utils';
+import { Input } from '../ui/input';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
+
+function splitPanelMessage(message: string): string[] {
+  return message.match(/[^。.!?]+[。.!?]?/g)?.map((line) => line.trim()).filter(Boolean) ?? [message];
+}
+
+function SystemPanelMessage({
+  message,
+  className,
+}: {
+  message: string;
+  className?: string;
+}) {
+  const lines = splitPanelMessage(message);
+  if (lines.length <= 1) {
+    return <span className={className}>{message}</span>;
+  }
+  return (
+    <span className={className}>
+      {lines.map((line, index) => (
+        <span key={`${line}-${index}`} className="block">
+          {line}
+        </span>
+      ))}
+    </span>
+  );
+}
+
+export const SystemPanelShell = memo(function SystemPanelShell({
+  children,
+  section,
+  className,
+}: {
+  children: ReactNode;
+  section?: string;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn('h-full flex flex-col bg-background overflow-hidden', className)}
+      data-section={section}
+    >
+      {children}
+    </div>
+  );
+});
+
+export const SystemPanelToolbar = memo(function SystemPanelToolbar({
+  children,
+  trailing,
+}: {
+  children?: ReactNode;
+  trailing?: ReactNode;
+}) {
+  return (
+    <div className="shrink-0 px-2 py-1.5 border-b border-border/50 flex items-center gap-1.5">
+      <div className="flex flex-1 min-w-0 items-center gap-1.5">{children}</div>
+      {trailing && <div className="flex shrink-0 items-center gap-1.5">{trailing}</div>}
+    </div>
+  );
+});
+
+export const SystemPanelSearch = memo(function SystemPanelSearch({
+  value,
+  onChange,
+  placeholder,
+  onEnter,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder: string;
+  onEnter?: () => void;
+}) {
+  return (
+    <div className="relative flex-1 min-w-0 group">
+      <Search size={12} className="absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none transition-colors group-focus-within:text-primary" />
+      <Input
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        className="h-7 pl-7 text-xs bg-muted/30 border-none focus-visible:ring-1 focus-visible:ring-primary/50 focus-visible:bg-muted/50 transition-all"
+        onKeyDown={(e) => { if (e.key === 'Enter') onEnter?.(); }}
+      />
+    </div>
+  );
+});
+
+export const SystemPanelIconButton = memo(function SystemPanelIconButton({
+  title,
+  onClick,
+  disabled,
+  destructive,
+  children,
+}: {
+  title: string;
+  onClick?: () => void;
+  disabled?: boolean;
+  destructive?: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span className="inline-flex">
+          <button
+            type="button"
+            aria-label={title}
+            disabled={disabled}
+            onClick={onClick}
+            className={cn(
+              'shrink-0 h-7 w-7 flex items-center justify-center rounded-md transition-colors disabled:opacity-40 disabled:pointer-events-none',
+              destructive
+                ? 'text-muted-foreground hover:text-destructive hover:bg-destructive/10'
+                : 'text-muted-foreground hover:text-foreground hover:bg-muted/60',
+            )}
+          >
+            {children}
+          </button>
+        </span>
+      </TooltipTrigger>
+      <TooltipContent>{title}</TooltipContent>
+    </Tooltip>
+  );
+});
+
+export const SystemPanelRefreshButton = memo(function SystemPanelRefreshButton({
+  title,
+  loading,
+  onClick,
+}: {
+  title: string;
+  loading?: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <SystemPanelIconButton title={title} onClick={onClick} disabled={loading}>
+      <RefreshCw size={14} className={cn(loading && 'animate-spin')} />
+    </SystemPanelIconButton>
+  );
+});
+
+export const SystemPanelSegmented = memo(function SystemPanelSegmented<T extends string>({
+  value,
+  options,
+  onChange,
+}: {
+  value: T;
+  options: { id: T; label: string }[];
+  onChange: (value: T) => void;
+}) {
+  return (
+    <div className="shrink-0 flex items-center gap-0.5 px-2 py-1 border-b border-border/30 overflow-x-auto">
+      {options.map((option) => (
+        <button
+          key={option.id}
+          type="button"
+          onClick={() => onChange(option.id)}
+          className={cn(
+            'shrink-0 px-2.5 py-0.5 rounded-md text-[10px] transition-all duration-200 whitespace-nowrap',
+            value === option.id
+              ? 'bg-primary/15 text-primary font-medium shadow-sm'
+              : 'text-muted-foreground hover:text-foreground hover:bg-muted/50',
+          )}
+        >
+          {option.label}
+        </button>
+      ))}
+    </div>
+  );
+});
+
+export const SystemPanelMetaBar = memo(function SystemPanelMetaBar({
+  children,
+  trailing,
+}: {
+  children: ReactNode;
+  trailing?: ReactNode;
+}) {
+  return (
+    <div className="shrink-0 flex items-center gap-2 px-3 py-1.5 text-[11px] text-muted-foreground border-b border-border/30 min-h-[28px]">
+      <div className="flex-1 min-w-0 truncate">{children}</div>
+      {trailing}
+    </div>
+  );
+});
+
+export const SystemPanelEmpty = memo(function SystemPanelEmpty({
+  icon: Icon,
+  message,
+}: {
+  icon: React.ComponentType<{ size?: number; className?: string }>;
+  message: string;
+}) {
+  return (
+    <div className="flex flex-col items-center justify-center py-10 px-4 text-muted-foreground text-center">
+      <Icon size={24} className="opacity-40 mb-2" />
+      <SystemPanelMessage message={message} className="max-w-[260px] text-xs leading-5" />
+    </div>
+  );
+});
+
+export const SystemPanelLoading = memo(function SystemPanelLoading({
+  message,
+}: {
+  message: string;
+}) {
+  return (
+    <div className="flex min-h-[180px] flex-col items-center justify-center px-4 py-10 text-center text-xs text-muted-foreground">
+      <Loader2 size={18} className="mb-2 animate-spin opacity-70" />
+      <span>{message}</span>
+    </div>
+  );
+});
+
+export const SystemPanelError = memo(function SystemPanelError({
+  message,
+  onRetry,
+  retryLabel,
+  loading,
+}: {
+  message: string;
+  onRetry?: () => void;
+  retryLabel?: string;
+  loading?: boolean;
+}) {
+  return (
+    <div className="flex h-full min-h-[180px] flex-col items-center justify-center px-6 py-10 text-center text-muted-foreground">
+      <Unplug size={24} className="mb-2 opacity-40" />
+      <SystemPanelMessage message={message} className="max-w-[260px] break-words text-xs leading-5" />
+      {onRetry && retryLabel && (
+        <button
+          type="button"
+          onClick={onRetry}
+          disabled={loading}
+          className="mt-3 inline-flex h-7 items-center gap-1.5 rounded px-2 text-[11px] text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground disabled:pointer-events-none disabled:opacity-50"
+        >
+          <RefreshCw size={12} className={cn(loading && 'animate-spin')} />
+          {retryLabel}
+        </button>
+      )}
+    </div>
+  );
+});
+
+export const SystemPanelInlineError = memo(function SystemPanelInlineError({
+  message,
+  onRetry,
+  retryLabel,
+  loading,
+}: {
+  message: string;
+  onRetry?: () => void;
+  retryLabel?: string;
+  loading?: boolean;
+}) {
+  return (
+    <div className="shrink-0 flex items-center gap-2 px-3 py-2 text-[11px] text-muted-foreground border-b border-border/30 bg-muted/20">
+      <Unplug size={12} className="shrink-0 opacity-60" />
+      <span className="min-w-0 truncate">{message}</span>
+      {onRetry && retryLabel && (
+        <button
+          type="button"
+          onClick={onRetry}
+          disabled={loading}
+          className="ml-auto inline-flex shrink-0 items-center gap-1 rounded px-1.5 py-0.5 text-[10px] transition-colors hover:bg-muted/60 hover:text-foreground disabled:pointer-events-none disabled:opacity-50"
+        >
+          <RefreshCw size={10} className={cn(loading && 'animate-spin')} />
+          {retryLabel}
+        </button>
+      )}
+    </div>
+  );
+});
+
+export const SystemPanelList = memo(function SystemPanelList({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  // No divide-y here: the collapsible wrapper stays mounted at zero height
+  // during its exit animation, and a divider on it would add a moving 1px
+  // seam. Rows carry their own border-b instead.
+  return (
+    <div className="flex-1 min-h-0 overflow-y-auto">
+      {children}
+    </div>
+  );
+});
+
+export const SystemPanelRow = memo(function SystemPanelRow({
+  selected,
+  onClick,
+  depth = 0,
+  leading,
+  title,
+  subtitle,
+  trailing,
+  actions,
+  className,
+}: {
+  selected?: boolean;
+  onClick?: () => void;
+  depth?: number;
+  leading?: ReactNode;
+  title: ReactNode;
+  subtitle?: ReactNode;
+  trailing?: ReactNode;
+  actions?: ReactNode;
+  className?: string;
+}) {
+  const content = (
+    <>
+      {leading}
+      <div className="flex-1 min-w-0">
+        <div className="text-xs font-medium truncate">{title}</div>
+        {subtitle && (
+          <div className="text-[10px] text-muted-foreground truncate mt-0.5">{subtitle}</div>
+        )}
+      </div>
+      {trailing}
+      {actions && (
+        <div
+          className="flex shrink-0 items-center justify-end gap-0.5"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {actions}
+        </div>
+      )}
+    </>
+  );
+
+  const rowClassName = cn(
+    'group flex items-center gap-2.5 pr-2.5 py-2.5 min-h-[44px] border-b border-border/30 relative',
+    'transition-colors duration-150',
+    selected && 'bg-accent/30',
+    selected && 'before:absolute before:left-0 before:top-0 before:bottom-0 before:w-0.5 before:bg-primary',
+    onClick && 'cursor-pointer hover:bg-accent/40',
+    className,
+  );
+  const style = { paddingLeft: 12 + depth * 14 };
+
+  if (onClick) {
+    // Not a <button>: trailing/actions hold real buttons, and interactive
+    // content may not nest inside a button element.
+    return (
+      <div
+        role="button"
+        tabIndex={0}
+        className={cn('w-full text-left', rowClassName)}
+        style={style}
+        onClick={onClick}
+        onKeyDown={(e) => {
+          if (e.target !== e.currentTarget) return;
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            onClick();
+          }
+        }}
+      >
+        {content}
+      </div>
+    );
+  }
+
+  return (
+    <div className={rowClassName} style={style}>
+      {content}
+    </div>
+  );
+});
+
+export const SystemPanelDetailStrip = memo(function SystemPanelDetailStrip({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cn('border-b border-border/40 bg-muted/20 px-3 py-2', className)}>
+      {children}
+    </div>
+  );
+});
+
+const COLLAPSE_MS = 180;
+
+/**
+ * Expand/collapse with a height animation (grid-template-rows 0fr→1fr, no
+ * measuring). Children mount on open and unmount after the exit transition;
+ * the last rendered children are kept during exit so collapse animates even
+ * when the parent clears them together with the open flag.
+ */
+export function SystemPanelCollapsible({
+  open,
+  children,
+}: {
+  open: boolean;
+  children: ReactNode;
+}) {
+  const [mounted, setMounted] = useState(open);
+  const [expanded, setExpanded] = useState(open);
+  const lastChildrenRef = useRef<ReactNode>(children);
+  if (open) lastChildrenRef.current = children;
+
+  useEffect(() => {
+    if (open) {
+      setMounted(true);
+      // Two frames so the 0fr state paints before transitioning to 1fr.
+      let raf2 = 0;
+      const raf1 = requestAnimationFrame(() => {
+        raf2 = requestAnimationFrame(() => setExpanded(true));
+      });
+      return () => {
+        cancelAnimationFrame(raf1);
+        cancelAnimationFrame(raf2);
+      };
+    }
+    setExpanded(false);
+    const timer = setTimeout(() => {
+      setMounted(false);
+      lastChildrenRef.current = null;
+    }, COLLAPSE_MS);
+    return () => clearTimeout(timer);
+  }, [open]);
+
+  if (!mounted) return null;
+  return (
+    <div
+      className={cn(
+        'grid transition-[grid-template-rows] ease-out motion-reduce:transition-none',
+        expanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',
+      )}
+      style={{ transitionDuration: `${COLLAPSE_MS}ms` }}
+    >
+      <div className="min-h-0 overflow-hidden">
+        {open ? children : lastChildrenRef.current}
+      </div>
+    </div>
+  );
+}
+
+export const SystemPanelActionChip = memo(function SystemPanelActionChip({
+  title,
+  onClick,
+  destructive,
+  disabled,
+  children,
+}: {
+  title: string;
+  onClick: () => void;
+  destructive?: boolean;
+  disabled?: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      title={title}
+      aria-label={title}
+      disabled={disabled}
+      onClick={onClick}
+      className={cn(
+        'h-6 px-2 inline-flex items-center gap-1 rounded text-[10px] transition-colors disabled:opacity-40',
+        destructive
+          ? 'text-muted-foreground hover:text-destructive hover:bg-destructive/10'
+          : 'text-muted-foreground hover:text-foreground hover:bg-muted/70',
+      )}
+    >
+      {children}
+    </button>
+  );
+});
+
+export const SystemPanelMiniButton = memo(function SystemPanelMiniButton({
+  title,
+  onClick,
+  disabled,
+  children,
+}: {
+  title: string;
+  onClick: () => void;
+  disabled?: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span className="inline-flex">
+          <button
+            type="button"
+            aria-label={title}
+            disabled={disabled}
+            onClick={onClick}
+            className="h-6 w-6 shrink-0 flex items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-muted/70 transition-colors disabled:opacity-40"
+          >
+            {children}
+          </button>
+        </span>
+      </TooltipTrigger>
+      <TooltipContent>{title}</TooltipContent>
+    </Tooltip>
+  );
+});
+
+/** Solid bright status pill — same palette as the vault entity icons. */
+export const SystemPanelStatusBadge = memo(function SystemPanelStatusBadge({
+  tone,
+  children,
+}: {
+  tone: 'success' | 'warning' | 'muted';
+  children: ReactNode;
+}) {
+  return (
+    <span className={cn(
+      // h-6 matches SystemPanelRoundButton so pills and round buttons align.
+      'inline-flex shrink-0 min-w-[52px] h-6 items-center justify-center text-[10px] font-medium px-2 rounded-full tabular-nums relative overflow-hidden',
+      'shadow-sm',
+      tone === 'success' && 'bg-emerald-600 text-white dark:bg-emerald-400 dark:text-slate-950',
+      tone === 'warning' && 'bg-amber-600 text-white dark:bg-amber-400 dark:text-slate-950',
+      tone === 'muted' && 'bg-slate-500 text-white dark:bg-slate-400 dark:text-slate-950',
+    )}>
+      {/* Subtle top highlight sheen */}
+      <span className="absolute inset-x-0 top-0 h-1/2 bg-white/10 rounded-t-full pointer-events-none" />
+      <span className="relative">{children}</span>
+    </span>
+  );
+});
+
+/** Always-visible round icon button for list-row quick actions. */
+export const SystemPanelRoundButton = memo(function SystemPanelRoundButton({
+  title,
+  onClick,
+  disabled,
+  destructive,
+  loading,
+  children,
+}: {
+  title: string;
+  onClick: () => void;
+  disabled?: boolean;
+  destructive?: boolean;
+  /** Shows a spinner instead of the icon and disables the button. */
+  loading?: boolean;
+  children: ReactNode;
+}) {
+  const isDisabled = disabled || loading;
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span className="inline-flex">
+          <button
+            type="button"
+            aria-label={title}
+            disabled={isDisabled}
+            onClick={(e) => {
+              e.stopPropagation();
+              onClick();
+            }}
+            className={cn(
+              'h-6 w-6 shrink-0 rounded-full flex items-center justify-center bg-muted/60 text-muted-foreground transition-colors disabled:opacity-40',
+              destructive
+                ? 'hover:bg-destructive/20 hover:text-destructive'
+                : 'hover:bg-muted hover:text-foreground',
+            )}
+          >
+            {loading ? <Loader2 size={12} className="animate-spin" /> : children}
+          </button>
+        </span>
+      </TooltipTrigger>
+      <TooltipContent>{title}</TooltipContent>
+    </Tooltip>
+  );
+});
+
+/** Small uppercase section divider inside expanded details. */
+export const SystemPanelSectionHeader = memo(function SystemPanelSectionHeader({
+  children,
+  trailing,
+}: {
+  children: ReactNode;
+  trailing?: ReactNode;
+}) {
+  return (
+    <div className="shrink-0 flex items-center gap-2 px-3 py-1.5 border-b border-border/30 bg-muted/10">
+      <div className="flex-1 min-w-0 truncate text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
+        {children}
+      </div>
+      {trailing}
+    </div>
+  );
+});
+
+export const SystemPanelInspectBlock = memo(function SystemPanelInspectBlock({
+  title,
+  data,
+  onClose,
+  closeLabel,
+}: {
+  title: string;
+  data: Record<string, unknown>;
+  onClose?: () => void;
+  closeLabel?: string;
+}) {
+  return (
+    <SystemPanelDetailStrip>
+      <div className="flex items-center justify-between gap-2 mb-2">
+        <span className="text-[11px] font-medium">{title}</span>
+        {onClose && closeLabel && (
+          <button type="button" onClick={onClose} className="text-[10px] text-muted-foreground hover:text-foreground">
+            {closeLabel}
+          </button>
+        )}
+      </div>
+      <pre className="font-mono text-[10px] text-muted-foreground overflow-auto max-h-40 whitespace-pre-wrap break-all leading-relaxed">
+        {JSON.stringify(data, null, 2)}
+      </pre>
+    </SystemPanelDetailStrip>
+  );
+});