antri_cli 1.57.20 → 1.57.22

package/dist/desktop/public/app.js

@@ -169,7 +169,7 @@ async function showTab(tabName) {
   const targetPanel = document.getElementById(`tab-${tabName}`);
   if (targetPanel) targetPanel.classList.add('active');
 
-  const navIndex = ['chat', 'dialectic', 'goal', 'profiles', 'skills', 'memory', 'artifacts'].indexOf(tabName);
+  const navIndex = ['chat', 'dialectic', 'goal', 'profiles', 'skills', 'memory', 'artifacts', 'suggestions'].indexOf(tabName);
   const navButtons = document.querySelectorAll('.nav-item');
   if (navButtons[navIndex]) navButtons[navIndex].classList.add('active');
 
@@ -181,6 +181,8 @@ async function showTab(tabName) {
     await loadMemory();
   } else if (tabName === 'artifacts') {
     await loadArtifactsTab();
+  } else if (tabName === 'suggestions') {
+    loadSuggestionsTab();
   }
 }
 
@@ -1660,3 +1662,185 @@ async function submitDesktopLogout() {
     console.error('Logout error:', err);
   }
 }
+
+// Suggestions & Creative Ideation Studio Engine
+const SUGGESTION_PRESETS = [
+  {
+    id: 'sug_1',
+    category: 'portfolio',
+    categoryName: 'Next.js Portfolio',
+    badge: 'Option 1 · Dark Cyberpunk / Aurora',
+    title: 'Aurora Glow Engineering Portfolio',
+    description: 'High-impact personal developer portfolio featuring glowing aurora glassmorphism cards, interactive skills matrix, and smooth navigation.',
+    features: [
+      'Next.js 14 App Router with TypeScript & Tailwind CSS',
+      'Glowing ambient aura gradients and smooth responsive layout',
+      'Featured Projects grid with live demo and GitHub source links',
+      'Interactive Contact Me section with instant feedback'
+    ],
+    prompt: 'Code me a complete Next.js 14 Developer Portfolio with an Aurora Glow Dark Theme, animated project cards, skills section, and contact form.'
+  },
+  {
+    id: 'sug_2',
+    category: 'portfolio',
+    categoryName: 'Next.js Portfolio',
+    badge: 'Option 2 · Bento Grid Minimalist',
+    title: 'Bento-Grid Silicon Valley Portfolio',
+    description: 'Ultra-clean, modern Linear/Apple style bento grid layout showcasing engineering milestones, telemetry metrics, and systems projects.',
+    features: [
+      'Modular Bento Grid architecture (Hero, Stat counters, Project tiles)',
+      'Clean typography stack with Tailwind CSS and Lucide React icons',
+      'Experience timeline with expandable achievement breakdowns',
+      'Instant responsive mobile menu and dark theme styling'
+    ],
+    prompt: 'Code me a complete Next.js Developer Portfolio using a modern Bento-Grid layout, Lucide React icons, experience timeline, and project showcase.'
+  },
+  {
+    id: 'sug_3',
+    category: 'saas',
+    categoryName: 'SaaS Web App',
+    badge: 'Option 3 · Modern SaaS Platform',
+    title: 'AI Analytics & Metric Intelligence Platform',
+    description: 'Full-featured SaaS web application featuring KPI metric counters, real-time activity feeds, data charts, and modular views.',
+    features: [
+      'Next.js 14 with React Server Components & client interactivity',
+      'Sidebar navigation with Overview, Analytics, and Settings',
+      'Live metric KPI stat cards with trend percentage indicators (+18.4%)',
+      'Responsive data table with filtering and pagination'
+    ],
+    prompt: 'Code me a full-stack Next.js SaaS Analytics Dashboard with KPI stat cards, sidebar navigation, activity feed, and responsive data tables.'
+  },
+  {
+    id: 'sug_4',
+    category: 'cli',
+    categoryName: 'CLI Utility',
+    badge: 'Option 4 · Autonomous CLI Tool',
+    title: 'Autonomous Code Review & Git Diff Inspector',
+    description: 'Production-grade Node.js/TypeScript CLI tool that inspects git diffs, analyzes code complexity, and generates audit reports.',
+    features: [
+      'Commander.js CLI argument parsing with colored Chalk output',
+      'Interactive Ora spinners and step-by-step progress logging',
+      'Modular architecture: src/index.ts, src/core/analyzer.ts, src/cli/ui.ts',
+      'Package.json with bin executable definition and build scripts'
+    ],
+    prompt: 'Build a production-grade TypeScript CLI tool for automated Git code review with Commander, Chalk, Ora, and modular architecture.'
+  },
+  {
+    id: 'sug_5',
+    category: 'backend',
+    categoryName: 'Microservices & APIs',
+    badge: 'Option 5 · Distributed Express API',
+    title: 'High-Throughput Authentication & Event Microservice',
+    description: 'Robust Node.js Express REST & SSE API with rate limiting, JWT token rotation, structured error envelopes, and middleware.',
+    features: [
+      'Express.js + TypeScript with clean Controller-Service-Repository pattern',
+      'Token Bucket rate limiting and constant-time cryptographic validation',
+      'Standard JSON response envelopes ({ success: true, data: {...} })',
+      'Health check endpoint and comprehensive error handling middleware'
+    ],
+    prompt: 'Code a modular Express.js TypeScript REST API microservice with JWT auth, rate limiting, and structured response envelopes.'
+  }
+];
+
+let activeSuggestionsFilter = 'all';
+
+function loadSuggestionsTab() {
+  renderSuggestionsGrid();
+}
+
+function filterSuggestions(cat) {
+  activeSuggestionsFilter = cat;
+  document.querySelectorAll('.cat-chip').forEach(el => el.classList.remove('active'));
+  const target = Array.from(document.querySelectorAll('.cat-chip')).find(el => {
+    if (cat === 'all') return el.textContent.includes('All');
+    if (cat === 'portfolio') return el.textContent.includes('Portfolio');
+    if (cat === 'saas') return el.textContent.includes('SaaS');
+    if (cat === 'cli') return el.textContent.includes('CLI');
+    if (cat === 'backend') return el.textContent.includes('Microservices');
+    return false;
+  });
+  if (target) target.classList.add('active');
+  renderSuggestionsGrid();
+}
+
+function renderSuggestionsGrid() {
+  const container = document.getElementById('suggestions-cards-grid');
+  if (!container) return;
+
+  const filtered = activeSuggestionsFilter === 'all'
+    ? SUGGESTION_PRESETS
+    : SUGGESTION_PRESETS.filter(s => s.category === activeSuggestionsFilter);
+
+  container.innerHTML = filtered.map((s, idx) => `
+    <div class="suggestion-card">
+      <div>
+        <div class="suggestion-card-header">
+          <span class="suggestion-badge">${s.badge}</span>
+          <span style="font-size:11px;color:var(--text-tertiary);">${s.categoryName}</span>
+        </div>
+        <h3 class="suggestion-title">${s.title}</h3>
+        <p class="suggestion-desc">${s.description}</p>
+        <div class="suggestion-features">
+          ${s.features.map(f => `<div class="suggestion-feature-item">${f}</div>`).join('')}
+        </div>
+      </div>
+      <div class="suggestion-card-actions">
+        <button class="btn-adopt-idea" onclick="adoptSuggestion(${idx})">🚀 Build This Idea</button>
+        <button class="btn-tweak-idea" onclick="tweakSuggestion(${idx})">✏️ Customize</button>
+      </div>
+    </div>
+  `).join('');
+}
+
+function adoptSuggestion(index) {
+  const filtered = activeSuggestionsFilter === 'all'
+    ? SUGGESTION_PRESETS
+    : SUGGESTION_PRESETS.filter(s => s.category === activeSuggestionsFilter);
+  const sug = filtered[index];
+  if (!sug) return;
+
+  showTab('chat');
+  const chatInput = document.getElementById('chat-input');
+  if (chatInput) {
+    chatInput.value = sug.prompt;
+    chatInput.focus();
+  }
+  showToast(`Loaded "${sug.title}" into Agent Studio.`);
+}
+
+function tweakSuggestion(index) {
+  const filtered = activeSuggestionsFilter === 'all'
+    ? SUGGESTION_PRESETS
+    : SUGGESTION_PRESETS.filter(s => s.category === activeSuggestionsFilter);
+  const sug = filtered[index];
+  if (!sug) return;
+
+  const customInput = document.getElementById('custom-idea-input');
+  if (customInput) {
+    customInput.value = `I want to build "${sug.title}".\nAdjustments / Custom Requirements:\n- `;
+    customInput.focus();
+    customInput.scrollIntoView({ behavior: 'smooth' });
+  }
+}
+
+function generateNewSuggestions() {
+  showToast('Brainstormed fresh creative blueprints!');
+  renderSuggestionsGrid();
+}
+
+function buildFromCustomIdea() {
+  const customInput = document.getElementById('custom-idea-input');
+  const val = (customInput?.value || '').trim();
+  if (!val) {
+    alert('Please enter your custom requirements or ideas first.');
+    return;
+  }
+
+  showTab('chat');
+  const chatInput = document.getElementById('chat-input');
+  if (chatInput) {
+    chatInput.value = val;
+    chatInput.focus();
+  }
+  showToast('Sent custom vision to Agent Studio.');
+}

