feat(branding): show gem icon in app header as default logo

apps/web/src/components/layout/app-layout.tsx

@@ -11,6 +11,34 @@ import { Footer } from "./footer";
 import { Sidebar } from "./sidebar";
 import { ToolPanel } from "./tool-panel";
 
+function GemLogo({ className = "h-6 w-6" }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 140 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <polygon points="70,16 100,48 70,60 40,48" fill="currentColor" opacity="1" />
+      <polygon points="40,48 70,60 70,124 22,60" fill="currentColor" opacity="0.7" />
+      <polygon points="100,48 70,60 70,124 118,60" fill="currentColor" opacity="0.5" />
+      <polygon points="70,16 40,48 22,60" fill="currentColor" opacity="0.85" />
+      <polygon points="70,16 100,48 118,60" fill="currentColor" opacity="0.65" />
+      <polygon
+        points="70,16 118,60 70,124 22,60"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2.5"
+        strokeLinejoin="round"
+      />
+      <line
+        x1="40"
+        y1="48"
+        x2="100"
+        y2="48"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        opacity="0.4"
+      />
+    </svg>
+  );
+}
+
 interface AppLayoutProps {
   children?: React.ReactNode;
   showToolPanel?: boolean;
@@ -57,9 +85,12 @@ export function AppLayout({ children, showToolPanel = true, onFiles }: AppLayout
                   alt="Logo"
                 />
               ) : (
-                <span className="text-sm font-bold text-foreground">
+                <div className="flex items-center gap-2">
-                  Stirling <span className="text-primary">Image</span>
+                  <GemLogo className="h-5 w-5 text-primary" />
-                </span>
+                  <span className="text-sm font-bold text-foreground">
+                    Stirling <span className="text-primary">Image</span>
+                  </span>
+                </div>
               )}
               <button
                 type="button"
@@ -102,9 +133,12 @@ export function AppLayout({ children, showToolPanel = true, onFiles }: AppLayout
               alt="Logo"
             />
           ) : (
-            <span className="text-sm font-bold text-foreground">
+            <div className="flex items-center gap-2">
-              Stirling <span className="text-primary">Image</span>
+              <GemLogo className="h-5 w-5 text-primary" />
-            </span>
+              <span className="text-sm font-bold text-foreground">
+                Stirling <span className="text-primary">Image</span>
+              </span>
+            </div>
           )}
         </div>
       )}