Engage!

26 files changed, 969 insertions, 0 deletions

diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/constants.ts b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/constants.ts
new file mode 100644
index 0000000..c7e827b
--- /dev/null
+++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/constants.ts
@@ -0,0 +1,6 @@
+export const SIDEBAR_COOKIE_NAME = 'sidebar:state';
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+export const SIDEBAR_WIDTH = '18rem';
+export const SIDEBAR_WIDTH_MOBILE = '18rem';
+export const SIDEBAR_WIDTH_ICON = '3rem';
+export const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/context.svelte.ts b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/context.svelte.ts
new file mode 100644
index 0000000..6fa2aa3
--- /dev/null
+++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/context.svelte.ts
@@ -0,0 +1,79 @@
+import { IsMobile } from '$lib/hooks/is-mobile.svelte.js';
+import { getContext, setContext } from 'svelte';
+import { SIDEBAR_KEYBOARD_SHORTCUT } from './constants.js';
+
+type Getter<T> = () => T;
+
+export type SidebarStateProps = {
+        /**
+         * A getter function that returns the current open state of the sidebar.
+         * We use a getter function here to support `bind:open` on the `Sidebar.Provider`
+         * component.
+         */
+        open: Getter<boolean>;
+
+        /**
+         * A function that sets the open state of the sidebar. To support `bind:open`, we need
+         * a source of truth for changing the open state to ensure it will be synced throughout
+         * the sub-components and any `bind:` references.
+         */
+        setOpen: (open: boolean) => void;
+};
+
+class SidebarState {
+        readonly props: SidebarStateProps;
+        open = $derived.by(() => this.props.open());
+        openMobile = $state(false);
+        setOpen: SidebarStateProps['setOpen'];
+        #isMobile: IsMobile;
+        state = $derived.by(() => (this.open ? 'expanded' : 'collapsed'));
+
+        constructor(props: SidebarStateProps) {
+                this.setOpen = props.setOpen;
+                this.#isMobile = new IsMobile();
+                this.props = props;
+        }
+
+        // Convenience getter for checking if the sidebar is mobile
+        // without this, we would need to use `sidebar.isMobile.current` everywhere
+        get isMobile() {
+                return this.#isMobile.current;
+        }
+
+        // Event handler to apply to the `<svelte:window>`
+        handleShortcutKeydown = (e: KeyboardEvent) => {
+                if (e.key === SIDEBAR_KEYBOARD_SHORTCUT && (e.metaKey || e.ctrlKey)) {
+                        e.preventDefault();
+                        this.toggle();
+                }
+        };
+
+        setOpenMobile = (value: boolean) => {
+                this.openMobile = value;
+        };
+
+        toggle = () => {
+                return this.#isMobile.current ? (this.openMobile = !this.openMobile) : this.setOpen(!this.open);
+        };
+}
+
+const SYMBOL_KEY = 'scn-sidebar';
+
+/**
+ * Instantiates a new `SidebarState` instance and sets it in the context.
+ *
+ * @param props The constructor props for the `SidebarState` class.
+ * @returns  The `SidebarState` instance.
+ */
+export function setSidebar(props: SidebarStateProps): SidebarState {
+        return setContext(Symbol.for(SYMBOL_KEY), new SidebarState(props));
+}
+
+/**
+ * Retrieves the `SidebarState` instance from the context. This is a class instance,
+ * so you cannot destructure it.
+ * @returns The `SidebarState` instance.
+ */
+export function useSidebar(): SidebarState {
+        return getContext(Symbol.for(SYMBOL_KEY));
+}
diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/index.ts b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/index.ts
new file mode 100644
index 0000000..280e640
--- /dev/null
+++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/index.ts
@@ -0,0 +1,75 @@
+import { useSidebar } from './context.svelte.js';
+import Content from './sidebar-content.svelte';
+import Footer from './sidebar-footer.svelte';
+import GroupAction from './sidebar-group-action.svelte';
+import GroupContent from './sidebar-group-content.svelte';
+import GroupLabel from './sidebar-group-label.svelte';
+import Group from './sidebar-group.svelte';
+import Header from './sidebar-header.svelte';
+import Input from './sidebar-input.svelte';
+import Inset from './sidebar-inset.svelte';
+import MenuAction from './sidebar-menu-action.svelte';
+import MenuBadge from './sidebar-menu-badge.svelte';
+import MenuButton from './sidebar-menu-button.svelte';
+import MenuItem from './sidebar-menu-item.svelte';
+import MenuSkeleton from './sidebar-menu-skeleton.svelte';
+import MenuSubButton from './sidebar-menu-sub-button.svelte';
+import MenuSubItem from './sidebar-menu-sub-item.svelte';
+import MenuSub from './sidebar-menu-sub.svelte';
+import Menu from './sidebar-menu.svelte';
+import Provider from './sidebar-provider.svelte';
+import Rail from './sidebar-rail.svelte';
+import Separator from './sidebar-separator.svelte';
+import Trigger from './sidebar-trigger.svelte';
+import Root from './sidebar.svelte';
+
+export {
+        Content,
+        Footer,
+        Group,
+        GroupAction,
+        GroupContent,
+        GroupLabel,
+        Header,
+        Input,
+        Inset,
+        Menu,
+        MenuAction,
+        MenuBadge,
+        MenuButton,
+        MenuItem,
+        MenuSkeleton,
+        MenuSub,
+        MenuSubButton,
+        MenuSubItem,
+        Provider,
+        Rail,
+        Root,
+        Separator,
+        //
+        Root as Sidebar,
+        Content as SidebarContent,
+        Footer as SidebarFooter,
+        Group as SidebarGroup,
+        GroupAction as SidebarGroupAction,
+        GroupContent as SidebarGroupContent,
+        GroupLabel as SidebarGroupLabel,
+        Header as SidebarHeader,
+        Input as SidebarInput,
+        Inset as SidebarInset,
+        Menu as SidebarMenu,
+        MenuAction as SidebarMenuAction,
+        MenuBadge as SidebarMenuBadge,
+        MenuButton as SidebarMenuButton,
+        MenuItem as SidebarMenuItem,
+        MenuSkeleton as SidebarMenuSkeleton,
+        MenuSub as SidebarMenuSub,
+        MenuSubButton as SidebarMenuSubButton,
+        MenuSubItem as SidebarMenuSubItem,
+        Provider as SidebarProvider,
+        Rail as SidebarRail,
+        Separator as SidebarSeparator,
+        Trigger as SidebarTrigger,
+        Trigger,
+        useSidebar
+};
diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-content.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-content.svelte
new file mode 100644
index 0000000..0e5f75e
--- /dev/null
+++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-content.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+        import type { HTMLAttributes } from 'svelte/elements';
+        import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
+
+        let {
+                ref = $bindable(null),
+                class: className,
+                children,
+                ...restProps
+        }: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+        bind:this={ref}
+        data-slot="sidebar-content"
+        data-sidebar="content"
+        class={cn(
+                'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+                className
+        )}
+        {...restProps}
+>
+        {@render children?.()}
+</div>
diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-footer.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-footer.svelte
new file mode 100644
index 0000000..67be0a4
--- /dev/null
+++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-footer.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+        import type { HTMLAttributes } from 'svelte/elements';
+        import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
+
+        let {
+                ref = $bindable(null),
+                class: className,
+                children,
+                ...restProps
+        }: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+        bind:this={ref}
+        data-slot="sidebar-footer"
+        data-sidebar="footer"
+        class={cn('flex flex-col gap-2 p-2', className)}
+        {...restProps}
+>
+        {@render children?.()}
+</div>
diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-group-action.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-group-action.svelte
new file mode 100644
index 0000000..027a711
--- /dev/null
+++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-group-action.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+        import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
+        import type { Snippet } from 'svelte';
+        import type { HTMLButtonAttributes } from 'svelte/elements';
+
+        let {
+                ref = $bindable(null),
+                class: className,
+                children,
+                child,
+                ...restProps
+        }: WithElementRef<HTMLButtonAttributes> & {
+                child?: Snippet<[{ props: Record<string, unknown> }]>;
+        } = $props();
+
+        const mergedProps = $derived({
+                class: cn(
+                        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground outline-hidden absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+                        // Increases the hit area of the button on mobile.
+                        'after:absolute after:-inset-2 md:after:hidden',
+                        'group-data-[collapsible=icon]:hidden',
+                        className
+                ),
+                'data-slot': 'sidebar-group-action',
+                'data-sidebar': 'group-action',
+                ...restProps
+        });
+</script>
+
+{#if child}
+        {@render child({ props: mergedProps })}
+{:else}
+        <button bind:this={ref} {...mergedProps}>
+                {@render children?.()}
+        </button>
+{/if}
diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-group-content.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-group-content.svelte
new file mode 100644
index 0000000..9e018fb
--- /dev/null
+++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-group-content.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+        import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
+        import type { HTMLAttributes } from 'svelte/elements';
+
+        let {
+                ref = $bindable(null),
+                class: className,
+                children,
+                ...restProps
+        }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+        bind:this={ref}
+        data-slot="sidebar-group-content"
+        data-sidebar="group-content"
+        class={cn('w-full text-sm', className)}
+        {...restProps}
+>
+        {@render children?.()}
+</div>
diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-group-label.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-group-label.svelte
new file mode 100644
index 0000000..79f47d7
--- /dev/null
+++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-group-label.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+        import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
+        import type { Snippet } from 'svelte';
+        import type { HTMLAttributes } from 'svelte/elements';
+
+        let {
+                ref = $bindable(null),
+                children,
+                child,
+                class: className,
+                ...restProps
+        }: WithElementRef<HTMLAttributes<HTMLElement>> & {
+                child?: Snippet<[{ props: Record<string, unknown> }]>;
+        } = $props();
+
+        const mergedProps = $derived({
+                class: cn(
+                        'text-sidebar-foreground/70 ring-sidebar-ring outline-hidden flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+                        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+                        className
+                ),
+                'data-slot': 'sidebar-group-label',
+                'data-sidebar': 'group-label',
+                ...restProps
+        });
+</script>
+
+{#if child}
+        {@render child({ props: mergedProps })}
+{:else}
+        <div bind:this={ref} {...mergedProps}>
+                {@render children?.()}
+        </div>
+{/if}
diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-group.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-group.svelte
new file mode 100644
index 0000000..eed5ace
--- /dev/null
+++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-group.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+        import type { HTMLAttributes } from 'svelte/elements';
+        import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
+
+        let {
+                ref = $bindable(null),
+                class: className,
+                children,
+                ...restProps
+        }: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+        bind:this={ref}
+        data-slot="sidebar-group"
+        data-sidebar="group"
+        class={cn('relative flex w-full min-w-0 flex-col p-2', className)}
+        {...restProps}
+>
+        {@render children?.()}
+</div>
diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-header.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-header.svelte
new file mode 100644
index 0000000..0651550
--- /dev/null
+++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-header.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+        import type { HTMLAttributes } from 'svelte/elements';
+        import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
+
+        let {
+                ref = $bindable(null),
+                class: className,
+                children,
+                ...restProps
+        }: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+        bind:this={ref}
+        data-slot="sidebar-header"
+        data-sidebar="header"
+        class={cn('flex flex-col gap-2 p-2', className)}
+        {...restProps}
+>
+        {@render children?.()}
+</div>
diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-input.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-input.svelte
new file mode 100644
index 0000000..fa57473
--- /dev/null
+++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-input.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+        import type { ComponentProps } from 'svelte';
+        import { Input } from '$lib/components/ui/input/index.js';
+        import { cn } from '$lib/components/ui/utils.js';
+
+        let {
+                ref = $bindable(null),
+                value = $bindable(''),
+                class: className,
+                ...restProps
+        }: ComponentProps<typeof Input> = $props();
+</script>
+
+<Input
+        bind:ref
+        bind:value
+        data-slot="sidebar-input"
+        data-sidebar="input"
+        class={cn('h-8 w-full bg-background shadow-none', className)}
+        {...restProps}
+/>
diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-inset.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-inset.svelte
new file mode 100644
index 0000000..f55d2f4
--- /dev/null
+++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-inset.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+        import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
+        import type { HTMLAttributes } from 'svelte/elements';
+
+        let {
+                ref = $bindable(null),
+                class: className,
+                children,
+                ...restProps
+        }: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<main
+        bind:this={ref}
+        data-slot="sidebar-inset"
+        class={cn(
+                'relative flex w-full flex-1 flex-col',
+                'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
+                className
+        )}
+        {...restProps}
+>
+        {@render children?.()}
+</main>
diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-action.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-action.svelte
new file mode 100644
index 0000000..ded1ffd
--- /dev/null
+++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-action.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+        import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
+        import type { Snippet } from 'svelte';
+        import type { HTMLButtonAttributes } from 'svelte/elements';
+
+        let {
+                ref = $bindable(null),
+                class: className,
+                showOnHover = false,
+                children,
+                child,
+                ...restProps
+        }: WithElementRef<HTMLButtonAttributes> & {
+                child?: Snippet<[{ props: Record<string, unknown> }]>;
+                showOnHover?: boolean;
+        } = $props();
+
+        const mergedProps = $derived({
+                class: cn(
+                        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground outline-hidden absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+                        // Increases the hit area of the button on mobile.
+                        'after:absolute after:-inset-2 md:after:hidden',
+                        'peer-data-[size=sm]/menu-button:top-1',
+                        'peer-data-[size=default]/menu-button:top-1.5',
+                        'peer-data-[size=lg]/menu-button:top-2.5',
+                        'group-data-[collapsible=icon]:hidden',
+                        showOnHover &&
+                                'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
+                        className
+                ),
+                'data-slot': 'sidebar-menu-action',
+                'data-sidebar': 'menu-action',
+                ...restProps
+        });
+</script>
+
+{#if child}
+        {@render child({ props: mergedProps })}
+{:else}
+        <button bind:this={ref} {...mergedProps}>
+                {@render children?.()}
+        </button>
+{/if}
diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-badge.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-badge.svelte
new file mode 100644
index 0000000..f4525a1
--- /dev/null
+++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-badge.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+        import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
+        import type { HTMLAttributes } from 'svelte/elements';
+
+        let {
+                ref = $bindable(null),
+                class: className,
+                children,
+                ...restProps
+        }: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+        bind:this={ref}
+        data-slot="sidebar-menu-badge"
+        data-sidebar="menu-badge"
+        class={cn(
+                'pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none',
+                'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+                'peer-data-[size=sm]/menu-button:top-1',
+                'peer-data-[size=default]/menu-button:top-1.5',
+                'peer-data-[size=lg]/menu-button:top-2.5',
+                'group-data-[collapsible=icon]:hidden',
+                className
+        )}
+        {...restProps}
+>
+        {@render children?.()}
+</div>
diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-button.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-button.svelte
new file mode 100644
index 0000000..2ce0305
--- /dev/null
+++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-button.svelte
@@ -0,0 +1,106 @@
+<script lang="ts" module>
+        import { tv, type VariantProps } from 'tailwind-variants';
+
+        export const sidebarMenuButtonVariants = tv({
+                base: 'peer/menu-button outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground group-has-data-[sidebar=menu-action]/menu-item:pr-8 data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm transition-[width,height,padding] focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+                variants: {
+                        variant: {
+                                default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+                                outline:
+                                        'bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)]'
+                        },
+                        size: {
+                                default: 'h-8 text-sm',
+                                sm: 'h-7 text-xs',
+                                lg: 'group-data-[collapsible=icon]:p-0! h-12 text-sm'
+                        }
+                },
+                defaultVariants: {
+                        variant: 'default',
+                        size: 'default'
+                }
+        });
+
+        export type SidebarMenuButtonVariant = VariantProps<typeof sidebarMenuButtonVariants>['variant'];
+        export type SidebarMenuButtonSize = VariantProps<typeof sidebarMenuButtonVariants>['size'];
+</script>
+
+<script lang="ts">
+        import * as Tooltip from '$lib/components/ui/tooltip/index.js';
+        import {
+                cn,
+                type WithElementRef,
+                type WithoutChildrenOrChild
+        } from '$lib/components/ui/utils.js';
+        import { mergeProps } from 'bits-ui';
+        import type { ComponentProps, Snippet } from 'svelte';
+        import type { HTMLAttributes } from 'svelte/elements';
+        import { useSidebar } from './context.svelte.js';
+
+        let {
+                ref = $bindable(null),
+                class: className,
+                children,
+                child,
+                variant = 'default',
+                size = 'default',
+                isActive = false,
+                tooltipContent,
+                tooltipContentProps,
+                ...restProps
+        }: WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
+                isActive?: boolean;
+                variant?: SidebarMenuButtonVariant;
+                size?: SidebarMenuButtonSize;
+                tooltipContent?: Snippet | string;
+                tooltipContentProps?: WithoutChildrenOrChild<ComponentProps<typeof Tooltip.Content>>;
+                child?: Snippet<[{ props: Record<string, unknown> }]>;
+        } = $props();
+
+        const sidebar = useSidebar();
+
+        const buttonProps = $derived({
+                class: cn(sidebarMenuButtonVariants({ variant, size }), className),
+                'data-slot': 'sidebar-menu-button',
+                'data-sidebar': 'menu-button',
+                'data-size': size,
+                'data-active': isActive,
+                ...restProps
+        });
+</script>
+
+{#snippet Button({ props }: { props?: Record<string, unknown> })}
+        {@const mergedProps = mergeProps(buttonProps, props)}
+        {#if child}
+                {@render child({ props: mergedProps })}
+        {:else}
+                <button bind:this={ref} {...mergedProps}>
+                        {@render children?.()}
+                </button>
+        {/if}
+{/snippet}
+
+{#if !tooltipContent}
+        {@render Button({})}
+{:else}
+        <Tooltip.Root>
+                <Tooltip.Trigger>
+                        {#snippet child({ props })}
+                                {@render Button({ props })}
+                        {/snippet}
+                </Tooltip.Trigger>
+
+                <Tooltip.Content
+                        side="right"
+                        align="center"
+                        hidden={sidebar.state !== 'collapsed' || sidebar.isMobile}
+                        {...tooltipContentProps}
+                >
+                        {#if typeof tooltipContent === 'string'}
+                                {tooltipContent}
+                        {:else if tooltipContent}
+                                {@render tooltipContent()}
+                        {/if}
+                </Tooltip.Content>
+        </Tooltip.Root>
+{/if}
diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-item.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-item.svelte
new file mode 100644
index 0000000..5adbedd
--- /dev/null
+++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-item.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+        import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
+        import type { HTMLAttributes } from 'svelte/elements';
+
+        let {
+                ref = $bindable(null),
+                class: className,
+                children,
+                ...restProps
+        }: WithElementRef<HTMLAttributes<HTMLLIElement>, HTMLLIElement> = $props();
+</script>
+
+<li
+        bind:this={ref}
+        data-slot="sidebar-menu-item"
+        data-sidebar="menu-item"
+        class={cn('group/menu-item relative', className)}
+        {...restProps}
+>
+        {@render children?.()}
+</li>
diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-skeleton.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-skeleton.svelte
new file mode 100644
index 0000000..2b2acd6
--- /dev/null
+++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-skeleton.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+        import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
+        import { Skeleton } from '$lib/components/ui/skeleton/index.js';
+        import type { HTMLAttributes } from 'svelte/elements';
+
+        let {
+                ref = $bindable(null),
+                class: className,
+                showIcon = false,
+                children,
+                ...restProps
+        }: WithElementRef<HTMLAttributes<HTMLElement>> & {
+                showIcon?: boolean;
+        } = $props();
+
+        // Random width between 50% and 90%
+        const width = `${Math.floor(Math.random() * 40) + 50}%`;
+</script>
+
+<div
+        bind:this={ref}
+        data-slot="sidebar-menu-skeleton"
+        data-sidebar="menu-skeleton"
+        class={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
+        {...restProps}
+>
+        {#if showIcon}
+                <Skeleton class="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />
+        {/if}
+        <Skeleton
+                class="h-4 max-w-(--skeleton-width) flex-1"
+                data-sidebar="menu-skeleton-text"
+                style="--skeleton-width: {width};"
+        />
+        {@render children?.()}
+</div>
diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-sub-button.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-sub-button.svelte
new file mode 100644
index 0000000..dabfe0f
--- /dev/null
+++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-sub-button.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+        import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
+        import type { Snippet } from 'svelte';
+        import type { HTMLAnchorAttributes } from 'svelte/elements';
+
+        let {
+                ref = $bindable(null),
+                children,
+                child,
+                class: className,
+                size = 'md',
+                isActive = false,
+                ...restProps
+        }: WithElementRef<HTMLAnchorAttributes> & {
+                child?: Snippet<[{ props: Record<string, unknown> }]>;
+                size?: 'sm' | 'md';
+                isActive?: boolean;
+        } = $props();
+
+        const mergedProps = $derived({
+                class: cn(
+                        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground outline-hidden flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+                        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+                        size === 'sm' && 'text-xs',
+                        size === 'md' && 'text-sm',
+                        'group-data-[collapsible=icon]:hidden',
+                        className
+                ),
+                'data-slot': 'sidebar-menu-sub-button',
+                'data-sidebar': 'menu-sub-button',
+                'data-size': size,
+                'data-active': isActive,
+                ...restProps
+        });
+</script>
+
+{#if child}
+        {@render child({ props: mergedProps })}
+{:else}
+        <a bind:this={ref} {...mergedProps}>
+                {@render children?.()}
+        </a>
+{/if}
diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-sub-item.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-sub-item.svelte
new file mode 100644
index 0000000..cca870e
--- /dev/null
+++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-sub-item.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+        import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
+        import type { HTMLAttributes } from 'svelte/elements';
+
+        let {
+                ref = $bindable(null),
+                children,
+                class: className,
+                ...restProps
+        }: WithElementRef<HTMLAttributes<HTMLLIElement>> = $props();
+</script>
+
+<li
+        bind:this={ref}
+        data-slot="sidebar-menu-sub-item"
+        data-sidebar="menu-sub-item"
+        class={cn('group/menu-sub-item relative', className)}
+        {...restProps}
+>
+        {@render children?.()}
+</li>
diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-sub.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-sub.svelte
new file mode 100644
index 0000000..5458ced
--- /dev/null
+++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu-sub.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+        import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
+        import type { HTMLAttributes } from 'svelte/elements';
+
+        let {
+                ref = $bindable(null),
+                class: className,
+                children,
+                ...restProps
+        }: WithElementRef<HTMLAttributes<HTMLUListElement>> = $props();
+</script>
+
+<ul
+        bind:this={ref}
+        data-slot="sidebar-menu-sub"
+        data-sidebar="menu-sub"
+        class={cn(
+                'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',
+                'group-data-[collapsible=icon]:hidden',
+                className
+        )}
+        {...restProps}
+>
+        {@render children?.()}
+</ul>
diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu.svelte
new file mode 100644
index 0000000..fee96ed
--- /dev/null
+++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-menu.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+        import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
+        import type { HTMLAttributes } from 'svelte/elements';
+
+        let {
+                ref = $bindable(null),
+                class: className,
+                children,
+                ...restProps
+        }: WithElementRef<HTMLAttributes<HTMLUListElement>, HTMLUListElement> = $props();
+</script>
+
+<ul
+        bind:this={ref}
+        data-slot="sidebar-menu"
+        data-sidebar="menu"
+        class={cn('flex w-full min-w-0 flex-col gap-1', className)}
+        {...restProps}
+>
+        {@render children?.()}
+</ul>
diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-provider.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-provider.svelte
new file mode 100644
index 0000000..364235a
--- /dev/null
+++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-provider.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+        import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
+        import type { HTMLAttributes } from 'svelte/elements';
+        import {
+                SIDEBAR_COOKIE_MAX_AGE,
+                SIDEBAR_COOKIE_NAME,
+                SIDEBAR_WIDTH,
+                SIDEBAR_WIDTH_ICON
+        } from './constants.js';
+        import { setSidebar } from './context.svelte.js';
+
+        let {
+                ref = $bindable(null),
+                open = $bindable(true),
+                onOpenChange = () => {},
+                class: className,
+                style,
+                children,
+                ...restProps
+        }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+                open?: boolean;
+                onOpenChange?: (open: boolean) => void;
+        } = $props();
+
+        const sidebar = setSidebar({
+                open: () => open,
+                setOpen: (value: boolean) => {
+                        open = value;
+                        onOpenChange(value);
+
+                        // This sets the cookie to keep the sidebar state.
+                        document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+                }
+        });
+</script>
+
+<svelte:window onkeydown={sidebar.handleShortcutKeydown} />
+
+<div
+        data-slot="sidebar-wrapper"
+        style="--sidebar-width: {SIDEBAR_WIDTH}; --sidebar-width-icon: {SIDEBAR_WIDTH_ICON}; {style}"
+        class={cn(
+                'group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar',
+                className
+        )}
+        bind:this={ref}
+        {...restProps}
+>
+        {@render children?.()}
+</div>
diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-rail.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-rail.svelte
new file mode 100644
index 0000000..cde9307
--- /dev/null
+++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-rail.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+        import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
+        import type { HTMLAttributes } from 'svelte/elements';
+        import { useSidebar } from './context.svelte.js';
+
+        let {
+                ref = $bindable(null),
+                class: className,
+                children,
+                ...restProps
+        }: WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> = $props();
+
+        const sidebar = useSidebar();
+</script>
+
+<button
+        bind:this={ref}
+        data-sidebar="rail"
+        data-slot="sidebar-rail"
+        aria-label="Toggle Sidebar"
+        tabIndex={-1}
+        onclick={sidebar.toggle}
+        title="Toggle Sidebar"
+        class={cn(
+                'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-[calc(1/2*100%-1px)] after:w-[2px] hover:after:bg-sidebar-border sm:flex',
+                'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
+                '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+                'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar',
+                '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+                '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+                className
+        )}
+        {...restProps}
+>
+        {@render children?.()}
+</button>
diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-separator.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-separator.svelte
new file mode 100644
index 0000000..8fc2065
--- /dev/null
+++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-separator.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+        import { Separator } from '$lib/components/ui/separator/index.js';
+        import { cn } from '$lib/components/ui/utils.js';
+        import type { ComponentProps } from 'svelte';
+
+        let {
+                ref = $bindable(null),
+                class: className,
+                ...restProps
+        }: ComponentProps<typeof Separator> = $props();
+</script>
+
+<Separator
+        bind:ref
+        data-slot="sidebar-separator"
+        data-sidebar="separator"
+        class={cn('bg-sidebar-border', className)}
+        {...restProps}
+/>
diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-trigger.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-trigger.svelte
new file mode 100644
index 0000000..29d3a9c
--- /dev/null
+++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar-trigger.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+        import { Button } from '$lib/components/ui/button/index.js';
+        import { cn } from '$lib/components/ui/utils.js';
+        import PanelLeftIcon from '@lucide/svelte/icons/panel-left';
+        import type { ComponentProps } from 'svelte';
+        import { useSidebar } from './context.svelte.js';
+
+        let {
+                ref = $bindable(null),
+                class: className,
+                onclick,
+                ...restProps
+        }: ComponentProps<typeof Button> & {
+                onclick?: (e: MouseEvent) => void;
+        } = $props();
+
+        const sidebar = useSidebar();
+</script>
+
+<Button
+        data-sidebar="trigger"
+        data-slot="sidebar-trigger"
+        variant="ghost"
+        size="icon"
+        class={cn('size-7', className)}
+        type="button"
+        onclick={(e) => {
+                onclick?.(e);
+                sidebar.toggle();
+        }}
+        {...restProps}
+>
+        <PanelLeftIcon />
+        <span class="sr-only">Toggle Sidebar</span>
+</Button>
diff --git a/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar.svelte b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar.svelte
new file mode 100644
index 0000000..e2c4a75
--- /dev/null
+++ b/llama.cpp/tools/server/webui/src/lib/components/ui/sidebar/sidebar.svelte
@@ -0,0 +1,101 @@
+<script lang="ts">
+        import * as Sheet from '$lib/components/ui/sheet/index.js';
+        import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
+        import type { HTMLAttributes } from 'svelte/elements';
+        import { SIDEBAR_WIDTH_MOBILE } from './constants.js';
+        import { useSidebar } from './context.svelte.js';
+
+        let {
+                ref = $bindable(null),
+                side = 'left',
+                variant = 'sidebar',
+                collapsible = 'offcanvas',
+                class: className,
+                children,
+                ...restProps
+        }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+                side?: 'left' | 'right';
+                variant?: 'sidebar' | 'floating' | 'inset';
+                collapsible?: 'offcanvas' | 'icon' | 'none';
+        } = $props();
+
+        const sidebar = useSidebar();
+</script>
+
+{#if collapsible === 'none'}
+        <div
+                class={cn(
+                        'flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground',
+                        className
+                )}
+                bind:this={ref}
+                {...restProps}
+        >
+                {@render children?.()}
+        </div>
+{:else if sidebar.isMobile}
+        <Sheet.Root bind:open={() => sidebar.openMobile, (v) => sidebar.setOpenMobile(v)} {...restProps}>
+                <Sheet.Content
+                        data-sidebar="sidebar"
+                        data-slot="sidebar"
+                        data-mobile="true"
+                        class="z-99999 w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground sm:z-99 [&>button]:hidden"
+                        style="--sidebar-width: {SIDEBAR_WIDTH_MOBILE};"
+                        {side}
+                >
+                        <Sheet.Header class="sr-only">
+                                <Sheet.Title>Sidebar</Sheet.Title>
+                                <Sheet.Description>Displays the mobile sidebar.</Sheet.Description>
+                        </Sheet.Header>
+                        <div class="flex h-full w-full flex-col">
+                                {@render children?.()}
+                        </div>
+                </Sheet.Content>
+        </Sheet.Root>
+{:else}
+        <div
+                bind:this={ref}
+                class="group peer hidden text-sidebar-foreground md:block"
+                data-state={sidebar.state}
+                data-collapsible={sidebar.state === 'collapsed' ? collapsible : ''}
+                data-variant={variant}
+                data-side={side}
+                data-slot="sidebar"
+        >
+                <!-- This is what handles the sidebar gap on desktop -->
+                <div
+                        data-slot="sidebar-gap"
+                        class={cn(
+                                'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
+                                'group-data-[collapsible=offcanvas]:w-0',
+                                'group-data-[side=right]:rotate-180',
+                                variant === 'floating' || variant === 'inset'
+                                        ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+                                        : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)'
+                        )}
+                ></div>
+                <div
+                        data-slot="sidebar-container"
+                        class={cn(
+                                'fixed inset-y-0 z-999 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:z-0 md:flex',
+                                side === 'left'
+                                        ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+                                        : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+                                // Adjust the padding for floating and inset variants.
+                                variant === 'floating' || variant === 'inset'
+                                        ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+                                        : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
+                                className
+                        )}
+                        {...restProps}
+                >
+                        <div
+                                data-sidebar="sidebar"
+                                data-slot="sidebar-inner"
+                                class="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm"
+                        >
+                                {@render children?.()}
+                        </div>
+                </div>
+        </div>
+{/if}