testeranto 0.200.1 → 0.203.0

package/src/README.md

@@ -1,5 +1,67 @@
 # Testeranto src
 
+## "git integration" initiative
+
+The next phase will integrate the frontend with git using our existing technology stack.
+
+### Operational Modes
+1. **Static Mode**: Read-only access to local files. Aider cannot run. No server component.
+2. **Development Mode**: Full read/write access to local files. Aider runs locally with server.
+3. **Git Remote Mode**: Read/write via Git to remote repositories. Cannot run Aider. No server component.
+
+### Technical Approach
+- **Git Client**: Use `isomorphic-git` for browser-compatible Git operations
+- **UI Inspiration**: Follow GitHub Desktop's proven simplified Git interface
+- **VSCode Integration**: Use `@vscode/webview-ui-toolkit` components when in VSCode
+- **Editor Integration**: Extend Monaco editor for diff viewing and conflict resolution
+
+### GitHub Desktop-inspired Features
+- **Visual File Status**: Color-coded indicators for file changes
+- **Simple Staging**: Checkbox interface for staging changes
+- **Commit Flow**: Summary and description fields like GitHub Desktop
+- **Branch Management**: Visual branch indicators and switcher
+- **Sync Status**: Clear ahead/behind remote indicators
+- **Conflict Resolution**: Guided resolution workflow
+
+### Key Considerations
+- Aider requires staged files to be visible
+- Design for non-coders with GitHub Desktop's proven mental model
+- Maintain VSCode visual consistency when running as extension
+- Provide fallback UI for standalone usage
+- Focus on core "changes → commit → sync" workflow first
+
+## Git Integration Status
+
+The Git integration is now partially implemented with the following features:
+
+### ✅ Implemented Features
+1. **Navigation**: Git icon in sidebar linking to `/git` route
+2. **UI Layout**: Three-column GitHub Desktop-inspired interface
+3. **Mode Detection**: Automatic mode switching based on WebSocket connection
+4. **File Service**: Unified API for file operations across different modes
+5. **Basic Operations**: Commit, push, and pull functionality stubs
+6. **Status Display**: File changes, branch info, and remote status
+
+### 🔄 Current Implementation
+- **Static Mode**: Read-only file access (when WebSocket is disconnected)
+- **Development Mode**: Full file operations via server API (when WebSocket is connected)
+- **Git Mode**: Stub implementation ready for `isomorphic-git` integration
+
+### 🚧 Next Steps
+1. **Integrate isomorphic-git**: Implement actual Git operations in Git mode
+2. **Server API**: Create endpoints for Development mode file operations
+3. **IndexedDB Setup**: Configure storage for browser-based Git operations
+4. **Conflict Resolution**: Build visual diff and merge tools
+5. **Authentication**: Add support for Git remote authentication
+6. **Performance**: Optimize file operations and caching
+
+### 📁 New Files Added
+- `src/services/FileService.ts` - Unified file operation interface
+- `src/components/stateful/GitIntegrationPage.tsx` - Page component
+- `src/components/pure/GitIntegrationView.tsx` - Main Git interface
+- `src/hooks/useGitMode.ts` - Mode management hook
+- `src/utils/gitTest.ts` - Integration test utility
+
 ## imports
 
 External packages are imported first, then local files. Sort these local import statements by "distance" from the current file.
@@ -69,6 +131,66 @@ Key features:
 - Unified file navigation experience
 - Automatic preview switching based on file type
 
+## File Fetching Strategy
+
+### Centralized File Service
+To address the current ad-hoc file fetching approach, we'll implement a unified `FileService` that handles all file operations consistently across the application.
+
+```typescript
+interface FileService {
+  // Read operations
+  readFile(path: string): Promise<string>
+  readDirectory(path: string): Promise<FileEntry[]>
+  exists(path: string): Promise<boolean>
+  
+  // Write operations (mode-dependent)
+  writeFile(path: string, content: string): Promise<void>
+  createDirectory(path: string): Promise<void>
+  deleteFile(path: string): Promise<void>
+  
+  // Git integration
+  getFileStatus(path: string): Promise<FileStatus>
+  getChanges(): Promise<FileChange[]>
+}
+
+interface FileEntry {
+  name: string
+  path: string
+  type: 'file' | 'directory'
+  size?: number
+  modified?: Date
+}
+
+interface FileStatus {
+  status: 'unchanged' | 'modified' | 'added' | 'deleted' | 'conflicted'
+}
+
+interface FileChange extends FileStatus {
+  path: string
+  diff?: string
+}
+```
+
+### Mode-Specific Implementations
+The FileService will have different implementations based on the current mode:
+
+1. **Static Mode**: Read-only filesystem access
+2. **Development Mode**: Full filesystem access
+3. **Git Remote Mode**: Git-based file operations via isomorphic-git
+
+### Benefits
+- **Consistency**: Uniform API for all file operations
+- **Maintainability**: Single source of truth for file handling logic
+- **Testability**: Easy to mock and test file operations
+- **Mode Awareness**: Automatic behavior adaptation based on current mode
+- **Error Handling**: Centralized error management and recovery
+
+### Integration Points
+- Replace all ad-hoc fetch calls with FileService methods
+- Update existing components to use the new service
+- Add proper error handling and loading states
+- Implement caching where appropriate for performance
+
 ## Core Testing Principles
 
 1. Tests follow BDD structure with Given/When/Then

