feat: add budget progress indicators to Projects and Dashboard

Project edit dialog includes budget hours and amount fields. Project
cards show progress bars with color-coded status. Dashboard displays
budget alerts section for projects exceeding 75% of budget.

src/views/Dashboard.vue

@@ -38,6 +38,41 @@
         </div>
       </div>
 
+      <!-- Goal Progress -->
+      <div v-if="goalProgress" class="mt-6">
+        <h2 class="text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-3">Goals</h2>
+        <div class="grid grid-cols-3 gap-4">
+          <div>
+            <div class="flex items-center justify-between mb-1">
+              <span class="text-[0.75rem] text-text-secondary">Today</span>
+              <span class="text-[0.75rem] font-mono text-accent-text">{{ formatGoalHours(goalProgress.today_seconds) }}</span>
+            </div>
+            <div class="w-full bg-bg-elevated rounded-full h-1.5">
+              <div
+                class="h-1.5 rounded-full bg-accent transition-all"
+                :style="{ width: Math.min(dailyPct, 100) + '%' }"
+              />
+            </div>
+          </div>
+          <div>
+            <div class="flex items-center justify-between mb-1">
+              <span class="text-[0.75rem] text-text-secondary">This Week</span>
+              <span class="text-[0.75rem] font-mono text-accent-text">{{ formatGoalHours(goalProgress.week_seconds) }}</span>
+            </div>
+            <div class="w-full bg-bg-elevated rounded-full h-1.5">
+              <div
+                class="h-1.5 rounded-full bg-accent transition-all"
+                :style="{ width: Math.min(weeklyPct, 100) + '%' }"
+              />
+            </div>
+          </div>
+          <div class="flex flex-col items-center justify-center">
+            <span class="text-[1.25rem] font-[family-name:var(--font-heading)] text-accent-text font-medium">{{ goalProgress.streak_days }}</span>
+            <span class="text-[0.6875rem] text-text-tertiary">day streak</span>
+          </div>
+        </div>
+      </div>
+
       <!-- Weekly chart -->
       <div class="mb-8">
         <h2 class="text-[1.25rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-4">Weekly Hours</h2>
@@ -74,6 +109,27 @@
           No entries yet. Start tracking your time.
         </p>
       </div>
+
+      <!-- Budget Alerts -->
+      <div v-if="budgetAlerts.length > 0" class="mt-6">
+        <h2 class="text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-3">Budget Alerts</h2>
+        <div class="space-y-2">
+          <div
+            v-for="alert in budgetAlerts"
+            :key="alert.id"
+            class="flex items-center justify-between py-2 px-3 rounded-lg"
+            :class="alert.pct > 90 ? 'bg-status-error/10' : 'bg-status-warning/10'"
+          >
+            <div class="flex items-center gap-2">
+              <div class="w-2 h-2 rounded-full" :style="{ backgroundColor: alert.color }" />
+              <span class="text-[0.75rem] text-text-primary">{{ alert.name }}</span>
+            </div>
+            <span class="text-[0.75rem] font-mono" :class="alert.pct > 90 ? 'text-status-error' : 'text-status-warning'">
+              {{ alert.pct.toFixed(0) }}%
+            </span>
+          </div>
+        </div>
+      </div>
     </template>
   </div>
 </template>
