Adds a layout for the app route group

web-app/.prettierignore

@@ -6,4 +6,6 @@
 src/lib/api/generated/**
 
 # Ignore UI components
-src/components/ui/**
+src/components/ui/**
+
+tailwind.config.ts

web-app/package.json

@@ -27,7 +27,9 @@
     "@radix-ui/react-dropdown-menu": "^2.1.6",
     "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-scroll-area": "^1.2.3",
+    "@radix-ui/react-separator": "^1.1.2",
     "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.1.8",
     "@react-email/components": "^0.0.33",
     "better-auth": "^1.2.0",
     "better-auth-harmony": "^1.2.3",

web-app/src/app/(app)/components/app-header.tsx

@@ -1,13 +1,14 @@
-import { UserAvatar } from "@/components/user-avatar";
+import { MobileLeftPanel } from "./left-panel";
+import MainNav from "./main-nav";
+import MobileNav from "./mobile-nav";
+import UserAvatar from "./user-avatar";
 
-import { MainNav } from "./main-nav";
-import { MobileNav } from "./mobile-nav";
-
-export function AppHeader() {
+export default function AppHeader() {
   return (
-    <header className="border-grid sticky top-0 z-50 w-full border-b bg-background/95 px-4 py-3">
+    <header className="border-grid sticky top-0 z-50 flex h-[64px] w-full items-center border-b bg-background/95 px-4 py-3">
       <div className="flex w-full items-center">
         <MainNav />
+        <MobileLeftPanel />
         <MobileNav />
         <UserAvatar />
       </div>

web-app/src/app/(app)/components/left-panel/components/agent-add-button.tsx

@@ -0,0 +1,26 @@
+import { Plus } from "lucide-react";
+
+import { SokosumiIcon } from "@/components/masumi-icons";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface AgentAddButtonProps {
+  className?: string;
+}
+
+export default function AgentAddButton({ className }: AgentAddButtonProps) {
+  return (
+    <div className={cn("flex items-center gap-2 bg-muted p-3", className)}>
+      <SokosumiIcon />
+      <div className="flex flex-1 flex-col">
+        <h2 className="text-base font-bold text-muted-foreground">
+          Agents Gallery
+        </h2>
+        <p className="text-sm text-muted-foreground">browse agents</p>
+      </div>
+      <Button variant="outline" size="icon">
+        <Plus />
+      </Button>
+    </div>
+  );
+}

web-app/src/app/(app)/components/left-panel/components/agents-list.tsx

@@ -0,0 +1,59 @@
+import { FolderClock, Pin } from "lucide-react";
+
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { cn } from "@/lib/utils";
+
+const pinnedAgents = Array.from(
+  { length: 10 },
+  (_, index) => `Random Agent #${index + 1}`,
+);
+const recentlyUsedAgents = Array.from(
+  { length: 10 },
+  (_, index) => `Random Agent #${index + 1}`,
+);
+
+interface AgentsListProps {
+  className?: string;
+}
+
+export default function AgentsList({ className = "h-full" }: AgentsListProps) {
+  return (
+    <ScrollArea className={cn("w-full bg-muted p-3", className)}>
+      <div className="mt-4 flex items-center gap-2 text-sm font-bold text-muted-foreground">
+        You Pinned Agents
+        <Pin />
+      </div>
+      <div className="mt-4">
+        {pinnedAgents.length > 0 ? (
+          <ul className="flex flex-col gap-3">
+            {pinnedAgents.map((agent) => (
+              <li key={agent} className="text-sm font-medium text-foreground">
+                {agent}
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <div className="text-sm text-gray-400">no pinned agents</div>
+        )}
+      </div>
+
+      <div className="mt-12 flex items-center gap-2 text-sm font-medium text-muted-foreground">
+        Recently Used Agents
+        <FolderClock />
+      </div>
+      <div className="mt-4">
+        {recentlyUsedAgents.length > 0 ? (
+          <ul className="flex flex-col gap-3">
+            {recentlyUsedAgents.map((agent, index) => (
+              <li key={index} className="text-sm font-medium text-foreground">
+                {agent}
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <div className="text-sm text-gray-400">no recently used agents</div>
+        )}
+      </div>
+    </ScrollArea>
+  );
+}

web-app/src/app/(app)/components/left-panel/index.ts

@@ -0,0 +1,2 @@
+export { default as MainLeftPanel } from "./main-left-panel";
+export { default as MobileLeftPanel } from "./mobile-left-panel";

web-app/src/app/(app)/components/left-panel/main-left-panel.tsx

@@ -0,0 +1,11 @@
+import AgentAddButton from "./components/agent-add-button";
+import AgentsList from "./components/agents-list";
+
+export default function MainLeftPanel() {
+  return (
+    <div className="hidden h-full w-64 flex-col md:flex">
+      <AgentsList className="flex-1" />
+      <AgentAddButton />
+    </div>
+  );
+}

web-app/src/app/(app)/components/left-panel/mobile-left-panel.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { PanelLeftClose, PanelLeftOpen } from "lucide-react";
+import * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+
+import AgentAddButton from "./components/agent-add-button";
+import AgentsList from "./components/agents-list";
+
+export default function MobileLeftPanel() {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <div className="flex-1 md:hidden">
+          <Button variant="outline" size="icon">
+            {open ? <PanelLeftClose /> : <PanelLeftOpen />}
+          </Button>
+        </div>
+      </SheetTrigger>
+      <SheetContent className="h-svh w-full max-w-sm" side="left">
+        <SheetHeader>
+          <SheetTitle></SheetTitle>
+          <SheetDescription></SheetDescription>
+        </SheetHeader>
+        <div className="flex h-full flex-col">
+          <AgentsList className="mt-2 bg-background" />
+          <AgentAddButton className="bg-background" />
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}

web-app/src/app/(app)/components/main-nav.tsx

@@ -3,34 +3,30 @@
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 
-import { siteConfig } from "@/configs/site";
+import { SokosumiLogo } from "@/components/masumi-logos";
 import { cn } from "@/lib/utils";
 
-const navLinks = [
+const navItems = [
   { href: "/dashboard", label: "Home" },
   { href: "/jobs", label: "Jobs" },
   { href: "/billing", label: "Billing" },
   { href: "/settings", label: "Settings" },
 ];
 
-export function MainNav() {
+export default function MainNav() {
   const pathname = usePathname();
 
   return (
     <div className="mr-4 hidden w-full md:flex">
-      <Link href="/" className="mr-4 flex items-center gap-2 md:mr-6">
-        <span className="hidden font-bold md:inline-block">
-          {siteConfig.name}
-        </span>
-      </Link>
+      <SokosumiLogo />
       <nav className="flex flex-1 items-center justify-end gap-4 text-sm xl:gap-6">
-        {navLinks.map((nav) => {
+        {navItems.map((nav) => {
           const isActive = pathname.startsWith(nav.href);
           return (
             <Link
               key={nav.label}
               href={nav.href}
-              className={cn("transition-colors hover:text-foreground/80", {
+              className={cn("text-sm transition hover:text-foreground/80", {
                 "text-foreground underline": isActive,
                 "text-foreground/50": !isActive,
               })}