@mrpatronz/nexusflow 0.2.18 → 0.2.19

package/gui/src/app/AppSidebar.tsx

@@ -0,0 +1,69 @@
+import { LayoutDashboard, FolderGit2, Workflow, Settings as SettingsIcon, BookOpen, Plus, type LucideIcon } from 'lucide-react';
+import { cn } from '../components/ui/index.js';
+
+interface NavItem {
+  label: string;
+  to: string;
+  icon: LucideIcon;
+  match: (p: string) => boolean;
+}
+
+const ITEMS: NavItem[] = [
+  { label: 'Overview', to: '/', icon: LayoutDashboard, match: (p) => p === '/' },
+  { label: 'Workspaces', to: '/workspaces', icon: FolderGit2, match: (p) => p.startsWith('/workspaces') },
+  { label: 'Strategies', to: '/strategies', icon: Workflow, match: (p) => p.startsWith('/strategies') },
+  { label: 'Settings', to: '/settings', icon: SettingsIcon, match: (p) => p.startsWith('/settings') },
+];
+
+export function AppSidebar({
+  pathname,
+  appVersion,
+  onNavigate,
+  onNewWorkspace,
+}: {
+  pathname: string;
+  appVersion: string;
+  onNavigate: (to: string) => void;
+  onNewWorkspace: () => void;
+}) {
+  const linkClass = (active: boolean) =>
+    cn(
+      'flex items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium transition-colors cursor-pointer',
+      active ? 'bg-accent-soft text-accent' : 'text-content-muted hover:bg-raised hover:text-content',
+    );
+
+  return (
+    <aside className="flex w-60 shrink-0 flex-col border-r border-hairline bg-surface/40 p-4">
+      <div className="mb-5 flex items-center gap-2.5 px-2 py-1">
+        <div className="grid h-8 w-8 place-items-center rounded-md bg-accent font-display text-sm font-bold text-white">NF</div>
+        <span className="font-display text-sm font-semibold text-content">NexusFlow</span>
+      </div>
+
+      <button
+        onClick={onNewWorkspace}
+        className="mb-5 inline-flex items-center justify-center gap-2 rounded-md bg-accent px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-accent-hover cursor-pointer"
+      >
+        <Plus size={16} /> New workspace
+      </button>
+
+      <nav className="flex flex-1 flex-col gap-1">
+        {ITEMS.map((it) => {
+          const Icon = it.icon;
+          return (
+            <button key={it.to} onClick={() => onNavigate(it.to)} className={linkClass(it.match(pathname))}>
+              <Icon size={16} /> {it.label}
+            </button>
+          );
+        })}
+      </nav>
+
+      <button onClick={() => onNavigate('/guide')} className={linkClass(pathname.startsWith('/guide'))}>
+        <BookOpen size={16} /> Getting started
+      </button>
+
+      <div className="mt-3 border-t border-hairline pt-3 text-center text-[10px] font-medium uppercase tracking-wider text-content-faint">
+        NexusFlow v{appVersion}
+      </div>
+    </aside>
+  );
+}

package/gui/src/components/AddRepoPicker.tsx

