testeranto 0.200.0 → 0.202.0

package/src/components/pure/AppFrame.tsx

@@ -1,9 +1,12 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import React, { useState } from 'react';
-import { Container, Nav } from 'react-bootstrap';
+import React from 'react';
+import { Container, Nav, OverlayTrigger, Tooltip, Navbar } from 'react-bootstrap';
 import { NavLink } from 'react-router-dom';
 import { useLocation } from 'react-router-dom';
 
+import { useWebSocket, useTutorialMode, useAuth } from '../../App';
+import { UserProfile } from './UserProfile';
+
 type AppFrameProps = {
   children: React.ReactNode;
   className?: string;
@@ -15,116 +18,279 @@ type AppFrameProps = {
 
 export const AppFrame = ({ children, title, rightContent }: AppFrameProps) => {
   const location = useLocation();
-  const [isExpanded, setIsExpanded] = useState(true);
+  const { isConnected } = useWebSocket();
+  const { tutorialMode } = useTutorialMode();
+  const { isAuthenticated, logout } = useAuth();
 
   return (
-    <div className="d-flex min-vh-100" style={{ backgroundColor: '#f8f9fa' }}>
-      {/* Sidebar */}
+    <div className="d-flex min-vh-100" >
+      {/* Sidebar - Always 60px wide, full height */}
       <div
-        className="bg-light border-end d-flex flex-column"
+        className="border-end d-flex flex-column"
         style={{
-          width: isExpanded ? '250px' : '60px',
-          minHeight: '100vh',
-          transition: 'width 0.3s ease'
+          width: '60px',
+          height: '100vh',
+          position: 'sticky',
+          top: 0
         }}
-        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' }}
-            />
-          ) : (
+        {/* Logo - Not clickable */}
+        {tutorialMode ? (
+          <OverlayTrigger
+            placement="right"
+            overlay={
+              <Tooltip id="logo-tooltip">
+                Welcome to Testeranto!
+              </Tooltip>
+            }
+          >
+            <div className="p-3 border-bottom d-flex align-items-center justify-content-center">
+              <img
+                src="/logo.svg"
+                alt="Testeranto Logo"
+                style={{
+                  width: '40px',
+                  height: '40px'
+                }}
+              />
+            </div>
+          </OverlayTrigger>
+        ) : (
+          <div className="p-3 border-bottom d-flex align-items-center justify-content-center">
             <img
               src="/logo.svg"
               alt="Testeranto Logo"
-              style={{ width: '40px', height: '40px' }}
+              style={{
+                width: '40px',
+                height: '40px'
+              }}
             />
-          )}
-        </div>
+          </div>
+        )}
+
+        {/* Navigation */}
         <Nav variant="pills" className="flex-column p-2 flex-grow-1">
+          {/* Projects Link - Always clickable with hover, tutorial tooltip conditionally */}
           <Nav.Link
             as={NavLink}
             to="/"
-            className={`${location.pathname === '/' ? 'active' : ''} text-truncate d-flex align-items-center`}
-            style={{ width: '100%' }}
-            title="Projects"
+            className={`${location.pathname === '/' ? 'active' : ''} d-flex align-items-center justify-content-center`}
+            style={{ height: '40px', width: '40px' }}
           >
-            <span className="me-2">📁</span>
-            {isExpanded && 'Projects'}
+            {tutorialMode ? (
+              <OverlayTrigger
+                placement="right"
+                overlay={
+                  <Tooltip id="projects-tooltip">
+                    Projects
+                  </Tooltip>
+                }
+              >
+                <span>📁</span>
+              </OverlayTrigger>
+            ) : (
+              <span>📁</span>
+            )}
           </Nav.Link>
 
-          {/* temporarily disabled */}
-          {/* <Nav.Link
+          {/* Process Manager Link - Darken if not authenticated or not connected */}
+          <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"
+            to="/processes"
+            className={`${location.pathname.startsWith('/processes') ? 'active' : ''} d-flex align-items-center justify-content-center ${!isConnected || !isAuthenticated ? 'text-muted pe-none' : ''}`}
+            style={{
+              height: '40px',
+              width: '40px',
+              opacity: isConnected && isAuthenticated ? 1 : 0.6
+            }}
+            onClick={(e) => {
+              if (!isConnected || !isAuthenticated) {
+                e.preventDefault();
+              }
+            }}
           >
-            <span className="me-2">📊</span>
-            {isExpanded && 'Features Reporter'}
+            {tutorialMode ? (
+              <OverlayTrigger
+                placement="right"
+                overlay={
+                  <Tooltip id="processes-tooltip">
+                    Processes {!isAuthenticated ? '(Sign in required)' : !isConnected ? '(WebSocket disconnected)' : ''}
+                  </Tooltip>
+                }
+              >
+                <span>📊</span>
+              </OverlayTrigger>
+            ) : (
+              <span>📊</span>
+            )}
           </Nav.Link>
+
+          {/* Git Integration Link - Darken if not authenticated */}
           <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"
+            to="/git"
+            className={`${location.pathname === '/git' ? 'active' : ''} d-flex align-items-center justify-content-center ${!isAuthenticated ? 'text-muted pe-none' : ''}`}
+            style={{
+              height: '40px',
+              width: '40px',
+              opacity: isAuthenticated ? 1 : 0.6
+            }}
+            onClick={(e) => {
+              if (!isAuthenticated) {
+                e.preventDefault();
+              }
+            }}
           >
-            <span className="me-2">🎨</span>
-            {isExpanded && 'Design Editor'}
+            {tutorialMode ? (
+              <OverlayTrigger
+                placement="right"
+                overlay={
+                  <Tooltip id="git-tooltip">
+                    Git Integration {!isAuthenticated ? '(Sign in required)' : ''}
+                  </Tooltip>
+                }
+              >
+                <span>🐙</span>
+              </OverlayTrigger>
+            ) : (
+              <span>🐙</span>
+            )}
           </Nav.Link>
+
+<<<<<<< HEAD
+
           <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> */}
-
+            to="/design-editor"
+            className={`${location.pathname === '/design-editor' ? 'active' : ''} d-flex align-items-center justify-content-center`}
+=======
+          {/* SVG Editor Link - Darken if not authenticated */}
           <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"
+            to="/svg-editor"
+            className={`${location.pathname === '/svg-editor' ? 'active' : ''} d-flex align-items-center justify-content-center ${!isAuthenticated ? 'text-muted pe-none' : ''}`}
+>>>>>>> 79d08b7b (svg editor)
+            style={{
+              height: '40px',
+              width: '40px',
+              opacity: isAuthenticated ? 1 : 0.6
+            }}
+            onClick={(e) => {
+              if (!isAuthenticated) {
+                e.preventDefault();
+              }
+            }}
           >
-            <span className="me-2">📊</span>
-            {isExpanded && 'Process Manager'}
+            {tutorialMode ? (
+              <OverlayTrigger
+                placement="right"
+                overlay={
+<<<<<<< HEAD
+                  <Tooltip id="design-editor-tooltip">
+                    Canvas editor
+                  </Tooltip>
+                }
+              >
+                <span>kanvaso</span>
+              </OverlayTrigger>
+            ) : (
+              <span>kanvaso</span>
+            )}
+          </Nav.Link>
+
+
+=======
+                  <Tooltip id="svg-editor-tooltip">
+                    SVG Editor {!isAuthenticated ? '(Sign in required)' : ''}
+                  </Tooltip>
+                }
+              >
+                <span>🎨</span>
+              </OverlayTrigger>
+            ) : (
+              <span>🎨</span>
+            )}
           </Nav.Link>