package/dist/desktop/public/index.html

@@ -15,7 +15,7 @@
   <header class="app-header">
     <div class="brand-zone">
       <span class="logo-mark">ANTRI</span>
-      <span class="version-tag">v1.57.20</span>
+      <span class="version-tag">v1.57.22</span>
     </div>
 
     <!-- Mode Toggle -->
@@ -97,6 +97,9 @@
       <button class="nav-item" onclick="showTab('artifacts')">
         <span class="nav-label">Artifacts Hub</span>
       </button>
+      <button class="nav-item" onclick="showTab('suggestions')">
+        <span class="nav-label">💡 Suggestions & Ideas</span>
+      </button>
 
       <div class="sidebar-footer">
         <div class="sync-status">
@@ -452,6 +455,48 @@
         </div>
       </section>
 
+      <!-- TAB 8: Suggestions & Ideation Studio -->
+      <section id="tab-suggestions" class="tab-panel">
+        <div class="panel-header">
+          <div class="panel-title-group">
+            <h2 class="panel-title">💡 Suggestions & Creative Ideation Studio</h2>
+            <p class="panel-subtitle">Explore 2-3 tailored architectural blueprints, design themes, and feature ideas. Select any idea or provide your own customized requirements!</p>
+          </div>
+          <div style="display:flex;gap:8px;">
+            <button class="action-btn" onclick="generateNewSuggestions()">✨ Brainstorm Ideas</button>
+          </div>
+        </div>
+
+        <div class="suggestions-layout">
+          <!-- Category Chips -->
+          <div class="suggestions-categories">
+            <button class="cat-chip active" onclick="filterSuggestions('all')">🌟 All Ideas</button>
+            <button class="cat-chip" onclick="filterSuggestions('portfolio')">💼 Next.js Portfolio</button>
+            <button class="cat-chip" onclick="filterSuggestions('saas')">⚡ Modern SaaS Web App</button>
+            <button class="cat-chip" onclick="filterSuggestions('cli')">🛠️ CLI Agent & Utilities</button>
+            <button class="cat-chip" onclick="filterSuggestions('backend')">🌐 Microservices & APIs</button>
+          </div>
+
+          <!-- Active Suggestion Cards Grid -->
+          <div id="suggestions-cards-grid" class="suggestions-grid">
+            <!-- Populated dynamically via JS -->
+          </div>
+
+          <!-- Custom Idea Builder Input Card -->
+          <div class="custom-idea-card">
+            <div class="custom-idea-header">
+              <h3>🎨 Custom Architecture & Personal Vision</h3>
+              <span class="badge" style="background:var(--primary-subtle);color:var(--primary);">Adaptive Customizer</span>
+            </div>
+            <p style="font-size:13px;color:var(--text-muted);margin:8px 0 12px 0;">Have your own idea or want to modify one of the suggestions above? Type your thoughts below and the agent will build it with maximum craftsmanship.</p>
+            <textarea id="custom-idea-input" class="custom-idea-textarea" placeholder="e.g., Build Option 1, but add an interactive GitHub commit heatmap, dark obsidian theme with glowing cyan accents, and an interactive project filter tabs..."></textarea>
+            <div class="custom-idea-actions">
+              <button class="action-btn" onclick="buildFromCustomIdea()">🚀 Build Custom Project in Studio</button>
+            </div>
+          </div>
+        </div>
+      </section>
+
     </main>
   </div>
 