package/src/ReportServer.ts

@@ -1,12 +0,0 @@
-import { ReportServerOfPort } from "./ReportServerLib";
-import { startDesignEditorServer } from "../design-editor/server";
-
-const port = process.argv[2] || 3000;
-const wssPort = Number(port) + 1; // Use next port for WebSocket
-
-// Start both servers
-ReportServerOfPort(port);
-startDesignEditorServer(wssPort);
-
-console.log(`Report server running on http://localhost:${port}`);
-console.log(`Design editor WebSocket running on ws://localhost:${wssPort}`);

package/src/ReportServerLib.ts

@@ -1,147 +0,0 @@
-// simple http server to preview reports
-
-import staticServer from "node-static";
-import http from "http";
-import path from "path";
-import fs from "fs";
-
-const fileServer = new staticServer.Server("./", {
-  cache: false,
-  headers: {
-    "Cache-Control": "no-cache, no-store, must-revalidate",
-    Pragma: "no-cache",
-    Expires: "0",
-  },
-});
-
-const server = http.createServer((req, res) => {
-  // Handle potential double responses
-  let responded = false;
-
-  const safeResponse = (handler: () => void) => {
-    if (responded) return;
-    responded = true;
-    try {
-      handler();
-    } catch (err) {
-      console.error("Error handling request:", err);
-      if (!res.headersSent) {
-        res.writeHead(500);
-      }
-      res.end("Internal Server Error");
-    }
-  };
-
-  req.on("error", (err) => {
-    console.error("Request error:", err);
-    safeResponse(() => {
-      if (!res.headersSent) {
-        res.writeHead(400);
-      }
-      res.end("Bad Request");
-    });
-  });
-
-  req.on("end", () => {
-    safeResponse(() => {
-      const filePath = path.join(process.cwd(), req.url || "");
-
-      // First check if file exists
-      fs.stat(filePath, (err, stats) => {
-        if (err || !stats.isFile()) {
-          // Check if directory exists
-          fs.stat(filePath, (dirErr, dirStats) => {
-            if (!dirErr && dirStats.isDirectory()) {
-              // Serve directory listing
-              fs.readdir(filePath, (readErr, files) => {
-                if (readErr) {
-                  res.writeHead(500);
-                  return res.end("Error reading directory");
-                }
-
-                res.writeHead(200, { "Content-Type": "text/html" });
-                res.write(`
-                  <html>
-                    <head>
-                      <title>Directory Listing: ${req.url}</title>
-                      <style>
-                        body { font-family: sans-serif; margin: 2rem; }
-                        h1 { color: #333; }
-                        ul { list-style: none; padding: 0; }
-                        li { padding: 0.5rem; }
-                        li a { color: #0366d6; text-decoration: none; }
-                        li a:hover { text-decoration: underline; }
-                      </style>
-                    </head>
-                    <body>
-                      <h1>Directory: ${req.url}</h1>
-                      <ul>
-                        ${files
-                          .map(
-                            (file) => `
-                          <li>
-                            <a href="${path.join(req.url || "", file)}">
-                              ${file}${file.endsWith("/") ? "/" : ""}
-                            </a>
-                          </li>
-                        `
-                          )
-                          .join("")}
-                      </ul>
-                    </body>
-                  </html>
-                `);
-                res.end();
-              });
-            } else {
-              // Neither file nor directory exists - send 404
-              if (!res.headersSent) {
-                res.writeHead(404, { "Content-Type": "text/plain" });
-                res.end("File not found");
-              }
-            }
-          });
-          return;
-        }
-
-        // File exists - serve it through node-static
-        const serve = () => {
-          fileServer.serve(req, res, (err) => {
-            if (err && !res.headersSent) {
-              res.writeHead(err.status || 500);
-              res.end(err.message);
-            }
-          });
-        };
-
-        // Ensure we don't double-serve
-        if (!res.headersSent) {
-          serve();
-        }
-      });
-    });
-  });
-
-  req.resume();
-});
-
-server.on("error", (err) => {
-  console.error("Server error:", err);
-});
-
-process.on("uncaughtException", (err) => {
-  console.error("Uncaught exception:", err);
-});
-
-const start = (port: number) => {
-  if (port) {
-    server.listen(port, () => {
-      console.log(`Server running on http://localhost:${port}`);
-      console.log("Serving files from:", process.cwd());
-    });
-  } else {
-    console.log("you need to specify a port");
-  }
-};
-
-export const ReportServerOfPort = (port: number) => start(port);