+
+>>>>>>> 79d08b7b (svg editor)
+          {/* Settings Link - Always accessible */}
           <Nav.Link
             as={NavLink}
             to="/settings"
-            className={`${location.pathname === '/settings' ? 'active' : ''} text-truncate d-flex align-items-center`}
-            style={{ width: '100%' }}
-            title="Settings"
+            className={`${location.pathname === '/settings' ? 'active' : ''} d-flex align-items-center justify-content-center`}
+            style={{ height: '40px', width: '40px' }}
           >
-            <span className="me-2">⚙️</span>
-            {isExpanded && 'Settings'}
+            {tutorialMode ? (
+              <OverlayTrigger
+                placement="right"
+                overlay={
+                  <Tooltip id="settings-tooltip">
+                    Settings
+                  </Tooltip>
+                }
+              >
+                <span>⚙️</span>
+              </OverlayTrigger>
+            ) : (
+              <span>⚙️</span>
+            )}
           </Nav.Link>
+
         </Nav>
 
-        <div className="p-3 border-top text-center mt-auto">
-          {isExpanded ? (
-            <small className="text-muted">
+        {/* WebSocket Status Indicator - Always show normal tooltip */}
+        <OverlayTrigger
+          placement="right"
+          overlay={
+            <Tooltip id="status-tooltip">
+              {isConnected ? 'Dev mode - Full access' : 'Static mode - Read only'}
+            </Tooltip>
+          }
+        >
+          <div className="p-2 border-top d-flex align-items-center justify-content-center">
+            <span
+              className={`badge rounded-circle d-flex align-items-center justify-content-center`}
+              style={{
+                backgroundColor: isConnected ? '#198754' : '#6c757d',
+                width: '20px',
+                height: '20px',
+                fontSize: '12px'
+              }}
+            >
+              {isConnected ? '🟢' : '🔴'}
+            </span>
+          </div>
+        </OverlayTrigger>
+
+        {/* Footer - Always show normal tooltip */}
+        <OverlayTrigger
+          placement="right"
+          overlay={
+            <Tooltip id="footer-tooltip">
               made with ❤️ and <a href="https://www.npmjs.com/package/testeranto">testeranto</a>
-            </small>
-          ) : (
-            <small className="text-muted">❤️</small>
-          )}
-        </div>
+            </Tooltip>
+          }
+        >
+          <div className="p-3 border-top text-center mt-auto">
+            <span className="text-muted">❤️</span>
+          </div>
+        </OverlayTrigger>
       </div>
 