package/dist/desktop/public/style.css

@@ -1605,5 +1605,204 @@ body.antri-app {
   width: 92%;
 }
 
+/* Suggestions & Ideation Tab */
+.suggestions-layout {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.suggestions-categories {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.cat-chip {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-main);
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  padding: 6px 14px;
+  font-size: 0.8rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.cat-chip:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+  border-color: var(--accent-primary);
+}
+
+.cat-chip.active {
+  background: var(--accent-primary);
+  color: #ffffff;
+  border-color: var(--accent-primary);
+}
+
+.suggestions-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 1.25rem;
+}
+
+.suggestion-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border-main);
+  border-radius: var(--radius-md);
+  padding: 1.35rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 1rem;
+  transition: all 0.2s ease;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
+}
+
+.suggestion-card:hover {
+  transform: translateY(-3px);
+  border-color: var(--accent-primary);
+  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.08);
+}
+
+.suggestion-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.suggestion-badge {
+  font-size: 0.72rem;
+  font-weight: 700;
+  padding: 3px 8px;
+  border-radius: 999px;
+  background: rgba(99, 102, 241, 0.12);
+  color: #6366f1;
+}
+
+.suggestion-title {
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-top: 0.35rem;
+}
+
+.suggestion-desc {
+  font-size: 0.84rem;
+  color: var(--text-secondary);
+  line-height: 1.5;
+}
+
+.suggestion-features {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  margin: 0.5rem 0;
+}
+
+.suggestion-feature-item {
+  font-size: 0.78rem;
+  color: var(--text-tertiary);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.suggestion-feature-item::before {
+  content: '✓';
+  color: #10b981;
+  font-weight: bold;
+}
+
+.suggestion-card-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.btn-adopt-idea {
+  flex: 1;
+  background: var(--accent-primary);
+  color: #ffffff;
+  border: none;
+  border-radius: var(--radius-sm);
+  padding: 8px 14px;
+  font-size: 0.82rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+
+.btn-adopt-idea:hover {
+  opacity: 0.9;
+}
+
+.btn-tweak-idea {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-main);
+  color: var(--text-secondary);
+  border-radius: var(--radius-sm);
+  padding: 8px 12px;
+  font-size: 0.82rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.btn-tweak-idea:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.custom-idea-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border-main);
+  border-radius: var(--radius-md);
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
+}
+
+.custom-idea-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.custom-idea-header h3 {
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.custom-idea-textarea {
+  width: 100%;
+  min-height: 100px;
+  background: var(--bg-subtle);
+  border: 1px solid var(--border-main);
+  border-radius: var(--radius-sm);
+  padding: 12px 14px;
+  color: var(--text-primary);
+  font-family: inherit;
+  font-size: 0.88rem;
+  line-height: 1.5;
+  resize: vertical;
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.custom-idea-textarea:focus {
+  border-color: var(--accent-primary);
+}
+
+.custom-idea-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 12px;
+}
+
 
 

package/dist/mobile/public/app.js

@@ -236,13 +236,22 @@ async function submitMobilePrompt() {
                 contentEl.textContent = accumulated;
                 scrollMobileChat();
               }
+              if (data.cleanText) {
+                contentEl.textContent = data.cleanText;
+              }
+              if (data.artifacts && data.artifacts.length > 0) {
+                renderMobileArtifactCards(assistantMsgEl, data.artifacts);
+              }
             } catch (e) {}
           }
         }
       }
     } else {
       const data = await res.json();
-      contentEl.textContent = data.response || data.error || 'Response received.';
+      contentEl.textContent = data.cleanText || data.response || data.error || 'Response received.';
+      if (data.artifacts && data.artifacts.length > 0) {
+        renderMobileArtifactCards(assistantMsgEl, data.artifacts);
+      }
     }
 
     // Save interaction to local episodic memory
