testeranto 0.177.0 → 0.197.0

package/src/components/pure/ModalContent.test/index.tsx

@@ -0,0 +1,67 @@
+import Testeranto from "testeranto-react/src/react-dom/component/web";
+import { implementation } from "./implementation";
+import { specification } from "./specification";
+import { ModalContent } from "../ModalContent";
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { I, O, M } from "./types";
+import { ITestInterface } from "../../../CoreTypes";
+import { IPM } from "../../../lib/types";
+
+const testAdapter: ITestInterface<I> = {
+  beforeAll: async (input, testResource, pm) => {
+    // The subject is the component itself, which we'll use to create instances
+    return ModalContent;
+  },
+  beforeEach: async (subject, initializer, testResource, initialValues, pm) => {
+    // Create a container and mount the component
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    
+    const props = initializer();
+    const root = ReactDOM.createRoot(container);
+    const reactElement = React.createElement(subject, props);
+    
+    root.render(reactElement);
+    
+    // Wait for the component to render
+    await new Promise(resolve => setTimeout(resolve, 0));
+    
+    return {
+      htmlElement: container,
+      reactElement: reactElement,
+      domRoot: root
+    };
+  },
+  andWhen: async (store, whenCB, testResource, pm) => {
+    return whenCB(store, pm);
+  },
+  butThen: async (store, thenCB, testResource, pm) => {
+    return thenCB(store, pm);
+  },
+  afterEach: async (store, key, pm) => {
+    // Cleanup
+    if (store.domRoot) {
+      store.domRoot.unmount();
+    }
+    if (store.htmlElement && store.htmlElement.parentNode) {
+      store.htmlElement.parentNode.removeChild(store.htmlElement);
+    }
+    return store;
+  },
+  afterAll: async (store, pm) => {
+    // No-op for now
+  },
+  assertThis: (assertion) => {
+    // The assertions are handled in the then implementations
+    // This can be a no-op or can wrap the assertion if needed
+    return assertion;
+  }
+};
+
+export default Testeranto<I, O, M>(
+  ModalContent,
+  specification,
+  implementation,
+  testAdapter
+);

package/src/components/pure/ModalContent.test/specification.ts

@@ -0,0 +1,27 @@
+import { ITestSpecification } from "../../../CoreTypes";
+import { I, O } from "./types";
+
+export const specification: ITestSpecification<I, O> = (
+  Suite,
+  Given,
+  When,
+  Then
+) => {
+  return [
+    Suite.Default("ModalContent Component Tests", {
+      basicRender: Given.Default(
+        [
+          "ModalContent should render",
+          "It should contain a Modal.Header",
+          "It should render the ThemeCard components",
+        ],
+        [],
+        [
+          Then.hasModalHeader(undefined),
+          Then.hasThemeCards(undefined),
+          Then.takeScreenshot("modal-content.png"),
+        ]
+      ),
+    }),
+  ];
+};

package/src/components/pure/ModalContent.test/types.ts

@@ -0,0 +1,72 @@
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import ReactDom from "react-dom/client";
+
+import { Ibdd_in, Ibdd_out } from "../../../CoreTypes";
+import { IModalContentProps } from "../ModalContent";
+
+export type IInput = IModalContentProps;
+
+export type ISelection = {
+  htmlElement: HTMLElement;
+  reactElement: React.ReactElement;
+  domRoot: ReactDom.Root;
+};
+
+export type IStore = ISelection;
+
+export type ISubject = {
+  htmlElement: HTMLElement;
+  domRoot: ReactDom.Root;
+};
+
+export type I = Ibdd_in<
+  IInput,
+  ISubject,
+  ISelection,
+  IStore,
+  (s: IStore) => IStore,
+  (s: IStore) => IStore,
+  {
+    hasModalHeader: () => (s: IStore) => IStore;
+    hasThemeCards: () => (s: IStore) => IStore;
+    takeScreenshot: (name: string) => (s: IStore, pm: any) => Promise<IStore>;
+  }
+>;
+
+export type O = Ibdd_out<
+  {
+    Default: [string];
+  },
+  {
+    Default: [];
+  },
+  {},
+  {
+    hasModalHeader: [];
+    hasThemeCards: [];
+    takeScreenshot: [string];
+  }
+>;
+
+export type M = {
+  givens: {
+    [K in keyof O["givens"]]: (...args: any[]) => IModalContentProps;
+  };
+  whens: {
+    [K in keyof O["whens"]]: (
+      ...args: any[]
+    ) => (
+      props: IModalContentProps,
+      utils: any
+    ) => IModalContentProps & { container?: HTMLElement };
+  };
+  thens: {
+    [K in keyof O["thens"]]: (
+      ...args: any[]
+    ) => (
+      state: IModalContentProps & { container?: HTMLElement }
+    ) => IModalContentProps & { container?: HTMLElement };
+  };
+};

