testeranto 0.189.0 → 0.197.0

package/src/components/pure/AppFrame.tsx

@@ -1,29 +1,134 @@
-import React from 'react';
-import { Container } from 'react-bootstrap';
-import { SettingsButton } from './SettingsButton';
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React, { useState } from 'react';
+import { Container, Nav } from 'react-bootstrap';
+import { NavLink } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 
 type AppFrameProps = {
   children: React.ReactNode;
   className?: string;
   style?: React.CSSProperties;
   'data-testid'?: string;
+  title?: string;
+  rightContent?: React.ReactNode;
 };
 
-export const AppFrame = ({ children }: AppFrameProps) => {
+export const AppFrame = ({ children, title, rightContent }: AppFrameProps) => {
+  const location = useLocation();
+  const [isExpanded, setIsExpanded] = useState(true);
+
   return (
-    <div className="d-flex flex-column min-vh-100" key={window.location.pathname}>
+    <div className="d-flex min-vh-100" style={{ backgroundColor: '#f8f9fa' }}>
+      {/* Sidebar */}
+      <div
+        className="bg-light border-end d-flex flex-column"
+        style={{
+          width: isExpanded ? '250px' : '60px',
+          minHeight: '100vh',
+          transition: 'width 0.3s ease'
+        }}
+        onMouseEnter={() => setIsExpanded(true)}
+        onMouseLeave={() => setIsExpanded(false)}
+      >
+        <div className="p-3 border-bottom d-flex align-items-center justify-content-center">
+          {isExpanded ? (
+            <img
+              src="/logo.svg"
+              alt="Testeranto Logo"
+              style={{ width: '128px', height: '128px' }}
+            />
+          ) : (
+            <img
+              src="/logo.svg"
+              alt="Testeranto Logo"
+              style={{ width: '40px', height: '40px' }}
+            />
+          )}
+        </div>
+        <Nav variant="pills" className="flex-column p-2 flex-grow-1">
+          <Nav.Link
+            as={NavLink}
+            to="/"
+            className={`${location.pathname === '/' ? 'active' : ''} text-truncate d-flex align-items-center`}
+            style={{ width: '100%' }}
+            title="Projects"
+          >
+            <span className="me-2">📁</span>
+            {isExpanded && 'Projects'}
+          </Nav.Link>
+
+          {/* temporarily disabled */}
+          {/* <Nav.Link
+            as={NavLink}
+            to="/features-reporter"
+            className={`${location.pathname === '/features-reporter' ? 'active' : ''} text-truncate d-flex align-items-center`}
+            style={{ width: '100%' }}
+            title="Features Reporter"
+          >
+            <span className="me-2">📊</span>
+            {isExpanded && 'Features Reporter'}
+          </Nav.Link>
+          <Nav.Link
+            as={NavLink}
+            to="/design-editor"
+            className={`${location.pathname === '/design-editor' ? 'active' : ''} text-truncate d-flex align-items-center`}
+            style={{ width: '100%' }}
+            title="Design Editor"
+          >
+            <span className="me-2">🎨</span>
+            {isExpanded && 'Design Editor'}
+          </Nav.Link>
+          <Nav.Link
+            as={NavLink}
+            to="/text-editor"
+            className={`${location.pathname === '/text-editor' ? 'active' : ''} text-truncate d-flex align-items-center`}
+            style={{ width: '100%' }}
+            title="Text Editor"
+          >
+            <span className="me-2">📝</span>
+            {isExpanded && 'Text Editor'}
+          </Nav.Link> */}
+
+          <Nav.Link
+            as={NavLink}
+            to="/processes"
+            className={`${location.pathname.startsWith('/processes') ? 'active' : ''} text-truncate d-flex align-items-center`}
+            style={{ width: '100%' }}
+            title="Process Manager"
+          >
+            <span className="me-2">📊</span>
+            {isExpanded && 'Process Manager'}
+          </Nav.Link>
+          <Nav.Link
+            as={NavLink}
+            to="/settings"
+            className={`${location.pathname === '/settings' ? 'active' : ''} text-truncate d-flex align-items-center`}
+            style={{ width: '100%' }}
+            title="Settings"
+          >
+            <span className="me-2">⚙️</span>
+            {isExpanded && 'Settings'}
+          </Nav.Link>
+        </Nav>
+
+        <div className="p-3 border-top text-center mt-auto">
+          {isExpanded ? (
+            <small className="text-muted">
+              made with ❤️ and <a href="https://www.npmjs.com/package/testeranto">testeranto</a>
+            </small>
+          ) : (
+            <small className="text-muted">❤️</small>
+          )}
+        </div>
+      </div>
 
-      <main className="flex-grow-1 p-3">
-        <Container fluid>
-          {children}
-        </Container>
-      </main>
-      <footer className="bg-light py-2 d-flex justify-content-between align-items-center">
-        <SettingsButton />
-        <Container className="text-end" fluid={true}>
-          made with ❤️ and <a href="https://www.npmjs.com/package/testeranto">testeranto</a>
-        </Container>
-      </footer>
+      <div className="flex-grow-1 d-flex flex-column">
+        <main className="flex-grow-1 p-4" style={{ overflow: 'auto' }}>
+          <Container fluid className="h-100">
+            {children}
+          </Container>
+        </main>
+      </div>
     </div>
   );
 };

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

@@ -1,6 +1,8 @@
 import { assert } from "chai";
 import { ITestImplementation } from "../../../CoreTypes";
 import { I, M, O } from "./types";
+import { IModalContentProps } from "../ModalContent";
+import { IPM } from "../../../lib/types";
 
 export const implementation: ITestImplementation<I, O, M> = {
   suites: {
@@ -8,7 +10,7 @@ export const implementation: ITestImplementation<I, O, M> = {
   },
 
   givens: {
-    Default: () => ({
+    Default: (): IModalContentProps => ({
       theme: "light",
       handleThemeChange: () => {},
     }),
@@ -18,26 +20,26 @@ export const implementation: ITestImplementation<I, O, M> = {
   thens: {
     hasModalHeader:
       () =>
-        async ({ htmlElement }) => {
-          const header = htmlElement.querySelector('.modal-header');
+        (state) => {
+          const header = state.htmlElement?.querySelector('.modal-header');
           assert.exists(header, 'Should have Modal.Header');
-          return { htmlElement };
+          return state;
         },
 
     hasThemeCards:
       () =>
-        async ({ htmlElement }) => {
-          const themeCards = htmlElement.querySelectorAll('.theme-card');
-          assert.isAtLeast(themeCards.length, 1, 'Should render ThemeCard components');
-          return { htmlElement };
+        (state) => {
+          const themeCards = state.htmlElement?.querySelectorAll('.theme-card');
+          assert.isAtLeast(themeCards?.length, 1, 'Should render ThemeCard components');
+          return state;
         },
 
     takeScreenshot:
       (name: string) =>
-        async ({ htmlElement }, pm) => {
-          const p = await pm.page();
-          await pm.customScreenShot({ path: name }, p);
-          return { htmlElement };
+        async (state, pm: IPM) => {
+          // For web tests, we can use the PM's screenshot capability
+          // The actual implementation will be handled by the test runner
+          return state;
         },
   },
 };

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

@@ -3,13 +3,65 @@ 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 WrappedModalContent = (props) => (
-  <ModalContent {...props} />
-);
+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(
-  implementation,
+export default Testeranto<I, O, M>(
+  ModalContent,
   specification,
-  WrappedModalContent
+  implementation,
+  testAdapter
 );

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

@@ -17,8 +17,8 @@ export const specification: ITestSpecification<I, O> = (
         ],
         [],
         [
-          Then.hasModalHeader(),
-          Then.hasThemeCards(),
+          Then.hasModalHeader(undefined),
+          Then.hasThemeCards(undefined),
           Then.takeScreenshot("modal-content.png"),
         ]
       ),

package/src/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>
+  );
+};