npm - better-codex - Versions diffs - 0.1.0 - Mend

better-codex 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (405) hide show

package/apps/web/eslint.config.js ADDED Viewed

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

package/apps/web/index.html ADDED Viewed

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <title>Codex</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/apps/web/package.json ADDED Viewed

@@ -0,0 +1,38 @@
+{
+  "name": "web",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tanstack/react-virtual": "^3.13.14",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "streamdown": "^1.6.10",
+    "zustand": "^5.0.9"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@tailwindcss/vite": "^4.1.18",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "tailwindcss": "^4.1.18",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "npm:rolldown-vite@7.2.5"
+  },
+  "overrides": {
+    "vite": "npm:rolldown-vite@7.2.5"
+  }
+}

package/apps/web/src/app.tsx ADDED Viewed

@@ -0,0 +1,83 @@
+import { Sidebar, ThreadList, SessionView, AnalyticsView, ReviewsView } from './components'
+import { StartupLoader } from './components/loading/startup-loader'
+import { MobileHeader } from './components/layout/mobile-header'
+import { MobileDrawer } from './components/ui'
+import { useHubConnection } from './hooks/use-hub-connection'
+import { useThreadHistory } from './hooks/use-thread-history'
+import { useIsMobile, useDynamicViewportHeight } from './hooks/use-mobile'
+import { useAppStore } from './store'
+function App() {
+  useHubConnection()
+  useThreadHistory()
+  useDynamicViewportHeight()
+  const isMobile = useIsMobile()
+  const {
+    isMobileSidebarOpen,
+    isMobileThreadListOpen,
+    setMobileSidebarOpen,
+    setMobileThreadListOpen,
+    closeMobileDrawers,
+    setSelectedThreadId,
+    showAnalytics,
+    showReviews,
+  } = useAppStore()
+  const handleThreadSelect = (threadId: string) => {
+    if (threadId) {
+      setSelectedThreadId(threadId)
+    }
+    closeMobileDrawers()
+  }
+  if (isMobile) {
+    return (
+      <div
+        className="flex flex-col overflow-hidden bg-bg-primary"
+        style={{ height: 'calc(var(--vh, 1vh) * 100)' }}
+      >
+        <StartupLoader />
+        <MobileHeader />
+        {showAnalytics ? <AnalyticsView /> : showReviews ? <ReviewsView /> : <SessionView />}
+        <MobileDrawer
+          open={isMobileSidebarOpen}
+          onClose={() => setMobileSidebarOpen(false)}
+          side="left"
+        >
+          <Sidebar onNavigate={() => setMobileSidebarOpen(false)} />
+        </MobileDrawer>
+        <MobileDrawer
+          open={isMobileThreadListOpen}
+          onClose={() => setMobileThreadListOpen(false)}
+          side="right"
+        >
+          <ThreadList onThreadSelect={handleThreadSelect} />
+        </MobileDrawer>
+      </div>
+    )
+  }
+  return (
+    <div className="h-screen flex overflow-hidden bg-bg-primary">
+      <StartupLoader />
+      <Sidebar />
+      {showAnalytics ? (
+        <AnalyticsView />
+      ) : showReviews ? (
+        <ReviewsView />
+      ) : (
+        <>
+          <ThreadList />
+          <SessionView />
+        </>
+      )}
+    </div>
+  )
+}
+export default App

package/apps/web/src/components/composer/slash-command-menu.tsx ADDED Viewed