package/src/components/pure/ModalContent.tsx

@@ -0,0 +1,182 @@
+import React from "react";
+import { Modal } from "react-bootstrap";
+import { ThemeCard } from "./ThemeCard";
+
+import "../../App.scss";
+
+export type IModalContentProps = {
+  theme: string;
+  handleThemeChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export const ModalContent = ({
+  theme,
+  handleThemeChange,
+}: IModalContentProps) => (
+  <>
+    <Modal.Header closeButton className="border-0">
+      <Modal.Title className="d-flex align-items-center">
+        <i className="bi bi-palette-fill me-2"></i>
+        <span>Settings</span>
+      </Modal.Title>
+    </Modal.Header>
+    <div className="alert alert-warning mx-3 mt-2 mb-0">
+      <i className="bi bi-exclamation-triangle-fill me-2"></i>
+      <strong>Warning:</strong> Themes are an experimental feature. Only
+      "Business casual" is fully supported at this time.
+    </div>
+    <Modal.Body className="p-0">
+      <div className="p-3">
+        <div className="row g-3">
+          <ThemeCard
+            theme={theme}
+            handleThemeChange={handleThemeChange}
+            value="system"
+            title="9 to 5"
+            description="Follows your OS theme"
+            style={{
+              background: "linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%)",
+              borderColor: "#adb5bd",
+            }}
+          />
+          <ThemeCard
+            theme={theme}
+            handleThemeChange={handleThemeChange}
+            value="light"
+            title="Business casual"
+            description="Clean & professional"
+            style={{
+              background: "linear-gradient(135deg, #ffffff 0%, #f1f3f5 100%)",
+              borderColor: "#ced4da",
+              color: "#212529",
+              borderWidth: "2px",
+            }}
+          />
+          <ThemeCard
+            theme={theme}
+            handleThemeChange={handleThemeChange}
+            value="dark"
+            title="Business formal"
+            description="Premium & focused"
+            style={{
+              background: "linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)",
+              borderColor: "#4ecdc4",
+              color: "#f8f9fa",
+              borderWidth: "2px",
+            }}
+          />
+          <ThemeCard
+            theme={theme}
+            handleThemeChange={handleThemeChange}
+            value="light-vibrant"
+            title="Office Party"
+            description="Colorful & fun"
+            style={{
+              background: "linear-gradient(135deg, #ff2d75 0%, #00e5ff 100%)",
+              borderColor: "#ffeb3b",
+              color: "#fff",
+            }}
+          />
+          <ThemeCard
+            theme={theme}
+            handleThemeChange={handleThemeChange}
+            value="dark-vibrant"
+            title="After Party"
+            description="Neon nightlife"
+            style={{
+              background: "linear-gradient(135deg, #16213e 0%, #e94560 100%)",
+              borderColor: "#00e5ff",
+              color: "#fff",
+            }}
+          />
+          <ThemeCard
+            theme={theme}
+            handleThemeChange={handleThemeChange}
+            value="sepia"
+            title="WFH"
+            description="Vintage warmth"
+            style={{
+              background: "linear-gradient(135deg, #f4ecd8 0%, #d0b88f 100%)",
+              borderColor: "#8b6b4a",
+              color: "#3a3226",
+            }}
+          />
+          <ThemeCard
+            theme={theme}
+            handleThemeChange={handleThemeChange}
+            value="light-grayscale"
+            title="Serious Business"
+            description="Simple & distraction-free"
+            style={{
+              background: "linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%)",
+              borderColor: "#666",
+              color: "#333",
+              borderWidth: "2px",
+            }}
+          />
+          <ThemeCard
+            theme={theme}
+            handleThemeChange={handleThemeChange}
+            value="dark-grayscale"
+            title="Very Serious business"
+            description="Maximum readability"
+            style={{
+              background: "linear-gradient(135deg, #111 0%, #333 100%)",
+              borderColor: "#ff6b6b",
+              color: "#e0e0e0",
+              borderWidth: "2px",
+            }}
+          />
+          <ThemeCard
+            theme={theme}
+            handleThemeChange={handleThemeChange}
+            value="daily"
+            title="Dreaming of PTO"
+            description="Sunrise, sunset"
+            style={{
+              background: "linear-gradient(135deg, #6eafff 0%, #f9fbf0 100%)",
+              borderColor: "#f7d62e",
+              color: "#00192d",
+            }}
+          />
+          <ThemeCard
+            theme={theme}
+            handleThemeChange={handleThemeChange}
+            value="protanopia"
+            title="Protanopia"
+            description="Red-blind mode"
+            style={{
+              background: "linear-gradient(135deg, #f8f9fa 0%, #e0e8ff 100%)",
+              borderColor: "#3366cc",
+              color: "#333",
+            }}
+          />
+          <ThemeCard
+            theme={theme}
+            handleThemeChange={handleThemeChange}
+            value="deuteranopia"
+            title="Deuteranopia"
+            description="Green-blind mode"
+            style={{
+              background: "linear-gradient(135deg, #f8f9fa 0%, #ffe0e0 100%)",
+              borderColor: "#cc6633",
+              color: "#333",
+            }}
+          />
+          <ThemeCard
+            theme={theme}
+            handleThemeChange={handleThemeChange}
+            value="tritanopia"
+            title="Tritanopia"
+            description="Blue-blind mode"
+            style={{
+              background: "linear-gradient(135deg, #f8f9fa 0%, #e0ffe0 100%)",
+              borderColor: "#00aa66",
+              color: "#333",
+            }}
+          />
+        </div>
+      </div>
+    </Modal.Body>
+  </>
+);

package/src/{NavBar.tsx → components/pure/NavBar.tsx}

@@ -1,6 +1,6 @@
-import React from 'react';
-import { Navbar, Container, Nav, Badge } from 'react-bootstrap';
-import { Link } from 'react-router-dom';
+import React, { useState, useEffect } from 'react';
+import { Navbar, Container, Nav, Badge, Button } from 'react-bootstrap';
+import { Link, useLocation } from 'react-router-dom';
 
 type NavItem = {
   to?: string;
@@ -11,6 +11,7 @@ type NavItem = {
     variant: string;
     text: string;
   };
+  icon?: React.ReactNode;
 };
 
 type NavBarProps = {
@@ -18,17 +19,28 @@ type NavBarProps = {
   backLink?: string;
   navItems?: NavItem[];
   rightContent?: React.ReactNode;
+  showProcessManagerLink?: boolean;
+  onToggleCollapse?: () => void;
+  isCollapsed?: boolean;
 };
 
 export const NavBar: React.FC<NavBarProps> = ({
   title,
   backLink,
   navItems = [],
-  rightContent
+  rightContent,
 }) => {
+  const location = useLocation();
+
   return (
-    <Navbar bg="light" expand="lg" className="mb-4" sticky="top">
-      <Container fluid={true}>
+    <Navbar
+      bg="light"
+      expand="lg"
+      className="mb-2"
+      sticky="top"
+      expanded={false}
+    >
+      <Container fluid>
         {backLink && (
           <Nav.Link
             as={Link}
@@ -49,10 +61,13 @@ export const NavBar: React.FC<NavBarProps> = ({
             ↑
           </Nav.Link>
         )}
+
         <Navbar.Brand className={backLink ? 'ms-2' : ''}>
           {title}
         </Navbar.Brand>
-        <Navbar.Toggle aria-controls="basic-navbar-nav" />
+        
+        <Navbar.Toggle aria-controls="basic-navbar-nav" style={{ display: 'none' }} />
+        
         <Navbar.Collapse id="basic-navbar-nav">
           {navItems.length > 0 && (
             <Nav className="me-auto">
@@ -72,16 +87,15 @@ export const NavBar: React.FC<NavBarProps> = ({
                     to={item.to}
                     active={item.active}
                     className={className}
-                    style={{
-                      ':hover': {
-                        color: 'var(--bs-primary)',
-                        textDecoration: 'none'
-                      }
-                    }}
+                    title={typeof item.label === 'string' ? item.label : undefined}
                   >
+                    {item.icon && <span className="me-2">{item.icon}</span>}
                     {item.label}
                     {item.badge && (
-                      <Badge bg={item.badge.variant} className="ms-2">
+                      <Badge
+                        bg={item.badge.variant}
+                        className="ms-2"
+                      >
                         {item.badge.text}
                       </Badge>
                     )}
@@ -92,7 +106,9 @@ export const NavBar: React.FC<NavBarProps> = ({
           )}
           {rightContent && (
             <Nav>
-              {rightContent}
+              {React.Children.map(rightContent, (child) => {
+                return child;
+              })}
             </Nav>
           )}
         </Navbar.Collapse>

package/src/components/pure/ProcessManager.tsx

@@ -0,0 +1,117 @@
+import React, { useState, useEffect } from 'react';
+import { Modal, Button, ListGroup, Badge } from 'react-bootstrap';
+
+interface Process {
+  processId: string;
+  command: string;
+  pid?: number;
+  status?: 'running' | 'exited' | 'error';
+  exitCode?: number;
+  error?: string;
+  timestamp: string;
+}
+
+interface ProcessManagerProps {
+  show: boolean;
+  onHide: () => void;
+  ws: WebSocket | null;
+}
+
+export const ProcessManager: React.FC<ProcessManagerProps> = ({ show, onHide, ws }) => {
+  const [processes, setProcesses] = useState<Process[]>([]);
+
+  useEffect(() => {
+    if (show && ws) {
+      // Request current processes when modal is shown
+      ws.send(JSON.stringify({ type: 'getRunningProcesses' }));
+    }
+  }, [show, ws]);
+
+  useEffect(() => {
+    if (!ws) return;
+
+    const handleMessage = (event: MessageEvent) => {
+      try {
+        const data = JSON.parse(event.data);
+        if (data.type === 'runningProcesses') {
+          setProcesses(data.processes.map((p: any) => ({
+            ...p,
+            status: 'running'
+          })));
+        } else if (data.type === 'processStarted') {
+          setProcesses(prev => [...prev, {
+            ...data,
+            status: 'running'
+          }]);
+        } else if (data.type === 'processExited') {
+          setProcesses(prev => prev.map(p => 
+            p.processId === data.processId 
+              ? { ...p, status: 'exited', exitCode: data.exitCode }
+              : p
+          ));
+        } else if (data.type === 'processError') {
+          setProcesses(prev => prev.map(p => 
+            p.processId === data.processId 
+              ? { ...p, status: 'error', error: data.error }
+              : p
+          ));
+        }
+      } catch (error) {
+        console.error('Error parsing process message:', error);
+      }
+    };
+
+    ws.addEventListener('message', handleMessage);
+    return () => ws.removeEventListener('message', handleMessage);
+  }, [ws]);
+
+  const getStatusBadge = (process: Process) => {
+    switch (process.status) {
+      case 'running':
+        return <Badge bg="success">Running</Badge>;
+      case 'exited':
+        return <Badge bg="secondary">Exited ({process.exitCode})</Badge>;
+      case 'error':
+        return <Badge bg="danger">Error</Badge>;
+      default:
+        return <Badge bg="warning">Unknown</Badge>;
+    }
+  };
+
+  return (
+    <Modal show={show} onHide={onHide} size="lg">
+      <Modal.Header closeButton>
+        <Modal.Title>Running Aider Processes</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <ListGroup>
+          {processes.map(process => (
+            <ListGroup.Item key={process.processId} className="d-flex justify-content-between align-items-start">
+              <div className="ms-2 me-auto">
+                <div className="fw-bold">{process.command}</div>
+                <small className="text-muted">
+                  PID: {process.pid || 'N/A'} | 
+                  Started: {new Date(process.timestamp).toLocaleString()}
+                </small>
+                {process.error && (
+                  <div className="text-danger mt-1">
+                    <small>Error: {process.error}</small>
+                  </div>
+                )}
+              </div>
+              {getStatusBadge(process)}
+            </ListGroup.Item>
+          ))}
+          {processes.length === 0 && (
+            <ListGroup.Item>No active processes</ListGroup.Item>
+          )}
+        </ListGroup>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button variant="secondary" onClick={onHide}>
+          Close
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+};