diff --git a/README.md b/README.md
index f255f45..eb3f318 100644
--- a/README.md
+++ b/README.md
@@ -1,161 +1,42 @@
 # GitHub Dashboard
 
-A beautiful dashboard for monitoring GitHub workflows, repositories, and projects across your organization.
+Dashboard for monitoring GitHub Actions workflows, repositories, and pull requests across an organization.
 
-## ✨ Features
-
-- **🔄 Workflows**: Monitor GitHub Actions workflows across all repositories
-- **📁 Repositories**: Browse and categorize all organization repositories
-- **📋 Projects**: View GitHub Projects (project boards) with item counts and status
-- **🎨 Beautiful UI**: Clean, responsive design with status-based styling
-- **🔍 Smart Categorization**: Automatic repository categorization and tech stack detection
-
-## 🚀 Setup
-
-### 1. Install Dependencies
+## Setup
 
 ```bash
 npm install
 ```
 
-### 2. Environment Configuration
-
-Create a `.env` file in the root directory:
+Create a `.env` in the project root:
 
 ```env
 GITHUB_TOKEN=your_github_token_here
-GITHUB_OWNER=GithubOwner
+GITHUB_OWNER=YourGithubOrgOrUser
 ```
 
-### 3. GitHub Token Setup
-
-Create a GitHub Personal Access Token with the following scopes:
-
-**Required for Workflows & Repositories:**
-- `repo` - Access to repositories
-- `read:org` - Read organization data
+The token needs the `repo` and `read:org` scopes — create one at <https://github.com/settings/tokens>.
 
-**Additional for Projects:**
-- `read:project` - Access to GitHub Projects (project boards)
+Optional — override up to 10 brand colors with a JSON env var. Unset keys keep their defaults.
 
-**How to create the token:**
-
-1. Go to [GitHub Token Settings](https://github.com/settings/tokens)
-2. Click "Generate new token (classic)"
-3. Give it a descriptive name (e.g., "GitHub Dashboard")
-4. Select the required scopes listed above
-5. Click "Generate token"
-6. Copy the token and add it to your `.env` file
-
-### 4. Development Server
-
-Start the development server on `http://localhost:3000`:
-
-```bash
-npm run dev
+```env
+BRAND_COLORS={"primary":"#0066cc","primaryBright":"#cce0ff","success":"#00aa44"}
 ```
 
-## 📱 Pages
-
-### Workflows (`/`)
-- Shows GitHub Actions workflow runs from all repositories
-- Color-coded status indicators (success, failure, pending)
-- Repository context and branch information
-- Sorted by most recent runs
-
-### Repositories (`/repositories`)
-- Lists all organization repositories
-- Automatic categorization (Web App, API/Service, Library, etc.)
-- Tech stack detection from languages and topics
-- Statistics: stars, forks, issues, last updated
-- Repository size and creation date
-
-### Projects (`/projects`)
-- GitHub Projects (project boards) overview
-- Active vs closed project status
-- Item counts per project
-- Direct links to project boards
-
-**Note:** Projects page requires the `read:project` scope. Without it, you'll see a helpful error message with setup instructions.
-
-## 🔧 Configuration
-
-### Environment Variables
-
-| Variable | Description | Required |
-|----------|-------------|----------|
-| `GITHUB_TOKEN` | Personal Access Token | ✅ Yes |
-| `GITHUB_OWNER` | Organization/User name | ✅ Yes |
-
-### Token Scopes
-
-| Scope | Purpose | Required For |
-|-------|---------|--------------|
-| `repo` | Repository access | Workflows, Repositories |
-| `read:org` | Organization data | All features |
-| `read:project` | GitHub Projects | Projects page |
-
-## 🏗️ Production
+Allowed keys: `primary`, `primaryBright`, `primaryDark`, `secondary`, `secondaryBright`, `secondaryDark`, `tertiary`, `tertiaryBright`, `tertiaryDark`, `neutral`, `neutralBright`, `neutralDark`, `success`, `successBright`, `successDark`, `warning`, `warningBright`, `warningDark`, `error`, `errorBright`, `errorDark`, `info`, `infoBright`, `infoDark`. Values must be hex (`#abc` or `#aabbcc`).
 
-Build the application for production:
+## Run
 
 ```bash
-npm run build
+npm run dev       # http://localhost:3000
+npm run build     # production build
+npm run preview   # preview production build
 ```
 
-Preview the production build:
-
-```bash
-npm run preview
-```
-
-## 🎨 Architecture
-
-- **Nuxt 3** - Vue.js framework with SSR
-- **TypeScript** - Type safety throughout
-- **GitHub API** - REST API for workflows/repos, GraphQL for projects
-- **Responsive Design** - Mobile-friendly interface
-- **Error Handling** - Graceful fallbacks and helpful error messages
-
-## 🔍 API Endpoints
-
-- `/api/workflows` - Fetch workflow runs from all repositories
-- `/api/repositories` - Get categorized repository information  
-- `/api/projects` - GitHub Projects with GraphQL API
-
-## 🤝 Contributing
-
-1. Fork the repository
-2. Create a feature branch
-3. Make your changes
-4. Test thoroughly
-5. Submit a pull request
-
-## 📝 License
-
-This project is for use for everyone.
-
-# yarn
-yarn build
-
-# bun
-bun run build
-```
-
-Locally preview production build:
-
-```bash
-# npm
-npm run preview
-
-# pnpm
-pnpm preview
-
-# yarn
-yarn preview
-
-# bun
-bun run preview
-```
+## Pages
 
-Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+| Route             | Description                                  |
+| ----------------- | -------------------------------------------- |
+| `/`               | Workflow runs across all repos               |
+| `/repositories`   | Categorized repositories with tech stacks    |
+| `/pull-requests`  | PRs filtered by state, repo, or search       |
diff --git a/app.vue b/app.vue
index b6c23ee..5a7add3 100644
--- a/app.vue
+++ b/app.vue
@@ -1,6 +1,11 @@
 <script setup>
 // Import design tokens globally
 import '~/assets/styles/design-tokens.css'
+
+const brandThemeCss = useBrandThemeCss()
+if (brandThemeCss) {
+  useHead({ style: [{ children: brandThemeCss }] })
+}
 </script>
 
 <template>
diff --git a/assets/styles/design-tokens.css b/assets/styles/design-tokens.css
index e564068..44f6673 100644
--- a/assets/styles/design-tokens.css
+++ b/assets/styles/design-tokens.css
@@ -5,6 +5,14 @@
  * All components should reference these CSS variables instead of hardcoded values
  */
 
+/* Root font-size sets the rem unit for every token below — bump this to
+ * scale text AND spacing for distance-viewed dashboards. Browser default
+ * is 16px; 20px (1.25×) makes a wall-mounted Game-Boy-panel readable
+ * from across the room without changing any individual component. */
+html {
+  font-size: 26px;
+}
+
 :root {
   /* ========================================
      COLORS
@@ -82,6 +90,64 @@
   --color-border-hover: var(--color-gray-300);
   --color-border-focus: var(--color-primary-600);
 
+  /* ========================================
+     SEMANTIC COLOR LAYER
+     ========================================
+     Components MUST reference these named roles instead of raw scale tokens
+     or hex literals. The scale tokens above are palette primitives; the
+     names below assign roles. Retheme the app by editing this section. */
+
+  /* Identity — harmonized 10-color palette (teal/cream/amber/red) */
+  --color-primary:           #0a9396;    /* Dark Cyan */
+  --color-primary-bright:    #94d2bd;    /* Pearl Aqua */
+  --color-primary-dark:      #005f73;    /* Dark Teal */
+  --color-on-primary:        #ffffff;
+
+  --color-secondary:         #001219;    /* Ink Black */
+  --color-secondary-bright:  #e9d8a6;    /* Wheat */
+  --color-secondary-dark:    #001219;    /* Ink Black */
+  --color-on-secondary:      #ffffff;
+
+  --color-tertiary:          #ca6702;    /* Burnt Caramel — merged / done */
+  --color-tertiary-bright:   #e9d8a6;    /* Wheat */
+  --color-tertiary-dark:     #bb3e03;    /* Rusty Spice */
+  --color-on-tertiary:       #ffffff;
+
+  /* Neutral — grey scale (palette has no true grey; kept separate) */
+  --color-neutral:           var(--color-gray-500);
+  --color-neutral-bright:    var(--color-gray-100);
+  --color-neutral-dark:      var(--color-gray-800);
+  --color-on-neutral:        #ffffff;
+
+  /* Status */
+  --color-success:           #94d2bd;    /* Pearl Aqua */
+  --color-success-bright:    #e9d8a6;    /* Wheat */
+  --color-success-dark:      #005f73;    /* Dark Teal */
+  --color-on-success:        #001219;    /* Pearl Aqua needs dark text */
+
+  --color-warning:           #ee9b00;    /* Golden Orange */
+  --color-warning-bright:    #e9d8a6;    /* Wheat */
+  --color-warning-dark:      #ca6702;    /* Burnt Caramel */
+  --color-on-warning:        #001219;    /* Golden Orange — dark text */
+
+  --color-error:             #ae2012;    /* Oxidized Iron */
+  --color-error-bright:      #e9d8a6;    /* Wheat */
+  --color-error-dark:        #9b2226;    /* Brown Red */
+  --color-on-error:          #ffffff;
+
+  --color-info:              #005f73;    /* Dark Teal */
+  --color-info-bright:       #94d2bd;    /* Pearl Aqua */
+  --color-info-dark:         #001219;    /* Ink Black */
+  --color-on-info:           #ffffff;
+
+  /* Surface / text roles for inverse (dark glass) surfaces */
+  --color-surface-inverse:    rgba(15, 23, 42, 0.88);
+  --color-on-surface-inverse: #f8fafc;
+
+  /* Text-on-color helpers for dynamically computed contrast */
+  --color-text-on-light:     #000000;
+  --color-text-on-dark:      #ffffff;
+
   /* ========================================
      TYPOGRAPHY
      ======================================== */
diff --git a/composables/useBrandTheme.ts b/composables/useBrandTheme.ts
new file mode 100644
index 0000000..032f33d
--- /dev/null
+++ b/composables/useBrandTheme.ts
@@ -0,0 +1,65 @@
+const MAX_OVERRIDES = 10
+
+/**
+ * Semantic color roles that may be overridden via the BRAND_COLORS env var.
+ * Keys in the JSON are camelCase; CSS variables are kebab-case.
+ */
+const ALLOWED_ROLES: Record<string, string> = {
+  primary: '--color-primary',
+  primaryBright: '--color-primary-bright',
+  primaryDark: '--color-primary-dark',
+  secondary: '--color-secondary',
+  secondaryBright: '--color-secondary-bright',
+  secondaryDark: '--color-secondary-dark',
+  tertiary: '--color-tertiary',
+  tertiaryBright: '--color-tertiary-bright',
+  tertiaryDark: '--color-tertiary-dark',
+  neutral: '--color-neutral',
+  neutralBright: '--color-neutral-bright',
+  neutralDark: '--color-neutral-dark',
+  success: '--color-success',
+  successBright: '--color-success-bright',
+  successDark: '--color-success-dark',
+  warning: '--color-warning',
+  warningBright: '--color-warning-bright',
+  warningDark: '--color-warning-dark',
+  error: '--color-error',
+  errorBright: '--color-error-bright',
+  errorDark: '--color-error-dark',
+  info: '--color-info',
+  infoBright: '--color-info-bright',
+  infoDark: '--color-info-dark',
+}
+
+const HEX_RE = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/
+
+/**
+ * Reads BRAND_COLORS from runtime config (a JSON string), validates each entry
+ * against the allowlist and a hex-color regex, and returns a `:root { ... }`
+ * CSS snippet that overrides the design-token defaults. At most 10 overrides
+ * are honored. Unknown keys, malformed values, and parse errors are ignored.
+ */
+export function useBrandThemeCss(): string {
+  const { public: { brandColors } } = useRuntimeConfig()
+  const raw = (brandColors as string | undefined)?.trim()
+  if (!raw) return ''
+
+  let parsed: unknown
+  try {
+    parsed = JSON.parse(raw)
+  } catch {
+    return ''
+  }
+  if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) return ''
+
+  const declarations: string[] = []
+  for (const [key, value] of Object.entries(parsed as Record<string, unknown>)) {
+    if (declarations.length >= MAX_OVERRIDES) break
+    const cssVar = ALLOWED_ROLES[key]
+    if (!cssVar) continue
+    if (typeof value !== 'string' || !HEX_RE.test(value)) continue
+    declarations.push(`${cssVar}: ${value};`)
+  }
+  if (declarations.length === 0) return ''
+  return `:root { ${declarations.join(' ')} }`
+}
diff --git a/composables/useCachedFetch.ts b/composables/useCachedFetch.ts
deleted file mode 100644
index 90ffc51..0000000
--- a/composables/useCachedFetch.ts
+++ /dev/null
@@ -1,128 +0,0 @@
-interface CacheConfig {
-  key: string
-  staleTime?: number // milliseconds
-  refreshInterval?: number // milliseconds for auto-refresh
-}
-
-interface CacheMetadata {
-  timestamp: number
-  isRefreshing: boolean
-}
-
-/**
- * Enhanced fetch composable with client-side caching and background refresh
- * - Returns cached data immediately for instant page transitions
- * - Refreshes data in background without blocking UI
- * - Tracks cache freshness and loading states
- */
-export const useCachedFetch = <T>(
-  url: string,
-  config: CacheConfig,
-  fetchOptions: Record<string, any> = {}
-) => {
-  const { key, staleTime = 5 * 60 * 1000, refreshInterval } = config
-
-  // State keys
-  const cacheKey = `cache:${key}`
-  const metaKey = `cache-meta:${key}`
-
-  // Shared state across pages
-  const cachedData = useState<T | null>(cacheKey, () => null)
-  const cacheMeta = useState<CacheMetadata>(metaKey, () => ({
-    timestamp: 0,
-    isRefreshing: false,
-  }))
-
-  // Check if cache is still fresh
-  const isCacheStale = computed(() => {
-    if (!cacheMeta.value.timestamp) return true
-    return Date.now() - cacheMeta.value.timestamp > staleTime
-  })
-
-  // Fetch with caching logic
-  const { data, pending, error, refresh, status, execute } = useFetch<T>(url, {
-    ...fetchOptions,
-    server: false,
-    immediate: false, // Don't execute automatically
-
-    // Update cache and metadata on successful response
-    onResponse({ response }) {
-      if (response._data) {
-        cachedData.value = response._data
-        cacheMeta.value = {
-          timestamp: Date.now(),
-          isRefreshing: false,
-        }
-      }
-    },
-
-    onRequest() {
-      cacheMeta.value.isRefreshing = true
-    },
-
-    onRequestError() {
-      cacheMeta.value.isRefreshing = false
-    },
-
-    onResponseError() {
-      cacheMeta.value.isRefreshing = false
-    },
-  })
-
-  // Execute fetch immediately on mount if no cache or cache is stale
-  onMounted(async () => {
-    if (!cachedData.value || isCacheStale.value) {
-      await execute()
-    }
-  })
-
-  // Auto-refresh at interval if specified
-  let refreshTimer: NodeJS.Timeout | null = null
-  if (refreshInterval) {
-    onMounted(() => {
-      refreshTimer = setInterval(() => {
-        if (!document.hidden) {
-          execute()
-        }
-      }, refreshInterval)
-    })
-
-    onUnmounted(() => {
-      if (refreshTimer) {
-        clearInterval(refreshTimer)
-      }
-    })
-  }
-
-  // Refresh when page becomes visible (user returns to tab)
-  onMounted(() => {
-    const handleVisibilityChange = () => {
-      if (!document.hidden && isCacheStale.value) {
-        execute()
-      }
-    }
-
-    document.addEventListener('visibilitychange', handleVisibilityChange)
-
-    onUnmounted(() => {
-      document.removeEventListener('visibilitychange', handleVisibilityChange)
-    })
-  })
-
-  // Computed properties for loading states
-  const showSkeleton = computed(() => !cachedData.value && pending.value)
-  const showRefreshIndicator = computed(() => cacheMeta.value.isRefreshing && !!cachedData.value)
-
-  return {
-    data: computed(() => cachedData.value || data.value),
-    pending: computed(() => !cachedData.value && pending.value),
-    isRefreshing: computed(() => cacheMeta.value.isRefreshing && !!cachedData.value),
-    error,
-    refresh,
-    status,
-    lastUpdated: computed(() => cacheMeta.value.timestamp),
-    isCacheStale,
-    showSkeleton,
-    showRefreshIndicator,
-  }
-}
diff --git a/composables/useLoadingState.ts b/composables/useLoadingState.ts
deleted file mode 100644
index 366a3f5..0000000
--- a/composables/useLoadingState.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * Composable for managing loading states with skeleton screens
- * Provides utilities to determine when to show skeletons vs spinners
- */
-export const useLoadingState = () => {
-  /**
-   * Determine if we should show skeleton (for initial load with no cached data)
-   * vs showing nothing (when we have cached data and are refreshing in background)
-   */
-  const shouldShowSkeleton = (hasData: boolean, isLoading: boolean): boolean => {
-    return !hasData && isLoading
-  }
-
-  /**
-   * Determine if we should show a refresh indicator
-   * (small, non-blocking indicator that data is being updated)
-   */
-  const shouldShowRefreshIndicator = (hasData: boolean, isRefreshing: boolean): boolean => {
-    return hasData && isRefreshing
-  }
-
-  /**
-   * Determine the loading state type
-   */
-  const getLoadingStateType = (
-    hasData: boolean,
-    isLoading: boolean,
-    isRefreshing: boolean
-  ): 'initial' | 'refreshing' | 'ready' | 'error' => {
-    if (!hasData && isLoading) return 'initial'
-    if (hasData && isRefreshing) return 'refreshing'
-    if (hasData) return 'ready'
-    return 'ready'
-  }
-
-  return {
-    shouldShowSkeleton,
-    shouldShowRefreshIndicator,
-    getLoadingStateType,
-  }
-}
diff --git a/composables/useLogStream.ts b/composables/useLogStream.ts
new file mode 100644
index 0000000..0cb2069
--- /dev/null
+++ b/composables/useLogStream.ts
@@ -0,0 +1,42 @@
+export interface ServerLogEntry {
+  message: string
+  timestamp: number
+}
+
+/**
+ * Subscribes to the server-side log stream over SSE and exposes the most
+ * recent message reactively. Each new server log replaces the previous one.
+ * Client-only — no-ops during SSR.
+ */
+export function useLogStream() {
+  const latest = useState<ServerLogEntry | null>('serverLogLatest', () => null)
+
+  if (import.meta.server) return { latest }
+
+  let source: EventSource | null = null
+  let retryTimer: ReturnType<typeof setTimeout> | null = null
+
+  const open = () => {
+    source = new EventSource('/api/log-stream')
+    source.onmessage = (e) => {
+      try {
+        latest.value = JSON.parse(e.data) as ServerLogEntry
+      } catch {
+        // ignore malformed payloads
+      }
+    }
+    source.onerror = () => {
+      source?.close()
+      source = null
+      retryTimer = setTimeout(open, 2000)
+    }
+  }
+
+  onMounted(open)
+  onUnmounted(() => {
+    if (retryTimer) clearTimeout(retryTimer)
+    source?.close()
+  })
+
+  return { latest }
+}
diff --git a/composables/useProjectGrouping.ts b/composables/useProjectGrouping.ts
deleted file mode 100644
index afeae0e..0000000
--- a/composables/useProjectGrouping.ts
+++ /dev/null
@@ -1,225 +0,0 @@
-/**
- * Composable for handling GitHub project board item grouping based on view configurations
- */
-
-interface ProjectItem {
-  id: string
-  type: 'ISSUE' | 'PULL_REQUEST' | 'DRAFT_ISSUE'
-  number?: number
-  title: string
-  url: string
-  state: string
-  repository: string
-  repository_owner: string
-  assignees: Array<{
-    login: string
-    avatarUrl: string
-  }>
-  labels: Array<{
-    name: string
-    color: string
-  }>
-  created_at: string
-  updated_at: string
-  status?: string
-  priority?: string
-  custom_fields: Record<string, string>
-}
-
-interface ProjectView {
-  id: string
-  name: string
-  number: number
-  layout: 'TABLE_LAYOUT' | 'BOARD_LAYOUT' | 'ROADMAP_LAYOUT'
-  filter?: string
-  groupByFields?: string[]
-  sortByFields?: Array<{
-    fieldName: string
-    direction: 'ASC' | 'DESC'
-  }>
-  createdAt: string
-  updatedAt: string
-}
-
-interface GroupedItems {
-  name: string
-  items: ProjectItem[]
-  count: number
-}
-
-export const useProjectGrouping = () => {
-  /**
-   * Get the grouping value for an item based on the specified field
-   */
-  const getGroupValue = (item: ProjectItem, groupField: string): string => {
-    if (!groupField) return 'All Items'
-
-    // First, check for exact match in custom_fields
-    if (item.custom_fields?.[groupField]) {
-      return String(item.custom_fields[groupField])
-    }
-
-    // Then check for case-insensitive match in custom_fields
-    const customFieldEntry = Object.entries(item.custom_fields || {}).find(([key]) =>
-      key.toLowerCase() === groupField.toLowerCase()
-    )
-    if (customFieldEntry) {
-      return String(customFieldEntry[1])
-    }
-
-    // Check built-in GitHub fields
-    const normalizedField = groupField.toLowerCase()
-    switch (normalizedField) {
-      case 'status':
-        return item.status || item.custom_fields?.['Status'] || `No Status`
-      case 'state':
-        return item.state || `No State`
-      case 'type':
-        return item.type || `No Type`
-      case 'assignees':
-      case 'assignee':
-        return item.assignees && item.assignees.length > 0
-          ? item.assignees[0]?.login || 'Unassigned'
-          : 'Unassigned'
-      case 'repository':
-      case 'repo':
-        return item.repository || `No Repository`
-      case 'repository_owner':
-      case 'owner':
-        return item.repository_owner || `No Owner`
-      case 'priority':
-        return item.priority || item.custom_fields?.['Priority'] || `No Priority`
-      case 'labels':
-      case 'label':
-        return item.labels && item.labels.length > 0
-          ? item.labels[0]?.name || 'No Labels'
-          : 'No Labels'
-      case 'parent issue':
-      case 'parent_issue':
-        // Use actual Parent issue field from REST API
-        return item.custom_fields?.['Parent issue'] || 'No Parent Issue'
-      default:
-        // If no value found, return "No [FieldName]"
-        const fieldDisplayName = groupField.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase())
-        return `No ${fieldDisplayName}`
-    }
-  }
-
-  /**
-   * Group items based on view configuration or manual override
-   * @param items - The items to group
-   * @param view - The project view (optional, used for default grouping)
-   * @param overrideGroupField - Manual grouping field that overrides view's groupByFields (optional)
-   */
-  const groupItems = (items: ProjectItem[], view: ProjectView | null, overrideGroupField?: string): GroupedItems[] => {
-    // Determine which group field to use
-    let groupField: string | undefined = overrideGroupField
-
-    // If no override provided, use view's grouping
-    if (!groupField && view?.groupByFields && view.groupByFields.length > 0) {
-      groupField = view.groupByFields[0]
-    }
-
-    // If still no grouping field, return items in a single group
-    if (!groupField) {
-      return [{
-        name: 'All Items',
-        items: items,
-        count: items.length
-      }]
-    }
-
-    // Group items by the specified field
-    const groups = new Map<string, ProjectItem[]>()
-
-    for (const item of items) {
-      const groupValue = getGroupValue(item, groupField)
-      if (!groups.has(groupValue)) {
-        groups.set(groupValue, [])
-      }
-      groups.get(groupValue)!.push(item)
-    }
-
-    // Convert to array and sort groups
-    const groupsArray = Array.from(groups.entries()).map(([name, groupItems]) => ({
-      name,
-      items: groupItems,
-      count: groupItems.length
-    }))
-
-    // Sort groups by name, but put "No X" groups at the end
-    return groupsArray.sort((a, b) => {
-      const aIsEmpty = a.name.startsWith('No ')
-      const bIsEmpty = b.name.startsWith('No ')
-
-      if (aIsEmpty && !bIsEmpty) return 1
-      if (!aIsEmpty && bIsEmpty) return -1
-      return a.name.localeCompare(b.name)
-    })
-  }
-
-  /**
-   * Sort items within groups based on view configuration
-   */
-  const sortItemsInGroups = (groupedItems: GroupedItems[], view: ProjectView | null): GroupedItems[] => {
-    if (!view || !view.sortByFields || view.sortByFields.length === 0) {
-      // Default sort by updated date (newest first)
-      return groupedItems.map(group => ({
-        ...group,
-        items: [...group.items].sort((a, b) =>
-          new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime()
-        )
-      }))
-    }
-
-    return groupedItems.map(group => ({
-      ...group,
-      items: [...group.items].sort((a, b) => {
-        for (const sortField of view.sortByFields!) {
-          const aValue = getGroupValue(a, sortField.fieldName)
-          const bValue = getGroupValue(b, sortField.fieldName)
-
-          const comparison = aValue.localeCompare(bValue)
-          if (comparison !== 0) {
-            return sortField.direction === 'DESC' ? -comparison : comparison
-          }
-        }
-
-        // Fallback to updated date
-        return new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime()
-      })
-    }))
-  }
-
-  /**
-   * Get available grouping fields from items
-   */
-  const getAvailableGroupFields = (items: ProjectItem[]): string[] => {
-    const fields = new Set<string>()
-
-    // Add built-in fields
-    fields.add('Status')
-    fields.add('State')
-    fields.add('Type')
-    fields.add('Assignees')
-    fields.add('Repository')
-    fields.add('Priority')
-    fields.add('Labels')
-
-    // Add custom fields from items
-    for (const item of items) {
-      if (item.custom_fields) {
-        Object.keys(item.custom_fields).forEach(field => fields.add(field))
-      }
-    }
-
-    return Array.from(fields).sort()
-  }
-
-  return {
-    groupItems,
-    sortItemsInGroups,
-    getGroupValue,
-    getAvailableGroupFields
-  }
-}
\ No newline at end of file
diff --git a/composables/useResource.ts b/composables/useResource.ts
new file mode 100644
index 0000000..c252f56
--- /dev/null
+++ b/composables/useResource.ts
@@ -0,0 +1,111 @@
+import type { MaybeRefOrGetter } from 'vue'
+
+interface UseResourceOptions {
+  staleTime?: number
+  refreshInterval?: number
+}
+
+const DEFAULT_STALE_TIME = 5 * 60 * 1000
+
+/**
+ * Stale-while-revalidate resource binding backed by the Pinia cache store.
+ *
+ * Contract:
+ * - `data` is never cleared during a refresh — the previously loaded value
+ *   stays visible until a new response replaces it, so the UI never blanks.
+ * - State survives page reloads via localStorage (pinia-plugin-persistedstate).
+ * - Show a skeleton only when `!data && isRefreshing` (first ever load for
+ *   that key); otherwise keep showing the previous data while it refreshes.
+ *
+ * `key` and `url` may be reactive (ref / getter). When the key changes the
+ * binding rebinds to a different cache entry and triggers a fetch if needed.
+ */
+export function useResource<T>(
+  key: MaybeRefOrGetter<string | null>,
+  url: MaybeRefOrGetter<string | null>,
+  options: UseResourceOptions = {},
+) {
+  const { staleTime = DEFAULT_STALE_TIME, refreshInterval } = options
+  const cache = useResourceCache()
+
+  const currentKey = computed<string | null>(() => toValue(key) ?? null)
+  const currentUrl = computed<string | null>(() => toValue(url) ?? null)
+
+  // Ensure the cache slot exists for the active key (outside any computed).
+  watch(
+    currentKey,
+    (k) => { if (k) cache.ensure(k) },
+    { immediate: true },
+  )
+
+  const entry = computed(() => {
+    const k = currentKey.value
+    return k ? cache.entries[k] ?? null : null
+  })
+
+  const data = computed(() => (entry.value?.data ?? null) as T | null)
+  const error = computed(() => entry.value?.error ?? null)
+  const isRefreshing = computed(() => entry.value?.isRefreshing ?? false)
+  const lastUpdated = computed(() => entry.value?.lastUpdated ?? 0)
+  const isStale = computed(() => {
+    const ts = lastUpdated.value
+    if (!ts) return true
+    return Date.now() - ts > staleTime
+  })
+
+  async function refresh() {
+    const k = currentKey.value
+    const u = currentUrl.value
+    if (!k || !u) return
+    if (cache.entries[k]?.isRefreshing) return
+
+    cache.setRefreshing(k, true)
+    try {
+      const response = await $fetch<T>(u)
+      cache.setData(k, response)
+    } catch (err) {
+      cache.setError(k, err)
+    }
+  }
+
+  async function ensureLoaded() {
+    if (!currentKey.value || !currentUrl.value) return
+    if (!data.value || isStale.value) await refresh()
+  }
+
+  onMounted(ensureLoaded)
+
+  watch(currentKey, (next, prev) => {
+    if (next && next !== prev) ensureLoaded()
+  })
+
+  if (refreshInterval) {
+    let timer: ReturnType<typeof setInterval> | null = null
+    onMounted(() => {
+      timer = setInterval(() => {
+        if (!document.hidden) refresh()
+      }, refreshInterval)
+    })
+    onUnmounted(() => {
+      if (timer) clearInterval(timer)
+    })
+  }
+
+  onMounted(() => {
+    const onVisibility = () => {
+      if (!document.hidden && isStale.value) refresh()
+    }
+    document.addEventListener('visibilitychange', onVisibility)
+    onUnmounted(() => document.removeEventListener('visibilitychange', onVisibility))
+  })
+
+  return {
+    data,
+    error,
+    isRefreshing,
+    lastUpdated,
+    isStale,
+    refresh,
+    ensureLoaded,
+  }
+}
diff --git a/composables/useViewFiltering.ts b/composables/useViewFiltering.ts
deleted file mode 100644
index 8ab31c7..0000000
--- a/composables/useViewFiltering.ts
+++ /dev/null
@@ -1,199 +0,0 @@
-/**
- * Composable for filtering project items based on GitHub view filter strings
- * Note: This is a simplified implementation of GitHub's filter syntax
- */
-
-// ViewItem matches the ProjectItem format expected by the table
-export interface ViewItem {
-  id: string
-  type: 'ISSUE' | 'PULL_REQUEST' | 'DRAFT_ISSUE'
-  number?: number
-  title: string
-  url: string
-  state: string
-  repository: string
-  repository_owner: string
-  assignees: Array<{
-    login: string
-    avatarUrl: string
-  }>
-  labels: Array<{
-    name: string
-    color: string
-  }>
-  created_at: string
-  updated_at: string
-  status?: string
-  priority?: string
-  custom_fields: Record<string, unknown>
-}
-
-export const useViewFiltering = () => {
-  /**
-   * Parse a GitHub filter string into filter conditions
-   * Supports basic syntax: field:value, -field:value (negation), "quoted values"
-   */
-  function parseFilterString(filterString: string | null): Map<string, string[]> {
-    const filters = new Map<string, string[]>()
-
-    if (!filterString) return filters
-
-    // Match field:values patterns where values can be comma-separated or quoted
-    // Handles: field:value, field:"quoted value", field:val1,val2,val3, parent-issue:repo#123
-    const filterRegex = /(-)?(\w+(?:-\w+)*):(?:"([^"]+)"|([^\s]+))/g
-    let match
-
-    while ((match = filterRegex.exec(filterString)) !== null) {
-      const isNegation = match[1] === '-'
-      const field = match[2]
-      const value = match[3] || match[4]
-
-      const key = isNegation ? `-${field}` : field
-
-      if (!filters.has(key)) {
-        filters.set(key, [])
-      }
-
-      // Split comma-separated values
-      const values = value.split(',').map(v => v.trim().toLowerCase())
-      filters.get(key)!.push(...values)
-    }
-
-    return filters
-  }
-
-  /**
-   * Check if an item matches filter conditions
-   */
-  function matchesFilters(item: ViewItem, filters: Map<string, string[]>): boolean {
-    for (const [filterKey, filterValues] of filters.entries()) {
-      const isNegation = filterKey.startsWith('-')
-      const field = isNegation ? filterKey.substring(1) : filterKey
-
-      let itemValue: string | string[] | undefined
-
-      // Extract item value based on field
-      switch (field) {
-        case 'is':
-          // Special: is:open, is:closed, is:draft, is:issue, is:pr
-          if (filterValues.includes('open')) {
-            itemValue = item.state?.toLowerCase() === 'open' ? 'open' : undefined
-          } else if (filterValues.includes('closed')) {
-            itemValue = item.state?.toLowerCase() === 'closed' ? 'closed' : undefined
-          } else if (filterValues.includes('issue')) {
-            itemValue = item.type === 'ISSUE' ? 'issue' : undefined
-          } else if (filterValues.includes('pr')) {
-            itemValue = item.type === 'PULL_REQUEST' ? 'pr' : undefined
-          }
-          break
-
-        case 'has':
-          // has:field means field has a value
-          for (const fieldName of filterValues) {
-            const hasValue = item.custom_fields[fieldName] !== undefined && item.custom_fields[fieldName] !== null
-            if (!hasValue) return false
-          }
-          continue
-
-        case 'no':
-          // no:field means field has no value
-          for (const fieldName of filterValues) {
-            const hasValue = item.custom_fields[fieldName] !== undefined && item.custom_fields[fieldName] !== null
-            if (hasValue) return false
-          }
-          continue
-
-        case 'assignee':
-          itemValue = item.assignees.map(a => a.login.toLowerCase())
-          break
-
-        case 'label':
-          itemValue = item.labels.map(l => l.name.toLowerCase())
-          break
-
-        case 'repo':
-        case 'repository':
-          itemValue = item.repository.toLowerCase()
-          break
-
-        case 'state':
-          itemValue = item.state?.toLowerCase()
-          break
-
-        case 'status':
-          // Status is a custom field, not the built-in state
-          const statusValue = item.custom_fields['Status']
-          if (statusValue !== undefined && statusValue !== null) {
-            itemValue = String(statusValue).toLowerCase()
-          }
-          break
-
-        case 'parent-issue':
-          // Parent issue filter format: repo#number or just #number
-          // We need to match against the parent issue number stored in custom_fields
-          const parentIssueNumber = item.custom_fields['Parent issue number']
-
-          if (parentIssueNumber) {
-            // Try to match by issue number from the filter values
-            // Filter values look like: "oracommit/issues#416"
-            const hasParentMatch = filterValues.some(fv => {
-              const numberMatch = fv.match(/#(\d+)/)
-              if (numberMatch) {
-                // Check if parent issue number matches
-                const issueNumber = parseInt(numberMatch[1])
-                return parentIssueNumber === issueNumber
-              }
-              return false
-            })
-            if (!hasParentMatch) {
-              return false
-            }
-          } else {
-            return false
-          }
-          continue
-
-        default:
-          // Check custom fields
-          const customValue = item.custom_fields[field]
-          if (customValue !== undefined) {
-            itemValue = String(customValue).toLowerCase()
-          }
-          break
-      }
-
-      // Check if value matches
-      const hasMatch = Array.isArray(itemValue)
-        ? filterValues.some(fv => itemValue.includes(fv))
-        : filterValues.some(fv => itemValue === fv)
-
-      // Apply negation logic
-      if (isNegation) {
-        if (hasMatch) return false
-      } else {
-        if (!hasMatch) return false
-      }
-    }
-
-    return true
-  }
-
-  /**
-   * Filter items based on GitHub view filter string
-   */
-  function filterItems(items: ViewItem[], filterString: string | null): ViewItem[] {
-    if (!filterString) return items
-
-    const filters = parseFilterString(filterString)
-
-    if (filters.size === 0) return items
-
-    return items.filter(item => matchesFilters(item, filters))
-  }
-
-  return {
-    parseFilterString,
-    matchesFilters,
-    filterItems
-  }
-}
diff --git a/composables/useViewGrouping.ts b/composables/useViewGrouping.ts
deleted file mode 100644
index 81fcda9..0000000
--- a/composables/useViewGrouping.ts
+++ /dev/null
@@ -1,165 +0,0 @@
-/**
- * Composable for grouping project items based on view configuration
- */
-
-import type { ViewItem } from './useViewFiltering'
-import type { ProjectV2FieldConfiguration } from '../server/utils/github-graphql'
-
-export interface GroupedItems {
-  name: string
-  count: number
-  items: ViewItem[]
-  color?: string // Color from field options (e.g., Status options)
-  subgroups?: GroupedItems[] // For dual grouping (e.g., swimlanes with columns)
-}
-
-export const useViewGrouping = () => {
-  /**
-   * Get the value of a field from an item
-   */
-  function getFieldValue(item: ViewItem, fieldName: string): string {
-    // Try exact match in custom fields first
-    if (item.custom_fields[fieldName] !== undefined) {
-      const value = item.custom_fields[fieldName]
-
-      // Handle iteration fields (object with title)
-      if (typeof value === 'object' && value !== null && 'title' in value) {
-        return String((value as { title: string }).title)
-      }
-
-      return String(value)
-    }
-
-    // Try case-insensitive match in custom fields
-    const fieldNameLower = fieldName.toLowerCase()
-    for (const [key, value] of Object.entries(item.custom_fields)) {
-      if (key.toLowerCase() === fieldNameLower) {
-        // Handle iteration fields (object with title)
-        if (typeof value === 'object' && value !== null && 'title' in value) {
-          return String((value as { title: string }).title)
-        }
-        return String(value)
-      }
-    }
-
-    // Check built-in fields
-    // TODO this needs to be with unknown fields. We don"t know if these fields exists.
-    switch (fieldNameLower) {
-      case 'status':
-        return item.status || 'No Status'
-
-      case 'state':
-        return item.state || 'Unknown'
-
-      case 'type':
-        return item.type || 'Unknown'
-
-      case 'repository':
-      case 'repo':
-        return item.repository || 'No Repository'
-
-      case 'assignee':
-      case 'assignees':
-        return item.assignees?.length && item.assignees[0]?.login ? item.assignees[0].login : 'Unassigned'
-
-      default:
-        return 'No Value'
-    }
-  }
-
-  /**
-   * Group items by field
-   */
-  function groupItems(
-    items: ViewItem[],
-    fieldName: string | null | undefined,
-    fieldConfig?: ProjectV2FieldConfiguration | null
-  ): GroupedItems[] {
-    if (!fieldName) {
-      // No grouping - return single group with all items
-      return [{
-        name: 'All Items',
-        count: items.length,
-        items
-      }]
-    }
-
-    // Build color map and order index from field options (for SingleSelectField)
-    const colorMap = new Map<string, string>()
-    const orderMap = new Map<string, number>()
-
-    if (fieldConfig?.options) {
-      fieldConfig.options.forEach((option, index) => {
-        colorMap.set(option.name, option.color)
-        orderMap.set(option.name, index)
-      })
-    }
-
-    // Group items by field value
-    const groups = new Map<string, ViewItem[]>()
-
-    for (const item of items) {
-      const groupValue = getFieldValue(item, fieldName)
-
-      if (!groups.has(groupValue)) {
-        groups.set(groupValue, [])
-      }
-
-      groups.get(groupValue)!.push(item)
-    }
-
-    // Convert to array and sort
-    const hasFieldOptions = orderMap.size > 0
-    const groupedArray = Array.from(groups.entries())
-      .map(([name, items]) => ({
-        name,
-        count: items.length,
-        items,
-        color: colorMap.get(name),
-        order: orderMap.get(name) ?? Number.MAX_SAFE_INTEGER // Unknown values go last
-      }))
-      .sort((a, b) => {
-        // Empty/no value groups come FIRST
-        const aIsEmpty = a.name === 'No Value' || a.name === 'No Status' || a.name === 'Unknown' || a.name === 'Unassigned'
-        const bIsEmpty = b.name === 'No Value' || b.name === 'No Status' || b.name === 'Unknown' || b.name === 'Unassigned'
-
-        if (aIsEmpty && !bIsEmpty) return -1
-        if (!aIsEmpty && bIsEmpty) return 1
-
-        // If field has options, sort by field option order
-        if (hasFieldOptions) {
-          return a.order - b.order
-        }
-
-        // Otherwise sort alphabetically
-        return a.name.localeCompare(b.name)
-      })
-    return groupedArray
-  }
-
-  /**
-   * Group items by two fields (for swimlanes + columns)
-   */
-  function groupItemsDual(
-    items: ViewItem[],
-    primaryFieldName: string | null | undefined,
-    primaryFieldConfig: ProjectV2FieldConfiguration | null | undefined,
-    secondaryFieldName: string | null | undefined,
-    secondaryFieldConfig: ProjectV2FieldConfiguration | null | undefined
-  ): GroupedItems[] {
-    // First group by primary field (swimlanes)
-    const primaryGroups = groupItems(items, primaryFieldName, primaryFieldConfig)
-
-    // Then group each swimlane by secondary field (columns)
-    return primaryGroups.map(swimlane => ({
-      ...swimlane,
-      subgroups: groupItems(swimlane.items, secondaryFieldName, secondaryFieldConfig)
-    }))
-  }
-
-  return {
-    getFieldValue,
-    groupItems,
-    groupItemsDual
-  }
-}
diff --git a/composables/useViewSorting.ts b/composables/useViewSorting.ts
deleted file mode 100644
index ba26d5f..0000000
--- a/composables/useViewSorting.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-/**
- * Composable for sorting project items based on view configuration
- */
-
-import type { ViewItem } from './useViewFiltering'
-import { useViewGrouping } from './useViewGrouping'
-
-export interface SortConfig {
-  field: string
-  direction: 'ASC' | 'DESC'
-}
-
-export const useViewSorting = () => {
-  const { getFieldValue } = useViewGrouping()
-
-  /**
-   * Compare two values for sorting
-   */
-  function compareValues(a: string | number, b: string | number, direction: 'ASC' | 'DESC'): number {
-    // Handle numbers
-    if (typeof a === 'number' && typeof b === 'number') {
-      return direction === 'ASC' ? a - b : b - a
-    }
-
-    // Handle dates (ISO string format)
-    const aDate = Date.parse(String(a))
-    const bDate = Date.parse(String(b))
-    if (!isNaN(aDate) && !isNaN(bDate)) {
-      return direction === 'ASC' ? aDate - bDate : bDate - aDate
-    }
-
-    // Handle strings (case-insensitive)
-    const aStr = String(a).toLowerCase()
-    const bStr = String(b).toLowerCase()
-
-    if (direction === 'ASC') {
-      return aStr.localeCompare(bStr)
-    } else {
-      return bStr.localeCompare(aStr)
-    }
-  }
-
-  /**
-   * Sort items by field and direction
-   */
-  function sortItems(items: ViewItem[], sortConfig: SortConfig | null): ViewItem[] {
-    if (!sortConfig) return items
-
-    const sorted = [...items]
-
-    sorted.sort((a, b) => {
-      const aValue = getFieldValue(a, sortConfig.field)
-      const bValue = getFieldValue(b, sortConfig.field)
-
-      // Handle empty values - push to end
-      if (!aValue && !bValue) return 0
-      if (!aValue) return 1
-      if (!bValue) return -1
-
-      return compareValues(aValue, bValue, sortConfig.direction)
-    })
-
-    return sorted
-  }
-
-  /**
-   * Sort items by multiple sort configs (priority order)
-   */
-  function sortItemsMultiple(items: ViewItem[], sortConfigs: SortConfig[]): ViewItem[] {
-    if (sortConfigs.length === 0) return items
-
-    const sorted = [...items]
-
-    sorted.sort((a, b) => {
-      // Try each sort config in order until we get a non-zero result
-      for (const config of sortConfigs) {
-        const aValue = getFieldValue(a, config.field)
-        const bValue = getFieldValue(b, config.field)
-
-        if (!aValue && !bValue) continue
-        if (!aValue) return 1
-        if (!bValue) return -1
-
-        const result = compareValues(aValue, bValue, config.direction)
-        if (result !== 0) return result
-      }
-
-      return 0
-    })
-
-    return sorted
-  }
-
-  return {
-    compareValues,
-    sortItems,
-    sortItemsMultiple
-  }
-}
diff --git a/features/atoms/Button.vue b/features/atoms/Button.vue
index 288f7ea..386138e 100644
--- a/features/atoms/Button.vue
+++ b/features/atoms/Button.vue
@@ -100,7 +100,7 @@ const isDisabled = computed(() => props.disabled || props.loading)
 }
 
 .button:focus-visible {
-  outline: 2px solid var(--color-primary-500);
+  outline: 2px solid var(--color-primary);
   outline-offset: 2px;
 }
 
@@ -122,12 +122,12 @@ const isDisabled = computed(() => props.disabled || props.loading)
 
 /* Variant styles */
 .button--primary {
-  background: var(--color-primary-600);
-  color: var(--color-text-inverse);
+  background: var(--color-primary);
+  color: var(--color-on-primary);
 }
 
 .button--primary:hover:not(:disabled) {
-  background: var(--color-primary-700);
+  background: var(--color-primary-dark);
   transform: translateY(-1px);
   box-shadow: var(--shadow-md);
 }
@@ -137,24 +137,24 @@ const isDisabled = computed(() => props.disabled || props.loading)
 }
 
 .button--secondary {
-  background: var(--color-gray-600);
-  color: var(--color-text-inverse);
+  background: var(--color-secondary);
+  color: var(--color-on-secondary);
 }
 
 .button--secondary:hover:not(:disabled) {
-  background: var(--color-gray-700);
+  background: var(--color-secondary-dark);
   transform: translateY(-1px);
   box-shadow: var(--shadow-md);
 }
 
 .button--outline {
   background: transparent;
-  color: var(--color-primary-600);
-  border: var(--border-width-thin) solid var(--color-primary-600);
+  color: var(--color-primary);
+  border: var(--border-width-thin) solid var(--color-primary);
 }
 
 .button--outline:hover:not(:disabled) {
-  background: var(--color-primary-50);
+  background: var(--color-primary-bright);
   transform: translateY(-1px);
 }
 
@@ -164,17 +164,17 @@ const isDisabled = computed(() => props.disabled || props.loading)
 }
 
 .button--ghost:hover:not(:disabled) {
-  background: var(--color-gray-100);
+  background: var(--color-neutral-bright);
   color: var(--color-text-primary);
 }
 
 .button--danger {
-  background: var(--color-danger-600);
-  color: var(--color-text-inverse);
+  background: var(--color-error);
+  color: var(--color-on-error);
 }
 
 .button--danger:hover:not(:disabled) {
-  background: var(--color-danger-700);
+  background: var(--color-error-dark);
   transform: translateY(-1px);
   box-shadow: var(--shadow-md);
 }
diff --git a/features/atoms/Icon.vue b/features/atoms/Icon.vue
index bbbc680..6b9adf6 100644
--- a/features/atoms/Icon.vue
+++ b/features/atoms/Icon.vue
@@ -50,14 +50,13 @@ const iconClasses = computed(() => {
 </script>
 
 <template>
-  <span
+  <NuxtIcon
+    :name="icon"
     :class="iconClasses"
     :aria-label="ariaLabel || undefined"
     :aria-hidden="decorative ? 'true' : undefined"
     role="img"
-  >
-    {{ icon }}
-  </span>
+  />
 </template>
 
 <style scoped>
@@ -121,19 +120,19 @@ const iconClasses = computed(() => {
 }
 
 .icon--success {
-  color: var(--color-success-700);
+  color: var(--color-success-dark);
 }
 
 .icon--warning {
-  color: var(--color-warning-700);
+  color: var(--color-warning-dark);
 }
 
 .icon--danger {
-  color: var(--color-danger-700);
+  color: var(--color-error-dark);
 }
 
 .icon--info {
-  color: var(--color-info-700);
+  color: var(--color-info-dark);
 }
 
 .icon--inherit {
diff --git a/features/atoms/Input.vue b/features/atoms/Input.vue
index ff95aec..46c9eaf 100644
--- a/features/atoms/Input.vue
+++ b/features/atoms/Input.vue
@@ -221,8 +221,8 @@ const handleBlur = (event: FocusEvent) => {
 }
 
 .input-wrapper:focus-within {
-  border-color: var(--color-primary-500);
-  box-shadow: 0 0 0 3px var(--color-primary-100);
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px var(--color-primary-bright);
 }
 
 .input-wrapper--sm {
@@ -238,25 +238,25 @@ const handleBlur = (event: FocusEvent) => {
 }
 
 .input-wrapper--error {
-  border-color: var(--color-danger-500);
+  border-color: var(--color-error);
 }
 
 .input-wrapper--error:focus-within {
-  border-color: var(--color-danger-500);
-  box-shadow: 0 0 0 3px var(--color-danger-100);
+  border-color: var(--color-error);
+  box-shadow: 0 0 0 3px var(--color-error-bright);
 }
 
 .input-wrapper--success {
-  border-color: var(--color-success-500);
+  border-color: var(--color-success);
 }
 
 .input-wrapper--success:focus-within {
-  border-color: var(--color-success-500);
-  box-shadow: 0 0 0 3px var(--color-success-100);
+  border-color: var(--color-success);
+  box-shadow: 0 0 0 3px var(--color-success-bright);
 }
 
 .input-wrapper--disabled {
-  background: var(--color-gray-100);
+  background: var(--color-neutral-bright);
   opacity: 0.6;
 }
 
@@ -314,8 +314,8 @@ const handleBlur = (event: FocusEvent) => {
 
 .input:focus {
   outline: none;
-  border-color: var(--color-primary-500);
-  box-shadow: 0 0 0 3px var(--color-primary-100);
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px var(--color-primary-bright);
 }
 
 .input::placeholder {
@@ -340,25 +340,25 @@ const handleBlur = (event: FocusEvent) => {
 
 /* State variants */
 .input--error {
-  border-color: var(--color-danger-500);
+  border-color: var(--color-error);
 }
 
 .input--error:focus {
-  border-color: var(--color-danger-500);
-  box-shadow: 0 0 0 3px var(--color-danger-100);
+  border-color: var(--color-error);
+  box-shadow: 0 0 0 3px var(--color-error-bright);
 }
 
 .input--success {
-  border-color: var(--color-success-500);
+  border-color: var(--color-success);
 }
 
 .input--success:focus {
-  border-color: var(--color-success-500);
-  box-shadow: 0 0 0 3px var(--color-success-100);
+  border-color: var(--color-success);
+  box-shadow: 0 0 0 3px var(--color-success-bright);
 }
 
 .input--disabled {
-  background: var(--color-gray-100);
+  background: var(--color-neutral-bright);
   color: var(--color-text-muted);
   cursor: not-allowed;
   opacity: 0.6;
diff --git a/features/atoms/LabelBadge.vue b/features/atoms/LabelBadge.vue
index 0c969b4..6714fea 100644
--- a/features/atoms/LabelBadge.vue
+++ b/features/atoms/LabelBadge.vue
@@ -51,7 +51,7 @@ const textColor = computed(() => {
   const brightness = (r * 299 + g * 587 + b * 114) / 1000
 
   // Return black for light backgrounds, white for dark
-  return brightness > 128 ? '#000000' : '#FFFFFF'
+  return brightness > 128 ? 'var(--color-text-on-light)' : 'var(--color-text-on-dark)'
 })
 </script>
 
@@ -85,7 +85,7 @@ const textColor = computed(() => {
 /* Size variants */
 .label-badge--xs {
   padding: 2px 6px;
-  font-size: 10px;
+  font-size: var(--font-size-2xs);
   border-radius: var(--radius-md);
   font-weight: var(--font-weight-semibold);
 }
diff --git a/features/atoms/Link.vue b/features/atoms/Link.vue
index e703ca6..fd9b8e5 100644
--- a/features/atoms/Link.vue
+++ b/features/atoms/Link.vue
@@ -98,7 +98,7 @@ const linkRel = computed(() => props.external ? 'noopener noreferrer' : undefine
 
 <style scoped>
 .link {
-  color: var(--color-blue-600);
+  color: var(--color-primary);
   text-decoration: none;
   cursor: pointer;
   transition: all var(--transition-base);
@@ -108,7 +108,7 @@ const linkRel = computed(() => props.external ? 'noopener noreferrer' : undefine
 }
 
 .link:focus-visible {
-  outline: 2px solid var(--color-primary-500);
+  outline: 2px solid var(--color-primary);
   outline-offset: 2px;
   border-radius: var(--radius-sm);
 }
@@ -138,11 +138,11 @@ const linkRel = computed(() => props.external ? 'noopener noreferrer' : undefine
 
 /* Variant styles */
 .link--primary {
-  color: var(--color-blue-600);
+  color: var(--color-primary);
 }
 
 .link--primary:hover:not(.link--disabled) {
-  color: var(--color-blue-700);
+  color: var(--color-primary-dark);
 }
 
 .link--secondary {
@@ -170,11 +170,11 @@ const linkRel = computed(() => props.external ? 'noopener noreferrer' : undefine
 }
 
 .link--danger {
-  color: var(--color-danger-600);
+  color: var(--color-error);
 }
 
 .link--danger:hover:not(.link--disabled) {
-  color: var(--color-danger-700);
+  color: var(--color-error-dark);
 }
 
 /* Underline styles */
diff --git a/features/atoms/LoadingSpinner.vue b/features/atoms/LoadingSpinner.vue
index 50df283..0b66844 100644
--- a/features/atoms/LoadingSpinner.vue
+++ b/features/atoms/LoadingSpinner.vue
@@ -70,36 +70,36 @@ const spinnerClasses = computed(() => {
 .loading-spinner--sm {
   width: 20px;
   height: 20px;
-  border: 2px solid var(--color-gray-200);
+  border: 2px solid var(--color-border-default);
   border-top: 2px solid transparent;
 }
 
 .loading-spinner--md {
   width: 32px;
   height: 32px;
-  border: 3px solid var(--color-gray-200);
+  border: 3px solid var(--color-border-default);
   border-top: 3px solid transparent;
 }
 
 .loading-spinner--lg {
   width: 40px;
   height: 40px;
-  border: 4px solid var(--color-gray-200);
+  border: 4px solid var(--color-border-default);
   border-top: 4px solid transparent;
 }
 
 /* Color variants */
 .loading-spinner--primary.loading-spinner--sm {
-  border-top-color: var(--color-gray-900);
+  border-top-color: var(--color-text-primary);
 }
 
 .loading-spinner--primary.loading-spinner--md,
 .loading-spinner--primary.loading-spinner--lg {
-  border-top-color: var(--color-blue-500);
+  border-top-color: var(--color-primary);
 }
 
 .loading-spinner--secondary {
-  border-top-color: var(--color-gray-500);
+  border-top-color: var(--color-text-secondary);
 }
 
 @keyframes spin {
@@ -109,7 +109,7 @@ const spinnerClasses = computed(() => {
 }
 
 .loading-message {
-  color: var(--color-gray-500);
+  color: var(--color-text-secondary);
   font-size: var(--font-size-sm);
 }
 
diff --git a/features/atoms/MultiSelect.vue b/features/atoms/MultiSelect.vue
index 0f3c06e..ce08db8 100644
--- a/features/atoms/MultiSelect.vue
+++ b/features/atoms/MultiSelect.vue
@@ -234,15 +234,15 @@ onUnmounted(() => {
 }
 
 .multi-select-option:hover {
-  background-color: var(--color-gray-50);
+  background-color: var(--color-bg-secondary);
 }
 
 .multi-select-option--selected {
-  background-color: var(--color-primary-50);
+  background-color: var(--color-primary-bright);
 }
 
 .multi-select-option--selected:hover {
-  background-color: var(--color-primary-100);
+  background-color: var(--color-primary-bright);
 }
 
 .multi-select-checkbox {
@@ -266,8 +266,8 @@ onUnmounted(() => {
 }
 
 .multi-select-option--selected .multi-select-option__checkmark {
-  background: var(--color-primary-500);
-  border-color: var(--color-primary-500);
+  background: var(--color-primary);
+  border-color: var(--color-primary);
 }
 
 .multi-select-option__label {
diff --git a/features/atoms/Select.vue b/features/atoms/Select.vue
index d078944..c8067c1 100644
--- a/features/atoms/Select.vue
+++ b/features/atoms/Select.vue
@@ -164,8 +164,8 @@ const handleBlur = (event: FocusEvent) => {
 
 .select:focus {
   outline: none;
-  border-color: var(--color-primary-500);
-  box-shadow: 0 0 0 3px var(--color-primary-100);
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px var(--color-primary-bright);
 }
 
 /* Size variants */
@@ -186,25 +186,25 @@ const handleBlur = (event: FocusEvent) => {
 
 /* State variants */
 .select--error {
-  border-color: var(--color-danger-500);
+  border-color: var(--color-error);
 }
 
 .select--error:focus {
-  border-color: var(--color-danger-500);
-  box-shadow: 0 0 0 3px var(--color-danger-100);
+  border-color: var(--color-error);
+  box-shadow: 0 0 0 3px var(--color-error-bright);
 }
 
 .select--success {
-  border-color: var(--color-success-500);
+  border-color: var(--color-success);
 }
 
 .select--success:focus {
-  border-color: var(--color-success-500);
-  box-shadow: 0 0 0 3px var(--color-success-100);
+  border-color: var(--color-success);
+  box-shadow: 0 0 0 3px var(--color-success-bright);
 }
 
 .select--disabled {
-  background: var(--color-gray-100);
+  background: var(--color-neutral-bright);
   color: var(--color-text-muted);
   cursor: not-allowed;
   opacity: 0.6;
diff --git a/features/atoms/Tabs.vue b/features/atoms/Tabs.vue
deleted file mode 100644
index 6f8fd49..0000000
--- a/features/atoms/Tabs.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<script setup lang="ts">
-export interface Tab {
-  id: string
-  label: string
-  icon?: string
-}
-
-interface Props {
-  tabs: Tab[]
-  modelValue: string
-}
-
-interface Emits {
-  (e: 'update:modelValue', value: string): void
-}
-
-const props = defineProps<Props>()
-const emit = defineEmits<Emits>()
-
-const selectTab = (tabId: string) => {
-  emit('update:modelValue', tabId)
-}
-</script>
-
-<template>
-  <div class="tabs">
-    <div class="tabs__list" role="tablist">
-      <button
-        v-for="tab in tabs"
-        :key="tab.id"
-        :class="['tabs__tab', { 'tabs__tab--active': modelValue === tab.id }]"
-        role="tab"
-        :aria-selected="modelValue === tab.id"
-        :tabindex="modelValue === tab.id ? 0 : -1"
-        @click="selectTab(tab.id)"
-      >
-        <Icon v-if="tab.icon" :icon="tab.icon" size="sm" decorative class="tabs__icon" />
-        <Text variant="secondary" size="base" weight="medium">
-          {{ tab.label }}
-        </Text>
-      </button>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.tabs {
-  border-bottom: 2px solid var(--color-border-default);
-  margin-bottom: var(--spacing-4);
-}
-
-.tabs__list {
-  display: flex;
-  gap: var(--spacing-2);
-  overflow-x: auto;
-  overflow-y: hidden;
-  -webkit-overflow-scrolling: touch;
-  scrollbar-width: thin;
-}
-
-.tabs__tab {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-2);
-  padding: var(--spacing-3) var(--spacing-4);
-  background: none;
-  border: none;
-  border-bottom: 3px solid transparent;
-  cursor: pointer;
-  transition: all var(--transition-base);
-  white-space: nowrap;
-  flex-shrink: 0;
-  position: relative;
-  top: 2px; /* Align with border */
-}
-
-.tabs__tab:hover {
-  background: var(--color-gray-100);
-  border-radius: var(--radius-md) var(--radius-md) 0 0;
-}
-
-.tabs__tab:focus-visible {
-  outline: 2px solid var(--color-primary-500);
-  outline-offset: 2px;
-}
-
-.tabs__tab--active {
-  border-bottom-color: var(--color-primary-500);
-}
-
-.tabs__tab--active :deep(span) {
-  color: var(--color-primary-700);
-  font-weight: 600;
-}
-
-.tabs__icon {
-  flex-shrink: 0;
-}
-
-@media (max-width: 768px) {
-  .tabs__tab {
-    padding: var(--spacing-2) var(--spacing-3);
-  }
-}
-</style>
diff --git a/features/atoms/Tag.vue b/features/atoms/Tag.vue
index 6bbcdee..ece85d9 100644
--- a/features/atoms/Tag.vue
+++ b/features/atoms/Tag.vue
@@ -123,68 +123,73 @@ const handleRemove = (e: Event) => {
 
 /* Variant styles */
 .tag--default {
-  background: var(--color-gray-100);
-  color: var(--color-gray-700);
-  border-color: var(--color-gray-200);
+  background: var(--color-neutral-bright);
+  color: var(--color-text-tertiary);
+  border-color: var(--color-border-default);
 }
 
 .tag--default.tag--clickable:hover {
-  background: var(--color-gray-200);
+  background: var(--color-border-default);
   transform: translateY(-1px);
 }
 
 .tag--primary {
-  background: var(--color-primary-100);
-  color: var(--color-primary-800);
-  border-color: var(--color-primary-200);
+  background: var(--color-primary-bright);
+  color: var(--color-primary-dark);
+  border-color: var(--color-primary);
 }
 
 .tag--primary.tag--clickable:hover {
-  background: var(--color-primary-200);
+  background: var(--color-primary);
+  color: var(--color-on-primary);
   transform: translateY(-1px);
 }
 
 .tag--success {
-  background: var(--color-success-50);
-  color: var(--color-success-700);
-  border-color: var(--color-success-200);
+  background: var(--color-success-bright);
+  color: var(--color-success-dark);
+  border-color: var(--color-success);
 }
 
 .tag--success.tag--clickable:hover {
-  background: var(--color-success-100);
+  background: var(--color-success);
+  color: var(--color-on-success);
   transform: translateY(-1px);
 }
 
 .tag--warning {
-  background: var(--color-warning-50);
-  color: var(--color-warning-700);
-  border-color: var(--color-warning-200);
+  background: var(--color-warning-bright);
+  color: var(--color-warning-dark);
+  border-color: var(--color-warning);
 }
 
 .tag--warning.tag--clickable:hover {
-  background: var(--color-warning-100);
+  background: var(--color-warning);
+  color: var(--color-on-warning);
   transform: translateY(-1px);
 }
 
 .tag--danger {
-  background: var(--color-danger-50);
-  color: var(--color-danger-700);
-  border-color: var(--color-danger-200);
+  background: var(--color-error-bright);
+  color: var(--color-error-dark);
+  border-color: var(--color-error);
 }
 
 .tag--danger.tag--clickable:hover {
-  background: var(--color-danger-100);
+  background: var(--color-error);
+  color: var(--color-on-error);
   transform: translateY(-1px);
 }
 
 .tag--info {
-  background: var(--color-info-50);
-  color: var(--color-info-700);
-  border-color: var(--color-info-200);
+  background: var(--color-info-bright);
+  color: var(--color-info-dark);
+  border-color: var(--color-info);
 }
 
 .tag--info.tag--clickable:hover {
-  background: var(--color-info-100);
+  background: var(--color-info);
+  color: var(--color-on-info);
   transform: translateY(-1px);
 }
 
@@ -213,6 +218,6 @@ const handleRemove = (e: Event) => {
 
 .tag__remove:hover {
   opacity: 1;
-  background: rgba(0, 0, 0, 0.1);
+  background: var(--color-bg-overlay-dark);
 }
 </style>
diff --git a/features/atoms/Text.vue b/features/atoms/Text.vue
index 98486ff..5c02a21 100644
--- a/features/atoms/Text.vue
+++ b/features/atoms/Text.vue
@@ -108,19 +108,19 @@ const textClasses = computed(() => {
 }
 
 .text--success {
-  color: var(--color-success-700);
+  color: var(--color-success-dark);
 }
 
 .text--warning {
-  color: var(--color-warning-700);
+  color: var(--color-warning-dark);
 }
 
 .text--danger {
-  color: var(--color-danger-700);
+  color: var(--color-error-dark);
 }
 
 .text--info {
-  color: var(--color-info-700);
+  color: var(--color-info-dark);
 }
 
 /* Size variants */
diff --git a/features/atoms/UserAvatar.vue b/features/atoms/UserAvatar.vue
index 840fa77..0e8db48 100644
--- a/features/atoms/UserAvatar.vue
+++ b/features/atoms/UserAvatar.vue
@@ -72,7 +72,7 @@ const avatarClasses = computed(() => {
 
 .user-avatar--clickable:hover {
   transform: scale(1.1);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--shadow-md);
 }
 
 /* Size variants */
diff --git a/features/atoms/item-card/ItemCard.vue b/features/atoms/item-card/ItemCard.vue
deleted file mode 100644
index 19333a7..0000000
--- a/features/atoms/item-card/ItemCard.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<script setup lang="ts">
-import type { ViewItem } from '../../../composables/useViewFiltering'
-
-interface Props {
-  item: ViewItem
-}
-
-defineProps<Props>()
-
-// Get item state color
-const getStateColor = (item: ViewItem): string => {
-  const state = item.state?.toUpperCase()
-  if (state === 'CLOSED' || state === 'MERGED') return 'var(--color-gray-500)'
-  if (state === 'OPEN') return 'var(--color-success-500)'
-  return 'var(--color-gray-400)'
-}
-</script>
-
-<template>
-  <a
-    :href="item.url"
-    target="_blank"
-    rel="noopener noreferrer"
-    class="item-card"
-    :style="{ borderLeftColor: getStateColor(item) }"
-  >
-    <Text variant="primary" size="sm" weight="medium" class="item-card__title">
-      {{ item.title || 'Untitled' }}
-    </Text>
-
-    <Text variant="tertiary" size="xs" class="item-card__repository">
-      {{ item.repository || 'Draft' }}
-    </Text>
-
-    <!-- Labels -->
-    <div v-if="item.labels && item.labels.length > 0" class="item-card__labels">
-      <LabelBadge
-        v-for="label in item.labels.slice(0, 3)"
-        :key="label.name"
-        :name="label.name"
-        :color="label.color"
-        size="xs"
-      />
-    </div>
-
-    <!-- Assignees -->
-    <div v-if="item.assignees && item.assignees.length > 0" class="item-card__assignees">
-      <UserAvatar
-        v-for="assignee in item.assignees.slice(0, 3)"
-        :key="assignee.login"
-        :src="assignee.avatarUrl"
-        :alt="assignee.login"
-        :tooltip="assignee.login"
-        size="xs"
-      />
-    </div>
-  </a>
-</template>
-
-<style scoped>
-.item-card {
-  background: var(--color-white);
-  border-radius: var(--radius-md);
-  padding: var(--spacing-3);
-  border-left: 3px solid var(--color-gray-300);
-  box-shadow: var(--shadow-sm);
-  transition: all var(--transition-base);
-  cursor: pointer;
-  text-decoration: none;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-2);
-}
-
-.item-card:hover {
-  box-shadow: var(--shadow-md);
-  transform: translateY(-2px);
-}
-
-.item-card__title {
-  margin: 0;
-  line-height: 1.4;
-  word-wrap: break-word;
-  word-break: break-word;
-  overflow-wrap: break-word;
-  hyphens: auto;
-}
-
-.item-card__repository {
-  margin: 0;
-}
-
-.item-card__labels {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--spacing-1);
-}
-
-.item-card__assignees {
-  display: flex;
-  gap: var(--spacing-1);
-  margin-top: var(--spacing-1);
-}
-</style>
diff --git a/features/atoms/kanban-column/KanbanColumn.vue b/features/atoms/kanban-column/KanbanColumn.vue
deleted file mode 100644
index 31eba7f..0000000
--- a/features/atoms/kanban-column/KanbanColumn.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<script setup lang="ts">
-interface Props {
-  title: string
-  count: number
-  color?: string
-}
-
-defineProps<Props>()
-
-// Map GitHub color names to CSS colors
-const mapGitHubColor = (color: string | undefined): string => {
-  if (!color) return 'var(--color-gray-500)'
-
-  const colorMap: Record<string, string> = {
-    GRAY: '#6e7781',
-    BLUE: '#0969da',
-    GREEN: '#1a7f37',
-    YELLOW: '#d29922',
-    ORANGE: '#bc4c00',
-    RED: '#cf222e',
-    PINK: '#bf3989',
-    PURPLE: '#8250df'
-  }
-
-  return colorMap[color.toUpperCase()] || 'var(--color-gray-500)'
-}
-</script>
-
-<template>
-  <div class="kanban-column">
-    <div
-      class="kanban-column__header"
-      :style="{ borderLeftColor: mapGitHubColor(color) }"
-    >
-      <div class="kanban-column__title-wrapper">
-        <span
-          class="kanban-column__indicator"
-          :style="{ backgroundColor: mapGitHubColor(color) }"
-        />
-        <Header :level="5" size="xs" variant="primary">
-          {{ title }}
-        </Header>
-      </div>
-      <span class="kanban-column__count">
-        {{ count }}
-      </span>
-    </div>
-
-    <div class="kanban-column__items">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.kanban-column {
-  flex: 0 0 280px;
-  min-width: 280px;
-  max-width: 280px;
-  display: flex;
-  flex-direction: column;
-}
-
-.kanban-column__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--spacing-2);
-  border-left: 3px solid var(--color-gray-300);
-  background: var(--color-gray-50);
-  border-radius: var(--radius-sm);
-  margin-bottom: var(--spacing-2);
-}
-
-.kanban-column__title-wrapper {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-2);
-}
-
-.kanban-column__indicator {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--color-gray-400);
-}
-
-.kanban-column__count {
-  font-size: var(--font-size-xs);
-  color: var(--color-text-tertiary);
-  background: var(--color-gray-200);
-  padding: 2px 8px;
-  border-radius: var(--radius-full);
-  font-weight: 600;
-}
-
-.kanban-column__items {
-  padding: var(--spacing-3);
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-3);
-  min-height: 100px;
-}
-</style>
diff --git a/features/atoms/swimlane-header/SwimlaneHeader.vue b/features/atoms/swimlane-header/SwimlaneHeader.vue
deleted file mode 100644
index ae50dca..0000000
--- a/features/atoms/swimlane-header/SwimlaneHeader.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<script setup lang="ts">
-interface Props {
-  title: string
-  count: number
-  isCollapsed: boolean
-}
-
-defineProps<Props>()
-
-const emit = defineEmits<{
-  toggle: []
-}>()
-</script>
-
-<template>
-  <div
-    class="swimlane-header"
-    :class="{ 'swimlane-header--collapsed': isCollapsed }"
-    @click="emit('toggle')"
-  >
-    <div class="swimlane-header__content">
-      <span class="swimlane-header__toggle">
-        {{ isCollapsed ? '▶' : '▼' }}
-      </span>
-      <Header :level="3" size="md" variant="primary">
-        {{ title }}
-      </Header>
-    </div>
-    <span class="swimlane-header__count">
-      {{ count }}
-    </span>
-  </div>
-</template>
-
-<style scoped>
-.swimlane-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--spacing-4);
-  background: var(--color-white);
-  border-bottom: 2px solid var(--color-border-default);
-  cursor: pointer;
-  transition: background-color var(--transition-base);
-  user-select: none;
-}
-
-.swimlane-header:hover {
-  background: var(--color-gray-50);
-}
-
-.swimlane-header--collapsed {
-  background: var(--color-gray-50);
-}
-
-.swimlane-header__content {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-3);
-  flex: 1;
-}
-
-.swimlane-header__toggle {
-  font-size: var(--font-size-md);
-  color: var(--color-text-secondary);
-  flex-shrink: 0;
-  width: 20px;
-  display: inline-block;
-  transition: transform var(--transition-base);
-}
-
-.swimlane-header__count {
-  font-size: var(--font-size-sm);
-  color: var(--color-text-tertiary);
-  background: var(--color-gray-200);
-  padding: 4px 12px;
-  border-radius: var(--radius-full);
-  font-weight: 600;
-}
-</style>
diff --git a/features/molecules/base-card/BaseCard.vue b/features/molecules/base-card/BaseCard.vue
index 699ba5f..bfb517e 100644
--- a/features/molecules/base-card/BaseCard.vue
+++ b/features/molecules/base-card/BaseCard.vue
@@ -117,7 +117,7 @@ const cardStyles = computed(() => ({
 .base-card__bottom {
   margin-top: var(--spacing-4);
   padding-top: var(--spacing-4);
-  border-top: 1px solid var(--color-gray-100);
+  border-top: 1px solid var(--color-border-default);
 }
 
 /* Responsive adjustments */
diff --git a/features/molecules/board-layout/BoardLayout.vue b/features/molecules/board-layout/BoardLayout.vue
deleted file mode 100644
index 9aefb06..0000000
--- a/features/molecules/board-layout/BoardLayout.vue
+++ /dev/null
@@ -1,304 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-import SwimlaneHeader from '../../atoms/swimlane-header/SwimlaneHeader.vue'
-import KanbanColumn from '../../atoms/kanban-column/KanbanColumn.vue'
-import ItemCard from '../../atoms/item-card/ItemCard.vue'
-import type { GroupedItems } from '../../../composables/useViewGrouping'
-
-interface Props {
-  groups: GroupedItems[]
-}
-
-const props = defineProps<Props>()
-
-// Track which swimlanes are collapsed (by swimlane name)
-const collapsedSwimlanes = ref<Set<string>>(new Set())
-
-// Toggle swimlane collapsed state
-const toggleSwimlane = (swimlaneName: string) => {
-  if (collapsedSwimlanes.value.has(swimlaneName)) {
-    collapsedSwimlanes.value.delete(swimlaneName)
-  } else {
-    collapsedSwimlanes.value.add(swimlaneName)
-  }
-  // Trigger reactivity
-  collapsedSwimlanes.value = new Set(collapsedSwimlanes.value)
-}
-
-// Check if swimlane is collapsed
-const isSwimlaneCollapsed = (swimlaneName: string) => {
-  return collapsedSwimlanes.value.has(swimlaneName)
-}
-
-// Compute all unique swimlanes across all columns
-const allSwimlanes = computed(() => {
-  if (props.groups.length === 0 || !props.groups[0].subgroups) {
-    return []
-  }
-
-  // Collect all unique swimlane names from all columns
-  const swimlaneMap = new Map<string, GroupedItems>()
-
-  for (const column of props.groups) {
-    if (!column.subgroups) continue
-
-    for (const swimlane of column.subgroups) {
-      if (!swimlaneMap.has(swimlane.name)) {
-        swimlaneMap.set(swimlane.name, swimlane)
-      }
-    }
-  }
-
-  // Sort swimlanes - numeric prefixes first (01, 02, etc), then alphabetically
-  return Array.from(swimlaneMap.values()).sort((a, b) => {
-    // Extract leading numbers if they exist
-    const aMatch = a.name.match(/^(\d+)/)
-    const bMatch = b.name.match(/^(\d+)/)
-
-    // Both have numeric prefixes
-    if (aMatch && bMatch) {
-      const aNum = parseInt(aMatch[1])
-      const bNum = parseInt(bMatch[1])
-      if (aNum !== bNum) {
-        return aNum - bNum
-      }
-      // If numbers are equal, fall through to string comparison
-    }
-
-    // Only a has numeric prefix - a comes first
-    if (aMatch && !bMatch) return -1
-
-    // Only b has numeric prefix - b comes first
-    if (!aMatch && bMatch) return 1
-
-    // Neither has numeric prefix, or numbers were equal - alphabetical sort
-    return a.name.localeCompare(b.name)
-  })
-})
-
-// Map GitHub color names to CSS colors (for non-swimlane layout)
-const mapGitHubColor = (color: string | undefined): string => {
-  if (!color) return 'var(--color-gray-500)'
-
-  const colorMap: Record<string, string> = {
-    GRAY: '#6e7781',
-    BLUE: '#0969da',
-    GREEN: '#1a7f37',
-    YELLOW: '#d29922',
-    ORANGE: '#bc4c00',
-    RED: '#cf222e',
-    PINK: '#bf3989',
-    PURPLE: '#8250df'
-  }
-
-  return colorMap[color.toUpperCase()] || 'var(--color-gray-500)'
-}
-</script>
-
-<template>
-  <div class="board-layout">
-    <!-- Swimlane layout (columns with subgroups) -->
-    <template v-if="allSwimlanes.length > 0">
-      <div class="board-layout__swimlanes">
-        <!-- Iterate through all unique swimlanes -->
-        <div
-          v-for="swimlane in allSwimlanes"
-          :key="swimlane.name"
-          class="board-layout__swimlane"
-        >
-          <!-- Full-width parent header -->
-          <SwimlaneHeader
-            :title="swimlane.name"
-            :count="swimlane.count"
-            :is-collapsed="isSwimlaneCollapsed(swimlane.name)"
-            @toggle="toggleSwimlane(swimlane.name)"
-          />
-
-          <!-- Kanban columns for this swimlane -->
-          <div
-            v-if="!isSwimlaneCollapsed(swimlane.name)"
-            class="board-layout__columns"
-          >
-            <KanbanColumn
-              v-for="column in groups"
-              :key="column.name"
-              :title="column.name"
-              :count="column.subgroups?.find(s => s.name === swimlane.name)?.count || 0"
-              :color="column.color"
-            >
-              <ItemCard
-                v-for="item in column.subgroups?.find(s => s.name === swimlane.name)?.items || []"
-                :key="item.id"
-                :item="item"
-              />
-            </KanbanColumn>
-          </div>
-        </div>
-      </div>
-    </template>
-
-    <!-- Regular column layout (no swimlanes) -->
-    <div v-else class="board-layout__columns board-layout__columns--no-swimlanes">
-      <div v-for="group in groups" :key="group.name" class="board-layout__column-standalone">
-        <!-- Column Header -->
-        <div
-          class="board-layout__column-header"
-          :style="{ borderLeftColor: mapGitHubColor(group.color) }"
-        >
-          <div class="board-layout__column-title-wrapper">
-            <span
-              class="board-layout__column-indicator"
-              :style="{ backgroundColor: mapGitHubColor(group.color) }"
-            />
-            <Header :level="4" size="sm" variant="primary" class="board-layout__column-title">
-              {{ group.name }}
-            </Header>
-          </div>
-          <span class="board-layout__column-count">
-            {{ group.count }}
-          </span>
-        </div>
-
-        <!-- Column Items -->
-        <div class="board-layout__column-items">
-          <ItemCard
-            v-for="item in group.items"
-            :key="item.id"
-            :item="item"
-          />
-
-          <!-- Empty state -->
-          <div v-if="group.items.length === 0" class="board-layout__empty">
-            <Text variant="tertiary" size="sm">No items</Text>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.board-layout {
-  width: 100%;
-  overflow-x: auto;
-  overflow-y: hidden;
-  -webkit-overflow-scrolling: touch;
-}
-
-/* Swimlane layout */
-.board-layout__swimlanes {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-6);
-}
-
-.board-layout__swimlane {
-  border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-lg);
-  background: var(--color-white);
-  overflow: hidden;
-}
-
-.board-layout__columns {
-  display: flex;
-  gap: var(--spacing-3);
-  padding: var(--spacing-4);
-  overflow-x: auto;
-  overflow-y: hidden;
-  -webkit-overflow-scrolling: touch;
-  scrollbar-width: thin;
-  scrollbar-color: var(--color-gray-300) transparent;
-}
-
-.board-layout__columns::-webkit-scrollbar {
-  height: 8px;
-}
-
-.board-layout__columns::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.board-layout__columns::-webkit-scrollbar-thumb {
-  background: var(--color-gray-300);
-  border-radius: var(--radius-full);
-}
-
-.board-layout__columns::-webkit-scrollbar-thumb:hover {
-  background: var(--color-gray-400);
-}
-
-.board-layout__columns--no-swimlanes {
-  gap: var(--spacing-4);
-  padding: 0;
-  padding-bottom: var(--spacing-4);
-}
-
-/* Standalone columns (no swimlanes) */
-.board-layout__column-standalone {
-  flex: 0 0 320px;
-  min-width: 320px;
-  max-width: 320px;
-  background: var(--color-slate-100);
-  border-radius: var(--radius-lg);
-  display: flex;
-  flex-direction: column;
-}
-
-.board-layout__column-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--spacing-3) var(--spacing-4);
-  border-bottom: 1px solid var(--color-border-default);
-  background: var(--color-white);
-  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
-  border-left: 3px solid var(--color-gray-300);
-}
-
-.board-layout__column-title-wrapper {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-2);
-}
-
-.board-layout__column-indicator {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--color-gray-400);
-}
-
-.board-layout__column-title {
-  margin: 0;
-}
-
-.board-layout__column-count {
-  font-size: var(--font-size-xs);
-  color: var(--color-text-tertiary);
-  background: var(--color-gray-200);
-  padding: 2px 8px;
-  border-radius: var(--radius-full);
-  font-weight: 600;
-}
-
-.board-layout__column-items {
-  padding: var(--spacing-3);
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-3);
-  min-height: 100px;
-}
-
-.board-layout__empty {
-  text-align: center;
-  padding: var(--spacing-8) var(--spacing-4);
-}
-
-@media (max-width: 768px) {
-  .board-layout__column-standalone {
-    flex: 0 0 280px;
-    min-width: 280px;
-    max-width: 280px;
-  }
-}
-</style>
diff --git a/features/molecules/branch-indicator/BranchIndicator.vue b/features/molecules/branch-indicator/BranchIndicator.vue
index 377e9fb..294293b 100644
--- a/features/molecules/branch-indicator/BranchIndicator.vue
+++ b/features/molecules/branch-indicator/BranchIndicator.vue
@@ -56,21 +56,21 @@ const containerClasses = computed(() => {
 }
 
 .branch-indicator__branch {
-  background: var(--color-gray-100);
+  background: var(--color-neutral-bright);
   padding: var(--spacing-0-5) var(--spacing-1-5);
   border-radius: var(--radius-sm);
   font-family: var(--font-family-mono);
   font-size: var(--font-size-xs);
-  color: var(--color-gray-700);
+  color: var(--color-text-tertiary);
   transition: background-color var(--transition-base);
 }
 
 .branch-indicator__branch:hover {
-  background: var(--color-gray-200);
+  background: var(--color-border-default);
 }
 
 .branch-indicator__arrow {
-  color: var(--color-gray-400);
+  color: var(--color-text-muted);
   font-size: var(--font-size-sm);
 }
 
diff --git a/features/molecules/breadcrumbs/Breadcrumbs.vue b/features/molecules/breadcrumbs/Breadcrumbs.vue
deleted file mode 100644
index f7d74a8..0000000
--- a/features/molecules/breadcrumbs/Breadcrumbs.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<script setup lang="ts">
-interface BreadcrumbItem {
-  /**
-   * Display text for the breadcrumb
-   */
-  label: string
-  /**
-   * Optional URL/path for the breadcrumb link
-   * If not provided, the item will be rendered as plain text
-   */
-  to?: string
-  /**
-   * Whether this is the current/active item
-   */
-  current?: boolean
-}
-
-interface Props {
-  /**
-   * Array of breadcrumb items
-   */
-  items: BreadcrumbItem[]
-  /**
-   * Separator character/string between items
-   */
-  separator?: string
-  /**
-   * Custom CSS classes
-   */
-  class?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  separator: '/',
-  class: ''
-})
-
-// Compute CSS classes
-const containerClasses = computed(() => {
-  const classes = ['breadcrumbs']
-
-  if (props.class) {
-    classes.push(props.class)
-  }
-
-  return classes.join(' ')
-})
-</script>
-
-<template>
-  <nav :class="containerClasses" aria-label="Breadcrumb">
-    <ol class="breadcrumbs__list">
-      <li
-        v-for="(item, index) in items"
-        :key="index"
-        class="breadcrumbs__item"
-      >
-        <Link
-          v-if="item.to && !item.current"
-          :to="item.to"
-          variant="primary"
-          size="sm"
-          class="breadcrumbs__link"
-        >
-          {{ item.label }}
-        </Link>
-        <Text
-          v-else
-          variant="tertiary"
-          size="sm"
-          weight="normal"
-          class="breadcrumbs__current"
-          :aria-current="item.current ? 'page' : undefined"
-        >
-          {{ item.label }}
-        </Text>
-
-        <Text
-          v-if="index < items.length - 1"
-          variant="tertiary"
-          size="sm"
-          class="breadcrumbs__separator"
-          aria-hidden="true"
-        >
-          {{ separator }}
-        </Text>
-      </li>
-    </ol>
-  </nav>
-</template>
-
-<style scoped>
-/* Layout structure only - typography and colors handled by atoms */
-.breadcrumbs {
-  margin-bottom: var(--spacing-3);
-}
-
-.breadcrumbs__list {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: var(--spacing-2);
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.breadcrumbs__item {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-2);
-}
-
-.breadcrumbs__separator {
-  user-select: none;
-}
-
-/* Responsive adjustments */
-@media (max-width: 640px) {
-  .breadcrumbs__list {
-    gap: var(--spacing-1-5);
-  }
-
-  .breadcrumbs__item {
-    gap: var(--spacing-1-5);
-  }
-}
-</style>
diff --git a/features/molecules/error-box/ErrorBox.vue b/features/molecules/error-box/ErrorBox.vue
index 0e74cd3..278fabe 100644
--- a/features/molecules/error-box/ErrorBox.vue
+++ b/features/molecules/error-box/ErrorBox.vue
@@ -136,32 +136,32 @@ const errorClasses = computed(() => {
 
 /* Error variant */
 .error-box--error {
-  border-color: var(--color-red-50);
-  background-color: var(--color-error-50);
+  border-color: var(--color-error);
+  background-color: var(--color-error-bright);
 }
 
 .error-box--error .error-title {
-  color: var(--color-error-600);
+  color: var(--color-error-dark);
 }
 
 /* Warning variant */
 .error-box--warning {
-  border-color: var(--color-orange-100);
-  background-color: var(--color-orange-50);
+  border-color: var(--color-warning);
+  background-color: var(--color-warning-bright);
 }
 
 .error-box--warning .error-title {
-  color: var(--color-orange-500);
+  color: var(--color-warning-dark);
 }
 
 /* Info variant */
 .error-box--info {
-  border-color: var(--color-blue-50);
-  background-color: var(--color-primary-50);
+  border-color: var(--color-info);
+  background-color: var(--color-info-bright);
 }
 
 .error-box--info .error-title {
-  color: var(--color-primary-600);
+  color: var(--color-info-dark);
 }
 
 .error-content {
@@ -232,7 +232,7 @@ const errorClasses = computed(() => {
 }
 
 .error-details pre {
-  background-color: var(--color-gray-50);
+  background-color: var(--color-bg-secondary);
   border: 1px solid var(--color-border-default);
   border-radius: var(--radius-md);
   padding: var(--spacing-3);
diff --git a/features/molecules/log-ticker/LogTicker.vue b/features/molecules/log-ticker/LogTicker.vue
new file mode 100644
index 0000000..d283ff1
--- /dev/null
+++ b/features/molecules/log-ticker/LogTicker.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+const { latest } = useLogStream()
+
+const message = computed(() => latest.value?.message ?? '')
+
+// Hide if no new log arrives within this window
+const HIDE_AFTER_MS = 2000
+const dismissed = ref(true)
+let hideTimer: ReturnType<typeof setTimeout> | null = null
+
+const visible = computed(() => message.value.length > 0 && !dismissed.value)
+
+watch(
+  () => latest.value?.timestamp,
+  () => {
+    dismissed.value = false
+    if (hideTimer) clearTimeout(hideTimer)
+    hideTimer = setTimeout(() => { dismissed.value = true }, HIDE_AFTER_MS)
+  },
+)
+</script>
+
+<template>
+  <Transition name="ticker">
+    <div
+      v-if="visible"
+      class="log-ticker"
+      role="status"
+      aria-live="polite"
+    >
+      <span class="log-ticker__dot" />
+      <span :key="latest?.timestamp" class="log-ticker__text">{{ message }}</span>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.log-ticker {
+  position: fixed;
+  right: var(--spacing-4, 1rem);
+  bottom: var(--spacing-4, 1rem);
+  z-index: 200;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2, 0.5rem);
+  max-width: min(560px, calc(100vw - 2rem));
+  padding: 6px 12px;
+  border-radius: 999px;
+  background: var(--color-surface-inverse);
+  color: var(--color-on-surface-inverse);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: var(--font-size-xs);
+  line-height: 1.4;
+  box-shadow: var(--shadow-lg);
+  backdrop-filter: blur(6px);
+  pointer-events: none;
+}
+
+.log-ticker__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--color-success);
+  flex-shrink: 0;
+  animation: log-ticker-pulse 1.4s ease-in-out infinite;
+}
+
+.log-ticker__text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  animation: log-ticker-slide 220ms ease-out;
+}
+
+@keyframes log-ticker-pulse {
+  0%, 100% { transform: scale(1); opacity: 1; }
+  50% { transform: scale(0.7); opacity: 0.5; }
+}
+
+@keyframes log-ticker-slide {
+  from { transform: translateY(4px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+.ticker-enter-active,
+.ticker-leave-active {
+  transition: transform 240ms ease, opacity 240ms ease;
+}
+.ticker-enter-from,
+.ticker-leave-to {
+  transform: translateY(8px);
+  opacity: 0;
+}
+</style>
diff --git a/features/molecules/refresh-indicator/RefreshIndicator.vue b/features/molecules/refresh-indicator/RefreshIndicator.vue
deleted file mode 100644
index df435e1..0000000
--- a/features/molecules/refresh-indicator/RefreshIndicator.vue
+++ /dev/null
@@ -1,102 +0,0 @@
-<script setup lang="ts">
-interface Props {
-  lastUpdated?: number
-  isRefreshing?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  lastUpdated: 0,
-  isRefreshing: false,
-})
-
-const { formatTimeAgo } = useDateTime()
-
-const lastUpdatedText = computed(() => {
-  if (!props.lastUpdated) return 'Never'
-  return formatTimeAgo(new Date(props.lastUpdated).toISOString())
-})
-</script>
-
-<template>
-  <div class="refresh-indicator">
-    <div class="indicator-content">
-      <span class="indicator-icon" :class="{ spinning: isRefreshing }">
-        🔄
-      </span>
-      <span class="indicator-text">
-        <template v-if="isRefreshing">
-          Updating...
-        </template>
-        <template v-else>
-          Updated {{ lastUpdatedText }}
-        </template>
-      </span>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.refresh-indicator {
-  position: fixed;
-  bottom: var(--spacing-6);
-  right: var(--spacing-6);
-  z-index: 50;
-  pointer-events: none;
-}
-
-.indicator-content {
-  background: var(--color-bg-overlay);
-  border: var(--border-width-thin) solid var(--color-gray-200);
-  border-radius: var(--radius-full);
-  padding: var(--spacing-2) var(--spacing-4);
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-2);
-  box-shadow: var(--shadow-md);
-  backdrop-filter: blur(8px);
-}
-
-.indicator-icon {
-  font-size: var(--font-size-base);
-  display: inline-block;
-  transition: transform var(--transition-slow);
-}
-
-.indicator-icon.spinning {
-  animation: spin 1s linear infinite;
-}
-
-.indicator-text {
-  font-size: var(--font-size-sm);
-  color: var(--color-gray-500);
-  font-weight: var(--font-weight-medium);
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (max-width: 768px) {
-  .refresh-indicator {
-    bottom: var(--spacing-4);
-    right: var(--spacing-4);
-  }
-
-  .indicator-content {
-    padding: var(--spacing-1-5) var(--spacing-3);
-  }
-
-  .indicator-icon {
-    font-size: var(--font-size-sm);
-  }
-
-  .indicator-text {
-    font-size: var(--font-size-xs);
-  }
-}
-</style>
diff --git a/features/molecules/roadmap-layout/RoadmapLayout.vue b/features/molecules/roadmap-layout/RoadmapLayout.vue
deleted file mode 100644
index a6bea29..0000000
--- a/features/molecules/roadmap-layout/RoadmapLayout.vue
+++ /dev/null
@@ -1,206 +0,0 @@
-<script setup lang="ts">
-import type { GroupedItems } from '../../../composables/useViewGrouping'
-
-interface Props {
-  groups: GroupedItems[]
-}
-
-defineProps<Props>()
-
-// Get iteration/milestone info from item
-const getTimelineInfo = (item: any): string => {
-  // Check for iteration field
-  for (const [key, value] of Object.entries(item.custom_fields)) {
-    if (typeof value === 'object' && value !== null && 'title' in value) {
-      return (value as { title: string }).title
-    }
-  }
-
-  // Fallback to dates
-  if (item.created_at) {
-    const date = new Date(item.created_at)
-    return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' })
-  }
-
-  return 'No Date'
-}
-</script>
-
-<template>
-  <div class="roadmap-layout">
-    <div class="roadmap-layout__info">
-      <Icon icon="📅" size="base" decorative />
-      <Text variant="tertiary" size="sm">
-        Roadmap view shows items grouped by iteration or milestone. Drag functionality coming soon.
-      </Text>
-    </div>
-
-    <div class="roadmap-layout__timeline">
-      <div v-for="group in groups" :key="group.name" class="roadmap-layout__group">
-        <div class="roadmap-layout__group-header">
-          <Header :level="4" size="base" variant="primary">
-            {{ group.name }}
-          </Header>
-          <Text variant="tertiary" size="sm">
-            {{ group.count }} {{ group.count === 1 ? 'item' : 'items' }}
-          </Text>
-        </div>
-
-        <div class="roadmap-layout__items">
-          <a
-            v-for="item in group.items"
-            :key="item.id"
-            :href="item.url"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="roadmap-layout__item"
-          >
-            <div class="roadmap-layout__item-marker">
-              <Icon :icon="item.type === 'PULL_REQUEST' ? '🔀' : '📋'" size="sm" decorative />
-            </div>
-
-            <div class="roadmap-layout__item-content">
-              <Text variant="primary" size="sm" weight="medium">
-                {{ item.title || 'Untitled' }}
-              </Text>
-              <div class="roadmap-layout__item-meta">
-                <Text variant="tertiary" size="xs">
-                  {{ item.repository || 'Draft' }}
-                </Text>
-                <Text variant="tertiary" size="xs">•</Text>
-                <Text variant="tertiary" size="xs">
-                  {{ getTimelineInfo(item) }}
-                </Text>
-              </div>
-
-              <!-- Labels -->
-              <div v-if="item.labels && item.labels.length > 0" class="roadmap-layout__item-labels">
-                <LabelBadge
-                  v-for="label in item.labels.slice(0, 5)"
-                  :key="label.name"
-                  :name="label.name"
-                  :color="label.color"
-                  size="xs"
-                />
-              </div>
-            </div>
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.roadmap-layout {
-  width: 100%;
-}
-
-.roadmap-layout__info {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-2);
-  padding: var(--spacing-3) var(--spacing-4);
-  background: var(--color-info-100);
-  border-radius: var(--radius-md);
-  margin-bottom: var(--spacing-4);
-  border-left: 3px solid var(--color-info-500);
-}
-
-.roadmap-layout__timeline {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-6);
-}
-
-.roadmap-layout__group {
-  background: var(--color-white);
-  border-radius: var(--radius-lg);
-  padding: var(--spacing-4);
-  box-shadow: var(--shadow-sm);
-}
-
-.roadmap-layout__group-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: var(--spacing-4);
-  padding-bottom: var(--spacing-3);
-  border-bottom: 2px solid var(--color-border-default);
-}
-
-.roadmap-layout__items {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-3);
-  position: relative;
-}
-
-/* Timeline line */
-.roadmap-layout__items::before {
-  content: '';
-  position: absolute;
-  left: 10px;
-  top: 0;
-  bottom: 0;
-  width: 2px;
-  background: var(--color-border-default);
-}
-
-.roadmap-layout__item {
-  display: flex;
-  gap: var(--spacing-3);
-  padding: var(--spacing-3);
-  border-radius: var(--radius-md);
-  text-decoration: none;
-  transition: all var(--transition-base);
-  position: relative;
-}
-
-.roadmap-layout__item:hover {
-  background: var(--color-gray-50);
-}
-
-.roadmap-layout__item-marker {
-  flex-shrink: 0;
-  width: 24px;
-  height: 24px;
-  background: var(--color-white);
-  border: 2px solid var(--color-primary-500);
-  border-radius: var(--radius-full);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1;
-}
-
-.roadmap-layout__item-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-1);
-}
-
-.roadmap-layout__item-meta {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-2);
-}
-
-.roadmap-layout__item-labels {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--spacing-1);
-  margin-top: var(--spacing-1);
-}
-
-@media (max-width: 768px) {
-  .roadmap-layout__group {
-    padding: var(--spacing-3);
-  }
-
-  .roadmap-layout__item {
-    padding: var(--spacing-2);
-  }
-}
-</style>
diff --git a/features/molecules/skeleton-loader/SkeletonStats.vue b/features/molecules/skeleton-loader/SkeletonStats.vue
deleted file mode 100644
index c45f2b7..0000000
--- a/features/molecules/skeleton-loader/SkeletonStats.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<script setup lang="ts">
-interface Props {
-  count?: number
-}
-
-withDefaults(defineProps<Props>(), {
-  count: 4,
-})
-</script>
-
-<template>
-  <div class="skeleton-stats">
-    <div
-      v-for="i in count"
-      :key="i"
-      class="skeleton-stat-card"
-    >
-      <div class="skeleton-icon" />
-      <div class="skeleton-value" />
-      <div class="skeleton-label" />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.skeleton-stats {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: var(--spacing-6);
-  margin-bottom: var(--spacing-8);
-}
-
-.skeleton-stat-card {
-  background: var(--color-white);
-  border-radius: var(--radius-lg);
-  padding: var(--spacing-6);
-  box-shadow: var(--shadow-sm);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--spacing-3);
-}
-
-.skeleton-icon {
-  width: 48px;
-  height: 48px;
-  border-radius: var(--radius-full);
-  background: var(--gradient-shimmer);
-  background-size: 200% 100%;
-  animation: shimmer 1.5s infinite;
-}
-
-.skeleton-value {
-  width: 60px;
-  height: 32px;
-  border-radius: var(--radius-sm);
-  background: var(--gradient-shimmer);
-  background-size: 200% 100%;
-  animation: shimmer 1.5s infinite;
-}
-
-.skeleton-label {
-  width: 120px;
-  height: 16px;
-  border-radius: var(--radius-sm);
-  background: var(--gradient-shimmer);
-  background-size: 200% 100%;
-  animation: shimmer 1.5s infinite;
-}
-
-@keyframes shimmer {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}
-
-@media (max-width: 768px) {
-  .skeleton-stats {
-    grid-template-columns: 1fr;
-  }
-}
-</style>
diff --git a/features/molecules/stats-card/StatsCard.vue b/features/molecules/stats-card/StatsCard.vue
deleted file mode 100644
index 1dc9f33..0000000
--- a/features/molecules/stats-card/StatsCard.vue
+++ /dev/null
@@ -1,139 +0,0 @@
-<script setup lang="ts">
-interface Props {
-  /**
-   * The icon or emoji to display
-   */
-  icon: string
-  /**
-   * The main value/statistic
-   */
-  value: string | number
-  /**
-   * The label describing the statistic
-   */
-  label: string
-  /**
-   * Visual variant for styling
-   */
-  variant?: 'default' | 'primary' | 'success' | 'warning' | 'info'
-  /**
-   * Custom CSS classes
-   */
-  class?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  variant: 'default',
-  class: ''
-})
-
-// Compute CSS classes
-const cardClasses = computed(() => {
-  const classes = ['stats-card', `stats-card--${props.variant}`]
-
-  if (props.class) {
-    classes.push(props.class)
-  }
-
-  return classes.join(' ')
-})
-</script>
-
-<template>
-  <div :class="cardClasses">
-    <Icon :icon="icon" size="2xl" decorative class="stats-card__icon" />
-    <div class="stats-card__content">
-      <Text variant="primary" size="2xl" weight="bold" class="stats-card__value">{{ value }}</Text>
-      <Text variant="secondary" size="sm" weight="medium" class="stats-card__label">{{ label }}</Text>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-/* Layout structure only - typography and colors handled by atoms */
-.stats-card {
-  background: var(--color-bg-primary);
-  border-radius: var(--radius-xl);
-  padding: var(--spacing-6);
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-4);
-  box-shadow: var(--shadow-sm);
-  min-width: 200px;
-  transition: transform var(--transition-base), box-shadow var(--transition-base);
-}
-
-.stats-card:hover {
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-md);
-}
-
-.stats-card__icon {
-  width: 48px;
-  height: 48px;
-  background: var(--color-gray-100);
-  border-radius: var(--radius-full);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.stats-card__content {
-  flex: 1;
-}
-
-.stats-card__value {
-  margin-bottom: var(--spacing-1);
-}
-
-/* Variant styles */
-.stats-card--primary .stats-card__icon {
-  background: var(--color-primary-100);
-  color: var(--color-primary-800);
-}
-
-.stats-card--primary .stats-card__value {
-  color: var(--color-primary-800);
-}
-
-.stats-card--success .stats-card__icon {
-  background: var(--color-success-50);
-  color: var(--color-success-700);
-}
-
-.stats-card--success .stats-card__value {
-  color: var(--color-success-700);
-}
-
-.stats-card--warning .stats-card__icon {
-  background: var(--color-warning-50);
-  color: var(--color-warning-700);
-}
-
-.stats-card--warning .stats-card__value {
-  color: var(--color-warning-700);
-}
-
-.stats-card--info .stats-card__icon {
-  background: var(--color-info-50);
-  color: var(--color-info-700);
-}
-
-.stats-card--info .stats-card__value {
-  color: var(--color-info-700);
-}
-
-/* Responsive adjustments */
-@media (max-width: 768px) {
-  .stats-card {
-    min-width: 160px;
-    padding: var(--spacing-5);
-  }
-
-  .stats-card__icon {
-    width: 40px;
-    height: 40px;
-  }
-}
-</style>
diff --git a/features/molecules/table-layout/TableLayout.vue b/features/molecules/table-layout/TableLayout.vue
deleted file mode 100644
index 5e386a5..0000000
--- a/features/molecules/table-layout/TableLayout.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<script setup lang="ts">
-import type { GroupedItems } from '../../../composables/useViewGrouping'
-
-interface Props {
-  groups: GroupedItems[]
-  visibleFields?: string[]
-}
-
-defineProps<Props>()
-
-// For now, show all custom field columns
-// In future, can filter based on visibleFields prop
-const showStatus = ref(true)
-const showPriority = ref(true)
-const showSize = ref(true)
-const showParentIssue = ref(true)
-const showSubIssues = ref(true)
-</script>
-
-<template>
-  <div class="table-layout">
-    <div v-if="groups.length === 1" class="table-layout__single">
-      <!-- Single group (no grouping) - just show table -->
-      <ProjectItemsTable
-        :items="groups[0].items"
-        :show-status="showStatus"
-        :show-priority="showPriority"
-        :show-size="showSize"
-        :show-parent-issue="showParentIssue"
-        :show-sub-issues-progress="showSubIssues"
-      />
-    </div>
-
-    <div v-else class="table-layout__grouped">
-      <!-- Multiple groups - show each group with header -->
-      <div v-for="group in groups" :key="group.name" class="table-layout__group">
-        <div class="table-layout__group-header">
-          <Header :level="4" size="base" variant="primary" class="table-layout__group-title">
-            {{ group.name }}
-          </Header>
-          <Text variant="tertiary" size="sm" weight="medium">
-            {{ group.count }} {{ group.count === 1 ? 'item' : 'items' }}
-          </Text>
-        </div>
-
-        <ProjectItemsTable
-          :items="group.items"
-          :show-status="showStatus"
-          :show-priority="showPriority"
-          :show-size="showSize"
-          :show-parent-issue="showParentIssue"
-          :show-sub-issues-progress="showSubIssues"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.table-layout {
-  width: 100%;
-}
-
-.table-layout__grouped {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-6);
-}
-
-.table-layout__group {
-  background: var(--color-white);
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-  box-shadow: var(--shadow-sm);
-}
-
-.table-layout__group-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--spacing-3) var(--spacing-4);
-  background: var(--color-slate-100);
-  border-bottom: 1px solid var(--color-border-default);
-}
-
-.table-layout__group-title {
-  margin: 0;
-}
-</style>
diff --git a/features/organisms/navigation/Navigation.vue b/features/organisms/navigation/Navigation.vue
index c036e91..0d20531 100644
--- a/features/organisms/navigation/Navigation.vue
+++ b/features/organisms/navigation/Navigation.vue
@@ -1,27 +1,111 @@
+<script setup lang="ts">
+const { public: { githubOwner } } = useRuntimeConfig()
+const headerStats = useHeaderStats()
+const headerActions = useHeaderActions()
+
+const menuOpen = ref(false)
+const route = useRoute()
+watch(() => route.fullPath, () => { menuOpen.value = false })
+
+const PAGE_TITLES: Record<string, string> = {
+  WorkflowsDashboard: 'Workflows',
+  PullRequestsOverview: 'Pull Requests',
+  RepositoriesOverview: 'Repositories',
+}
+const currentPageTitle = computed(() => {
+  const name = typeof route.name === 'string' ? route.name : ''
+  return PAGE_TITLES[name] ?? ''
+})
+
+// Keep --nav-actual-height in sync with the rendered nav so the layout's
+// content offset is correct whether the bar is single-row (desktop) or
+// stacked (mobile), and whether the stats strip is present or not.
+const navRef = ref<HTMLElement | null>(null)
+let observer: ResizeObserver | null = null
+
+const setHeight = (px: number) => {
+  document.documentElement.style.setProperty('--nav-actual-height', `${Math.ceil(px)}px`)
+}
+
+onMounted(() => {
+  if (!navRef.value) return
+  setHeight(navRef.value.offsetHeight)
+  observer = new ResizeObserver(() => {
+    if (navRef.value) setHeight(navRef.value.offsetHeight)
+  })
+  observer.observe(navRef.value)
+})
+
+onUnmounted(() => {
+  observer?.disconnect()
+  document.documentElement.style.removeProperty('--nav-actual-height')
+})
+</script>
+
 <template>
-  <nav class="navigation">
+  <nav ref="navRef" class="navigation">
     <div class="nav-content">
       <Header :level="1" size="2xl" variant="primary" class="nav-title">
-        GitHub Dashboard
+        {{ githubOwner }}
       </Header>
-      <div class="nav-links">
+      <div class="nav-mobile-cluster">
+        <Text v-if="currentPageTitle" variant="primary" size="base" weight="medium" class="nav-page-title">
+          {{ currentPageTitle }}
+        </Text>
+        <button
+          type="button"
+          class="nav-burger"
+          :aria-expanded="menuOpen"
+          aria-controls="nav-menu"
+          aria-label="Toggle navigation menu"
+          @click="menuOpen = !menuOpen"
+        >
+          <span class="nav-burger__bar" />
+          <span class="nav-burger__bar" />
+          <span class="nav-burger__bar" />
+        </button>
+      </div>
+      <div id="nav-menu" class="nav-links" :class="{ 'nav-links--open': menuOpen }">
         <NuxtLink to="/" class="nav-link">
           <Text variant="secondary" size="base" weight="medium">Workflows</Text>
         </NuxtLink>
-        <NuxtLink to="/repositories" class="nav-link">
-          <Text variant="secondary" size="base" weight="medium">Repositories</Text>
-        </NuxtLink>
         <NuxtLink to="/pull-requests" class="nav-link">
           <Text variant="secondary" size="base" weight="medium">Pull Requests</Text>
         </NuxtLink>
-        <NuxtLink to="/projects" class="nav-link">
-          <Text variant="secondary" size="base" weight="medium">Project Boards</Text>
-        </NuxtLink>
-        <NuxtLink to="/project-views" class="nav-link">
-          <Text variant="secondary" size="base" weight="medium">Project Views</Text>
+        <NuxtLink to="/repositories" class="nav-link">
+          <Text variant="secondary" size="base" weight="medium">Repositories</Text>
         </NuxtLink>
       </div>
     </div>
+    <div v-if="headerStats.items.length || headerActions.items.length" class="nav-substrip">
+      <div class="nav-stats">
+        <span
+          v-for="stat in headerStats.items"
+          :key="stat.label"
+          class="nav-stat"
+          :class="stat.variant ? `nav-stat--${stat.variant}` : ''"
+        >
+          <span class="nav-stat__value">{{ stat.value }}</span>
+          <span class="nav-stat__label">{{ stat.label }}</span>
+        </span>
+      </div>
+      <div v-if="headerActions.items.length" class="nav-actions">
+        <button
+          v-for="action in headerActions.items"
+          :key="action.id"
+          type="button"
+          class="nav-action"
+          :class="{ 'nav-action--active': action.active }"
+          :title="action.label"
+          :aria-label="action.label"
+          :aria-pressed="!!action.active"
+          @click="headerActions.invoke(action.id)"
+        >
+          <Icon :icon="action.icon" decorative />
+          <span v-if="action.dot" class="nav-action__dot" aria-hidden="true" />
+        </button>
+      </div>
+    </div>
   </nav>
 </template>
 
@@ -30,7 +114,7 @@
 .navigation {
   background: var(--color-bg-primary);
   border-bottom: 1px solid var(--color-border-default);
-  padding: var(--spacing-4) 0;
+  padding: var(--spacing-2) 0;
   position: fixed;
   top: 0;
   left: 0;
@@ -64,27 +148,170 @@
   transition: all var(--transition-base);
 }
 
-.nav-link:hover {
-  background: var(--color-gray-100);
+.nav-link:hover :deep(.text),
+.nav-link.router-link-active :deep(.text) {
+  color: var(--color-primary);
 }
 
-.nav-link.router-link-active {
-  background: var(--color-primary-100);
+.nav-substrip {
+  max-width: var(--container-max-width);
+  margin: 0 auto;
+  padding: var(--spacing-3) var(--spacing-8);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-4);
+  border-top: 1px solid var(--color-border-default);
+}
+
+.nav-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  flex-shrink: 0;
 }
 
-.nav-link.router-link-active :deep(span) {
-  color: var(--color-primary-700);
+.nav-action {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-full);
+  background: var(--color-bg-primary);
+  font-size: var(--font-size-sm);
+  cursor: pointer;
+  transition: all var(--transition-fast);
 }
 
-@media (max-width: 768px) {
+.nav-action:hover {
+  border-color: var(--color-border-hover);
+  background: var(--color-bg-tertiary);
+}
+
+.nav-action--active {
+  border-color: var(--color-primary);
+  background: var(--color-primary-bright);
+}
+
+.nav-action__dot {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--color-primary);
+}
+
+.nav-stats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-5);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  min-width: 0;
+  flex: 1;
+}
+
+.nav-stat {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 6px;
+  font-size: var(--font-size-xs);
+  line-height: 1;
+  color: var(--color-text-secondary);
+}
+
+.nav-stat__value {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+}
+
+.nav-stat--success .nav-stat__value { color: var(--color-success-dark); }
+.nav-stat--warning .nav-stat__value { color: var(--color-warning-dark); }
+.nav-stat--info    .nav-stat__value { color: var(--color-info-dark); }
+
+/* Mobile cluster (page title + burger) — only shown on small screens */
+.nav-mobile-cluster {
+  display: none;
+  align-items: center;
+  gap: var(--spacing-3);
+}
+
+.nav-page-title {
+  white-space: nowrap;
+}
+
+.nav-burger {
+  display: none;
+  flex-direction: column;
+  justify-content: center;
+  gap: 4px;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-primary);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.nav-burger:hover {
+  background: var(--color-bg-tertiary);
+}
+
+.nav-burger__bar {
+  display: block;
+  width: 18px;
+  height: 2px;
+  background: var(--color-text-primary);
+  margin: 0 auto;
+  border-radius: 2px;
+}
+
+@media (max-width: 1100px) {
   .nav-content {
     padding: 0 var(--spacing-4);
-    flex-direction: column;
+    flex-wrap: wrap;
     gap: var(--spacing-3);
   }
 
+  .nav-mobile-cluster {
+    display: flex;
+  }
+
+  .nav-burger {
+    display: flex;
+  }
+
   .nav-links {
-    gap: var(--spacing-4);
+    display: none;
+    flex-basis: 100%;
+    flex-direction: column;
+    gap: var(--spacing-1);
+    padding-top: var(--spacing-3);
+    border-top: 1px solid var(--color-border-default);
+  }
+
+  .nav-links--open {
+    display: flex;
+  }
+
+  .nav-link {
+    width: 100%;
+  }
+
+  .nav-substrip {
+    margin-top: var(--spacing-3);
+    padding: var(--spacing-3) var(--spacing-4);
+  }
+
+  .nav-stats {
+    gap: var(--spacing-3);
   }
 }
 </style>
diff --git a/features/organisms/page-layout/PageLayout.vue b/features/organisms/page-layout/PageLayout.vue
index 684c91d..3d82349 100644
--- a/features/organisms/page-layout/PageLayout.vue
+++ b/features/organisms/page-layout/PageLayout.vue
@@ -1,39 +1,25 @@
 <script setup lang="ts">
 interface Props {
-  showSkeleton?: boolean
-  showRefreshIndicator?: boolean
   isRefreshing?: boolean
-  lastUpdated?: number
   error?: any
   data?: any
   onRetry?: () => void
   skeletonCount?: number
-  showStats?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  showSkeleton: false,
-  showRefreshIndicator: false,
   isRefreshing: false,
   skeletonCount: 6,
-  showStats: false
 })
+
+const hasData = computed(() => props.data != null)
+const showSkeleton = computed(() => !hasData.value && props.isRefreshing)
 </script>
 
 <template>
   <div class="page-layout">
-    <!-- Refresh Indicator (shown when refreshing with cached data) -->
-    <RefreshIndicator
-      v-if="showRefreshIndicator"
-      :is-refreshing="isRefreshing"
-      :last-updated="lastUpdated"
-    />
-
     <!-- Skeleton Loading (shown on initial load with no cached data) -->
-    <template v-if="showSkeleton">
-      <SkeletonStats v-if="showStats" :count="3" />
-      <SkeletonGrid :count="skeletonCount" />
-    </template>
+    <SkeletonGrid v-if="showSkeleton" :count="skeletonCount" />
 
     <!-- Error State -->
     <div v-else-if="error && !data" class="error-state">
@@ -45,11 +31,6 @@ const props = withDefaults(defineProps<Props>(), {
 
     <!-- Content (shown when we have data, even if refreshing in background) -->
     <div v-else-if="data" class="content">
-      <!-- Stats Section (optional) -->
-      <div v-if="$slots.stats" class="stats-section">
-        <slot name="stats" />
-      </div>
-
       <!-- Filters Section (optional) -->
       <div v-if="$slots.filters" class="filters-section">
         <slot name="filters" />
@@ -65,7 +46,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 <style scoped>
 .page-layout {
-  padding: var(--spacing-8);
+  padding: 0 var(--spacing-2) var(--spacing-2);
   min-height: 100vh;
   background: var(--color-bg-secondary);
 }
@@ -75,7 +56,7 @@ const props = withDefaults(defineProps<Props>(), {
   margin: 0 auto;
   display: flex;
   justify-content: center;
-  padding: var(--spacing-20) 0;
+  padding: var(--spacing-10) 0;
 }
 
 .content {
@@ -83,29 +64,13 @@ const props = withDefaults(defineProps<Props>(), {
   margin: 0 auto;
 }
 
-.stats-section {
-  display: flex;
-  gap: var(--spacing-5);
-  margin-bottom: var(--spacing-8);
-  flex-wrap: wrap;
-  justify-content: center;
-}
-
 .filters-section {
-  margin-bottom: var(--spacing-8);
-}
-
-.main-content {
-  /* Child components define their own layout */
+  margin-bottom: var(--spacing-3);
 }
 
 @media (max-width: 768px) {
   .page-layout {
-    padding: var(--spacing-4);
-  }
-
-  .stats-section {
-    gap: var(--spacing-4);
+    padding: 0 var(--spacing-1) var(--spacing-1);
   }
 }
 </style>
diff --git a/features/organisms/project-card/ProjectCard.vue b/features/organisms/project-card/ProjectCard.vue
deleted file mode 100644
index 81d6017..0000000
--- a/features/organisms/project-card/ProjectCard.vue
+++ /dev/null
@@ -1,190 +0,0 @@
-<script setup lang="ts">
-import { useProjectCard } from './useProjectCard'
-
-interface Project {
-  id: string
-  number: number
-  title: string
-  shortDescription?: string
-  url: string
-  createdAt: string
-  updatedAt: string
-  state: 'OPEN' | 'CLOSED'
-  items: {
-    totalCount: number
-  }
-}
-
-const props = defineProps<{
-  project: Project
-}>()
-
-const { getStatusConfig } = useProjectCard()
-const { formatTimeAgoSimple, formatTimeAgoDetailed } = useDateTime()
-
-const statusConfig = computed(() => getStatusConfig(props.project.state))
-const timeAgo = computed(() => formatTimeAgoSimple(props.project.updatedAt))
-const createdAgo = computed(() => formatTimeAgoDetailed(props.project.createdAt))
-</script>
-
-<template>
-  <BaseCard
-    width="300px"
-    :border-color="statusConfig.borderColor"
-    :bg-color="statusConfig.bgColor"
-  >
-    <template #header>
-      <div class="project-title">
-        <Icon :icon="statusConfig.icon" size="lg" decorative />
-        <Header :level="3" size="base" class="project-name">
-          <NuxtLink :to="`/projects/${project.number}`" class="project-link">
-            {{ project.title }}
-          </NuxtLink>
-        </Header>
-        <Tag
-          :label="statusConfig.label"
-          variant="primary"
-          size="sm"
-          :style="{
-            backgroundColor: statusConfig.color + '20',
-            color: statusConfig.color
-          }"
-        />
-      </div>
-      <Text
-        v-if="project.shortDescription"
-        variant="secondary"
-        size="xs"
-        line-height="base"
-        :line-clamp="3"
-        class="project-description"
-      >
-        {{ project.shortDescription }}
-      </Text>
-    </template>
-
-    <template #body>
-      <!-- Stats -->
-      <div class="project-stats">
-        <div class="stat-item">
-          <Icon icon="📋" size="sm" decorative />
-          <Text variant="secondary" size="xs">Items:</Text>
-          <Text variant="tertiary" size="sm" weight="semibold">{{ project.items.totalCount }}</Text>
-        </div>
-      </div>
-
-      <!-- Details -->
-      <div class="project-details">
-        <div class="detail-row">
-          <Text variant="secondary" size="xs">Status:</Text>
-          <Text
-            variant="tertiary"
-            size="xs"
-            weight="semibold"
-            :style="{ color: statusConfig.color }"
-          >
-            {{ statusConfig.label }}
-          </Text>
-        </div>
-
-        <div class="detail-row">
-          <Text variant="secondary" size="xs">Updated:</Text>
-          <Text variant="tertiary" size="xs" weight="medium">{{ timeAgo }}</Text>
-        </div>
-
-        <div class="detail-row">
-          <Text variant="secondary" size="xs">Created:</Text>
-          <Text variant="tertiary" size="xs" weight="medium">{{ createdAgo }}</Text>
-        </div>
-      </div>
-    </template>
-
-    <template #bottom>
-      <div class="card-action">
-        <Button
-          variant="primary"
-          size="md"
-          class="view-button"
-          @click="navigateTo(`/projects/${project.number}`)"
-        >
-          View Project Board
-        </Button>
-        <Link
-          :href="project.url"
-          variant="secondary"
-          size="sm"
-          external
-          title="Open on GitHub"
-        >
-          GitHub →
-        </Link>
-      </div>
-    </template>
-  </BaseCard>
-</template>
-
-<style scoped>
-/* Layout structure only - typography and colors handled by atoms */
-.project-title {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-2);
-  margin-bottom: var(--spacing-2);
-  flex-wrap: wrap;
-}
-
-.project-name {
-  word-break: break-word;
-  flex: 1;
-  min-width: 0;
-}
-
-.project-description {
-  margin: 0;
-}
-
-.project-stats {
-  display: flex;
-  gap: var(--spacing-4);
-  margin-bottom: var(--spacing-4);
-  padding-bottom: var(--spacing-3);
-  border-bottom: 1px solid var(--color-gray-100);
-}
-
-.stat-item {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-2);
-}
-
-.project-details {
-  margin-bottom: var(--spacing-4);
-}
-
-.detail-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: var(--spacing-2);
-}
-
-.card-action {
-  display: flex;
-  gap: var(--spacing-3);
-  align-items: center;
-}
-
-.view-button {
-  flex: 1;
-}
-
-.project-link {
-  color: var(--color-text-secondary);
-  text-decoration: none;
-}
-
-.project-link:hover {
-  color: var(--color-text-primary);
-  text-decoration: underline;
-}
-</style>
diff --git a/features/organisms/project-card/useProjectCard.ts b/features/organisms/project-card/useProjectCard.ts
deleted file mode 100644
index 4456f9e..0000000
--- a/features/organisms/project-card/useProjectCard.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-interface StatusConfig {
-  color: string
-  bgColor: string
-  borderColor: string
-  icon: string
-  label: string
-}
-
-type ProjectState = 'OPEN' | 'CLOSED'
-
-/**
- * Composable for project card logic
- * Determines visual configuration based on project state
- */
-export const useProjectCard = () => {
-  const getStatusConfig = (state: ProjectState): StatusConfig => {
-    switch (state) {
-      case 'OPEN':
-        return {
-          color: '#10b981', // Green
-          bgColor: '#f0fdf4',
-          borderColor: '#10b981',
-          icon: '🚀',
-          label: 'Active'
-        }
-      case 'CLOSED':
-        return {
-          color: '#6b7280', // Gray
-          bgColor: '#f9fafb',
-          borderColor: '#6b7280',
-          icon: '✅',
-          label: 'Closed'
-        }
-      default:
-        return {
-          color: '#6b7280', // Gray
-          bgColor: '#f9fafb',
-          borderColor: '#6b7280',
-          icon: '📋',
-          label: 'Unknown'
-        }
-    }
-  }
-
-  return {
-    getStatusConfig
-  }
-}
diff --git a/features/organisms/project-filters/ProjectFilters.vue b/features/organisms/project-filters/ProjectFilters.vue
deleted file mode 100644
index ec5dc97..0000000
--- a/features/organisms/project-filters/ProjectFilters.vue
+++ /dev/null
@@ -1,210 +0,0 @@
-<template>
-  <div class="filters-section">
-    <div class="filters-header">
-      <h3>Filters</h3>
-      <Button variant="ghost" size="sm" @click="clearFilters">Clear All</Button>
-    </div>
-
-    <div class="filters-grid">
-      <!-- Group By Selector -->
-      <div class="filter-group">
-        <label for="group-by-filter">Group By</label>
-        <Select
-          id="group-by-filter"
-          :model-value="selectedGroupBy"
-          :options="groupByOptions"
-          @update:model-value="$emit('update:selectedGroupBy', $event)"
-        />
-      </div>
-
-      <!-- Search -->
-      <div class="filter-group">
-        <label for="search-filter">Search</label>
-        <Input
-          id="search-filter"
-          :model-value="filters.search"
-          type="search"
-          placeholder="Search items..."
-          @update:model-value="updateFilter('search', $event)"
-        />
-      </div>
-
-      <!-- State -->
-      <div class="filter-group">
-        <label for="state-filter">State</label>
-        <Select
-          id="state-filter"
-          :model-value="filters.state"
-          :options="stateOptions"
-          @update:model-value="updateFilter('state', $event)"
-        />
-      </div>
-
-      <!-- Type -->
-      <div class="filter-group">
-        <label for="type-filter">Type</label>
-        <Select
-          id="type-filter"
-          :model-value="filters.type"
-          :options="typeOptions"
-          @update:model-value="updateFilter('type', $event)"
-        />
-      </div>
-
-      <!-- Repository -->
-      <div v-if="repositoryOptions.length > 1" class="filter-group">
-        <label for="repository-filter">Repository</label>
-        <Select
-          id="repository-filter"
-          :model-value="filters.repository"
-          :options="repositoryOptions"
-          @update:model-value="updateFilter('repository', $event)"
-        />
-      </div>
-
-      <!-- Dynamic Custom Field Filters -->
-      <template v-if="customFieldOptions">
-        <div
-          v-for="(options, fieldName) in customFieldOptions"
-          :key="fieldName"
-          class="filter-group"
-        >
-          <template v-if="options.length > 0">
-            <label :for="`${fieldName}-filter`">{{ fieldName }}</label>
-            <MultiSelect
-              :id="`${fieldName}-filter`"
-              :model-value="(filters[fieldName] as string[]) || []"
-              :options="options"
-              :placeholder="`Select ${fieldName}...`"
-              @update:model-value="updateFilter(fieldName, $event)"
-            />
-          </template>
-        </div>
-      </template>
-    </div>
-
-    <div class="results-summary">
-      <span>Showing {{ filteredCount }} of {{ totalCount }} items</span>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-
-interface FilterOptions {
-  search: string
-  state: string
-  type: string
-  repository: string
-  [key: string]: string | string[]
-}
-
-interface SelectOption {
-  value: string
-  label: string
-}
-
-interface Props {
-  filters: FilterOptions
-  selectedGroupBy: string
-  groupByOptions: SelectOption[]
-  stateOptions: SelectOption[]
-  typeOptions: SelectOption[]
-  repositoryOptions: SelectOption[]
-  customFieldOptions: Record<string, SelectOption[]>
-  filteredCount: number
-  totalCount: number
-}
-
-const props = defineProps<Props>()
-
-const emit = defineEmits<{
-  'update:filters': [filters: FilterOptions]
-  'update:selectedGroupBy': [groupField: string]
-  'clear-filters': []
-}>()
-
-
-const updateFilter = (key: string, value: string | string[]) => {
-  emit('update:filters', {
-    ...props.filters,
-    [key]: value
-  })
-}
-
-const clearFilters = () => {
-  emit('clear-filters')
-}
-</script>
-
-<style scoped>
-.filters-section {
-  background: var(--color-white);
-  border-radius: var(--radius-lg);
-  padding: var(--spacing-6);
-  margin-bottom: var(--spacing-6);
-  box-shadow: var(--shadow-sm);
-}
-
-.filters-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: var(--spacing-4);
-}
-
-.filters-header h3 {
-  font-size: var(--font-size-lg);
-  font-weight: var(--font-weight-semibold);
-  color: var(--color-gray-900);
-  margin: 0;
-}
-
-.filters-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: var(--spacing-4);
-  margin-bottom: var(--spacing-4);
-}
-
-.filter-group {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-1);
-}
-
-.filter-group label {
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-  color: var(--color-gray-700);
-}
-
-.results-summary {
-  color: var(--color-gray-500);
-  font-size: var(--font-size-sm);
-  text-align: center;
-  padding-top: var(--spacing-4);
-  border-top: var(--border-width-thin) solid var(--color-gray-100);
-}
-
-.loading-text {
-  color: var(--color-gray-500);
-  font-style: italic;
-}
-
-.view-indicator {
-  color: var(--color-gray-500);
-  font-style: italic;
-  margin-left: var(--spacing-2);
-}
-
-@media (max-width: 768px) {
-  .filters-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .filters-section {
-    padding: var(--spacing-4);
-  }
-}
-</style>
\ No newline at end of file
diff --git a/features/organisms/project-filters/useProjectFilters.ts b/features/organisms/project-filters/useProjectFilters.ts
deleted file mode 100644
index 254a879..0000000
--- a/features/organisms/project-filters/useProjectFilters.ts
+++ /dev/null
@@ -1,216 +0,0 @@
-/**
- * Composable for handling project item filtering
- */
-
-interface ProjectItem {
-  id: string
-  type: 'ISSUE' | 'PULL_REQUEST' | 'DRAFT_ISSUE'
-  number?: number
-  title: string
-  url: string
-  state: string
-  repository: string
-  repository_owner: string
-  assignees: Array<{
-    login: string
-    avatarUrl: string
-  }>
-  labels: Array<{
-    name: string
-    color: string
-  }>
-  created_at: string
-  updated_at: string
-  status?: string
-  priority?: string
-  custom_fields: Record<string, string>
-}
-
-interface FilterOptions {
-  search: string
-  state: string
-  type: string
-  repository: string
-  // Dynamic custom field filters (can be string or array for multi-select)
-  [key: string]: string | string[]
-}
-
-interface SelectOption {
-  value: string
-  label: string
-}
-
-export const useProjectFilters = () => {
-  /**
-   * Create filter options from items
-   */
-  const createFilterOptions = (items: ProjectItem[]) => {
-    const stateOptions = computed((): SelectOption[] => {
-      if (!items.length) return []
-      const states = [...new Set(items.map(item => item.state))]
-      return [
-        { value: 'all', label: 'All States' },
-        ...states.map(state => ({ value: state, label: state }))
-      ]
-    })
-
-    const typeOptions: SelectOption[] = [
-      { value: 'all', label: 'All Types' },
-      { value: 'ISSUE', label: 'Issues' },
-      { value: 'PULL_REQUEST', label: 'Pull Requests' },
-      { value: 'DRAFT_ISSUE', label: 'Draft Issues' }
-    ]
-
-    const repositoryOptions = computed((): SelectOption[] => {
-      if (!items.length) return []
-      const repositories = [...new Set(items.map(item => `${item.repository_owner}/${item.repository}`))]
-      return [
-        { value: 'all', label: 'All Repositories' },
-        ...repositories.map(repo => ({ value: repo, label: repo }))
-      ]
-    })
-
-    // Dynamically create filter options for all custom fields
-    const customFieldOptions = computed((): Record<string, SelectOption[]> => {
-      if (!items.length) return {}
-
-      // Fields to exclude from filters
-      const excludedFields = ['Devs', 'Sub-issues progress_data']
-
-      const fieldOptionsMap: Record<string, Set<string>> = {}
-
-      // Collect all unique values for each custom field
-      for (const item of items) {
-        for (const [fieldName, fieldValue] of Object.entries(item.custom_fields || {})) {
-          // Skip excluded fields
-          if (excludedFields.includes(fieldName)) {
-            continue
-          }
-
-          if (!fieldOptionsMap[fieldName]) {
-            fieldOptionsMap[fieldName] = new Set()
-          }
-          if (fieldValue) {
-            fieldOptionsMap[fieldName].add(fieldValue)
-          }
-        }
-      }
-
-      // Convert to SelectOption arrays (no "All" option for multi-select)
-      const result: Record<string, SelectOption[]> = {}
-      for (const [fieldName, values] of Object.entries(fieldOptionsMap)) {
-        result[fieldName] = Array.from(values).sort().map(value => ({ value, label: value }))
-      }
-
-      return result
-    })
-
-    return {
-      stateOptions,
-      typeOptions,
-      repositoryOptions,
-      customFieldOptions
-    }
-  }
-
-  /**
-   * Check if item matches search criteria
-   */
-  const matchesSearch = (item: ProjectItem, search: string): boolean => {
-    if (!search) return true
-
-    const searchLower = search.toLowerCase()
-    return (
-      item.title.toLowerCase().includes(searchLower) ||
-      item.repository.toLowerCase().includes(searchLower) ||
-      item.repository_owner.toLowerCase().includes(searchLower) ||
-      (item.number && item.number.toString().includes(search)) ||
-      item.assignees.some(assignee => assignee.login.toLowerCase().includes(searchLower)) ||
-      item.labels.some(label => label.name.toLowerCase().includes(searchLower)) ||
-      Object.values(item.custom_fields || {}).some(value =>
-        value.toLowerCase().includes(searchLower)
-      )
-    )
-  }
-
-  /**
-   * Check if item matches filter criteria
-   */
-  const matchesFilters = (item: ProjectItem, filters: FilterOptions): boolean => {
-    // State filter
-    if (filters.state !== 'all' && item.state !== filters.state) {
-      return false
-    }
-
-    // Type filter
-    if (filters.type !== 'all' && item.type !== filters.type) {
-      return false
-    }
-
-    // Repository filter
-    if (filters.repository !== 'all') {
-      const itemRepo = `${item.repository_owner}/${item.repository}`
-      if (itemRepo !== filters.repository) {
-        return false
-      }
-    }
-
-    // Dynamic custom field filters (support both single and multi-select)
-    for (const [filterKey, filterValue] of Object.entries(filters)) {
-      // Skip built-in filters
-      if (['search', 'state', 'type', 'repository'].includes(filterKey)) {
-        continue
-      }
-
-      // Check custom field filter
-      if (filterValue) {
-        const itemValue = item.custom_fields?.[filterKey]
-
-        // Handle array (multi-select)
-        if (Array.isArray(filterValue)) {
-          if (filterValue.length > 0 && !filterValue.includes(itemValue)) {
-            return false
-          }
-        }
-        // Handle string (single select)
-        else if (filterValue !== 'all' && itemValue !== filterValue) {
-          return false
-        }
-      }
-    }
-
-    return true
-  }
-
-  /**
-   * Filter items based on search and filter criteria
-   */
-  const filterItems = (items: ProjectItem[], filters: FilterOptions): ProjectItem[] => {
-    return items.filter(item => {
-      // Search filter
-      if (filters.search && !matchesSearch(item, filters.search)) {
-        return false
-      }
-
-      return matchesFilters(item, filters)
-    })
-  }
-
-  /**
-   * Create default filter state
-   */
-  const createDefaultFilters = (): FilterOptions => ({
-    search: '',
-    state: 'all',
-    type: 'all',
-    repository: 'all'
-  })
-
-  return {
-    createFilterOptions,
-    filterItems,
-    matchesSearch,
-    matchesFilters,
-    createDefaultFilters
-  }
-}
\ No newline at end of file
diff --git a/features/organisms/project-graph/ProjectProgressGraph.vue b/features/organisms/project-graph/ProjectProgressGraph.vue
deleted file mode 100644
index fc00861..0000000
--- a/features/organisms/project-graph/ProjectProgressGraph.vue
+++ /dev/null
@@ -1,285 +0,0 @@
-<template>
-  <div class="progress-graph-container">
-    <div class="graph-header">
-      <Header :level="3" size="base" variant="primary">
-        Progress Over Time (Last 30 Days)
-      </Header>
-      <Text v-if="currentData" variant="tertiary" size="sm">
-        {{ currentData.open }} open, {{ currentData.closed }} closed
-      </Text>
-    </div>
-
-    <div v-if="timeSeriesData.length > 0" class="graph-content">
-      <!-- Time Series Area Chart -->
-      <svg class="chart" :viewBox="`0 0 ${chartWidth} ${chartHeight}`" preserveAspectRatio="xMidYMid meet">
-        <!-- Grid lines -->
-        <g class="grid">
-          <line
-            v-for="i in 5"
-            :key="`grid-${i}`"
-            :x1="padding.left"
-            :y1="padding.top + ((chartHeight - padding.top - padding.bottom) / 4) * (i - 1)"
-            :x2="chartWidth - padding.right"
-            :y2="padding.top + ((chartHeight - padding.top - padding.bottom) / 4) * (i - 1)"
-            stroke="var(--color-gray-200)"
-            stroke-width="1"
-          />
-        </g>
-
-        <!-- Closed area (stacked on bottom) -->
-        <path
-          :d="closedAreaPath"
-          fill="var(--color-success-500)"
-          fill-opacity="0.3"
-        />
-        <path
-          :d="closedLinePath"
-          fill="none"
-          stroke="var(--color-success-500)"
-          stroke-width="2"
-        />
-
-        <!-- Open area (stacked on top of closed) -->
-        <path
-          :d="openAreaPath"
-          fill="var(--color-gray-400)"
-          fill-opacity="0.3"
-        />
-        <path
-          :d="openLinePath"
-          fill="none"
-          stroke="var(--color-gray-400)"
-          stroke-width="2"
-        />
-
-        <!-- X-axis labels (dates) -->
-        <g class="x-axis">
-          <text
-            v-for="(point, index) in timeSeriesData"
-            v-if="index % 5 === 0 || index === timeSeriesData.length - 1"
-            :key="`x-label-${index}`"
-            :x="getX(index)"
-            :y="chartHeight - padding.bottom + 20"
-            text-anchor="middle"
-            font-size="11"
-            fill="var(--color-gray-500)"
-          >
-            {{ formatDateLabel(point.date) }}
-          </text>
-        </g>
-
-        <!-- Y-axis labels (counts) -->
-        <g class="y-axis">
-          <text
-            v-for="i in 5"
-            :key="`y-label-${i}`"
-            :x="padding.left - 10"
-            :y="padding.top + ((chartHeight - padding.top - padding.bottom) / 4) * (i - 1) + 5"
-            text-anchor="end"
-            font-size="11"
-            fill="var(--color-gray-500)"
-          >
-            {{ Math.round(maxValue - (maxValue / 4) * (i - 1)) }}
-          </text>
-        </g>
-      </svg>
-
-      <!-- Legend -->
-      <div class="graph-legend">
-        <div class="legend-item">
-          <div class="legend-color closed" />
-          <Text variant="secondary" size="sm">Closed</Text>
-        </div>
-        <div class="legend-item">
-          <div class="legend-color open" />
-          <Text variant="secondary" size="sm">Open</Text>
-        </div>
-      </div>
-    </div>
-
-    <div v-else class="empty-state">
-      <Text variant="tertiary" size="sm">
-        No items to display
-      </Text>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useProjectGraph } from './useProjectGraph'
-
-interface ProjectItem {
-  id: string
-  type: 'ISSUE' | 'PULL_REQUEST' | 'DRAFT_ISSUE'
-  state: string
-  created_at: string
-  updated_at: string
-  [key: string]: any
-}
-
-interface Props {
-  items: ProjectItem[]
-}
-
-const props = defineProps<Props>()
-
-const { calculateTimeSeriesData, formatDateLabel } = useProjectGraph()
-
-const timeSeriesData = computed(() => calculateTimeSeriesData(props.items))
-const currentData = computed(() => timeSeriesData.value[timeSeriesData.value.length - 1])
-
-// Chart dimensions
-const chartWidth = 800
-const chartHeight = 300
-const padding = { top: 20, right: 20, bottom: 40, left: 50 }
-
-// Calculate max value for Y-axis scaling
-const maxValue = computed(() => {
-  if (timeSeriesData.value.length === 0) return 0
-  return Math.max(...timeSeriesData.value.map(d => d.total)) || 1
-})
-
-// Helper to get X coordinate for a data point
-const getX = (index: number): number => {
-  const dataWidth = chartWidth - padding.left - padding.right
-  const step = dataWidth / (timeSeriesData.value.length - 1 || 1)
-  return padding.left + (index * step)
-}
-
-// Helper to get Y coordinate for a value
-const getY = (value: number): number => {
-  const dataHeight = chartHeight - padding.top - padding.bottom
-  const scale = dataHeight / maxValue.value
-  return chartHeight - padding.bottom - (value * scale)
-}
-
-// Generate SVG path for closed area (stacked at bottom)
-const closedAreaPath = computed(() => {
-  if (timeSeriesData.value.length === 0) return ''
-
-  const points = timeSeriesData.value.map((d, i) => ({
-    x: getX(i),
-    y: getY(d.closed)
-  }))
-
-  let path = `M ${points[0].x} ${chartHeight - padding.bottom}`
-  points.forEach(p => {
-    path += ` L ${p.x} ${p.y}`
-  })
-  path += ` L ${points[points.length - 1].x} ${chartHeight - padding.bottom} Z`
-
-  return path
-})
-
-// Generate SVG path for closed line
-const closedLinePath = computed(() => {
-  if (timeSeriesData.value.length === 0) return ''
-
-  const points = timeSeriesData.value.map((d, i) => ({
-    x: getX(i),
-    y: getY(d.closed)
-  }))
-
-  return 'M ' + points.map(p => `${p.x} ${p.y}`).join(' L ')
-})
-
-// Generate SVG path for open area (stacked on top of closed)
-const openAreaPath = computed(() => {
-  if (timeSeriesData.value.length === 0) return ''
-
-  const points = timeSeriesData.value.map((d, i) => ({
-    x: getX(i),
-    yBottom: getY(d.closed),
-    yTop: getY(d.closed + d.open)
-  }))
-
-  let path = `M ${points[0].x} ${points[0].yBottom}`
-  points.forEach(p => {
-    path += ` L ${p.x} ${p.yTop}`
-  })
-  for (let i = points.length - 1; i >= 0; i--) {
-    path += ` L ${points[i].x} ${points[i].yBottom}`
-  }
-  path += ' Z'
-
-  return path
-})
-
-// Generate SVG path for open line
-const openLinePath = computed(() => {
-  if (timeSeriesData.value.length === 0) return ''
-
-  const points = timeSeriesData.value.map((d, i) => ({
-    x: getX(i),
-    y: getY(d.closed + d.open)
-  }))
-
-  return 'M ' + points.map(p => `${p.x} ${p.y}`).join(' L ')
-})
-</script>
-
-<style scoped>
-.progress-graph-container {
-  background: var(--color-bg-primary);
-  border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-lg);
-  padding: var(--spacing-6);
-  margin-bottom: var(--spacing-6);
-  box-shadow: var(--shadow-sm);
-}
-
-.graph-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: var(--spacing-5);
-}
-
-.graph-content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-4);
-}
-
-.chart {
-  width: 100%;
-  height: auto;
-  max-height: 300px;
-}
-
-.graph-legend {
-  display: flex;
-  gap: var(--spacing-6);
-  justify-content: center;
-  flex-wrap: wrap;
-  margin-top: var(--spacing-3);
-}
-
-.legend-item {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-2);
-}
-
-.legend-color {
-  width: 16px;
-  height: 16px;
-  border-radius: var(--radius-sm);
-  border: 1px solid var(--color-border-default);
-}
-
-.legend-color.closed {
-  background: var(--color-success-500);
-}
-
-.legend-color.open {
-  background: var(--color-gray-400);
-}
-
-.empty-state {
-  display: flex;
-  justify-content: center;
-  padding: var(--spacing-8) 0;
-}
-</style>
diff --git a/features/organisms/project-graph/useProjectGraph.ts b/features/organisms/project-graph/useProjectGraph.ts
deleted file mode 100644
index 7a9d784..0000000
--- a/features/organisms/project-graph/useProjectGraph.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-/**
- * Composable for project progress graph data aggregation
- * Calculates time-series data showing open vs closed items over time
- */
-
-interface ProjectItem {
-  id: string
-  type: 'ISSUE' | 'PULL_REQUEST' | 'DRAFT_ISSUE'
-  state: string
-  created_at: string
-  updated_at: string
-  [key: string]: any
-}
-
-interface TimeSeriesPoint {
-  date: string
-  open: number
-  closed: number
-  total: number
-}
-
-export const useProjectGraph = () => {
-  /**
-   * Calculate time-series data for the last 30 days
-   * Shows how many items were open vs closed on each day
-   */
-  const calculateTimeSeriesData = (items: ProjectItem[]): TimeSeriesPoint[] => {
-    if (items.length === 0) {
-      return []
-    }
-
-    // Generate array of last 30 days
-    const days = 30
-    const today = new Date()
-    today.setHours(0, 0, 0, 0)
-
-    const timePoints: TimeSeriesPoint[] = []
-
-    for (let i = days - 1; i >= 0; i--) {
-      const date = new Date(today)
-      date.setDate(date.getDate() - i)
-
-      // Count items that existed on this date
-      let open = 0
-      let closed = 0
-
-      for (const item of items) {
-        const createdDate = new Date(item.created_at)
-        createdDate.setHours(0, 0, 0, 0)
-
-        // Item must have been created before or on this date
-        if (createdDate <= date) {
-          const isClosed = item.state.toLowerCase() === 'closed'
-
-          if (isClosed) {
-            closed++
-          } else {
-            open++
-          }
-        }
-      }
-
-      const total = open + closed
-
-      timePoints.push({
-        date: date.toISOString().split('T')[0], // YYYY-MM-DD
-        open,
-        closed,
-        total
-      })
-    }
-
-    return timePoints
-  }
-
-  /**
-   * Format date for display (MM/DD)
-   */
-  const formatDateLabel = (dateStr: string): string => {
-    const date = new Date(dateStr)
-    const month = date.getMonth() + 1
-    const day = date.getDate()
-    return `${month}/${day}`
-  }
-
-  return {
-    calculateTimeSeriesData,
-    formatDateLabel
-  }
-}
diff --git a/features/organisms/project-items-table/ProjectItemsTable.vue b/features/organisms/project-items-table/ProjectItemsTable.vue
deleted file mode 100644
index 2495457..0000000
--- a/features/organisms/project-items-table/ProjectItemsTable.vue
+++ /dev/null
@@ -1,504 +0,0 @@
-<template>
-  <div class="items-table-container">
-    <table class="items-table">
-      <thead>
-        <tr>
-          <th>Type</th>
-          <th>#</th>
-          <th>Title</th>
-          <th>Repository</th>
-          <th>State</th>
-          <th v-if="showStatus">Status</th>
-          <th v-if="showPriority">Priority</th>
-          <th v-if="showSize">Size</th>
-          <th v-if="showParentIssue">Parent Issue</th>
-          <th v-if="showSubIssuesProgress">Sub-Issues</th>
-          <th>Assignees</th>
-          <th>Labels</th>
-          <th>Updated</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="item in items" :key="item.id" class="item-row">
-          <!-- Type -->
-          <td class="type-cell">
-            <span class="type-icon">{{ getTypeIcon(item.type) }}</span>
-            <span class="type-text">{{ getTypeText(item.type) }}</span>
-          </td>
-
-          <!-- Number -->
-          <td class="number-cell">
-            <a v-if="item.number" :href="item.url" target="_blank" class="item-number-link">
-              #{{ item.number }}
-            </a>
-            <span v-else class="no-number">—</span>
-          </td>
-
-          <!-- Title -->
-          <td class="title-cell">
-            <a :href="item.url" target="_blank" class="item-title">
-              {{ item.title }}
-            </a>
-          </td>
-
-          <!-- Repository -->
-          <td class="repository-cell">
-            <span class="repository-name">{{ item.repository }}</span>
-          </td>
-
-          <!-- State -->
-          <td class="state-cell">
-            <span
-              class="state-badge"
-              :style="{ backgroundColor: getStateColor(item.state) + '20', color: getStateColor(item.state) }"
-            >
-              {{ item.state }}
-            </span>
-          </td>
-
-          <!-- Status -->
-          <td v-if="showStatus" class="status-cell">
-            <span v-if="item.status" class="status-badge">{{ item.status }}</span>
-            <span v-else class="no-status">—</span>
-          </td>
-
-          <!-- Priority -->
-          <td v-if="showPriority" class="priority-cell">
-            <span v-if="item.priority || item.custom_fields['Priority']" class="priority-badge">
-              {{ item.priority || item.custom_fields['Priority'] }}
-            </span>
-            <span v-else class="no-priority">—</span>
-          </td>
-
-          <!-- Size -->
-          <td v-if="showSize" class="size-cell">
-            <span v-if="item.custom_fields['Size']" class="size-badge">
-              {{ item.custom_fields['Size'] }}
-            </span>
-            <span v-else class="no-size">—</span>
-          </td>
-
-          <!-- Parent Issue -->
-          <td v-if="showParentIssue" class="parent-issue-cell">
-            <span v-if="item.custom_fields['Parent issue']" class="parent-issue-text">
-              {{ item.custom_fields['Parent issue'] }}
-            </span>
-            <span v-else class="no-parent-issue">—</span>
-          </td>
-
-          <!-- Sub-Issues Progress -->
-          <td v-if="showSubIssuesProgress" class="sub-issues-cell">
-            <div v-if="getSubIssuesData(item)" class="sub-issues-progress">
-              <div class="progress-bar-container">
-                <div
-                  v-for="i in getSubIssuesData(item).total"
-                  :key="i"
-                  class="progress-bar"
-                  :class="{
-                    completed: i <= getSubIssuesData(item).completed,
-                    incomplete: i > getSubIssuesData(item).completed
-                  }"
-                  :style="{ width: calculateBarWidth(getSubIssuesData(item).total) }"
-                />
-              </div>
-              <span class="progress-text">
-                {{ getSubIssuesData(item).completed }}/{{ getSubIssuesData(item).total }}
-              </span>
-            </div>
-            <span v-else class="no-sub-issues">—</span>
-          </td>
-
-          <!-- Assignees -->
-          <td class="assignees-cell">
-            <div v-if="item.assignees.length > 0" class="assignees">
-              <img
-                v-for="assignee in item.assignees.slice(0, 3)"
-                :key="assignee.login"
-                :src="assignee.avatarUrl"
-                :alt="assignee.login"
-                :title="assignee.login"
-                class="assignee-avatar"
-              >
-              <span v-if="item.assignees.length > 3" class="assignee-more">
-                +{{ item.assignees.length - 3 }}
-              </span>
-            </div>
-            <span v-else class="no-assignees">—</span>
-          </td>
-
-          <!-- Labels -->
-          <td class="labels-cell">
-            <div v-if="item.labels.length > 0" class="labels">
-              <span
-                v-for="label in item.labels.slice(0, 3)"
-                :key="label.name"
-                class="label-badge"
-                :style="{ backgroundColor: '#' + label.color + '20', color: '#' + label.color }"
-              >
-                {{ label.name }}
-              </span>
-              <span v-if="item.labels.length > 3" class="labels-more">
-                +{{ item.labels.length - 3 }}
-              </span>
-            </div>
-            <span v-else class="no-labels">—</span>
-          </td>
-
-          <!-- Updated -->
-          <td class="updated-cell">
-            <span class="updated-date">{{ formatDate(item.updated_at) }}</span>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useProjectItemsTable } from './useProjectItemsTable'
-
-interface ProjectItem {
-  id: string
-  type: 'ISSUE' | 'PULL_REQUEST' | 'DRAFT_ISSUE'
-  number?: number
-  title: string
-  url: string
-  state: string
-  repository: string
-  repository_owner: string
-  assignees: Array<{
-    login: string
-    avatarUrl: string
-  }>
-  labels: Array<{
-    name: string
-    color: string
-  }>
-  created_at: string
-  updated_at: string
-  status?: string
-  priority?: string
-  custom_fields: Record<string, string>
-}
-
-interface Props {
-  items: ProjectItem[]
-  showStatus?: boolean
-  showPriority?: boolean
-  showSize?: boolean
-  showParentIssue?: boolean
-  showSubIssuesProgress?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  showStatus: false,
-  showPriority: false,
-  showSize: false,
-  showParentIssue: false,
-  showSubIssuesProgress: false
-})
-
-const { getTypeIcon, getTypeText, getStateColor } = useProjectItemsTable()
-const { formatDate } = useDateTime()
-
-// Helper function to parse sub-issues progress data
-const getSubIssuesData = (item: ProjectItem): { completed: number; total: number } | null => {
-  const dataStr = item.custom_fields['Sub-issues progress_data']
-  if (!dataStr) return null
-
-  try {
-    const data = JSON.parse(dataStr)
-    if (data.completed !== undefined && data.total !== undefined && data.total > 0) {
-      return data
-    }
-  } catch (e) {
-    console.error('Failed to parse sub-issues progress data:', e)
-  }
-  return null
-}
-
-// Calculate bar width based on total number of sub-issues
-const calculateBarWidth = (total: number): string => {
-  const containerWidth = 100 // px
-  const gap = 1 // px between bars
-  const availableWidth = containerWidth - (gap * (total - 1))
-  const barWidth = availableWidth / total
-
-  // Clamp between min (2px) and max (10px)
-  const clampedWidth = Math.max(2, Math.min(10, barWidth))
-  return `${clampedWidth}px`
-}
-</script>
-
-<style scoped>
-.items-table-container {
-  overflow-x: auto;
-}
-
-.items-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: var(--font-size-sm);
-}
-
-.items-table th {
-  background: var(--color-gray-50);
-  padding: var(--spacing-3);
-  text-align: left;
-  font-weight: var(--font-weight-semibold);
-  color: var(--color-gray-700);
-  border-bottom: var(--border-width-thin) solid var(--color-gray-200);
-  white-space: nowrap;
-}
-
-.items-table td {
-  padding: var(--spacing-3);
-  border-bottom: var(--border-width-thin) solid var(--color-gray-100);
-  vertical-align: middle;
-}
-
-.item-row:hover {
-  background: var(--color-gray-50);
-}
-
-.type-cell {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-1-5);
-  min-width: 80px;
-}
-
-.type-icon {
-  font-size: var(--font-size-base);
-}
-
-.type-text {
-  font-size: var(--font-size-xs);
-  color: var(--color-gray-500);
-  font-weight: var(--font-weight-medium);
-}
-
-.number-cell {
-  min-width: 60px;
-  text-align: right;
-}
-
-.item-number-link {
-  color: var(--color-gray-500);
-  text-decoration: none;
-  font-weight: var(--font-weight-normal);
-  font-size: var(--font-size-sm);
-}
-
-.item-number-link:hover {
-  color: var(--color-blue-600);
-  text-decoration: underline;
-}
-
-.no-number {
-  color: var(--color-gray-400);
-}
-
-.title-cell {
-  min-width: 300px;
-}
-
-.item-title {
-  color: var(--color-blue-600);
-  text-decoration: none;
-  font-weight: var(--font-weight-medium);
-  line-height: 1.4;
-}
-
-.item-title:hover {
-  text-decoration: underline;
-}
-
-.repository-cell {
-  min-width: 120px;
-}
-
-.repository-name {
-  color: var(--color-gray-500);
-  font-size: var(--font-size-sm);
-}
-
-.state-cell {
-  min-width: 80px;
-}
-
-.state-badge {
-  padding: var(--spacing-1) var(--spacing-2);
-  border-radius: var(--radius-full);
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
-  text-transform: capitalize;
-}
-
-.status-cell {
-  min-width: 100px;
-}
-
-.status-badge {
-  background: var(--color-gray-100);
-  color: var(--color-gray-700);
-  padding: var(--spacing-1) var(--spacing-2);
-  border-radius: var(--radius-full);
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
-}
-
-.priority-cell {
-  min-width: 90px;
-}
-
-.priority-badge {
-  background: var(--color-orange-50);
-  color: var(--color-orange-500);
-  padding: var(--spacing-1) var(--spacing-2);
-  border-radius: var(--radius-full);
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
-}
-
-.size-cell {
-  min-width: 70px;
-  text-align: center;
-}
-
-.size-badge {
-  background: var(--color-blue-50);
-  color: var(--color-primary-600);
-  padding: var(--spacing-1) var(--spacing-2);
-  border-radius: var(--radius-full);
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-bold);
-}
-
-.parent-issue-cell {
-  min-width: 200px;
-  max-width: 300px;
-}
-
-.parent-issue-text {
-  color: var(--color-gray-600);
-  font-size: var(--font-size-sm);
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.no-status, .no-priority, .no-size, .no-parent-issue, .no-sub-issues, .no-assignees, .no-labels {
-  color: var(--color-gray-400);
-}
-
-.sub-issues-cell {
-  min-width: 160px;
-  max-width: 200px;
-}
-
-.sub-issues-progress {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-2);
-}
-
-.progress-bar-container {
-  width: 100px;
-  height: 8px;
-  display: flex;
-  gap: 1px;
-  background: var(--color-gray-100);
-  border-radius: var(--radius-sm);
-  overflow: hidden;
-  flex-shrink: 0;
-}
-
-.progress-bar {
-  height: 100%;
-  transition: background-color 0.2s;
-}
-
-.progress-bar.completed {
-  background-color: var(--color-success-500);
-}
-
-.progress-bar.incomplete {
-  background-color: var(--color-gray-200);
-}
-
-.progress-text {
-  font-size: var(--font-size-xs);
-  color: var(--color-gray-600);
-  white-space: nowrap;
-  font-weight: var(--font-weight-medium);
-}
-
-.assignees-cell {
-  min-width: 120px;
-}
-
-.assignees {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-1);
-}
-
-.assignee-avatar {
-  width: 24px;
-  height: 24px;
-  border-radius: var(--radius-full);
-  border: var(--border-width-thin) solid var(--color-gray-200);
-}
-
-.assignee-more {
-  font-size: var(--font-size-xs);
-  color: var(--color-gray-500);
-  margin-left: var(--spacing-1);
-}
-
-.labels-cell {
-  min-width: 150px;
-}
-
-.labels {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--spacing-1);
-  align-items: center;
-}
-
-.label-badge {
-  padding: var(--spacing-0-5) var(--spacing-1-5);
-  border-radius: var(--radius-md);
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
-  white-space: nowrap;
-}
-
-.labels-more {
-  font-size: var(--font-size-xs);
-  color: var(--color-gray-500);
-}
-
-.updated-cell {
-  min-width: 80px;
-}
-
-.updated-date {
-  color: var(--color-gray-500);
-  font-size: var(--font-size-sm);
-}
-
-@media (max-width: 768px) {
-  .items-table {
-    font-size: var(--font-size-sm);
-  }
-
-  .items-table th,
-  .items-table td {
-    padding: var(--spacing-2);
-  }
-}
-</style>
diff --git a/features/organisms/project-items-table/useProjectItemsTable.ts b/features/organisms/project-items-table/useProjectItemsTable.ts
deleted file mode 100644
index e9ed78c..0000000
--- a/features/organisms/project-items-table/useProjectItemsTable.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * Composable for project items table logic
- * Provides helper functions for formatting and displaying project items
- */
-export const useProjectItemsTable = () => {
-  /**
-   * Get icon emoji for item type
-   */
-  const getTypeIcon = (type: string): string => {
-    switch (type) {
-      case 'ISSUE': return '📘'
-      case 'PULL_REQUEST': return '🔀'
-      case 'DRAFT_ISSUE': return '📝'
-      default: return '📋'
-    }
-  }
-
-  /**
-   * Get short text label for item type
-   */
-  const getTypeText = (type: string): string => {
-    switch (type) {
-      case 'PULL_REQUEST': return 'PR'
-      case 'DRAFT_ISSUE': return 'Draft'
-      case 'ISSUE': return 'Issue'
-      default: return type
-    }
-  }
-
-  /**
-   * Get color for item state using design system tokens
-   */
-  const getStateColor = (state: string): string => {
-    switch (state.toLowerCase()) {
-      case 'open': return 'var(--color-success-500)'
-      case 'closed': return 'var(--color-gray-500)'
-      case 'merged': return 'var(--color-purple-500)'
-      default: return 'var(--color-gray-500)'
-    }
-  }
-
-  return {
-    getTypeIcon,
-    getTypeText,
-    getStateColor
-  }
-}
diff --git a/features/organisms/project-view-renderer/ProjectViewRenderer.vue b/features/organisms/project-view-renderer/ProjectViewRenderer.vue
deleted file mode 100644
index 709f171..0000000
--- a/features/organisms/project-view-renderer/ProjectViewRenderer.vue
+++ /dev/null
@@ -1,201 +0,0 @@
-<script setup lang="ts">
-import type { ViewItem } from '../../../composables/useViewFiltering'
-import { useViewFiltering } from '../../../composables/useViewFiltering'
-import { useViewGrouping } from '../../../composables/useViewGrouping'
-import { useViewSorting } from '../../../composables/useViewSorting'
-import type { ProjectV2View } from '../../../server/utils/github-graphql'
-
-interface Props {
-  view: ProjectV2View
-  items: ViewItem[]
-}
-
-const props = defineProps<Props>()
-
-const { filterItems } = useViewFiltering()
-const { groupItems, groupItemsDual } = useViewGrouping()
-const { sortItemsMultiple } = useViewSorting()
-
-// Apply view configuration to items
-const processedItems = computed(() => {
-  let result = props.items
-
-  // 1. Apply filters
-  if (props.view.filter) {
-    result = filterItems(result, props.view.filter)
-  }
-
-  // 2. Apply sorting
-  if (props.view.sortByFields.nodes.length > 0) {
-    const sortConfigs = props.view.sortByFields.nodes.map(sort => ({
-      field: sort.field.name,
-      direction: sort.direction
-    }))
-    result = sortItemsMultiple(result, sortConfigs)
-  }
-
-  return result
-})
-
-// Group items (after filtering and sorting)
-const groupedItems = computed(() => {
-  // Board layouts can have dual grouping: swimlanes (horizontal) + columns (vertical)
-  if (props.view.layout === 'BOARD_LAYOUT') {
-    const swimlaneField = props.view.groupByFields.nodes[0]
-    const columnField = props.view.verticalGroupByFields.nodes[0]
-
-    // Find full field configurations
-    const swimlaneFieldConfig = swimlaneField?.name
-      ? props.view.fields.nodes.find(f => f.name === swimlaneField.name)
-      : undefined
-
-    const columnFieldConfig = columnField?.name
-      ? props.view.fields.nodes.find(f => f.name === columnField.name)
-      : undefined
-
-    // If both swimlanes and columns exist, use dual grouping
-    // Primary = columns (Status), Secondary = swimlanes (Parent issue)
-    if (swimlaneField && columnField) {
-      return groupItemsDual(
-        processedItems.value,
-        columnField.name,
-        columnFieldConfig,
-        swimlaneField.name,
-        swimlaneFieldConfig
-      )
-    }
-
-    // If only columns exist, use single grouping
-    if (columnField) {
-      return groupItems(processedItems.value, columnField.name, columnFieldConfig)
-    }
-  }
-
-  // For table/roadmap layouts, use groupByFields
-  const groupByFieldConfig = props.view.groupByFields.nodes[0]
-  const groupByFieldName = groupByFieldConfig?.name
-
-  const fullFieldConfig = groupByFieldName
-    ? props.view.fields.nodes.find(f => f.name === groupByFieldName)
-    : undefined
-
-  return groupItems(processedItems.value, groupByFieldName, fullFieldConfig)
-})
-
-// Extract visible fields from view
-const visibleFields = computed(() => {
-  return props.view.fields.nodes.map(f => f.name)
-})
-</script>
-
-<template>
-  <div class="project-view-renderer">
-    <!-- View Info -->
-    <div class="view-info">
-      <div class="view-info__header">
-        <Header :level="3" size="lg" variant="primary">
-          {{ view.name }}
-        </Header>
-        <span class="view-info__badge">
-          {{ view.layout.replace('_LAYOUT', '').toLowerCase() }}
-        </span>
-      </div>
-
-      <div class="view-info__stats">
-        <Text variant="tertiary" size="sm">
-          {{ processedItems.length }} {{ processedItems.length === 1 ? 'item' : 'items' }}
-        </Text>
-        <Text v-if="view.filter" variant="tertiary" size="sm">•</Text>
-        <Text v-if="view.filter" variant="tertiary" size="sm" class="view-info__filter">
-          Filter: {{ view.filter }}
-        </Text>
-      </div>
-    </div>
-
-    <!-- Layout-specific rendering -->
-    <div class="view-content">
-      <!-- Table Layout -->
-      <TableLayout
-        v-if="view.layout === 'TABLE_LAYOUT'"
-        :groups="groupedItems"
-        :visible-fields="visibleFields"
-      />
-
-      <!-- Board Layout -->
-      <BoardLayout
-        v-else-if="view.layout === 'BOARD_LAYOUT'"
-        :groups="groupedItems"
-      />
-
-      <!-- Roadmap Layout -->
-      <RoadmapLayout
-        v-else-if="view.layout === 'ROADMAP_LAYOUT'"
-        :groups="groupedItems"
-      />
-
-      <!-- Fallback -->
-      <div v-else class="view-content__unsupported">
-        <Text variant="secondary" size="base">
-          Layout type "{{ view.layout }}" is not yet supported.
-        </Text>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.project-view-renderer {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-4);
-}
-
-.view-info {
-  background: var(--color-white);
-  padding: var(--spacing-4);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-sm);
-}
-
-.view-info__header {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-3);
-  margin-bottom: var(--spacing-2);
-}
-
-.view-info__badge {
-  font-size: var(--font-size-xs);
-  font-weight: 600;
-  text-transform: capitalize;
-  padding: 4px 12px;
-  border-radius: var(--radius-full);
-  background: var(--color-primary-100);
-  color: var(--color-primary-700);
-}
-
-.view-info__stats {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-2);
-  flex-wrap: wrap;
-}
-
-.view-info__filter {
-  font-family: monospace;
-  background: var(--color-gray-100);
-  padding: 2px 8px;
-  border-radius: var(--radius-sm);
-}
-
-.view-content {
-  min-height: 200px;
-}
-
-.view-content__unsupported {
-  padding: var(--spacing-10);
-  text-align: center;
-  background: var(--color-gray-50);
-  border-radius: var(--radius-md);
-}
-</style>
diff --git a/features/organisms/pull-request-card/PullRequestCard.vue b/features/organisms/pull-request-card/PullRequestCard.vue
index b7aa4dd..54f8409 100644
--- a/features/organisms/pull-request-card/PullRequestCard.vue
+++ b/features/organisms/pull-request-card/PullRequestCard.vue
@@ -48,298 +48,195 @@ interface PullRequest {
 }
 
 interface Props {
-  /**
-   * The pull request data
-   */
   pullRequest: PullRequest
-  /**
-   * Whether to show the repository name
-   */
   showRepository?: boolean
-  /**
-   * Custom CSS classes
-   */
-  class?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   showRepository: true,
-  class: ''
 })
 
 const {
   formatTimeAgo,
-  getStateClass,
   getStateIcon,
-  getStateBorderColor,
+  getStateRowColors,
   getCheckIcon,
-  getCheckLabel,
   getReviewIcon,
-  getReviewLabel
 } = usePullRequestCard()
 
-// Compute CSS classes
-const cardClasses = computed(() => {
-  const classes = [getStateClass(props.pullRequest)]
+const rowColors = computed(() => getStateRowColors(props.pullRequest))
 
-  if (props.class) {
-    classes.push(props.class)
-  }
+const unresolvedComments = computed(() => props.pullRequest.comments?.unresolved ?? 0)
 
-  return classes.join(' ')
+// Hide the "commented" review badge when every comment is resolved —
+// other review verdicts (approved / changes_requested / pending) always show.
+const showReviewIcon = computed(() => {
+  const status = props.pullRequest.review_status
+  if (!status) return false
+  if (status === 'commented') return unresolvedComments.value > 0
+  return true
 })
 </script>
 
 <template>
-  <BaseCard
-    width="full"
-    :border-color="getStateBorderColor(pullRequest)"
+  <a
     :href="pullRequest.html_url"
-    :class="cardClasses"
+    target="_blank"
+    rel="noopener"
+    class="pr-row"
+    :style="{ '--row-bg': rowColors.bg, '--row-fg': rowColors.fg }"
   >
-    <template #header>
-      <div class="pr-card__header">
-        <div class="pr-card__title-row">
-          <Icon :icon="getStateIcon(pullRequest)" size="base" decorative />
-          <Text variant="secondary" size="base" weight="semibold">#{{ pullRequest.number }}</Text>
-          <Header :level="3" size="base" variant="primary" class="pr-card__title">
-            {{ pullRequest.title }}
-          </Header>
-        </div>
-        <div class="pr-card__header-right">
-          <div v-if="showRepository" class="pr-card__repository">
-            <Text variant="tertiary" size="sm">{{ pullRequest.repository.name }}</Text>
-          </div>
-        </div>
-      </div>
-    </template>
-
-    <template #body>
-      <div class="pr-card__status-row">
-        <!-- CI/Pipeline Status -->
-        <div v-if="pullRequest.check_status" class="pr-card__check-status" :class="`check-status--${pullRequest.check_status}`">
-          <Icon :icon="getCheckIcon(pullRequest.check_status)" size="sm" decorative />
-          <Text variant="secondary" size="sm">{{ getCheckLabel(pullRequest.check_status) }}</Text>
-        </div>
-
-        <!-- Review Status -->
-        <div v-if="pullRequest.review_status" class="pr-card__review-status" :class="`review-status--${pullRequest.review_status}`">
-          <Icon :icon="getReviewIcon(pullRequest.review_status)" size="sm" decorative />
-          <Text variant="secondary" size="sm">{{ getReviewLabel(pullRequest.review_status) }}</Text>
-        </div>
-
-        <!-- Comment Count -->
-        <div v-if="pullRequest.comments && pullRequest.comments.total > 0" class="pr-card__comments">
-          <Icon icon="💬" size="sm" decorative />
-          <Text variant="secondary" size="sm">
-            {{ pullRequest.comments.unresolved }}/{{ pullRequest.comments.total }}
-          </Text>
-        </div>
-      </div>
-
-      <div class="pr-card__meta">
-        <div class="pr-card__author">
-          <UserAvatar
-            :src="pullRequest.user.avatar_url"
-            :alt="pullRequest.user.login"
-            :tooltip="pullRequest.user.login"
-            size="sm"
-          />
-          <Text variant="secondary" size="sm">{{ pullRequest.user.login }}</Text>
-        </div>
-
-        <BranchIndicator
-          :source-branch="pullRequest.head.ref"
-          :target-branch="pullRequest.base.ref"
-        />
-
-        <Text variant="secondary" size="sm">{{ formatTimeAgo(pullRequest.updated_at) }}</Text>
-      </div>
-
-      <div v-if="pullRequest.labels.length > 0" class="pr-card__labels">
-        <LabelBadge
-          v-for="label in pullRequest.labels"
-          :key="label.name"
-          :name="label.name"
-          :color="label.color"
-        />
-      </div>
-
-      <div v-if="pullRequest.assignees.length > 0" class="pr-card__assignees">
-        <Text variant="secondary" size="sm">Assigned to:</Text>
-        <div class="assignees-list">
-          <UserAvatar
-            v-for="assignee in pullRequest.assignees"
-            :key="assignee.login"
-            :src="assignee.avatar_url"
-            :alt="assignee.login"
-            :tooltip="assignee.login"
-            size="md"
-          />
-        </div>
-      </div>
-    </template>
-  </BaseCard>
+    <Icon :icon="getStateIcon(pullRequest)" class="pr-row__icon" decorative />
+
+    <span class="pr-row__main">
+      <span class="pr-row__title-line">
+        <span class="pr-row__number">#{{ pullRequest.number }}</span>
+        <span class="pr-row__title">{{ pullRequest.title }}</span>
+      </span>
+      <span class="pr-row__sub">
+        <span v-if="showRepository">{{ pullRequest.repository.name }}</span>
+        <span v-if="showRepository" class="pr-row__sep">·</span>
+        <span>@{{ pullRequest.user.login }}</span>
+        <span class="pr-row__sep">·</span>
+        <span class="pr-row__branch">{{ pullRequest.head.ref }} → {{ pullRequest.base.ref }}</span>
+      </span>
+    </span>
+
+    <span class="pr-row__check">
+      <Icon v-if="pullRequest.check_status" :icon="getCheckIcon(pullRequest.check_status)" size="sm" :aria-label="`Checks: ${pullRequest.check_status}`" />
+    </span>
+
+    <span class="pr-row__review">
+      <Icon v-if="showReviewIcon" :icon="getReviewIcon(pullRequest.review_status!)" size="sm" :aria-label="`Review: ${pullRequest.review_status}`" />
+    </span>
+
+    <span class="pr-row__comments" title="Comments">
+      <template v-if="pullRequest.comments && pullRequest.comments.total > 0">
+        {{ pullRequest.comments.unresolved }}/{{ pullRequest.comments.total }}
+        <Icon icon="lucide:message-circle" size="sm" decorative />
+      </template>
+    </span>
+
+    <span class="pr-row__time">{{ formatTimeAgo(pullRequest.updated_at) }}</span>
+  </a>
 </template>
 
 <style scoped>
-/* Layout structure only - typography and colors handled by atoms */
-.pr-card__header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: var(--spacing-2);
-}
-
-.pr-card__title-row {
-  display: flex;
+.pr-row {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
   align-items: center;
-  gap: var(--spacing-2);
-  flex: 1;
-  min-width: 0;
+  column-gap: var(--spacing-3);
+  padding: var(--spacing-2) var(--spacing-4);
+  background: var(--row-bg, var(--color-neutral));
+  color: var(--row-fg, var(--color-text-inverse));
+  text-decoration: none;
+  font-size: var(--font-size-sm);
+  line-height: 1.3;
+  border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
+  transition: filter var(--transition-fast);
 }
 
-.pr-card__title {
-  margin: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.pr-row:hover {
+  filter: brightness(1.08);
 }
 
-.pr-card__header-right {
-  flex-shrink: 0;
+.pr-row__icon {
+  font-size: var(--font-size-base);
+  line-height: 1;
 }
 
-.pr-card__repository {
-  background: var(--color-border-default);
-  padding: var(--spacing-1) var(--spacing-2);
-  border-radius: var(--radius-md);
-}
-
-.pr-card__status-row {
+.pr-row__main {
   display: flex;
-  flex-wrap: wrap;
-  gap: var(--spacing-4);
-  align-items: center;
-  margin-bottom: var(--spacing-3);
-}
-
-.pr-card__check-status,
-.pr-card__review-status,
-.pr-card__comments {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-1);
-}
-
-/* Check status colors */
-.check-status--success {
-  color: var(--color-success-500);
-}
-
-.check-status--failure {
-  color: var(--color-error-500);
-}
-
-.check-status--pending {
-  color: var(--color-warning-500);
-}
-
-.check-status--neutral {
-  color: var(--color-gray-500);
-}
-
-/* Review status colors */
-.review-status--approved {
-  color: var(--color-success-500);
-}
-
-.review-status--changes_requested {
-  color: var(--color-error-500);
-}
-
-.review-status--commented {
-  color: var(--color-info-500);
-}
-
-.review-status--pending {
-  color: var(--color-gray-500);
-}
-
-.pr-card__comments {
-  color: var(--color-gray-500);
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
 }
 
-.pr-card__meta {
+.pr-row__title-line {
   display: flex;
-  flex-wrap: wrap;
-  gap: var(--spacing-4);
-  align-items: center;
-  margin-bottom: var(--spacing-3);
+  align-items: baseline;
+  gap: var(--spacing-2);
+  min-width: 0;
 }
 
-.pr-card__author {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-2);
+.pr-row__number {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  opacity: 0.85;
+  flex-shrink: 0;
 }
 
-.pr-card__labels {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--spacing-2);
-  margin-bottom: var(--spacing-3);
+.pr-row__title {
+  font-weight: var(--font-weight-semibold);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.pr-card__assignees {
-  display: flex;
+.pr-row__sub {
+  display: inline-flex;
   align-items: center;
   gap: var(--spacing-2);
+  font-size: var(--font-size-xs);
+  opacity: 0.9;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.assignees-list {
-  display: flex;
-  gap: var(--spacing-1);
+.pr-row__sep {
+  opacity: 0.6;
 }
 
-/* State-specific styling */
-.state-open {
-  border-left: var(--spacing-1) solid var(--color-success-500);
+.pr-row__branch {
+  font-family: var(--font-family-mono);
 }
 
-.state-draft {
-  border-left: var(--spacing-1) solid var(--color-warning-500);
+.pr-row__check,
+.pr-row__review {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-xs);
 }
 
-.state-merged {
-  border-left: var(--spacing-1) solid var(--color-purple-500);
+.pr-row__comments {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  justify-self: end;
+  font-size: var(--font-size-xs);
+  white-space: nowrap;
 }
 
-.state-closed {
-  border-left: var(--spacing-1) solid var(--color-error-500);
+.pr-row__time {
+  font-size: var(--font-size-xs);
+  opacity: 0.85;
+  white-space: nowrap;
+  min-width: 4ch;
+  text-align: right;
 }
 
-/* Responsive adjustments */
-@media (max-width: 768px) {
-  .pr-card__header {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .pr-card__title-row {
-    flex-wrap: wrap;
+@media (max-width: 640px) {
+  .pr-row {
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto auto;
+    row-gap: 2px;
   }
 
-  .pr-card__status-row {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: var(--spacing-2);
+  .pr-row__check,
+  .pr-row__review,
+  .pr-row__comments {
+    grid-column: 1 / 4;
+    grid-row: 2;
+    font-size: var(--font-size-2xs);
   }
 
-  .pr-card__meta {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: var(--spacing-2);
+  .pr-row__time {
+    grid-column: 3;
+    grid-row: 1;
   }
 }
 </style>
diff --git a/features/organisms/pull-request-card/usePullRequestCard.ts b/features/organisms/pull-request-card/usePullRequestCard.ts
index bfddcfe..89a1ffe 100644
--- a/features/organisms/pull-request-card/usePullRequestCard.ts
+++ b/features/organisms/pull-request-card/usePullRequestCard.ts
@@ -59,10 +59,10 @@ export const usePullRequestCard = () => {
    * Get icon emoji based on PR state
    */
   const getStateIcon = (pr: PullRequest): string => {
-    if (pr.merged_at) return '✅'
-    if (pr.state === 'open' && pr.draft) return '📝'
-    if (pr.state === 'open') return '🔓'
-    return '❌'
+    if (pr.merged_at) return 'lucide:git-merge'
+    if (pr.state === 'open' && pr.draft) return 'lucide:file-edit'
+    if (pr.state === 'open') return 'lucide:git-pull-request'
+    return 'lucide:git-pull-request-closed'
   }
 
   /**
@@ -76,13 +76,26 @@ export const usePullRequestCard = () => {
   }
 
   /**
-   * Get border color based on PR state
+   * Resolve the semantic background + on-color text for a PR row.
+   * Each branch returns the saturated background and the matching
+   * --color-on-* text token so contrast stays correct when the palette
+   * changes (e.g. light Pearl Aqua needs dark text, dark Oxidized Iron
+   * needs white text).
+   *
+   * draft           → neutral-dark   (muted, parked)
+   * merged          → tertiary       (done)
+   * checks failed   → error          (broken — highest concern)
+   * change requested→ warning        (author owes work)
+   * checks ✓ + ✓ed  → success        (ready to land)
+   * everything else → primary        (in progress / default open)
    */
-  const getStateBorderColor = (pr: PullRequest): string => {
-    if (pr.merged_at) return '#8b5cf6'
-    if (pr.state === 'open' && pr.draft) return '#f59e0b'
-    if (pr.state === 'open') return '#10b981'
-    return '#ef4444'
+  const getStateRowColors = (pr: PullRequest): { bg: string; fg: string } => {
+    if (pr.draft) return { bg: 'var(--color-neutral-dark)', fg: 'var(--color-on-neutral)' }
+    if (pr.merged_at) return { bg: 'var(--color-tertiary)', fg: 'var(--color-on-tertiary)' }
+    if (pr.check_status === 'failure') return { bg: 'var(--color-error)', fg: 'var(--color-on-error)' }
+    if (pr.review_status === 'changes_requested') return { bg: 'var(--color-warning)', fg: 'var(--color-on-warning)' }
+    if (pr.check_status === 'success' && pr.review_status === 'approved') return { bg: 'var(--color-success)', fg: 'var(--color-on-success)' }
+    return { bg: 'var(--color-primary)', fg: 'var(--color-on-primary)' }
   }
 
   /**
@@ -90,10 +103,10 @@ export const usePullRequestCard = () => {
    */
   const getCheckIcon = (status: 'success' | 'failure' | 'pending' | 'neutral'): string => {
     switch (status) {
-      case 'success': return '✅'
-      case 'failure': return '❌'
-      case 'pending': return '⏳'
-      case 'neutral': return '⚪'
+      case 'success': return 'lucide:check-circle-2'
+      case 'failure': return 'lucide:x-circle'
+      case 'pending': return 'lucide:loader-circle'
+      case 'neutral': return 'lucide:circle-minus'
     }
   }
 
@@ -114,10 +127,10 @@ export const usePullRequestCard = () => {
    */
   const getReviewIcon = (status: 'approved' | 'changes_requested' | 'pending' | 'commented'): string => {
     switch (status) {
-      case 'approved': return '👍'
-      case 'changes_requested': return '⚠️'
-      case 'commented': return '💬'
-      case 'pending': return '👀'
+      case 'approved': return 'lucide:thumbs-up'
+      case 'changes_requested': return 'lucide:alert-triangle'
+      case 'commented': return 'lucide:message-square-quote'
+      case 'pending': return 'lucide:eye'
     }
   }
 
@@ -138,7 +151,7 @@ export const usePullRequestCard = () => {
     getStateClass,
     getStateIcon,
     getStateLabel,
-    getStateBorderColor,
+    getStateRowColors,
     getCheckIcon,
     getCheckLabel,
     getReviewIcon,
diff --git a/features/organisms/repository-card/RepositoryCard.vue b/features/organisms/repository-card/RepositoryCard.vue
index 7915e53..d804ebb 100644
--- a/features/organisms/repository-card/RepositoryCard.vue
+++ b/features/organisms/repository-card/RepositoryCard.vue
@@ -25,168 +25,161 @@ const props = defineProps<{
   repository: Repository
 }>()
 
-const { getCategoryConfig, formatSize } = useRepositoryCard()
+const { getCategoryConfig } = useRepositoryCard()
 const { formatTimeAgoSimple } = useDateTime()
 
 const categoryConfig = computed(() => getCategoryConfig(props.repository.category))
 const timeAgo = computed(() => formatTimeAgoSimple(props.repository.updated_at))
-const sizeFormatted = computed(() => formatSize(props.repository.size))
 </script>
 
 <template>
-  <BaseCard
-    width="300px"
-    :border-color="categoryConfig.borderColor"
-    :bg-color="categoryConfig.bgColor"
+  <a
+    :href="repository.html_url"
+    target="_blank"
+    rel="noopener"
+    class="repo-row"
+    :style="{ '--repo-accent': categoryConfig.color }"
   >
-    <template #header>
-      <div class="project-title">
-        <Icon :icon="categoryConfig.icon" size="lg" decorative />
-        <Header :level="3" size="base" class="project-name">
-          {{ repository.name }}
-        </Header>
-        <Tag v-if="repository.is_private" label="Private" variant="warning" size="sm" />
-      </div>
-      <Text variant="secondary" size="xs" :line-clamp="2" class="project-description">
-        {{ repository.description }}
-      </Text>
-    </template>
-
-    <template #body>
-      <!-- Stats -->
-      <div class="project-stats">
-        <div class="stat-item">
-          <Icon icon="⭐" size="sm" decorative />
-          <Text variant="tertiary" size="xs" weight="medium">{{ repository.stars }}</Text>
-        </div>
-        <div class="stat-item">
-          <Icon icon="🍴" size="sm" decorative />
-          <Text variant="tertiary" size="xs" weight="medium">{{ repository.forks }}</Text>
-        </div>
-        <div class="stat-item">
-          <Icon icon="❗" size="sm" decorative />
-          <Text variant="tertiary" size="xs" weight="medium">{{ repository.issues }}</Text>
-        </div>
-      </div>
-
-      <!-- Tech Stack -->
-      <div v-if="repository.tech_stack.length > 0" class="tech-stack">
-        <Text variant="secondary" size="xs" class="tech-label">Tech:</Text>
-        <div class="tech-tags">
-          <Tag
-            v-for="tech in repository.tech_stack.slice(0, 3)"
-            :key="tech"
-            :label="tech"
-            variant="default"
-            size="sm"
-          />
-          <Tag
-            v-if="repository.tech_stack.length > 3"
-            :label="`+${repository.tech_stack.length - 3}`"
-            variant="default"
-            size="sm"
-          />
-        </div>
-      </div>
-
-      <!-- Details -->
-      <div class="project-details">
-        <div class="detail-row">
-          <Text variant="secondary" size="xs">Category:</Text>
-          <Text
-            variant="tertiary"
-            size="xs"
-            weight="semibold"
-            :style="{ color: categoryConfig.color }"
-          >
-            {{ categoryConfig.label }}
-          </Text>
-        </div>
-
-        <div class="detail-row">
-          <Text variant="secondary" size="xs">Updated:</Text>
-          <Text variant="tertiary" size="xs" weight="medium">{{ timeAgo }}</Text>
-        </div>
-
-        <div class="detail-row">
-          <Text variant="secondary" size="xs">Size:</Text>
-          <Text variant="tertiary" size="xs" weight="medium">{{ sizeFormatted }}</Text>
-        </div>
-      </div>
-    </template>
-
-    <template #bottom>
-      <Link
-        :href="repository.html_url"
-        variant="primary"
-        size="sm"
-        external
-      >
-        View Repository →
-      </Link>
-    </template>
-  </BaseCard>
+    <Icon :icon="categoryConfig.icon" class="repo-row__icon" :aria-label="categoryConfig.label" />
+
+    <span class="repo-row__name-cell">
+      <span class="repo-row__name">{{ repository.name }}</span>
+      <Icon v-if="repository.is_private" icon="lucide:lock" size="xs" class="repo-row__lock" aria-label="Private" />
+    </span>
+
+    <span class="repo-row__category">{{ categoryConfig.label }}</span>
+
+    <span class="repo-row__lang">{{ repository.language || '' }}</span>
+
+    <span class="repo-row__stat" title="Stars">
+      <Icon icon="lucide:star" size="xs" decorative />
+      {{ repository.stars }}
+    </span>
+
+    <span class="repo-row__stat" title="Forks">
+      <Icon icon="lucide:git-fork" size="xs" decorative />
+      {{ repository.forks }}
+    </span>
+
+    <span class="repo-row__stat" title="Open issues">
+      <Icon icon="lucide:circle-dot" size="xs" decorative />
+      {{ repository.issues }}
+    </span>
+
+    <span class="repo-row__updated">{{ timeAgo }}</span>
+  </a>
 </template>
 
 <style scoped>
-/* Layout structure only - typography and colors handled by atoms */
-.project-title {
-  display: flex;
+.repo-row {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
   align-items: center;
-  gap: var(--spacing-2);
-  margin-bottom: var(--spacing-2);
-  flex-wrap: wrap;
+  column-gap: var(--spacing-3);
+  padding: var(--spacing-2) var(--spacing-4);
+  border-left: 3px solid var(--repo-accent, var(--color-neutral));
+  border-bottom: 1px solid var(--color-border-default);
+  background: var(--color-bg-primary);
+  text-decoration: none;
+  color: inherit;
+  font-size: var(--font-size-sm);
+  line-height: 1.3;
+  transition: background var(--transition-fast);
 }
 
-.project-name {
-  word-break: break-word;
-  flex: 1;
+.repo-row__name-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
   min-width: 0;
 }
 
-.project-description {
-  margin: 0;
+.repo-row:hover {
+  background: var(--color-bg-tertiary);
 }
 
-.project-stats {
-  display: flex;
-  gap: var(--spacing-4);
-  margin-bottom: var(--spacing-4);
-  padding-bottom: var(--spacing-3);
-  border-bottom: 1px solid var(--color-gray-100);
+.repo-row__icon {
+  font-size: var(--font-size-base);
+  line-height: 1;
 }
 
-.stat-item {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-1);
+.repo-row__name {
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.repo-row__lock {
+  font-size: var(--font-size-xs);
+  opacity: 0.7;
 }
 
-.tech-stack {
-  margin-bottom: var(--spacing-4);
-  padding-bottom: var(--spacing-3);
-  border-bottom: 1px solid var(--color-gray-100);
+.repo-row__category {
+  color: var(--repo-accent, var(--color-neutral));
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-xs);
+  white-space: nowrap;
 }
 
-.tech-label {
-  display: block;
-  margin-bottom: var(--spacing-2);
+.repo-row__lang {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-2xs);
+  opacity: 0.85;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
 }
 
-.tech-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--spacing-1);
+.repo-row__stat {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+  white-space: nowrap;
+  justify-self: end;
 }
 
-.project-details {
-  margin-bottom: var(--spacing-4);
+.repo-row__updated {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-muted);
+  white-space: nowrap;
+  min-width: 4ch;
+  text-align: right;
 }
 
-.detail-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: var(--spacing-2);
+@media (max-width: 640px) {
+  .repo-row {
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto auto auto;
+    row-gap: 2px;
+  }
+
+  .repo-row__category,
+  .repo-row__lang {
+    grid-column: 2 / 4;
+    grid-row: 2;
+    justify-self: start;
+  }
+
+  .repo-row__lang {
+    grid-row: 2;
+    justify-self: end;
+  }
+
+  .repo-row__stat {
+    grid-row: 3;
+    justify-self: start;
+  }
+
+  .repo-row__updated {
+    grid-column: 3;
+    grid-row: 1;
+  }
 }
 </style>
diff --git a/features/organisms/repository-card/useRepositoryCard.ts b/features/organisms/repository-card/useRepositoryCard.ts
index fd35b81..881b756 100644
--- a/features/organisms/repository-card/useRepositoryCard.ts
+++ b/features/organisms/repository-card/useRepositoryCard.ts
@@ -6,66 +6,37 @@ interface CategoryConfig {
   label: string
 }
 
+type Role = 'success' | 'info' | 'tertiary' | 'warning' | 'error' | 'neutral'
+type Tone = 'base' | 'dark'
+
+const buildTriple = (role: Role, icon: string, label: string, tone: Tone = 'base'): CategoryConfig => {
+  const accent = tone === 'dark' ? `var(--color-${role}-dark)` : `var(--color-${role})`
+  return {
+    color: accent,
+    bgColor: `var(--color-${role}-bright)`,
+    borderColor: accent,
+    icon,
+    label,
+  }
+}
+
+const CATEGORY_CONFIGS: Record<string, CategoryConfig> = {
+  'web application':   buildTriple('success',  'lucide:globe',     'Web App', 'dark'),
+  'api/service':       buildTriple('info',     'lucide:zap',       'API/Service'),
+  'library/component': buildTriple('tertiary', 'lucide:package',   'Library'),
+  'documentation':     buildTriple('warning',  'lucide:book-open', 'Docs'),
+  'tool/utility':      buildTriple('error',    'lucide:wrench',    'Tool'),
+}
+
+const DEFAULT_CATEGORY = buildTriple('neutral', 'lucide:folder', 'General')
+
 /**
  * Composable for repository card logic
- * Determines visual configuration based on repository category
- * TODO, the colors don"t come from design system
+ * Determines visual configuration based on repository category.
  */
 export const useRepositoryCard = () => {
-  const getCategoryConfig = (category: string): CategoryConfig => {
-    const cat = category.toLowerCase()
-
-    switch (cat) {
-      case 'web application':
-        return {
-          color: '#10b981', // Green
-          bgColor: '#f0fdf4',
-          borderColor: '#10b981',
-          icon: '🌐',
-          label: 'Web App'
-        }
-      case 'api/service':
-        return {
-          color: '#3b82f6', // Blue
-          bgColor: '#eff6ff',
-          borderColor: '#3b82f6',
-          icon: '⚡',
-          label: 'API/Service'
-        }
-      case 'library/component':
-        return {
-          color: '#8b5cf6', // Purple
-          bgColor: '#f5f3ff',
-          borderColor: '#8b5cf6',
-          icon: '📦',
-          label: 'Library'
-        }
-      case 'documentation':
-        return {
-          color: '#f59e0b', // Amber
-          bgColor: '#fffbeb',
-          borderColor: '#f59e0b',
-          icon: '📚',
-          label: 'Docs'
-        }
-      case 'tool/utility':
-        return {
-          color: '#ef4444', // Red
-          bgColor: '#fef2f2',
-          borderColor: '#ef4444',
-          icon: '🔧',
-          label: 'Tool'
-        }
-      default:
-        return {
-          color: '#6b7280', // Gray
-          bgColor: '#f9fafb',
-          borderColor: '#6b7280',
-          icon: '📁',
-          label: 'General'
-        }
-    }
-  }
+  const getCategoryConfig = (category: string): CategoryConfig =>
+    CATEGORY_CONFIGS[category.toLowerCase()] ?? DEFAULT_CATEGORY
 
   const formatSize = (sizeInKB: number): string => {
     if (sizeInKB < 1024) return `${sizeInKB} KB`
@@ -77,6 +48,6 @@ export const useRepositoryCard = () => {
 
   return {
     getCategoryConfig,
-    formatSize
+    formatSize,
   }
 }
diff --git a/features/organisms/workflow-status-card/WorkflowStatusCard.vue b/features/organisms/workflow-status-card/WorkflowStatusCard.vue
index fe80554..8351d5a 100644
--- a/features/organisms/workflow-status-card/WorkflowStatusCard.vue
+++ b/features/organisms/workflow-status-card/WorkflowStatusCard.vue
@@ -30,118 +30,138 @@ const timeAgo = computed(() => formatTimeAgoSimple(props.workflow.updated_at))
 </script>
 
 <template>
-  <BaseCard
-    width="300px"
-    :border-color="statusConfig.borderColor"
-    :bg-color="statusConfig.bgColor"
+  <a
+    :href="workflow.html_url"
+    target="_blank"
+    rel="noopener"
+    class="wf-row"
+    :style="{ '--row-bg': statusConfig.color, '--row-fg': statusConfig.onColor }"
   >
-    <template #header>
-      <div class="status-row">
-        <div
-          class="status-dot"
-          :style="{ backgroundColor: statusConfig.color }"
-        />
-        <div class="workflow-info">
-          <Header :level="3" size="base" class="workflow-name">
-            {{ workflow.name }}
-          </Header>
-          <div class="repository-name">
-            <Text variant="secondary" size="xs">{{ workflow.repository }}</Text>
-            <Tag v-if="workflow.is_private" label="Private" variant="warning" size="sm" />
-          </div>
-        </div>
-      </div>
-    </template>
-
-    <template #body>
-      <div class="card-details">
-        <div class="detail-row">
-          <Text variant="secondary" size="sm">Status:</Text>
-          <Text
-            variant="tertiary"
-            size="sm"
-            weight="semibold"
-            :style="{ color: statusConfig.color }"
-          >
-            {{ statusConfig.label }}
-          </Text>
-        </div>
-
-        <div class="detail-row">
-          <Text variant="secondary" size="sm">Last run:</Text>
-          <Text variant="tertiary" size="sm" weight="medium">{{ timeAgo }}</Text>
-        </div>
-
-        <div class="detail-row">
-          <Text variant="secondary" size="sm">Branch:</Text>
-          <Tag :label="workflow.branch" variant="default" size="sm" class="branch-tag" />
-        </div>
-
-        <div class="detail-row">
-          <Text variant="secondary" size="sm">Run #:</Text>
-          <Text variant="tertiary" size="sm" weight="medium">{{ workflow.run_number }}</Text>
-        </div>
-      </div>
-    </template>
-
-    <template #bottom>
-      <Link
-        :href="workflow.html_url"
-        variant="primary"
-        size="sm"
-        external
-      >
-        View Details →
-      </Link>
-    </template>
-  </BaseCard>
+    <Icon :icon="statusConfig.icon" class="wf-row__icon" decorative />
+
+    <span class="wf-row__main">
+      <span class="wf-row__name">{{ workflow.name }}</span>
+      <span class="wf-row__sub">
+        <span>{{ workflow.repository }}</span>
+        <span class="wf-row__sep">·</span>
+        <span>{{ workflow.branch }}</span>
+        <Icon v-if="workflow.is_private" icon="lucide:lock" size="xs" class="wf-row__lock" aria-label="Private" />
+      </span>
+    </span>
+
+    <span class="wf-row__status">{{ statusConfig.label }}</span>
+    <span class="wf-row__run">#{{ workflow.run_number }}</span>
+    <span class="wf-row__time">{{ timeAgo }}</span>
+  </a>
 </template>
 
 <style scoped>
-/* Layout structure only - typography and colors handled by atoms */
-.status-row {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--spacing-3);
+.wf-row {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
+  align-items: center;
+  column-gap: var(--spacing-3);
+  padding: var(--spacing-2) var(--spacing-4);
+  background: var(--row-bg, var(--color-neutral));
+  color: var(--row-fg, var(--color-text-inverse));
+  text-decoration: none;
+  font-size: var(--font-size-sm);
+  line-height: 1.3;
+  border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
+  transition: filter var(--transition-fast);
+}
+
+.wf-row:hover {
+  filter: brightness(1.08);
 }
 
-.status-dot {
-  width: var(--spacing-3);
-  height: var(--spacing-3);
-  border-radius: var(--radius-full);
-  flex-shrink: 0;
-  margin-top: var(--spacing-1);
+.wf-row__icon {
+  font-size: var(--font-size-base);
+  line-height: 1;
 }
 
-.workflow-info {
-  flex: 1;
+.wf-row__main {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
   min-width: 0;
 }
 
-.workflow-name {
-  margin: 0 0 var(--spacing-1) 0;
-  word-break: break-word;
+.wf-row__name {
+  font-weight: var(--font-weight-semibold);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.repository-name {
-  display: flex;
+.wf-row__sub {
+  display: inline-flex;
   align-items: center;
   gap: var(--spacing-2);
-  word-break: break-word;
+  font-size: var(--font-size-xs);
+  opacity: 0.9;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.card-details {
-  margin-bottom: var(--spacing-4);
+.wf-row__sep {
+  opacity: 0.6;
 }
 
-.detail-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: var(--spacing-2);
+.wf-row__lock {
+  font-size: var(--font-size-2xs);
+}
+
+.wf-row__status {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+}
+
+.wf-row__run {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  opacity: 0.9;
+  white-space: nowrap;
+}
+
+.wf-row__time {
+  font-size: var(--font-size-xs);
+  opacity: 0.85;
+  white-space: nowrap;
+  min-width: 4ch;
+  text-align: right;
 }
 
-.branch-tag {
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+@media (max-width: 640px) {
+  .wf-row {
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto auto;
+    row-gap: 2px;
+  }
+
+  .wf-row__status {
+    grid-column: 3;
+    grid-row: 1;
+  }
+
+  .wf-row__run,
+  .wf-row__time {
+    grid-row: 2;
+    font-size: var(--font-size-2xs);
+  }
+
+  .wf-row__run {
+    grid-column: 2;
+    text-align: left;
+  }
+
+  .wf-row__time {
+    grid-column: 3;
+  }
 }
 </style>
diff --git a/features/organisms/workflow-status-card/useWorkflowStatusCard.ts b/features/organisms/workflow-status-card/useWorkflowStatusCard.ts
index 8f83da1..d6821f1 100644
--- a/features/organisms/workflow-status-card/useWorkflowStatusCard.ts
+++ b/features/organisms/workflow-status-card/useWorkflowStatusCard.ts
@@ -1,5 +1,6 @@
 interface StatusConfig {
   color: string
+  onColor: string
   textColor: string
   bgColor: string
   borderColor: string
@@ -12,6 +13,81 @@ interface Workflow {
   status: string
 }
 
+const STATUS_CONFIGS = {
+  failure: {
+    color: 'var(--color-error)',
+    onColor: 'var(--color-on-error)',
+    textColor: 'text-red-700',
+    bgColor: 'var(--color-error-bright)',
+    borderColor: 'var(--color-error)',
+    icon: 'lucide:x',
+    label: 'Failed',
+  },
+  success: {
+    color: 'var(--color-success)',
+    onColor: 'var(--color-on-success)',
+    textColor: 'text-green-700',
+    bgColor: 'var(--color-success-bright)',
+    borderColor: 'var(--color-success)',
+    icon: 'lucide:check',
+    label: 'Success',
+  },
+  cancelled: {
+    color: 'var(--color-warning)',
+    onColor: 'var(--color-on-warning)',
+    textColor: 'text-amber-700',
+    bgColor: 'var(--color-warning-bright)',
+    borderColor: 'var(--color-warning)',
+    icon: 'lucide:ban',
+    label: 'Cancelled',
+  },
+  running: {
+    color: 'var(--color-info)',
+    onColor: 'var(--color-on-info)',
+    textColor: 'text-blue-700',
+    bgColor: 'var(--color-info-bright)',
+    borderColor: 'var(--color-info)',
+    icon: 'lucide:loader-circle',
+    label: 'Running',
+  },
+  skipped: {
+    color: 'var(--color-neutral)',
+    onColor: 'var(--color-on-neutral)',
+    textColor: 'text-gray-700',
+    bgColor: 'var(--color-neutral-bright)',
+    borderColor: 'var(--color-neutral)',
+    icon: 'lucide:skip-forward',
+    label: 'Skipped',
+  },
+  disabled: {
+    color: 'var(--color-neutral)',
+    onColor: 'var(--color-on-neutral)',
+    textColor: 'text-gray-700',
+    bgColor: 'var(--color-neutral-bright)',
+    borderColor: 'var(--color-neutral)',
+    icon: 'lucide:circle-off',
+    label: 'Disabled',
+  },
+  passed: {
+    color: 'var(--color-success)',
+    onColor: 'var(--color-on-success)',
+    textColor: 'text-green-700',
+    bgColor: 'var(--color-success-bright)',
+    borderColor: 'var(--color-success)',
+    icon: 'lucide:check',
+    label: 'Passed',
+  },
+  unknown: {
+    color: 'var(--color-neutral)',
+    onColor: 'var(--color-on-neutral)',
+    textColor: 'text-gray-700',
+    bgColor: 'var(--color-neutral-bright)',
+    borderColor: 'var(--color-neutral)',
+    icon: 'lucide:circle-help',
+    label: 'Unknown',
+  },
+} as const satisfies Record<string, StatusConfig>
+
 /**
  * Composable for workflow status card logic
  * Determines visual configuration based on workflow state and status
@@ -21,83 +97,18 @@ export const useWorkflowStatusCard = () => {
     const state = workflow.state?.toLowerCase() || 'unknown'
     const status = workflow.status?.toLowerCase() || ''
 
-    // Check status/conclusion first (this is the actual run result)
-    if (status.includes('failure') || status.includes('error') || status.includes('failed')) {
-      return {
-        color: '#ef4444', // Red
-        textColor: 'text-red-700',
-        bgColor: '#fef2f2', // Light red background
-        borderColor: '#ef4444',
-        icon: '✗',
-        label: 'Failed'
-      }
-    } else if (status.includes('success')) {
-      return {
-        color: '#10b981', // Green
-        textColor: 'text-green-700',
-        bgColor: '#f0fdf4', // Light green background
-        borderColor: '#10b981',
-        icon: '✓',
-        label: 'Success'
-      }
-    } else if (status.includes('cancelled')) {
-      return {
-        color: '#f59e0b', // Amber
-        textColor: 'text-amber-700',
-        bgColor: '#fffbeb', // Light amber background
-        borderColor: '#f59e0b',
-        icon: '○',
-        label: 'Cancelled'
-      }
-    } else if (status.includes('in_progress') || status.includes('queued')) {
-      return {
-        color: '#3b82f6', // Blue
-        textColor: 'text-blue-700',
-        bgColor: '#eff6ff', // Light blue background
-        borderColor: '#3b82f6',
-        icon: '◐',
-        label: 'Running'
-      }
-    } else if (status.includes('skipped')) {
-      return {
-        color: '#6b7280', // Gray
-        textColor: 'text-gray-700',
-        bgColor: '#f9fafb', // Light gray background
-        borderColor: '#6b7280',
-        icon: '−',
-        label: 'Skipped'
-      }
-    } else if (state === 'disabled') {
-      return {
-        color: '#6b7280', // Gray
-        textColor: 'text-gray-700',
-        bgColor: '#f9fafb', // Light gray background
-        borderColor: '#6b7280',
-        icon: '○',
-        label: 'Disabled'
-      }
-    } else if (state === 'active' && status.includes('completed')) {
-      return {
-        color: '#10b981', // Green
-        textColor: 'text-green-700',
-        bgColor: '#f0fdf4', // Light green background
-        borderColor: '#10b981',
-        icon: '✓',
-        label: 'Passed'
-      }
-    } else {
-      return {
-        color: '#6b7280', // Gray
-        textColor: 'text-gray-700',
-        bgColor: '#f9fafb', // Light gray background
-        borderColor: '#6b7280',
-        icon: '●',
-        label: status || state || 'Unknown'
-      }
-    }
+    if (status.includes('failure') || status.includes('error') || status.includes('failed')) return STATUS_CONFIGS.failure
+    if (status.includes('success')) return STATUS_CONFIGS.success
+    if (status.includes('cancelled')) return STATUS_CONFIGS.cancelled
+    if (status.includes('in_progress') || status.includes('queued')) return STATUS_CONFIGS.running
+    if (status.includes('skipped')) return STATUS_CONFIGS.skipped
+    if (state === 'disabled') return STATUS_CONFIGS.disabled
+    if (state === 'active' && status.includes('completed')) return STATUS_CONFIGS.passed
+
+    return { ...STATUS_CONFIGS.unknown, label: status || state || 'Unknown' }
   }
 
   return {
-    getStatusConfig
+    getStatusConfig,
   }
 }
diff --git a/layouts/default.vue b/layouts/default.vue
index a2258c4..4cbfe38 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -4,6 +4,7 @@
     <main class="main-content">
       <slot />
     </main>
+    <LogTicker />
   </div>
 </template>
 
@@ -16,6 +17,6 @@
 
 .main-content {
   flex: 1;
-  margin-top: var(--nav-height);
+  margin-top: var(--nav-actual-height, var(--nav-height));
 }
 </style>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 43fa7cd..181bf28 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -9,9 +9,17 @@ export default defineNuxtConfig({
     '@nuxt/eslint',
     '@nuxt/test-utils',
     '@nuxt/ui',
-    '@nuxt/scripts'
+    '@nuxt/scripts',
+    '@nuxt/icon',
+    '@pinia/nuxt',
+    'pinia-plugin-persistedstate/nuxt'
   ],
 
+  icon: {
+    // Avoid collision with our existing Icon atom
+    componentName: 'NuxtIcon',
+  },
+
   // Enable auto-imports for components and composables
   components: [
     {
@@ -38,12 +46,13 @@ export default defineNuxtConfig({
   runtimeConfig: {
     // Server-side only (not exposed to client)
     githubToken: process.env.GITHUB_TOKEN,
-    githubOwner: process.env.GITHUB_OWNER || 'Oracommit',
+    githubOwner: process.env.GITHUB_OWNER || 'GitHub',
     githubRepo: process.env.GITHUB_REPO || 'issues',
     
     // Public config (exposed to client)
     public: {
-      // Add any public config here if needed
+      githubOwner: process.env.GITHUB_OWNER || 'GitHub',
+      brandColors: process.env.BRAND_COLORS || '',
     }
   }
 })
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 9500b12..2651359 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,12 +9,16 @@
       "dependencies": {
         "@googlemaps/markerclusterer": "^2.6.2",
         "@nuxt/eslint": "^1.9.0",
+        "@nuxt/icon": "^2.2.3",
         "@nuxt/scripts": "^0.12.1",
         "@nuxt/test-utils": "^3.19.2",
         "@nuxt/ui": "^4.0.0",
+        "@pinia/nuxt": "^0.11.3",
         "@unhead/vue": "^2.0.17",
         "eslint": "^9.36.0",
         "nuxt": "^4.1.2",
+        "pinia": "^3.0.4",
+        "pinia-plugin-persistedstate": "^4.7.1",
         "typescript": "^5.9.2",
         "vue": "^3.5.21",
         "vue-router": "^4.5.1"
@@ -123,15 +127,6 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
-    "node_modules/@antfu/utils": {
-      "version": "9.2.1",
-      "resolved": "https://registry.npmjs.org/@antfu/utils/-/utils-9.2.1.tgz",
-      "integrity": "sha512-TMilPqXyii1AsiEii6l6ubRzbo76p6oshUSYPaKsmXDavyMLqjzVDkcp3pHp5ELMUNJHATcEOGxKTTsX9yYhGg==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
     "node_modules/@apidevtools/json-schema-ref-parser": {
       "version": "14.2.1",
       "resolved": "https://registry.npmjs.org/@apidevtools/json-schema-ref-parser/-/json-schema-ref-parser-14.2.1.tgz",
@@ -1520,9 +1515,9 @@
       }
     },
     "node_modules/@iconify/collections": {
-      "version": "1.0.598",
-      "resolved": "https://registry.npmjs.org/@iconify/collections/-/collections-1.0.598.tgz",
-      "integrity": "sha512-Mm3gHh0gwgi2T6sYygmCF9A+QirG8E+yCFqLd2zjXNmacbQ4ng0bHTP9QRZqNh96ao4YxxyKAcZyedjW35Wevw==",
+      "version": "1.0.696",
+      "resolved": "https://registry.npmjs.org/@iconify/collections/-/collections-1.0.696.tgz",
+      "integrity": "sha512-k06LxE/f1o3Tuj/n+ugiCyyq6CGxUG+k8o5ZZbOgVBHvpHiAWDDvZvdOSLNC8zeISRJhhiD04FkDKP7zk63fxQ==",
       "license": "MIT",
       "dependencies": {
         "@iconify/types": "*"
@@ -1535,37 +1530,20 @@
       "license": "MIT"
     },
     "node_modules/@iconify/utils": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@iconify/utils/-/utils-3.0.2.tgz",
-      "integrity": "sha512-EfJS0rLfVuRuJRn4psJHtK2A9TqVnkxPpHY6lYHiB9+8eSuudsxbwMiavocG45ujOo6FJ+CIRlRnlOGinzkaGQ==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@iconify/utils/-/utils-3.1.3.tgz",
+      "integrity": "sha512-LPKOXPn/zV+zis1oOfGWogaXVpqUybF3ZS6SCZIsz8vg0ivVp9+fVqyYB7xq0aiST/VhUQYGO1qo6uoYSiEJqw==",
       "license": "MIT",
       "dependencies": {
         "@antfu/install-pkg": "^1.1.0",
-        "@antfu/utils": "^9.2.0",
         "@iconify/types": "^2.0.0",
-        "debug": "^4.4.1",
-        "globals": "^15.15.0",
-        "kolorist": "^1.8.0",
-        "local-pkg": "^1.1.1",
-        "mlly": "^1.7.4"
-      }
-    },
-    "node_modules/@iconify/utils/node_modules/globals": {
-      "version": "15.15.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-15.15.0.tgz",
-      "integrity": "sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "import-meta-resolve": "^4.2.0"
       }
     },
     "node_modules/@iconify/vue": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-5.0.0.tgz",
-      "integrity": "sha512-C+KuEWIF5nSBrobFJhT//JS87OZ++QDORB6f2q2Wm6fl2mueSTpFBeBsveK0KW9hWiZ4mNiPjsh6Zs4jjdROSg==",
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-5.0.1.tgz",
+      "integrity": "sha512-aumwwooJlFJ5H5qYWB6ZTAyM0C8hpfcSVLB9/a3qnH1GGvIJ+FEbpEs4s/HfErYe/M5qZeLjwmESR5fFm3lXEw==",
       "license": "MIT",
       "dependencies": {
         "@iconify/types": "^2.0.0"
@@ -1574,7 +1552,7 @@
         "url": "https://github.com/sponsors/cyberalien"
       },
       "peerDependencies": {
-        "vue": ">=3"
+        "vue": ">=3.0.0"
       }
     },
     "node_modules/@internationalized/date": {
@@ -2132,27 +2110,93 @@
       }
     },
     "node_modules/@nuxt/icon": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@nuxt/icon/-/icon-2.0.0.tgz",
-      "integrity": "sha512-sy8+zkKMYp+H09S0cuTteL3zPTmktqzYPpPXV9ZkLNjrQsaPH08n7s/9wjr+C/K/w2R3u18E3+P1VIQi3xaq1A==",
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/@nuxt/icon/-/icon-2.2.3.tgz",
+      "integrity": "sha512-2HWDoMRWGSOWl7fu8wvvLTjoiaEwM7tSDww+6n4yVrNzKJFNAOLpYB9UevEf0CrK32q2JuA7TZnVpdwiPPdQSQ==",
       "license": "MIT",
       "dependencies": {
-        "@iconify/collections": "^1.0.579",
+        "@iconify/collections": "^1.0.691",
         "@iconify/types": "^2.0.0",
-        "@iconify/utils": "^3.0.0",
-        "@iconify/vue": "^5.0.0",
-        "@nuxt/devtools-kit": "^2.6.2",
-        "@nuxt/kit": "^4.0.3",
+        "@iconify/utils": "^3.1.3",
+        "@iconify/vue": "^5.0.1",
+        "@nuxt/devtools-kit": "^3.2.4",
+        "@nuxt/kit": "^4.4.6",
         "consola": "^3.4.2",
-        "local-pkg": "^1.1.1",
-        "mlly": "^1.7.4",
+        "local-pkg": "^1.2.1",
+        "mlly": "^1.8.2",
+        "ohash": "^2.0.11",
+        "picomatch": "^4.0.4",
+        "std-env": "^4.1.0",
+        "tinyglobby": "^0.2.17",
+        "ufo": "^1.6.4"
+      }
+    },
+    "node_modules/@nuxt/icon/node_modules/@nuxt/devtools-kit": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@nuxt/devtools-kit/-/devtools-kit-3.2.4.tgz",
+      "integrity": "sha512-Yxy2Xgmq5hf3dQy983V0xh0OJV2mYwRZz9eVIGc3EaribdFGPDNGMMbYqX9qCty3Pbxn/bCF3J0UyPaNlHVayQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@nuxt/kit": "^4.4.2",
+        "execa": "^8.0.1"
+      },
+      "peerDependencies": {
+        "vite": ">=6.0"
+      }
+    },
+    "node_modules/@nuxt/icon/node_modules/@nuxt/kit": {
+      "version": "4.4.8",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.4.8.tgz",
+      "integrity": "sha512-ZUlZ5iYfyfJFDPluhn6ZxFWcsuxWbLnZBc8w3MAROcQ4lYfZ+qFpALBLSNlpc0zhOa++33EE+5PEbOAdVIY+dw==",
+      "license": "MIT",
+      "dependencies": {
+        "c12": "^3.3.4",
+        "consola": "^3.4.2",
+        "defu": "^6.1.7",
+        "destr": "^2.0.5",
+        "errx": "^0.1.0",
+        "exsolve": "^1.0.8",
+        "ignore": "^7.0.5",
+        "jiti": "^2.7.0",
+        "klona": "^2.0.6",
+        "mlly": "^1.8.2",
         "ohash": "^2.0.11",
         "pathe": "^2.0.3",
-        "picomatch": "^4.0.3",
-        "std-env": "^3.9.0",
-        "tinyglobby": "^0.2.14"
+        "pkg-types": "^2.3.1",
+        "rc9": "^3.0.1",
+        "scule": "^1.3.0",
+        "semver": "^7.8.1",
+        "tinyglobby": "^0.2.17",
+        "ufo": "^1.6.4",
+        "unctx": "^2.5.0",
+        "untyped": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
+    "node_modules/@nuxt/icon/node_modules/rc9": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/rc9/-/rc9-3.0.1.tgz",
+      "integrity": "sha512-gMDyleLWVE+i6Sgtc0QbbY6pEKqYs97NGi6isHQPqYlLemPoO8dxQ3uGi0f4NiP98c+jMW6cG1Kx9dDwfvqARQ==",
+      "license": "MIT",
+      "dependencies": {
+        "defu": "^6.1.6",
+        "destr": "^2.0.5"
       }
     },
+    "node_modules/@nuxt/icon/node_modules/std-env": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-4.1.0.tgz",
+      "integrity": "sha512-Rq7ybcX2RuC55r9oaPVEW7/xu3tj8u4GeBYHBWCychFtzMIr86A7e3PPEBPT37sHStKX3+TiX/Fr/ACmJLVlLQ==",
+      "license": "MIT"
+    },
+    "node_modules/@nuxt/icon/node_modules/ufo": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.4.tgz",
+      "integrity": "sha512-JFNbkD1Svwe0KvGi8GOeLcP4kAWQ609twvCdcHxq1oSL8svv39ZuSvajcD8B+5D0eL4+s1Is2D/O6KN3qcTeRA==",
+      "license": "MIT"
+    },
     "node_modules/@nuxt/kit": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.1.2.tgz",
@@ -3715,6 +3759,68 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/@pinia/nuxt": {
+      "version": "0.11.3",
+      "resolved": "https://registry.npmjs.org/@pinia/nuxt/-/nuxt-0.11.3.tgz",
+      "integrity": "sha512-7WVNHpWx4qAEzOlnyrRC88kYrwnlR/PrThWT0XI1dSNyUAXu/KBv9oR37uCgYkZroqP5jn8DfzbkNF3BtKvE9w==",
+      "license": "MIT",
+      "dependencies": {
+        "@nuxt/kit": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "pinia": "^3.0.4"
+      }
+    },
+    "node_modules/@pinia/nuxt/node_modules/@nuxt/kit": {
+      "version": "4.4.8",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.4.8.tgz",
+      "integrity": "sha512-ZUlZ5iYfyfJFDPluhn6ZxFWcsuxWbLnZBc8w3MAROcQ4lYfZ+qFpALBLSNlpc0zhOa++33EE+5PEbOAdVIY+dw==",
+      "license": "MIT",
+      "dependencies": {
+        "c12": "^3.3.4",
+        "consola": "^3.4.2",
+        "defu": "^6.1.7",
+        "destr": "^2.0.5",
+        "errx": "^0.1.0",
+        "exsolve": "^1.0.8",
+        "ignore": "^7.0.5",
+        "jiti": "^2.7.0",
+        "klona": "^2.0.6",
+        "mlly": "^1.8.2",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "pkg-types": "^2.3.1",
+        "rc9": "^3.0.1",
+        "scule": "^1.3.0",
+        "semver": "^7.8.1",
+        "tinyglobby": "^0.2.17",
+        "ufo": "^1.6.4",
+        "unctx": "^2.5.0",
+        "untyped": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
+    "node_modules/@pinia/nuxt/node_modules/rc9": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/rc9/-/rc9-3.0.1.tgz",
+      "integrity": "sha512-gMDyleLWVE+i6Sgtc0QbbY6pEKqYs97NGi6isHQPqYlLemPoO8dxQ3uGi0f4NiP98c+jMW6cG1Kx9dDwfvqARQ==",
+      "license": "MIT",
+      "dependencies": {
+        "defu": "^6.1.6",
+        "destr": "^2.0.5"
+      }
+    },
+    "node_modules/@pinia/nuxt/node_modules/ufo": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.4.tgz",
+      "integrity": "sha512-JFNbkD1Svwe0KvGi8GOeLcP4kAWQ609twvCdcHxq1oSL8svv39ZuSvajcD8B+5D0eL4+s1Is2D/O6KN3qcTeRA==",
+      "license": "MIT"
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -5474,12 +5580,12 @@
       }
     },
     "node_modules/@vue/devtools-kit": {
-      "version": "7.7.7",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.7.7.tgz",
-      "integrity": "sha512-wgoZtxcTta65cnZ1Q6MbAfePVFxfM+gq0saaeytoph7nEa7yMXoi6sCPy4ufO111B9msnw0VOWjPEFCXuAKRHA==",
+      "version": "7.7.9",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.7.9.tgz",
+      "integrity": "sha512-PyQ6odHSgiDVd4hnTP+aDk2X4gl2HmLDfiyEnn3/oV+ckFDuswRs4IbBT7vacMuGdwY/XemxBoh302ctbsptuA==",
       "license": "MIT",
       "dependencies": {
-        "@vue/devtools-shared": "^7.7.7",
+        "@vue/devtools-shared": "^7.7.9",
         "birpc": "^2.3.0",
         "hookable": "^5.5.3",
         "mitt": "^3.0.1",
@@ -5495,9 +5601,9 @@
       "license": "MIT"
     },
     "node_modules/@vue/devtools-shared": {
-      "version": "7.7.7",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.7.7.tgz",
-      "integrity": "sha512-+udSj47aRl5aKb0memBvcUG9koarqnxNM5yjuREvqwK6T3ap4mn3Zqqc17QrBFTqSMjr3HK1cvStEZpMDpfdyw==",
+      "version": "7.7.9",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.7.9.tgz",
+      "integrity": "sha512-iWAb0v2WYf0QWmxCGy0seZNDPdO3Sp5+u78ORnyeonS6MT4PC7VPrryX2BpMJrwlDeaZ6BD4vP4XKjK0SZqaeA==",
       "license": "MIT",
       "dependencies": {
         "rfdc": "^1.4.1"
@@ -5703,9 +5809,9 @@
       }
     },
     "node_modules/acorn": {
-      "version": "8.15.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
-      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
+      "version": "8.17.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.17.0.tgz",
+      "integrity": "sha512-xRQbDb9BnwDafYNn6Vwl839DYVjqXYb1XVGtWAZ1kcDc6iwAL4hg3B1dZlRiuENFeO2H53gFG3in621AdERVAg==",
       "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
@@ -6251,26 +6357,26 @@
       }
     },
     "node_modules/c12": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/c12/-/c12-3.3.0.tgz",
-      "integrity": "sha512-K9ZkuyeJQeqLEyqldbYLG3wjqwpw4BVaAqvmxq3GYKK0b1A/yYQdIcJxkzAOWcNVWhJpRXAPfZFueekiY/L8Dw==",
-      "license": "MIT",
-      "dependencies": {
-        "chokidar": "^4.0.3",
-        "confbox": "^0.2.2",
-        "defu": "^6.1.4",
-        "dotenv": "^17.2.2",
-        "exsolve": "^1.0.7",
-        "giget": "^2.0.0",
-        "jiti": "^2.5.1",
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/c12/-/c12-3.3.4.tgz",
+      "integrity": "sha512-cM0ApFQSBXuourJejzwv/AuPRvAxordTyParRVcHjjtXirtkzM0uK2L9TTn9s0cXZbG7E55jCivRQzoxYmRAlA==",
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^5.0.0",
+        "confbox": "^0.2.4",
+        "defu": "^6.1.6",
+        "dotenv": "^17.3.1",
+        "exsolve": "^1.0.8",
+        "giget": "^3.2.0",
+        "jiti": "^2.6.1",
         "ohash": "^2.0.11",
         "pathe": "^2.0.3",
-        "perfect-debounce": "^2.0.0",
+        "perfect-debounce": "^2.1.0",
         "pkg-types": "^2.3.0",
-        "rc9": "^2.1.2"
+        "rc9": "^3.0.1"
       },
       "peerDependencies": {
-        "magicast": "^0.3.5"
+        "magicast": "*"
       },
       "peerDependenciesMeta": {
         "magicast": {
@@ -6278,10 +6384,25 @@
         }
       }
     },
+    "node_modules/c12/node_modules/chokidar": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz",
+      "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==",
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/c12/node_modules/dotenv": {
-      "version": "17.2.2",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.2.2.tgz",
-      "integrity": "sha512-Sf2LSQP+bOlhKWWyhFsn0UsfdK/kCWRv1iuA2gXAwt3dyNabr6QSj00I2V10pidqz69soatm9ZwZvpQMTIOd5Q==",
+      "version": "17.4.2",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.4.2.tgz",
+      "integrity": "sha512-nI4U3TottKAcAD9LLud4Cb7b2QztQMUEfHbvhTH09bqXTxnSie8WnjPALV/WMCrJZ6UV/qHJ6L03OqO3LcdYZw==",
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=12"
@@ -6290,6 +6411,38 @@
         "url": "https://dotenvx.com"
       }
     },
+    "node_modules/c12/node_modules/giget": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/giget/-/giget-3.3.0.tgz",
+      "integrity": "sha512-gzi2D96p+AMfDcmJHGDj3KJ9NRiwvlFAU5yfa3ROwWZmFUjX4P43x3BcyRaOMMLto1vUo7C+86+MFhYTl6Ryiw==",
+      "license": "MIT",
+      "bin": {
+        "giget": "dist/cli.mjs"
+      }
+    },
+    "node_modules/c12/node_modules/rc9": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/rc9/-/rc9-3.0.1.tgz",
+      "integrity": "sha512-gMDyleLWVE+i6Sgtc0QbbY6pEKqYs97NGi6isHQPqYlLemPoO8dxQ3uGi0f4NiP98c+jMW6cG1Kx9dDwfvqARQ==",
+      "license": "MIT",
+      "dependencies": {
+        "defu": "^6.1.6",
+        "destr": "^2.0.5"
+      }
+    },
+    "node_modules/c12/node_modules/readdirp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.0.0.tgz",
+      "integrity": "sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/cac": {
       "version": "6.7.14",
       "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
@@ -6675,9 +6828,9 @@
       "license": "MIT"
     },
     "node_modules/confbox": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.2.2.tgz",
-      "integrity": "sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==",
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.2.4.tgz",
+      "integrity": "sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ==",
       "license": "MIT"
     },
     "node_modules/consola": {
@@ -7121,9 +7274,9 @@
       }
     },
     "node_modules/defu": {
-      "version": "6.1.4",
-      "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.4.tgz",
-      "integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==",
+      "version": "6.1.7",
+      "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.7.tgz",
+      "integrity": "sha512-7z22QmUWiQ/2d0KkdYmANbRUVABpZ9SNYyH5vx6PZ+nE5bcC0l7uFvEfHlyld/HcGBFTL536ClDt3DEcSlEJAQ==",
       "license": "MIT"
     },
     "node_modules/denque": {
@@ -8163,9 +8316,9 @@
       }
     },
     "node_modules/exsolve": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.0.7.tgz",
-      "integrity": "sha512-VO5fQUzZtI6C+vx4w/4BWJpg3s/5l+6pRQEHzFRM8WFi4XffSP1Z+4qi7GbjWbvRQEbdIco5mIMq+zX4rPuLrw==",
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.0.8.tgz",
+      "integrity": "sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA==",
       "license": "MIT"
     },
     "node_modules/fake-indexeddb": {
@@ -8866,6 +9019,16 @@
         "node": ">=4"
       }
     },
+    "node_modules/import-meta-resolve": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-4.2.0.tgz",
+      "integrity": "sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/impound": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/impound/-/impound-1.0.0.tgz",
@@ -9199,9 +9362,9 @@
       }
     },
     "node_modules/jiti": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.0.tgz",
-      "integrity": "sha512-VXe6RjJkBPj0ohtqaO8vSWP3ZhAKo66fKrFNCll4BTcwljPLz03pCbaNKfzGP5MbrCYcbJ7v0nOYYwUzTEIdXQ==",
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
+      "integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==",
       "license": "MIT",
       "bin": {
         "jiti": "lib/jiti-cli.mjs"
@@ -9331,12 +9494,6 @@
       "integrity": "sha512-xYSH7AvuQ6nXkq42x0v5S8/Iry+cfulBz/DJQzhIyESdLD7425jXsPy4vn5cCXU+HhRN2kVw51Vd1K6/By4BQg==",
       "license": "MIT"
     },
-    "node_modules/kolorist": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.8.0.tgz",
-      "integrity": "sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==",
-      "license": "MIT"
-    },
     "node_modules/launch-editor": {
       "version": "2.11.1",
       "resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.11.1.tgz",
@@ -9697,9 +9854,9 @@
       }
     },
     "node_modules/local-pkg": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.1.2.tgz",
-      "integrity": "sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.2.1.tgz",
+      "integrity": "sha512-++gUqRDEvcnN6Zhqrr+y/CkVEHhlrR96vZn3nZZPYzMcBUyBtTKzB9NadClFIsIVSsu+3i9tfk/erqy9kAmt7Q==",
       "license": "MIT",
       "dependencies": {
         "mlly": "^1.7.4",
@@ -9789,9 +9946,9 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.30.19",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.19.tgz",
-      "integrity": "sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==",
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.5"
@@ -9960,15 +10117,15 @@
       "license": "MIT"
     },
     "node_modules/mlly": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.8.0.tgz",
-      "integrity": "sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==",
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.8.2.tgz",
+      "integrity": "sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA==",
       "license": "MIT",
       "dependencies": {
-        "acorn": "^8.15.0",
+        "acorn": "^8.16.0",
         "pathe": "^2.0.3",
         "pkg-types": "^1.3.1",
-        "ufo": "^1.6.1"
+        "ufo": "^1.6.3"
       }
     },
     "node_modules/mlly/node_modules/confbox": {
@@ -9988,6 +10145,12 @@
         "pathe": "^2.0.1"
       }
     },
+    "node_modules/mlly/node_modules/ufo": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.4.tgz",
+      "integrity": "sha512-JFNbkD1Svwe0KvGi8GOeLcP4kAWQ609twvCdcHxq1oSL8svv39ZuSvajcD8B+5D0eL4+s1Is2D/O6KN3qcTeRA==",
+      "license": "MIT"
+    },
     "node_modules/mocked-exports": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/mocked-exports/-/mocked-exports-0.1.1.tgz",
@@ -10840,9 +11003,9 @@
       "license": "MIT"
     },
     "node_modules/perfect-debounce": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-2.0.0.tgz",
-      "integrity": "sha512-fkEH/OBiKrqqI/yIgjR92lMfs2K8105zt/VT6+7eTjNwisrsh47CeIED9z58zI7DfKdH3uHAn25ziRZn3kgAow==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-2.1.0.tgz",
+      "integrity": "sha512-LjgdTytVFXeUgtHZr9WYViYSM/g8MkcTPYDlPa3cDqMirHjKiSZPYd6DoL7pK8AJQr+uWkQvCjHNdiMqsrJs+g==",
       "license": "MIT"
     },
     "node_modules/picocolors": {
@@ -10852,9 +11015,9 @@
       "license": "ISC"
     },
     "node_modules/picomatch": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -10863,14 +11026,69 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pinia": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.4.tgz",
+      "integrity": "sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^7.7.7"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.5.0",
+        "vue": "^3.5.11"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia-plugin-persistedstate": {
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-4.7.1.tgz",
+      "integrity": "sha512-WHOqh2esDlR3eAaknPbqXrkkj0D24h8shrDPqysgCFR6ghqP/fpFfJmMPJp0gETHsvrh9YNNg6dQfo2OEtDnIQ==",
+      "license": "MIT",
+      "dependencies": {
+        "defu": "^6.1.4"
+      },
+      "peerDependencies": {
+        "@nuxt/kit": ">=3.0.0",
+        "@pinia/nuxt": ">=0.10.0",
+        "pinia": ">=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@nuxt/kit": {
+          "optional": true
+        },
+        "@pinia/nuxt": {
+          "optional": true
+        },
+        "pinia": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/@vue/devtools-api": {
+      "version": "7.7.9",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.7.9.tgz",
+      "integrity": "sha512-kIE8wvwlcZ6TJTbNeU2HQNtaxLx3a84aotTITUuL/4bzfPxzajGBOoqjMhwZJ8L9qFYDU/lAYMEEm11dnZOD6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-kit": "^7.7.9"
+      }
+    },
     "node_modules/pkg-types": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.3.0.tgz",
-      "integrity": "sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.3.1.tgz",
+      "integrity": "sha512-y+ichcgc2LrADuhLNAx8DFjVfgz91pRxfZdI3UDhxHvcVEZsenLO+7XaU5vOp0u/7V/wZ+plyuQxtrDlZJ+yeg==",
       "license": "MIT",
       "dependencies": {
-        "confbox": "^0.2.2",
-        "exsolve": "^1.0.7",
+        "confbox": "^0.2.4",
+        "exsolve": "^1.0.8",
         "pathe": "^2.0.3"
       }
     },
@@ -11901,9 +12119,9 @@
       "license": "MIT"
     },
     "node_modules/semver": {
-      "version": "7.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
-      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "version": "7.8.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.4.tgz",
+      "integrity": "sha512-rUCObTnP32Q08R2uuIrt7r9PlEonuTmtuXYcW6s5kjdlj3xbnwe+21yXptAUYcMAABLkYYTtnmzb3w3EDZfueA==",
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -12588,13 +12806,13 @@
       "license": "MIT"
     },
     "node_modules/tinyglobby": {
-      "version": "0.2.15",
-      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
-      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "version": "0.2.17",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
+      "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
       "license": "MIT",
       "dependencies": {
         "fdir": "^6.5.0",
-        "picomatch": "^4.0.3"
+        "picomatch": "^4.0.4"
       },
       "engines": {
         "node": ">=12.0.0"
@@ -12740,15 +12958,15 @@
       "license": "MIT"
     },
     "node_modules/unctx": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/unctx/-/unctx-2.4.1.tgz",
-      "integrity": "sha512-AbaYw0Nm4mK4qjhns67C+kgxR2YWiwlDBPzxrN8h8C6VtAdCgditAY5Dezu3IJy4XVqAnbrXt9oQJvsn3fyozg==",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/unctx/-/unctx-2.5.0.tgz",
+      "integrity": "sha512-p+Rz9x0R7X+CYDkT+Xg8/GhpcShTlU8n+cf9OtOEf7zEQsNcCZO1dPKNRDqvUTaq+P32PMMkxWHwfrxkqfqAYg==",
       "license": "MIT",
       "dependencies": {
-        "acorn": "^8.14.0",
+        "acorn": "^8.15.0",
         "estree-walker": "^3.0.3",
-        "magic-string": "^0.30.17",
-        "unplugin": "^2.1.0"
+        "magic-string": "^0.30.21",
+        "unplugin": "^2.3.11"
       }
     },
     "node_modules/undici-types": {
@@ -12867,9 +13085,9 @@
       }
     },
     "node_modules/unplugin": {
-      "version": "2.3.10",
-      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-2.3.10.tgz",
-      "integrity": "sha512-6NCPkv1ClwH+/BGE9QeoTIl09nuiAt0gS28nn1PvYXsGKRwM2TCbFA2QiilmehPDTXIe684k4rZI1yl3A1PCUw==",
+      "version": "2.3.11",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-2.3.11.tgz",
+      "integrity": "sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww==",
       "license": "MIT",
       "dependencies": {
         "@jridgewell/remapping": "^2.3.5",
diff --git a/package.json b/package.json
index 9162f24..b2552b8 100644
--- a/package.json
+++ b/package.json
@@ -12,12 +12,16 @@
   "dependencies": {
     "@googlemaps/markerclusterer": "^2.6.2",
     "@nuxt/eslint": "^1.9.0",
+    "@nuxt/icon": "^2.2.3",
     "@nuxt/scripts": "^0.12.1",
     "@nuxt/test-utils": "^3.19.2",
     "@nuxt/ui": "^4.0.0",
+    "@pinia/nuxt": "^0.11.3",
     "@unhead/vue": "^2.0.17",
     "eslint": "^9.36.0",
     "nuxt": "^4.1.2",
+    "pinia": "^3.0.4",
+    "pinia-plugin-persistedstate": "^4.7.1",
     "typescript": "^5.9.2",
     "vue": "^3.5.21",
     "vue-router": "^4.5.1"
diff --git a/pages/index.vue b/pages/index.vue
index 1eb0c65..ffa5942 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,8 +3,10 @@ definePageMeta({
   name: 'WorkflowsDashboard'
 })
 
+const { public: { githubOwner } } = useRuntimeConfig()
+
 useHead({
-  title: 'Workflows - GitHub Dashboard',
+  title: `Workflows - ${githubOwner}`,
   meta: [
     { name: 'description', content: 'Beautiful dashboard for monitoring GitHub workflow states' }
   ]
@@ -15,20 +17,21 @@ const {
   error,
   refresh,
   isRefreshing,
-  lastUpdated,
-  showSkeleton,
-  showRefreshIndicator
-} = useCachedFetch<WorkflowsResponse>(
-  '/api/workflows',
-  {
-    key: 'workflows',
-    staleTime: 5 * 60 * 1000, // 5 minutes
-  }
-)
+} = useResource<WorkflowsResponse>('workflows', '/api/workflows', {
+  staleTime: 5 * 60 * 1000,
+})
+
+const isRunning = (status: string | undefined) => {
+  const s = status?.toLowerCase() ?? ''
+  return s.includes('in_progress') || s.includes('queued')
+}
 
 const workflows = computed(() => {
-  // Sort workflows by newest first (updated_at)
-  return (data.value?.workflows || []).sort((a, b) => {
+  // Running workflows first; then by most recent update.
+  return [...(data.value?.workflows || [])].sort((a, b) => {
+    const aRunning = isRunning(a.status) ? 0 : 1
+    const bRunning = isRunning(b.status) ? 0 : 1
+    if (aRunning !== bRunning) return aRunning - bRunning
     return new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime()
   })
 })
@@ -36,17 +39,14 @@ const workflows = computed(() => {
 
 <template>
   <PageLayout
-    :show-skeleton="showSkeleton"
-    :show-refresh-indicator="showRefreshIndicator"
     :is-refreshing="isRefreshing"
-    :last-updated="lastUpdated"
     :error="error"
     :data="data"
     :on-retry="refresh"
     :skeleton-count="6"
   >
     <template #content>
-      <div class="workflows-container">
+      <div v-if="workflows.length > 0" class="workflows-list">
         <WorkflowStatusCard
           v-for="workflow in workflows"
           :key="workflow.id"
@@ -55,7 +55,7 @@ const workflows = computed(() => {
       </div>
 
       <EmptyState
-        v-if="workflows.length === 0"
+        v-else
         title="No workflows found"
         message="This repository doesn't have any workflows."
       />
@@ -64,10 +64,18 @@ const workflows = computed(() => {
 </template>
 
 <style scoped>
-.workflows-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--spacing-6);
-  justify-content: flex-start;
+/* Parent grid declares the column tracks; every row inherits them via subgrid
+ * so the icon, name, status, run-number, and time columns line up across every
+ * workflow regardless of content length. */
+.workflows-list {
+  display: grid;
+  grid-template-columns: auto 1fr auto auto auto;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  overflow: hidden;
+}
+
+.workflows-list > :last-child {
+  border-bottom: 0;
 }
 </style>
\ No newline at end of file
diff --git a/pages/project-views/index.vue b/pages/project-views/index.vue
deleted file mode 100644
index 323bc2a..0000000
--- a/pages/project-views/index.vue
+++ /dev/null
@@ -1,322 +0,0 @@
-<script setup lang="ts">
-import type { ProjectV2View } from '../../server/utils/github-graphql'
-import type { ViewItem } from '../../composables/useViewFiltering'
-
-definePageMeta({
-  name: 'ProjectViewsPage'
-})
-
-useHead({
-  title: 'Project Views - GitHub Dashboard'
-})
-
-// Fetch projects list
-const {
-  data: projects,
-  error: projectsError,
-  pending: projectsPending
-} = useFetch<Array<{
-  id: string
-  number: number
-  title: string
-  viewsCount: number
-  views: Array<{ id: string; name: string; number: number; layout: string }>
-}>>('/api/project-views', {
-  server: false
-})
-
-// Selected project
-const selectedProjectId = ref<string | null>(null)
-
-// Auto-select first project when projects load
-watch(projects, (newProjects) => {
-  if (newProjects && newProjects.length > 0 && !selectedProjectId.value) {
-    selectedProjectId.value = newProjects[0].id
-  }
-}, { immediate: true })
-
-// Project selector options
-const projectOptions = computed(() => {
-  if (!projects.value) return []
-
-  return projects.value.map(p => ({
-    value: p.id,
-    label: `${p.title} (${p.viewsCount} views)`
-  }))
-})
-
-// Fetch selected project details (with full view configurations)
-const {
-  data: projectDetail,
-  error: projectDetailError,
-  pending: projectDetailPending,
-  refresh: refreshProject
-} = useFetch<{
-  id: string
-  title: string
-  shortDescription: string | null
-  url: string
-  views: ProjectV2View[]
-}>(
-  () => selectedProjectId.value ? `/api/project-views/${selectedProjectId.value}` : null,
-  {
-    key: () => selectedProjectId.value ? `project-detail-${selectedProjectId.value}` : 'project-detail-null',
-    server: false,
-    immediate: true,
-    watch: false
-  }
-)
-
-// Fetch items for selected project
-const {
-  data: items,
-  error: itemsError,
-  pending: itemsPending,
-  refresh: refreshItems
-} = useFetch<ViewItem[]>(
-  () => selectedProjectId.value ? `/api/project-views/${selectedProjectId.value}/items` : null,
-  {
-    key: () => selectedProjectId.value ? `project-items-${selectedProjectId.value}` : 'project-items-null',
-    server: false,
-    immediate: true,
-    watch: false
-  }
-)
-
-// Active view (tab)
-const activeViewId = ref<string | null>(null)
-
-// Watch for project changes and refetch data
-watch(selectedProjectId, async (newId, oldId) => {
-  if (newId && newId !== oldId) {
-    await Promise.all([refreshProject(), refreshItems()])
-  }
-})
-
-// Update active view when project detail loads
-watch(projectDetail, (detail) => {
-  if (detail && detail.views.length > 0) {
-    // Select first view by default
-    activeViewId.value = detail.views[0].id
-  }
-})
-
-// Tab configuration
-const tabs = computed(() => {
-  if (!projectDetail.value) return []
-
-  return projectDetail.value.views.map(view => ({
-    id: view.id,
-    label: view.name,
-    icon: view.layout === 'BOARD_LAYOUT' ? '📊' : view.layout === 'ROADMAP_LAYOUT' ? '📅' : '📋'
-  }))
-})
-
-// Current view
-const currentView = computed(() => {
-  if (!projectDetail.value || !activeViewId.value) return null
-
-  return projectDetail.value.views.find(v => v.id === activeViewId.value) || null
-})
-
-// Combined loading state
-const isLoading = computed(() => projectDetailPending.value || itemsPending.value)
-
-// Combined error state
-const error = computed(() => projectsError.value || projectDetailError.value || itemsError.value)
-</script>
-
-<template>
-  <div class="project-views-page">
-    <PageLayout
-      :show-skeleton="false"
-      :show-refresh-indicator="false"
-      :is-refreshing="false"
-      :error="projectsError"
-      :data="projects"
-      :on-retry="() => {}"
-    >
-      <template #content>
-        <!-- Page Header -->
-        <div class="page-header">
-          <Header :level="1" size="3xl" variant="primary">
-            Project Views
-          </Header>
-          <Text variant="secondary" size="base">
-            Select a project to view its configured views with filters, grouping, and sorting.
-          </Text>
-        </div>
-
-        <!-- Project Selector -->
-        <div class="project-selector">
-          <div class="selector-field">
-            <label for="project-select" class="selector-label">
-              <Text variant="secondary" size="sm" weight="medium">Select Project:</Text>
-            </label>
-            <select
-              id="project-select"
-              v-model="selectedProjectId"
-              class="selector-input"
-              :disabled="projectsPending"
-            >
-              <option :value="null">-- Choose a project --</option>
-              <option v-for="option in projectOptions" :key="option.value" :value="option.value">
-                {{ option.label }}
-              </option>
-            </select>
-          </div>
-
-          <div v-if="selectedProjectId && projectDetail" class="project-info">
-            <Link :href="projectDetail.url" variant="primary" size="sm" external>
-              View on GitHub →
-            </Link>
-          </div>
-        </div>
-
-        <!-- Loading State -->
-        <div v-if="isLoading" class="loading-container">
-          <LoadingSpinner message="Loading project views..." />
-        </div>
-
-        <!-- Error State -->
-        <ErrorBox
-          v-else-if="error"
-          :error="error"
-          title="Failed to load project views"
-          @retry="() => { refreshProject(); refreshItems(); }"
-        />
-
-        <!-- Project Views -->
-        <div v-else-if="selectedProjectId && projectDetail && items" class="project-views">
-          <!-- Tabs -->
-          <Tabs v-if="tabs.length > 0" v-model="activeViewId" :tabs="tabs" />
-
-          <!-- View Renderer -->
-          <ProjectViewRenderer
-            v-if="currentView"
-            :view="currentView"
-            :items="items"
-          />
-
-          <!-- No views -->
-          <EmptyState
-            v-else
-            icon="📋"
-            title="No Views Found"
-            message="This project doesn't have any views configured."
-            :action-url="projectDetail.url"
-            action-label="Configure on GitHub →"
-            :action-external="true"
-          />
-        </div>
-
-        <!-- No project selected -->
-        <EmptyState
-          v-else-if="!selectedProjectId"
-          icon="🎯"
-          title="Select a Project"
-          message="Choose a project from the dropdown above to view its configured views."
-        />
-      </template>
-    </PageLayout>
-  </div>
-</template>
-
-<style scoped>
-.project-views-page {
-  padding: var(--spacing-6);
-  min-height: 100vh;
-  background: var(--color-slate-50);
-}
-
-.page-header {
-  margin-bottom: var(--spacing-6);
-}
-
-.page-header h1 {
-  margin-bottom: var(--spacing-2);
-}
-
-.project-selector {
-  background: var(--color-white);
-  padding: var(--spacing-5);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-sm);
-  margin-bottom: var(--spacing-6);
-  display: flex;
-  align-items: flex-end;
-  gap: var(--spacing-4);
-  flex-wrap: wrap;
-}
-
-.selector-field {
-  flex: 1;
-  min-width: 300px;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-2);
-}
-
-.selector-label {
-  display: block;
-}
-
-.selector-input {
-  padding: var(--spacing-3);
-  border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-md);
-  font-size: var(--font-size-base);
-  background: var(--color-white);
-  cursor: pointer;
-  transition: all var(--transition-base);
-}
-
-.selector-input:hover {
-  border-color: var(--color-primary-500);
-}
-
-.selector-input:focus {
-  outline: 2px solid var(--color-primary-500);
-  outline-offset: 2px;
-  border-color: var(--color-primary-500);
-}
-
-.selector-input:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.project-info {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-3);
-}
-
-.loading-container {
-  display: flex;
-  justify-content: center;
-  padding: var(--spacing-15);
-}
-
-.project-views {
-  background: var(--color-white);
-  padding: var(--spacing-5);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-sm);
-}
-
-@media (max-width: 768px) {
-  .project-views-page {
-    padding: var(--spacing-4);
-  }
-
-  .project-selector {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .selector-field {
-    min-width: 100%;
-  }
-}
-</style>
diff --git a/pages/projects/[id].vue b/pages/projects/[id].vue
deleted file mode 100644
index 8e22074..0000000
--- a/pages/projects/[id].vue
+++ /dev/null
@@ -1,370 +0,0 @@
-<script setup lang="ts">
-import { useProjectGrouping } from '../../composables/useProjectGrouping'
-import { useProjectFilters } from '../../features/organisms/project-filters/useProjectFilters'
-import ProjectFilters from '../../features/organisms/project-filters/ProjectFilters.vue'
-import ProjectItemsTable from '../../features/organisms/project-items-table/ProjectItemsTable.vue'
-import ProjectProgressGraph from '../../features/organisms/project-graph/ProjectProgressGraph.vue'
-
-definePageMeta({
-  name: 'ProjectBoardDetail'
-})
-
-// Initialize composables
-const { groupItems, sortItemsInGroups, getAvailableGroupFields } = useProjectGrouping()
-const { createFilterOptions, filterItems, createDefaultFilters } = useProjectFilters()
-
-const route = useRoute()
-const projectId = route.params.id as string
-
-useHead({
-  title: 'Project Board Details - GitHub Dashboard'
-})
-
-const { data: project, pending, error, refresh } = useFetch<ProjectDetails>(`/api/projects/${projectId}`, {
-  server: false
-})
-
-// Selected grouping
-const selectedGroupBy = ref<string>('')
-
-// UI state
-const isDescriptionExpanded = ref(false)
-const isFiltersExpanded = ref(false)
-const isGraphExpanded = ref(false)
-
-// Current items from project (no views)
-const currentItems = computed(() => {
-  if (!project.value) return []
-  return project.value.items
-})
-
-// Filters
-const filters = ref(createDefaultFilters())
-
-// Filter options using composable
-const filterOptions = computed(() => createFilterOptions(currentItems.value))
-const stateOptions = computed(() => filterOptions.value.stateOptions.value)
-const typeOptions = computed(() => filterOptions.value.typeOptions)
-const repositoryOptions = computed(() => filterOptions.value.repositoryOptions.value)
-const customFieldOptions = computed(() => filterOptions.value.customFieldOptions.value)
-
-// Filtered items using composable
-const filteredItems = computed(() => {
-  return filterItems(currentItems.value, filters.value)
-})
-
-// Group By options - available grouping fields from items
-const groupByOptions = computed(() => {
-  const fields = getAvailableGroupFields(currentItems.value)
-  return [
-    { value: '', label: 'None (flat list)' },
-    ...fields.map(field => ({ value: field, label: field }))
-  ]
-})
-
-// Grouped items using composable with manual grouping (no views)
-const groupedItems = computed(() => {
-  const items = filteredItems.value
-  // Use selectedGroupBy (empty string means no grouping)
-  const groupField = selectedGroupBy.value || undefined
-  const grouped = groupItems(items, null, groupField)
-  return sortItemsInGroups(grouped, null)
-})
-
-// Clear filters
-const clearFilters = () => {
-  filters.value = createDefaultFilters()
-}
-
-// Show custom field columns when fields are available in items
-const showStatusColumn = computed(() =>
-  currentItems.value.some(item => item.custom_fields['Status'])
-)
-const showPriorityColumn = computed(() =>
-  currentItems.value.some(item => item.custom_fields['Priority'])
-)
-const showSizeColumn = computed(() =>
-  currentItems.value.some(item => item.custom_fields['Size'])
-)
-const showParentIssueColumn = computed(() =>
-  currentItems.value.some(item => item.custom_fields['Parent issue'])
-)
-const showSubIssuesColumn = computed(() =>
-  currentItems.value.some(item => item.custom_fields['Sub-issues progress'])
-)
-</script>
-
-<template>
-  <div class="project-detail-page">
-    <!-- Loading State -->
-    <div v-if="pending" class="loading-state">
-      <LoadingSpinner message="Loading project board..." />
-    </div>
-
-    <!-- Error State -->
-    <div v-else-if="error" class="error-state">
-      <ErrorBox
-        :error="error"
-        title="Failed to load project board"
-        @retry="refresh"
-      >
-        <template #actions>
-          <Text variant="secondary" size="base">Project ID: {{ projectId }}</Text>
-          <Link to="/projects" variant="primary" size="base">← Back to Project Boards</Link>
-        </template>
-      </ErrorBox>
-    </div>
-
-    <!-- Content -->
-    <div v-else-if="project" class="project-content">
-
-      <!-- Header -->
-      <div class="project-header">
-        <div class="header-content">
-          <Breadcrumbs
-            :items="[
-              { label: 'Project Boards', to: '/projects' },
-              { label: project.title, current: true }
-            ]"
-          />
-
-          <div class="title-row">
-            <Header
-              :level="1"
-              size="3xl"
-              variant="primary"
-              class="project-title"
-            >
-              {{ project.title }}
-            </Header>
-            <button
-              v-if="project.shortDescription"
-              class="tiny-toggle"
-              @click="isDescriptionExpanded = !isDescriptionExpanded"
-              title="Toggle description"
-            >
-              {{ isDescriptionExpanded ? '▼' : '▶' }}
-            </button>
-            <button
-              class="tiny-toggle"
-              @click="isFiltersExpanded = !isFiltersExpanded"
-              title="Toggle filters"
-            >
-              🔍 {{ isFiltersExpanded ? '▼' : '▶' }}
-            </button>
-            <button
-              class="tiny-toggle"
-              @click="isGraphExpanded = !isGraphExpanded"
-              title="Toggle progress graph"
-            >
-              📊 {{ isGraphExpanded ? '▼' : '▶' }}
-            </button>
-          </div>
-
-          <Text
-            v-if="project.shortDescription && isDescriptionExpanded"
-            variant="tertiary"
-            size="base"
-            class="project-description"
-          >
-            {{ project.shortDescription }}
-          </Text>
-
-          <div class="project-meta">
-            <Text variant="tertiary" size="sm">{{ project.items.length }} items</Text>
-            <Link :href="project.url" variant="primary" size="sm" external>View on GitHub →</Link>
-          </div>
-        </div>
-      </div>
-
-      <!-- Filters -->
-      <ProjectFilters
-        v-if="isFiltersExpanded"
-        v-model:filters="filters"
-        v-model:selected-group-by="selectedGroupBy"
-        :group-by-options="groupByOptions"
-        :state-options="stateOptions"
-        :type-options="typeOptions"
-        :repository-options="repositoryOptions"
-        :custom-field-options="customFieldOptions"
-        :filtered-count="filteredItems.length"
-        :total-count="currentItems.length"
-        @clear-filters="clearFilters"
-      />
-
-      <!-- Progress Graph -->
-      <ProjectProgressGraph
-        v-if="isGraphExpanded"
-        :items="filteredItems"
-      />
-
-      <!-- Items Table -->
-      <div class="items-section">
-        <div v-if="filteredItems.length === 0" class="empty-items">
-          <Text variant="tertiary" size="base">No items match the current filters.</Text>
-        </div>
-
-        <div v-else class="items-table-container">
-          <!-- Show groups when grouping is selected, otherwise show flat table -->
-          <div v-if="selectedGroupBy">
-            <div v-for="group in groupedItems" :key="group.name" class="group-section">
-              <div class="group-header">
-                <Header
-                  :level="4"
-                  size="base"
-                  variant="primary"
-                  class="group-title"
-                >
-                  {{ group.name }}
-                </Header>
-                <Text variant="tertiary" size="sm" weight="medium">{{ group.count }} items</Text>
-              </div>
-
-              <ProjectItemsTable
-                :items="group.items"
-                :show-status="showStatusColumn"
-                :show-priority="showPriorityColumn"
-                :show-size="showSizeColumn"
-                :show-parent-issue="showParentIssueColumn"
-                :show-sub-issues-progress="showSubIssuesColumn"
-              />
-            </div>
-          </div>
-
-          <!-- Flat table when no grouping -->
-          <ProjectItemsTable
-            v-else
-            :items="filteredItems"
-            :show-status="showStatusColumn"
-            :show-priority="showPriorityColumn"
-            :show-size="showSizeColumn"
-            :show-parent-issue="showParentIssueColumn"
-            :show-sub-issues-progress="showSubIssuesColumn"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-/* Layout structure only - typography and colors handled by atoms */
-.project-detail-page {
-  padding: var(--spacing-5);
-  min-height: 100vh;
-  background: var(--color-slate-50);
-}
-
-.loading-state, .error-state {
-  text-align: center;
-  padding: var(--spacing-15) var(--spacing-5);
-}
-
-.project-content {
-  max-width: 1400px;
-  margin: 0 auto;
-}
-
-.project-header {
-  background: var(--color-white);
-  border-radius: var(--radius-lg);
-  padding: var(--spacing-6);
-  margin-bottom: var(--spacing-6);
-  box-shadow: var(--shadow-sm);
-}
-
-.title-row {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-3);
-  margin-bottom: var(--spacing-2);
-}
-
-.project-title {
-  margin: 0;
-}
-
-.tiny-toggle {
-  background: none;
-  border: 1px solid var(--color-gray-300);
-  border-radius: var(--radius-sm);
-  padding: 2px 6px;
-  font-size: var(--font-size-xs);
-  cursor: pointer;
-  color: var(--color-gray-600);
-  transition: all 0.2s;
-  flex-shrink: 0;
-}
-
-.tiny-toggle:hover {
-  background: var(--color-gray-100);
-  border-color: var(--color-gray-400);
-}
-
-.project-description {
-  margin: 0 0 var(--spacing-4) 0;
-}
-
-.project-meta {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-4);
-}
-
-.items-section {
-  background: var(--color-white);
-  border-radius: var(--radius-lg);
-  padding: var(--spacing-6);
-  box-shadow: var(--shadow-sm);
-}
-
-.empty-items {
-  text-align: center;
-  padding: var(--spacing-10);
-}
-
-.items-table-container {
-  overflow-x: auto;
-}
-
-.loading-items {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: var(--spacing-15) var(--spacing-5);
-}
-
-.group-section {
-  margin-bottom: var(--spacing-8);
-}
-
-.group-section:last-child {
-  margin-bottom: 0;
-}
-
-.group-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--spacing-3) var(--spacing-4);
-  background: var(--color-slate-100);
-  border-bottom: var(--border-width-thin) solid var(--color-slate-200);
-  border-radius: var(--radius-md) var(--radius-md) 0 0;
-}
-
-.group-title {
-  margin: 0;
-}
-
-@media (max-width: 768px) {
-  .project-detail-page {
-    padding: var(--spacing-4);
-  }
-
-  .project-header,
-  .items-section {
-    padding: var(--spacing-4);
-  }
-}
-</style>
\ No newline at end of file
diff --git a/pages/projects/index.vue b/pages/projects/index.vue
deleted file mode 100644
index 4b853c4..0000000
--- a/pages/projects/index.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<script setup lang="ts">
-definePageMeta({
-  name: 'ProjectsOverview'
-})
-
-useHead({
-  title: 'Project Boards - GitHub Dashboard'
-})
-
-const {
-  data: projects,
-  error,
-  refresh,
-  isRefreshing,
-  lastUpdated,
-  showSkeleton,
-  showRefreshIndicator
-} = useCachedFetch<Project[]>(
-  '/api/projects',
-  {
-    key: 'projects',
-    staleTime: 5 * 60 * 1000, // 5 minutes
-  }
-)
-</script>
-
-<template>
-  <PageLayout
-    :show-skeleton="showSkeleton"
-    :show-refresh-indicator="showRefreshIndicator"
-    :is-refreshing="isRefreshing"
-    :last-updated="lastUpdated"
-    :error="error"
-    :data="projects"
-    :on-retry="refresh"
-    :skeleton-count="4"
-  >
-    <template #content>
-      <template v-if="projects && projects.length > 0">
-        <div class="projects-grid">
-          <ProjectCard
-            v-for="project in projects"
-            :key="project.id"
-            :project="project"
-          />
-        </div>
-      </template>
-
-      <!-- Empty State -->
-      <EmptyState
-        v-else-if="projects && projects.length === 0"
-        icon="📋"
-        title="No Project Boards Found"
-        message="This organization doesn't have any GitHub Project Boards yet."
-        action-label="Create First Project Board →"
-        action-url="https://github.com/orgs/Oracommit/projects"
-        :action-external="true"
-      />
-    </template>
-  </PageLayout>
-</template>
-
-<style scoped>
-.projects-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--spacing-5);
-  justify-content: center;
-}
-
-@media (max-width: 768px) {
-  .projects-grid {
-    gap: var(--spacing-4);
-  }
-}
-</style>
\ No newline at end of file
diff --git a/pages/pull-requests.vue b/pages/pull-requests.vue
index 9dd2124..2ceb0a3 100644
--- a/pages/pull-requests.vue
+++ b/pages/pull-requests.vue
@@ -3,35 +3,25 @@ definePageMeta({
   name: 'PullRequestsOverview'
 })
 
+const { public: { githubOwner } } = useRuntimeConfig()
+
 useHead({
-  title: 'Pull Requests - GitHub Dashboard'
+  title: `Pull Requests - ${githubOwner}`
 })
 
 const selectedState = ref('open')
 const searchQuery = ref('')
 const selectedRepository = ref('')
 
-// Fetch data with caching
 const {
   data: pullRequestsData,
   error,
   refresh,
   isRefreshing,
-  lastUpdated,
-  showSkeleton,
-  showRefreshIndicator
-} = useCachedFetch<PullRequestsResponse>(
-  '/api/pull-requests',
-  {
-    key: 'pull-requests',
-    staleTime: 5 * 60 * 1000, // 5 minutes
-  },
-  {
-    query: {
-      state: selectedState
-    },
-    watch: [selectedState]
-  }
+} = useResource<PullRequestsResponse>(
+  () => `pull-requests:${selectedState.value}`,
+  () => `/api/pull-requests?state=${selectedState.value}`,
+  { staleTime: 5 * 60 * 1000 },
 )
 
 // Computed properties for filtering and stats
@@ -73,51 +63,49 @@ const stats = computed(() => pullRequestsData.value?.stats || {
   draft: 0,
   repositories: 0
 })
+
+const headerStats = useHeaderStats()
+watchEffect(() => {
+  headerStats.set([
+    { label: 'Total PRs', value: stats.value.total },
+    { label: 'Open', value: stats.value.open, variant: 'success' },
+    { label: 'Draft', value: stats.value.draft },
+    { label: 'Repos', value: stats.value.repositories, variant: 'info' },
+  ])
+})
+onBeforeUnmount(() => headerStats.clear())
+
+const filtersOpen = ref(false)
+const hasActiveFilters = computed(() =>
+  selectedState.value !== 'open' || searchQuery.value.trim() !== '' || selectedRepository.value !== '',
+)
+
+const headerActions = useHeaderActions()
+watchEffect(() => {
+  headerActions.set([
+    {
+      id: 'pr-filters',
+      icon: 'lucide:search',
+      label: filtersOpen.value ? 'Hide filters' : 'Show filters',
+      active: filtersOpen.value,
+      dot: hasActiveFilters.value,
+      onClick: () => { filtersOpen.value = !filtersOpen.value },
+    },
+  ])
+})
+onBeforeUnmount(() => headerActions.clear())
 </script>
 
 <template>
   <PageLayout
-    :show-skeleton="showSkeleton"
-    :show-refresh-indicator="showRefreshIndicator"
     :is-refreshing="isRefreshing"
-    :last-updated="lastUpdated"
     :error="error"
     :data="pullRequestsData"
     :on-retry="refresh"
     :skeleton-count="6"
-    :show-stats="true"
   >
-    <template #stats>
-      <StatsCard
-        icon="📊"
-        :value="stats.total"
-        label="Total PRs"
-      />
-
-      <StatsCard
-        icon="🔓"
-        :value="stats.open"
-        label="Open"
-        variant="success"
-      />
-
-      <StatsCard
-        icon="📝"
-        :value="stats.draft"
-        label="Draft"
-        variant="warning"
-      />
-
-      <StatsCard
-        icon="📦"
-        :value="stats.repositories"
-        label="Repositories"
-        variant="info"
-      />
-    </template>
-
     <template #filters>
-      <div class="filters">
+      <div v-if="filtersOpen" id="pr-filters-panel" class="filters">
         <div class="filter-group">
           <label for="state-select" class="filter-label">State</label>
           <Select
@@ -166,13 +154,11 @@ const stats = computed(() => pullRequestsData.value?.stats || {
 
     <template #content>
       <div v-if="filteredPullRequests.length > 0" class="pull-requests-list">
-        <div class="pr-list">
-          <PullRequestCard
-            v-for="pr in filteredPullRequests"
-            :key="pr.id"
-            :pull-request="pr"
-          />
-        </div>
+        <PullRequestCard
+          v-for="pr in filteredPullRequests"
+          :key="pr.id"
+          :pull-request="pr"
+        />
       </div>
 
       <!-- Empty State -->
@@ -208,7 +194,7 @@ const stats = computed(() => pullRequestsData.value?.stats || {
 .filter-label {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
-  color: var(--color-gray-700);
+  color: var(--color-text-tertiary);
   margin-bottom: var(--spacing-2);
 }
 
@@ -216,18 +202,20 @@ const stats = computed(() => pullRequestsData.value?.stats || {
   height: fit-content;
 }
 
+/* Parent grid declares the column tracks; every PR row inherits them
+ * via subgrid so icons, titles, signal clusters and timestamps line up
+ * across all rows even when content lengths vary. */
 .pull-requests-list {
-  background: var(--color-white);
+  display: grid;
+  /* state icon · main · check · review · comments · updated time */
+  grid-template-columns: auto 1fr auto auto auto auto;
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-sm);
   overflow: hidden;
 }
 
-.pr-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-4);
-  padding: var(--spacing-4);
+.pull-requests-list > :last-child {
+  border-bottom: 0;
 }
 
 @media (max-width: 768px) {
diff --git a/pages/repositories.vue b/pages/repositories.vue
index 6a7afb8..5c77a28 100644
--- a/pages/repositories.vue
+++ b/pages/repositories.vue
@@ -3,8 +3,10 @@ definePageMeta({
   name: 'RepositoriesOverview'
 })
 
+const { public: { githubOwner } } = useRuntimeConfig()
+
 useHead({
-  title: 'Repositories - GitHub Dashboard'
+  title: `Repositories - ${githubOwner}`
 })
 
 const {
@@ -12,16 +14,9 @@ const {
   error,
   refresh,
   isRefreshing,
-  lastUpdated,
-  showSkeleton,
-  showRefreshIndicator
-} = useCachedFetch<Repository[]>(
-  '/api/repositories',
-  {
-    key: 'repositories',
-    staleTime: 5 * 60 * 1000, // 5 minutes
-  }
-)
+} = useResource<Repository[]>('repositories', '/api/repositories', {
+  staleTime: 5 * 60 * 1000,
+})
 
 const { computeSum, computeCount } = useStatsAggregation()
 
@@ -35,44 +30,28 @@ const totalStats = computed(() => {
     totalForks: computeSum(repositories.value, 'forks')
   }
 })
+
+const headerStats = useHeaderStats()
+watchEffect(() => {
+  headerStats.set([
+    { label: 'Repos', value: totalStats.value.totalRepos },
+    { label: 'Stars', value: totalStats.value.totalStars, variant: 'warning' },
+    { label: 'Forks', value: totalStats.value.totalForks, variant: 'info' },
+  ])
+})
+onBeforeUnmount(() => headerStats.clear())
 </script>
 
 <template>
   <PageLayout
-    :show-skeleton="showSkeleton"
-    :show-refresh-indicator="showRefreshIndicator"
     :is-refreshing="isRefreshing"
-    :last-updated="lastUpdated"
     :error="error"
     :data="repositories"
     :on-retry="refresh"
     :skeleton-count="8"
-    :show-stats="true"
   >
-    <template #stats>
-      <StatsCard
-        icon="📊"
-        :value="totalStats.totalRepos"
-        label="Total Repositories"
-      />
-
-      <StatsCard
-        icon="⭐"
-        :value="totalStats.totalStars"
-        label="Total Stars"
-        variant="warning"
-      />
-
-      <StatsCard
-        icon="🍴"
-        :value="totalStats.totalForks"
-        label="Total Forks"
-        variant="info"
-      />
-    </template>
-
     <template #content>
-      <div class="repositories-grid">
+      <div class="repositories-list">
         <RepositoryCard
           v-for="repository in repositories"
           :key="repository.id"
@@ -84,16 +63,21 @@ const totalStats = computed(() => {
 </template>
 
 <style scoped>
-.repositories-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--spacing-5);
-  justify-content: center;
+/* Parent grid declares the column tracks; every repository row inherits
+ * them via subgrid so icon, name, category, language, individual stat
+ * columns (stars · forks · issues) and the updated-time column line up
+ * across the whole list. */
+.repositories-list {
+  display: grid;
+  /* icon · name · category · lang · stars · forks · issues · updated */
+  grid-template-columns: auto 1fr auto minmax(0, 8ch) auto auto auto auto;
+  background: var(--color-bg-primary);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  overflow: hidden;
 }
 
-@media (max-width: 768px) {
-  .repositories-grid {
-    gap: var(--spacing-4);
-  }
+.repositories-list > :last-child {
+  border-bottom: 0;
 }
 </style>
\ No newline at end of file
diff --git a/server/api/log-stream.get.ts b/server/api/log-stream.get.ts
new file mode 100644
index 0000000..f7638e6
--- /dev/null
+++ b/server/api/log-stream.get.ts
@@ -0,0 +1,29 @@
+import { subscribeServerLogs, type ServerLogEntry } from '../utils/logBus'
+
+export default defineEventHandler((event) => {
+  setResponseHeader(event, 'Content-Type', 'text/event-stream')
+  setResponseHeader(event, 'Cache-Control', 'no-cache, no-transform')
+  setResponseHeader(event, 'Connection', 'keep-alive')
+  setResponseHeader(event, 'X-Accel-Buffering', 'no')
+
+  const res = event.node.res
+  res.flushHeaders?.()
+
+  const send = (entry: ServerLogEntry) => {
+    res.write(`data: ${JSON.stringify(entry)}\n\n`)
+  }
+
+  // Heartbeat so proxies / browsers don't reap the idle connection
+  const heartbeat = setInterval(() => res.write(': ping\n\n'), 15000)
+  const unsubscribe = subscribeServerLogs(send)
+
+  const cleanup = () => {
+    clearInterval(heartbeat)
+    unsubscribe()
+  }
+  event.node.req.on('close', cleanup)
+  event.node.req.on('error', cleanup)
+
+  // Keep the handler open; the response ends when the client disconnects.
+  return new Promise<void>(() => {})
+})
diff --git a/server/api/project-views.get.ts b/server/api/project-views.get.ts
deleted file mode 100644
index 1ef84e8..0000000
--- a/server/api/project-views.get.ts
+++ /dev/null
@@ -1,153 +0,0 @@
-import { executeGraphQLQuery, type ProjectV2 } from '../utils/github-graphql'
-import { getGitHubOwner } from '../utils/github'
-
-interface ProjectsResponse {
-  organization?: {
-    projectsV2: {
-      nodes: ProjectV2[]
-      totalCount: number
-    }
-  }
-  user?: {
-    projectsV2: {
-      nodes: ProjectV2[]
-      totalCount: number
-    }
-  }
-}
-
-const PROJECTS_QUERY = `
-  query GetProjects($owner: String!, $first: Int!) {
-    organization(login: $owner) {
-      projectsV2(first: $first, orderBy: {field: UPDATED_AT, direction: DESC}) {
-        nodes {
-          id
-          number
-          title
-          shortDescription
-          url
-          public
-          closed
-          createdAt
-          updatedAt
-          views(first: 20) {
-            totalCount
-            nodes {
-              id
-              name
-              number
-              layout
-              filter
-              createdAt
-              updatedAt
-            }
-          }
-        }
-        totalCount
-      }
-    }
-  }
-`
-
-const USER_PROJECTS_QUERY = `
-  query GetUserProjects($owner: String!, $first: Int!) {
-    user(login: $owner) {
-      projectsV2(first: $first, orderBy: {field: UPDATED_AT, direction: DESC}) {
-        nodes {
-          id
-          number
-          title
-          shortDescription
-          url
-          public
-          closed
-          createdAt
-          updatedAt
-          views(first: 20) {
-            totalCount
-            nodes {
-              id
-              name
-              number
-              layout
-              filter
-              createdAt
-              updatedAt
-            }
-          }
-        }
-        totalCount
-      }
-    }
-  }
-`
-
-export default defineEventHandler(async (_event) => {
-  try {
-    const owner = getGitHubOwner()
-    console.log(`Fetching GitHub ProjectsV2 for: ${owner} (GraphQL)`)
-
-    let projects: ProjectV2[] = []
-
-    // Try organization endpoint first
-    try {
-      const response = await executeGraphQLQuery<ProjectsResponse>(
-        PROJECTS_QUERY,
-        { owner, first: 50 }
-      )
-
-      if (response.organization?.projectsV2) {
-        projects = response.organization.projectsV2.nodes
-        console.log(`Found ${projects.length} projects (organization)`)
-      }
-    } catch (orgError) {
-      console.log('Organization query failed, trying user endpoint...')
-
-      // Fallback to user endpoint
-      const response = await executeGraphQLQuery<ProjectsResponse>(
-        USER_PROJECTS_QUERY,
-        { owner, first: 50 }
-      )
-
-      if (response.user?.projectsV2) {
-        projects = response.user.projectsV2.nodes
-        console.log(`Found ${projects.length} projects (user)`)
-      }
-    }
-
-    // Filter out closed projects and return
-    const openProjects = projects.filter(p => !p.closed)
-
-    return openProjects.map(project => ({
-      id: project.id,
-      number: project.number,
-      title: project.title,
-      shortDescription: project.shortDescription,
-      url: project.url,
-      public: project.public,
-      closed: project.closed,
-      createdAt: project.createdAt,
-      updatedAt: project.updatedAt,
-      viewsCount: project.views.totalCount,
-      // Just include view count, not full views (fetch separately for detail)
-      views: project.views.nodes.map(v => ({
-        id: v.id,
-        name: v.name,
-        number: v.number,
-        layout: v.layout
-      }))
-    }))
-
-  } catch (error: unknown) {
-    console.error('Error fetching ProjectsV2 (GraphQL):', error)
-
-    if (error && typeof error === 'object' && 'statusCode' in error) {
-      throw error
-    }
-
-    throw createError({
-      statusCode: 500,
-      statusMessage: `Failed to fetch ProjectsV2: ${error instanceof Error ? error.message : String(error)}`
-    })
-  }
-})
diff --git a/server/api/project-views/[projectId].get.ts b/server/api/project-views/[projectId].get.ts
deleted file mode 100644
index ee1e5e5..0000000
--- a/server/api/project-views/[projectId].get.ts
+++ /dev/null
@@ -1,183 +0,0 @@
-import { executeGraphQLQuery, type ProjectV2 } from '../../utils/github-graphql'
-
-interface ProjectDetailResponse {
-  node: ProjectV2
-}
-
-const PROJECT_DETAIL_QUERY = `
-  query GetProjectDetail($projectId: ID!) {
-    node(id: $projectId) {
-      ... on ProjectV2 {
-        id
-        number
-        title
-        shortDescription
-        url
-        public
-        closed
-        createdAt
-        updatedAt
-        views(first: 50) {
-          totalCount
-          nodes {
-            id
-            name
-            number
-            layout
-            filter
-            createdAt
-            updatedAt
-            sortByFields(first: 10) {
-              nodes {
-                direction
-                field {
-                  ... on ProjectV2Field {
-                    id
-                    name
-                    dataType
-                  }
-                  ... on ProjectV2SingleSelectField {
-                    id
-                    name
-                    dataType
-                  }
-                  ... on ProjectV2IterationField {
-                    id
-                    name
-                    dataType
-                  }
-                }
-              }
-            }
-            groupByFields(first: 10) {
-              nodes {
-                ... on ProjectV2Field {
-                  id
-                  name
-                  dataType
-                }
-                ... on ProjectV2SingleSelectField {
-                  id
-                  name
-                  dataType
-                }
-                ... on ProjectV2IterationField {
-                  id
-                  name
-                  dataType
-                }
-              }
-            }
-            verticalGroupByFields(first: 10) {
-              nodes {
-                ... on ProjectV2Field {
-                  id
-                  name
-                  dataType
-                }
-                ... on ProjectV2SingleSelectField {
-                  id
-                  name
-                  dataType
-                }
-                ... on ProjectV2IterationField {
-                  id
-                  name
-                  dataType
-                }
-              }
-            }
-            fields(first: 50) {
-              nodes {
-                ... on ProjectV2Field {
-                  id
-                  name
-                  dataType
-                }
-                ... on ProjectV2SingleSelectField {
-                  id
-                  name
-                  dataType
-                  options {
-                    id
-                    name
-                    color
-                  }
-                }
-                ... on ProjectV2IterationField {
-                  id
-                  name
-                  dataType
-                  configuration {
-                    duration
-                    startDay
-                    iterations {
-                      id
-                      title
-                      startDate
-                      duration
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-`
-
-export default defineEventHandler(async (event) => {
-  try {
-    const projectId = getRouterParam(event, 'projectId')
-
-    if (!projectId) {
-      throw createError({
-        statusCode: 400,
-        statusMessage: 'Project ID is required'
-      })
-    }
-
-    console.log(`Fetching ProjectV2 detail for: ${projectId}`)
-
-    const response = await executeGraphQLQuery<ProjectDetailResponse>(
-      PROJECT_DETAIL_QUERY,
-      { projectId }
-    )
-
-    if (!response.node) {
-      throw createError({
-        statusCode: 404,
-        statusMessage: 'Project not found'
-      })
-    }
-
-    const project = response.node
-
-    return {
-      id: project.id,
-      number: project.number,
-      title: project.title,
-      shortDescription: project.shortDescription,
-      url: project.url,
-      public: project.public,
-      closed: project.closed,
-      createdAt: project.createdAt,
-      updatedAt: project.updatedAt,
-      views: project.views.nodes
-    }
-
-  } catch (error: unknown) {
-    console.error('Error fetching ProjectV2 detail:', error)
-
-    if (error && typeof error === 'object' && 'statusCode' in error) {
-      throw error
-    }
-
-    throw createError({
-      statusCode: 500,
-      statusMessage: `Failed to fetch project detail: ${error instanceof Error ? error.message : String(error)}`
-    })
-  }
-})
diff --git a/server/api/project-views/[projectId]/items.get.ts b/server/api/project-views/[projectId]/items.get.ts
deleted file mode 100644
index 372a63c..0000000
--- a/server/api/project-views/[projectId]/items.get.ts
+++ /dev/null
@@ -1,283 +0,0 @@
-import { executeGraphQLQuery, type ProjectV2Item } from '../../../utils/github-graphql'
-
-interface ProjectItemsResponse {
-  node: {
-    id: string
-    items: {
-      nodes: ProjectV2Item[]
-      pageInfo: {
-        hasNextPage: boolean
-        endCursor: string | null
-      }
-      totalCount: number
-    }
-  }
-}
-
-const PROJECT_ITEMS_QUERY = `
-  query GetProjectItems($projectId: ID!, $first: Int!, $after: String) {
-    node(id: $projectId) {
-      ... on ProjectV2 {
-        id
-        items(first: $first, after: $after) {
-          totalCount
-          pageInfo {
-            hasNextPage
-            endCursor
-          }
-          nodes {
-            id
-            type
-            content {
-              __typename
-              ... on Issue {
-                id
-                number
-                title
-                url
-                state
-                closed
-                repository {
-                  name
-                  url
-                }
-                assignees(first: 10) {
-                  nodes {
-                    login
-                    avatarUrl
-                  }
-                }
-                labels(first: 20) {
-                  nodes {
-                    name
-                    color
-                  }
-                }
-                parent {
-                  number
-                  title
-                }
-                createdAt
-                updatedAt
-              }
-              ... on PullRequest {
-                id
-                number
-                title
-                url
-                state
-                closed
-                merged
-                repository {
-                  name
-                  url
-                }
-                assignees(first: 10) {
-                  nodes {
-                    login
-                    avatarUrl
-                  }
-                }
-                labels(first: 20) {
-                  nodes {
-                    name
-                    color
-                  }
-                }
-                createdAt
-                updatedAt
-              }
-              ... on DraftIssue {
-                id
-                title
-                createdAt
-                updatedAt
-              }
-            }
-            fieldValues(first: 50) {
-              nodes {
-                ... on ProjectV2ItemFieldTextValue {
-                  text
-                  field {
-                    ... on ProjectV2Field {
-                      id
-                      name
-                    }
-                  }
-                }
-                ... on ProjectV2ItemFieldNumberValue {
-                  number
-                  field {
-                    ... on ProjectV2Field {
-                      id
-                      name
-                    }
-                  }
-                }
-                ... on ProjectV2ItemFieldDateValue {
-                  date
-                  field {
-                    ... on ProjectV2Field {
-                      id
-                      name
-                    }
-                  }
-                }
-                ... on ProjectV2ItemFieldSingleSelectValue {
-                  name
-                  optionId
-                  field {
-                    ... on ProjectV2SingleSelectField {
-                      id
-                      name
-                    }
-                  }
-                }
-                ... on ProjectV2ItemFieldIterationValue {
-                  title
-                  duration
-                  startDate
-                  field {
-                    ... on ProjectV2IterationField {
-                      id
-                      name
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-`
-
-/**
- * Fetch all items for a project (with pagination)
- */
-async function fetchAllProjectItems(projectId: string): Promise<ProjectV2Item[]> {
-  const allItems: ProjectV2Item[] = []
-  let hasNextPage = true
-  let after: string | null = null
-
-  while (hasNextPage) {
-    const response = await executeGraphQLQuery<ProjectItemsResponse>(
-      PROJECT_ITEMS_QUERY,
-      { projectId, first: 100, after }
-    )
-
-    const { nodes, pageInfo } = response.node.items
-    allItems.push(...nodes)
-
-    hasNextPage = pageInfo.hasNextPage
-    after = pageInfo.endCursor
-
-    console.log(`Fetched ${nodes.length} items (total: ${allItems.length})`)
-  }
-
-  return allItems
-}
-
-export default defineEventHandler(async (event) => {
-  try {
-    const projectId = getRouterParam(event, 'projectId')
-
-    if (!projectId) {
-      throw createError({
-        statusCode: 400,
-        statusMessage: 'Project ID is required'
-      })
-    }
-
-    console.log(`Fetching items for ProjectV2: ${projectId}`)
-
-    const items = await fetchAllProjectItems(projectId)
-
-    console.log(`Successfully fetched ${items.length} items`)
-
-    // Transform items to match REST API format (expected by ProjectItemsTable)
-    return items.map(item => {
-      // Extract content data first
-      const content = item.content
-      const contentType = content?.__typename
-
-      // Build custom fields object from fieldValues
-      const customFields: Record<string, unknown> = {}
-
-      for (const fieldValue of item.fieldValues.nodes) {
-        if (!fieldValue.field) continue
-
-        const fieldName = fieldValue.field.name
-
-        // Extract value based on type
-        if ('text' in fieldValue && fieldValue.text !== undefined) {
-          customFields[fieldName] = fieldValue.text
-        } else if ('number' in fieldValue && fieldValue.number !== undefined) {
-          customFields[fieldName] = fieldValue.number
-        } else if ('date' in fieldValue && fieldValue.date !== undefined) {
-          customFields[fieldName] = fieldValue.date
-        } else if ('name' in fieldValue && fieldValue.name !== undefined) {
-          customFields[fieldName] = fieldValue.name
-        } else if ('title' in fieldValue && fieldValue.title !== undefined) {
-          // Iteration field
-          customFields[fieldName] = {
-            title: fieldValue.title,
-            startDate: fieldValue.startDate,
-            duration: fieldValue.duration
-          }
-        }
-      }
-
-      // Add parent issue from content if it exists
-      if (contentType === 'Issue' && content.parent) {
-        // Store title for display and number for filtering
-        customFields['Parent issue'] = content.parent.title
-        customFields['Parent issue number'] = content.parent.number
-      }
-
-      // Normalize type
-      let normalizedType: 'ISSUE' | 'PULL_REQUEST' | 'DRAFT_ISSUE' = 'DRAFT_ISSUE'
-      if (contentType === 'Issue') normalizedType = 'ISSUE'
-      else if (contentType === 'PullRequest') normalizedType = 'PULL_REQUEST'
-      else if (contentType === 'DraftIssue') normalizedType = 'DRAFT_ISSUE'
-
-      // Transform to expected format
-      return {
-        id: item.id,
-        type: normalizedType,
-        number: content?.number,
-        title: content?.title || 'Untitled',
-        url: content?.url || '',
-        state: content?.state || 'UNKNOWN',
-        repository: content?.repository?.name || 'No Repository',
-        repository_owner: '', // Not available in GraphQL response
-        assignees: content?.assignees?.nodes?.map(a => ({
-          login: a.login,
-          avatarUrl: a.avatarUrl
-        })) || [],
-        labels: content?.labels?.nodes?.map(l => ({
-          name: l.name,
-          color: l.color
-        })) || [],
-        created_at: content?.createdAt || '',
-        updated_at: content?.updatedAt || '',
-        status: customFields['Status'] as string | undefined,
-        priority: customFields['Priority'] as string | undefined,
-        custom_fields: customFields
-      }
-    })
-
-  } catch (error: unknown) {
-    console.error('Error fetching ProjectV2 items:', error)
-
-    if (error && typeof error === 'object' && 'statusCode' in error) {
-      throw error
-    }
-
-    throw createError({
-      statusCode: 500,
-      statusMessage: `Failed to fetch project items: ${error instanceof Error ? error.message : String(error)}`
-    })
-  }
-})
diff --git a/server/api/projects.get.ts b/server/api/projects.get.ts
deleted file mode 100644
index f4d8665..0000000
--- a/server/api/projects.get.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import { fetchProjectsREST, fetchProjectItemsREST } from '../utils/github-rest'
-
-interface Project {
-  id: string
-  number: number
-  title: string
-  shortDescription?: string
-  url: string
-  createdAt: string
-  updatedAt: string
-  state: 'OPEN' | 'CLOSED'
-  items: {
-    totalCount: number
-  }
-}
-
-export default defineEventHandler(async (_event) => {
-  try {
-    console.log('Fetching GitHub Projects (REST API)')
-
-    const projects = await fetchProjectsREST()
-
-    // Filter open projects
-    const openProjects = projects.filter(p => p.state === 'open')
-
-    // Fetch item counts for each project in parallel
-    const itemCounts = await Promise.all(
-      openProjects.map(async (p) => {
-        try {
-          const items = await fetchProjectItemsREST(p.number)
-          return items.length
-        } catch (error) {
-          console.warn(`Failed to fetch item count for project ${p.number}:`, error)
-          return 0
-        }
-      })
-    )
-
-    // Transform to frontend format
-    const transformedProjects: Project[] = openProjects.map((p, index) => ({
-      id: p.node_id,         // GraphQL node_id for consistency
-      number: p.number,       // REST API project number - used for detail pages
-      title: p.title,
-      shortDescription: p.description || undefined,
-      url: p.url,
-      createdAt: p.created_at,
-      updatedAt: p.updated_at,
-      state: 'OPEN' as const,
-      items: {
-        totalCount: itemCounts[index]
-      }
-    }))
-
-    // Sort by most recently updated
-    transformedProjects.sort((a, b) =>
-      new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
-    )
-
-    console.log(`Processed ${transformedProjects.length} projects (REST API)`)
-    return transformedProjects
-
-  } catch (error: unknown) {
-    console.error('Error fetching GitHub Projects (REST):', error)
-
-    if (error && typeof error === 'object' && 'statusCode' in error) {
-      throw error
-    }
-
-    throw createError({
-      statusCode: 500,
-      statusMessage: `Failed to fetch GitHub Projects: ${error instanceof Error ? error.message : String(error)}`
-    })
-  }
-})
diff --git a/server/api/projects/[id].get.ts b/server/api/projects/[id].get.ts
deleted file mode 100644
index f79f468..0000000
--- a/server/api/projects/[id].get.ts
+++ /dev/null
@@ -1,107 +0,0 @@
-import {
-  fetchProjectREST,
-  fetchProjectItemsREST,
-  fetchProjectFieldsREST,
-  transformRESTItemToProjectItem,
-  type RESTProjectField
-} from '../../utils/github-rest'
-
-interface ProjectItem {
-  id: string
-  type: 'ISSUE' | 'PULL_REQUEST' | 'DRAFT_ISSUE'
-  number?: number
-  title: string
-  url: string
-  state: string
-  repository: string
-  repository_owner: string
-  assignees: Array<{
-    login: string
-    avatarUrl: string
-  }>
-  labels: Array<{
-    name: string
-    color: string
-  }>
-  created_at: string
-  updated_at: string
-  status?: string
-  priority?: string
-  custom_fields: Record<string, string>
-}
-
-interface ProjectDetails {
-  id: string
-  number: number
-  title: string
-  shortDescription: string | null
-  url: string
-  items: ProjectItem[]
-  fields: Array<{
-    name: string
-    dataType: string
-  }>
-}
-
-export default defineEventHandler(async (event) => {
-  const projectNumber = getRouterParam(event, 'id')
-
-  if (!projectNumber) {
-    throw createError({
-      statusCode: 400,
-      statusMessage: 'Project number is required'
-    })
-  }
-
-  try {
-    const projectNum = parseInt(projectNumber)
-
-    console.log(`Fetching project ${projectNum} via PURE REST API (NO GraphQL)`)
-
-    // Step 1: Fetch project metadata and field definitions
-    const [project, fields] = await Promise.all([
-      fetchProjectREST(projectNum),           // Project metadata
-      fetchProjectFieldsREST(projectNum)       // Project field definitions
-    ])
-
-    // Step 2: Fetch items with ALL field IDs so we get all custom field values
-    const fieldIds = fields.map(f => f.id)
-    console.log(`Fetching items with ${fieldIds.length} field IDs: ${fieldIds.join(', ')}`)
-    const restItems = await fetchProjectItemsREST(projectNum, fieldIds)
-
-    // Transform REST items to our internal format
-    // This automatically extracts ALL custom fields: Size, Parent issue, Priority, etc.
-    const items: ProjectItem[] = restItems.map(transformRESTItemToProjectItem)
-
-    // Sort items by updated date (newest first)
-    items.sort((a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime())
-
-    const projectDetails: ProjectDetails = {
-      id: project.node_id,
-      number: project.number,
-      title: project.title,
-      shortDescription: project.description,
-      url: project.url,
-      items,
-      fields: fields.map((f: RESTProjectField) => ({
-        name: f.name,
-        dataType: f.data_type.toUpperCase()
-      }))
-    }
-
-    console.log(`✅ SUCCESS: Fetched project "${project.title}" with ${items.length} items via PURE REST API (NO GraphQL)`)
-    return projectDetails
-
-  } catch (error: unknown) {
-    console.error('Error fetching project details (REST):', error)
-
-    if (error && typeof error === 'object' && 'statusCode' in error) {
-      throw error
-    }
-
-    throw createError({
-      statusCode: 500,
-      statusMessage: `Failed to fetch project details: ${error instanceof Error ? error.message : String(error)}`
-    })
-  }
-})
diff --git a/server/api/pull-requests.get.ts b/server/api/pull-requests.get.ts
index 01e71d9..558bd92 100644
--- a/server/api/pull-requests.get.ts
+++ b/server/api/pull-requests.get.ts
@@ -191,7 +191,7 @@ export default defineEventHandler(async (event) => {
   try {
     const headers = getGitHubHeaders()
     const repositories = await fetchRepositories()
-    console.log(`Fetching pull requests from ${repositories.length} repositories`)
+    serverLog(`Fetching pull requests from ${repositories.length} repositories`)
 
     // Fetch pull requests for each repository
     const allPullRequests: PullRequest[] = []
@@ -203,7 +203,7 @@ export default defineEventHandler(async (event) => {
 
       const pullRequestPromises = batch.map(async (repo: GitHubRepository) => {
         try {
-          console.log(`Fetching pull requests for ${repo.full_name}`)
+          serverLog(`Fetching pull requests for ${repo.full_name}`)
 
           const prResponse = await fetch(
             `https://api.github.com/repos/${repo.full_name}/pulls?state=${state}&per_page=100&sort=updated&direction=desc`,
@@ -260,7 +260,7 @@ export default defineEventHandler(async (event) => {
       new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime()
     )
 
-    console.log(`Found ${allPullRequests.length} pull requests across all repositories`)
+    serverLog(`Found ${allPullRequests.length} pull requests across all repositories`)
 
     // Calculate statistics
     const repositoryNames = new Set(allPullRequests.map(pr => pr.repository.name))
diff --git a/server/api/repositories.get.ts b/server/api/repositories.get.ts
index 22a5a87..2efd7b8 100644
--- a/server/api/repositories.get.ts
+++ b/server/api/repositories.get.ts
@@ -23,7 +23,7 @@ interface Project {
 export default defineEventHandler(async (_event) => {
   try {
     const repositories = await fetchRepositories()
-    console.log(`Processing ${repositories.length} repositories`)
+    serverLog(`Processing ${repositories.length} repositories`)
 
     // Transform repositories into project views
     const projects: Project[] = repositories
@@ -49,7 +49,7 @@ export default defineEventHandler(async (_event) => {
       }))
       .sort((a: Project, b: Project) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime()) // Sort by most recent
 
-    console.log(`Processed ${projects.length} projects`)
+    serverLog(`Processed ${projects.length} projects`)
     return projects
 
   } catch (error: unknown) {
diff --git a/server/api/workflows.get.ts b/server/api/workflows.get.ts
index 81ddd7e..56d2025 100644
--- a/server/api/workflows.get.ts
+++ b/server/api/workflows.get.ts
@@ -42,10 +42,10 @@ export default defineEventHandler(async (_event) => {
     const headers = getGitHubHeaders()
     const repositories = await fetchRepositories()
 
-    console.log(`Processing ${repositories.length} repositories for workflows`)
+    serverLog(`Processing ${repositories.length} repositories for workflows`)
 
     if (repositories.length === 0) {
-      console.log('No repositories found')
+      serverLog('No repositories found')
       return { workflows: [] }
     }
 
@@ -59,7 +59,7 @@ export default defineEventHandler(async (_event) => {
       await Promise.all(
         batch.map(async (repository: GitHubRepository) => {
           try {
-            console.log(`Fetching workflows for repository: ${repository.name}`)
+            serverLog(`Fetching workflows for repository: ${repository.name}`)
 
             // Get workflows for this repository
             const workflowsResponse = await fetch(
@@ -68,7 +68,7 @@ export default defineEventHandler(async (_event) => {
             )
 
             if (!workflowsResponse.ok) {
-              console.log(`No workflows found for ${repository.name}: ${workflowsResponse.status}`)
+              serverLog(`No workflows found for ${repository.name}: ${workflowsResponse.status}`)
               return
             }
 
@@ -79,7 +79,7 @@ export default defineEventHandler(async (_event) => {
               return
             }
 
-            console.log(`Found ${workflows.length} workflows in ${repository.name}`)
+            serverLog(`Found ${workflows.length} workflows in ${repository.name}`)
 
             // For each workflow, get recent runs
             await Promise.all(
@@ -142,7 +142,7 @@ export default defineEventHandler(async (_event) => {
       return new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime()
     })
 
-    console.log(`Total workflow runs found: ${allWorkflowRuns.length}`)
+    serverLog(`Total workflow runs found: ${allWorkflowRuns.length}`)
 
     return { workflows: allWorkflowRuns }
 
diff --git a/server/utils/github-graphql.ts b/server/utils/github-graphql.ts
deleted file mode 100644
index 975dda8..0000000
--- a/server/utils/github-graphql.ts
+++ /dev/null
@@ -1,201 +0,0 @@
-/**
- * GraphQL API utilities for GitHub Projects V2
- * Provides access to Projects V2 views, configurations, and items
- */
-
-import { getGitHubHeaders } from './github'
-
-export interface GraphQLResponse<T> {
-  data?: T
-  errors?: Array<{
-    message: string
-    locations?: Array<{ line: number; column: number }>
-    path?: string[]
-  }>
-}
-
-/**
- * Get headers for GraphQL API requests
- * Uses standard GitHub token but with GraphQL-specific Accept header
- */
-export function getGraphQLHeaders(): Record<string, string> {
-  const headers = getGitHubHeaders()
-  // GraphQL doesn't need the v3 accept header
-  delete headers.Accept
-  headers['Content-Type'] = 'application/json'
-  return headers
-}
-
-/**
- * Execute a GraphQL query against GitHub's API
- */
-export async function executeGraphQLQuery<T>(
-  query: string,
-  variables?: Record<string, unknown>
-): Promise<T> {
-  const headers = getGraphQLHeaders()
-
-  const response = await fetch('https://api.github.com/graphql', {
-    method: 'POST',
-    headers,
-    body: JSON.stringify({
-      query,
-      variables: variables || {}
-    })
-  })
-
-  if (!response.ok) {
-    const errorText = await response.text()
-    throw createError({
-      statusCode: response.status,
-      statusMessage: `GraphQL API error: ${response.statusText} - ${errorText}`
-    })
-  }
-
-  const result: GraphQLResponse<T> = await response.json()
-
-  if (result.errors && result.errors.length > 0) {
-    const errorMessages = result.errors.map(e => e.message).join(', ')
-    throw createError({
-      statusCode: 500,
-      statusMessage: `GraphQL errors: ${errorMessages}`
-    })
-  }
-
-  if (!result.data) {
-    throw createError({
-      statusCode: 500,
-      statusMessage: 'GraphQL response contained no data'
-    })
-  }
-
-  return result.data
-}
-
-// Type definitions for GraphQL responses
-
-// Union type: can be ProjectV2Field | ProjectV2SingleSelectField | ProjectV2IterationField
-export interface ProjectV2FieldConfiguration {
-  __typename?: string
-  id: string
-  name: string
-  dataType?: string
-  // SingleSelectField specific
-  options?: Array<{
-    id: string
-    name: string
-    color: string
-  }>
-  // IterationField specific
-  configuration?: {
-    duration: number
-    startDay: number
-    iterations: Array<{
-      id: string
-      title: string
-      startDate: string
-      duration: number
-    }>
-  }
-}
-
-export interface SortByField {
-  direction: 'ASC' | 'DESC'
-  field: ProjectV2FieldConfiguration
-}
-
-export interface ProjectV2View {
-  id: string
-  name: string
-  number: number
-  layout: 'TABLE_LAYOUT' | 'BOARD_LAYOUT' | 'ROADMAP_LAYOUT'
-  filter: string | null
-  sortByFields: {
-    nodes: SortByField[]
-  }
-  groupByFields: {
-    nodes: ProjectV2FieldConfiguration[]
-  }
-  verticalGroupByFields: {
-    nodes: ProjectV2FieldConfiguration[]
-  }
-  fields: {
-    nodes: ProjectV2FieldConfiguration[]
-  }
-  createdAt: string
-  updatedAt: string
-}
-
-export interface ProjectV2 {
-  id: string
-  number: number
-  title: string
-  shortDescription: string | null
-  url: string
-  public: boolean
-  closed: boolean
-  createdAt: string
-  updatedAt: string
-  views: {
-    nodes: ProjectV2View[]
-    totalCount: number
-  }
-}
-
-export interface ProjectV2ItemFieldValue {
-  __typename: string
-  // Text field
-  text?: string
-  // Number field
-  number?: number
-  // Date field
-  date?: string
-  // Single select field
-  name?: string
-  optionId?: string
-  // Iteration field
-  title?: string
-  duration?: number
-  startDate?: string
-}
-
-export interface ProjectV2Item {
-  id: string
-  type: string
-  content?: {
-    __typename: 'Issue' | 'PullRequest' | 'DraftIssue'
-    id?: string
-    number?: number
-    title?: string
-    url?: string
-    state?: string
-    closed?: boolean
-    repository?: {
-      name: string
-      url: string
-    }
-    assignees?: {
-      nodes: Array<{
-        login: string
-        avatarUrl: string
-      }>
-    }
-    labels?: {
-      nodes: Array<{
-        name: string
-        color: string
-      }>
-    }
-    createdAt?: string
-    updatedAt?: string
-  }
-  fieldValues: {
-    nodes: Array<{
-      field?: {
-        __typename: string
-        name: string
-        id: string
-      }
-    } & ProjectV2ItemFieldValue>
-  }
-}
diff --git a/server/utils/github-rest.ts b/server/utils/github-rest.ts
deleted file mode 100644
index 22f223d..0000000
--- a/server/utils/github-rest.ts
+++ /dev/null
@@ -1,466 +0,0 @@
-/**
- * REST API utilities for GitHub Projects V2
- * Provides simpler, more maintainable access to GitHub Projects data
- */
-
-import { getGitHubOwner, getGitHubHeaders } from './github'
-
-export interface RESTProject {
-  id: number
-  node_id: string
-  number: number // Used for REST API calls
-  title: string
-  description: string | null
-  url: string
-  created_at: string
-  updated_at: string
-  state: 'open' | 'closed'
-  public: boolean
-}
-
-export interface RESTProjectItem {
-  id: number
-  node_id: string
-  project_url: string
-  content_type: 'Issue' | 'PullRequest' | 'DraftIssue'
-  content: {
-    // This is a full GitHub issue/PR object
-    id?: number
-    node_id?: string
-    number?: number
-    title?: string
-    url?: string
-    html_url?: string
-    state?: string
-    body?: string
-    repository_url?: string
-    assignees?: Array<{ login: string, avatar_url: string }>
-    labels?: Array<{ name: string, color: string }>
-    milestone?: { title: string }
-    created_at?: string
-    updated_at?: string
-    pull_request?: any
-    draft?: boolean
-  }
-  fields: Array<{
-    id: number
-    name: string
-    data_type: string
-    value: any
-  }>
-  created_at: string
-  updated_at: string
-  archived_at: string | null
-}
-
-export interface RESTProjectField {
-  id: number
-  node_id: string
-  name: string
-  data_type: 'text' | 'number' | 'single_select' | 'date' | 'iteration' | 'parent_issue' | 'title' | 'assignees' | string
-  options?: Array<{ name: string }>
-  created_at: string
-  updated_at: string
-}
-
-export interface ProjectItem {
-  id: string
-  type: 'ISSUE' | 'PULL_REQUEST' | 'DRAFT_ISSUE'
-  number?: number
-  title: string
-  url: string
-  state: string
-  repository: string
-  repository_owner: string
-  assignees: Array<{
-    login: string
-    avatarUrl: string
-  }>
-  labels: Array<{
-    name: string
-    color: string
-  }>
-  created_at: string
-  updated_at: string
-  status?: string
-  priority?: string
-  custom_fields: Record<string, string>
-}
-
-/**
- * Fetch all projects for the organization
- */
-export async function fetchProjectsREST(): Promise<RESTProject[]> {
-  const owner = getGitHubOwner()
-  const headers = getGitHubHeaders()
-
-  console.log(`Fetching GitHub Projects v2 for organization: ${owner} (REST API)`)
-
-  const response = await fetch(
-    `https://api.github.com/orgs/${owner}/projectsV2?per_page=100`,
-    { headers }
-  )
-
-  if (!response.ok) {
-    const errorText = await response.text()
-    console.error('REST API error response:', errorText)
-    throw createError({
-      statusCode: response.status,
-      statusMessage: `GitHub REST API error: ${response.statusText} - ${errorText}`
-    })
-  }
-
-  const data = await response.json()
-  const projects = data.projectsV2 || data.projects || data || []
-  console.log(`Found ${projects.length} projects via REST API`)
-
-  return projects
-}
-
-/**
- * Fetch single project details by number
- */
-export async function fetchProjectREST(projectNumber: number): Promise<RESTProject> {
-  const owner = getGitHubOwner()
-  const headers = getGitHubHeaders()
-
-  console.log(`Fetching project ${projectNumber} details (REST API)`)
-
-  const response = await fetch(
-    `https://api.github.com/orgs/${owner}/projectsV2/${projectNumber}`,
-    { headers }
-  )
-
-  if (!response.ok) {
-    const errorText = await response.text()
-    console.error('REST API error response:', errorText)
-    throw createError({
-      statusCode: response.status,
-      statusMessage: `GitHub REST API error: ${response.statusText} - ${errorText}`
-    })
-  }
-
-  const project = await response.json()
-  console.log(`Fetched project: ${project.title}`)
-
-  return project
-}
-
-/**
- * Fetch all fields for a project
- */
-export async function fetchProjectFieldsREST(projectNumber: number): Promise<RESTProjectField[]> {
-  const owner = getGitHubOwner()
-  const headers = getGitHubHeaders()
-
-  console.log(`Fetching fields for project ${projectNumber} (REST API)`)
-
-  const response = await fetch(
-    `https://api.github.com/orgs/${owner}/projectsV2/${projectNumber}/fields`,
-    { headers }
-  )
-
-  if (!response.ok) {
-    const errorText = await response.text()
-    console.error('REST API error response:', errorText)
-    throw createError({
-      statusCode: response.status,
-      statusMessage: `GitHub REST API error: ${response.statusText} - ${errorText}`
-    })
-  }
-
-  const data = await response.json()
-  // REST API returns array directly, not { fields: [...] }
-  const fields = Array.isArray(data) ? data : (data.fields || [])
-  console.log(`Found ${fields.length} fields`)
-
-  return fields
-}
-
-/**
- * Fetch all items for a specific project with pagination support
- * @param projectNumber - The project number
- * @param fieldIds - Optional array of field IDs to include in response (if not provided, only Title is returned)
- */
-export async function fetchProjectItemsREST(projectNumber: number, fieldIds?: number[]): Promise<RESTProjectItem[]> {
-  const owner = getGitHubOwner()
-  const headers = getGitHubHeaders()
-
-  console.log(`Fetching items for project ${projectNumber} (REST API)`)
-
-  let allItems: RESTProjectItem[] = []
-  let cursor: string | null = null
-  let page = 1
-
-  // Build fields parameter if provided
-  const fieldsParam = fieldIds && fieldIds.length > 0 ? `&fields=${fieldIds.join(',')}` : ''
-
-  do {
-    const url = cursor
-      ? `https://api.github.com/orgs/${owner}/projectsV2/${projectNumber}/items?per_page=100&after=${cursor}${fieldsParam}`
-      : `https://api.github.com/orgs/${owner}/projectsV2/${projectNumber}/items?per_page=100${fieldsParam}`
-
-    console.log(`Fetching page ${page} of project items...`)
-
-    const response = await fetch(url, { headers })
-
-    if (!response.ok) {
-      const errorText = await response.text()
-      console.error('REST API error response:', errorText)
-      throw createError({
-        statusCode: response.status,
-        statusMessage: `GitHub REST API error: ${response.statusText} - ${errorText}`
-      })
-    }
-
-    const data = await response.json()
-    // REST API returns array directly, not { items: [...] }
-    const items = Array.isArray(data) ? data : (data.items || [])
-    allItems = allItems.concat(items)
-
-    // Parse Link header for pagination cursor
-    const linkHeader = response.headers.get('Link')
-    cursor = null
-    if (linkHeader) {
-      // Link header format: <url>; rel="next", <url>; rel="last"
-      const nextMatch = linkHeader.match(/<[^>]*[?&]after=([^>&]+)[^>]*>;\s*rel="next"/)
-      if (nextMatch) {
-        cursor = nextMatch[1]
-      }
-    }
-
-    page++
-
-    console.log(`Page ${page - 1}: fetched ${items.length} items (total: ${allItems.length})${cursor ? ' - has more pages' : ' - final page'}`)
-  } while (cursor)
-
-  console.log(`Total items fetched: ${allItems.length}`)
-  return allItems
-}
-
-/**
- * Transform REST API project item to our internal format
- * Dynamically handles all field types based on data_type
- */
-let _debugLogged = false
-export function transformRESTItemToProjectItem(item: RESTProjectItem): ProjectItem {
-  const customFields: Record<string, string> = {}
-
-  // Debug: log item structure for first few items
-  if (!_debugLogged) {
-    console.log('=== SAMPLE ITEM STRUCTURE ===')
-    console.log('Content type:', item.content_type)
-    console.log('Content keys:', Object.keys(item.content || {}))
-    console.log('Number of fields:', item.fields.length)
-    console.log('Fields:', JSON.stringify(item.fields, null, 2))
-    console.log('Content sample:', JSON.stringify(item.content, null, 2).substring(0, 500))
-    _debugLogged = true
-  }
-
-  // Extract ALL custom fields dynamically based on data_type
-  for (const field of item.fields) {
-    if (field.value === null || field.value === undefined) continue
-
-    // Handle based on data_type (not field name!)
-    switch (field.data_type) {
-      case 'title':
-        // Title field - extract raw text
-        if (typeof field.value === 'object' && field.value.raw) {
-          customFields[field.name] = field.value.raw
-        }
-        break
-
-      case 'assignees':
-        // Assignees field - skip, handled separately in content
-        break
-
-      case 'labels':
-        // Labels field - skip, handled separately in content
-        break
-
-      case 'number':
-        // Numeric fields (Size, Story Points, etc.)
-        customFields[field.name] = String(field.value)
-        break
-
-      case 'single_select':
-        // Single select fields (Status, Priority, etc.)
-        // Value structure: { id, name: { raw, html }, description, color }
-        if (typeof field.value === 'object') {
-          if (field.value.name?.raw) {
-            customFields[field.name] = field.value.name.raw
-          } else if (field.value.name) {
-            customFields[field.name] = String(field.value.name)
-          } else {
-            customFields[field.name] = String(field.value)
-          }
-        } else {
-          customFields[field.name] = String(field.value)
-        }
-        break
-
-      case 'text':
-        // Text fields
-        if (typeof field.value === 'object' && field.value.raw) {
-          customFields[field.name] = field.value.raw
-        } else {
-          customFields[field.name] = String(field.value)
-        }
-        break
-
-      case 'date':
-        // Date fields
-        customFields[field.name] = String(field.value)
-        break
-
-      case 'iteration':
-        // Iteration/Sprint fields - title has { raw, html } structure
-        if (typeof field.value === 'object') {
-          if (field.value.title?.raw) {
-            customFields[field.name] = field.value.title.raw
-          } else if (field.value.title) {
-            customFields[field.name] = String(field.value.title)
-          } else {
-            customFields[field.name] = String(field.value)
-          }
-        } else {
-          customFields[field.name] = String(field.value)
-        }
-        break
-
-      case 'parent_issue':
-        // Parent issue field - cross-project references
-        if (typeof field.value === 'object' && field.value.number) {
-          const parent = field.value
-          if (parent.repository) {
-            customFields[field.name] = `${parent.repository}#${parent.number} ${parent.title || ''}`
-          } else {
-            customFields[field.name] = `#${parent.number} ${parent.title || ''}`
-          }
-        }
-        break
-
-      case 'milestone':
-        // Milestone fields
-        if (typeof field.value === 'object' && field.value.title) {
-          customFields[field.name] = field.value.title
-        } else {
-          customFields[field.name] = String(field.value)
-        }
-        break
-
-      case 'sub_issues_progress':
-        // Sub-issues progress field
-        if (typeof field.value === 'object') {
-          const progress = field.value
-          if (progress.completed !== undefined && progress.total !== undefined) {
-            // Store both string for display and structured data for visualization
-            customFields[field.name] = `${progress.completed}/${progress.total}`
-            customFields[`${field.name}_data`] = JSON.stringify({
-              completed: progress.completed,
-              total: progress.total
-            })
-          } else {
-            customFields[field.name] = JSON.stringify(field.value)
-          }
-        }
-        break
-
-      case 'issue_type':
-        // Issue type field - similar structure to single_select
-        if (typeof field.value === 'object') {
-          if (field.value.name?.raw) {
-            customFields[field.name] = field.value.name.raw
-          } else if (field.value.name) {
-            customFields[field.name] = String(field.value.name)
-          } else {
-            customFields[field.name] = String(field.value)
-          }
-        } else {
-          customFields[field.name] = String(field.value)
-        }
-        break
-
-      case 'repository':
-        // Repository field
-        if (typeof field.value === 'object' && field.value.name) {
-          customFields[field.name] = field.value.name
-        } else {
-          customFields[field.name] = String(field.value)
-        }
-        break
-
-      case 'linked_pull_requests':
-      case 'reviewers':
-        // Array fields - convert to count or list
-        if (Array.isArray(field.value)) {
-          customFields[field.name] = `${field.value.length} items`
-        }
-        break
-
-      default:
-        // Generic fallback for any other field types
-        if (typeof field.value === 'object') {
-          // Try to extract common properties in order of preference
-          if (field.value.name?.raw) {
-            customFields[field.name] = field.value.name.raw
-          } else if (field.value.title?.raw) {
-            customFields[field.name] = field.value.title.raw
-          } else if (field.value.raw) {
-            customFields[field.name] = field.value.raw
-          } else if (field.value.name) {
-            customFields[field.name] = String(field.value.name)
-          } else if (field.value.title) {
-            customFields[field.name] = String(field.value.title)
-          } else {
-            customFields[field.name] = JSON.stringify(field.value)
-          }
-        } else {
-          customFields[field.name] = String(field.value)
-        }
-    }
-  }
-
-  // Extract repository info from repository_url
-  // Format: https://api.github.com/repos/{owner}/{repo}
-  let repoName = 'Unknown'
-  let repoOwner = 'Unknown'
-  if (item.content.repository_url) {
-    const match = item.content.repository_url.match(/repos\/([^\/]+)\/([^\/]+)/)
-    if (match) {
-      repoOwner = match[1]
-      repoName = match[2]
-    }
-  }
-
-  // Determine item type from content_type field
-  let itemType: 'ISSUE' | 'PULL_REQUEST' | 'DRAFT_ISSUE' = 'ISSUE'
-  if (item.content_type === 'PullRequest') {
-    itemType = 'PULL_REQUEST'
-  } else if (item.content_type === 'DraftIssue') {
-    itemType = 'DRAFT_ISSUE'
-  } else {
-    itemType = 'ISSUE'
-  }
-
-  return {
-    id: item.node_id,
-    type: itemType,
-    number: item.content.number,
-    title: item.content.title || 'Untitled',
-    url: item.content.url || '',
-    state: item.content.state || 'open',
-    repository: repoName,
-    repository_owner: repoOwner,
-    assignees: (item.content.assignees || []).map(a => ({
-      login: a.login,
-      avatarUrl: a.avatar_url
-    })),
-    labels: item.content.labels || [],
-    created_at: item.content.created_at || item.created_at,
-    updated_at: item.content.updated_at || item.updated_at,
-    status: customFields['Status'],
-    priority: customFields['Priority'],
-    custom_fields: customFields // Includes Size, Parent issue, and all others!
-  }
-}
diff --git a/server/utils/github.ts b/server/utils/github.ts
index f6d2c94..d9d0a7f 100644
--- a/server/utils/github.ts
+++ b/server/utils/github.ts
@@ -48,7 +48,7 @@ export function getGitHubHeaders(): GitHubAPIHeaders {
  */
 export function getGitHubOwner(): string {
   const config = useRuntimeConfig()
-  return config.githubOwner || 'Oracommit'
+  return config.githubOwner || 'GitHub'
 }
 
 /**
@@ -59,7 +59,7 @@ export async function fetchRepositories(): Promise<GitHubRepository[]> {
   const owner = getGitHubOwner()
   const headers = getGitHubHeaders()
 
-  console.log(`Fetching repositories for owner: ${owner}`)
+  serverLog(`Fetching repositories for owner: ${owner}`)
 
   // Try organization endpoint first
   let reposResponse = await fetch(
@@ -69,7 +69,7 @@ export async function fetchRepositories(): Promise<GitHubRepository[]> {
 
   // Fallback to user endpoint if organization fails
   if (!reposResponse.ok) {
-    console.log(`Organization endpoint failed (${reposResponse.status}), trying user endpoint...`)
+    serverLog(`Organization endpoint failed (${reposResponse.status}), trying user endpoint...`)
     reposResponse = await fetch(
       `https://api.github.com/users/${owner}/repos?type=all&per_page=100&sort=updated`,
       { headers }
@@ -85,7 +85,7 @@ export async function fetchRepositories(): Promise<GitHubRepository[]> {
   }
 
   const repositories = await reposResponse.json()
-  console.log(`Found ${repositories.length} repositories`)
+  serverLog(`Found ${repositories.length} repositories`)
 
   return repositories.filter((repo: GitHubRepository) => !repo.archived)
 }
diff --git a/server/utils/logBus.ts b/server/utils/logBus.ts
new file mode 100644
index 0000000..fde6c3f
--- /dev/null
+++ b/server/utils/logBus.ts
@@ -0,0 +1,26 @@
+import { EventEmitter } from 'node:events'
+
+const bus = new EventEmitter()
+bus.setMaxListeners(0)
+
+export const LOG_EVENT = 'log'
+
+export interface ServerLogEntry {
+  message: string
+  timestamp: number
+}
+
+/**
+ * Log to the server console AND broadcast to any connected SSE listeners.
+ * Use in place of console.log when you want the line to surface in the
+ * LogTicker on every page.
+ */
+export function serverLog(message: string) {
+  console.log(message)
+  bus.emit(LOG_EVENT, { message, timestamp: Date.now() } satisfies ServerLogEntry)
+}
+
+export function subscribeServerLogs(listener: (entry: ServerLogEntry) => void) {
+  bus.on(LOG_EVENT, listener)
+  return () => bus.off(LOG_EVENT, listener)
+}
diff --git a/stores/headerActions.ts b/stores/headerActions.ts
new file mode 100644
index 0000000..573d555
--- /dev/null
+++ b/stores/headerActions.ts
@@ -0,0 +1,54 @@
+import { defineStore } from 'pinia'
+
+export interface HeaderAction {
+  id: string
+  icon: string
+  label: string
+  active?: boolean
+  dot?: boolean
+  onClick: () => void
+}
+
+export interface HeaderActionMeta {
+  id: string
+  icon: string
+  label: string
+  active?: boolean
+  dot?: boolean
+}
+
+interface State {
+  items: HeaderActionMeta[]
+}
+
+/**
+ * Click handlers live outside Pinia state — they cannot be serialized into
+ * the SSR payload (devalue throws on functions). The store keeps only the
+ * presentational metadata in reactive state; this module-level map holds
+ * the matching handlers, keyed by action id.
+ */
+const handlers = new Map<string, () => void>()
+
+/**
+ * Per-page action buttons rendered in the navigation bar. Pages register
+ * their actions on mount and clear them on unmount so they don't leak.
+ */
+export const useHeaderActions = defineStore('headerActions', {
+  state: (): State => ({ items: [] }),
+  actions: {
+    set(actions: HeaderAction[]) {
+      handlers.clear()
+      this.items = actions.map(({ onClick, ...meta }) => {
+        handlers.set(meta.id, onClick)
+        return meta
+      })
+    },
+    clear() {
+      this.items = []
+      handlers.clear()
+    },
+    invoke(id: string) {
+      handlers.get(id)?.()
+    },
+  },
+})
diff --git a/stores/headerStats.ts b/stores/headerStats.ts
new file mode 100644
index 0000000..6a4f2cb
--- /dev/null
+++ b/stores/headerStats.ts
@@ -0,0 +1,28 @@
+import { defineStore } from 'pinia'
+
+export interface HeaderStatItem {
+  label: string
+  value: number | string
+  variant?: 'default' | 'success' | 'warning' | 'info'
+}
+
+interface State {
+  items: HeaderStatItem[]
+}
+
+/**
+ * Compact per-page stats shown in the navigation bar below the menu.
+ * Each page sets `items` from its own data and clears them on unmount
+ * so they don't leak to the next route.
+ */
+export const useHeaderStats = defineStore('headerStats', {
+  state: (): State => ({ items: [] }),
+  actions: {
+    set(items: HeaderStatItem[]) {
+      this.items = items
+    },
+    clear() {
+      this.items = []
+    },
+  },
+})
diff --git a/stores/resourceCache.ts b/stores/resourceCache.ts
new file mode 100644
index 0000000..9e108af
--- /dev/null
+++ b/stores/resourceCache.ts
@@ -0,0 +1,52 @@
+import { defineStore } from 'pinia'
+
+export interface ResourceEntry<T = unknown> {
+  data: T | null
+  error: unknown | null
+  lastUpdated: number
+  isRefreshing: boolean
+}
+
+interface State {
+  entries: Record<string, ResourceEntry>
+}
+
+const createEntry = (): ResourceEntry => ({
+  data: null,
+  error: null,
+  lastUpdated: 0,
+  isRefreshing: false,
+})
+
+export const useResourceCache = defineStore('resourceCache', {
+  state: (): State => ({ entries: {} }),
+
+  actions: {
+    ensure(key: string) {
+      if (!this.entries[key]) this.entries[key] = createEntry()
+    },
+    setRefreshing(key: string, value: boolean) {
+      this.ensure(key)
+      this.entries[key].isRefreshing = value
+    },
+    setData<T>(key: string, data: T) {
+      this.ensure(key)
+      this.entries[key].data = data
+      this.entries[key].error = null
+      this.entries[key].lastUpdated = Date.now()
+      this.entries[key].isRefreshing = false
+    },
+    setError(key: string, error: unknown) {
+      this.ensure(key)
+      this.entries[key].error = error
+      this.entries[key].isRefreshing = false
+    },
+  },
+
+  persist: {
+    afterHydrate(ctx) {
+      const entries = (ctx.store.$state as State).entries
+      for (const key in entries) entries[key].isRefreshing = false
+    },
+  },
+})
diff --git a/types/project.ts b/types/project.ts
deleted file mode 100644
index 7de8705..0000000
--- a/types/project.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-export interface Project {
-  id: string
-  title: string
-  description: string
-  url: string
-  created_at: string
-  updated_at: string
-  status: 'open' | 'closed'
-  items_count: number
-}
-
-export interface ProjectItem {
-  id: string
-  type: 'ISSUE' | 'PULL_REQUEST' | 'DRAFT_ISSUE'
-  number?: number
-  title: string
-  url: string
-  state: string
-  repository: string
-  repository_owner: string
-  assignees: Array<{
-    login: string
-    avatarUrl: string
-  }>
-  labels: Array<{
-    name: string
-    color: string
-  }>
-  created_at: string
-  updated_at: string
-  status?: string
-  priority?: string
-  custom_fields: Record<string, string>
-}
-
-export interface ProjectView {
-  id: string
-  name: string
-  number: number
-  layout: 'TABLE_LAYOUT' | 'BOARD_LAYOUT' | 'ROADMAP_LAYOUT'
-  filter?: string
-  groupByFields?: string[]
-  sortByFields?: Array<{
-    fieldName: string
-    direction: 'ASC' | 'DESC'
-  }>
-  createdAt: string
-  updatedAt: string
-}
-
-export interface ProjectDetails {
-  id: string
-  title: string
-  shortDescription: string | null
-  url: string
-  views: ProjectView[]
-  items: ProjectItem[]
-  fields: Array<{
-    name: string
-    dataType: string
-  }>
-}
-
-export interface ViewData {
-  view: {
-    id: string
-    name: string
-    layout: string
-    groupByFields?: string[]
-    sortByFields?: Array<{
-      fieldName: string
-      direction: 'ASC' | 'DESC'
-    }>
-    filter?: string
-  }
-  items: ProjectItem[]
-}