feat(web): add JerapahFlow brand assets and apply them in the UI

Organize mark, wordmark, app icon, and YAML file icon under the theme brand folder.

Co-authored-by: Cursor <cursoragent@cursor.com>

packages/web/src/components/Layout.jsx

@@ -15,6 +15,7 @@ import {
   LuUsers,
 } from "react-icons/lu";
 import { useLogout } from "../api/hooks.js";
+import { brandMark } from "../theme/brand.js";
 import { useTheme } from "../theme.jsx";
 
 const links = [
@@ -57,7 +58,10 @@ export function Layout({ user, children }) {
               <LuMenu className="size-5" />
             </label>
           </div>
-          <div className="flex-1 px-2 text-lg font-semibold">scrunner</div>
+          <div className="flex flex-1 items-center gap-2 px-2 text-lg font-semibold">
+            <img src={brandMark} alt="" className="size-8 object-contain" />
+            JerapahFlow
+          </div>
           <div className="flex items-center gap-1">
             <button
               type="button"
@@ -87,7 +91,12 @@ export function Layout({ user, children }) {
       <div className="drawer-side z-20">
         <label htmlFor="nav-drawer" aria-label="Close menu" className="drawer-overlay" />
         <ul className="menu bg-base-200 min-h-full w-64 p-4">
-          <li className="menu-title">scrunner</li>
+          <li className="mb-2">
+            <div className="pointer-events-none flex items-center gap-2">
+              <img src={brandMark} alt="" className="size-8 object-contain" />
+              <span className="text-base font-semibold text-base-content">JerapahFlow</span>
+            </div>
+          </li>
           {navItems.map(({ to, label, icon: Icon, end }) => (
             <li key={to}>
               <NavLink to={to} end={end} onClick={closeDrawer}>

packages/web/src/components/WorkflowFileIcon.jsx

@@ -0,0 +1,12 @@
+import { brandWorkflowFile } from "../theme/brand.js";
+
+export function WorkflowFileIcon({ className = "size-8" }) {
+  return (
+    <img
+      src={brandWorkflowFile}
+      alt=""
+      className={`${className} object-contain`}
+      aria-hidden
+    />
+  );
+}

packages/web/src/pages/AuthPage.jsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import { LuLogIn, LuUserPlus } from "react-icons/lu";
 import { errorMessage } from "../api/client.js";
 import { useLogin, useRegister } from "../api/hooks.js";
+import { brandBanner } from "../theme/brand.js";
 
 export function AuthPage({ needsSetup }) {
   const login = useLogin();
@@ -25,6 +26,11 @@ export function AuthPage({ needsSetup }) {
         <legend className="fieldset-legend text-lg">
           {needsSetup ? "Create admin" : "Sign in"}
         </legend>
+        <img
+          src={brandBanner}
+          alt="JerapahFlow"
+          className="mb-2 w-full rounded-box bg-neutral object-contain"
+        />
         <label className="label" htmlFor="username">
           Username
         </label>

packages/web/src/pages/WorkflowEditPage.jsx

@@ -8,6 +8,7 @@ import {
   useSetWorkflowEnabled,
   useWorkflow,
 } from "../api/hooks.js";
+import { WorkflowFileIcon } from "../components/WorkflowFileIcon.jsx";
 import { WorkflowVisualEditor } from "../components/workflow/WorkflowVisualEditor.jsx";
 import { NEW_WORKFLOW_YAML, parseWorkflowYaml } from "../lib/workflow-doc.js";
 
@@ -33,6 +34,7 @@ function WorkflowEditorLayout({
         <Link to={backTo} className="btn btn-ghost btn-sm btn-square" aria-label="Back">
           <LuArrowLeft className="size-4" />
         </Link>
+        <WorkflowFileIcon className="size-8 shrink-0" />
         <h1 className="truncate text-xl font-semibold">{title}</h1>
         <div className="flex-1" />
         {onToggleEnabled ? (

packages/web/src/pages/WorkflowsPage.jsx

@@ -9,6 +9,7 @@ import {
   useSetWorkflowEnabled,
   useWorkflows,
 } from "../api/hooks.js";
+import { WorkflowFileIcon } from "../components/WorkflowFileIcon.jsx";
 import { formatTime, WorkflowStatusBadge } from "../lib/format.jsx";
 
 export function WorkflowsPage() {
@@ -120,9 +121,10 @@ export function WorkflowsPage() {
                 <tr key={w.key} className="hover">
                   <td>
                     <Link
-                      className="link"
+                      className="link inline-flex items-center gap-2"
                       to={`/workflows/${encodeURIComponent(w.owner)}/${encodeURIComponent(w.file)}/edit`}
                     >
+                      <WorkflowFileIcon className="size-7 shrink-0" />
                       {w.name}
                     </Link>
                     {!w.registered ? (

packages/web/src/theme/brand.js

@@ -0,0 +1,13 @@
+import mark from "./brand/mark.png";
+import wordmark from "./brand/wordmark.png";
+import icon from "./brand/icon.png";
+import fileYaml from "./brand/file-yaml.png";
+
+/** Giraffe mark only. */
+export const brandMark = mark;
+/** Mark + JerapahFlow wordmark. */
+export const brandBanner = wordmark;
+/** App icon (giraffe + JF). */
+export const brandAppIcon = icon;
+/** Workflow YAML file icon. */
+export const brandWorkflowFile = fileYaml;