@@ -0,0 +1,47 @@
+import type { SlashCommandDefinition } from '../../utils/slash-commands'
+interface SlashCommandMenuProps {
+  commands: SlashCommandDefinition[]
+  activeIndex: number
+  isTaskRunning: boolean
+  onSelect: (command: SlashCommandDefinition) => void
+  onHover: (index: number) => void
+}
+export function SlashCommandMenu({
+  commands,
+  activeIndex,
+  isTaskRunning,
+  onSelect,
+  onHover,
+}: SlashCommandMenuProps) {
+  if (commands.length === 0) {
+    return null
+  }
+  return (
+    <div className="absolute bottom-full left-0 mb-2 w-[320px] bg-bg-secondary border border-border rounded-xl shadow-xl overflow-hidden z-50">
+      <div className="max-h-[260px] overflow-y-auto py-1">
+        {commands.map((command, index) => {
+          const isActive = index === activeIndex
+          const isDisabled = isTaskRunning && !command.availableDuringTask
+          return (
+            <button
+              key={command.id}
+              type="button"
+              onClick={() => !isDisabled && onSelect(command)}
+              onMouseEnter={() => onHover(index)}
+              disabled={isDisabled}
+              className={`w-full text-left px-3 py-2 transition-colors ${
+                isActive ? 'bg-bg-elevated text-text-primary' : 'text-text-secondary'
+              } ${isDisabled ? 'opacity-50 cursor-not-allowed' : 'hover:bg-bg-hover'}`}
+            >
+              <div className="text-xs font-semibold">/{command.id}</div>
+              <div className="text-[10px] text-text-muted mt-0.5">{command.description}</div>
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

package/apps/web/src/components/index.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './ui'
2	+ export * from './layout'

package/apps/web/src/components/layout/account-usage-panel.tsx ADDED Viewed

@@ -0,0 +1,167 @@
+import { useAppStore } from '../../store'
+import { Icons, Badge } from '../ui'
+export function AccountUsagePanel() {
+  const { accounts, selectedAccountId } = useAppStore()
+  const account = accounts.find((a) => a.id === selectedAccountId)
+  if (!account) {
+    return (
+      <div className="bg-bg-tertiary border border-border rounded-xl p-4">
+        <p className="text-xs text-text-muted">No account selected</p>
+      </div>
+    )
+  }
+  const { usage } = account
+  const formatResetTime = (resetsAt: number | null) => {
+    if (!resetsAt) return null
+    const now = Date.now() / 1000
+    const diff = resetsAt - now
+    if (diff <= 0) return 'Resetting...'
+    if (diff < 60) return `${Math.round(diff)}s`
+    if (diff < 3600) return `${Math.round(diff / 60)}m`
+    return `${Math.round(diff / 3600)}h`
+  }
+  const getRemainingColor = (percentLeft: number) => {
+    if (percentLeft <= 10) return 'text-accent-red'
+    if (percentLeft <= 30) return 'text-yellow-500'
+    return 'text-accent-green'
+  }
+  const getRemainingBarColor = (percentLeft: number) => {
+    if (percentLeft <= 10) return 'bg-accent-red'
+    if (percentLeft <= 30) return 'bg-yellow-500'
+    return 'bg-accent-green'
+  }
+  // Always show current rateLimit even without full usage data
+  const primaryUsed = usage?.primary?.usedPercent ?? account.rateLimit
+  return (
+    <div className="bg-bg-tertiary border border-border rounded-xl p-3">
+      <div className="flex items-center gap-2 mb-3">
+        <Icons.Grid className="w-3.5 h-3.5 text-text-muted" />
+        <h3 className="text-xs font-semibold text-text-primary">{account.name}</h3>
+        {(usage?.planType || account.plan !== 'Unknown') && (
+          <Badge variant="success">{usage?.planType || account.plan}</Badge>
+        )}
+      </div>
+      <div className="space-y-3">
+        <UsageBar
+          label="5 Hours"
+          usedPercent={primaryUsed}
+          windowMinutes={usage?.primary?.windowMinutes ?? null}
+          resetsAt={usage?.primary?.resetsAt ?? null}
+          formatResetTime={formatResetTime}
+          getRemainingColor={getRemainingColor}
+          getRemainingBarColor={getRemainingBarColor}
+        />
+        {usage?.secondary && (
+          <UsageBar
+            label="Weekly"
+            usedPercent={usage.secondary.usedPercent}
+            windowMinutes={usage.secondary.windowMinutes}
+            resetsAt={usage.secondary.resetsAt}
+            formatResetTime={formatResetTime}
+            getRemainingColor={getRemainingColor}
+            getRemainingBarColor={getRemainingBarColor}
+          />
+        )}
+        {usage?.credits && (
+          <div className="pt-2 border-t border-border">
+            <div className="flex items-center justify-between">
+              <span className="text-[10px] text-text-muted">Credits</span>
+              <div className="flex items-center gap-1.5">
+                {usage.credits.unlimited ? (
+                  <Badge variant="success">Unlimited</Badge>
+                ) : usage.credits.balance ? (
+                  <span className="text-xs font-medium text-text-primary">
+                    ${usage.credits.balance}
+                  </span>
+                ) : (
+                  <span className={`text-[10px] ${usage.credits.hasCredits ? 'text-accent-green' : 'text-accent-red'}`}>
+                    {usage.credits.hasCredits ? 'Available' : 'Exhausted'}
+                  </span>
+                )}
+              </div>
+            </div>
+          </div>
+        )}
+        <div className="pt-2 border-t border-border space-y-1">
+          <div className="flex items-center justify-between">
+            <span className="text-[10px] text-text-muted">Status</span>
+            <span className={`text-[10px] font-medium ${
+              account.status === 'online' ? 'text-accent-green' :
+              account.status === 'degraded' ? 'text-yellow-500' : 'text-text-muted'
+            }`}>
+              {account.status}
+            </span>
+          </div>
+          {account.email && (
+            <div className="flex items-center justify-between">
+              <span className="text-[10px] text-text-muted">Email</span>
+              <span className="text-[10px] text-text-secondary truncate max-w-[120px]">{account.email}</span>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+function UsageBar({
+  label,
+  usedPercent,
+  windowMinutes,
+  resetsAt,
+  formatResetTime,
+  getRemainingColor,
+  getRemainingBarColor,
+}: {
+  label: string
+  usedPercent: number
+  windowMinutes: number | null
+  resetsAt: number | null
+  formatResetTime: (resetsAt: number | null) => string | null
+  getRemainingColor: (percentLeft: number) => string
+  getRemainingBarColor: (percentLeft: number) => string
+}) {
+  const resetTime = formatResetTime(resetsAt)
+  const percentLeft = Math.max(0, Math.min(100, 100 - usedPercent))
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-1.5">
+        <span className="text-xs text-text-muted">{label}</span>
+        <div className="flex items-center gap-2">
+          <span className={`text-sm font-medium ${getRemainingColor(percentLeft)}`}>
+            {Math.round(percentLeft)}% left
+          </span>
+          {windowMinutes && (
+            <span className="text-[10px] text-text-muted">
+              / {windowMinutes}m window
+            </span>
+          )}
+        </div>
+      </div>
+      <div className="h-2 bg-bg-primary rounded-full overflow-hidden">
+        <div
+          className={`h-full transition-all duration-300 ${getRemainingBarColor(percentLeft)}`}
+          style={{ width: `${percentLeft}%` }}
+        />
+      </div>
+      {resetTime && (
+        <p className="text-[10px] text-text-muted mt-1">
+          Resets in {resetTime}
+        </p>
+      )}
+    </div>
+  )
+}

package/apps/web/src/components/layout/analytics-view.tsx ADDED Viewed

@@ -0,0 +1,296 @@
+import { useState, useMemo } from 'react'
+import { useAnalytics, useMultipleMetrics, type AnalyticsMetric } from '../../hooks/use-analytics'
+import { Icons, Select, SectionHeader } from '../ui'
+import { useAppStore } from '../../store'
+const CONTRIBUTION_METRICS: { value: AnalyticsMetric; label: string }[] = [
+  { value: 'turns_started', label: 'Turns' },
+  { value: 'turns_completed', label: 'Turns Completed' },
+  { value: 'threads_started', label: 'Sessions' },
+  { value: 'command_exec', label: 'Commands' },
+]
+const YEARS = [2026, 2025, 2024]
+export function AnalyticsView() {
+  const { accounts, selectedAccountId } = useAppStore()
+  const [selectedMetric, setSelectedMetric] = useState<AnalyticsMetric>('turns_started')
+  const [selectedYear, setSelectedYear] = useState(new Date().getFullYear())
+  const profileId = selectedAccountId ?? undefined
+  const now = new Date()
+  const isCurrentYear = selectedYear === now.getFullYear()
+  const yearStart = new Date(selectedYear, 0, 1)
+  const yearEnd = isCurrentYear ? now : new Date(selectedYear, 11, 31)
+  const daysDiff = Math.ceil((yearEnd.getTime() - yearStart.getTime()) / (1000 * 60 * 60 * 24)) + 1
+  const { data: graphData, loading } = useAnalytics(selectedMetric, profileId, undefined, isCurrentYear ? 365 : daysDiff)
+  const yearData = useMemo(() => {
+    return graphData.filter(d => d.date.startsWith(String(selectedYear)))
+  }, [graphData, selectedYear])
+  const { data: allMetrics } = useMultipleMetrics(
+    ['turns_started', 'threads_started', 'command_exec', 'approvals_requested_command'],
+    profileId,
+    365
+  )
+  const totalTurns = (allMetrics.turns_started ?? []).reduce((sum, d) => sum + d.count, 0)
+  const totalSessions = (allMetrics.threads_started ?? []).reduce((sum, d) => sum + d.count, 0)
+  const totalCommands = (allMetrics.command_exec ?? []).reduce((sum, d) => sum + d.count, 0)
+  const totalApprovals = (allMetrics.approvals_requested_command ?? []).reduce((sum, d) => sum + d.count, 0)
+  const selectedAccount = accounts.find(a => a.id === selectedAccountId)
+  const totalForYear = yearData.reduce((sum, d) => sum + d.count, 0)
+  return (
+    <div className="flex-1 overflow-y-auto bg-bg-primary">
+      <div className="max-w-5xl mx-auto p-4 md:p-6 space-y-6">
+        <div>
+          <h1 className="text-xl font-semibold text-text-primary">Analytics</h1>
+          <p className="text-sm text-text-muted mt-1">
+            {selectedAccount
+              ? `Activity for ${selectedAccount.name}`
+              : 'Activity across all accounts'
+            }
+          </p>
+        </div>
+        <div className="bg-bg-secondary border border-border rounded-lg p-4 overflow-visible">
+          <div className="flex items-center justify-between gap-3 mb-4">
+            <div className="text-sm text-text-primary">
+              <span className="font-medium">{totalForYear.toLocaleString()}</span>
+              <span className="text-text-muted ml-1">
+                {CONTRIBUTION_METRICS.find(m => m.value === selectedMetric)?.label.toLowerCase()} in {selectedYear}
+              </span>
+            </div>
+            <div className="flex items-center gap-2 relative z-10">
+              <Select
+                value={selectedMetric}
+                onChange={(value) => setSelectedMetric(value as AnalyticsMetric)}
+                options={CONTRIBUTION_METRICS}
+                className="w-44"
+              />
+            </div>
+          </div>
+          {loading ? (
+            <div className="h-32 flex items-center justify-center text-text-muted">
+              Loading...
+            </div>
+          ) : (
+            <div className="flex gap-4">
+              <div className="hidden md:flex flex-col gap-1 text-xs text-text-muted">
+                {YEARS.map(year => (
+                  <button
+                    key={year}
+                    onClick={() => setSelectedYear(year)}
+                    className={`px-2 py-1 rounded text-left transition-colors ${
+                      selectedYear === year
+                        ? 'bg-bg-elevated text-text-primary font-medium'
+                        : 'hover:text-text-secondary'
+                    }`}
+                  >
+                    {year}
+                  </button>
+                ))}
+              </div>
+              <div className="flex-1 overflow-x-auto">
+                <GitHubContributionGraph data={yearData} year={selectedYear} />
+              </div>
+            </div>
+          )}
+          <div className="flex md:hidden items-center justify-center gap-2 mt-4 pt-3 border-t border-border">
+            {YEARS.map(year => (
+              <button
+                key={year}
+                onClick={() => setSelectedYear(year)}
+                className={`px-3 py-1 rounded text-xs transition-colors ${
+                  selectedYear === year
+                    ? 'bg-bg-elevated text-text-primary font-medium border border-border'
+                    : 'text-text-muted hover:text-text-secondary'
+                }`}
+              >
+                {year}
+              </button>
+            ))}
+          </div>
+        </div>
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+          <StatBlock label="Turns" value={totalTurns} icon={<Icons.Bolt className="w-4 h-4" />} />
+          <StatBlock label="Sessions" value={totalSessions} icon={<Icons.Grid className="w-4 h-4" />} />
+          <StatBlock label="Commands" value={totalCommands} icon={<Icons.Terminal className="w-4 h-4" />} />
+          <StatBlock label="Approvals" value={totalApprovals} icon={<Icons.Check className="w-4 h-4" />} />
+        </div>
+        <div className="bg-bg-secondary border border-border rounded-lg overflow-hidden">
+          <div className="px-4 py-3 border-b border-border">
+            <SectionHeader>Recent Activity</SectionHeader>
+          </div>
+          <div className="divide-y divide-border">
+            {[...yearData].reverse().slice(0, 10).map((day) => (
+              <div key={day.date} className="flex items-center justify-between px-4 py-2.5 hover:bg-bg-hover">
+                <span className="text-sm text-text-primary">{formatDate(day.date)}</span>
+                <span className="text-sm text-text-muted">{day.count} {day.count === 1 ? 'contribution' : 'contributions'}</span>
+              </div>
+            ))}
+            {yearData.length === 0 && (
+              <div className="px-4 py-8 text-center text-text-muted text-sm">
+                No activity recorded for {selectedYear}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+function StatBlock({ label, value, icon }: { label: string; value: number; icon: React.ReactNode }) {
+  return (
+    <div className="bg-bg-secondary border border-border rounded-lg p-3 flex items-center gap-3">
+      <div className="p-2 bg-bg-hover rounded-lg text-text-muted">
+        {icon}
+      </div>
+      <div>
+        <div className="text-lg font-semibold text-text-primary">{value.toLocaleString()}</div>
+        <div className="text-xs text-text-muted">{label}</div>
+      </div>
+    </div>
+  )
+}
+interface DailyDataPoint {
+  date: string
+  count: number
+}
+function GitHubContributionGraph({ data, year }: { data: DailyDataPoint[]; year: number }) {
+  const { grid, monthLabels, maxCount } = useMemo(() => {
+    const dataMap = new Map<string, number>()
+    for (const point of data) {
+      dataMap.set(point.date, point.count)
+    }
+    const now = new Date()
+    const isCurrentYear = year === now.getFullYear()
+    const endDate = isCurrentYear ? now : new Date(year, 11, 31)
+    const startDate = new Date(year, 0, 1)
+    const startDayOfWeek = startDate.getDay()
+    const adjustedStart = new Date(startDate)
+    adjustedStart.setDate(adjustedStart.getDate() - startDayOfWeek)
+    const weeks: Array<Array<{ date: string; count: number; isInRange: boolean }>> = []
+    const monthLabels: Array<{ label: string; weekIndex: number }> = []
+    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+    let currentDate = new Date(adjustedStart)
+    let lastMonth = -1
+    let maxCount = 0
+    while (currentDate <= endDate || weeks.length < 53) {
+      const week: Array<{ date: string; count: number; isInRange: boolean }> = []
+      for (let d = 0; d < 7; d++) {
+        const dateKey = formatDateKey(currentDate)
+        const count = dataMap.get(dateKey) ?? 0
+        const inYear = currentDate.getFullYear() === year
+        const notFuture = currentDate <= now
+        const isInRange = inYear && notFuture
+        if (inYear && currentDate.getMonth() !== lastMonth && currentDate.getDate() <= 7) {
+          monthLabels.push({ label: months[currentDate.getMonth()], weekIndex: weeks.length })
+          lastMonth = currentDate.getMonth()
+        }
+        week.push({ date: dateKey, count, isInRange })
+        maxCount = Math.max(maxCount, count)
+        currentDate.setDate(currentDate.getDate() + 1)
+      }
+      weeks.push(week)
+      if (weeks.length >= 53) break
+    }
+    return { grid: weeks, monthLabels, maxCount }
+  }, [data, year])
+  const getColorClass = (count: number, isInRange: boolean): string => {
+    if (!isInRange) return 'bg-transparent'
+    if (count === 0) return 'bg-bg-elevated'
+    if (maxCount === 0) return 'bg-bg-elevated'
+    const ratio = count / maxCount
+    if (ratio <= 0.25) return 'bg-emerald-900/60'
+    if (ratio <= 0.5) return 'bg-emerald-700/70'
+    if (ratio <= 0.75) return 'bg-emerald-500/80'
+    return 'bg-emerald-400'
+  }
+  const days = ['', 'Mon', '', 'Wed', '', 'Fri', '']
+  return (
+    <div>
+      <div className="flex text-[10px] text-text-muted mb-1 ml-6">
+        {monthLabels.map((m, i) => (
+          <span
+            key={i}
+            className="absolute"
+            style={{ marginLeft: `${m.weekIndex * 13}px` }}
+          >
+            {m.label}
+          </span>
+        ))}
+      </div>
+      <div className="flex gap-[3px] mt-4">
+        <div className="flex flex-col gap-[3px] text-[10px] text-text-muted w-5">
+          {days.map((day, i) => (
+            <div key={i} className="h-[11px] flex items-center justify-end pr-1">
+              {day}
+            </div>
+          ))}
+        </div>
+        {grid.map((week, wi) => (
+          <div key={wi} className="flex flex-col gap-[3px]">
+            {week.map((day, di) => (
+              <div
+                key={di}
+                className={`w-[11px] h-[11px] rounded-sm ${getColorClass(day.count, day.isInRange)}`}
+                title={day.isInRange ? `${day.date}: ${day.count} contributions` : undefined}
+              />
+            ))}
+          </div>
+        ))}
+      </div>
+      <div className="flex items-center justify-end gap-1 mt-2 text-[10px] text-text-muted">
+        <span>Less</span>
+        <div className="w-[11px] h-[11px] rounded-sm bg-bg-elevated" />
+        <div className="w-[11px] h-[11px] rounded-sm bg-emerald-900/60" />
+        <div className="w-[11px] h-[11px] rounded-sm bg-emerald-700/70" />
+        <div className="w-[11px] h-[11px] rounded-sm bg-emerald-500/80" />
+        <div className="w-[11px] h-[11px] rounded-sm bg-emerald-400" />
+        <span>More</span>
+      </div>
+    </div>
+  )
+}
+function formatDateKey(date: Date): string {
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  return `${year}-${month}-${day}`
+}
+function formatDate(dateStr: string): string {
+  const date = new Date(dateStr + 'T00:00:00')
+  return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
+}

package/apps/web/src/components/layout/index.ts ADDED Viewed

@@ -0,0 +1,7 @@
+export { Sidebar } from './side-bar'
+export { ThreadList } from './thread-list'
+export { SessionView } from './session-view'
+export { AnalyticsView } from './analytics-view'
+export { ReviewsView } from './reviews-view'
+export { VirtualizedMessageList } from './virtualized-message-list'
+export { AccountUsagePanel } from './account-usage-panel'