@@ -94,6 +150,7 @@ import {
 import { Clock } from 'lucide-vue-next'
 import { useEntriesStore } from '../stores/entries'
 import { useProjectsStore } from '../stores/projects'
+import { useSettingsStore } from '../stores/settings'
 import { formatDateLong } from '../utils/locale'
 import type { TimeEntry } from '../stores/entries'
 
@@ -102,6 +159,28 @@ ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
 
 const entriesStore = useEntriesStore()
 const projectsStore = useProjectsStore()
+const settingsStore = useSettingsStore()
+
+const goalProgress = ref<{ today_seconds: number; week_seconds: number; streak_days: number } | null>(null)
+
+async function loadGoalProgress() {
+  try {
+    goalProgress.value = await invoke('get_goal_progress')
+  } catch (e) {
+    // ignore
+  }
+}
+
+const dailyGoalHours = computed(() => parseFloat(settingsStore.settings.daily_goal_hours) || 8)
+const weeklyGoalHours = computed(() => parseFloat(settingsStore.settings.weekly_goal_hours) || 40)
+const dailyPct = computed(() => goalProgress.value ? (goalProgress.value.today_seconds / 3600 / dailyGoalHours.value) * 100 : 0)
+const weeklyPct = computed(() => goalProgress.value ? (goalProgress.value.week_seconds / 3600 / weeklyGoalHours.value) * 100 : 0)
+
+function formatGoalHours(seconds: number): string {
+  const h = Math.floor(seconds / 3600)
+  const m = Math.floor((seconds % 3600) / 60)
+  return `${h}h ${m}m`
+}
 
 const todayStats = ref<{ totalSeconds: number; byProject: unknown[] }>({ totalSeconds: 0, byProject: [] })
 const weekStats = ref<{ totalSeconds: number; byProject: unknown[] }>({ totalSeconds: 0, byProject: [] })
@@ -173,6 +252,34 @@ const activeProjectsCount = computed(() => {
   return projectsStore.projects.filter(p => !p.archived).length
 })
 
+// Budget status
+const budgetStatus = ref<Record<number, { used_hours: number; used_amount: number }>>({})
+
+async function loadBudgetStatus() {
+  for (const project of projectsStore.projects) {
+    if (project.id && project.budget_hours) {
+      try {
+        const status = await invoke<{ used_hours: number; used_amount: number }>('get_project_budget_status', { projectId: project.id })
+        budgetStatus.value[project.id] = status
+      } catch (e) {
+        // ignore
+      }
+    }
+  }
+}
+
+const budgetAlerts = computed(() => {
+  return projectsStore.projects
+    .filter(p => p.id && p.budget_hours)
+    .map(p => {
+      const used = budgetStatus.value[p.id!]?.used_hours || 0
+      const pct = (used / p.budget_hours!) * 100
+      return { id: p.id!, name: p.name, color: p.color, pct }
+    })
+    .filter(a => a.pct > 75)
+    .sort((a, b) => b.pct - a.pct)
+})
+
 // Chart data for weekly hours
 const chartData = computed(() => {
   const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
@@ -252,6 +359,9 @@ const chartOptions = {
 onMounted(async () => {
   await projectsStore.fetchProjects()
   await entriesStore.fetchEntries()
+  await settingsStore.fetchSettings()
+  await loadGoalProgress()
+  await loadBudgetStatus()
 
   try {
     todayStats.value = await invoke('get_reports', {

src/views/Projects.vue

@@ -47,6 +47,19 @@
                 </button>
               </div>
             </div>
+            <div v-if="project.budget_hours" class="mt-2">
+              <div class="flex items-center justify-between mb-1">
+                <span class="text-[0.625rem] text-text-tertiary">{{ getBudgetUsed(project).toFixed(0) }}h / {{ project.budget_hours }}h</span>
+                <span class="text-[0.625rem]" :class="getBudgetPct(project) > 90 ? 'text-status-error' : getBudgetPct(project) > 75 ? 'text-status-warning' : 'text-text-tertiary'">{{ getBudgetPct(project).toFixed(0) }}%</span>
+              </div>
+              <div class="w-full bg-bg-elevated rounded-full h-1">
+                <div
+                  class="h-1 rounded-full transition-all"
+                  :class="getBudgetPct(project) > 90 ? 'bg-status-error' : getBudgetPct(project) > 75 ? 'bg-status-warning' : 'bg-accent'"
+                  :style="{ width: Math.min(getBudgetPct(project), 100) + '%' }"
+                />
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -69,7 +82,7 @@
     <div
       v-if="showDialog"
       class="fixed inset-0 bg-black/70 backdrop-blur-[4px] flex items-center justify-center p-4 z-50"
-      @click.self="closeDialog"
+      @click.self="tryCloseDialog"
     >
       <div class="bg-bg-surface border border-border-subtle rounded-lg shadow-[0_1px_3px_rgba(0,0,0,0.3)] w-full max-w-md p-6 animate-modal-enter max-h-[calc(100vh-2rem)] overflow-y-auto">
         <h2 class="text-[1.125rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-4">
@@ -117,31 +130,97 @@
           <!-- Color -->
           <div>
             <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Color</label>
-            <div class="flex gap-2 mb-2">
+            <AppColorPicker
-              <button
+              v-model="formData.color"
-                v-for="c in colorPresets"
+              :presets="colorPresets"
-                :key="c"
-                @click.prevent="formData.color = c"
-                class="w-6 h-6 rounded-full border-2 transition-colors"
-                :class="formData.color === c ? 'border-text-primary' : 'border-transparent'"
-                :style="{ backgroundColor: c }"
             />
           </div>
-            <div class="flex items-center gap-3">
+
-              <input
+          <!-- Budget -->
-                v-model="formData.color"
+          <div class="grid grid-cols-2 gap-4">
-                type="color"
+            <div>
-                class="w-8 h-8 rounded-lg cursor-pointer border border-border-subtle"
+              <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Budget Hours</label>
+              <AppNumberInput
+                :model-value="formData.budget_hours ?? 0"
+                @update:model-value="formData.budget_hours = $event || null"
+                :min="0"
+                :step="1"
+                :precision="0"
+                placeholder="No limit"
               />
-              <input
+            </div>
-                v-model="formData.color"
+            <div>
-                type="text"
+              <label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Budget Amount</label>
-                class="flex-1 px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
+              <AppNumberInput
-                placeholder="#D97706"
+                :model-value="formData.budget_amount ?? 0"
+                @update:model-value="formData.budget_amount = $event || null"
+                :min="0"
+                :step="100"
+                :precision="2"
+                prefix="$"
+                placeholder="No limit"
               />
             </div>
           </div>
 
+          <!-- Tracked Apps -->
+          <div class="border border-border-subtle rounded-lg overflow-hidden">
+            <button
+              type="button"
+              @click="trackedAppsExpanded = !trackedAppsExpanded"
+              class="w-full flex items-center justify-between px-3 py-2.5 text-[0.8125rem] text-text-primary hover:bg-bg-elevated transition-colors"
+            >
+              <span>Tracked Apps ({{ allTrackedApps.length }})</span>
+              <ChevronDown
+                class="w-4 h-4 text-text-tertiary transition-transform duration-200"
+                :class="{ 'rotate-180': trackedAppsExpanded }"
+                :stroke-width="1.5"
+              />
+            </button>
+            <div v-if="trackedAppsExpanded" class="border-t border-border-subtle px-3 py-3 space-y-2.5">
+              <div v-if="allTrackedApps.length > 0" class="space-y-1.5">
+                <div
+                  v-for="app in allTrackedApps"
+                  :key="app.exe_path || app.exe_name"
+                  class="flex items-center justify-between gap-2 px-2.5 py-1.5 bg-bg-inset rounded-lg"
+                >
+                  <div class="flex items-center gap-2 flex-1 min-w-0">
+                    <img
+                      v-if="app.icon"
+                      :src="app.icon"
+                      class="w-4 h-4 shrink-0"
+                      alt=""
+                    />
+                    <div v-else class="w-4 h-4 shrink-0 rounded bg-bg-elevated" />
+                    <div class="flex-1 min-w-0">
+                      <p class="text-[0.75rem] text-text-primary truncate">{{ app.display_name || app.exe_name }}</p>
+                      <p class="text-[0.6875rem] text-text-tertiary truncate">{{ app.exe_name }}</p>
+                    </div>
+                  </div>
+                  <button
+                    type="button"
+                    @click="removeTrackedApp(app)"
+                    class="p-1 text-text-tertiary hover:text-status-error transition-colors shrink-0"
+                  >
+                    <X class="w-3.5 h-3.5" :stroke-width="1.5" />
+                  </button>
+                </div>
+              </div>
+              <p v-else class="text-[0.6875rem] text-text-tertiary">No tracked apps. Timer will run without app visibility checks.</p>
+              <div class="flex items-center gap-2 pt-1">
+                <RunningAppsPicker :exclude-paths="excludedPaths" @select="addTrackedAppFromPicker" />
+                <button
+                  type="button"
+                  @click="browseForApp"
+                  class="flex items-center gap-1.5 px-2.5 py-1.5 border border-border-subtle text-text-secondary text-[0.75rem] rounded-lg hover:bg-bg-elevated hover:text-text-primary transition-colors"
+                >
+                  <FolderOpen class="w-3.5 h-3.5" :stroke-width="1.5" />
+                  Browse...
+                </button>
+              </div>
+            </div>
+          </div>
+
           <!-- Buttons -->
           <div class="flex justify-end gap-3 pt-4">
             <button
@@ -189,18 +268,36 @@
         </div>
       </div>
     </div>
+
+    <AppDiscardDialog :show="showDiscardDialog" @cancel="cancelDiscard" @discard="confirmDiscard" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive, computed, onMounted } from 'vue'
-import { FolderKanban } from 'lucide-vue-next'
+import { FolderKanban, ChevronDown, X, FolderOpen } from 'lucide-vue-next'
+import { invoke } from '@tauri-apps/api/core'
+import { open as openFileDialog } from '@tauri-apps/plugin-dialog'
 import AppNumberInput from '../components/AppNumberInput.vue'
 import AppSelect from '../components/AppSelect.vue'
+import AppDiscardDialog from '../components/AppDiscardDialog.vue'
+import RunningAppsPicker from '../components/RunningAppsPicker.vue'
+import AppColorPicker from '../components/AppColorPicker.vue'
 import { useProjectsStore, type Project } from '../stores/projects'
 import { useClientsStore } from '../stores/clients'
 import { useSettingsStore } from '../stores/settings'
 import { formatCurrency, getCurrencySymbol } from '../utils/locale'
+import { useFormGuard } from '../utils/formGuard'
+
+interface TrackedApp {
+  id?: number
+  project_id: number
+  exe_name: string
+  exe_path?: string
+  display_name?: string
+  icon?: string
+}
+
 
 const colorPresets = ['#D97706', '#3B82F6', '#8B5CF6', '#EC4899', '#10B981', '#EF4444', '#06B6D4', '#6B7280']
 
@@ -208,21 +305,134 @@ const projectsStore = useProjectsStore()
 const clientsStore = useClientsStore()
 const settingsStore = useSettingsStore()
 
+const { showDiscardDialog, snapshot: snapshotForm, tryClose: tryCloseForm, confirmDiscard, cancelDiscard } = useFormGuard()
+
+function getFormData() {
+  return { name: formData.name, client_id: formData.client_id, hourly_rate: formData.hourly_rate, color: formData.color, archived: formData.archived, budget_hours: formData.budget_hours, budget_amount: formData.budget_amount }
+}
+
+function tryCloseDialog() {
+  tryCloseForm(getFormData(), closeDialog)
+}
+
 // Dialog state
 const showDialog = ref(false)
 const showDeleteDialog = ref(false)
 const editingProject = ref<Project | null>(null)
 const projectToDelete = ref<Project | null>(null)
 
+// Tracked apps state
+const trackedApps = ref<TrackedApp[]>([])
+const pendingAddApps = ref<TrackedApp[]>([])
+const pendingRemoveIds = ref<number[]>([])
+const trackedAppsExpanded = ref(false)
+
+const allTrackedApps = computed(() => {
+  return [
+    ...trackedApps.value.filter(a => !pendingRemoveIds.value.includes(a.id!)),
+    ...pendingAddApps.value,
+  ]
+})
+
+const excludedPaths = computed(() =>
+  allTrackedApps.value.map(a => (a.exe_path || '').toLowerCase())
+)
+
+async function loadTrackedApps(projectId: number) {
+  try {
+    trackedApps.value = await invoke<TrackedApp[]>('get_tracked_apps', { projectId })
+  } catch (e) {
+    console.error('Failed to load tracked apps:', e)
+    trackedApps.value = []
+  }
+}
+
+function addTrackedAppFromPicker(app: { exe_name: string; exe_path: string; display_name: string; icon?: string | null }) {
+  if (allTrackedApps.value.some(a => (a.exe_path || '').toLowerCase() === app.exe_path.toLowerCase())) return
+  pendingAddApps.value.push({
+    project_id: 0,
+    exe_name: app.exe_name,
+    exe_path: app.exe_path,
+    display_name: app.display_name,
+    icon: app.icon || undefined,
+  })
+}
+
+async function browseForApp() {
+  const result = await openFileDialog({
+    multiple: false,
+    filters: [{ name: 'Executables', extensions: ['exe', '*'] }],
+  })
+  if (!result) return
+  const filePath = typeof result === 'string' ? result : String(result)
+  const normalized = filePath.replace(/\//g, '\\')
+  const exeName = normalized.split('\\').pop() || normalized
+  const displayName = exeName.replace(/\.exe$/i, '')
+  if (allTrackedApps.value.some(a => (a.exe_path || '').toLowerCase() === normalized.toLowerCase())) return
+  pendingAddApps.value.push({
+    project_id: 0,
+    exe_name: exeName,
+    exe_path: normalized,
+    display_name: displayName,
+  })
+}
+
+function removeTrackedApp(app: TrackedApp) {
+  if (app.id) {
+    pendingRemoveIds.value.push(app.id)
+  } else {
+    pendingAddApps.value = pendingAddApps.value.filter(a => a !== app)
+  }
+}
+
+async function saveTrackedApps(projectId: number) {
+  for (const id of pendingRemoveIds.value) {
+    await invoke('remove_tracked_app', { id })
+  }
+  for (const app of pendingAddApps.value) {
+    await invoke('add_tracked_app', { app: { ...app, project_id: projectId } })
+  }
+  pendingAddApps.value = []
+  pendingRemoveIds.value = []
+}
+
 // Form data
 const formData = reactive<Project>({
   name: '',
   client_id: undefined,
   hourly_rate: 0,
   color: '#D97706',
-  archived: false
+  archived: false,
+  budget_hours: null,
+  budget_amount: null
 })
 
+// Budget status
+const budgetStatus = ref<Record<number, { used_hours: number }>>({})
+
+async function loadBudgetStatus() {
+  for (const project of projectsStore.projects) {
+    if (project.id && project.budget_hours) {
+      try {
+        const status = await invoke<{ used_hours: number; used_amount: number }>('get_project_budget_status', { projectId: project.id })
+        budgetStatus.value[project.id] = status
+      } catch (e) {
+        // ignore
+      }
+    }
+  }
+}
+
+function getBudgetUsed(project: any): number {
+  return budgetStatus.value[project.id]?.used_hours || 0
+}
+
+function getBudgetPct(project: any): number {
+  if (!project.budget_hours) return 0
+  const used = getBudgetUsed(project)
+  return (used / project.budget_hours) * 100
+}
+
 // Get client name by ID
 function getClientName(clientId?: number): string {
   if (!clientId) return 'No client'
@@ -238,11 +448,18 @@ function openCreateDialog() {
   formData.hourly_rate = parseFloat(settingsStore.settings.hourly_rate) || 0
   formData.color = '#F59E0B'
   formData.archived = false
+  formData.budget_hours = null
+  formData.budget_amount = null
+  trackedApps.value = []
+  pendingAddApps.value = []
+  pendingRemoveIds.value = []
+  trackedAppsExpanded.value = false
+  snapshotForm(getFormData())
   showDialog.value = true
 }
 
 // Open edit dialog
-function openEditDialog(project: Project) {
+async function openEditDialog(project: Project) {
   editingProject.value = project
   formData.id = project.id
   formData.name = project.name
@@ -250,6 +467,18 @@ function openEditDialog(project: Project) {
   formData.hourly_rate = project.hourly_rate
   formData.color = project.color
   formData.archived = project.archived
+  formData.budget_hours = project.budget_hours ?? null
+  formData.budget_amount = project.budget_amount ?? null
+  pendingAddApps.value = []
+  pendingRemoveIds.value = []
+  trackedAppsExpanded.value = false
+  if (project.id) {
+    await loadTrackedApps(project.id)
+    if (trackedApps.value.length > 0) trackedAppsExpanded.value = true
+  } else {
+    trackedApps.value = []
+  }
+  snapshotForm(getFormData())
   showDialog.value = true
 }
 
@@ -261,12 +490,15 @@ function closeDialog() {
 
 // Handle form submit
 async function handleSubmit() {
+  let projectId: number | undefined
   if (editingProject.value) {
-    // Update project
     await projectsStore.updateProject({ ...formData })
+    projectId = formData.id
   } else {
-    // Create project
+    projectId = (await projectsStore.createProject({ ...formData })) ?? undefined
-    await projectsStore.createProject({ ...formData })
+  }
+  if (projectId) {
+    await saveTrackedApps(projectId)
   }
   closeDialog()
 }
@@ -298,5 +530,6 @@ onMounted(async () => {
     clientsStore.fetchClients(),
     settingsStore.fetchSettings()
   ])
+  await loadBudgetStatus()
 })
 </script>