npm - agentgui - Versions diffs - 1.0.9 → 1.0.11 - Mend

agentgui 1.0.9 → 1.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/static/index.html CHANGED Viewed

@@ -4,7 +4,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>GMGUI - Chat with CLI Agents</title>
-  <link rel="stylesheet" href="rippleui.css">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rippleui@1.12.1/dist/css/styles.css" />
   <link rel="stylesheet" href="styles.css">
 </head>
 <body>
@@ -93,12 +94,12 @@
         <div class="setting-group">
           <label for="connectTimeout">Connection Timeout (seconds)</label>
-          <input type="number" id="connectTimeout" value="30" class="input" />
+          <input type="number" id="connectTimeout" value="30" class="gm-input" />
         </div>
         <div class="setting-group">
           <label for="screenshotFormat">Screenshot Format</label>
-          <select id="screenshotFormat" class="input">
+          <select id="screenshotFormat" class="gm-input">
             <option value="png">PNG</option>
             <option value="jpg">JPEG</option>
           </select>
@@ -108,13 +109,13 @@
   </div>
   <!-- Modal for new chat options -->
-  <div id="newChatModal" class="modal">
-    <div class="modal-content" style="max-width: 400px;">
-      <div class="modal-header">
+  <div id="newChatModal" class="gm-modal">
+    <div class="gm-modal-content" style="max-width: 400px;">
+      <div class="gm-modal-header">
         <h3>New Chat</h3>
-        <button onclick="closeNewChatModal()" class="btn-close">&times;</button>
+        <button onclick="closeNewChatModal()" class="gm-btn-close">&times;</button>
       </div>
-      <div class="modal-body" style="gap: 1rem; flex-direction: column; padding: 2rem;">
+      <div class="gm-modal-body" style="gap: 1rem; flex-direction: column; padding: 2rem;">
         <button class="chat-option-btn" onclick="createChatInWorkspace()">
           <span class="chat-option-icon">💬</span>
           <div class="chat-option-content">
@@ -141,65 +142,65 @@
   </div>
   <!-- Modal for folder browser -->
-  <div id="folderBrowserModal" class="modal">
-    <div class="modal-content" style="max-width: 600px; height: 500px;">
-      <div class="modal-header">
+  <div id="folderBrowserModal" class="gm-modal">
+    <div class="gm-modal-content" style="max-width: 600px; height: 500px;">
+      <div class="gm-modal-header">
         <h3>Select a Folder</h3>
-        <button class="btn-close" onclick="closeFolderBrowser()">&times;</button>
+        <button class="gm-btn-close" onclick="closeFolderBrowser()">&times;</button>
       </div>
-      <div class="modal-body" style="flex-direction: column; gap: 0; padding: 0;">
+      <div class="gm-modal-body" style="flex-direction: column; gap: 0; padding: 0;">
         <div style="padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); display: flex; gap: 0.5rem; align-items: center;">
-          <input type="text" id="folderPath" class="input" placeholder="/home or ~" style="flex: 1; margin: 0;" />
-          <button onclick="browseFolders()" class="btn btn-primary" style="margin: 0;">Browse</button>
+          <input type="text" id="folderPath" class="gm-input" placeholder="/home or ~" style="flex: 1; margin: 0;" />
+          <button onclick="browseFolders()" class="gm-btn gm-btn-primary" style="margin: 0;">Browse</button>
         </div>
         <div id="folderBrowserList" style="flex: 1; overflow-y: auto; padding: 0; border: none;"></div>
       </div>
-      <div class="modal-footer">
-        <button onclick="confirmFolderSelection()" class="btn btn-primary">Select</button>
-        <button onclick="closeFolderBrowser()" class="btn btn-secondary">Cancel</button>
+      <div class="gm-modal-footer">
+        <button onclick="confirmFolderSelection()" class="gm-btn gm-btn-primary">Select</button>
+        <button onclick="closeFolderBrowser()" class="gm-btn gm-btn-secondary">Cancel</button>
       </div>
     </div>
   </div>
   <!-- Modal for delete confirmation -->
-  <div id="deleteConfirmModal" class="modal">
-    <div class="modal-content" style="max-width: 400px;">
-      <div class="modal-header">
+  <div id="deleteConfirmModal" class="gm-modal">
+    <div class="gm-modal-content" style="max-width: 400px;">
+      <div class="gm-modal-header">
         <h3>Delete Chat</h3>
-        <button class="btn-close" onclick="app.closeDeleteConfirmDialog()">&times;</button>
+        <button class="gm-btn-close" onclick="app.closeDeleteConfirmDialog()">&times;</button>
       </div>
