DashboardGroup.vue

<script setup lang="ts">
const navItems = [
  { label: 'Jobs', icon: 'i-material-symbols-work-outline' },
  { label: 'Agents', icon: 'i-material-symbols-smart-toy-outline' },
  { label: 'Sessions', icon: 'i-material-symbols-terminal-outline' },
  { label: 'Traces', icon: 'i-material-symbols-timeline-outline' },
]
</script>

<template>
  <div class="flex flex-col gap-8">
    <GallerySection title="Basic layout">
      <GalleryFrame height="24rem">
        <UDashboardGroup class="h-full w-full">
          <UDashboardSidebar :toggle="false" class="w-48 shrink-0">
            <template #header>
              <div class="flex items-center gap-2 px-4 py-3 border-b border-neutral-200 dark:border-neutral-800">
                <UIcon name="i-material-symbols-hub-outline" class="text-primary-500 size-5" />
                <span class="font-semibold text-sm">ARCP Console</span>
              </div>
            </template>
            <nav class="flex flex-col gap-1 p-2">
              <UButton
                v-for="item in navItems"
                :key="item.label"
                :icon="item.icon"
                variant="ghost"
                color="neutral"
                class="justify-start"
              >
                {{ item.label }}
              </UButton>
            </nav>
          </UDashboardSidebar>

          <UDashboardPanel class="flex-1 min-w-0">
            <UDashboardNavbar title="Jobs" icon="i-material-symbols-work-outline" :toggle="false">
              <template #right>
                <UButton icon="i-material-symbols-add" size="sm">New job</UButton>
              </template>
            </UDashboardNavbar>
            <div class="p-4 flex flex-col gap-2">
              <UAlert
                color="success"
                variant="soft"
                title="job-a1b2 completed"
                description="Runtime processed 1 240 events in 3.2 s."
                icon="i-material-symbols-check-circle-outline"
              />
              <UAlert
                color="info"
                variant="soft"
                title="job-c3d4 running"
                description="Agent session active — lease valid for 58 s."
                icon="i-material-symbols-pending-outline"
              />
            </div>
          </UDashboardPanel>
        </UDashboardGroup>
      </GalleryFrame>
    </GallerySection>

    <GallerySection title="Resizable panels">
      <GalleryFrame height="24rem">
        <UDashboardGroup class="h-full w-full">
          <UDashboardSidebar
            :toggle="false"
            :resizable="true"
            :default-size="30"
            :min-size="20"
            :max-size="50"
            class="shrink-0"
          >
            <nav class="flex flex-col gap-1 p-2">
              <UButton
                v-for="item in navItems"
                :key="item.label"
                :icon="item.icon"
                variant="ghost"
                color="neutral"
                size="sm"
                class="justify-start"
              >
                {{ item.label }}
              </UButton>
            </nav>
            <template #footer>
              <div class="px-3 py-2 border-t border-neutral-200 dark:border-neutral-800 text-xs text-neutral-400">
                Drag handle to resize
              </div>
            </template>
          </UDashboardSidebar>

          <UDashboardPanel class="flex-1 min-w-0">
            <UDashboardNavbar title="Agents" icon="i-material-symbols-smart-toy-outline" :toggle="false" />
            <div class="p-4">
              <UBadge color="success" variant="soft" class="mb-3">3 active agents</UBadge>
              <div class="flex flex-col gap-2 text-sm text-neutral-500">
                <div class="flex items-center gap-2">
                  <UIcon name="i-material-symbols-circle" class="text-success-500 size-2" />
                  agent-runtime-v2 · session a9f1
                </div>
                <div class="flex items-center gap-2">
                  <UIcon name="i-material-symbols-circle" class="text-success-500 size-2" />
                  agent-runtime-v2 · session b3e7
                </div>
                <div class="flex items-center gap-2">
                  <UIcon name="i-material-symbols-circle" class="text-warning-500 size-2" />
                  agent-runtime-v1 · session c2d5 (degraded)
                </div>
              </div>
            </div>
          </UDashboardPanel>
        </UDashboardGroup>
      </GalleryFrame>
    </GallerySection>

    <GallerySection title="With toolbar">
      <GalleryFrame height="24rem">
        <UDashboardGroup class="h-full w-full">
          <UDashboardSidebar :toggle="false" class="w-44 shrink-0">
            <nav class="flex flex-col gap-1 p-2">
              <UButton
                v-for="item in navItems"
                :key="item.label"
                :icon="item.icon"
                variant="ghost"
                color="neutral"
                size="sm"
                class="justify-start"
              >
                {{ item.label }}
              </UButton>
            </nav>
          </UDashboardSidebar>

          <UDashboardPanel class="flex-1 min-w-0">
            <UDashboardNavbar title="Traces" icon="i-material-symbols-timeline-outline" :toggle="false">
              <template #right>
                <UButton icon="i-material-symbols-refresh" variant="ghost" color="neutral" size="sm">Refresh</UButton>
              </template>
            </UDashboardNavbar>

            <UDashboardToolbar>
              <template #left>
                <UBadge variant="outline" color="neutral" icon="i-material-symbols-filter-list-outline">Filter</UBadge>
                <UBadge variant="soft" color="info">Last 1 h</UBadge>
              </template>
              <template #right>
                <span class="text-xs text-neutral-400">42 traces</span>
              </template>
            </UDashboardToolbar>

            <div class="p-4 text-sm text-neutral-500">
              Trace timeline renders here — spans from agent sessions, job executions, and runtime hooks.
            </div>
          </UDashboardPanel>
        </UDashboardGroup>
      </GalleryFrame>
    </GallerySection>

    <GallerySection title="Collapsible sidebar">
      <GalleryFrame height="24rem">
        <UDashboardGroup class="h-full w-full">
          <UDashboardSidebar
            :toggle="false"
            :collapsible="true"
            :default-size="25"
            :collapsed-size="5"
            class="shrink-0"
          >
            <template #default="{ collapsed }">
              <nav class="flex flex-col gap-1 p-2">
                <UButton
                  v-for="item in navItems"
                  :key="item.label"
                  :icon="item.icon"
                  variant="ghost"
                  color="neutral"
                  size="sm"
                  :class="collapsed ? 'justify-center' : 'justify-start'"
                >
                  <span v-if="!collapsed">{{ item.label }}</span>
                </UButton>
              </nav>
            </template>
            <template #footer="{ collapsed, collapse }">
              <div class="p-2 border-t border-neutral-200 dark:border-neutral-800">
                <UButton
                  :icon="collapsed ? 'i-material-symbols-chevron-right' : 'i-material-symbols-chevron-left'"
                  variant="ghost"
                  color="neutral"
                  size="sm"
                  :class="collapsed ? 'w-full justify-center' : 'w-full justify-start'"
                  @click="collapse(!collapsed)"
                >
                  <span v-if="!collapsed">Collapse</span>
                </UButton>
              </div>
            </template>
          </UDashboardSidebar>

          <UDashboardPanel class="flex-1 min-w-0">
            <UDashboardNavbar title="Sessions" icon="i-material-symbols-terminal-outline" :toggle="false" />
            <div class="p-4 text-sm text-neutral-500">
              Use the footer button to collapse the sidebar and gain more panel space.
            </div>
          </UDashboardPanel>
        </UDashboardGroup>
      </GalleryFrame>
    </GallerySection>
  </div>
</template>