feat(HAI-089): add logo SVG to header component with tests

- Add logo.svg image element to Header component before the h1 title
- Add header-logo CSS class with sizing and flex-shrink styles
- Update header-left alignment from baseline to center
- Add Header component tests covering logo rendering and position

packages/dashboard/app/components/Header.tsx

@@ -8,6 +8,7 @@ export function Header({ onOpenSettings }: HeaderProps) {
   return (
     <header className="header">
       <div className="header-left">
+        <img src="/logo.svg" alt="hai logo" className="header-logo" width={24} height={24} />
         <h1 className="logo">hai</h1>
         <span className="logo-sub">board</span>
       </div>

packages/dashboard/app/components/__tests__/Header.test.tsx

@@ -0,0 +1,28 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Header } from "../Header";
+
+describe("Header", () => {
+  it("renders a logo image with correct src and alt", () => {
+    render(<Header />);
+    const logo = screen.getByAltText("hai logo");
+    expect(logo).toBeDefined();
+    expect(logo.tagName).toBe("IMG");
+    expect((logo as HTMLImageElement).src).toContain("/logo.svg");
+  });
+
+  it("renders the logo before the h1 element", () => {
+    render(<Header />);
+    const logo = screen.getByAltText("hai logo");
+    const h1 = screen.getByRole("heading", { level: 1 });
+    // Logo should be a preceding sibling of the h1
+    expect(logo.compareDocumentPosition(h1) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  });
+
+  it("renders the settings button", () => {
+    const onOpen = vi.fn();
+    render(<Header onOpenSettings={onOpen} />);
+    const btn = screen.getByTitle("Settings");
+    expect(btn).toBeDefined();
+  });
+});

packages/dashboard/app/styles.css

@@ -40,7 +40,8 @@ html, body {
   background: var(--surface);
 }
 
-.header-left { display: flex; align-items: baseline; gap: 8px; }
+.header-left { display: flex; align-items: center; gap: 8px; }
+.header-logo { width: 24px; height: 24px; flex-shrink: 0; }
 .header-actions { display: flex; align-items: center; gap: 8px; }
 
 .btn-icon {