@@ -0,0 +1,81 @@
+import { useMemo, useState } from 'react';
+import { Plus, Search } from 'lucide-react';
+import type { RepoInfo } from '../types.js';
+import { Input } from './ui/index.js';
+
+/** A searchable popover for attaching another repository to a workspace. */
+export function AddRepoPicker({
+  repos,
+  disabled,
+  onAdd,
+}: {
+  repos: RepoInfo[];
+  disabled?: boolean;
+  onAdd: (repoPath: string) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState('');
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return repos;
+    return repos.filter((r) => r.name.toLowerCase().includes(q) || r.path.toLowerCase().includes(q));
+  }, [repos, query]);
+
+  return (
+    <div className="relative">
+      <button
+        type="button"
+        disabled={disabled}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        onClick={() => {
+          setQuery('');
+          setOpen((o) => !o);
+        }}
+        className="inline-flex items-center gap-1.5 rounded-md border border-hairline bg-surface px-3 py-1.5 text-xs font-medium text-content-muted transition-colors hover:bg-raised hover:text-content disabled:cursor-not-allowed disabled:opacity-40 cursor-pointer"
+      >
+        <Plus size={14} /> Add repository
+      </button>
+
+      {open && (
+        <>
+          <div className="fixed inset-0 z-40" aria-hidden="true" onClick={() => setOpen(false)} />
+          <div className="absolute right-0 z-50 mt-1.5 w-72 overflow-hidden rounded-lg border border-hairline bg-raised shadow-xl animate-fade-in">
+            <div className="relative border-b border-hairline p-2">
+              <Search size={14} className="pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-content-faint" />
+              <Input
+                autoFocus
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                placeholder="Search repositories"
+                className="pl-8"
+              />
+            </div>
+            <div role="listbox" className="max-h-64 overflow-y-auto py-1">
+              {filtered.length === 0 ? (
+                <div className="px-3 py-4 text-center text-xs text-content-faint">No repositories found.</div>
+              ) : (
+                filtered.map((r) => (
+                  <button
+                    key={r.path}
+                    role="option"
+                    aria-selected={false}
+                    onClick={() => {
+                      setOpen(false);
+                      onAdd(r.path);
+                    }}
+                    className="flex w-full flex-col items-start gap-0.5 px-3 py-2 text-left transition-colors hover:bg-surface cursor-pointer"
+                  >
+                    <span className="font-mono text-xs font-semibold text-content">{r.name}</span>
+                    <span className="w-full truncate text-[10px] text-content-faint">{r.path}</span>
+                  </button>
+                ))
+              )}
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

package/gui/src/components/ui/Button.tsx

@@ -0,0 +1,40 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import { cn } from './cn.js';
+
+type Variant = 'primary' | 'secondary' | 'ghost' | 'danger';
+type Size = 'sm' | 'md';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: Variant;
+  size?: Size;
+  icon?: ReactNode;
+}
+
+const VARIANTS: Record<Variant, string> = {
+  primary: 'bg-accent text-white hover:bg-accent-hover border border-transparent',
+  secondary: 'bg-surface text-content border border-hairline hover:bg-raised hover:border-hairline-strong',
+  ghost: 'bg-transparent text-content-muted hover:text-content hover:bg-raised border border-transparent',
+  danger: 'bg-transparent text-danger border border-danger/40 hover:bg-danger/10',
+};
+
+const SIZES: Record<Size, string> = {
+  sm: 'text-xs px-2.5 py-1.5 gap-1.5 rounded-md',
+  md: 'text-sm px-3.5 py-2 gap-2 rounded-md',
+};
+
+export function Button({ variant = 'secondary', size = 'md', icon, className, children, ...rest }: ButtonProps) {
+  return (
+    <button
+      className={cn(
+        'inline-flex items-center justify-center font-medium transition-colors cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed',
+        VARIANTS[variant],
+        SIZES[size],
+        className,
+      )}
+      {...rest}
+    >
+      {icon}
+      {children}
+    </button>
+  );
+}

package/gui/src/components/ui/Card.tsx

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'react';
+import { cn } from './cn.js';
+
+export function Card({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('bg-surface border border-hairline rounded-lg', className)} {...rest} />;
+}

package/gui/src/components/ui/EmptyState.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+
+export function EmptyState({
+  icon,
+  title,
+  description,
+  action,
+}: {
+  icon?: ReactNode;
+  title: string;
+  description?: string;
+  action?: ReactNode;
+}) {
+  return (
+    <div className="flex flex-col items-center justify-center px-6 py-16 text-center">
+      {icon && <div className="mb-3 text-content-faint">{icon}</div>}
+      <h3 className="font-display text-lg font-semibold text-content">{title}</h3>
+      {description && <p className="mt-1 max-w-sm text-sm text-content-muted">{description}</p>}
+      {action && <div className="mt-4">{action}</div>}
+    </div>
+  );
+}

package/gui/src/components/ui/Input.tsx

@@ -0,0 +1,21 @@
+import type { InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
+import { cn } from './cn.js';
+
+const base =
+  'w-full bg-base border border-hairline rounded-md px-3 py-2 text-sm text-content placeholder:text-content-faint outline-none focus:border-accent transition-colors disabled:opacity-50 disabled:cursor-not-allowed';
+
+export function Input({ className, ...rest }: InputHTMLAttributes<HTMLInputElement>) {
+  return <input className={cn(base, className)} {...rest} />;
+}
+
+export function Textarea({ className, ...rest }: TextareaHTMLAttributes<HTMLTextAreaElement>) {
+  return <textarea className={cn(base, 'resize-y leading-relaxed', className)} {...rest} />;
+}
+
+export function Select({ className, children, ...rest }: SelectHTMLAttributes<HTMLSelectElement>) {
+  return (
+    <select className={cn(base, 'cursor-pointer', className)} {...rest}>
+      {children}
+    </select>
+  );
+}

package/gui/src/components/ui/Menu.tsx

@@ -0,0 +1,71 @@
+import { useState, type ReactNode } from 'react';
+import { cn } from './cn.js';
+
+export interface MenuItem {
+  label: string;
+  icon?: ReactNode;
+  onClick: () => void;
+  danger?: boolean;
+  disabled?: boolean;
+}
+
+export function Menu({
+  trigger,
+  items,
+  align = 'right',
+  label,
+}: {
+  trigger: ReactNode;
+  items: MenuItem[];
+  align?: 'left' | 'right';
+  label?: string;
+}) {
+  const [open, setOpen] = useState(false);
+  return (
+    <div className="relative">
+      <button
+        type="button"
+        aria-haspopup="menu"
+        aria-expanded={open}
+        aria-label={label}
+        onClick={() => setOpen((o) => !o)}
+        className="inline-flex items-center justify-center cursor-pointer"
+      >
+        {trigger}
+      </button>
+      {open && (
+        <>
+          <div className="fixed inset-0 z-40" aria-hidden="true" onClick={() => setOpen(false)} />
+          <div
+            role="menu"
+            className={cn(
+              'absolute z-50 mt-1.5 min-w-48 rounded-lg border border-hairline bg-raised py-1 shadow-xl animate-fade-in',
+              align === 'right' ? 'right-0' : 'left-0',
+            )}
+          >
+            {items.map((it, i) => (
+              <div key={i}>
+                {it.danger && <div className="my-1 h-px bg-hairline" />}
+                <button
+                  role="menuitem"
+                  disabled={it.disabled}
+                  onClick={() => {
+                    setOpen(false);
+                    it.onClick();
+                  }}
+                  className={cn(
+                    'flex w-full items-center gap-2.5 px-3 py-2 text-sm font-medium transition-colors cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed',
+                    it.danger ? 'text-danger hover:bg-danger/10' : 'text-content-muted hover:bg-surface hover:text-content',
+                  )}
+                >
+                  {it.icon}
+                  {it.label}
+                </button>
+              </div>
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

package/gui/src/components/ui/Modal.tsx

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react';
+import { X } from 'lucide-react';
+import { cn } from './cn.js';
+
+export function Modal({
+  open,
+  onClose,
+  title,
+  children,
+  className,
+}: {
+  open: boolean;
+  onClose: () => void;
+  title?: ReactNode;
+  children: ReactNode;
+  className?: string;
+}) {
+  if (!open) return null;
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <div className="absolute inset-0 bg-black/70" onClick={onClose} aria-hidden="true" />
+      <div
+        role="dialog"
+        aria-modal="true"
+        className={cn('relative z-10 w-full max-w-lg rounded-lg border border-hairline bg-surface shadow-2xl animate-rise', className)}
+      >
+        {title && (
+          <div className="flex items-center justify-between border-b border-hairline px-5 py-3.5">
+            <h3 className="font-display font-semibold text-content">{title}</h3>
+            <button onClick={onClose} className="cursor-pointer text-content-faint hover:text-content" aria-label="Close">
+              <X size={16} />
+            </button>
+          </div>
+        )}
+        {children}
+      </div>
+    </div>
+  );
+}

package/gui/src/components/ui/PageHeader.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+
+export function PageHeader({
+  title,
+  subtitle,
+  actions,
+}: {
+  title: ReactNode;
+  subtitle?: ReactNode;
+  actions?: ReactNode;
+}) {
+  return (
+    <div className="mb-6 flex items-start justify-between gap-4">
+      <div className="min-w-0">
+        <h1 className="font-display text-2xl font-bold tracking-tight text-content">{title}</h1>
+        {subtitle && <p className="mt-1 text-sm text-content-muted">{subtitle}</p>}
+      </div>
+      {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
+    </div>
+  );
+}

package/gui/src/components/ui/RepoStatusStrip.tsx

@@ -0,0 +1,33 @@
+import { cn } from './cn.js';
+
+export type RepoState = 'clean' | 'changes' | 'conflict' | 'unknown';
+
+const STATE_DOT: Record<RepoState, string> = {
+  clean: 'bg-success',
+  changes: 'bg-warning',
+  conflict: 'bg-danger',
+  unknown: 'bg-idle',
+};
+
+export interface RepoDot {
+  name: string;
+  state?: RepoState;
+}
+
+/** Signature element: a row of per-repo status dots, reused across dashboard, list and detail. */
+export function RepoStatusStrip({ repos, className }: { repos: RepoDot[]; className?: string }) {
+  return (
+    <div className={cn('flex flex-wrap items-center gap-1.5', className)}>
+      {repos.map((r) => (
+        <span
+          key={r.name}
+          title={`${r.name}${r.state ? ` · ${r.state}` : ''}`}
+          className="inline-flex items-center gap-1.5 rounded border border-hairline bg-base px-2 py-0.5 font-mono text-[11px] font-medium text-content-muted"
+        >
+          <span className={cn('h-1.5 w-1.5 rounded-full', STATE_DOT[r.state ?? 'unknown'])} />
+          {r.name}
+        </span>
+      ))}
+    </div>
+  );
+}

package/gui/src/components/ui/Skeleton.tsx

@@ -0,0 +1,5 @@
+import { cn } from './cn.js';
+
+export function Skeleton({ className }: { className?: string }) {
+  return <div className={cn('animate-pulse rounded-md bg-raised', className)} />;
+}

package/gui/src/components/ui/StatusPill.tsx

@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react';
+import { cn } from './cn.js';
+
+export type Tone = 'success' | 'warning' | 'danger' | 'running' | 'idle' | 'accent' | 'neutral';
+
+const TONES: Record<Tone, string> = {
+  success: 'text-success border-success/30 bg-success/10',
+  warning: 'text-warning border-warning/30 bg-warning/10',
+  danger: 'text-danger border-danger/30 bg-danger/10',
+  running: 'text-running border-running/30 bg-running/10',
+  idle: 'text-content-faint border-hairline bg-surface',
+  accent: 'text-accent border-accent/30 bg-accent-soft',
+  neutral: 'text-content-muted border-hairline bg-raised',
+};
+
+export function StatusPill({
+  tone = 'neutral',
+  dot,
+  title,
+  children,
+}: {
+  tone?: Tone;
+  dot?: boolean;
+  title?: string;
+  children: ReactNode;
+}) {
+  return (
+    <span
+      title={title}
+      className={cn('inline-flex items-center gap-1.5 text-[11px] font-medium px-2 py-0.5 rounded-md border whitespace-nowrap', TONES[tone])}
+    >
+      {dot && <span className="h-1.5 w-1.5 rounded-full bg-current" />}
+      {children}
+    </span>
+  );
+}

package/gui/src/components/ui/Tabs.tsx

@@ -0,0 +1,40 @@
+import { cn } from './cn.js';
+
+export interface TabItem {
+  value: string;
+  label: string;
+}
+
+export function Tabs({
+  items,
+  value,
+  onChange,
+  className,
+}: {
+  items: TabItem[];
+  value: string;
+  onChange: (v: string) => void;
+  className?: string;
+}) {
+  return (
+    <div role="tablist" className={cn('flex items-center gap-1 border-b border-hairline overflow-x-auto', className)}>
+      {items.map((it) => {
+        const active = it.value === value;
+        return (
+          <button
+            key={it.value}
+            role="tab"
+            aria-selected={active}
+            onClick={() => onChange(it.value)}
+            className={cn(
+              '-mb-px whitespace-nowrap border-b-2 px-3 py-2 text-sm font-medium transition-colors cursor-pointer',
+              active ? 'text-content border-accent' : 'text-content-faint border-transparent hover:text-content',
+            )}
+          >
+            {it.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/gui/src/components/ui/cn.ts

@@ -0,0 +1,4 @@
+/** Join truthy class-name parts into a single string. */
+export function cn(...parts: Array<string | false | null | undefined>): string {
+  return parts.filter(Boolean).join(' ');
+}

package/gui/src/components/ui/index.ts

@@ -0,0 +1,16 @@
+export { cn } from './cn.js';
+export { Button } from './Button.js';
+export { Card } from './Card.js';
+export { StatusPill } from './StatusPill.js';
+export type { Tone } from './StatusPill.js';
+export { Tabs } from './Tabs.js';
+export type { TabItem } from './Tabs.js';
+export { Input, Textarea, Select } from './Input.js';
+export { Menu } from './Menu.js';
+export type { MenuItem } from './Menu.js';
+export { Modal } from './Modal.js';
+export { Skeleton } from './Skeleton.js';
+export { EmptyState } from './EmptyState.js';
+export { PageHeader } from './PageHeader.js';
+export { RepoStatusStrip } from './RepoStatusStrip.js';
+export type { RepoDot, RepoState } from './RepoStatusStrip.js';

package/gui/src/features/services/ServiceConsole.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Play, Square, AlertTriangle, Terminal, Maximize2, Minimize2, Trash2, Cpu, Activity, RefreshCw } from 'lucide-react';
+import { Play, Square, AlertTriangle, Terminal, Maximize2, Minimize2, Trash2, RefreshCw } from 'lucide-react';
 import type { Feature, ServiceConfig, RunningService, OrchestrationDetection } from '../../types.js';
 
 interface ServiceConsoleProps {
@@ -74,43 +74,8 @@ export const ServiceConsole: React.FC<ServiceConsoleProps> = ({
         </div>
       )}
 
-      {/* Telemetry Dashboard Grid */}
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
-        {/* Telemetry 1: CPU */}
-        <div className="glass-card p-5 rounded-2xl border border-slate-800/40 relative overflow-hidden transition-all duration-300 before:absolute before:inset-x-0 before:top-0 before:h-[1px] before:bg-gradient-to-r before:from-indigo-500/10 via-purple-500/10 to-transparent">
-          <div className="flex justify-between items-center text-xs font-semibold text-slate-400 mb-3">
-            <span className="flex items-center gap-1.5"><Cpu size={14} className="text-indigo-400" /> Simulated CPU Load</span>
-            <span className={isAnyRunning ? "text-emerald-400 font-mono font-bold" : "text-slate-550 font-mono"}>
-              {isAnyRunning ? '4.8%' : '0%'}
-            </span>
-          </div>
-          <div className="w-full bg-slate-900 rounded-full h-1.5 mb-2 overflow-hidden border border-white/5">
-            <div
-              className={`h-1.5 rounded-full transition-all duration-500 ${isAnyRunning ? "bg-gradient-to-r from-emerald-500 to-teal-400" : "bg-slate-800"}`}
-              style={{ width: isAnyRunning ? '48%' : '0%' }}
-            ></div>
-          </div>
-          <span className="text-[10px] text-slate-550">Fluctuating active worker processes</span>
-        </div>
-
-        {/* Telemetry 2: Memory */}
-        <div className="glass-card p-5 rounded-2xl border border-slate-800/40 relative overflow-hidden transition-all duration-300 before:absolute before:inset-x-0 before:top-0 before:h-[1px] before:bg-gradient-to-r before:from-indigo-500/10 via-purple-500/10 to-transparent">
-          <div className="flex justify-between items-center text-xs font-semibold text-slate-400 mb-3">
-            <span className="flex items-center gap-1.5"><Activity size={14} className="text-indigo-400" /> Simulated Memory</span>
-            <span className={isAnyRunning ? "text-cyan-400 font-mono font-bold" : "text-slate-550 font-mono"}>
-              {isAnyRunning ? '192 MB' : '0 MB'}
-            </span>
-          </div>
-          <div className="w-full bg-slate-900 rounded-full h-1.5 mb-2 overflow-hidden border border-white/5">
-            <div
-              className={`h-1.5 rounded-full transition-all duration-500 ${isAnyRunning ? "bg-gradient-to-r from-cyan-500 to-indigo-400" : "bg-slate-800"}`}
-              style={{ width: isAnyRunning ? '65%' : '0%' }}
-            ></div>
-          </div>
-          <span className="text-[10px] text-slate-550">Working set size for spawned servers</span>
-        </div>
-
-        {/* Telemetry 3: Environment Health */}
+      {/* Workspace service status (real running-process state) */}
+      <div className="mb-6">
         <div className="glass-card p-5 rounded-2xl border border-slate-800/40 relative overflow-hidden transition-all duration-300 before:absolute before:inset-x-0 before:top-0 before:h-[1px] before:bg-gradient-to-r before:from-indigo-500/10 via-purple-500/10 to-transparent">
           <div className="flex justify-between items-center text-xs font-semibold text-slate-400 mb-3">
             <span>Workspace Status</span>
@@ -122,7 +87,7 @@ export const ServiceConsole: React.FC<ServiceConsoleProps> = ({
           <div className="text-xs text-white font-semibold mb-2">
             {isAnyRunning ? `${runningServices.filter(rs => rs.pid > 0).length} processes active` : "All processes offline"}
           </div>
-          <span className="text-[10px] text-slate-550">Service state mapping</span>
+          <span className="text-[10px] text-slate-550">Live service state for this workspace</span>
         </div>
       </div>