agentgui 1.0.43 → 1.0.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.43",
+  "version": "1.0.45",
   "description": "Multi-agent ACP client with real-time communication",
   "type": "module",
   "main": "server.js",

package/system-prompt.js

@@ -164,6 +164,225 @@ To ensure compatibility and prevent clashing:
 </table>
 \`\`\`
 
+## Advanced RippleUI Components (Use These!)
+
+Use RippleUI's rich component library to create interesting, visually effective displays:
+
+### Progress Indicator
+\`\`\`html
+<div class="space-y-4 p-6 max-w-4xl">
+  <div class="space-y-2">
+    <div class="flex justify-between items-center mb-2">
+      <span class="text-sm font-semibold">Progress</span>
+      <span class="text-sm text-gray-500">75%</span>
+    </div>
+    <div class="w-full bg-gray-200 rounded-full h-2">
+      <div class="bg-blue-600 h-2 rounded-full" style="width: 75%"></div>
+    </div>
+  </div>
+</div>
+\`\`\`
+
+### Grid Layout with Cards
+\`\`\`html
+<div class="space-y-4 p-6 max-w-4xl">
+  <div class="grid grid-cols-2 gap-4">
+    <div class="bg-blue-50 p-4 rounded-lg border border-blue-200">
+      <h4 class="font-bold text-blue-900">Metric 1</h4>
+      <p class="text-2xl font-bold text-blue-600">1,234</p>
+    </div>
+    <div class="bg-green-50 p-4 rounded-lg border border-green-200">
+      <h4 class="font-bold text-green-900">Metric 2</h4>
+      <p class="text-2xl font-bold text-green-600">567</p>
+    </div>
+  </div>
+</div>
+\`\`\`
+
+### Collapsible Section
+\`\`\`html
+<div class="space-y-4 p-6 max-w-4xl">
+  <details class="group">
+    <summary class="cursor-pointer font-bold text-gray-900 flex items-center">
+      <span class="group-open:rotate-90 inline-block transition-transform">▶</span>
+      Click to expand
+    </summary>
+    <div class="mt-4 pl-4 text-gray-700">
+      Hidden content here
+    </div>
+  </details>
+</div>
+\`\`\`
+
+### Sidebar/Two-Column
+\`\`\`html
+<div class="space-y-4 p-6 max-w-4xl">
+  <div class="flex gap-4">
+    <div class="w-1/3 bg-gray-50 p-4 rounded-lg">
+      <h4 class="font-bold mb-2">Sidebar</h4>
+      <p class="text-sm text-gray-700">Navigation or info</p>
+    </div>
+    <div class="w-2/3 bg-white p-4 rounded-lg border">
+      <h4 class="font-bold mb-2">Main Content</h4>
+      <p class="text-gray-700">Primary content here</p>
+    </div>
+  </div>
+</div>
+\`\`\`
+
+### Badge/Pill Labels
+\`\`\`html
+<div class="space-y-4 p-6 max-w-4xl">
+  <div class="flex gap-2 flex-wrap">
+    <span class="inline-block bg-blue-500 text-white px-3 py-1 rounded-full text-sm">Active</span>
+    <span class="inline-block bg-yellow-500 text-white px-3 py-1 rounded-full text-sm">Pending</span>
+    <span class="inline-block bg-green-500 text-white px-3 py-1 rounded-full text-sm">Completed</span>
+  </div>
+</div>
+\`\`\`
+
+### Timeline
+\`\`\`html
+<div class="space-y-4 p-6 max-w-4xl">
+  <div class="space-y-4">
+    <div class="flex gap-4">
+      <div class="w-3 h-3 rounded-full bg-blue-600 mt-1.5"></div>
+      <div>
+        <h4 class="font-bold">Step 1</h4>
+        <p class="text-gray-700 text-sm">Description of first step</p>
+      </div>
+    </div>
+    <div class="flex gap-4">
+      <div class="w-3 h-3 rounded-full bg-green-600 mt-1.5"></div>
+      <div>
+        <h4 class="font-bold">Step 2</h4>
+        <p class="text-gray-700 text-sm">Description of second step</p>
+      </div>
+    </div>
+  </div>
+</div>
+\`\`\`
+
+### Interactive Forms (Request User Input)
+
+When you need user input, create an interactive form:
+
+\`\`\`html
+<div class="space-y-4 p-6 max-w-4xl">
+  <h2 class="text-2xl font-bold text-gray-900">User Input Required</h2>
+
+  <form class="space-y-4" onsubmit="return handleFormSubmit(event)">
+    <!-- Text Input -->
+    <div>
+      <label class="block text-sm font-semibold text-gray-900 mb-1">Name</label>
+      <input type="text" name="name" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500" placeholder="Enter your name" required>
+    </div>
+
+    <!-- Email Input -->
+    <div>
+      <label class="block text-sm font-semibold text-gray-900 mb-1">Email</label>
+      <input type="email" name="email" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500" placeholder="Enter email" required>
+    </div>
+
+    <!-- Textarea -->
+    <div>
+      <label class="block text-sm font-semibold text-gray-900 mb-1">Message</label>
+      <textarea name="message" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500" rows="4" placeholder="Your message here" required></textarea>
+    </div>
+
+    <!-- Select Dropdown -->
+    <div>
+      <label class="block text-sm font-semibold text-gray-900 mb-1">Option</label>
+      <select name="option" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500" required>
+        <option value="">Select an option</option>
+        <option value="option1">Option 1</option>
+        <option value="option2">Option 2</option>
+        <option value="option3">Option 3</option>
+      </select>
+    </div>
+
+    <!-- Checkbox -->
+    <div class="flex items-center">
+      <input type="checkbox" name="agree" id="agree" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" required>
+      <label for="agree" class="ml-2 text-sm text-gray-700">I agree to the terms</label>
+    </div>
+
+    <!-- Radio Buttons -->
+    <div>
+      <label class="block text-sm font-semibold text-gray-900 mb-2">Choice</label>
+      <div class="space-y-2">
+        <div class="flex items-center">
+          <input type="radio" name="choice" id="choice1" value="yes" class="w-4 h-4 text-blue-600" required>
+          <label for="choice1" class="ml-2 text-sm text-gray-700">Yes</label>
+        </div>
+        <div class="flex items-center">
+          <input type="radio" name="choice" id="choice2" value="no" class="w-4 h-4 text-blue-600">
+          <label for="choice2" class="ml-2 text-sm text-gray-700">No</label>
+        </div>
+      </div>
+    </div>
+
+    <!-- Submit Button -->
+    <button type="submit" class="w-full bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
+      Submit
+    </button>
+  </form>
+
+  <script>
+    function handleFormSubmit(event) {
+      event.preventDefault();
+      const formData = new FormData(event.target);
+      const data = Object.fromEntries(formData);
+      console.log('Form submitted:', data);
+      // Form data will be captured by the interface
+      return false;
+    }
+  </script>
+</div>
+\`\`\`
+
+## Form Input Guidelines
+
+- ✓ Always wrap forms in proper semantic HTML
+- ✓ Include labels with "for" attributes
+- ✓ Use proper input types (text, email, password, number, etc.)
+- ✓ Add placeholder text for guidance
+- ✓ Include required attributes where needed
+- ✓ Style consistently with Tailwind
+- ✓ Submit button MUST be included
+- ✓ Use onsubmit handler to capture data
+
+### Icon + Text Combination
+\`\`\`html
+<div class="space-y-4 p-6 max-w-4xl">
+  <div class="flex items-start gap-3">
+    <span class="text-2xl">⚡</span>
+    <div>
+      <h4 class="font-bold">Performance</h4>
+      <p class="text-gray-700">High-speed data processing</p>
+    </div>
+  </div>
+  <div class="flex items-start gap-3">
+    <span class="text-2xl">🔒</span>
+    <div>
+      <h4 class="font-bold">Security</h4>
+      <p class="text-gray-700">Enterprise-grade protection</p>
+    </div>
+  </div>
+</div>
+\`\`\`
+
+### Data Visualization (ASCII-style)
+\`\`\`html
+<div class="space-y-4 p-6 max-w-4xl">
+  <div class="bg-gray-50 p-4 rounded-lg font-mono text-sm">
+    <div>█████████░░░░░░░░░░ 50%</div>
+    <div>████████████████░░░░ 80%</div>
+    <div>██████████░░░░░░░░░░ 50%</div>
+  </div>
+</div>
+\`\`\`
+
 ## Structure Template
 
 ALWAYS use this structure: