Add workflow and feature comparison diagrams for poorcoder

vgrichina · vgrichina · commit 547cbbb1d1c0 · 2025-03-20T13:56:44.000-07:00
Create three SVG diagrams illustrating poorcoder's workflow, script details, and feature comparison with other AI coding tools, enhancing project documentation and visual explanation of the tool's capabilities.
diff --git a/images/poorcoder-comparison-table.svg b/images/poorcoder-comparison-table.svg
@@ -0,0 +1,84 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 420">
+  <!-- Background -->
+  <rect width="800" height="420" fill="#f8f9fa" rx="10" ry="10" />
+  
+  <!-- Title -->
+  <text x="400" y="40" font-family="Arial, sans-serif" font-size="24" font-weight="bold" text-anchor="middle" fill="#333">poorcoder vs. Other AI Coding Tools</text>
+  
+  <!-- Table Headers -->
+  <rect x="50" y="70" width="200" height="50" fill="#4b6584" rx="5" ry="5" />
+  <rect x="250" y="70" width="170" height="50" fill="#4b6584" rx="5" ry="5" />
+  <rect x="420" y="70" width="170" height="50" fill="#4b6584" rx="5" ry="5" />
+  <rect x="590" y="70" width="160" height="50" fill="#4b6584" rx="5" ry="5" />
+  
+  <text x="150" y="100" font-family="Arial, sans-serif" font-size="16" font-weight="bold" text-anchor="middle" fill="white">Feature</text>
+  <text x="335" y="100" font-family="Arial, sans-serif" font-size="16" font-weight="bold" text-anchor="middle" fill="white">poorcoder</text>
+  <text x="505" y="100" font-family="Arial, sans-serif" font-size="16" font-weight="bold" text-anchor="middle" fill="white">IDE Integrations</text>
+  <text x="670" y="100" font-family="Arial, sans-serif" font-size="16" font-weight="bold" text-anchor="middle" fill="white">CLI Tools</text>
+  
+  <!-- Row 1 -->
+  <rect x="50" y="120" width="200" height="50" fill="#d1d8e0" rx="5" ry="5" />
+  <rect x="250" y="120" width="170" height="50" fill="white" rx="5" ry="5" />
+  <rect x="420" y="120" width="170" height="50" fill="white" rx="5" ry="5" />
+  <rect x="590" y="120" width="160" height="50" fill="white" rx="5" ry="5" />
+  
+  <text x="150" y="150" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" fill="#333">Cost</text>
+  <text x="335" y="150" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" fill="#333">$20-30/month (existing sub)</text>
+  <text x="505" y="150" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" fill="#333">$15-60/month + API</text>
+  <text x="670" y="150" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" fill="#333">$100-500/month (API)</text>
+  
+  <!-- Row 2 -->
+  <rect x="50" y="170" width="200" height="50" fill="#d1d8e0" rx="5" ry="5" />
+  <rect x="250" y="170" width="170" height="50" fill="white" rx="5" ry="5" />
+  <rect x="420" y="170" width="170" height="50" fill="white" rx="5" ry="5" />
+  <rect x="590" y="170" width="160" height="50" fill="white" rx="5" ry="5" />
+  
+  <text x="150" y="200" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" fill="#333">Terminal Workflow</text>
+  <text x="335" y="200" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" fill="#333">Full ✓</text>
+  <text x="505" y="200" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" fill="#333">Partial ∼</text>
+  <text x="670" y="200" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" fill="#333">Full ✓</text>
+  
+  <!-- Row 3 -->
+  <rect x="50" y="220" width="200" height="50" fill="#d1d8e0" rx="5" ry="5" />
+  <rect x="250" y="220" width="170" height="50" fill="white" rx="5" ry="5" />
+  <rect x="420" y="220" width="170" height="50" fill="white" rx="5" ry="5" />
+  <rect x="590" y="220" width="160" height="50" fill="white" rx="5" ry="5" />
+  
+  <text x="150" y="250" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" fill="#333">Installation</text>
+  <text x="335" y="250" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" fill="#333">Copy scripts (lightweight)</text>
+  <text x="505" y="250" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" fill="#333">Full IDE addon</text>
+  <text x="670" y="250" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" fill="#333">Package manager</text>
+  
+  <!-- Row 4 -->
+  <rect x="50" y="270" width="200" height="50" fill="#d1d8e0" rx="5" ry="5" />
+  <rect x="250" y="270" width="170" height="50" fill="white" rx="5" ry="5" />
+  <rect x="420" y="270" width="170" height="50" fill="white" rx="5" ry="5" />
+  <rect x="590" y="270" width="160" height="50" fill="white" rx="5" ry="5" />
+  
+  <text x="150" y="300" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" fill="#333">LLM Quality</text>
+  <text x="335" y="300" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" fill="#333">High (latest UI models)</text>
+  <text x="505" y="300" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" fill="#333">High (specialized)</text>
+  <text x="670" y="300" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" fill="#333">Varies by API used</text>
+  
+  <!-- Row 5 -->
+  <rect x="50" y="320" width="200" height="50" fill="#d1d8e0" rx="5" ry="5" />
+  <rect x="250" y="320" width="170" height="50" fill="white" rx="5" ry="5" />
+  <rect x="420" y="320" width="170" height="50" fill="white" rx="5" ry="5" />
+  <rect x="590" y="320" width="160" height="50" fill="white" rx="5" ry="5" />
+  
+  <text x="150" y="350" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" fill="#333">Customizability</text>
+  <text x="335" y="350" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" fill="#333">High (simple bash)</text>
+  <text x="505" y="350" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" fill="#333">Limited by IDE</text>
+  <text x="670" y="350" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" fill="#333">Moderate</text>
+  
+  <!-- Row 6 -->
+  <rect x="50" y="370" width="200" height="50" fill="#d1d8e0" rx="5" ry="5" />
+  <rect x="250" y="370" width="170" height="50" fill="white" rx="5" ry="5" />
+  <rect x="420" y="370" width="170" height="50" fill="white" rx="5" ry="5" />
+  <rect x="590" y="370" width="160" height="50" fill="white" rx="5" ry="5" />
+  
+  <text x="150" y="400" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" fill="#333">Unix Philosophy</text>
+  <text x="335" y="400" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" fill="#333">Strong ✓</text>
+  <text x="505" y="400" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" fill="#333">Weak ✗</text>
+  <text x="670" y="400" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" fill="#333">Medium ∼</text>
+</svg>
diff --git a/images/poorcoder-script-details.svg b/images/poorcoder-script-details.svg
@@ -0,0 +1,81 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500">
+  <!-- Background -->
+  <rect width="800" height="500" fill="#f8f9fa" rx="10" ry="10" />
+  
+  <!-- Title -->
+  <text x="400" y="40" font-family="Arial, sans-serif" font-size="24" font-weight="bold" text-anchor="middle" fill="#333">poorcoder Script Details</text>
+  
+  <!-- context script -->
+  <rect x="50" y="80" width="220" height="380" fill="white" rx="10" ry="10" stroke="#ddd" stroke-width="2" />
+  <rect x="50" y="80" width="220" height="40" fill="#4b6584" rx="10" ry="10" />
+  <text x="160" y="107" font-family="Arial, sans-serif" font-size="18" font-weight="bold" text-anchor="middle" fill="white">context</text>
+  
+  <!-- context details -->
+  <text x="70" y="140" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#333">Purpose:</text>
+  <text x="70" y="165" font-family="Arial, sans-serif" font-size="14" fill="#333">Extract code context from your</text>
+  <text x="70" y="185" font-family="Arial, sans-serif" font-size="14" fill="#333">project to send to an LLM.</text>
+  
+  <text x="70" y="215" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#333">Usage:</text>
+  <rect x="70" y="225" width="180" height="50" fill="#f1f2f6" rx="5" ry="5" />
+  <text x="80" y="245" font-family="Courier New, monospace" font-size="12" fill="#333">./context src/*.js</text>
+  <text x="80" y="265" font-family="Courier New, monospace" font-size="12" fill="#333">README.md | pbcopy</text>
+  
+  <text x="70" y="295" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#333">Key Options:</text>
+  <text x="70" y="320" font-family="Arial, sans-serif" font-size="14" fill="#333">• --include="pattern"</text>
+  <text x="70" y="345" font-family="Arial, sans-serif" font-size="14" fill="#333">• --exclude="pattern"</text>
+  <text x="70" y="370" font-family="Arial, sans-serif" font-size="14" fill="#333">• --git (include git info)</text>
+  
+  <text x="70" y="400" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#333">Output:</text>
+  <text x="70" y="425" font-family="Arial, sans-serif" font-size="14" fill="#333">Markdown-formatted code</text>
+  <text x="70" y="445" font-family="Arial, sans-serif" font-size="14" fill="#333">with file paths and syntax</text>
+  
+  <!-- apply-md script -->
+  <rect x="290" y="80" width="220" height="380" fill="white" rx="10" ry="10" stroke="#ddd" stroke-width="2" />
+  <rect x="290" y="80" width="220" height="40" fill="#4b6584" rx="10" ry="10" />
+  <text x="400" y="107" font-family="Arial, sans-serif" font-size="18" font-weight="bold" text-anchor="middle" fill="white">apply-md</text>
+  
+  <!-- apply-md details -->
+  <text x="310" y="140" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#333">Purpose:</text>
+  <text x="310" y="165" font-family="Arial, sans-serif" font-size="14" fill="#333">Apply code changes from</text>
+  <text x="310" y="185" font-family="Arial, sans-serif" font-size="14" fill="#333">LLM's markdown response.</text>
+  
+  <text x="310" y="215" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#333">Usage:</text>
+  <rect x="310" y="225" width="180" height="50" fill="#f1f2f6" rx="5" ry="5" />
+  <text x="320" y="245" font-family="Courier New, monospace" font-size="12" fill="#333">pbpaste | ./apply-md</text>
+  <text x="320" y="265" font-family="Courier New, monospace" font-size="12" fill="#333">--create-missing</text>
+  
+  <text x="310" y="295" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#333">Key Options:</text>
+  <text x="310" y="320" font-family="Arial, sans-serif" font-size="14" fill="#333">• --dry-run</text>
+  <text x="310" y="345" font-family="Arial, sans-serif" font-size="14" fill="#333">• --create-missing</text>
+  <text x="310" y="370" font-family="Arial, sans-serif" font-size="14" fill="#333">• --verbose</text>
+  
+  <text x="310" y="400" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#333">Expected Format:</text>
+  <rect x="310" y="410" width="180" height="40" fill="#f1f2f6" rx="5" ry="5" />
+  <text x="320" y="430" font-family="Courier New, monospace" font-size="10" fill="#333">```js filename.js</text>
+  <text x="320" y="445" font-family="Courier New, monospace" font-size="10" fill="#333">// code here</text>
+  <text x="320" y="460" font-family="Courier New, monospace" font-size="10" fill="#333">```</text>
+  
+  <!-- git-context script -->
+  <rect x="530" y="80" width="220" height="380" fill="white" rx="10" ry="10" stroke="#ddd" stroke-width="2" />
+  <rect x="530" y="80" width="220" height="40" fill="#4b6584" rx="10" ry="10" />
+  <text x="640" y="107" font-family="Arial, sans-serif" font-size="18" font-weight="bold" text-anchor="middle" fill="white">git-context</text>
+  
+  <!-- git-context details -->
+  <text x="550" y="140" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#333">Purpose:</text>
+  <text x="550" y="165" font-family="Arial, sans-serif" font-size="14" fill="#333">Generate git context for</text>
+  <text x="550" y="185" font-family="Arial, sans-serif" font-size="14" fill="#333">AI-assisted commit messages.</text>
+  
+  <text x="550" y="215" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#333">Usage:</text>
+  <rect x="550" y="225" width="180" height="50" fill="#f1f2f6" rx="5" ry="5" />
+  <text x="560" y="245" font-family="Courier New, monospace" font-size="11" fill="#333">git commit -am "$(./git-</text>
+  <text x="560" y="265" font-family="Courier New, monospace" font-size="11" fill="#333">context | llm)" -e</text>
+  
+  <text x="550" y="295" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#333">Key Options:</text>
+  <text x="550" y="320" font-family="Arial, sans-serif" font-size="14" fill="#333">• --recent-commits=N</text>
+  <text x="550" y="345" font-family="Arial, sans-serif" font-size="14" fill="#333">• --prompt=file.txt</text>
+  <text x="550" y="370" font-family="Arial, sans-serif" font-size="14" fill="#333">• --no-prompt</text>
+  
+  <text x="550" y="400" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#333">Output:</text>
+  <text x="550" y="425" font-family="Arial, sans-serif" font-size="14" fill="#333">Git status, diff, changed files,</text>
+  <text x="550" y="445" font-family="Arial, sans-serif" font-size="14" fill="#333">and commit message guidance.</text>
+</svg>
diff --git a/images/poorcoder-workflow-diagram.svg b/images/poorcoder-workflow-diagram.svg
@@ -0,0 +1,67 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500">
+  <!-- Background -->
+  <rect width="800" height="500" fill="#f8f9fa" rx="10" ry="10" />
+  
+  <!-- Title -->
+  <text x="400" y="40" font-family="Arial, sans-serif" font-size="24" font-weight="bold" text-anchor="middle" fill="#333">poorcoder Workflow</text>
+  
+  <!-- Terminal Box -->
+  <rect x="50" y="80" width="200" height="350" fill="#2f3542" rx="10" ry="10" stroke="#1e272e" stroke-width="2" />
+  <text x="150" y="110" font-family="Arial, sans-serif" font-size="18" font-weight="bold" text-anchor="middle" fill="white">Terminal</text>
+  
+  <!-- Web LLM Box -->
+  <rect x="550" y="80" width="200" height="350" fill="#6a89cc" rx="10" ry="10" stroke="#4a69bd" stroke-width="2" />
+  <text x="650" y="110" font-family="Arial, sans-serif" font-size="18" font-weight="bold" text-anchor="middle" fill="white">Web LLM</text>
+  <text x="650" y="135" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" fill="white">(Claude.ai, Grok, etc.)</text>
+  
+  <!-- Terminal Commands -->
+  <rect x="70" y="150" width="160" height="30" fill="#3c40c6" rx="5" ry="5" />
+  <text x="150" y="170" font-family="Courier New, monospace" font-size="12" text-anchor="middle" fill="white">./context *.js README.md</text>
+  
+  <rect x="70" y="330" width="160" height="30" fill="#3c40c6" rx="5" ry="5" />
+  <text x="150" y="350" font-family="Courier New, monospace" font-size="12" text-anchor="middle" fill="white">pbpaste | ./apply-md</text>
+  
+  <rect x="70" y="380" width="160" height="30" fill="#3c40c6" rx="5" ry="5" />
+  <text x="150" y="400" font-family="Courier New, monospace" font-size="12" text-anchor="middle" fill="white">./git-context | LLM</text>
+  
+  <!-- LLM Interface Elements -->
+  <rect x="570" y="180" width="160" height="120" fill="#f1f2f6" rx="5" ry="5" />
+  <text x="650" y="200" font-family="Arial, sans-serif" font-size="12" text-anchor="middle" fill="#333">Context from codebase</text>
+  <rect x="580" y="210" width="140" height="80" fill="#dfe4ea" rx="3" ry="3" />
+  <text x="650" y="230" font-family="Courier New, monospace" font-size="10" text-anchor="middle" fill="#333">import React from 'react';</text>
+  <text x="650" y="245" font-family="Courier New, monospace" font-size="10" text-anchor="middle" fill="#333">function App() {</text>
+  <text x="650" y="260" font-family="Courier New, monospace" font-size="10" text-anchor="middle" fill="#333">  // Code here</text>
+  <text x="650" y="275" font-family="Courier New, monospace" font-size="10" text-anchor="middle" fill="#333">}</text>
+  
+  <rect x="570" y="320" width="160" height="90" fill="#f1f2f6" rx="5" ry="5" />
+  <text x="650" y="340" font-family="Arial, sans-serif" font-size="12" text-anchor="middle" fill="#333">AI Generated Code</text>
+  <rect x="580" y="350" width="140" height="50" fill="#dfe4ea" rx="3" ry="3" />
+  <text x="650" y="370" font-family="Courier New, monospace" font-size="10" text-anchor="middle" fill="#333">```javascript file.js</text>
+  <text x="650" y="385" font-family="Courier New, monospace" font-size="10" text-anchor="middle" fill="#333">// Fixed code</text>
+  <text x="650" y="400" font-family="Courier New, monospace" font-size="10" text-anchor="middle" fill="#333">```</text>
+  
+  <!-- Workflow Arrows -->
+  <!-- Context to Web LLM -->
+  <path d="M 250 165 L 550 230" stroke="#333" stroke-width="2" fill="none" marker-end="url(#arrowhead)" />
+  <!-- Text label for arrow -->
+  <text x="370" y="160" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" fill="#333" background="white">1. Generate context</text>
+  <text x="370" y="180" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" fill="#333" background="white">and copy to clipboard</text>
+  
+  <!-- Web LLM to Terminal -->
+  <path d="M 550 365 L 250 330" stroke="#333" stroke-width="2" fill="none" marker-end="url(#arrowhead)" />
+  <!-- Text label for arrow -->
+  <text x="420" y="370" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" fill="#333" background="white">2. Paste AI response</text>
+  <text x="420" y="390" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" fill="#333" background="white">and apply changes</text>
+  
+  <!-- Commit Context -->
+  <path d="M 230 395 C 300 450, 500 450, 570 395" stroke="#333" stroke-width="2" fill="none" marker-end="url(#arrowhead)" stroke-dasharray="5,5" />
+  <!-- Text label for arrow -->
+  <text x="400" y="460" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" fill="#333">3. Optional: Generate commit message</text>
+  
+  <!-- Define the arrowhead marker -->
+  <defs>
+    <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+      <polygon points="0 0, 10 3.5, 0 7" fill="#333" />
+    </marker>
+  </defs>
+</svg>