-      <div class="modal-body" style="flex-direction: column; gap: 1rem; text-align: center;">
+      <div class="gm-modal-body" style="flex-direction: column; gap: 1rem; text-align: center;">
         <p style="margin: 0; color: var(--text-primary);">Are you sure you want to delete this chat?</p>
         <p style="margin: 0; font-size: 0.875rem; color: var(--text-tertiary);">This action cannot be undone.</p>
       </div>
-      <div class="modal-footer">
-        <button class="btn-confirm btn btn-danger">Delete</button>
-        <button class="btn-cancel btn btn-secondary">Cancel</button>
+      <div class="gm-modal-footer">
+        <button class="gm-btn-confirm gm-btn gm-btn-danger">Delete</button>
+        <button class="gm-btn-cancel gm-btn gm-btn-secondary">Cancel</button>
       </div>
     </div>
   </div>
   <!-- Modal for screenshot preview -->
-  <div id="screenshotModal" class="modal">
-    <div class="modal-content">
-      <div class="modal-header">
+  <div id="screenshotModal" class="gm-modal">
+    <div class="gm-modal-content">
+      <div class="gm-modal-header">
         <h3>Screenshot Captured</h3>
-        <button onclick="closeScreenshotModal()" class="btn-close">&times;</button>
+        <button onclick="closeScreenshotModal()" class="gm-btn-close">&times;</button>
       </div>
-      <div class="modal-body">
+      <div class="gm-modal-body">
         <img id="screenshotImage" src="" alt="Screenshot" style="max-width: 100%; max-height: 60vh; border-radius: 0.5rem;" />
       </div>
-      <div class="modal-footer">
-        <button onclick="sendScreenshot()" class="btn btn-success">Send to Agent</button>
-        <button onclick="downloadScreenshot()" class="btn btn-secondary">Download</button>
-        <button onclick="closeScreenshotModal()" class="btn btn-secondary">Close</button>
+      <div class="gm-modal-footer">
+        <button onclick="sendScreenshot()" class="gm-btn gm-btn-success">Send to Agent</button>
+        <button onclick="downloadScreenshot()" class="gm-btn gm-btn-secondary">Download</button>
+        <button onclick="closeScreenshotModal()" class="gm-btn gm-btn-secondary">Close</button>
       </div>
     </div>
   </div>
   <!-- Loading overlay -->
   <div id="loadingOverlay" class="loading-overlay">
-    <div class="spinner"></div>
+    <div class="gm-spinner"></div>
   </div>
   <script src="theme.js"></script>

package/static/styles.css CHANGED Viewed

