Simplify quick start and onboarding

Author: LyleMi

README.md

@@ -70,7 +70,24 @@ Requirements:
 - Node.js and npm
 - Wails CLI is optional
 
-Build the frontend and start local HTTP mode:
+Recommended local start:
+
+```powershell
+powershell -ExecutionPolicy Bypass -File .\scripts\start.ps1
+```
+
+The script installs frontend dependencies when needed, rebuilds the UI when
+source files change, starts AgentMeter, and opens:
+
+```text
+http://127.0.0.1:34115
+```
+
+On first launch, click **Index Now** in the app. AgentMeter defaults to
+`%USERPROFILE%\.codex`, so no source path setup is required unless your Codex
+sessions live somewhere else.
+
+Build the frontend and start local HTTP mode manually:
 
 ```powershell
 cd frontend

frontend/src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { message } from 'ant-design-vue'
 import {
@@ -11,6 +11,7 @@ import {
   ToolOutlined
 } from '@ant-design/icons-vue'
 import { api, type Settings } from './api'
+import { APP_DATA_CHANGED_EVENT, type AppDataChangeDetail } from './events'
 
 const route = useRoute()
 const router = useRouter()
@@ -40,6 +41,14 @@ async function loadSettings() {
   settings.value = await api.getSettings()
 }
 
+async function handleAppDataChanged(event: Event) {
+  const detail = (event as CustomEvent<AppDataChangeDetail>).detail
+  await loadSettings()
+  if (detail?.reason === 'index') {
+    refreshKey.value += 1
+  }
+}
+
 async function indexNow(rebuild = false) {
   indexing.value = true
   try {
@@ -58,7 +67,13 @@ function navigate(path: string) {
   router.push(path)
 }
 
-onMounted(loadSettings)
+onMounted(() => {
+  loadSettings()
+  window.addEventListener(APP_DATA_CHANGED_EVENT, handleAppDataChanged)
+})
+onBeforeUnmount(() => {
+  window.removeEventListener(APP_DATA_CHANGED_EVENT, handleAppDataChanged)
+})
 </script>
 
 <template>

frontend/src/events.ts

@@ -0,0 +1,11 @@
+export type AppDataChangeReason = 'settings' | 'index'
+
+export interface AppDataChangeDetail {
+  reason: AppDataChangeReason
+}
+
+export const APP_DATA_CHANGED_EVENT = 'agentmeter:data-changed'
+
+export function notifyAppDataChanged(reason: AppDataChangeReason) {
+  window.dispatchEvent(new CustomEvent<AppDataChangeDetail>(APP_DATA_CHANGED_EVENT, { detail: { reason } }))
+}

frontend/src/styles.css

@@ -645,6 +645,10 @@ body {
   border-radius: var(--am-radius);
 }
 
+.empty-callout-main {
+  min-width: 0;
+}
+
 .empty-callout-title {
   color: var(--am-text);
   font-size: 13px;
@@ -659,6 +663,36 @@ body {
   line-height: 18px;
 }
 
+.empty-callout-actions {
+  display: flex;
+  flex: 0 0 auto;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.empty-source-line {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  max-width: 720px;
+  gap: 8px;
+  height: 30px;
+  margin-top: 8px;
+  padding: 0 9px;
+  color: var(--am-text-soft);
+  background: #ffffff;
+  border: 1px solid #fde68a;
+  border-radius: var(--am-radius-sm);
+}
+
+.empty-source-path {
+  min-width: 0;
+  color: var(--am-text-soft);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
 .toolbar {
   display: flex;
   align-items: center;
@@ -1389,12 +1423,22 @@ body {
   }
 
   .content-grid,
+  .empty-callout,
   .split-row,
   .summary-panel,
   .session-summary {
     grid-template-columns: 1fr;
   }
 
+  .empty-callout {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .empty-callout-actions {
+    justify-content: flex-start;
+  }
+
   .info-block-grid,
   .index-result-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));

frontend/src/views/Overview.vue

@@ -2,11 +2,15 @@
 import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import * as echarts from 'echarts'
+import { message } from 'ant-design-vue'
 import {
   BarChartOutlined,
   ClockCircleOutlined,
   DollarCircleOutlined,
+  FolderOpenOutlined,
   FunctionOutlined,
+  PlayCircleOutlined,
+  SettingOutlined,
   TableOutlined,
   ToolOutlined
 } from '@ant-design/icons-vue'
@@ -19,17 +23,22 @@ import {
   shortPath,
   type ModelUsage,
   type Overview,
+  type Settings,
   type Session
 } from '../api'
 import { chartPalette, usageChartColors } from '../chartPalette'
+import { notifyAppDataChanged } from '../events'
 
 const router = useRouter()
 const loading = ref(true)
+const startupIndexing = ref(false)
 const overview = ref<Overview | null>(null)
+const settings = ref<Settings | null>(null)
 const chartEl = ref<HTMLDivElement | null>(null)
 let chart: echarts.ECharts | null = null
 
 const hasIndexedData = computed(() => (overview.value?.totalSessions || 0) > 0)
+const sourcePathDisplay = computed(() => settings.value?.sourcePath || settings.value?.defaultSourcePath || '')
 const hasDailyUsage = computed(() => (overview.value?.dailyUsage?.length || 0) > 0)
 const rankedModelUsage = computed(() =>
   [...(overview.value?.modelUsage || [])].sort((left, right) => right.totalTokens - left.totalTokens)
@@ -56,14 +65,30 @@ const recentColumns = [
 async function load() {
   loading.value = true
   try {
-    overview.value = await api.getOverview()
+    const [settingsValue, overviewValue] = await Promise.all([api.getSettings(), api.getOverview()])
+    settings.value = settingsValue
+    overview.value = overviewValue
   } finally {
     loading.value = false
   }
   await nextTick()
   renderChart()
 }
 
+async function indexFromOverview() {
+  startupIndexing.value = true
+  try {
+    const result = await api.indexNow(false)
+    message.success(`${result.indexed} indexed, ${result.skipped} skipped, ${result.failed} failed`)
+    await load()
+    notifyAppDataChanged('index')
+  } catch (error) {
+    message.error(error instanceof Error ? error.message : 'Index failed')
+  } finally {
+    startupIndexing.value = false
+  }
+}
+
 function renderChart() {
   const dailyUsage = overview.value?.dailyUsage || []
   if (!dailyUsage.length) {
@@ -230,13 +255,33 @@ onBeforeUnmount(() => {
       </section>
 
       <div v-if="!loading && !hasIndexedData" class="empty-callout overview-empty-callout">
-        <div>
+        <div class="empty-callout-main">
           <div class="empty-callout-title">No indexed sessions yet</div>
           <div class="empty-callout-text">
-            Configure a local source path, then run Index Now to populate usage, cost, and tool-call telemetry.
+            AgentMeter can scan the configured Codex source now and refresh this dashboard when indexing completes.
           </div>
+          <div class="empty-source-line">
+            <FolderOpenOutlined />
+            <span class="source-label">Source</span>
+            <a-typography-text class="empty-source-path" :ellipsis="{ tooltip: sourcePathDisplay }">
+              {{ sourcePathDisplay || 'Open Settings to choose a source path' }}
+            </a-typography-text>
+          </div>
+        </div>
+        <div class="empty-callout-actions">
+          <a-button type="primary" :loading="startupIndexing" :disabled="!sourcePathDisplay" @click="indexFromOverview">
+            <template #icon>
+              <PlayCircleOutlined />
+            </template>
+            Index Now
+          </a-button>
+          <a-button @click="$router.push('/settings')">
+            <template #icon>
+              <SettingOutlined />
+            </template>
+            Edit Source
+          </a-button>
         </div>
-        <a-button type="primary" @click="$router.push('/settings')">Open Settings</a-button>
       </div>
 
       <div class="content-grid overview-primary-grid">

frontend/src/views/Settings.vue

@@ -3,6 +3,7 @@ import { computed, onMounted, ref } from 'vue'
 import { message } from 'ant-design-vue'
 import { DatabaseOutlined, FolderOpenOutlined, ReloadOutlined } from '@ant-design/icons-vue'
 import { api, formatDateTime, formatDuration, formatNumber, type Settings } from '../api'
+import { notifyAppDataChanged } from '../events'
 
 const loading = ref(true)
 const saving = ref(false)
@@ -61,6 +62,7 @@ async function save() {
   saving.value = true
   try {
     settings.value = await api.saveSettings(sourcePath.value)
+    notifyAppDataChanged('settings')
     message.success('Settings saved')
   } catch (error) {
     message.error(error instanceof Error ? error.message : 'Save failed')
@@ -75,6 +77,7 @@ async function index(rebuild = false) {
     const result = await api.indexNow(rebuild)
     message.success(`${result.indexed} indexed, ${result.skipped} skipped, ${result.failed} failed`)
     await load()
+    notifyAppDataChanged('index')
   } catch (error) {
     message.error(error instanceof Error ? error.message : 'Index failed')
   } finally {

scripts/start.ps1

@@ -0,0 +1,81 @@
+param(
+    [int]$Port = 34115,
+    [switch]$SkipBrowser,
+    [switch]$ForceBuild
+)
+
+$ErrorActionPreference = "Stop"
+
+$repoRoot = Resolve-Path (Join-Path $PSScriptRoot "..")
+$frontendDir = Join-Path $repoRoot "frontend"
+$distIndex = Join-Path $frontendDir "dist\index.html"
+$nodeModules = Join-Path $frontendDir "node_modules"
+$nodeModulesLock = Join-Path $nodeModules ".package-lock.json"
+$packageLock = Join-Path $frontendDir "package-lock.json"
+
+function Test-Command($Name) {
+    return [bool](Get-Command $Name -ErrorAction SilentlyContinue)
+}
+
+function Get-NewestWriteTime($Path) {
+    if (-not (Test-Path $Path)) {
+        return [datetime]::MinValue
+    }
+    $items = Get-ChildItem -Path $Path -Recurse -File
+    if (-not $items) {
+        return [datetime]::MinValue
+    }
+    return ($items | Sort-Object LastWriteTime -Descending | Select-Object -First 1).LastWriteTime
+}
+
+if (-not (Test-Command "go")) {
+    throw "Go was not found on PATH."
+}
+if (-not (Test-Command "npm")) {
+    throw "npm was not found on PATH."
+}
+
+Push-Location $repoRoot
+try {
+    if ((-not (Test-Path $nodeModules)) -or (Test-Path $packageLock -and (-not (Test-Path $nodeModulesLock) -or (Get-Item $packageLock).LastWriteTime -gt (Get-Item $nodeModulesLock).LastWriteTime))) {
+        Write-Host "Installing frontend dependencies..."
+        Push-Location $frontendDir
+        try {
+            npm ci
+        } finally {
+            Pop-Location
+        }
+    }
+
+    $needsBuild = $ForceBuild -or -not (Test-Path $distIndex)
+    if (-not $needsBuild) {
+        $distTime = (Get-Item $distIndex).LastWriteTime
+        $srcTime = Get-NewestWriteTime (Join-Path $frontendDir "src")
+        $publicTime = Get-NewestWriteTime (Join-Path $frontendDir "public")
+        $packageTime = (Get-Item $packageLock).LastWriteTime
+        $needsBuild = $srcTime -gt $distTime -or $publicTime -gt $distTime -or $packageTime -gt $distTime
+    }
+
+    if ($needsBuild) {
+        Write-Host "Building frontend..."
+        Push-Location $frontendDir
+        try {
+            npm run build
+        } finally {
+            Pop-Location
+        }
+    }
+
+    $url = "http://127.0.0.1:$Port"
+    Write-Host "Starting AgentMeter at $url"
+    if (-not $SkipBrowser) {
+        Start-Job -ScriptBlock {
+            param($Target)
+            Start-Sleep -Seconds 2
+            Start-Process $Target
+        } -ArgumentList $url | Out-Null
+    }
+    go run . -http ":$Port"
+} finally {
+    Pop-Location
+}