feat: Redesign layout with project tree sidebar and improved UX

- Replace system prompt sidebar with dedicated project/branch tree
- Move system prompt to conversation area as optional first message
- Create unified top bar with model selector and settings
- Convert right sidebar settings to popover for more conversation space
- Add collapsible sidebar functionality
- Improve overall layout efficiency and user experience

src/lib/components/inference-playground/conversation.svelte

@@ -1,8 +1,15 @@
 <script lang="ts">
 	import { ScrollState } from "$lib/spells/scroll-state.svelte";
 	import { type ConversationClass } from "$lib/state/conversations.svelte";
+	import { projects } from "$lib/state/projects.svelte";
+	import { isSystemPromptSupported } from "$lib/utils/business.svelte.js";
+	import { cn } from "$lib/utils/cn.js";
 	import { watch } from "runed";
 	import { tick } from "svelte";
+	import IconSystem from "~icons/carbon/bot";
+	import IconEdit from "~icons/carbon/edit";
+	import IconCheck from "~icons/carbon/checkmark";
+	import IconClose from "~icons/carbon/close";
 	import CodeSnippets from "./code-snippets.svelte";
 	import Message from "./message.svelte";
 
@@ -10,11 +17,18 @@
 		conversation: ConversationClass;
 		viewCode: boolean;
 		onCloseCode: () => void;
+		showSystemPrompt?: boolean;
 	}
 
-	const { conversation, viewCode, onCloseCode }: Props = $props();
+	const { conversation, viewCode, onCloseCode, showSystemPrompt = false }: Props = $props();
 
 	let messageContainer: HTMLDivElement | null = $state(null);
+	let editingSystemPrompt = $state(false);
+	let systemPromptText = $state(projects.current?.systemMessage ?? "");
+
+	const systemPromptSupported = $derived(isSystemPromptSupported(conversation.model));
+	const hasSystemPrompt = $derived(!!projects.current?.systemMessage?.trim());
+
 	const scrollState = new ScrollState({
 		element: () => messageContainer,
 		offset: { bottom: 100 },
@@ -36,6 +50,13 @@
 		},
 	);
 
+	watch(
+		() => projects.current?.systemMessage,
+		() => {
+			systemPromptText = projects.current?.systemMessage ?? "";
+		},
+	);
+
 	async function regenMessage(idx: number) {
 		// TODO: migrate to new logic
 		const msg = conversation.data.messages?.[idx];
@@ -49,6 +70,17 @@
 		conversation.stopGenerating();
 		conversation.genNextMessage();
 	}
+
+	function saveSystemPrompt() {
+		if (!projects.current) return;
+		projects.update({ ...projects.current, systemMessage: systemPromptText });
+		editingSystemPrompt = false;
+	}
+
+	function cancelSystemPromptEdit() {
+		systemPromptText = projects.current?.systemMessage ?? "";
+		editingSystemPrompt = false;
+	}
 </script>
 
 <div