@@ -256,6 +265,36 @@ async function submitMobilePrompt() {
   }
 }
 
+function renderMobileArtifactCards(msgEl, artifacts) {
+  artifacts.forEach((art) => {
+    const card = document.createElement('div');
+    card.className = 'mobile-artifact-embed';
+    card.style.cssText = 'margin-top:8px;background:var(--bg-card,#18181b);border:1px solid var(--border-color,#27272a);border-radius:8px;padding:8px 12px;display:flex;justify-content:space-between;align-items:center;';
+    card.innerHTML = `
+      <div style="font-size:13px;font-weight:600;color:var(--text-primary,#fff);">🌐 ${art.title}</div>
+      <button style="background:var(--primary,#6366f1);color:#fff;border:none;border-radius:4px;padding:4px 10px;font-size:11px;font-weight:700;cursor:pointer;" onclick="openMobileArtifactViewer('${art.id}', '${art.title}')">View Diagram</button>
+    `;
+    msgEl.appendChild(card);
+  });
+  scrollMobileChat();
+}
+
+function openMobileArtifactViewer(id, title) {
+  const modal = document.getElementById('mobile-artifact-modal');
+  const iframe = document.getElementById('mobile-artifact-iframe');
+  const titleEl = document.getElementById('mobile-modal-artifact-title');
+  if (titleEl) titleEl.textContent = title || 'Architecture Diagram';
+  if (iframe) iframe.src = `/api/artifact-file/${id}`;
+  if (modal) modal.style.display = 'flex';
+}
+
+function closeMobileArtifactViewer() {
+  const modal = document.getElementById('mobile-artifact-modal');
+  const iframe = document.getElementById('mobile-artifact-iframe');
+  if (iframe) iframe.src = '';
+  if (modal) modal.style.display = 'none';
+}
+
 function appendMobileMessage(role, text) {
   const container = document.getElementById('chat-messages');
   const row = document.createElement('div');

package/dist/mobile/public/index.html

@@ -43,6 +43,7 @@
           <h2>ANTRI Mobile</h2>
           <p>Standalone mobile coding intelligence with local thinking profiles, dialectic reasoning, and multimodal image inspection.</p>
           <div class="quick-pills">
+            <button onclick="setPrompt('/arch')">🏗️ /arch Diagram</button>
             <button onclick="setPrompt('Analyze software architecture trade-offs')">Architecture</button>
             <button onclick="setPrompt('/debate What are the limits of LLM context windows?')">Debate</button>
             <button onclick="setPrompt('/goal Build a zero-dependency LRU cache')">Goal Loop</button>
@@ -282,6 +283,19 @@
     </button>
   </nav>
 
+  <!-- Mobile Artifact Viewer Modal -->
+  <div id="mobile-artifact-modal" class="mobile-modal-backdrop" style="display:none;" onclick="if(event.target===this)closeMobileArtifactViewer()">
+    <div class="mobile-modal-box">
+      <div class="mobile-modal-header">
+        <h3 id="mobile-modal-artifact-title" style="margin:0;font-size:15px;color:var(--text-primary);">Artifact Diagram</h3>
+        <button class="mobile-modal-close" onclick="closeMobileArtifactViewer()">✕</button>
+      </div>
+      <div class="mobile-modal-body" style="padding:0;height:70vh;">
+        <iframe id="mobile-artifact-iframe" style="width:100%;height:100%;border:none;border-radius:0 0 12px 12px;background:#ffffff;"></iframe>
+      </div>
+    </div>
+  </div>
+
   <script src="app.js"></script>
 </body>
 </html>

package/dist/mobile/public/style.css

@@ -587,3 +587,45 @@ body.mobile-app {
 .hidden {
   display: none !important;
 }
+
+/* Mobile Modal Viewer */
+.mobile-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 12px;
+}
+
+.mobile-modal-box {
+  background: var(--bg-card, #18181b);
+  border: 1px solid var(--border-main, #27272a);
+  border-radius: 12px;
+  width: 100%;
+  max-width: 480px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+}
+
+.mobile-modal-header {
+  padding: 10px 14px;
+  background: var(--bg-header, #121214);
+  border-bottom: 1px solid var(--border-main, #27272a);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.mobile-modal-close {
+  background: transparent;
+  border: none;
+  color: var(--text-tertiary);
+  font-size: 16px;
+  cursor: pointer;
+}

package/dist/mobile/server.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../../src/mobile/server.ts"],"names":[],"mappings":"AAyCA,qBAAa,YAAY;IACvB,OAAO,CAAC,MAAM,CAA4B;IAC1C,OAAO,CAAC,IAAI,CAAQ;IACpB,OAAO,CAAC,WAAW,CAAa;;IAMnB,KAAK,IAAI,OAAO,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IAoEnD,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;YAUpB,SAAS;WA+GH,YAAY,IAAI,OAAO,CAAC,IAAI,CAAC;CAyBlD"}
+{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../../src/mobile/server.ts"],"names":[],"mappings":"AAyCA,qBAAa,YAAY;IACvB,OAAO,CAAC,MAAM,CAA4B;IAC1C,OAAO,CAAC,IAAI,CAAQ;IACpB,OAAO,CAAC,WAAW,CAAa;;IAMnB,KAAK,IAAI,OAAO,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IAoEnD,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;YAUpB,SAAS;WAkJH,YAAY,IAAI,OAAO,CAAC,IAAI,CAAC;CAyBlD"}

package/dist/mobile/server.js

@@ -141,7 +141,13 @@ export class MobileServer {
                                 arguments: toolCall.function.arguments,
                             });
                         });
-                        sendEvent('complete', { fullText });
+                        const { artifactManager } = await import('../core/artifactManager.js');
+                        const parsed = artifactManager.parseAndStoreArtifacts(fullText, 'mobile_session', 'Mobile Session');
+                        sendEvent('complete', {
+                            fullText,
+                            cleanText: parsed.cleanText,
+                            artifacts: parsed.artifacts,
+                        });
                         res.end();
                     }
                     catch (err) {
@@ -150,6 +156,30 @@ export class MobileServer {
                     }
                     return;
                 }
+                // GET /api/artifacts
+                if (pathname === '/api/artifacts' && req.method === 'GET') {
+                    const { artifactManager } = await import('../core/artifactManager.js');
+                    const artifacts = artifactManager.getAllArtifacts();
+                    res.writeHead(200, { 'Content-Type': 'application/json' });
+                    res.end(JSON.stringify({ artifacts }));
+                    return;
+                }
+                // GET /api/artifact-file/:id
+                if (pathname.startsWith('/api/artifact-file/') && req.method === 'GET') {
+                    const id = pathname.replace('/api/artifact-file/', '').trim();
+                    const { artifactManager } = await import('../core/artifactManager.js');
+                    const art = artifactManager.getArtifact(id);
+                    const htmlContent = art ? artifactManager.getArtifactHtml(art) : null;
+                    if (htmlContent) {
+                        res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+                        res.end(htmlContent);
+                    }
+                    else {
+                        res.writeHead(404, { 'Content-Type': 'text/plain' });
+                        res.end('Artifact Not Found');
+                    }
+                    return;
+                }
                 // POST /api/debate (SSE Streaming)
                 if (pathname === '/api/debate' && req.method === 'POST') {
                     res.writeHead(200, {