agentfit 0.1.0

package/components/command-usage.tsx

@@ -0,0 +1,294 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import { Check, Circle, Terminal, Lightbulb, Sparkles, TrendingUp } from 'lucide-react'
+import type { CommandAnalysis } from '@/lib/commands'
+
+function CategoryBar({ name, used, total, invocations }: {
+  name: string
+  used: number
+  total: number
+  invocations: number
+}) {
+  const pct = total > 0 ? Math.round((used / total) * 100) : 0
+  const getColor = (p: number) => {
+    if (p >= 75) return 'bg-chart-2'
+    if (p >= 50) return 'bg-chart-1'
+    if (p >= 25) return 'bg-chart-3'
+    return 'bg-chart-5'
+  }
+
+  return (
+    <div className="space-y-1.5">
+      <div className="flex items-center justify-between text-sm">
+        <span className="font-medium">{name}</span>
+        <span className="text-muted-foreground">
+          {used}/{total} commands ({invocations} uses)
+        </span>
+      </div>
+      <div className="h-2.5 w-full overflow-hidden rounded-full bg-muted">
+        <div
+          className={`h-full rounded-full transition-all duration-500 ${getColor(pct)}`}
+          style={{ width: `${Math.max(2, pct)}%` }}
+        />
+      </div>
+    </div>
+  )
+}
+
+export function CommandUsage() {
+  const [analysis, setAnalysis] = useState<CommandAnalysis | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [filter, setFilter] = useState<'all' | 'used' | 'unused'>('all')
+
+  useEffect(() => {
+    async function load() {
+      try {
+        const res = await fetch('/api/commands')
+        const data = await res.json()
+        setAnalysis(data)
+      } catch (e) {
+        console.error('Failed to load command analysis:', e)
+      } finally {
+        setLoading(false)
+      }
+    }
+    load()
+  }, [])
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-12 text-muted-foreground">
+        Loading command usage...
+      </div>
+    )
+  }
+
+  if (!analysis) {
+    return (
+      <div className="text-destructive py-12 text-center">
+        Failed to load command analysis
+      </div>
+    )
+  }
+
+  const filteredCommands = analysis.commands.filter(cmd => {
+    if (filter === 'used') return cmd.used
+    if (filter === 'unused') return !cmd.used
+    return true
+  })
+
+  // Pick top unused recommendations
+  const recommendations = analysis.commands
+    .filter(c => !c.used)
+    .filter(c => [
+      '/compact', '/diff', '/context', '/btw', '/branch', '/export',
+      '/plan', '/stats', '/insights', '/security-review', '/doctor',
+      '/cost', '/memory', '/hooks', '/keybindings',
+    ].includes(c.command))
+    .slice(0, 8)
+
+  return (
+    <div className="space-y-6">
+      {/* Overview cards */}
+      <div className="grid gap-4 sm:grid-cols-4">
+        <Card>
+          <CardContent className="pt-6">
+            <div className="flex items-center gap-2">
+              <Terminal className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm text-muted-foreground">Built-in Commands</span>
+            </div>
+            <div className="text-3xl font-bold mt-1">{analysis.totalCommands}</div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="pt-6">
+            <div className="flex items-center gap-2">
+              <Check className="h-4 w-4 text-chart-2" />
+              <span className="text-sm text-muted-foreground">Commands Used</span>
+            </div>
+            <div className="text-3xl font-bold mt-1">
+              {analysis.usedCommands}
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="pt-6">
+            <div className="flex items-center gap-2">
+              <TrendingUp className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm text-muted-foreground">Usage Rate</span>
+            </div>
+            <div className="text-3xl font-bold mt-1">{analysis.usagePercentage}%</div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="pt-6">
+            <div className="flex items-center gap-2">
+              <Sparkles className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm text-muted-foreground">Total Invocations</span>
+            </div>
+            <div className="text-3xl font-bold mt-1">{analysis.totalInvocations}</div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Category breakdown */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Coverage by Category</CardTitle>
+          <CardDescription>How many commands you've used in each category</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {Object.entries(analysis.categories)
+            .sort(([, a], [, b]) => b.invocations - a.invocations)
+            .map(([name, stats]) => (
+              <CategoryBar
+                key={name}
+                name={name}
+                used={stats.used}
+                total={stats.total}
+                invocations={stats.invocations}
+              />
+            ))}
+        </CardContent>
+      </Card>
+
+      {/* Recommendations */}
+      {recommendations.length > 0 && (
+        <Card>
+          <CardHeader>
+            <div className="flex items-center gap-2">
+              <Lightbulb className="h-5 w-5 text-chart-3" />
+              <div>
+                <CardTitle>Recommended Commands to Try</CardTitle>
+                <CardDescription>
+                  Useful commands you haven't used yet
+                </CardDescription>
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="grid gap-3 sm:grid-cols-2">
+              {recommendations.map(cmd => (
+                <div key={cmd.command} className="flex items-start gap-3 rounded-lg border p-3">
+                  <code className="shrink-0 rounded bg-muted px-2 py-0.5 text-sm font-semibold text-primary">
+                    {cmd.command}
+                  </code>
+                  <span className="text-sm text-muted-foreground">{cmd.description}</span>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Custom commands (skills/plugins) */}
+      {analysis.customCommands.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Custom Commands (Skills & Plugins)</CardTitle>
+            <CardDescription>
+              Non-built-in commands you've used — these come from installed skills and plugins
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="flex flex-wrap gap-2">
+              {analysis.customCommands.map(({ command, count }) => (
+                <Badge key={command} variant="secondary" className="gap-1.5 text-sm">
+                  <code>{command}</code>
+                  <span className="text-muted-foreground">{count}x</span>
+                </Badge>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Full command table */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div>
+              <CardTitle>All Commands</CardTitle>
+              <CardDescription>
+                Complete list of built-in Claude Code commands
+              </CardDescription>
+            </div>
+            <div className="flex gap-1.5">
+              {(['all', 'used', 'unused'] as const).map(f => (
+                <button
+                  key={f}
+                  onClick={() => setFilter(f)}
+                  className={`rounded-md px-3 py-1 text-xs font-medium transition-colors ${
+                    filter === f
+                      ? 'bg-primary text-primary-foreground'
+                      : 'bg-muted text-muted-foreground hover:bg-muted/80'
+                  }`}
+                >
+                  {f === 'all' ? `All (${analysis.totalCommands})` :
+                   f === 'used' ? `Used (${analysis.usedCommands})` :
+                   `Unused (${analysis.unusedCommands})`}
+                </button>
+              ))}
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-8"></TableHead>
+                <TableHead>Command</TableHead>
+                <TableHead>Description</TableHead>
+                <TableHead>Category</TableHead>
+                <TableHead className="text-right">Uses</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filteredCommands.map(cmd => (
+                <TableRow key={cmd.command} className={cmd.used ? '' : 'opacity-60'}>
+                  <TableCell>
+                    {cmd.used ? (
+                      <Check className="h-4 w-4 text-chart-2" />
+                    ) : (
+                      <Circle className="h-4 w-4 text-muted-foreground/40" />
+                    )}
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex items-center gap-2">
+                      <code className="text-sm font-semibold">{cmd.command}</code>
+                      {cmd.aliases && cmd.aliases.length > 0 && (
+                        <span className="text-xs text-muted-foreground">
+                          ({cmd.aliases.join(', ')})
+                        </span>
+                      )}
+                    </div>
+                  </TableCell>
+                  <TableCell className="text-sm text-muted-foreground">
+                    {cmd.description}
+                  </TableCell>
+                  <TableCell>
+                    <Badge variant="outline" className="text-xs">{cmd.category}</Badge>
+                  </TableCell>
+                  <TableCell className="text-right font-mono">
+                    {cmd.count > 0 ? cmd.count : '–'}
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/components/daily-chart.tsx

@@ -0,0 +1,118 @@
+'use client'
+
+import { Line, LineChart, CartesianGrid, XAxis, YAxis } from 'recharts'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from '@/components/ui/chart'
+import type { DailyUsage } from '@/lib/parse-logs'
+import { formatCost } from '@/lib/format'
+
+const costConfig = {
+  cost: { label: 'Cost', color: 'var(--chart-5)' },
+} satisfies ChartConfig
+
+const sessionsConfig = {
+  sessions: { label: 'Sessions', color: 'var(--chart-2)' },
+} satisfies ChartConfig
+
+const messagesConfig = {
+  messages: { label: 'Messages', color: 'var(--chart-1)' },
+} satisfies ChartConfig
+
+export function DailyChart({ daily }: { daily: DailyUsage[] }) {
+  const data = daily.map((d) => ({
+    date: d.date.slice(5),
+    cost: Number(d.costUSD.toFixed(2)),
+    sessions: d.sessions,
+    messages: d.messages,
+  }))
+
+  return (
+    <>
+      <Card>
+        <CardHeader>
+          <CardTitle>Daily Cost</CardTitle>
+          <CardDescription>USD spent per day</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ChartContainer config={costConfig} className="min-h-[250px] w-full">
+            <LineChart data={data} accessibilityLayer>
+              <CartesianGrid vertical={false} />
+              <XAxis dataKey="date" tickLine={false} axisLine={false} tickMargin={8} />
+              <YAxis tickLine={false} axisLine={false} tickFormatter={(v) => `$${v}`} />
+              <ChartTooltip
+                content={
+                  <ChartTooltipContent
+                    formatter={(value) => formatCost(Number(value))}
+                  />
+                }
+              />
+              <Line
+                dataKey="cost"
+                type="monotone"
+                stroke="var(--color-cost)"
+                strokeWidth={2}
+                dot={{ r: 3, fill: 'var(--color-cost)' }}
+                activeDot={{ r: 5 }}
+              />
+            </LineChart>
+          </ChartContainer>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Daily Sessions</CardTitle>
+          <CardDescription>Number of sessions per day</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ChartContainer config={sessionsConfig} className="min-h-[250px] w-full">
+            <LineChart data={data} accessibilityLayer>
+              <CartesianGrid vertical={false} />
+              <XAxis dataKey="date" tickLine={false} axisLine={false} tickMargin={8} />
+              <YAxis tickLine={false} axisLine={false} />
+              <ChartTooltip content={<ChartTooltipContent />} />
+              <Line
+                dataKey="sessions"
+                type="monotone"
+                stroke="var(--color-sessions)"
+                strokeWidth={2}
+                dot={{ r: 3, fill: 'var(--color-sessions)' }}
+                activeDot={{ r: 5 }}
+              />
+            </LineChart>
+          </ChartContainer>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Daily Messages</CardTitle>
+          <CardDescription>Messages exchanged per day</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ChartContainer config={messagesConfig} className="min-h-[250px] w-full">
+            <LineChart data={data} accessibilityLayer>
+              <CartesianGrid vertical={false} />
+              <XAxis dataKey="date" tickLine={false} axisLine={false} tickMargin={8} />
+              <YAxis tickLine={false} axisLine={false} />
+              <ChartTooltip content={<ChartTooltipContent />} />
+              <Line
+                dataKey="messages"
+                type="monotone"
+                stroke="var(--color-messages)"
+                strokeWidth={2}
+                dot={{ r: 3, fill: 'var(--color-messages)' }}
+                activeDot={{ r: 5 }}
+              />
+            </LineChart>
+          </ChartContainer>
+        </CardContent>
+      </Card>
+    </>
+  )
+}

package/components/daily-table.tsx

@@ -0,0 +1,115 @@
+'use client'
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import { PaginationControls } from '@/components/pagination-controls'
+import { usePagination } from '@/hooks/use-pagination'
+import type { DailyUsage, SessionSummary } from '@/lib/parse-logs'
+import { formatCost, formatTokens, formatNumber } from '@/lib/format'
+
+interface DailyTableProps {
+  daily: DailyUsage[]
+  sessions: SessionSummary[]
+}
+
+export function DailyTable({ daily, sessions }: DailyTableProps) {
+  // Build models-per-day from sessions
+  const modelsByDate = new Map<string, Set<string>>()
+  for (const s of sessions) {
+    const date = s.startTime.slice(0, 10)
+    if (!modelsByDate.has(date)) modelsByDate.set(date, new Set())
+    modelsByDate.get(date)!.add(s.model)
+  }
+
+  // Totals
+  const totals = daily.reduce(
+    (acc, d) => ({
+      sessions: acc.sessions + d.sessions,
+      messages: acc.messages + d.messages,
+      inputTokens: acc.inputTokens + d.inputTokens,
+      outputTokens: acc.outputTokens + d.outputTokens,
+      cacheCreationTokens: acc.cacheCreationTokens + d.cacheCreationTokens,
+      cacheReadTokens: acc.cacheReadTokens + d.cacheReadTokens,
+      totalTokens: acc.totalTokens + d.totalTokens,
+      costUSD: acc.costUSD + d.costUSD,
+    }),
+    {
+      sessions: 0, messages: 0, inputTokens: 0, outputTokens: 0,
+      cacheCreationTokens: 0, cacheReadTokens: 0, totalTokens: 0, costUSD: 0,
+    }
+  )
+
+  // Sort daily by date descending (most recent first)
+  const sorted = [...daily].sort((a, b) => b.date.localeCompare(a.date))
+  const pagination = usePagination(sorted, 20)
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Daily Breakdown</CardTitle>
+        <CardDescription>{daily.length} days of activity</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Date</TableHead>
+              <TableHead>Models</TableHead>
+              <TableHead className="text-right">Sessions</TableHead>
+              <TableHead className="text-right">Input</TableHead>
+              <TableHead className="text-right">Output</TableHead>
+              <TableHead className="text-right">Cache Create</TableHead>
+              <TableHead className="text-right">Cache Read</TableHead>
+              <TableHead className="text-right">Total Tokens</TableHead>
+              <TableHead className="text-right">Cost</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {pagination.pageItems.map((d) => {
+              const models = modelsByDate.get(d.date)
+              const modelList = models ? Array.from(models).sort() : []
+              return (
+                <TableRow key={d.date}>
+                  <TableCell className="font-medium whitespace-nowrap">{d.date}</TableCell>
+                  <TableCell className="text-xs text-muted-foreground max-w-[180px]">
+                    {modelList.map((m) => (
+                      <div key={m}>{m}</div>
+                    ))}
+                  </TableCell>
+                  <TableCell className="text-right">{d.sessions}</TableCell>
+                  <TableCell className="text-right font-mono text-xs">{formatNumber(d.inputTokens)}</TableCell>
+                  <TableCell className="text-right font-mono text-xs">{formatNumber(d.outputTokens)}</TableCell>
+                  <TableCell className="text-right font-mono text-xs">{formatNumber(d.cacheCreationTokens)}</TableCell>
+                  <TableCell className="text-right font-mono text-xs">{formatNumber(d.cacheReadTokens)}</TableCell>
+                  <TableCell className="text-right font-mono text-xs">{formatNumber(d.totalTokens)}</TableCell>
+                  <TableCell className="text-right font-medium">{formatCost(d.costUSD)}</TableCell>
+                </TableRow>
+              )
+            })}
+          </TableBody>
+          <TableBody>
+            <TableRow className="bg-muted/50 font-bold">
+              <TableCell>Total</TableCell>
+              <TableCell />
+              <TableCell className="text-right">{totals.sessions}</TableCell>
+              <TableCell className="text-right font-mono text-xs">{formatTokens(totals.inputTokens)}</TableCell>
+              <TableCell className="text-right font-mono text-xs">{formatTokens(totals.outputTokens)}</TableCell>
+              <TableCell className="text-right font-mono text-xs">{formatTokens(totals.cacheCreationTokens)}</TableCell>
+              <TableCell className="text-right font-mono text-xs">{formatTokens(totals.cacheReadTokens)}</TableCell>
+              <TableCell className="text-right font-mono text-xs">{formatTokens(totals.totalTokens)}</TableCell>
+              <TableCell className="text-right">{formatCost(totals.costUSD)}</TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+        <PaginationControls pagination={pagination} noun="days" />
+      </CardContent>
+    </Card>
+  )
+}

package/components/dashboard-shell.tsx

@@ -0,0 +1,149 @@
+'use client'
+
+import { usePathname } from 'next/navigation'
+import { RefreshCw } from 'lucide-react'
+import { SidebarProvider, SidebarInset, SidebarTrigger } from '@/components/ui/sidebar'
+import { Separator } from '@/components/ui/separator'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { AppSidebar } from './app-sidebar'
+import { useData, type TimeRange } from './data-provider'
+import { getPlugin } from '@/lib/plugins'
+import '@/plugins' // ensure plugins are registered
+import type { ReactNode } from 'react'
+
+const VIEW_TITLES: Record<string, string> = {
+  '/': 'Dashboard',
+  '/daily': 'Daily Usage',
+  '/tokens': 'Token Breakdown',
+  '/tools': 'Tool Usage',
+  '/projects': 'Projects',
+  '/sessions': 'Sessions',
+  '/personality': 'Personality Fit',
+  '/commands': 'Command Usage',
+  '/images': 'Images',
+  '/coach': 'Agent Coach',
+}
+
+function resolveTitle(pathname: string): string {
+  if (VIEW_TITLES[pathname]) return VIEW_TITLES[pathname]
+  if (pathname === '/community') return 'Community'
+  // Community plugin routes: /community/<slug>
+  const match = pathname.match(/^\/community\/([a-z0-9-]+)$/)
+  if (match) {
+    const plugin = getPlugin(match[1])
+    if (plugin) return plugin.manifest.name
+  }
+  return 'Dashboard'
+}
+
+const AGENT_LABELS: Record<string, string> = {
+  claude: 'Claude Code',
+  codex: 'Codex',
+  combined: 'Combined',
+}
+
+const TIME_RANGE_LABELS: Record<TimeRange, string> = {
+  '7d': 'Last 7 days',
+  '30d': 'Last 30 days',
+  '90d': 'Last 90 days',
+  'all': 'All time',
+}
+
+// Pages where time range filter doesn't apply
+const NO_TIME_FILTER = new Set(['/commands'])
+
+export function DashboardShell({ children }: { children: ReactNode }) {
+  const pathname = usePathname()
+  const {
+    agent, setAgent, timeRange, setTimeRange,
+    syncing, lastSyncResult, lastSyncTime, handleSync, loading,
+    newSessionsAvailable,
+  } = useData()
+
+  const title = resolveTitle(pathname)
+  const communityMatch = pathname.match(/^\/community\/([a-z0-9-]+)$/)
+  const communityPlugin = communityMatch ? getPlugin(communityMatch[1]) : undefined
+  const showTimeFilter =
+    !NO_TIME_FILTER.has(pathname) && !communityPlugin?.manifest.customDataSource
+
+  if (loading) {
+    return (
+      <div className="flex min-h-screen items-center justify-center">
+        <div className="flex items-center gap-2 text-muted-foreground">
+          <RefreshCw className="h-4 w-4 animate-spin" />
+          Syncing logs...
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-14 shrink-0 items-center justify-between border-b px-4">
+          <div className="flex items-center gap-2">
+            <SidebarTrigger className="-ml-1" />
+            <h1 className="ml-2 text-sm font-semibold">{title}</h1>
+          </div>
+          <div className="flex items-center gap-2">
+            {showTimeFilter && (
+              <div className="flex rounded-lg border p-0.5">
+                {(Object.entries(TIME_RANGE_LABELS) as [TimeRange, string][]).map(([key, label]) => (
+                  <button
+                    key={key}
+                    onClick={() => setTimeRange(key)}
+                    className={`rounded-md px-2.5 py-1 text-xs font-medium transition-colors ${
+                      timeRange === key
+                        ? 'bg-primary text-primary-foreground'
+                        : 'text-muted-foreground hover:text-foreground'
+                    }`}
+                  >
+                    {key === 'all' ? 'All' : key}
+                  </button>
+                ))}
+              </div>
+            )}
+            <Select value={agent} onValueChange={(v) => v && setAgent(v as 'claude' | 'codex' | 'combined')}>
+              <SelectTrigger className="h-8 w-[130px] text-xs">
+                <SelectValue>{AGENT_LABELS[agent]}</SelectValue>
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="claude">Claude Code</SelectItem>
+                <SelectItem value="codex">Codex</SelectItem>
+                <SelectItem value="combined">Combined</SelectItem>
+              </SelectContent>
+            </Select>
+            {lastSyncTime && lastSyncResult && lastSyncResult.sessionsAdded > 0 && (
+              <Badge variant="secondary" className="hidden text-xs sm:inline-flex">
+                +{lastSyncResult.sessionsAdded} new
+              </Badge>
+            )}
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleSync}
+              disabled={syncing}
+              className="gap-2"
+            >
+              <RefreshCw className={`h-3.5 w-3.5 ${syncing ? 'animate-spin' : ''}`} />
+              {syncing ? 'Syncing...' : 'Sync'}
+            </Button>
+          </div>
+        </header>
+        <main className="flex-1 space-y-6 p-6">
+          {children}
+        </main>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}