-      <div className="flex-grow-1 d-flex flex-column">
+      {/* Main Content */}
+      <div className="flex-grow-1 d-flex flex-column" style={{ minHeight: '100vh' }}>
+        {/* Top Navigation Bar */}
+        {/* <Navbar className="border-bottom">
+          <Container fluid>
+            <Navbar.Brand>{title || 'Testeranto'}</Navbar.Brand>
+            <Navbar.Collapse className="justify-content-end">
+              <UserProfile />
+            </Navbar.Collapse>
+          </Container>
+        </Navbar> */}
+
         <main className="flex-grow-1 p-4" style={{ overflow: 'auto' }}>
-          <Container fluid className="h-100">
+          <Container fluid style={{ height: '100%' }}>
             {children}
           </Container>
         </main>

package/src/components/pure/ArtifactTree.tsx

@@ -0,0 +1,82 @@
+// export const ArtifactTree = ({
+//   treeData,
+//   projectName,
+//   testName,
+//   runtime,
+//   onSelect,
+//   level = 0,
+//   basePath = ''
+// }: {
+//   treeData: Record<string, any>;
+//   projectName: string;
+//   testName: string;
+//   runtime: string;
+//   onSelect: (path: string) => void;
+//   level?: number;
+//   basePath?: string;
+// }) => {
+//   const [expanded, setExpanded] = useState<Record<string, boolean>>({});
+
+//   const toggleExpand = (path: string) => {
+//     setExpanded(prev => ({ ...prev, [path]: !prev[path] }));
+//   };
+
+//   return (
+//     <ul className="list-unstyled" style={{ paddingLeft: `${level * 16}px` }}>
+//       {Object.entries(treeData).map(([name, node]) => {
+//         const fullPath = basePath ? `${basePath}/${name}` : name;
+//         const isExpanded = expanded[fullPath];
+
+//         if (node.__isFile) {
+//           return (
+//             <li key={fullPath} className="py-1">
+//               <a
+//                 href={`reports/${projectName}/${testName
+//                   .split('.')
+//                   .slice(0, -1)
+//                   .join('.')}/${runtime}/${node.path}`}
+//                 target="_blank"
+//                 rel="noopener noreferrer"
+//                 className="text-decoration-none"
+//                 onClick={(e) => {
+//                   e.preventDefault();
+//                   onSelect(node.path);
+//                 }}
+//               >
+//                 <i className="bi bi-file-earmark-text me-2"></i>
+//                 {name}
+//               </a>
+//             </li>
+//           );
+//         } else {
+//           return (
+//             <li key={fullPath} className="py-1">
+//               <div className="d-flex align-items-center">
+//                 <button
+//                   className="btn btn-link text-start p-0 text-decoration-none me-1"
+//                   onClick={() => toggleExpand(fullPath)}
+//                 >
+//                   <i
+//                     className={`bi ${isExpanded ? 'bi-folder2-open' : 'bi-folder'} me-2`}
+//                   ></i>
+//                   {name}
+//                 </button>
+//               </div>
+//               {isExpanded && (
+//                 <ArtifactTree
+//                   treeData={node}
+//                   projectName={projectName}
+//                   testName={testName}
+//                   runtime={runtime}
+//                   onSelect={onSelect}
+//                   level={level + 1}
+//                   basePath={fullPath}
+//                 />
+//               )}
+//             </li>
+//           );
+//         }
+//       })}
+//     </ul>
+//   );
+// };

