clawfire 0.6.14 → 0.6.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clawfire",
-  "version": "0.6.14",
+  "version": "0.6.16",
   "description": "AI-First Firebase app framework — Speak. Build. Deploy.",
   "type": "module",
   "main": "./dist/index.cjs",

package/templates/starter/app/components/nav.html

@@ -7,7 +7,7 @@
       <a href="/" class="px-3 py-1.5 text-sm text-zinc-400 hover:text-zinc-200 border-b-2 border-transparent transition-colors">Home</a>
       <a href="/todos" class="px-3 py-1.5 text-sm text-zinc-400 hover:text-zinc-200 border-b-2 border-transparent transition-colors">Todos</a>
       <a href="/about" class="px-3 py-1.5 text-sm text-zinc-400 hover:text-zinc-200 border-b-2 border-transparent transition-colors">About</a>
-      <a href="http://localhost:3456" target="_blank" class="ml-2 px-3 py-1.5 text-xs bg-zinc-800 text-zinc-400 rounded-md hover:bg-zinc-700 hover:text-zinc-200 transition-colors">API Playground &#8599;</a>
+      <!-- dev-only:start --><a href="http://localhost:3456" target="_blank" class="ml-2 px-3 py-1.5 text-xs bg-zinc-800 text-zinc-400 rounded-md hover:bg-zinc-700 hover:text-zinc-200 transition-colors">API Playground &#8599;</a><!-- dev-only:end -->
       <a href="https://www.npmjs.com/package/clawfire" target="_blank" class="ml-1 px-2 py-1 text-xs text-zinc-500 hover:text-brand-400 transition-colors" title="npm package">npm &#8599;</a>
     </div>
   </div>

package/templates/starter/app/pages/index.html

@@ -13,7 +13,7 @@
   </a>
 </div>
 
-<!-- You're looking at it -->
+<!-- dev-only:start -->
 <div class="bg-brand-500/5 border border-brand-500/20 rounded-xl p-5 mb-8">
   <div class="flex items-start gap-3">
     <span class="text-brand-400 text-xl mt-0.5">&#128161;</span>
@@ -28,6 +28,7 @@
     </div>
   </div>
 </div>
+<!-- dev-only:end -->
 
 <!-- Quick Actions -->
 <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-10">
@@ -128,9 +129,9 @@
     <div class="pl-4">handler: <span class="text-purple-400">async</span> (input) =&gt; { <span class="text-zinc-600">/* ... */</span> },</div>
     <div>});</div>
   </div>
-  <a href="http://localhost:3456" target="_blank" class="inline-flex items-center gap-2 px-4 py-2 bg-brand-500 text-white rounded-lg hover:bg-brand-600 transition-colors font-medium text-sm">
+  <!-- dev-only:start --><a href="http://localhost:3456" target="_blank" class="inline-flex items-center gap-2 px-4 py-2 bg-brand-500 text-white rounded-lg hover:bg-brand-600 transition-colors font-medium text-sm">
     Open Playground &#8599;
-  </a>
+  </a><!-- dev-only:end -->
 </div>
 
 <!-- Firebase Stack -->
@@ -189,5 +190,5 @@
   <span class="text-zinc-700">|</span>
   <a href="https://github.com/nohsangwoo/autofire" target="_blank" class="text-zinc-500 hover:text-brand-400 transition-colors">GitHub &#8599;</a>
   <span class="text-zinc-700">|</span>
-  <a href="http://localhost:3456" target="_blank" class="text-zinc-500 hover:text-brand-400 transition-colors">API Playground &#8599;</a>
+  <!-- dev-only:start --><a href="http://localhost:3456" target="_blank" class="text-zinc-500 hover:text-brand-400 transition-colors">API Playground &#8599;</a><!-- dev-only:end -->
 </div>

package/templates/starter/app/pages/todos/index.html

@@ -52,8 +52,13 @@
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(body),
     });
+    var ct = res.headers.get('content-type') || '';
+    if (!ct.includes('application/json')) {
+      if (res.status === 404) throw new Error('API not available. Cloud Functions may not be deployed yet.');
+      throw new Error('Server returned non-JSON response (status ' + res.status + ')');
+    }
     const json = await res.json();
-    if (!res.ok) throw new Error(json.error || 'Request failed');
+    if (!res.ok) throw new Error(json.error?.message || json.error || 'Request failed');
     return json.data;
   }
 
@@ -63,7 +68,20 @@
       todos = data.todos;
       render();
     } catch (e) {
-      showError('Failed to load todos: ' + e.message);
+      var list = document.getElementById('todo-list');
+      if (list) {
+        var isApiUnavailable = e.message.includes('not available') || e.message.includes('non-JSON');
+        if (isApiUnavailable) {
+          list.innerHTML = '<div class="text-center py-12">'
+            + '<svg class="mx-auto mb-3 text-zinc-600" width="48" height="48" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"/></svg>'
+            + '<p class="text-zinc-400 text-sm font-medium mb-1">API Not Available</p>'
+            + '<p class="text-zinc-600 text-xs">Cloud Functions need to be deployed for the API to work.</p>'
+            + '<p class="text-zinc-600 text-xs mt-1">Run <code class="text-brand-400 bg-zinc-800 px-1.5 py-0.5 rounded">/clawfire-deploy</code> in Claude Code.</p>'
+            + '</div>';
+        } else {
+          showError('Failed to load todos: ' + e.message);
+        }
+      }
     }
   }