@@ -57,7 +89,71 @@
 	bind:this={messageContainer}
 >
 	{#if !viewCode}
-		{#if conversation.data.messages}
+		{#if showSystemPrompt && systemPromptSupported}
+			<!-- System prompt as first message -->
+			<div
+				class={cn(
+					"border-b border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-900/50",
+					!hasSystemPrompt && !editingSystemPrompt && "opacity-60",
+				)}
+			>
+				{#if editingSystemPrompt}
+					<div class="px-4 py-3">
+						<div class="mb-2 flex items-center justify-between">
+							<div class="flex items-center gap-2">
+								<IconSystem class="size-5 text-blue-600 dark:text-blue-400" />
+								<span class="text-sm font-semibold text-gray-700 uppercase dark:text-gray-300">System</span>
+							</div>
+							<div class="flex items-center gap-1">
+								<button
+									onclick={saveSystemPrompt}
+									class="rounded p-1 text-green-600 hover:bg-green-100 dark:text-green-400 dark:hover:bg-green-900/30"
+									aria-label="Save"
+								>
+									<IconCheck class="size-4" />
+								</button>
+								<button
+									onclick={cancelSystemPromptEdit}
+									class="rounded p-1 text-gray-500 hover:bg-gray-200 dark:text-gray-400 dark:hover:bg-gray-700"
+									aria-label="Cancel"
+								>
+									<IconClose class="size-4" />
+								</button>
+							</div>
+						</div>
+						<textarea
+							bind:value={systemPromptText}
+							placeholder="Enter a system prompt to define the assistant's behavior..."
+							class="w-full resize-none rounded-lg border border-gray-300 bg-white p-2 text-sm outline-none focus:border-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:focus:border-blue-400"
+							rows="3"
+						></textarea>
+					</div>
+				{:else}
+					<div class="group relative px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-800">
+						<button class="w-full text-left" onclick={() => (editingSystemPrompt = true)}>
+							<div class="flex items-center justify-between">
+								<div class="flex items-center gap-2">
+									<IconSystem class="size-5 text-blue-600 dark:text-blue-400" />
+									<span class="text-sm font-semibold text-gray-700 uppercase dark:text-gray-300">System</span>
+								</div>
+								<div class="rounded p-1 text-gray-400 opacity-0 group-hover:opacity-100">
+									<IconEdit class="size-4" />
+								</div>
+							</div>
+							{#if hasSystemPrompt}
+								<p class="mt-2 text-sm whitespace-pre-wrap text-gray-700 dark:text-gray-300">
+									{projects.current?.systemMessage}
+								</p>
+							{:else}
+								<p class="mt-2 text-sm text-gray-500 italic">Click to add a system prompt...</p>
+							{/if}
+						</button>
+					</div>
+				{/if}
+			</div>
+		{/if}
+
+		{#if conversation.data.messages && conversation.data.messages.length > 0}
 			{#each conversation.data.messages as message, index}
 				<Message
 					{message}
@@ -66,12 +162,12 @@
 					onDelete={() => conversation.deleteMessage(index)}
 					onRegen={() => regenMessage(index)}
 				/>
-			{:else}
-				<div class="m-auto flex flex-col items-center gap-2 text-center px-4 text-balance">
-					<h1 class="text-2xl font-semibold">Welcome to Hugging Face Inference Playground</h1>
-					<p class="text-lg text-gray-500">Try hundreds of models on different providers</p>
-				</div>
 			{/each}
+		{:else}
+			<div class="m-auto flex flex-col items-center gap-2 px-4 text-center text-balance">
+				<h1 class="text-2xl font-semibold">Welcome to Hugging Face Inference Playground</h1>
+				<p class="text-lg text-gray-500">Try hundreds of models on different providers</p>
+			</div>
 		{/if}
 	{:else}
 		<CodeSnippets {conversation} {onCloseCode} />

src/lib/components/inference-playground/model-selector.svelte

@@ -2,6 +2,7 @@
 	import type { ConversationClass } from "$lib/state/conversations.svelte";
 	import { models } from "$lib/state/models.svelte.js";
 	import { isCustomModel, isHFModel, type Model } from "$lib/types.js";
+	import { cn } from "$lib/utils/cn.js";
 	import IconCaret from "~icons/carbon/chevron-down";
 	import Avatar from "../avatar.svelte";
 	import ModelSelectorModal from "./model-selector-modal.svelte";
@@ -9,9 +10,10 @@
 
 	interface Props {
 		conversation: ConversationClass;
+		compact?: boolean;
 	}
 
-	const { conversation }: Props = $props();
+	const { conversation, compact = false }: Props = $props();
 
 	let showModelPickerModal = $state(false);
 
@@ -34,35 +36,56 @@
 	const id = $props.id();
 </script>
 
-<div class="flex flex-col gap-2">
-	<label for={id} class="flex items-baseline gap-2 text-sm font-medium text-gray-900 dark:text-white">
-		Models<span class="text-xs font-normal text-gray-400">{models.all.length}</span>
-	</label>
+{#if compact}
+	<!-- Compact mode for top bar -->
 	<button
 		{id}
-		class="focus-outline relative flex items-center justify-between gap-6 overflow-hidden rounded-lg border bg-gray-100/80 px-3 py-1.5 leading-tight whitespace-nowrap shadow-sm hover:brightness-95 dark:border-gray-700 dark:bg-gray-800 dark:hover:brightness-110"
+		class={cn(
+			"focus-outline relative flex items-center gap-2 overflow-hidden rounded-lg border",
+			"bg-gray-100/80 px-3 py-1.5 text-sm leading-tight whitespace-nowrap shadow-sm",
+			"hover:brightness-95 dark:border-gray-700 dark:bg-gray-800 dark:hover:brightness-110",
+		)}
 		onclick={() => (showModelPickerModal = true)}
 	>
-		<div class="overflow-hidden text-start">
-			<div class="flex items-center gap-1 text-sm text-gray-500 dark:text-gray-300">
-				<Avatar model={conversation.model} orgName={nameSpace} size="sm" />
-				{nameSpace}
-			</div>
-			<div class="truncate">{modelName}</div>
-		</div>
-		<div
-			class="absolute right-2 grid size-4 flex-none place-items-center rounded-sm bg-gray-100 text-xs dark:bg-gray-600"
-		>
-			<IconCaret />
+		<Avatar model={conversation.model} orgName={nameSpace} size="sm" />
+		<div class="overflow-hidden">
+			<span class="text-xs text-gray-500 dark:text-gray-400">{nameSpace}/</span>
+			<span class="truncate font-medium">{modelName}</span>
 		</div>
+		<IconCaret class="size-4 flex-none text-gray-500" />
 	</button>
-</div>
+{:else}
+	<!-- Full mode for settings panel -->
+	<div class="flex flex-col gap-2">
+		<label for={id} class="flex items-baseline gap-2 text-sm font-medium text-gray-900 dark:text-white">
+			Models<span class="text-xs font-normal text-gray-400">{models.all.length}</span>
+		</label>
+		<button
+			{id}
+			class="focus-outline relative flex items-center justify-between gap-6 overflow-hidden rounded-lg border bg-gray-100/80 px-3 py-1.5 leading-tight whitespace-nowrap shadow-sm hover:brightness-95 dark:border-gray-700 dark:bg-gray-800 dark:hover:brightness-110"
+			onclick={() => (showModelPickerModal = true)}
+		>
+			<div class="overflow-hidden text-start">
+				<div class="flex items-center gap-1 text-sm text-gray-500 dark:text-gray-300">
+					<Avatar model={conversation.model} orgName={nameSpace} size="sm" />
+					{nameSpace}
+				</div>
+				<div class="truncate">{modelName}</div>
+			</div>
+			<div
+				class="absolute right-2 grid size-4 flex-none place-items-center rounded-sm bg-gray-100 text-xs dark:bg-gray-600"
+			>
+				<IconCaret />
+			</div>
+		</button>
+	</div>
+{/if}
 
 {#if showModelPickerModal}
 	<ModelSelectorModal {conversation} onModelSelect={changeModel} onClose={() => (showModelPickerModal = false)} />
 {/if}
 
-{#if isHFModel(conversation.model)}
+{#if !compact && isHFModel(conversation.model)}
 	<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
 	<ProviderSelect conversation={conversation as any} />
 {/if}

src/lib/components/inference-playground/playground.svelte

@@ -1,279 +1,264 @@
 <script lang="ts">
-	import { observe, observed, ObservedElements } from "$lib/attachments/observe.svelte.js";
 	import { TEST_IDS } from "$lib/constants.js";
 	import { conversations } from "$lib/state/conversations.svelte";
 	import { projects } from "$lib/state/projects.svelte";
 	import { isHFModel } from "$lib/types.js";
 	import { iterate } from "$lib/utils/array.js";
-	import { isSystemPromptSupported } from "$lib/utils/business.svelte.js";
 	import { atLeastNDecimals } from "$lib/utils/number.js";
+	import { Popover } from "melt/builders";
 	import IconExternal from "~icons/carbon/arrow-up-right";
 	import IconWaterfall from "~icons/carbon/chart-waterfall";
-	import IconClose from "~icons/carbon/close";
 	import IconCode from "~icons/carbon/code";
 	import IconCompare from "~icons/carbon/compare";
 	import IconInfo from "~icons/carbon/information";
 	import IconSettings from "~icons/carbon/settings";
 	import IconShare from "~icons/carbon/share";
+	import IconSidebarCollapse from "~icons/carbon/side-panel-close";
+	import IconSidebarExpand from "~icons/carbon/side-panel-open";
 	import { default as IconDelete } from "~icons/carbon/trash-can";
 	import BillingIndicator from "../billing-indicator.svelte";
 	import { showShareModal } from "../share-modal.svelte";
 	import Toaster from "../toaster.svelte";
 	import Tooltip from "../tooltip.svelte";
 	import BillingModal from "./billing-modal.svelte";
-	import BranchTreeModal from "./branch-tree-modal.svelte";
 	import PlaygroundConversationHeader from "./conversation-header.svelte";
 	import PlaygroundConversation from "./conversation.svelte";
 	import GenerationConfig from "./generation-config.svelte";
 	import MessageTextarea from "./message-textarea.svelte";
 	import ModelSelectorModal from "./model-selector-modal.svelte";
 	import ModelSelector from "./model-selector.svelte";
-	import ProjectSelect from "./project-select.svelte";
+	import ProjectTreeSidebar from "./project-tree-sidebar.svelte";
+	import CheckpointsMenu from "./checkpoints-menu.svelte";
 
 	let viewCode = $state(false);
-	let viewSettings = $state(false);
+	let sidebarCollapsed = $state(false);
 	let billingModalOpen = $state(false);
-
 	let selectCompareModelOpen = $state(false);
+	let settingsPopoverOpen = $state(false);
 
-	const systemPromptSupported = $derived(conversations.active.some(c => isSystemPromptSupported(c.model)));
 	const compareActive = $derived(conversations.active.length === 2);
+
+	// Settings popover
+	const settingsPopover = new Popover({
+		open: () => settingsPopoverOpen,
+		onOpenChange: value => {
+			settingsPopoverOpen = value;
+		},
+	});
 </script>
 
 <div
 	class={[
-		"motion-safe:animate-fade-in grid h-dvh divide-gray-200 overflow-hidden bg-gray-100/50",
-		"max-md:grid-rows-[120px_1fr] max-md:divide-y",
-		"dark:divide-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:[color-scheme:dark]",
-		compareActive
-			? "md:grid-cols-[clamp(220px,20%,350px)_minmax(0,1fr)]"
-			: "md:grid-cols-[clamp(220px,20%,350px)_minmax(0,1fr)_clamp(270px,25%,300px)]",
+		"motion-safe:animate-fade-in flex h-dvh overflow-hidden bg-gray-100/50",
+		"dark:bg-gray-900 dark:text-gray-300 dark:[color-scheme:dark]",
 	]}
 >
-	<!-- First column -->
-	<div class="flex flex-col gap-2 overflow-y-auto py-3 pr-3 max-md:pl-3">
-		<div class="flex items-center gap-2 md:pl-2">
-			<ProjectSelect />
-			<BranchTreeModal />
-		</div>
-		<div
-			class="relative flex flex-1 flex-col gap-6 overflow-y-hidden rounded-r-xl border-x border-y border-gray-200/80 bg-linear-to-b from-white via-white p-3 shadow-xs max-md:rounded-xl dark:border-white/5 dark:from-gray-800/40 dark:via-gray-800/40"
-			class:pointer-events-none={!systemPromptSupported}
-			class:opacity-70={!systemPromptSupported}
-		>
-			<div class="pb-2 text-sm font-semibold uppercase">system</div>
-			<textarea
-				name=""
-				id=""
-				placeholder={systemPromptSupported
-					? "Enter a custom prompt"
-					: "System prompt is not supported with the chosen model."}
-				value={systemPromptSupported ? (projects.current?.systemMessage ?? "") : ""}
-				onchange={e => {
-					if (!projects.current) return;
-					projects.update({ ...projects.current, systemMessage: e.currentTarget.value });
-				}}
-				class="absolute inset-x-0 bottom-0 h-full resize-none bg-transparent px-3 pt-10 text-sm outline-hidden"
-			></textarea>
-		</div>
-	</div>
+	<!-- Project tree sidebar -->
+	<ProjectTreeSidebar collapsed={sidebarCollapsed} />
 
-	<!-- Center column -->
-	<div class="relative flex h-full flex-col overflow-hidden">
-		<Toaster />
-		<div
-			class="flex flex-1 divide-x divide-gray-200 overflow-x-auto overflow-y-hidden *:w-full max-sm:w-dvw md:pt-3 dark:divide-gray-800"
+	<!-- Main content area -->
+	<div class="relative flex flex-1 flex-col overflow-hidden">
+		<!-- Top bar -->
+		<header
+			class="flex h-14 items-center justify-between border-b border-gray-200 bg-white px-4 dark:border-gray-800 dark:bg-gray-900"
 		>
-			{#each conversations.active as conversation, conversationIdx (conversation.data.id)}
-				<div class="flex h-full flex-col overflow-hidden max-sm:min-w-full">
-					{#if compareActive}
-						<PlaygroundConversationHeader
-							{conversationIdx}
-							{conversation}
-							on:close={() => conversations.delete(conversation.data)}
-						/>
-					{/if}
-					<PlaygroundConversation {conversation} {viewCode} onCloseCode={() => (viewCode = false)} />
-				</div>
-			{/each}
-		</div>
-
-		{#if !viewCode}
-			<MessageTextarea />
-		{/if}
-
-		<!-- Bottom bar -->
-		<div
-			class="relative mt-auto flex h-14 shrink-0 items-center justify-center gap-2 overflow-hidden px-3 whitespace-nowrap"
-		>
-			<div class="flex flex-1 justify-start gap-x-2">
-				{#if !compareActive}
-					<button
-						type="button"
-						onclick={() => (viewSettings = !viewSettings)}
-						class="flex h-[28px]! items-center gap-1 rounded-lg border border-gray-200 bg-white px-2 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 focus:outline-hidden md:hidden dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
-					>
-						<IconSettings />
-						{!viewSettings ? "Settings" : "Hide"}
-					</button>
-				{/if}
+			<div class="flex items-center gap-3">
+				<!-- Sidebar toggle -->
 				<Tooltip>
 					{#snippet trigger(tooltip)}
 						<button
-							type="button"
-							onclick={conversations.reset}
-							class="btn size-[28px]! p-0!"
+							onclick={() => (sidebarCollapsed = !sidebarCollapsed)}
+							class="rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+							aria-label={sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar"}
 							{...tooltip.trigger}
-							data-test-id={TEST_IDS.reset}
 						>
-							<IconDelete />
+							{#if sidebarCollapsed}
+								<IconSidebarExpand class="size-5" />
+							{:else}
+								<IconSidebarCollapse class="size-5" />
+							{/if}
 						</button>
 					{/snippet}
-					Clear conversation
+					{sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar"}
 				</Tooltip>
+
+				<!-- Project name and checkpoints -->
+				<div class="flex items-center gap-2">
+					<span class="text-sm font-semibold">{projects.current?.name}</span>
+					<CheckpointsMenu />
+				</div>
 			</div>
-			<div
-				class="pointer-events-none absolute inset-0 flex flex-1 shrink-0 items-center justify-around gap-x-8 text-center text-sm text-gray-500 max-xl:hidden"
-			>
-				{#each iterate(conversations.generationStats) as [{ latency, tokens, cost }, isLast]}
-					{@const baLeft = observed["bottom-actions"].rect.left}
-					{@const tceRight = observed["token-count-end"].offset.right}
-					<span
-						style:translate={isLast ? (baLeft - 12 < tceRight ? baLeft - tceRight - 12 + "px" : "") : undefined}
-						{@attach observe({
-							name: isLast ? ObservedElements.TokenCountEnd : ObservedElements.TokenCountStart,
-							useRaf: true,
-						})}
-					>
-						{tokens} tokens · Latency {latency}ms · Cost ${atLeastNDecimals(cost ?? 0, 1)}
-					</span>
-				{/each}
-			</div>
-			<div class="flex flex-1 justify-end gap-x-2">
-				<button
-					type="button"
-					onclick={() => (viewCode = !viewCode)}
-					class="btn h-[28px]! px-2!"
-					{@attach observe({ name: ObservedElements.BottomActions, useRaf: true })}
-				>
-					<IconCode />
-					{!viewCode ? "View Code" : "Hide Code"}
-				</button>
-			</div>
-		</div>
-	</div>
 
-	<!-- Last column -->
-	{#if !compareActive}
-		<div
-			class={[
-				"z-50 flex h-full flex-col overflow-y-auto p-3 max-md:fixed max-md:inset-0 max-md:backdrop-blur-lg ",
-				!viewSettings && "max-md:hidden",
-			]}
-		>
-			<div
-				class="relative flex flex-1 flex-col gap-6 overflow-y-auto rounded-xl border border-gray-200/80
-				bg-white bg-linear-to-b from-white via-white p-3 shadow-xs
-				dark:border-white/5 dark:bg-gray-900 dark:from-gray-800/40 dark:via-gray-800/40"
-			>
-				<!-- Close button -->
-				<button
-					type="button"
-					class="btn absolute top-1 right-1 flex size-6 items-center justify-center rounded-lg
-					bg-gray-100 p-1 text-gray-500 hover:bg-gray-200 md:hidden dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700"
-					onclick={() => (viewSettings = false)}
-				>
-					<IconClose />
-				</button>
-				<div class="flex flex-col gap-2">
-					<ModelSelector conversation={conversations.active[0]!} />
-					<div class="flex items-center gap-2 self-end px-2 text-xs whitespace-nowrap">
+			<!-- Right side of top bar -->
+			<div class="flex items-center gap-3">
+				<!-- Model selector -->
+				{#if !compareActive && conversations.active[0]}
+					<div class="flex items-center gap-2">
+						<ModelSelector conversation={conversations.active[0]} compact />
 						<button
-							class="flex items-center gap-0.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
+							class="flex items-center gap-1 rounded px-2 py-1 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300"
 							onclick={() => (selectCompareModelOpen = true)}
 						>
-							<IconCompare />
+							<IconCompare class="size-4" />
 							Compare
 						</button>
-						{#if isHFModel(conversations.active[0]?.model)}
-							<a
-								href="https://huggingface.co/{conversations.active[0]?.model.id}?inference_provider={conversations
-									.active[0].data.provider}"
-								target="_blank"
-								class="flex items-center gap-0.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
-							>
-								<IconExternal class="text-2xs" />
-								Model page
-							</a>
-						{/if}
 					</div>
-				</div>
-
-				<GenerationConfig conversation={conversations.active[0]!} />
+				{/if}
 
-				<div class="mt-auto space-y-3">
-					<div class="flex items-center justify-end">
-						<BillingIndicator showModal={() => (billingModalOpen = true)} />
-					</div>
-					<div class="flex flex-wrap items-center justify-end gap-4 whitespace-nowrap">
+				<!-- Settings button with popover -->
+				<Tooltip>
+					{#snippet trigger(tooltip)}
 						<button
-							onclick={() => projects.current && showShareModal(projects.current)}
-							class="flex items-center gap-1 text-sm text-gray-500 underline decoration-gray-300 hover:text-gray-800 dark:text-gray-400 dark:decoration-gray-600 dark:hover:text-gray-200"
+							{...settingsPopover.trigger}
+							class="rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+							aria-label="Settings"
+							{...tooltip.trigger}
 						>
-							<IconShare class="text-xs" />
-							Share
+							<IconSettings class="size-5" />
 						</button>
-						<a
-							class="flex items-center gap-1 text-sm text-gray-500 underline decoration-gray-300 hover:text-gray-800 dark:text-gray-400 dark:decoration-gray-600 dark:hover:text-gray-200"
-							href="https://huggingface.co/inference/models"
-							target="_blank"
-						>
-							<IconWaterfall class="text-xs" />
-							Metrics
-						</a>
+					{/snippet}
+					Settings
+				</Tooltip>
+
+				<!-- Share button -->
+				<button
+					onclick={() => projects.current && showShareModal(projects.current)}
+					class="flex items-center gap-1 rounded px-2 py-1 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+				>
+					<IconShare class="size-4" />
+					Share
+				</button>
+
+				<!-- Billing indicator -->
+				<BillingIndicator showModal={() => (billingModalOpen = true)} />
+			</div>
+		</header>
+
+		<!-- Conversations area -->
+		<div class="relative flex flex-1 flex-col overflow-hidden">
+			<Toaster />
+			<div class="flex flex-1 divide-x divide-gray-200 overflow-x-auto overflow-y-hidden *:w-full dark:divide-gray-800">
+				{#each conversations.active as conversation, conversationIdx (conversation.data.id)}
+					<div class="flex h-full flex-col overflow-hidden">
+						{#if compareActive}
+							<PlaygroundConversationHeader
+								{conversationIdx}
+								{conversation}
+								on:close={() => conversations.delete(conversation.data)}
+							/>
+						{/if}
+						<PlaygroundConversation
+							{conversation}
+							{viewCode}
+							onCloseCode={() => (viewCode = false)}
+							showSystemPrompt={true}
+						/>
 					</div>
+				{/each}
+			</div>
+
+			{#if !viewCode}
+				<MessageTextarea />
+			{/if}
+
+			<!-- Bottom bar -->
+			<div
+				class="relative flex h-12 shrink-0 items-center justify-between border-t border-gray-200 bg-white px-4 dark:border-gray-800 dark:bg-gray-900"
+			>
+				<div class="flex items-center gap-2">
+					<Tooltip>
+						{#snippet trigger(tooltip)}
+							<button
+								type="button"
+								onclick={conversations.reset}
+								class="btn size-[28px]! p-0!"
+								{...tooltip.trigger}
+								data-test-id={TEST_IDS.reset}
+							>
+								<IconDelete />
+							</button>
+						{/snippet}
+						Clear conversation
+					</Tooltip>
 				</div>
 
-				<div class="mt-auto hidden">
-					<div class="mb-3 flex items-center justify-between gap-2">
-						<label for="default-range" class="block text-sm font-medium text-gray-900 dark:text-white">API Quota</label>
-						<span
-							class="rounded-sm bg-gray-100 px-1.5 py-0.5 text-xs font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-300"
-							>Free</span
-						>
+				<!-- Stats in center -->
+				<div
+					class="pointer-events-none absolute inset-x-0 flex items-center justify-center gap-x-8 text-center text-sm text-gray-500 max-lg:hidden"
+				>
+					{#each iterate(conversations.generationStats) as [{ latency, tokens, cost }]}
+						<span>
+							{tokens} tokens · Latency {latency}ms · Cost ${atLeastNDecimals(cost ?? 0, 1)}
+						</span>
+					{/each}
+				</div>
 
-						<div class="ml-auto w-12 text-right text-sm">76%</div>
-					</div>
-					<div class="h-2 w-full rounded-full bg-gray-200 dark:bg-gray-700">
-						<div class="h-2 rounded-full bg-black dark:bg-gray-400" style="width: 75%"></div>
-					</div>
+				<div class="flex items-center gap-2">
+					<button type="button" onclick={() => (viewCode = !viewCode)} class="btn h-[28px]! px-2!">
+						<IconCode />
+						{!viewCode ? "View Code" : "Hide Code"}
+					</button>
 				</div>
 			</div>
 		</div>
-	{/if}
-</div>
 
-<div class="absolute bottom-6 left-4 flex items-center gap-2 max-md:hidden">
-	<a
-		target="_blank"
-		href="https://huggingface.co/docs/inference-providers/tasks/chat-completion"
-		class="flex items-center gap-1 text-sm text-gray-500 underline decoration-gray-300 hover:text-gray-800 dark:text-gray-400 dark:decoration-gray-600 dark:hover:text-gray-200"
-	>
-		<div class="text-xs">
-			<IconInfo />
+		<!-- Footer links -->
+		<div class="absolute bottom-3 left-4 flex items-center gap-2 text-xs">
+			<a
+				target="_blank"
+				href="https://huggingface.co/docs/inference-providers/tasks/chat-completion"
+				class="flex items-center gap-1 text-gray-500 underline decoration-gray-300 hover:text-gray-800 dark:text-gray-400 dark:decoration-gray-600 dark:hover:text-gray-200"
+			>
+				<IconInfo class="size-3" />
+				View Docs
+			</a>
+			<span class="text-gray-500 dark:text-gray-500">·</span>
+			<a
+				target="_blank"
+				href="https://huggingface.co/spaces/huggingface/inference-playground/discussions/1"
+				class="flex items-center gap-1 text-gray-500 underline decoration-gray-300 hover:text-gray-800 dark:text-gray-400 dark:decoration-gray-600 dark:hover:text-gray-200"
+			>
+				Give feedback
+			</a>
+			<span class="text-gray-500 dark:text-gray-500">·</span>
+			<a
+				href="https://huggingface.co/inference/models"
+				target="_blank"
+				class="flex items-center gap-1 text-gray-500 underline decoration-gray-300 hover:text-gray-800 dark:text-gray-400 dark:decoration-gray-600 dark:hover:text-gray-200"
+			>
+				<IconWaterfall class="size-3" />
+				Metrics
+			</a>
 		</div>
-		View Docs
-	</a>
-	<span class="dark:text-gray-500">·</span>
-	<a
-		target="_blank"
-		href="https://huggingface.co/spaces/huggingface/inference-playground/discussions/1"
-		class="flex items-center gap-1 text-sm text-gray-500 underline decoration-gray-300 hover:text-gray-800 dark:text-gray-400 dark:decoration-gray-600 dark:hover:text-gray-200"
-	>
-		Give feedback
-	</a>
+	</div>
+</div>
+
+<!-- Settings popover content -->
+<div
+	{...settingsPopover.content}
+	class="z-50 max-h-[600px] w-80 overflow-y-auto rounded-xl border border-gray-200 bg-white p-4 shadow-lg dark:border-gray-700 dark:bg-gray-800"
+>
+	<h3 class="mb-4 text-sm font-semibold text-gray-700 uppercase dark:text-gray-300">Generation Settings</h3>
+	{#if conversations.active[0]}
+		<GenerationConfig conversation={conversations.active[0]} />
+
+		{#if isHFModel(conversations.active[0]?.model)}
+			<div class="mt-4 border-t border-gray-200 pt-4 dark:border-gray-700">
+				<a
+					href="https://huggingface.co/{conversations.active[0]?.model.id}?inference_provider={conversations.active[0]
+						.data.provider}"
+					target="_blank"
+					class="flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
+				>
+					<IconExternal class="size-3" />
+					View model page
+				</a>
+			</div>
+		{/if}
+	{/if}
 </div>
 
+<!-- Model selection modal -->
 {#if selectCompareModelOpen}
 	<ModelSelectorModal
 		conversation={conversations.active[0]!}
@@ -290,6 +275,7 @@
 	/>
 {/if}
 
+<!-- Billing modal -->
 {#if billingModalOpen}
 	<BillingModal onClose={() => (billingModalOpen = false)} />
 {/if}

src/lib/components/inference-playground/project-tree-sidebar.svelte

@@ -0,0 +1,301 @@
+<script lang="ts">
+	import { conversations } from "$lib/state/conversations.svelte.js";
+	import { projects } from "$lib/state/projects.svelte.js";
+	import { checkpoints } from "$lib/state/checkpoints.svelte.js";
+	import { cn } from "$lib/utils/cn.js";
+	import { Tree, type TreeItem } from "melt/builders";
+	import { watch } from "runed";
+	import { SvelteMap } from "svelte/reactivity";
+	import IconBranch from "~icons/carbon/branch";
+	import IconChevronDown from "~icons/carbon/chevron-down";
+	import IconChevronRight from "~icons/carbon/chevron-right";
+	import IconFolder from "~icons/carbon/folder";
+	import IconFolderOpen from "~icons/carbon/folder-open";
+	import IconPlus from "~icons/carbon/add";
+	import IconEdit from "~icons/carbon/edit";
+	import IconDelete from "~icons/carbon/trash-can";
+	import IconHistory from "~icons/carbon/recently-viewed";
+	import { prompt } from "../prompts.svelte";
+
+	interface ProjectTreeItem extends TreeItem {
+		id: string;
+		value: string;
+		project: NonNullable<typeof projects.current>;
+		children?: ProjectTreeItem[];
+	}
+
+	interface Props {
+		collapsed?: boolean;
+	}
+
+	let { collapsed = false }: Props = $props();
+
+	// Build tree structure from projects
+	const tree_items = $derived.by((): ProjectTreeItem[] => {
+		const all_projects = projects.all;
+		const node_map = new SvelteMap<string, ProjectTreeItem>();
+
+		// Create nodes for all projects
+		all_projects.forEach(project => {
+			node_map.set(project.id, {
+				id: project.id,
+				value: project.id,
+				project,
+				children: [],
+			});
+		});
+
+		// Build tree structure
+		const roots: ProjectTreeItem[] = [];
+
+		all_projects.forEach(project => {
+			const node = node_map.get(project.id)!;
+
+			if (project.branchedFromId) {
+				const parent = node_map.get(project.branchedFromId);
+				if (parent) {
+					parent.children!.push(node);
+				} else {
+					// Parent doesn't exist, make it a root
+					roots.push(node);
+				}
+			} else {
+				// No parent, it's a root
+				roots.push(node);
+			}
+		});
+
+		// Sort nodes alphabetically
+		const sort_nodes = (nodes: ProjectTreeItem[]) => {
+			nodes.sort((a, b) => {
+				// Default project always comes first
+				if (a.project.id === "default") return -1;
+				if (b.project.id === "default") return 1;
+				return a.project.name.localeCompare(b.project.name);
+			});
+			nodes.forEach(node => {
+				if (node.children && node.children.length > 0) {
+					sort_nodes(node.children);
+				}
+			});
+		};
+		sort_nodes(roots);
+
+		return roots;
+	});
+
+	const tree = new Tree({
+		items: () => tree_items,
+		selected: () => projects.activeId,
+		onSelectedChange: value => {
+			if (value) {
+				projects.activeId = value;
+			}
+		},
+		expandOnClick: false,
+	});
+
+	// Auto-expand tree on first load
+	let init_expanded = false;
+	watch(
+		() => tree_items,
+		() => {
+			if (tree_items.length === 0 || init_expanded) return;
+			tree.expandAll();
+			init_expanded = true;
+		},
+	);
+
+	function get_branch_stats(project_id: string) {
+		const convs = conversations.for(project_id);
+		const total_messages = convs.reduce((sum, c) => sum + (c.data.messages?.length || 0), 0);
+		const has_checkpoints = checkpoints.for(project_id).length > 0;
+		return { conversations: convs.length, messages: total_messages, has_checkpoints };
+	}
+
+	async function handle_edit_project(e: MouseEvent, id: string, current_name: string) {
+		e.stopPropagation();
+		const new_name = await prompt("Edit project name", current_name);
+		if (new_name && new_name !== current_name) {
+			const project = projects.all.find(p => p.id === id);
+			if (project) {
+				projects.update({ ...project, name: new_name });
+			}
+		}
+	}
+
+	async function handle_delete_project(e: MouseEvent, id: string) {
+		e.stopPropagation();
+		if (confirm("Are you sure you want to delete this project? This cannot be undone.")) {
+			projects.delete(id);
+		}
+	}
+
+	async function handle_new_project() {
+		const name = await prompt("New project name");
+		if (name) {
+			const id = await projects.create({ name, systemMessage: "" });
+			projects.activeId = id;
+		}
+	}
+</script>
+
+<aside
+	class={cn(
+		"flex h-full flex-col overflow-hidden border-r border-gray-200 bg-gray-50/50 transition-all dark:border-gray-800 dark:bg-gray-900/50",
+		collapsed ? "w-12" : "w-64",
+	)}
+>
+	{#if !collapsed}
+		<div class="flex items-center justify-between border-b border-gray-200 px-4 py-3 dark:border-gray-800">
+			<h2 class="text-sm font-semibold text-gray-700 uppercase dark:text-gray-300">Projects</h2>
+			<button
+				onclick={handle_new_project}
+				class="rounded p-1 text-gray-500 hover:bg-gray-200 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-200"
+				aria-label="New project"
+			>
+				<IconPlus class="size-4" />
+			</button>
+		</div>
+
+		<div class="flex-1 overflow-y-auto p-2" {...tree.root}>
+			{#if tree_items.length === 0}
+				<div class="flex flex-col items-center gap-2 py-8 text-center">
+					<span class="text-sm text-gray-500">No projects yet</span>
+					<button
+						onclick={handle_new_project}
+						class="flex items-center gap-1 rounded-lg bg-blue-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-blue-600"
+					>
+						<IconPlus class="size-3" />
+						Create Project
+					</button>
+				</div>
+			{:else}
+				{@render tree_node(tree.children)}
+			{/if}
+		</div>
+	{:else}
+		<!-- Collapsed state - just show icons -->
+		<div class="flex flex-col items-center gap-1 py-3">
+			{#each tree_items as item}
+				{@const is_active = tree.isSelected(item.id)}
+				{@const is_branch = item.project.branchedFromId !== null}
+				<button
+					onclick={() => tree.toggleSelect(item.id)}
+					class={cn(
+						"grid size-8 place-items-center rounded-md transition-colors",
+						is_active
+							? "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"
+							: "text-gray-600 hover:bg-gray-200 dark:text-gray-400 dark:hover:bg-gray-700",
+					)}
+					title={item.project.name}
+				>
+					{#if is_branch}
+						<IconBranch class="size-4" />
+					{:else}
+						<IconFolder class="size-4" />
+					{/if}
+				</button>
+			{/each}
+		</div>
+	{/if}
+</aside>
+
+{#snippet tree_node(items: typeof tree.children)}
+	{#each items as item (item.id)}
+		{@const project = item.item.project}
+		{@const is_active = tree.isSelected(item.id)}
+		{@const is_expanded = tree.isExpanded(item.id)}
+		{@const stats = get_branch_stats(project.id)}
+		{@const is_branch = project.branchedFromId !== null && project.branchedFromId !== undefined}
+		{@const has_children = item.children && item.children.length > 0}
+		{@const is_default = project.id === "default"}
+
+		<div class="select-none">
+			<div
+				{...item.attrs}
+				class={cn(
+					"group flex w-full items-center rounded-md px-1 py-1.5 text-left transition-colors",
+					is_active
+						? "bg-blue-100 text-blue-900 dark:bg-blue-900/30 dark:text-blue-300"
+						: "text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800",
+				)}
+			>
+				<!-- Expand/collapse button -->
+				{#if has_children}
+					<button
+						onclick={e => {
+							e.stopPropagation();
+							tree.toggleExpand(item.id);
+						}}
+						class="flex-none p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+						aria-label={is_expanded ? "Collapse" : "Expand"}
+					>
+						{#if is_expanded}
+							<IconChevronDown class="size-3" />
+						{:else}
+							<IconChevronRight class="size-3" />
+						{/if}
+					</button>
+				{:else}
+					<div class="size-5 flex-none"></div>
+				{/if}
+
+				<!-- Icon -->
+				<div class="mr-2 flex-none text-base">
+					{#if is_branch}
+						<IconBranch class="size-4 text-blue-600 dark:text-blue-400" />
+					{:else if is_expanded}
+						<IconFolderOpen class="size-4 text-gray-600 dark:text-gray-400" />
+					{:else}
+						<IconFolder class="size-4 text-gray-600 dark:text-gray-400" />
+					{/if}
+				</div>
+
+				<!-- Project name and stats -->
+				<div class="min-w-0 flex-1">
+					<div class="flex items-center gap-1">
+						<span class="truncate text-sm font-medium">
+							{project.name}
+						</span>
+						{#if stats.has_checkpoints}
+							<IconHistory class="size-3 flex-none text-yellow-600 dark:text-yellow-400" aria-label="Has checkpoints" />
+						{/if}
+					</div>
+					{#if stats.messages > 0}
+						<div class="text-2xs text-gray-500 dark:text-gray-500">
+							{stats.messages} msg{stats.messages === 1 ? "" : "s"}
+						</div>
+					{/if}
+				</div>
+
+				<!-- Actions -->
+				{#if !is_default}
+					<div class="ml-auto flex items-center gap-0.5 opacity-0 group-hover:opacity-100">
+						<button
+							onclick={e => handle_edit_project(e, project.id, project.name)}
+							class="rounded p-1 text-gray-500 hover:bg-gray-200 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-300"
+							aria-label="Edit project name"
+						>
+							<IconEdit class="size-3" />
+						</button>
+						<button
+							onclick={e => handle_delete_project(e, project.id)}
+							class="rounded p-1 text-gray-500 hover:bg-gray-200 hover:text-red-600 dark:hover:bg-gray-700 dark:hover:text-red-400"
+							aria-label="Delete project"
+						>
+							<IconDelete class="size-3" />
+						</button>
+					</div>
+				{/if}
+			</div>
+
+			<!-- Children -->
+			{#if has_children && is_expanded}
+				<div {...tree.group} class="ml-3 border-l-2 border-gray-200 pl-1 dark:border-gray-700">
+					{@render tree_node(item.children)}
+				</div>
+			{/if}
+		</div>
+	{/each}
+{/snippet}