package/src/components/pure/BuildLogViewer.tsx

@@ -0,0 +1,168 @@
+import React from 'react';
+import { Tab, Alert, Badge, Nav, Card, ListGroup } from 'react-bootstrap';
+
+interface BuildLogViewerProps {
+  logs: any;
+  runtime: string;
+}
+
+export const BuildLogViewer: React.FC<BuildLogViewerProps> = ({ logs, runtime }) => {
+  if (!logs) return <Alert variant="info">Loading {runtime.toLowerCase()} build logs...</Alert>;
+
+  const hasErrors = logs.errors?.length > 0;
+  const hasWarnings = logs.warnings?.length > 0;
+  const [activeTab, setActiveTab] = React.useState('summary');
+
+  return (
+    <div>
+      <Tab.Container activeKey={activeTab} onSelect={(k) => setActiveTab(k || 'summary')}>
+        <Nav variant="tabs" className="mb-3">
+          <Nav.Item>
+            <Nav.Link eventKey="summary">Build Summary</Nav.Link>
+          </Nav.Item>
+          <Nav.Item>
+            <Nav.Link eventKey="warnings">
+              {hasWarnings ? `⚠️ Warnings (${logs.warnings.length})` : 'Warnings'}
+            </Nav.Link>
+          </Nav.Item>
+          <Nav.Item>
+            <Nav.Link eventKey="errors">
+              {hasErrors ? `❌ Errors (${logs.errors.length})` : 'Errors'}
+            </Nav.Link>
+          </Nav.Item>
+        </Nav>
+
+        <Tab.Content>
+          <Tab.Pane eventKey="summary">
+            <Card>
+              <Card.Header className="d-flex justify-content-between align-items-center">
+                <h5>Build Summary</h5>
+                <div>
+                  {hasErrors && (
+                    <Badge bg="danger" className="me-2">
+                      {logs.errors.length} Error{logs.errors.length !== 1 ? 's' : ''}
+                    </Badge>
+                  )}
+                  {hasWarnings && (
+                    <Badge bg="warning" text="dark">
+                      {logs.warnings.length} Warning{logs.warnings.length !== 1 ? 's' : ''}
+                    </Badge>
+                  )}
+                  {!hasErrors && !hasWarnings && (
+                    <Badge bg="success">Build Successful</Badge>
+                  )}
+                </div>
+              </Card.Header>
+              <Card.Body>
+                <div className="mb-3">
+                  <h6>Input Files ({Object.keys(logs.metafile?.inputs || {}).length})</h6>
+                  <ListGroup className="max-h-200 overflow-auto">
+                    {Object.keys(logs.metafile?.inputs || {}).map((file) => (
+                      <ListGroup.Item key={file} className="py-2">
+                        <code>{file}</code>
+                        <div className="text-muted small">
+                          {logs.metafile.inputs[file].bytes} bytes
+                        </div>
+                      </ListGroup.Item>
+                    ))}
+                  </ListGroup>
+                </div>
+                <div>
+                  <h6>Output Files ({Object.keys(logs.metafile?.outputs || {}).length})</h6>
+                  <ListGroup className="max-h-200 overflow-auto">
+                    {Object.keys(logs.metafile?.outputs || {}).map((file) => (
+                      <ListGroup.Item key={file} className="py-2">
+                        <code>{file}</code>
+                        <div className="text-muted small">
+                          {logs.metafile.outputs[file].bytes} bytes
+                          {logs.metafile.outputs[file].entryPoint && (
+                            <span className="ms-2 badge bg-info">Entry Point</span>
+                          )}
+                        </div>
+                      </ListGroup.Item>
+                    ))}
+                  </ListGroup>
+                </div>
+              </Card.Body>
+            </Card>
+          </Tab.Pane>
+          <Tab.Pane eventKey="warnings">
+            {hasWarnings ? (
+              <Card className="border-warning">
+                <Card.Header className="bg-warning text-white d-flex justify-content-between align-items-center">
+                  <span>Build Warnings ({logs.warnings.length})</span>
+                  <Badge bg="light" text="dark">
+                    {new Date().toLocaleString()}
+                  </Badge>
+                </Card.Header>
+                <Card.Body className="p-0">
+                  <ListGroup variant="flush">
+                    {logs.warnings.map((warn: any, i: number) => (
+                      <ListGroup.Item key={i} className="text-warning">
+                        <div className="d-flex justify-content-between">
+                          <strong>
+                            {warn.location?.file || 'Unknown file'}
+                            {warn.location?.line && `:${warn.location.line}`}
+                          </strong>
+                          <small className="text-muted">
+                            {warn.pluginName ? `[${warn.pluginName}]` : ''}
+                          </small>
+                        </div>
+                        <div className="mt-1">
+                          <pre className="mb-0 p-2  rounded">
+                            {JSON.stringify(warn)}
+                          </pre>
+                        </div>
+                      </ListGroup.Item>
+                    ))}
+                  </ListGroup>
+                </Card.Body>
+              </Card>
+            ) : (
+              <Alert variant="info">No warnings found</Alert>
+            )}
+          </Tab.Pane>
+          <Tab.Pane eventKey="errors">
+            {hasErrors ? (
+              <Card className="border-danger">
+                <Card.Header className="bg-danger text-white d-flex justify-content-between align-items-center">
+                  <span>Build Errors ({logs.errors.length})</span>
+                  <Badge bg="light" text="dark">
+                    {new Date().toLocaleString()}
+                  </Badge>
+                </Card.Header>
+                <Card.Body className="p-0">
+                  <ListGroup variant="flush">
+                    {logs.errors.map((err: any, i: number) => (
+                      <ListGroup.Item key={i} className="text-danger">
+                        <div className="d-flex justify-content-between">
+                          <strong>
+                            {err.location?.file || 'Unknown file'}
+                            {err.location?.line && `:${err.location.line}`}
+                          </strong>
+                          <small className="text-muted">
+                            {err.pluginName ? `[${err.pluginName}]` : ''}
+                          </small>
+                        </div>
+                        <div className="mt-1">
+                          <pre className="mb-0 p-2  rounded">
+                            {JSON.stringify(err)}
+                          </pre>
+                        </div>
+                      </ListGroup.Item>
+                    ))}
+                  </ListGroup>
+                </Card.Body>
+              </Card>
+            ) : (
+              <Alert variant="success">
+                <h5>No Errors Found</h5>
+                <p className="mb-0">The build completed without any errors.</p>
+              </Alert>
+            )}
+          </Tab.Pane>
+        </Tab.Content>
+      </Tab.Container>
+    </div>
+  );
+};

package/src/components/pure/DebugEnv.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Card, CardBody } from 'react-bootstrap';
+
+export const DebugEnv: React.FC = () => {
+  if (process.env.NODE_ENV === 'production') {
+    return null;
+  }
+
+  const envInfo = {
+    nodeEnv: process.env.NODE_ENV,
+    clientId: process.env.GITHUB_CLIENT_ID,
+    allProcessEnv: Object.keys(process.env)
+      .filter(key => key.startsWith('REACT_APP_'))
+      .reduce((obj, key) => {
+        obj[key] = process.env[key];
+        return obj;
+      }, {} as Record<string, string | undefined>),
+    windowEnv: typeof window !== 'undefined' ? (window as any).env : 'window not defined',
+    location: typeof window !== 'undefined' ? window.location : 'window not defined'
+  };
+
+  return (
+    <Card className="mt-3">
+      <CardBody>
+        <h6>Environment Debug (Development Only)</h6>
+        <pre>{JSON.stringify(envInfo, null, 2)}</pre>
+      </CardBody>
+    </Card>
+  );
+};