@porkytheblack/garage-dashboard 0.1.0

package/app/login/page.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { useState, type FormEvent } from "react";
+import { useAuth } from "@/lib/auth";
+import { BrandLockup } from "@/components/brand";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { ErrorState, Spinner } from "@/components/shared";
+
+export default function LoginPage() {
+  const { login } = useAuth();
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  const submit = async (e: FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setBusy(true);
+    try {
+      await login(username, password);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Login failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="app-backdrop grid min-h-screen place-items-center px-5">
+      <div className="w-full max-w-sm animate-slide-up">
+        <div className="mb-8 flex justify-center">
+          <BrandLockup markClassName="size-5" className="text-[17px]" />
+        </div>
+
+        <form onSubmit={submit} className="surface p-6">
+          <h1 className="text-[15px] font-semibold tracking-tight">Sign in</h1>
+          <p className="mt-1 text-[13px] leading-relaxed text-muted-foreground">Use the admin credentials provisioned on the Garage server.</p>
+
+          <div className="mt-6 space-y-4">
+            <div className="space-y-1.5">
+              <Label>Username</Label>
+              <Input value={username} autoFocus onChange={(e) => setUsername(e.target.value)} />
+            </div>
+            <div className="space-y-1.5">
+              <Label>Password</Label>
+              <Input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
+            </div>
+            {error && <ErrorState message={error} />}
+            <Button type="submit" className="w-full" disabled={busy}>
+              {busy ? <Spinner /> : null} Sign in
+            </Button>
+          </div>
+        </form>
+
+        <p className="mt-5 text-center text-[12px] text-faint">Command console for the Glorp agent runtime.</p>
+      </div>
+    </div>
+  );
+}

package/components/app-sidebar.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import {
+  Radar,
+  MessageSquare,
+  FolderGit2,
+  Boxes,
+  Rocket,
+  Cpu,
+  KeyRound,
+  Cloud,
+  LogOut,
+  ChevronsUpDown,
+  type LucideIcon,
+} from "lucide-react";
+import { useAuth } from "@/lib/auth";
+import { BrandLockup } from "@/components/brand";
+import { cn } from "@/lib/utils";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from "@/components/ui/dropdown-menu";
+
+interface NavLink {
+  href: string;
+  label: string;
+  icon: LucideIcon;
+}
+
+/** Operate = the live surfaces; Configure = the tenancy/runtime setup. */
+const OPERATE: NavLink[] = [
+  { href: "/", label: "Fleet", icon: Radar },
+  { href: "/sessions", label: "Sessions", icon: MessageSquare },
+  { href: "/workspaces", label: "Workspaces", icon: FolderGit2 },
+];
+
+const CONFIGURE: NavLink[] = [
+  { href: "/namespaces", label: "Namespaces", icon: Boxes },
+  { href: "/provisioning", label: "Provisioning", icon: Rocket },
+  { href: "/credentials", label: "Models", icon: Cpu },
+  { href: "/storage", label: "Storage", icon: Cloud },
+  { href: "/keys", label: "API Keys", icon: KeyRound },
+];
+
+function NavItem({ link, active }: { link: NavLink; active: boolean }) {
+  const Icon = link.icon;
+  return (
+    <Link
+      href={link.href}
+      className={cn(
+        "group relative flex items-center gap-2.5 rounded-md px-2.5 py-[7px] text-[13.5px] font-medium transition-colors",
+        active ? "bg-sidebar-accent text-foreground shadow-sheen" : "text-muted-foreground hover:bg-sidebar-accent/60 hover:text-foreground",
+      )}
+    >
+      {active && <span className="absolute left-0 top-1/2 h-4 w-0.5 -translate-y-1/2 rounded-full bg-brand shadow-[0_0_8px_hsl(var(--brand)_/_0.7)]" />}
+      <Icon className={cn("size-[17px] shrink-0 transition-colors", active ? "text-brand" : "text-faint group-hover:text-foreground")} />
+      {link.label}
+    </Link>
+  );
+}
+
+function NavGroup({ label, links, isActive }: { label: string; links: NavLink[]; isActive: (h: string) => boolean }) {
+  return (
+    <div className="flex flex-col gap-0.5">
+      <p className="px-2.5 pb-1 pt-1 text-[10.5px] font-semibold uppercase tracking-[0.12em] text-faint">{label}</p>
+      {links.map((l) => (
+        <NavItem key={l.href} link={l} active={isActive(l.href)} />
+      ))}
+    </div>
+  );
+}
+
+export function AppSidebar() {
+  const pathname = usePathname();
+  const { identity, logout } = useAuth();
+  const isActive = (href: string) => (href === "/" ? pathname === "/" : pathname.startsWith(href));
+  const user = identity?.user ?? "admin";
+
+  return (
+    <aside className="sticky top-0 flex h-screen w-[238px] shrink-0 flex-col border-r border-sidebar-border bg-sidebar">
+      <div className="flex h-14 items-center px-4">
+        <BrandLockup />
+      </div>
+
+      <nav className="flex flex-1 flex-col gap-5 overflow-y-auto px-3 py-3">
+        <NavGroup label="Operate" links={OPERATE} isActive={isActive} />
+        <NavGroup label="Configure" links={CONFIGURE} isActive={isActive} />
+      </nav>
+
+      <div className="border-t border-sidebar-border p-2">
+        <DropdownMenu>
+          <DropdownMenuTrigger className="flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-sidebar-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/40">
+            <Avatar className="size-7">
+              <AvatarFallback className="bg-surface-2 text-[11px]">{user.slice(0, 1).toUpperCase()}</AvatarFallback>
+            </Avatar>
+            <div className="min-w-0 flex-1">
+              <div className="truncate text-[13px] font-medium text-foreground">{user}</div>
+              <div className="truncate text-[11px] text-muted-foreground">{identity?.is_admin ? "Administrator" : "Member"}</div>
+            </div>
+            <ChevronsUpDown className="size-4 shrink-0 text-faint" />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" side="top" className="w-[210px]">
+            <DropdownMenuLabel>Signed in as {user}</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onClick={logout} className="text-foreground">
+              <LogOut /> Sign out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </aside>
+  );
+}

package/components/app-topbar.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Boxes } from "lucide-react";
+import { useQuery } from "@/lib/hooks";
+import { getNamespace, setNamespace } from "@/lib/api";
+import { cn } from "@/lib/utils";
+import type { NamespaceDto, SessionDto } from "@/lib/types";
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select";
+import { ThemeToggle } from "@/components/theme-toggle";
+
+const DEFAULT = "__default__";
+
+/** Live count of running sessions across the current namespace. */
+function FleetPulse() {
+  const { data } = useQuery<{ sessions: SessionDto[] }>("/sessions", [], 5000);
+  const running = (data?.sessions ?? []).filter((s) => s.state === "busy" || s.state === "provisioning").length;
+  const live = running > 0;
+  return (
+    <span className={cn("hidden items-center gap-1.5 text-[12px] font-medium sm:inline-flex", live ? "text-success" : "text-muted-foreground")}>
+      <span className="relative grid size-2 place-items-center">
+        {live && <span className="absolute size-2 rounded-full bg-success opacity-60 animate-pulse-ring" />}
+        <span className={cn("relative size-2 rounded-full", live ? "bg-success" : "bg-faint")} />
+      </span>
+      {live ? `${running} running` : "all idle"}
+    </span>
+  );
+}
+
+/** Slim top bar: page title + live pulse on the left, namespace scope on the right. */
+export function AppTopbar({ title }: { title: string }) {
+  const { data } = useQuery<{ namespaces: NamespaceDto[] }>("/namespaces");
+  const [ns, setNs] = useState<string>(DEFAULT);
+
+  useEffect(() => {
+    setNs(getNamespace() ?? DEFAULT);
+  }, []);
+
+  const onChange = (value: string) => {
+    setNs(value);
+    setNamespace(value === DEFAULT ? null : value);
+    // Namespace scope affects every fetched list — reload to re-scope cleanly.
+    window.location.reload();
+  };
+
+  const tenants = (data?.namespaces ?? []).filter((n) => !n.is_default);
+
+  return (
+    <header className="sticky top-0 z-20 flex h-14 shrink-0 items-center justify-between gap-4 border-b border-border bg-background/70 px-6 backdrop-blur-xl">
+      <div className="flex items-center gap-3.5">
+        <h1 className="text-[13.5px] font-semibold tracking-tight text-foreground">{title}</h1>
+        <span className="h-3.5 w-px bg-border" />
+        <FleetPulse />
+      </div>
+      <div className="flex items-center gap-2">
+        <span className="hidden whitespace-nowrap text-[10.5px] font-medium uppercase tracking-[0.12em] text-faint md:inline">Namespace</span>
+        <Select value={ns} onValueChange={onChange}>
+          <SelectTrigger className="h-8 w-[168px] whitespace-nowrap text-[13px]">
+            <Boxes className="size-3.5 shrink-0 text-faint" />
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value={DEFAULT}>default</SelectItem>
+            {tenants.map((n) => (
+              <SelectItem key={n.id} value={n.id}>
+                {n.name}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <span className="mx-1 h-3.5 w-px bg-border" />
+        <ThemeToggle />
+      </div>
+    </header>
+  );
+}

package/components/brand.tsx

@@ -0,0 +1,47 @@
+import { cn } from "@/lib/utils";
+
+/**
+ * The Garage mark — a minimal archway (the garage opening / sandbox) with a
+ * roller door and a single "spark" inside: the agent at work within the
+ * sandbox. Drawn in currentColor so it inherits text color; the spark is the
+ * one deliberate touch of brand accent. Reads cleanly from 16px to 64px.
+ */
+export function GarageMark({ className, spark = true }: { className?: string; spark?: boolean }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" className={className} aria-hidden="true">
+      {/* archway: two legs rising to a rounded top */}
+      <path
+        d="M4 21V11a8 8 0 0 1 16 0v10"
+        stroke="currentColor"
+        strokeWidth="1.8"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      {/* threshold / ground line */}
+      <path d="M2.5 21h19" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
+      {/* roller door */}
+      <path
+        d="M8 21v-4.6h8V21"
+        stroke="currentColor"
+        strokeWidth="1.8"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path d="M8 18.5h8" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" opacity="0.45" />
+      {/* the agent, working inside */}
+      <circle cx="12" cy="9.6" r="1.55" fill={spark ? "hsl(var(--brand))" : "currentColor"} />
+    </svg>
+  );
+}
+
+/** Mark + wordmark lockup for the sidebar / login. */
+export function BrandLockup({ className, markClassName }: { className?: string; markClassName?: string }) {
+  return (
+    <span className={cn("inline-flex items-center gap-2.5", className)}>
+      <span className="grid size-8 place-items-center rounded-lg border border-border bg-surface-2 text-foreground shadow-sheen">
+        <GarageMark className={cn("size-[18px]", markClassName)} />
+      </span>
+      <span className="text-[15px] font-semibold tracking-tight">Garage</span>
+    </span>
+  );
+}

package/components/chat/composer.tsx

@@ -0,0 +1,199 @@
+"use client";
+
+import * as React from "react";
+import { CircleStop, ImagePlus, SendHorizontal, X } from "lucide-react";
+import { Spinner } from "@/components/shared";
+import { Button } from "@/components/ui/button";
+import { SlashMenu, type SlashCommand } from "./slash-menu";
+
+/** Message composer: auto-growing textarea, Enter to send, Stop while busy.
+ *  Typing "/" surfaces the agent's commands (hooks + skills) inline. */
+export function Composer({
+  busy,
+  disabled,
+  onSend,
+  onStop,
+  controls,
+  commands = [],
+  imageSupport,
+}: {
+  busy: boolean;
+  disabled?: boolean;
+  onSend: (text: string, images?: Array<{ data: string; media_type: string }>) => void;
+  onStop: () => void;
+  controls?: React.ReactNode;
+  commands?: SlashCommand[];
+  /** false = the current model cannot see images (attach disabled); null/undefined = unknown (allowed). */
+  imageSupport?: boolean | null;
+}) {
+  const [text, setText] = React.useState("");
+  const [caret, setCaret] = React.useState(0);
+  const [slashIdx, setSlashIdx] = React.useState(0);
+  const [slashDismissed, setSlashDismissed] = React.useState(false);
+  const [images, setImages] = React.useState<Array<{ data: string; media_type: string; preview: string }>>([]);
+  const ref = React.useRef<HTMLTextAreaElement>(null);
+  const fileRef = React.useRef<HTMLInputElement>(null);
+
+  const addImageFiles = React.useCallback((files: Iterable<File>) => {
+    for (const file of files) {
+      if (!file.type.startsWith("image/")) continue;
+      const reader = new FileReader();
+      reader.onload = () => {
+        const url = String(reader.result);
+        const data = url.slice(url.indexOf(",") + 1); // strip the data: prefix
+        setImages((prev) => (prev.length >= 6 ? prev : [...prev, { data, media_type: file.type, preview: url }]));
+      };
+      reader.readAsDataURL(file);
+    }
+  }, []);
+
+  // The menu engages while the caret sits in a "/token" — anywhere in the
+  // message, as long as the slash follows start-of-text or whitespace
+  // (mirrors glove's own directive parser).
+  const beforeCaret = text.slice(0, caret);
+  const slashMatch = /(^|\s)\/([a-z0-9_-]*)$/i.exec(beforeCaret);
+  const slashQuery = slashMatch?.[2] ?? null;
+  const tokenStart = slashMatch ? beforeCaret.length - slashMatch[2]!.length - 1 : -1;
+  const slashMatches =
+    slashQuery !== null && !slashDismissed
+      ? commands.filter((c) => c.name.slice(1).toLowerCase().startsWith(slashQuery.toLowerCase())).slice(0, 8)
+      : [];
+  const slashOpen = slashMatches.length > 0;
+
+  const pickSlash = (cmd: SlashCommand) => {
+    const next = `${text.slice(0, tokenStart)}${cmd.name} ${text.slice(caret)}`;
+    const newCaret = tokenStart + cmd.name.length + 1;
+    setText(next);
+    setSlashIdx(0);
+    requestAnimationFrame(() => {
+      const el = ref.current;
+      if (!el) return;
+      el.focus();
+      el.setSelectionRange(newCaret, newCaret);
+      setCaret(newCaret);
+    });
+  };
+
+  const grow = React.useCallback(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${Math.min(el.scrollHeight, 200)}px`;
+  }, []);
+
+  React.useEffect(grow, [text, grow]);
+
+  const submit = () => {
+    if ((!text.trim() && images.length === 0) || disabled) return;
+    onSend(text, images.length ? images.map(({ data, media_type }) => ({ data, media_type })) : undefined);
+    setText("");
+    setImages([]);
+  };
+
+  return (
+    <div className="border-t border-border bg-background px-6 py-3.5 md:px-8">
+      <div className="group relative w-full rounded-xl border border-border bg-card p-2.5 shadow-card transition-shadow focus-within:border-brand/40 focus-within:shadow-glow">
+        {slashOpen && <SlashMenu commands={slashMatches} activeIndex={slashIdx} onPick={pickSlash} />}
+        {images.length > 0 && (
+          <div className="flex flex-wrap gap-2 px-2 pb-1 pt-1.5">
+            {images.map((img, i) => (
+              <span key={i} className="group/img relative overflow-hidden rounded-md border border-border shadow-sheen">
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img src={img.preview} alt="attachment" className="size-14 object-cover" />
+                <button
+                  type="button"
+                  onClick={() => setImages((prev) => prev.filter((_, j) => j !== i))}
+                  className="absolute right-0.5 top-0.5 grid size-4 place-items-center rounded-full bg-background/80 text-muted-foreground opacity-0 transition-opacity hover:text-foreground group-hover/img:opacity-100"
+                  title="Remove image"
+                >
+                  <X className="size-3" />
+                </button>
+              </span>
+            ))}
+          </div>
+        )}
+        <textarea
+          ref={ref}
+          rows={1}
+          value={text}
+          disabled={disabled}
+          placeholder={disabled ? "Session offline…" : "Message Glorp…"}
+          onChange={(e) => {
+            setText(e.target.value);
+            setCaret(e.target.selectionStart ?? e.target.value.length);
+            setSlashDismissed(false);
+            setSlashIdx(0);
+          }}
+          onSelect={(e) => setCaret(e.currentTarget.selectionStart ?? 0)}
+          onPaste={(e) => {
+            const files = [...e.clipboardData.items].filter((it) => it.kind === "file").map((it) => it.getAsFile()).filter((f): f is File => Boolean(f));
+            if (files.length) {
+              e.preventDefault();
+              if (imageSupport === false) return; // text-only model — ignore the paste
+              addImageFiles(files);
+            }
+          }}
+          onKeyDown={(e) => {
+            if (slashOpen) {
+              if (e.key === "ArrowDown") { e.preventDefault(); setSlashIdx((i) => (i + 1) % slashMatches.length); return; }
+              if (e.key === "ArrowUp") { e.preventDefault(); setSlashIdx((i) => (i - 1 + slashMatches.length) % slashMatches.length); return; }
+              if (e.key === "Tab" || e.key === "Enter") { e.preventDefault(); pickSlash(slashMatches[slashIdx] ?? slashMatches[0]!); return; }
+              if (e.key === "Escape") { e.preventDefault(); setSlashDismissed(true); return; }
+            }
+            if (e.key === "Enter" && !e.shiftKey) {
+              e.preventDefault();
+              submit();
+            }
+          }}
+          className="max-h-[200px] min-h-[24px] w-full resize-none bg-transparent px-2.5 py-1.5 text-[13.5px] leading-relaxed text-foreground outline-none placeholder:text-muted-foreground/60 disabled:opacity-60"
+        />
+        <div className="flex items-center justify-between gap-2 border-t border-border/70 pt-2.5">
+          <div className="flex min-w-0 items-center gap-1">
+            {controls}
+            <button
+              type="button"
+              onClick={() => fileRef.current?.click()}
+              disabled={disabled || imageSupport === false}
+              className="grid size-8 shrink-0 place-items-center rounded-md text-faint transition-colors hover:bg-secondary hover:text-foreground disabled:opacity-40"
+              title={imageSupport === false ? "The current model can't see images" : "Attach image (or paste one)"}
+            >
+              <ImagePlus className="size-4" />
+            </button>
+            <input
+              ref={fileRef}
+              type="file"
+              accept="image/*"
+              multiple
+              className="hidden"
+              onChange={(e) => {
+                if (e.target.files) addImageFiles(e.target.files);
+                e.target.value = "";
+              }}
+            />
+          </div>
+          <div className="flex shrink-0 items-center gap-2.5">
+            {busy ? (
+              <>
+                <span className="text-[11.5px] font-medium text-warning">Working…</span>
+                <Button size="sm" variant="secondary" onClick={onStop} title="Stop the agent">
+                  <CircleStop /> Stop
+                </Button>
+              </>
+            ) : (
+              <>
+                <span className="hidden text-[11px] text-faint sm:inline">
+                  <kbd className="rounded border border-border bg-surface-2 px-1 py-0.5 font-mono text-[10px]">↵</kbd> send
+                  <span className="mx-1 text-faint/60">·</span>
+                  <kbd className="rounded border border-border bg-surface-2 px-1 py-0.5 font-mono text-[10px]">⇧↵</kbd> newline
+                </span>
+                <Button size="sm" onClick={submit} disabled={(!text.trim() && images.length === 0) || disabled} title="Send">
+                  {disabled ? <Spinner /> : <SendHorizontal />} Send
+                </Button>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/components/chat/conversation.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import * as React from "react";
+import { ArrowDown, MessageSquare } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { EmptyState } from "@/components/shared";
+import { Button } from "@/components/ui/button";
+import { Message, StreamingMessage } from "./message";
+import { ToolCall } from "./tool-call";
+import type { ChatTurn } from "@/lib/types";
+
+function Thinking() {
+  return (
+    <div className="flex items-center gap-2 pl-10 text-[12px] text-faint">
+      <span className="relative grid size-2 place-items-center">
+        <span className="absolute size-2 rounded-full bg-brand opacity-60 animate-pulse-ring" />
+        <span className="relative size-2 rounded-full bg-brand" />
+      </span>
+      Thinking…
+    </div>
+  );
+}
+
+export function Conversation({
+  items,
+  streaming,
+  busy,
+  userInitial,
+  className,
+}: {
+  items: ChatTurn[];
+  streaming: string;
+  busy: boolean;
+  userInitial?: string;
+  className?: string;
+}) {
+  const scrollRef = React.useRef<HTMLDivElement>(null);
+  const [stuck, setStuck] = React.useState(true);
+
+  const onScroll = () => {
+    const el = scrollRef.current;
+    if (!el) return;
+    setStuck(el.scrollHeight - el.scrollTop - el.clientHeight < 80);
+  };
+
+  React.useEffect(() => {
+    if (!stuck) return;
+    const el = scrollRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [items, streaming, busy, stuck]);
+
+  const jump = () => {
+    const el = scrollRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+    setStuck(true);
+  };
+
+  const empty = items.length === 0 && !streaming;
+
+  return (
+    <div className={cn("relative min-h-0", className)}>
+      <div ref={scrollRef} onScroll={onScroll} className="h-full overflow-y-auto px-6 md:px-8">
+        <div className="flex w-full flex-col gap-6 py-7">
+          {empty ? (
+            <div className="pt-10">
+              <EmptyState icon={MessageSquare} title="Start the conversation" description="Send a message to put the agent to work in this session." />
+            </div>
+          ) : (
+            items.map((t) =>
+              t.kind === "tool" && t.tool ? <ToolCall key={t.id} tool={t.tool} /> : <Message key={t.id} turn={t} userInitial={userInitial} />,
+            )
+          )}
+          {streaming && <StreamingMessage text={streaming} />}
+          {busy && !streaming && !empty && <Thinking />}
+        </div>
+      </div>
+      {!stuck && (
+        <div className="pointer-events-none absolute inset-x-0 bottom-3 flex justify-center">
+          <Button size="sm" variant="secondary" onClick={jump} className="pointer-events-auto shadow-elevated">
+            <ArrowDown /> Jump to latest
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}