package/src/Types.ts

@@ -13,6 +13,7 @@ import { BaseWhen } from "./lib/BaseWhen.js";
 export type ISummary = Record<
   string,
   {
+    runTimeTests: number | "?" | undefined;
     runTimeErrors: number | "?" | undefined;
     typeErrors: number | "?" | undefined;
     staticErrors: number | "?" | undefined;

package/src/app.scss

@@ -1,169 +1,121 @@
 @use "./style.scss";
+@import "testeranto-stilo/src/gradients.scss";
+
+// @use "testeranto-stilo/src/style.scss";
+
+// Custom tooltip styles if needed
+.tooltip {
+  .tooltip-inner {
+    background-color: #333;
+    color: white;
+    border-radius: 4px;
+    padding: 8px 12px;
+    font-size: 14px;
+  }
 
-:root {
-  --bs-heading-color: rgba(0, 0, 0, 0.9);
-  --bs-modal-color: rgba(0, 0, 0, 0.9);
-  --frosted-bg: rgba(255, 255, 255, 0.2);
-  --frosted-border: rgba(255, 255, 255, 0.3);
-  --frosted-text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.3),
-    1px 1px 0 rgba(0, 0, 0, 0.3);
-  --frosted-inset-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
+  .tooltip-arrow::before {
+    border-right-color: #333;
+  }
 }
 
-[data-bs-theme="dark"] {
-  --bs-heading-color: rgba(255, 255, 255, 0.9);
-  --bs-modal-color: rgba(255, 255, 255, 0.9);
-  --frosted-bg: rgba(0, 0, 0, 0.2);
-  --frosted-border: rgba(0, 0, 0, 0.3);
-  --frosted-text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.3),
-    1px 1px 0 rgba(0, 0, 0, 0.3);
-  --frosted-inset-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+// Navbar attention animation - More pronounced
+@keyframes pronounced-pulse {
+  0% {
+    transform: scale(1);
+    box-shadow: 0 0 0 rgba(59, 130, 246, 0);
+    background-color: transparent;
+  }
+  25% {
+    transform: scale(1.15);
+    box-shadow: 0 0 30px rgba(59, 130, 246, 0.6);
+    background-color: rgba(59, 130, 246, 0.1);
+  }
+  50% {
+    transform: scale(1.1);
+    box-shadow: 0 0 40px rgba(59, 130, 246, 0.8);
+    background-color: rgba(59, 130, 246, 0.2);
+  }
+  75% {
+    transform: scale(1.05);
+    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
+    background-color: rgba(59, 130, 246, 0.1);
+  }
+  100% {
+    transform: scale(1);
+    box-shadow: 0 0 0 rgba(59, 130, 246, 0);
+    background-color: transparent;
+  }
 }
 
-pre,
-code,
-.modal-content,
-.accordion-button,
-.theme-card {
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  max-width: 80ch;
-  overflow-x: auto;
-  display: block;
-  padding: 1rem;
+// Wave effect classes for each link - More pronounced
+.navbar-attention-1 {
+  animation: pronounced-pulse 1s ease-in-out 0s;
+  animation-iteration-count: 1;
   border-radius: 8px;
-  font-family: monospace;
-  line-height: 1.4;
-  color: var(--bs-modal-color);
-  background-color: var(--frosted-bg);
-  backdrop-filter: blur(16px) saturate(180%);
-  border: 1px solid var(--frosted-border);
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), var(--frosted-inset-shadow);
-  isolation: isolate;
-  // text-shadow:
-  //   0 1px 3px rgba(0,0,0,0.8),
-  //   0 0 10px rgba(0,0,0,0.6),
-  //   0 0 20px rgba(0,0,0,0.3),
-  //   0 0 40px rgba(0,0,0,0.1);
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  color: var(--light-text);
-  display: inline-block;
-  padding: 0.5rem 1rem;
-  backdrop-filter: var(--text-panel-blur);
-  background-color: var(--text-panel-bg);
+.navbar-attention-2 {
+  animation: pronounced-pulse 1s ease-in-out 0.4s;
+  animation-iteration-count: 1;
   border-radius: 8px;
-  text-shadow: var(--text-shadow-heavy);
-  box-shadow: var(--panel-border), 0 4px 6px rgba(0, 0, 0, 0.1);
-  margin: 0.5rem 0;
 }
 
-p,
-.lead {
-  color: var(--light-text);
-  text-shadow: var(--text-shadow-light);
-  backdrop-filter: var(--text-panel-blur);
-  background-color: var(--text-panel-bg);
-  padding: 1rem;
+.navbar-attention-3 {
+  animation: pronounced-pulse 1s ease-in-out 0.6s;
+  animation-iteration-count: 1;
   border-radius: 8px;
-  box-shadow: var(--panel-border);
-  margin: 1rem 0;
 }
 
-.modal-content {
-  --bs-modal-color: var(--bs-heading-color);
-  background-color: var(--frosted-bg);
-  backdrop-filter: blur(24px) saturate(200%);
-  border: 1px solid var(--frosted-border);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), var(--frosted-inset-shadow);
+.navbar-attention-4 {
+  animation: pronounced-pulse 1s ease-in-out 0.8s;
+  animation-iteration-count: 1;
+  border-radius: 8px;
 }
 
+.navbar-attention-5 {
+  animation: pronounced-pulse 1s ease-in-out 1s;
+  animation-iteration-count: 1;
+  border-radius: 8px;
+}
 
-.theme-card {
-  cursor: pointer;
-  transition: all 0.2s ease;
-  height: 100%;
-  background-color: rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(8px);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  overflow: hidden;
-
-  &:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-    backdrop-filter: blur(12px);
-
-    &::before {
-      opacity: 0.1;
-    }
-  }
-
-  &.border-primary {
-    box-shadow: 0 0 0 2px var(--primary);
-    background-color: rgba(var(--primary-rgb), 0.2);
-  }
+.navbar-attention-6 {
+  animation: pronounced-pulse 1s ease-in-out 1.2s;
+  animation-iteration-count: 1;
+  border-radius: 8px;
+}
 
-  &::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: radial-gradient(
-      circle at center,
-      rgba(255, 255, 255, 0.3) 0%,
-      transparent 70%
-    );
-    opacity: 0;
-    transition: opacity 0.3s ease;
+// For the sidebar container - More pronounced
+// .sidebar-attention {
+//   animation: pronounced-pulse 2s ease-in-out;
+//   animation-iteration-count: 1;
+//   border-right: 3px solid #3b82f6 !important;
+//   border-radius: 0 12px 12px 0;
+// }
+
+// Gradient animation for helpo drawer
+@keyframes gradientShift {
+  0% {
+    background-position: 0% 50%;
   }
-
-  .card-body {
-    position: relative;
-    z-index: 1;
+  50% {
+    background-position: 100% 50%;
   }
-}
-
-.accordion-button {
-  font-weight: 500;
-  background-color: rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(8px);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-
-  &:not(.collapsed) {
-    background-color: rgba(var(--primary-rgb), 0.2);
-    color: var(--dark);
-    backdrop-filter: blur(12px);
+  100% {
+    background-position: 0% 50%;
   }
 }
 
-.modal-content {
-  border-radius: 12px;
-  overflow: hidden;
-  background-color: rgba(255, 255, 255, 0.08);
-  backdrop-filter: blur(24px) saturate(200%);
-  border: 1px solid rgba(255, 255, 255, 0.25);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
-    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
-  isolation: isolate;
+// Helpo drawer styles
+.helpo-drawer {
+  z-index: 1000; // Same as main content
+  transition: width 0.3s ease;
 }
 
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+// Ensure proper z-indexing
+.sidebar {
+  z-index: 1010; // Higher than helpo
 }
 
-.gear-icon {
-  transition: transform 0.3s ease;
+.main-content {
+  z-index: 1000; // Same as helpo
 }