@@ -1,6 +1,4 @@
-* {
-  margin: 0;
-  padding: 0;
+*, *::before, *::after {
   box-sizing: border-box;
 }
@@ -594,7 +592,7 @@ html, body {
   cursor: pointer;
 }
-.input {
+.gm-input {
   width: 100%;
   padding: 0.75rem;
   border: 1px solid var(--border-color);
@@ -607,7 +605,7 @@ html, body {
   margin-top: 0.5rem;
 }
-.input:focus {
+.gm-input:focus {
   outline: none;
   border-color: var(--color-primary);
   box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
@@ -619,6 +617,7 @@ html, body {
   flex-wrap: wrap;
   gap: 1rem;
   animation: slideUp 0.2s ease;
+  width: 100%;
 }
 .message-bubble {
@@ -627,6 +626,7 @@ html, body {
   padding: 0.75rem 1rem;
   border-radius: 0.5rem;
   word-wrap: break-word;
+  white-space: pre-wrap;
 }
 .message.user .message-bubble {
@@ -819,9 +819,9 @@ html, body {
   flex: 0 1 100%;
   border: 1px solid var(--border-color);
   border-radius: 0.5rem;
-  overflow: hidden;
+  overflow: visible;
   background: var(--bg-secondary);
-  max-width: 70%;
+  max-width: 100%;
 }
 .html-header {
@@ -835,22 +835,10 @@ html, body {
 .html-content {
   padding: 0.75rem;
-  font-size: 0.9rem;
-  color: var(--text-primary);
   overflow-x: auto;
 }
-.html-content > * {
-  margin: 0.5rem 0;
-}
-.html-content > *:first-child {
-  margin-top: 0;
-}
-.html-content > *:last-child {
-  margin-bottom: 0;
-}
 .image-block {
   flex: 0 1 100%;
@@ -938,7 +926,7 @@ html, body {
 }
 /* Modal */
-.modal {
+.gm-modal {
   display: none;
   position: fixed;
   inset: 0;
@@ -971,11 +959,11 @@ html, body {
   }
 }
-.modal.active {
+.gm-modal.active {
   display: flex;
 }
-.modal-content {
+.gm-modal-content {
   background: var(--bg-primary);
   border-radius: 0.75rem;
   box-shadow: var(--shadow-xl);
@@ -988,7 +976,7 @@ html, body {
   transition: var(--transition-smooth);
 }
-.modal-header {
+.gm-modal-header {
   padding: 1.5rem;
   border-bottom: 1px solid var(--border-color);
   display: flex;
@@ -996,12 +984,12 @@ html, body {
   align-items: center;
 }
-.modal-header h3 {
+.gm-modal-header h3 {
   margin: 0;
   color: var(--text-primary);
 }
-.modal-body {
+.gm-modal-body {
   padding: 1.5rem;
   overflow-y: auto;
   flex: 1;
@@ -1010,7 +998,7 @@ html, body {
   justify-content: center;
 }
-.modal-footer {
+.gm-modal-footer {
   padding: 1rem 1.5rem;
   border-top: 1px solid var(--border-color);
   display: flex;
@@ -1069,7 +1057,7 @@ html, body {
   color: var(--text-tertiary);
 }
-.btn {
+.gm-btn {
   padding: 0.625rem 1rem;
   border: none;
   border-radius: 0.5rem;
@@ -1083,47 +1071,47 @@ html, body {
   white-space: nowrap;
 }
-.btn-primary {
+.gm-btn-primary {
   background: var(--color-primary);
   color: white;
 }
-.btn-primary:hover {
+.gm-btn-primary:hover {
   background: var(--color-primary-light);
   transform: translateY(-1px);
 }
-.btn-success {
+.gm-btn-success {
   background: var(--color-success);
   color: white;
 }
-.btn-success:hover {
+.gm-btn-success:hover {
   background: #059669;
   transform: translateY(-1px);
 }
-.btn-secondary {
+.gm-btn-secondary {
   background: var(--bg-tertiary);
   color: var(--text-primary);
   border: 1px solid var(--border-color);
 }
-.btn-secondary:hover {
+.gm-btn-secondary:hover {
   background: var(--border-color);
 }
-.btn-danger {
+.gm-btn-danger {
   background: var(--color-danger);
   color: white;
 }
-.btn-danger:hover {
+.gm-btn-danger:hover {
   background: #dc2626;
   transform: translateY(-1px);
 }
-.btn-close {
+.gm-btn-close {
   background: none;
   border: none;
   font-size: 2rem;
@@ -1138,7 +1126,7 @@ html, body {
   transition: var(--transition-fast);
 }
-.btn-close:hover {
+.gm-btn-close:hover {
   color: var(--text-primary);
 }
@@ -1157,7 +1145,7 @@ html, body {
   display: flex;
 }
-.spinner {
+.gm-spinner {
   width: 48px;
   height: 48px;
   border: 4px solid rgba(255, 255, 255, 0.3);
@@ -1420,7 +1408,7 @@ html, body {
   .sidebar,
   .chat-input-section,
   .chat-footer,
-  .modal,
+  .gm-modal,
   .loading-overlay {
     display: none;
   }

package/install.sh DELETED Viewed

@@ -1,147 +0,0 @@
-#!/bin/bash
-set -euo pipefail
-# GMGUI Installation Script
-# Robust, error-handled installation with proper cleanup
-# Enable error handling and cleanup
-TMPDIR=""
-EXIT_CODE=0
-cleanup() {
-  local code=$?
-  if [ -n "$TMPDIR" ] && [ -d "$TMPDIR" ]; then
-    rm -rf "$TMPDIR" 2>/dev/null || true
-  fi
-  if [ $code -ne 0 ] && [ $code -ne 130 ]; then
-    echo "Error: Installation failed. Check messages above." >&2
-  fi
-  exit $code
-}
-# Handle interrupts gracefully
-handle_interrupt() {
-  echo ""
-  echo "Installation interrupted. Cleaning up..." >&2
-  exit 130
-}
-trap cleanup EXIT
-trap handle_interrupt SIGINT SIGTERM
-# Detect runtime (prefer bun, fall back to node)
-RUNTIME=""
-if command -v bun &> /dev/null; then
-  RUNTIME=bun
-elif command -v node &> /dev/null; then
-  RUNTIME=node
-else
-  echo "Error: Neither bun nor node is installed." >&2
-  echo "Install one with:" >&2
-  echo "  • Bun (recommended, 3-4x faster):" >&2
-  echo "    curl -fsSL https://bun.sh/install | bash" >&2
-  echo "  • Node.js:" >&2
-  echo "    curl https://nodejs.org/en/download/" >&2
-  exit 1
-fi
-# Verify curl or wget is available
-if ! command -v curl &> /dev/null && ! command -v wget &> /dev/null; then
-  echo "Error: Neither curl nor wget found. Install one to download gmgui." >&2
-  exit 1
-fi
-# Create temp directory with secure permissions
-TMPDIR=$(mktemp -d) || {
-  echo "Error: Could not create temporary directory." >&2
-  exit 1
-}
-# Verify we have write access to temp directory
-if ! [ -w "$TMPDIR" ]; then
-  echo "Error: No write permission to temporary directory." >&2
-  exit 1
-fi
-# Check disk space (need at least 200MB)
-AVAILABLE_KB=$(df "$TMPDIR" 2>/dev/null | tail -1 | awk '{print $4}' || echo 0)
-if [ "$AVAILABLE_KB" -lt 200000 ]; then
-  echo "Warning: Low disk space. At least 200MB recommended." >&2
-fi
-echo "Downloading gmgui from GitHub..."
-cd "$TMPDIR"
-# Use git if available, otherwise use curl/wget to download tarball
-if command -v git &> /dev/null; then
-  # Git clone with error handling
-  if ! git clone --depth=1 https://github.com/AnEntrypoint/gmgui.git . 2>&1 | grep -v "^Cloning"; then
-    echo "Warning: Git clone failed, trying tarball download..." >&2
-    # Fallback to tarball
-    if command -v curl &> /dev/null; then
-      curl -fsSL https://github.com/AnEntrypoint/gmgui/archive/refs/heads/main.tar.gz | tar xz --strip-components=1 || {
-        echo "Error: Could not download gmgui from GitHub." >&2
-        exit 1
-      }
-    else
-      wget -qO- https://github.com/AnEntrypoint/gmgui/archive/refs/heads/main.tar.gz | tar xz --strip-components=1 || {
-        echo "Error: Could not download gmgui from GitHub." >&2
-        exit 1
-      }
-    fi
-  fi
-else
-  echo "Downloading tarball (git not available)..."
-  # Download tarball with curl or wget
-  if command -v curl &> /dev/null; then
-    curl -fsSL https://github.com/AnEntrypoint/gmgui/archive/refs/heads/main.tar.gz | tar xz --strip-components=1 || {
-      echo "Error: Could not download gmgui from GitHub." >&2
-      exit 1
-    }
-  else
-    wget -qO- https://github.com/AnEntrypoint/gmgui/archive/refs/heads/main.tar.gz | tar xz --strip-components=1 || {
-      echo "Error: Could not download gmgui from GitHub." >&2
-      exit 1
-    }
-  fi
-fi
-# Verify essential files were downloaded
-if [ ! -f server.js ] || [ ! -f package.json ]; then
-  echo "Error: Downloaded files appear corrupted. Missing server.js or package.json." >&2
-  exit 1
-fi
-echo "Installing dependencies with $RUNTIME..."
-if [ "$RUNTIME" = "bun" ]; then
-  if ! bun install --frozen-lockfile 2>&1 | grep -E "added|removed|found|vulnerabilities" | tail -1; then
-    # Warn but don't fail if grep doesn't match
-    bun install --frozen-lockfile 2>&1 | tail -3
-  fi
-else
-  if ! npm install 2>&1 | grep -E "added|removed|found|vulnerabilities" | tail -1; then
-    # Warn but don't fail if grep doesn't match
-    npm install 2>&1 | tail -3
-  fi
-  # For Node.js, install better-sqlite3 if not already present
-  echo "Installing better-sqlite3 for Node.js..."
-  if ! npm install better-sqlite3 2>&1 | grep -E "added|removed|found|vulnerabilities" | tail -1; then
-    # Warn but don't fail - may already be installed
-    echo "Note: better-sqlite3 installation completed." >&2
-  fi
-fi
-echo ""
-echo "✓ Installation complete!"
-echo ""
-echo "Starting gmgui server on http://localhost:3000"
-echo "Press Ctrl+C to stop"
-echo ""
-# Start server with proper error handling
-if [ "$RUNTIME" = "bun" ]; then
-  exec bun run server.js
-else
-  exec node server.js
-fi