From 701dcb6203fa76741eeb5ab2f1a9e0c07e724290 Mon Sep 17 00:00:00 2001
From: njevric <njevric9@gmail.com>
Date: Wed, 13 May 2026 00:17:10 +0200
Subject: [PATCH 1/4] ci: add npm publish workflow

---
 .github/workflows/publish.yml | 39 +++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 .github/workflows/publish.yml

diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
new file mode 100644
index 0000000..afa9508
--- /dev/null
+++ b/.github/workflows/publish.yml
@@ -0,0 +1,39 @@
+name: Publish
+
+on:
+  release:
+    types: [published]
+
+permissions:
+  contents: read
+  id-token: write
+
+jobs:
+  publish:
+    name: Publish to npm
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+          registry-url: https://registry.npmjs.org
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Lint
+        run: npm run lint
+
+      - name: Typecheck
+        run: npm run typecheck
+
+      - name: Publish
+        run: npm publish --provenance
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

From d286f57ddd7954231993b0fc89e0eb7d7f664c78 Mon Sep 17 00:00:00 2001
From: njevric <njevric9@gmail.com>
Date: Wed, 20 May 2026 23:24:14 +0200
Subject: [PATCH 2/4] chore: upgrade publish workflow to node 24

---
 .github/workflows/publish.yml | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index afa9508..94b486c 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -20,7 +20,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 22
+          node-version: 24
           cache: npm
           registry-url: https://registry.npmjs.org
 
@@ -33,6 +33,9 @@ jobs:
       - name: Typecheck
         run: npm run typecheck
 
+      - name: Build
+        run: npm run build
+
       - name: Publish
         run: npm publish --provenance
         env:

From f1dcd0ae3c41a239fc198e71a08151d098f935f7 Mon Sep 17 00:00:00 2001
From: njevric <njevric9@gmail.com>
Date: Wed, 20 May 2026 23:30:02 +0200
Subject: [PATCH 3/4] fix: correct repository url casing in package.json

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 46af128..6a904eb 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/njevric/packy-dev.git"
+    "url": "git+https://github.com/NJevric/packy-dev.git"
   },
   "bugs": {
     "url": "https://github.com/njevric/packy-dev/issues"

From d7413a9b2a3369c5942c54696c68a92049a96bb1 Mon Sep 17 00:00:00 2001
From: njevric <njevric9@gmail.com>
Date: Thu, 21 May 2026 22:55:49 +0200
Subject: [PATCH 4/4] feat: monorepo implementation with duplicate diff version
 checker and UI changes of package detail view

---
 .github/workflows/publish.yml                 |  42 --
 .gitignore                                    |   3 +
 src/client/App.vue                            |   2 +
 src/client/components/WorkspaceSwitcher.vue   |  94 +++
 .../components/dashboard/DuplicatesCard.vue   | 150 +++++
 .../components/packages/DownloadsChart.vue    | 276 +++++++++
 .../components/packages/HealthGauge.vue       |  98 +++
 src/client/composables/useDownloadTrend.ts    |  19 +
 src/client/composables/useDuplicates.ts       |  13 +
 src/client/composables/usePackages.ts         |  17 +-
 src/client/composables/useSmartFilters.ts     |   6 +-
 src/client/router.ts                          |  10 +
 src/client/stores/workspace.ts                |  27 +
 src/client/views/DashboardView.vue            |   2 +
 src/client/views/PackageDetailView.vue        | 581 +++++++++++-------
 src/server/index.ts                           |   2 +-
 src/server/routes/packages.ts                 |  34 +-
 src/server/routes/project.ts                  |  60 +-
 src/server/routes/registry.ts                 |  14 +-
 src/server/services/registryClient.ts         |  36 +-
 src/server/services/workspaces.ts             | 214 +++++++
 src/shared/types.ts                           |  20 +
 test/server/workspaces.test.ts                | 113 ++++
 23 files changed, 1550 insertions(+), 283 deletions(-)
 delete mode 100644 .github/workflows/publish.yml
 create mode 100644 src/client/components/WorkspaceSwitcher.vue
 create mode 100644 src/client/components/dashboard/DuplicatesCard.vue
 create mode 100644 src/client/components/packages/DownloadsChart.vue
 create mode 100644 src/client/components/packages/HealthGauge.vue
 create mode 100644 src/client/composables/useDownloadTrend.ts
 create mode 100644 src/client/composables/useDuplicates.ts
 create mode 100644 src/client/stores/workspace.ts
 create mode 100644 src/server/services/workspaces.ts
 create mode 100644 test/server/workspaces.test.ts

diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
deleted file mode 100644
index 94b486c..0000000
--- a/.github/workflows/publish.yml
+++ /dev/null
@@ -1,42 +0,0 @@
-name: Publish
-
-on:
-  release:
-    types: [published]
-
-permissions:
-  contents: read
-  id-token: write
-
-jobs:
-  publish:
-    name: Publish to npm
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 24
-          cache: npm
-          registry-url: https://registry.npmjs.org
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Lint
-        run: npm run lint
-
-      - name: Typecheck
-        run: npm run typecheck
-
-      - name: Build
-        run: npm run build
-
-      - name: Publish
-        run: npm publish --provenance
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.gitignore b/.gitignore
index 194dca9..144174b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -35,3 +35,6 @@ coverage/
 
 # TypeScript
 *.tsbuildinfo
+
+# Local monorepo fixture for testing the workspace feature
+test-monorepo/
diff --git a/src/client/App.vue b/src/client/App.vue
index 8ebc79a..d892af3 100644
--- a/src/client/App.vue
+++ b/src/client/App.vue
@@ -11,6 +11,7 @@ import {
 } from 'radix-vue'
 import { useTheme } from '@/composables/useTheme'
 import { Button } from '@/components/ui/button'
+import WorkspaceSwitcher from '@/components/WorkspaceSwitcher.vue'
 
 const { theme, setTheme } = useTheme()
 
@@ -31,6 +32,7 @@ const themeOptions = [
       <div class="container mx-auto flex h-14 items-center justify-between px-4 sm:px-6">
         <div class="flex items-center gap-2.5">
           <span class="text-xl font-bold tracking-tight">Packy</span>
+          <WorkspaceSwitcher />
         </div>
         <nav class="flex items-center gap-1">
           <RouterLink
diff --git a/src/client/components/WorkspaceSwitcher.vue b/src/client/components/WorkspaceSwitcher.vue
new file mode 100644
index 0000000..79929a9
--- /dev/null
+++ b/src/client/components/WorkspaceSwitcher.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { computed, watch } from 'vue'
+import { ChevronsUpDown, Check, FolderTree, Home } from 'lucide-vue-next'
+import {
+  DropdownMenuRoot,
+  DropdownMenuTrigger,
+  DropdownMenuPortal,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+} from 'radix-vue'
+import { useProject } from '@/composables/useProject'
+import { useWorkspaceStore } from '@/stores/workspace'
+import { Button } from '@/components/ui/button'
+
+const { data: project } = useProject()
+const ws = useWorkspaceStore()
+
+const workspaces = computed(() => project.value?.workspaces ?? [])
+const isMonorepo = computed(() => project.value?.isMonorepo ?? false)
+const children = computed(() => workspaces.value.filter((w) => !w.isRoot))
+const rootWorkspace = computed(() => workspaces.value.find((w) => w.isRoot))
+
+// Drop a persisted selection that does not belong to the current project
+watch(
+  workspaces,
+  (list) => {
+    if (ws.selected && !list.some((w) => !w.isRoot && w.name === ws.selected)) {
+      ws.select(null)
+    }
+  },
+  { immediate: true }
+)
+
+const currentLabel = computed(() => {
+  if (ws.selected) return ws.selected
+  return rootWorkspace.value?.name ?? 'Root'
+})
+</script>
+
+<template>
+  <DropdownMenuRoot v-if="isMonorepo">
+    <DropdownMenuTrigger as-child>
+      <Button
+        variant="outline"
+        size="sm"
+        class="h-8 gap-1.5 max-w-[200px]"
+      >
+        <FolderTree class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+        <span class="truncate text-xs font-medium">{{ currentLabel }}</span>
+        <ChevronsUpDown class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuPortal>
+      <DropdownMenuContent
+        align="start"
+        :side-offset="6"
+        class="z-50 min-w-[220px] max-h-[70vh] overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 p-1"
+      >
+        <DropdownMenuLabel class="px-2 py-1.5 text-[11px] font-semibold uppercase tracking-widest text-muted-foreground">
+          Workspace
+        </DropdownMenuLabel>
+
+        <DropdownMenuItem
+          class="flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none cursor-default select-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+          @click="ws.select(null)"
+        >
+          <Home class="h-4 w-4 shrink-0 text-muted-foreground" />
+          <span class="flex-1 truncate">{{ rootWorkspace?.name ?? 'Root' }}</span>
+          <span class="text-[10px] text-muted-foreground">root</span>
+          <Check
+            v-if="!ws.selected"
+            class="h-3.5 w-3.5 shrink-0"
+          />
+        </DropdownMenuItem>
+
+        <DropdownMenuItem
+          v-for="child in children"
+          :key="child.relativePath"
+          class="flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none cursor-default select-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+          @click="ws.select(child.name)"
+        >
+          <FolderTree class="h-4 w-4 shrink-0 text-muted-foreground" />
+          <span class="flex-1 truncate">{{ child.name }}</span>
+          <span class="text-[10px] text-muted-foreground truncate max-w-[90px]">{{ child.relativePath }}</span>
+          <Check
+            v-if="ws.selected === child.name"
+            class="h-3.5 w-3.5 shrink-0"
+          />
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenuPortal>
+  </DropdownMenuRoot>
+</template>
diff --git a/src/client/components/dashboard/DuplicatesCard.vue b/src/client/components/dashboard/DuplicatesCard.vue
new file mode 100644
index 0000000..9d27891
--- /dev/null
+++ b/src/client/components/dashboard/DuplicatesCard.vue
@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Copy, CheckCircle2 } from 'lucide-vue-next'
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
+import { Skeleton } from '@/components/ui/skeleton'
+import { Badge } from '@/components/ui/badge'
+import { useDuplicates } from '@/composables/useDuplicates'
+import type { DuplicateDependency } from '@shared/types'
+
+const { data, isLoading } = useDuplicates()
+
+const duplicates = computed(() => data.value ?? [])
+
+// Versions arrive sorted newest → oldest. Newest is the alignment target;
+// older versions ramp through warning colors to signal how far they have drifted.
+const DOT_COLORS = ['bg-green-500', 'bg-yellow-500', 'bg-orange-500', 'bg-red-500']
+const TEXT_COLORS = ['text-green-600', 'text-yellow-600', 'text-orange-600', 'text-red-600']
+
+function dotColor(index: number): string {
+  return DOT_COLORS[Math.min(index, DOT_COLORS.length - 1)]
+}
+
+function textColor(index: number): string {
+  return TEXT_COLORS[Math.min(index, TEXT_COLORS.length - 1)]
+}
+
+function totalUses(dep: DuplicateDependency): number {
+  return dep.versions.reduce((sum, v) => sum + v.workspaces.length, 0)
+}
+
+function barWidth(count: number, dep: DuplicateDependency): string {
+  const total = totalUses(dep)
+  return total === 0 ? '0%' : `${(count / total) * 100}%`
+}
+</script>
+
+<template>
+  <Card>
+    <CardHeader>
+      <CardTitle class="flex items-center gap-2">
+        <Copy class="h-4 w-4 text-muted-foreground" />
+        Duplicate Versions
+        <Badge
+          v-if="duplicates.length > 0"
+          variant="secondary"
+        >
+          {{ duplicates.length }}
+        </Badge>
+      </CardTitle>
+      <CardDescription>
+        Dependencies pinned to different versions across workspaces
+      </CardDescription>
+    </CardHeader>
+    <CardContent>
+      <!-- Loading -->
+      <div
+        v-if="isLoading"
+        class="divide-y"
+      >
+        <Skeleton
+          v-for="i in 3"
+          :key="i"
+          class="my-4 h-20 w-full first:mt-0 last:mb-0"
+        />
+      </div>
+
+      <!-- Empty -->
+      <div
+        v-else-if="duplicates.length === 0"
+        class="flex items-center gap-2 py-2 text-sm text-muted-foreground"
+      >
+        <CheckCircle2 class="h-4 w-4 text-green-500" />
+        Every workspace agrees on its dependency versions
+      </div>
+
+      <!-- Conflicts -->
+      <div
+        v-else
+        class="divide-y"
+      >
+        <div
+          v-for="dep in duplicates"
+          :key="dep.name"
+          class="py-4 first:pt-0 last:pb-0"
+        >
+          <!-- Package name + version count -->
+          <div class="flex items-center justify-between gap-2">
+            <span class="truncate font-mono text-sm font-semibold">
+              {{ dep.name }}
+            </span>
+            <span class="shrink-0 text-[11px] font-medium text-muted-foreground">
+              {{ dep.versions.length }} versions
+            </span>
+          </div>
+
+          <!-- Distribution bar -->
+          <div class="mt-2.5 flex h-1.5 gap-px overflow-hidden rounded-full">
+            <div
+              v-for="(entry, i) in dep.versions"
+              :key="entry.version"
+              class="first:rounded-l-full last:rounded-r-full"
+              :class="dotColor(i)"
+              :style="{ width: barWidth(entry.workspaces.length, dep) }"
+            />
+          </div>
+
+          <!-- Version lanes -->
+          <div class="mt-3 space-y-2.5">
+            <div
+              v-for="(entry, i) in dep.versions"
+              :key="entry.version"
+            >
+              <div class="flex items-center gap-2">
+                <span
+                  class="h-2 w-2 shrink-0 rounded-full"
+                  :class="dotColor(i)"
+                />
+                <span
+                  class="font-mono text-xs font-semibold"
+                  :class="textColor(i)"
+                >
+                  {{ entry.version }}
+                </span>
+                <span
+                  v-if="i === 0"
+                  class="rounded border bg-background px-1 py-px text-[10px] font-medium uppercase tracking-wide text-muted-foreground"
+                >
+                  newest
+                </span>
+                <span class="ml-auto shrink-0 text-[11px] text-muted-foreground">
+                  {{ entry.workspaces.length }}
+                  {{ entry.workspaces.length === 1 ? 'workspace' : 'workspaces' }}
+                </span>
+              </div>
+              <div class="mt-1.5 flex flex-wrap gap-1 pl-4">
+                <span
+                  v-for="workspace in entry.workspaces"
+                  :key="workspace"
+                  class="rounded border bg-background px-1.5 py-0.5 font-mono text-[11px] text-muted-foreground"
+                >
+                  {{ workspace }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </CardContent>
+  </Card>
+</template>
diff --git a/src/client/components/packages/DownloadsChart.vue b/src/client/components/packages/DownloadsChart.vue
new file mode 100644
index 0000000..0238b78
--- /dev/null
+++ b/src/client/components/packages/DownloadsChart.vue
@@ -0,0 +1,276 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type { DownloadDataPoint } from '@shared/types'
+
+const props = defineProps<{
+  data: DownloadDataPoint[]
+}>()
+
+interface WeekBucket {
+  label: string
+  downloads: number
+}
+
+interface ChartPoint extends WeekBucket {
+  x: number
+  y: number
+}
+
+// --- Chart geometry (viewBox units) ---
+const W = 760
+const H = 220
+const PAD_TOP = 18
+const PAD_BOTTOM = 6
+
+function formatDay(iso: string): string {
+  const d = new Date(`${iso}T00:00:00`)
+  return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
+}
+
+function fmt(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`
+  return n.toLocaleString()
+}
+
+// Aggregate daily download points into full 7-day weeks (drops a trailing partial week).
+const weekly = computed<WeekBucket[]>(() => {
+  const days = props.data ?? []
+  if (days.length < 14) return []
+  const buckets: WeekBucket[] = []
+  for (let i = 0; i + 7 <= days.length; i += 7) {
+    const chunk = days.slice(i, i + 7)
+    const total = chunk.reduce((sum, d) => sum + (d.downloads ?? 0), 0)
+    buckets.push({ label: formatDay(chunk[0].day), downloads: total })
+  }
+  return buckets
+})
+
+const maxVal = computed(() => Math.max(1, ...weekly.value.map(w => w.downloads)))
+
+const points = computed<ChartPoint[]>(() => {
+  const n = weekly.value.length
+  if (n === 0) return []
+  const usableH = H - PAD_TOP - PAD_BOTTOM
+  return weekly.value.map((w, i) => ({
+    ...w,
+    x: n === 1 ? W / 2 : (i / (n - 1)) * W,
+    y: PAD_TOP + (1 - w.downloads / maxVal.value) * usableH,
+  }))
+})
+
+// Catmull-Rom → cubic-bezier smoothing for an organic curve.
+function buildSmooth(pts: ChartPoint[]): string {
+  if (pts.length < 2) return ''
+  let d = `M ${pts[0].x.toFixed(2)} ${pts[0].y.toFixed(2)}`
+  for (let i = 0; i < pts.length - 1; i++) {
+    const p0 = pts[i - 1] ?? pts[i]
+    const p1 = pts[i]
+    const p2 = pts[i + 1]
+    const p3 = pts[i + 2] ?? p2
+    const cp1x = p1.x + (p2.x - p0.x) / 6
+    const cp1y = p1.y + (p2.y - p0.y) / 6
+    const cp2x = p2.x - (p3.x - p1.x) / 6
+    const cp2y = p2.y - (p3.y - p1.y) / 6
+    d += ` C ${cp1x.toFixed(2)} ${cp1y.toFixed(2)}, ${cp2x.toFixed(2)} ${cp2y.toFixed(2)}, ${p2.x.toFixed(2)} ${p2.y.toFixed(2)}`
+  }
+  return d
+}
+
+const linePath = computed(() => buildSmooth(points.value))
+
+const areaPath = computed(() => {
+  const pts = points.value
+  if (pts.length < 2) return ''
+  return `${linePath.value} L ${pts[pts.length - 1].x.toFixed(2)} ${H} L ${pts[0].x.toFixed(2)} ${H} Z`
+})
+
+// --- Summary stats ---
+const totalYear = computed(() => weekly.value.reduce((s, w) => s + w.downloads, 0))
+const avgWeekly = computed(() =>
+  weekly.value.length ? Math.round(totalYear.value / weekly.value.length) : 0,
+)
+const peakWeek = computed(() => Math.max(0, ...weekly.value.map(w => w.downloads)))
+
+// Momentum: recent 8 weeks vs the prior 8 weeks.
+const trendPct = computed<number | null>(() => {
+  const w = weekly.value
+  if (w.length < 16) return null
+  const recent = w.slice(-8).reduce((s, b) => s + b.downloads, 0) / 8
+  const prior = w.slice(-16, -8).reduce((s, b) => s + b.downloads, 0) / 8
+  if (prior === 0) return null
+  return Math.round(((recent - prior) / prior) * 100)
+})
+
+// --- Hover interaction ---
+const chartEl = ref<HTMLElement | null>(null)
+const hoverIndex = ref<number | null>(null)
+
+function onMove(e: MouseEvent) {
+  const el = chartEl.value
+  const n = points.value.length
+  if (!el || n === 0) return
+  const rect = el.getBoundingClientRect()
+  const ratio = (e.clientX - rect.left) / rect.width
+  hoverIndex.value = Math.max(0, Math.min(n - 1, Math.round(ratio * (n - 1))))
+}
+
+function onLeave() {
+  hoverIndex.value = null
+}
+
+const hoverPoint = computed<ChartPoint | null>(() =>
+  hoverIndex.value === null ? null : points.value[hoverIndex.value] ?? null,
+)
+
+const hoverLeft = computed(() =>
+  hoverPoint.value ? `${(hoverPoint.value.x / W) * 100}%` : '0%',
+)
+const hoverTop = computed(() =>
+  hoverPoint.value ? `${(hoverPoint.value.y / H) * 100}%` : '0%',
+)
+
+const tooltipStyle = computed(() => {
+  const p = hoverPoint.value
+  if (!p) return {}
+  const leftPct = (p.x / W) * 100
+  let translateX = '-50%'
+  if (leftPct < 16) translateX = '-8%'
+  else if (leftPct > 84) translateX = '-92%'
+  return { left: `${leftPct}%`, transform: `translateX(${translateX})` }
+})
+
+const axisLabels = computed(() => {
+  const pts = points.value
+  if (pts.length < 2) return []
+  return [pts[0], pts[Math.floor(pts.length / 2)], pts[pts.length - 1]]
+})
+</script>
+
+<template>
+  <div
+    v-if="!weekly.length"
+    class="flex h-44 flex-col items-center justify-center rounded-lg border border-dashed text-sm text-muted-foreground"
+  >
+    Not enough download history to chart.
+  </div>
+
+  <div v-else>
+    <!-- Summary tiles -->
+    <div class="grid grid-cols-3 overflow-hidden rounded-lg border">
+      <div class="border-r px-4 py-3">
+        <div class="text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">
+          12-Month Total
+        </div>
+        <div class="mt-1 text-xl font-bold tabular-nums">
+          {{ fmt(totalYear) }}
+        </div>
+      </div>
+      <div class="border-r px-4 py-3">
+        <div class="text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">
+          Weekly Average
+        </div>
+        <div class="mt-1 flex items-baseline gap-2">
+          <span class="text-xl font-bold tabular-nums">{{ fmt(avgWeekly) }}</span>
+          <span
+            v-if="trendPct !== null"
+            class="text-xs font-semibold tabular-nums"
+            :class="trendPct >= 0 ? 'text-green-500' : 'text-orange-500'"
+          >
+            {{ trendPct >= 0 ? '↑' : '↓' }} {{ Math.abs(trendPct) }}%
+          </span>
+        </div>
+      </div>
+      <div class="px-4 py-3">
+        <div class="text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">
+          Peak Week
+        </div>
+        <div class="mt-1 text-xl font-bold tabular-nums">
+          {{ fmt(peakWeek) }}
+        </div>
+      </div>
+    </div>
+
+    <!-- Chart -->
+    <div
+      ref="chartEl"
+      class="relative mt-4 cursor-crosshair text-indigo-500 dark:text-indigo-400"
+      @mousemove="onMove"
+      @mouseleave="onLeave"
+    >
+      <svg
+        :viewBox="`0 0 ${W} ${H}`"
+        preserveAspectRatio="none"
+        class="h-44 w-full"
+      >
+        <defs>
+          <linearGradient
+            id="downloads-fill"
+            x1="0"
+            y1="0"
+            x2="0"
+            y2="1"
+          >
+            <stop
+              offset="0%"
+              stop-color="currentColor"
+              stop-opacity="0.3"
+            />
+            <stop
+              offset="100%"
+              stop-color="currentColor"
+              stop-opacity="0"
+            />
+          </linearGradient>
+        </defs>
+        <path
+          :d="areaPath"
+          fill="url(#downloads-fill)"
+        />
+        <path
+          :d="linePath"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linejoin="round"
+          stroke-linecap="round"
+          vector-effect="non-scaling-stroke"
+        />
+      </svg>
+
+      <!-- Crosshair -->
+      <div
+        v-if="hoverPoint"
+        class="pointer-events-none absolute inset-y-0 w-px bg-indigo-500/40"
+        :style="{ left: hoverLeft }"
+      />
+      <!-- Marker dot -->
+      <div
+        v-if="hoverPoint"
+        class="pointer-events-none absolute h-2.5 w-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-indigo-500 ring-2 ring-background"
+        :style="{ left: hoverLeft, top: hoverTop }"
+      />
+      <!-- Tooltip -->
+      <div
+        v-if="hoverPoint"
+        class="pointer-events-none absolute top-0 z-10 whitespace-nowrap rounded-md border bg-popover px-2.5 py-1.5 text-popover-foreground shadow-md"
+        :style="tooltipStyle"
+      >
+        <div class="text-xs font-semibold tabular-nums">
+          {{ fmt(hoverPoint.downloads) }} downloads
+        </div>
+        <div class="text-[10px] text-muted-foreground">
+          week of {{ hoverPoint.label }}
+        </div>
+      </div>
+    </div>
+
+    <!-- X axis -->
+    <div class="mt-2 flex justify-between text-[11px] text-muted-foreground">
+      <span
+        v-for="(p, i) in axisLabels"
+        :key="i"
+      >{{ p.label }}</span>
+    </div>
+  </div>
+</template>
diff --git a/src/client/components/packages/HealthGauge.vue b/src/client/components/packages/HealthGauge.vue
new file mode 100644
index 0000000..166c61f
--- /dev/null
+++ b/src/client/components/packages/HealthGauge.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { HealthMetrics } from '@shared/types'
+
+const props = defineProps<{
+  score: number
+  label: HealthMetrics['label']
+}>()
+
+const SIZE = 168
+const CENTER = SIZE / 2
+const RADIUS = 64
+const STROKE = 14
+const START_ANGLE = -135
+const SWEEP = 270
+
+function polar(angleDeg: number) {
+  const a = ((angleDeg - 90) * Math.PI) / 180
+  return {
+    x: CENTER + RADIUS * Math.cos(a),
+    y: CENTER + RADIUS * Math.sin(a),
+  }
+}
+
+function arcPath(startAngle: number, endAngle: number): string {
+  const start = polar(startAngle)
+  const end = polar(endAngle)
+  const largeArc = Math.abs(endAngle - startAngle) > 180 ? 1 : 0
+  return `M ${start.x.toFixed(2)} ${start.y.toFixed(2)} A ${RADIUS} ${RADIUS} 0 ${largeArc} 1 ${end.x.toFixed(2)} ${end.y.toFixed(2)}`
+}
+
+const trackPath = arcPath(START_ANGLE, START_ANGLE + SWEEP)
+
+const clampedScore = computed(() => Math.max(0, Math.min(100, Math.round(props.score))))
+const dashArray = computed(() => `${clampedScore.value} 100`)
+
+const colorClass = computed(() => {
+  switch (props.label) {
+    case 'healthy': return 'text-green-500'
+    case 'maintained': return 'text-green-400'
+    case 'aging': return 'text-yellow-500'
+    case 'unmaintained': return 'text-orange-500'
+    case 'deprecated': return 'text-destructive'
+    default: return 'text-muted-foreground'
+  }
+})
+</script>
+
+<template>
+  <div class="relative inline-flex items-center justify-center">
+    <svg
+      :width="SIZE"
+      :height="SIZE"
+      :viewBox="`0 0 ${SIZE} ${SIZE}`"
+    >
+      <!-- Track -->
+      <path
+        :d="trackPath"
+        fill="none"
+        :stroke-width="STROKE"
+        stroke-linecap="round"
+        stroke="currentColor"
+        class="text-muted-foreground/15"
+      />
+      <!-- Value -->
+      <path
+        :d="trackPath"
+        fill="none"
+        :stroke-width="STROKE"
+        stroke-linecap="round"
+        stroke="currentColor"
+        pathLength="100"
+        :stroke-dasharray="dashArray"
+        :class="colorClass"
+        class="gauge-value"
+      />
+    </svg>
+    <div class="absolute inset-0 flex flex-col items-center justify-center">
+      <div class="flex items-baseline gap-0.5">
+        <span
+          class="text-[2.75rem] font-bold leading-none tabular-nums"
+          :class="colorClass"
+        >{{ clampedScore }}</span>
+        <span class="text-sm font-medium text-muted-foreground">/100</span>
+      </div>
+      <span
+        class="mt-2 text-[11px] font-semibold uppercase tracking-widest"
+        :class="colorClass"
+      >{{ label }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.gauge-value {
+  transition: stroke-dasharray 0.7s cubic-bezier(0.22, 1, 0.36, 1);
+}
+</style>
diff --git a/src/client/composables/useDownloadTrend.ts b/src/client/composables/useDownloadTrend.ts
new file mode 100644
index 0000000..ce15edb
--- /dev/null
+++ b/src/client/composables/useDownloadTrend.ts
@@ -0,0 +1,19 @@
+import { useQuery } from '@tanstack/vue-query'
+import { unref, type MaybeRef } from 'vue'
+import { useApi } from './useApi'
+import type { DownloadDataPoint } from '@shared/types'
+
+export function useDownloadTrend(packageName: MaybeRef<string | undefined>) {
+  const api = useApi()
+
+  return useQuery({
+    queryKey: ['download-trend', packageName],
+    queryFn: () => {
+      const name = unref(packageName)
+      if (!name) throw new Error('No package name')
+      return api.get<DownloadDataPoint[]>(`/registry/${encodeURIComponent(name)}/downloads`)
+    },
+    enabled: () => !!unref(packageName),
+    staleTime: 6 * 60 * 60 * 1000, // 6h
+  })
+}
diff --git a/src/client/composables/useDuplicates.ts b/src/client/composables/useDuplicates.ts
new file mode 100644
index 0000000..57ae2b0
--- /dev/null
+++ b/src/client/composables/useDuplicates.ts
@@ -0,0 +1,13 @@
+import { useQuery } from '@tanstack/vue-query'
+import { useApi } from './useApi'
+import type { DuplicateDependency } from '@shared/types'
+
+export function useDuplicates() {
+  const api = useApi()
+
+  return useQuery({
+    queryKey: ['duplicates'],
+    queryFn: () => api.get<DuplicateDependency[]>('/project/duplicates'),
+    staleTime: 60 * 1000,
+  })
+}
diff --git a/src/client/composables/usePackages.ts b/src/client/composables/usePackages.ts
index 2b95cbf..f0b2a0a 100644
--- a/src/client/composables/usePackages.ts
+++ b/src/client/composables/usePackages.ts
@@ -1,22 +1,27 @@
+import { computed } from 'vue'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/vue-query'
 import { useApi } from './useApi'
+import { useWorkspaceStore } from '@/stores/workspace'
 import type { Package, UpdatePackageRequest } from '@shared/types'
 
 export function usePackages() {
   const api = useApi()
   const queryClient = useQueryClient()
+  const ws = useWorkspaceStore()
 
-  // Query: Get all packages
+  // Query: Get all packages (scoped to the selected workspace)
   const packages = useQuery({
-    queryKey: ['packages'],
-    queryFn: () => api.get<Package[]>('/packages'),
+    queryKey: ['packages', computed(() => ws.selected)],
+    queryFn: () => api.get<Package[]>(`/packages${ws.queryParam}`),
     staleTime: 30 * 1000, // 30 seconds
   })
 
   // Mutation: Remove a package
   const removePackage = useMutation({
     mutationFn: (name: string) =>
-      api.delete<{ operationId: string }>(`/packages/${encodeURIComponent(name)}`),
+      api.delete<{ operationId: string }>(
+        `/packages/${encodeURIComponent(name)}${ws.queryParam}`
+      ),
     onSuccess: () => {
       setTimeout(() => {
         queryClient.invalidateQueries({ queryKey: ['packages'] })
@@ -28,7 +33,7 @@ export function usePackages() {
   const updatePackage = useMutation({
     mutationFn: ({ name, version }: { name: string; version?: string }) =>
       api.patch<{ operationId: string }, UpdatePackageRequest>(
-        `/packages/${encodeURIComponent(name)}`,
+        `/packages/${encodeURIComponent(name)}${ws.queryParam}`,
         { version }
       ),
     onSuccess: () => {
@@ -42,7 +47,7 @@ export function usePackages() {
   const updateAll = useMutation({
     mutationFn: () =>
       api.post<{ operationId: string | null; message?: string }, Record<string, never>>(
-        '/packages/update-all',
+        `/packages/update-all${ws.queryParam}`,
         {}
       ),
     onSuccess: () => {
diff --git a/src/client/composables/useSmartFilters.ts b/src/client/composables/useSmartFilters.ts
index de56578..fc997e3 100644
--- a/src/client/composables/useSmartFilters.ts
+++ b/src/client/composables/useSmartFilters.ts
@@ -1,6 +1,7 @@
 import { ref, computed, type Ref } from 'vue'
 import { useQuery } from '@tanstack/vue-query'
 import { useApi } from './useApi'
+import { useWorkspaceStore } from '@/stores/workspace'
 import type { SmartPackageData } from '@shared/types'
 
 export type PopularityFilter = 'all' | 'very-popular' | 'popular' | 'niche'
@@ -29,12 +30,13 @@ function getPopularityCategory(weeklyDownloads: number | null): Exclude<Populari
 
 export function useSmartFilters(_packages: Ref<unknown[]>) {
   const { get } = useApi()
+  const ws = useWorkspaceStore()
 
   const enabled = ref(false)
 
   const { data: smartData, isLoading, isFetching } = useQuery({
-    queryKey: ['packages', 'smart-data'],
-    queryFn: () => get<SmartPackageData[]>('/packages/smart-data'),
+    queryKey: ['packages', 'smart-data', computed(() => ws.selected)],
+    queryFn: () => get<SmartPackageData[]>(`/packages/smart-data${ws.queryParam}`),
     enabled,
     staleTime: 5 * 60 * 1000,
   })
diff --git a/src/client/router.ts b/src/client/router.ts
index 374aa0d..dd40b6d 100644
--- a/src/client/router.ts
+++ b/src/client/router.ts
@@ -42,4 +42,14 @@ const router = createRouter({
   ],
 })
 
+// Carry the selected workspace (?workspace=) across route changes so it is not
+// lost when navigating between views. A same-path change is left untouched so
+// clearing the workspace still works.
+router.beforeEach((to, from) => {
+  const workspace = from.query.workspace
+  if (workspace && !to.query.workspace && to.path !== from.path) {
+    return { path: to.path, query: { ...to.query, workspace }, hash: to.hash }
+  }
+})
+
 export default router
diff --git a/src/client/stores/workspace.ts b/src/client/stores/workspace.ts
new file mode 100644
index 0000000..e15ae80
--- /dev/null
+++ b/src/client/stores/workspace.ts
@@ -0,0 +1,27 @@
+import { defineStore } from 'pinia'
+import { computed } from 'vue'
+import router from '@/router'
+
+export const useWorkspaceStore = defineStore('workspace', () => {
+  // The selected workspace lives in the `?workspace=` query param so it
+  // survives a page reload and can be shared via the URL.
+  // null means the repo root / non-monorepo project.
+  const selected = computed<string | null>(() => {
+    const value = router.currentRoute.value.query.workspace
+    return typeof value === 'string' && value ? value : null
+  })
+
+  function select(name: string | null) {
+    const query = { ...router.currentRoute.value.query }
+    if (name) query.workspace = name
+    else delete query.workspace
+    router.replace({ query })
+  }
+
+  // Query string appended to workspace-scoped API calls
+  const queryParam = computed(() =>
+    selected.value ? `?workspace=${encodeURIComponent(selected.value)}` : ''
+  )
+
+  return { selected, select, queryParam }
+})
diff --git a/src/client/views/DashboardView.vue b/src/client/views/DashboardView.vue
index 1da8d88..9529b66 100644
--- a/src/client/views/DashboardView.vue
+++ b/src/client/views/DashboardView.vue
@@ -7,6 +7,7 @@ import { Skeleton } from '@/components/ui/skeleton'
 import { useAudit } from '@/composables/useAudit'
 import { useInstallSize } from '@/composables/useInstallSize'
 import ActivityCard from '@/components/dashboard/ActivityCard.vue'
+import DuplicatesCard from '@/components/dashboard/DuplicatesCard.vue'
 import OperationToast from '@/components/operations/OperationToast.vue'
 import { ConfirmDialog } from '@/components/ui/confirm-dialog'
 import { usePackages } from '@/composables/usePackages'
@@ -93,6 +94,7 @@ function handleSelectPackage(name: string) {
       </div>
 
       <div class="space-y-6">
+        <DuplicatesCard v-if="project?.isMonorepo" />
         <ActivityCard />
       </div>
     </div>
diff --git a/src/client/views/PackageDetailView.vue b/src/client/views/PackageDetailView.vue
index cc89bf5..7a49080 100644
--- a/src/client/views/PackageDetailView.vue
+++ b/src/client/views/PackageDetailView.vue
@@ -1,17 +1,37 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import {
+  ArrowLeft,
+  ArrowRight,
+  ArrowUpCircle,
+  Tag,
+  Trash2,
+  Package as PackageIcon,
+  Wrench,
+  AlertTriangle,
+  Calendar,
+  Download,
+  Scale,
+  User,
+  Globe,
+  GitBranch,
+} from 'lucide-vue-next'
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
 import { Skeleton } from '@/components/ui/skeleton'
 import { ConfirmDialog } from '@/components/ui/confirm-dialog'
 import OperationToast from '@/components/operations/OperationToast.vue'
+import VersionPickerDialog from '@/components/packages/VersionPickerDialog.vue'
+import HealthGauge from '@/components/packages/HealthGauge.vue'
+import DownloadsChart from '@/components/packages/DownloadsChart.vue'
 import { useRegistry } from '@/composables/useRegistry'
 import { usePackages } from '@/composables/usePackages'
 import { useVersionCompare } from '@/composables/useVersionCompare'
 import { useOperations } from '@/composables/useOperations'
 import { useHealth } from '@/composables/useHealth'
+import { useDownloadTrend } from '@/composables/useDownloadTrend'
 
 const route = useRoute()
 const router = useRouter()
@@ -20,6 +40,7 @@ const packageName = computed(() => decodeURIComponent(route.params.name as strin
 const { data: registryInfo, isLoading: isRegistryLoading } = useRegistry(packageName)
 const { packages, updatePackage, removePackage } = usePackages()
 const { data: health, isLoading: isHealthLoading } = useHealth(packageName)
+const { data: downloadTrend, isLoading: isTrendLoading } = useDownloadTrend(packageName)
 
 useOperations()
 
@@ -27,12 +48,29 @@ const packageData = computed(() => {
   return packages.data.value?.find(p => p.name === packageName.value)
 })
 
+const isPackagesLoading = computed(() => packages.isLoading.value)
+
+const currentVersion = computed(() => packageData.value?.current || '')
+const latestVersion = computed(() => registryInfo.value?.version || packageData.value?.latest || '')
+
 const { badgeVariant, badgeText } = useVersionCompare(
-  () => packageData.value?.current || '',
-  () => packageData.value?.latest || ''
+  () => currentVersion.value,
+  () => latestVersion.value,
 )
 
 const isRemoveDialogOpen = ref(false)
+const isVersionPickerOpen = ref(false)
+
+const typeIcon = computed(() => (packageData.value?.type === 'devDependency' ? Wrench : PackageIcon))
+const typeLabel = computed(() =>
+  packageData.value?.type === 'devDependency' ? 'Dev Dependency' : 'Dependency',
+)
+
+const authorName = computed(() => {
+  const author = registryInfo.value?.author
+  if (!author) return null
+  return typeof author === 'string' ? author : author.name
+})
 
 function formatDownloads(num: number): string {
   if (num >= 1_000_000) return `${(num / 1_000_000).toFixed(1)}M`
@@ -44,6 +82,10 @@ function handleUpdate() {
   updatePackage.mutate({ name: packageName.value })
 }
 
+function handleChooseVersion(version: string) {
+  updatePackage.mutate({ name: packageName.value, version })
+}
+
 function handleRemove() {
   isRemoveDialogOpen.value = true
 }
@@ -61,6 +103,8 @@ function getRepoUrl(repo?: { type: string; url: string }): string | null {
     .replace(/^git:\/\//, 'https://')
 }
 
+const repoUrl = computed(() => getRepoUrl(registryInfo.value?.repository))
+
 const healthColor = computed(() => {
   switch (health.value?.label) {
     case 'healthy': return 'text-green-500'
@@ -84,286 +128,379 @@ function formatAge(dateStr: string | null | undefined): string {
 <template>
   <div class="space-y-6">
     <!-- Header -->
-    <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
-      <div>
-        <div class="flex items-center gap-3">
+    <div class="space-y-3">
+      <Button
+        variant="ghost"
+        size="sm"
+        class="-ml-2 h-8 gap-1.5 text-muted-foreground"
+        @click="router.back()"
+      >
+        <ArrowLeft class="h-4 w-4" />
+        Back
+      </Button>
+
+      <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+        <div class="min-w-0 space-y-2">
+          <div class="flex flex-wrap items-center gap-2.5">
+            <h1 class="text-3xl font-bold tracking-tight">
+              {{ packageName }}
+            </h1>
+
+            <!-- Type tag -->
+            <span
+              v-if="packageData"
+              class="inline-flex items-center gap-1 rounded-md border bg-muted/50 px-2 py-0.5 text-xs font-medium text-muted-foreground"
+            >
+              <component
+                :is="typeIcon"
+                class="h-3 w-3"
+              />
+              {{ typeLabel }}
+            </span>
+
+            <!-- Health tag -->
+            <span
+              v-if="health"
+              class="inline-flex items-center gap-1.5 rounded-md border bg-muted/50 px-2 py-0.5 text-xs font-medium"
+            >
+              <span
+                class="h-1.5 w-1.5 rounded-full bg-current"
+                :class="healthColor"
+              />
+              <span
+                class="capitalize"
+                :class="healthColor"
+              >{{ health.label }}</span>
+            </span>
+          </div>
+
+          <p
+            v-if="registryInfo?.description"
+            class="text-muted-foreground"
+          >
+            {{ registryInfo.description }}
+          </p>
+        </div>
+
+        <!-- Actions -->
+        <div class="flex flex-wrap gap-2 sm:flex-nowrap sm:shrink-0">
           <Button
-            variant="ghost"
-            size="sm"
-            @click="router.back()"
+            v-if="packageData?.hasUpdate"
+            class="gap-1.5"
+            @click="handleUpdate"
           >
-            ← Back
+            <ArrowUpCircle class="h-4 w-4" />
+            Update to {{ latestVersion }}
+          </Button>
+          <Button
+            variant="outline"
+            class="gap-1.5"
+            @click="isVersionPickerOpen = true"
+          >
+            <Tag class="h-4 w-4" />
+            Choose version
+          </Button>
+          <Button
+            variant="outline"
+            class="gap-1.5 text-destructive hover:border-destructive hover:text-destructive"
+            @click="handleRemove"
+          >
+            <Trash2 class="h-4 w-4" />
+            Remove
           </Button>
         </div>
-        <h1 class="text-3xl font-bold tracking-tight mt-2">
-          {{ packageName }}
-        </h1>
-        <p
-          v-if="registryInfo?.description"
-          class="text-muted-foreground mt-1"
-        >
-          {{ registryInfo.description }}
-        </p>
       </div>
-      <div class="flex flex-wrap gap-2 sm:flex-nowrap sm:shrink-0">
-        <Button
-          v-if="packageData?.hasUpdate"
-          @click="handleUpdate"
+    </div>
+
+    <hr>
+
+    <!-- Version comparison -->
+    <div class="flex flex-wrap items-center gap-x-5 gap-y-2 rounded-lg border bg-card px-4 py-2.5 text-sm">
+      <!-- Installed -->
+      <div class="flex items-center gap-2">
+        <span class="text-xs font-medium uppercase tracking-wide text-muted-foreground">Installed</span>
+        <Skeleton
+          v-if="isPackagesLoading"
+          class="h-5 w-16"
+        />
+        <span
+          v-else
+          class="font-mono font-semibold"
+        >{{ currentVersion || '—' }}</span>
+      </div>
+
+      <ArrowRight
+        v-if="packageData?.hasUpdate"
+        class="h-3.5 w-3.5 shrink-0 text-muted-foreground"
+      />
+
+      <!-- Latest -->
+      <div class="flex items-center gap-2">
+        <span class="text-xs font-medium uppercase tracking-wide text-muted-foreground">Latest</span>
+        <Skeleton
+          v-if="isRegistryLoading && !latestVersion"
+          class="h-5 w-16"
+        />
+        <span
+          v-else
+          class="font-mono font-semibold"
+        >{{ latestVersion || '—' }}</span>
+        <Badge
+          v-if="currentVersion && latestVersion"
+          :variant="badgeVariant"
         >
-          Update to {{ packageData.latest }}
-        </Button>
-        <Button
-          variant="destructive"
-          @click="handleRemove"
+          {{ badgeText }}
+        </Badge>
+      </div>
+
+      <span
+        v-if="health?.lastPublished"
+        class="text-xs text-muted-foreground"
+      >
+        published {{ formatAge(health.lastPublished) }}
+      </span>
+
+      <!-- Up to date marker -->
+      <div
+        v-if="packageData && !packageData.hasUpdate"
+        class="ml-auto hidden items-center gap-1.5 text-xs font-medium text-green-500 sm:flex"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="3"
+          stroke-linecap="round"
+          stroke-linejoin="round"
         >
-          Remove
-        </Button>
+          <path d="M20 6 9 17l-5-5" />
+        </svg>
+        Up to date
       </div>
     </div>
 
-    <!-- Version info -->
-    <div class="grid gap-4 md:grid-cols-3">
-      <Card>
-        <CardHeader class="pb-2">
-          <CardTitle class="text-sm font-medium">
-            Installed Version
-          </CardTitle>
+    <!-- Health + Downloads -->
+    <div class="grid gap-6 lg:grid-cols-3">
+      <!-- Dependency Health -->
+      <Card class="transition-shadow hover:shadow-md">
+        <CardHeader>
+          <CardTitle>Dependency Health</CardTitle>
+          <CardDescription>Maintenance signals from npm</CardDescription>
         </CardHeader>
         <CardContent>
           <Skeleton
-            v-if="packages.isLoading.value"
-            class="h-8 w-20"
+            v-if="isHealthLoading"
+            class="h-60 w-full"
           />
           <div
-            v-else
-            class="text-2xl font-bold"
+            v-else-if="health"
+            class="space-y-4"
           >
-            {{ packageData?.current || '-' }}
-          </div>
-        </CardContent>
-      </Card>
+            <!-- Deprecation warning -->
+            <div
+              v-if="health.isDeprecated"
+              class="flex items-start gap-2.5 rounded-lg border border-destructive/30 bg-destructive/10 p-3 text-sm text-destructive"
+            >
+              <AlertTriangle class="mt-0.5 h-4 w-4 shrink-0" />
+              <span>
+                <strong class="font-semibold">Deprecated.</strong>
+                <span v-if="health.deprecationMessage"> {{ health.deprecationMessage }}</span>
+              </span>
+            </div>
 
-      <Card>
-        <CardHeader class="pb-2">
-          <CardTitle class="text-sm font-medium">
-            Latest Version
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <Skeleton
-            v-if="isRegistryLoading"
-            class="h-8 w-20"
-          />
+            <!-- Gauge -->
+            <div class="flex justify-center py-2">
+              <HealthGauge
+                :score="health.score"
+                :label="health.label"
+              />
+            </div>
+
+            <!-- Stat tiles -->
+            <div class="grid grid-cols-2 gap-2">
+              <div class="rounded-lg border bg-muted/30 p-3 transition-colors hover:bg-muted/50">
+                <div class="flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">
+                  <Calendar class="h-3 w-3" />
+                  Last Published
+                </div>
+                <div class="mt-1.5 text-sm font-bold">
+                  {{ formatAge(health.lastPublished) }}
+                </div>
+                <div
+                  v-if="health.lastPublished"
+                  class="text-[11px] text-muted-foreground"
+                >
+                  {{ new Date(health.lastPublished).toLocaleDateString() }}
+                </div>
+              </div>
+
+              <div class="rounded-lg border bg-muted/30 p-3 transition-colors hover:bg-muted/50">
+                <div class="flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">
+                  <Download class="h-3 w-3" />
+                  Weekly Downloads
+                </div>
+                <div class="mt-1.5 text-sm font-bold">
+                  {{ health.weeklyDownloads !== null ? formatDownloads(health.weeklyDownloads) : '—' }}
+                </div>
+              </div>
+            </div>
+          </div>
           <div
             v-else
-            class="flex items-center gap-2"
+            class="py-12 text-center text-sm text-muted-foreground"
           >
-            <span class="text-2xl font-bold">{{ registryInfo?.version || '-' }}</span>
-            <Badge
-              v-if="packageData?.hasUpdate"
-              :variant="badgeVariant"
-            >
-              {{ badgeText }}
-            </Badge>
+            Health data unavailable.
           </div>
         </CardContent>
       </Card>
 
-      <Card>
-        <CardHeader class="pb-2">
-          <CardTitle class="text-sm font-medium">
-            Type
-          </CardTitle>
+      <!-- Download Trend -->
+      <Card class="transition-shadow hover:shadow-md lg:col-span-2">
+        <CardHeader>
+          <CardTitle>Download Trend</CardTitle>
+          <CardDescription>Weekly npm downloads over the last year</CardDescription>
         </CardHeader>
         <CardContent>
           <Skeleton
-            v-if="packages.isLoading.value"
-            class="h-8 w-24"
+            v-if="isTrendLoading"
+            class="h-64 w-full"
           />
-          <Badge
+          <DownloadsChart
             v-else
-            variant="outline"
-            class="text-lg"
-          >
-            {{ packageData?.type === 'devDependency' ? 'Dev Dependency' : 'Dependency' }}
-          </Badge>
+            :data="downloadTrend ?? []"
+          />
         </CardContent>
       </Card>
     </div>
 
-    <!-- Health metrics -->
-    <Card>
+    <!-- Package Information -->
+    <Card class="transition-shadow hover:shadow-md">
       <CardHeader>
-        <CardTitle>Dependency Health</CardTitle>
-        <CardDescription>Maintenance signals from the npm registry</CardDescription>
+        <CardTitle>Package Information</CardTitle>
+        <CardDescription>Metadata from the npm registry</CardDescription>
       </CardHeader>
       <CardContent>
         <Skeleton
-          v-if="isHealthLoading"
-          class="h-24 w-full"
+          v-if="isRegistryLoading"
+          class="h-32 w-full"
         />
         <div
-          v-else-if="health"
-          class="space-y-4"
+          v-else-if="registryInfo"
+          class="space-y-6"
         >
-          <!-- Deprecated warning -->
-          <div
-            v-if="health.isDeprecated"
-            class="flex items-start gap-2 p-3 rounded-md bg-destructive/10 text-destructive text-sm"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              class="mt-0.5 shrink-0"
+          <div class="grid gap-x-6 gap-y-4 sm:grid-cols-2">
+            <!-- License -->
+            <div
+              v-if="registryInfo.license"
+              class="flex items-start gap-3"
             >
-              <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" />
-              <path d="M12 9v4" /><path d="M12 17h.01" />
-            </svg>
-            <span>
-              <strong>Deprecated</strong>
-              <span v-if="health.deprecationMessage"> — {{ health.deprecationMessage }}</span>
-            </span>
-          </div>
-
-          <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-            <!-- Score -->
-            <div>
-              <div class="text-sm text-muted-foreground mb-1">
-                Health Score
+              <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-md border bg-muted/40">
+                <Scale class="h-4 w-4 text-muted-foreground" />
               </div>
-              <div class="flex items-center gap-2">
-                <span
-                  class="text-2xl font-bold"
-                  :class="healthColor"
-                >{{ health.score }}</span>
-                <span class="text-muted-foreground text-sm">/100</span>
+              <div class="min-w-0">
+                <div class="text-xs text-muted-foreground">
+                  License
+                </div>
+                <div class="truncate font-medium">
+                  {{ registryInfo.license }}
+                </div>
               </div>
             </div>
 
-            <!-- Status -->
-            <div>
-              <div class="text-sm text-muted-foreground mb-1">
-                Status
-              </div>
-              <span
-                class="font-medium capitalize"
-                :class="healthColor"
-              >{{ health.label }}</span>
-            </div>
-
-            <!-- Last published -->
-            <div>
-              <div class="text-sm text-muted-foreground mb-1">
-                Last Published
+            <!-- Author -->
+            <div
+              v-if="authorName"
+              class="flex items-start gap-3"
+            >
+              <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-md border bg-muted/40">
+                <User class="h-4 w-4 text-muted-foreground" />
               </div>
-              <div class="font-medium">
-                {{ formatAge(health.lastPublished) }}
-              </div>
-              <div
-                v-if="health.lastPublished"
-                class="text-xs text-muted-foreground"
-              >
-                {{ new Date(health.lastPublished).toLocaleDateString() }}
+              <div class="min-w-0">
+                <div class="text-xs text-muted-foreground">
+                  Author
+                </div>
+                <div class="truncate font-medium">
+                  {{ authorName }}
+                </div>
               </div>
             </div>
 
             <!-- Weekly downloads -->
-            <div>
-              <div class="text-sm text-muted-foreground mb-1">
-                Weekly Downloads
-              </div>
-              <div class="font-medium">
-                {{ health.weeklyDownloads !== null ? formatDownloads(health.weeklyDownloads) : '—' }}
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          v-else
-          class="text-muted-foreground text-sm"
-        >
-          Health data unavailable.
-        </div>
-      </CardContent>
-    </Card>
-
-    <!-- Registry info -->
-    <Card>
-      <CardHeader>
-        <CardTitle>Package Information</CardTitle>
-        <CardDescription>Data from npm registry</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <Skeleton
-          v-if="isRegistryLoading"
-          class="h-32 w-full"
-        />
-        <div
-          v-else-if="registryInfo"
-          class="space-y-4"
-        >
-          <div class="grid gap-4 md:grid-cols-2">
-            <div v-if="registryInfo.license">
-              <div class="text-sm text-muted-foreground">
-                License
+            <div
+              v-if="registryInfo.downloads"
+              class="flex items-start gap-3"
+            >
+              <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-md border bg-muted/40">
+                <Download class="h-4 w-4 text-muted-foreground" />
               </div>
-              <div class="font-medium">
-                {{ registryInfo.license }}
+              <div class="min-w-0">
+                <div class="text-xs text-muted-foreground">
+                  Weekly Downloads
+                </div>
+                <div class="truncate font-medium">
+                  {{ formatDownloads(registryInfo.downloads.weekly) }}
+                </div>
               </div>
             </div>
 
-            <div v-if="registryInfo.downloads">
-              <div class="text-sm text-muted-foreground">
-                Weekly Downloads
+            <!-- Homepage -->
+            <div
+              v-if="registryInfo.homepage"
+              class="flex items-start gap-3"
+            >
+              <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-md border bg-muted/40">
+                <Globe class="h-4 w-4 text-muted-foreground" />
               </div>
-              <div class="font-medium">
-                {{ formatDownloads(registryInfo.downloads.weekly) }}
+              <div class="min-w-0">
+                <div class="text-xs text-muted-foreground">
+                  Homepage
+                </div>
+                <a
+                  :href="registryInfo.homepage"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="block truncate font-medium text-primary hover:underline"
+                >
+                  {{ registryInfo.homepage }}
+                </a>
               </div>
             </div>
 
-            <div v-if="registryInfo.homepage">
-              <div class="text-sm text-muted-foreground">
-                Homepage
+            <!-- Repository -->
+            <div
+              v-if="repoUrl"
+              class="flex items-start gap-3"
+            >
+              <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-md border bg-muted/40">
+                <GitBranch class="h-4 w-4 text-muted-foreground" />
               </div>
-              <a
-                :href="registryInfo.homepage"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="font-medium text-primary hover:underline"
-              >
-                {{ registryInfo.homepage }}
-              </a>
-            </div>
-
-            <div v-if="getRepoUrl(registryInfo.repository)">
-              <div class="text-sm text-muted-foreground">
-                Repository
+              <div class="min-w-0">
+                <div class="text-xs text-muted-foreground">
+                  Repository
+                </div>
+                <a
+                  :href="repoUrl"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="block truncate font-medium text-primary hover:underline"
+                >
+                  {{ repoUrl }}
+                </a>
               </div>
-              <a
-                :href="getRepoUrl(registryInfo.repository)!"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="font-medium text-primary hover:underline"
-              >
-                {{ getRepoUrl(registryInfo.repository) }}
-              </a>
             </div>
           </div>
 
+          <!-- Keywords -->
           <div v-if="registryInfo.keywords?.length">
-            <div class="text-sm text-muted-foreground mb-2">
+            <div class="mb-2 text-xs text-muted-foreground">
               Keywords
             </div>
-            <div class="flex flex-wrap gap-1">
+            <div class="flex flex-wrap gap-1.5">
               <Badge
-                v-for="keyword in registryInfo.keywords.slice(0, 10)"
+                v-for="keyword in registryInfo.keywords.slice(0, 12)"
                 :key="keyword"
                 variant="secondary"
               >
@@ -374,13 +511,23 @@ function formatAge(dateStr: string | null | undefined): string {
         </div>
         <div
           v-else
-          class="text-muted-foreground"
+          class="py-12 text-center text-sm text-muted-foreground"
         >
-          Unable to load package information from registry.
+          Unable to load package information from the registry.
         </div>
       </CardContent>
     </Card>
 
+    <!-- Dialogs -->
+    <VersionPickerDialog
+      :open="isVersionPickerOpen"
+      :package-name="packageName"
+      :current-version="currentVersion"
+      :latest-version="latestVersion"
+      @update:open="isVersionPickerOpen = $event"
+      @confirm="handleChooseVersion"
+    />
+
     <ConfirmDialog
       :open="isRemoveDialogOpen"
       title="Remove Package"
diff --git a/src/server/index.ts b/src/server/index.ts
index 202c5d0..74d99b0 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -5,7 +5,7 @@ import { fileURLToPath } from 'url'
 const __dirname = dirname(fileURLToPath(import.meta.url))
 
 const PORT = parseInt(process.env.PORT || '3001', 10)
-const projectPath = process.env.PROJECT_PATH || process.cwd()
+const projectPath = process.env.PROJECT_PATH || join(process.cwd(), 'test-monorepo')
 const clientDistPath = join(__dirname, '../client')
 
 const app = createServer(projectPath, clientDistPath, PORT)
diff --git a/src/server/routes/packages.ts b/src/server/routes/packages.ts
index 3545f49..73f8fec 100644
--- a/src/server/routes/packages.ts
+++ b/src/server/routes/packages.ts
@@ -7,6 +7,7 @@ import {
   getUpdateCommand,
   getUpdateAllCommand,
 } from '../services/packageManager.js'
+import { resolveWorkspacePath } from '../services/workspaces.js'
 import { runCommand } from '../services/operationRunner.js'
 import type { UpdatePackageRequest, Package } from '@shared/types'
 
@@ -14,10 +15,19 @@ export function createPackagesRouter(projectPath: string): Router {
   const router = Router()
   const packageManager = detectPackageManager(projectPath)
 
+  // Resolves the target workspace directory from the request. The workspace
+  // name may arrive as a query param (GET/DELETE) or in the body (POST/PATCH).
+  function targetPath(req: Pick<Request, 'query' | 'body'>): string {
+    const fromQuery = req.query.workspace
+    const fromBody = (req.body as { workspace?: unknown } | undefined)?.workspace
+    const name = typeof fromQuery === 'string' ? fromQuery : typeof fromBody === 'string' ? fromBody : undefined
+    return resolveWorkspacePath(projectPath, name)
+  }
+
   // GET /api/packages - List all packages with latest versions
-  router.get('/', async (_req: Request, res: Response) => {
+  router.get('/', async (req: Request, res: Response) => {
     try {
-      const packages = getPackages(projectPath)
+      const packages = getPackages(targetPath(req))
 
       // Fetch latest versions in parallel
       const packagesWithVersions = await Promise.all(
@@ -46,9 +56,9 @@ export function createPackagesRouter(projectPath: string): Router {
   })
 
   // GET /api/packages/smart-data - Batch enriched metadata for smart filters
-  router.get('/smart-data', async (_req: Request, res: Response) => {
+  router.get('/smart-data', async (req: Request, res: Response) => {
     try {
-      const packages = getPackages(projectPath)
+      const packages = getPackages(targetPath(req))
       const smartData = await Promise.all(
         packages.map(async (pkg) => {
           const meta = await getSmartMetadata(pkg.name)
@@ -66,7 +76,7 @@ export function createPackagesRouter(projectPath: string): Router {
   router.get('/:name', async (req: Request<{ name: string }>, res: Response) => {
     try {
       const { name } = req.params
-      const packages = getPackages(projectPath)
+      const packages = getPackages(targetPath(req))
       const pkg = packages.find((p) => p.name === name)
 
       if (!pkg) {
@@ -99,9 +109,10 @@ export function createPackagesRouter(projectPath: string): Router {
   })
 
   // POST /api/packages/update-all - Update all outdated packages
-  router.post('/update-all', async (_req: Request, res: Response) => {
+  router.post('/update-all', async (req: Request, res: Response) => {
     try {
-      const packages = getPackages(projectPath)
+      const cwd = targetPath(req)
+      const packages = getPackages(cwd)
 
       const packagesWithVersions = await Promise.all(
         packages.map(async (pkg) => {
@@ -117,7 +128,7 @@ export function createPackagesRouter(projectPath: string): Router {
         return
       }
 
-      const operationId = runCommand(getUpdateAllCommand(packageManager, outdated), projectPath, 'update', undefined, undefined)
+      const operationId = runCommand(getUpdateAllCommand(packageManager, outdated), cwd, 'update', undefined, undefined)
 
       res.json({ success: true, data: { operationId } })
     } catch (error) {
@@ -133,7 +144,7 @@ export function createPackagesRouter(projectPath: string): Router {
 
       // Handle scoped packages - the name might be URL encoded
       const packageName = decodeURIComponent(name)
-      const operationId = runCommand(getUninstallCommand(packageManager, packageName), projectPath, 'remove', packageName)
+      const operationId = runCommand(getUninstallCommand(packageManager, packageName), targetPath(req), 'remove', packageName)
 
       res.json({
         success: true,
@@ -160,8 +171,9 @@ export function createPackagesRouter(projectPath: string): Router {
       }
 
       const packageName = decodeURIComponent(name)
-      const fromVersion = getPackages(projectPath).find((p) => p.name === packageName)?.current
-      const operationId = runCommand(getUpdateCommand(packageManager, packageName, version), projectPath, 'update', packageName, fromVersion)
+      const cwd = targetPath(req)
+      const fromVersion = getPackages(cwd).find((p) => p.name === packageName)?.current
+      const operationId = runCommand(getUpdateCommand(packageManager, packageName, version), cwd, 'update', packageName, fromVersion)
 
       res.json({
         success: true,
diff --git a/src/server/routes/project.ts b/src/server/routes/project.ts
index 7c2cf51..1aad6df 100644
--- a/src/server/routes/project.ts
+++ b/src/server/routes/project.ts
@@ -1,9 +1,14 @@
 import { Router, type Request, type Response } from 'express'
 import { readdirSync, lstatSync, existsSync } from 'fs'
 import { join } from 'path'
-import { getProjectInfo } from '../services/packageJson.js'
+import { getProjectInfo, readPackageJson } from '../services/packageJson.js'
 import { detectPackageManager } from '../services/packageManager.js'
-import type { ProjectInfo } from '@shared/types'
+import { detectWorkspaces } from '../services/workspaces.js'
+import type { DuplicateDependency, ProjectInfo } from '@shared/types'
+
+function cleanVersion(version: string): string {
+  return version.replace(/^[\^~>=<\s]+/, '').trim()
+}
 
 interface InstallSizeCache {
   data: { bytes: number; fileCount: number }
@@ -44,12 +49,15 @@ export function createProjectRouter(projectPath: string): Router {
     try {
       const { name, version } = getProjectInfo(projectPath)
       const packageManager = detectPackageManager(projectPath)
+      const workspaces = detectWorkspaces(projectPath)
 
       const projectInfo: ProjectInfo = {
         name,
         version,
         path: projectPath,
         packageManager,
+        isMonorepo: workspaces.length > 0,
+        workspaces,
       }
 
       res.json({
@@ -81,5 +89,53 @@ export function createProjectRouter(projectPath: string): Router {
     res.json({ success: true, data: result })
   })
 
+  // GET /api/project/duplicates - Packages installed at multiple versions across workspaces
+  router.get('/duplicates', (_req: Request, res: Response) => {
+    try {
+      const workspaces = detectWorkspaces(projectPath)
+      if (workspaces.length === 0) {
+        return res.json({ success: true, data: [] })
+      }
+
+      // packageName -> version -> set of workspace names
+      const index = new Map<string, Map<string, Set<string>>>()
+
+      for (const ws of workspaces) {
+        let pkg
+        try {
+          pkg = readPackageJson(join(projectPath, ws.relativePath))
+        } catch {
+          continue
+        }
+        const deps = { ...pkg.dependencies, ...pkg.devDependencies }
+        for (const [name, rawVersion] of Object.entries(deps)) {
+          const version = cleanVersion(rawVersion)
+          if (!version) continue
+          if (!index.has(name)) index.set(name, new Map())
+          const versionMap = index.get(name)!
+          if (!versionMap.has(version)) versionMap.set(version, new Set())
+          versionMap.get(version)!.add(ws.name)
+        }
+      }
+
+      const duplicates: DuplicateDependency[] = []
+      for (const [name, versionMap] of index) {
+        if (versionMap.size < 2) continue
+        duplicates.push({
+          name,
+          versions: [...versionMap.entries()]
+            .map(([version, wsSet]) => ({ version, workspaces: [...wsSet].sort() }))
+            .sort((a, b) => b.version.localeCompare(a.version)),
+        })
+      }
+      duplicates.sort((a, b) => a.name.localeCompare(b.name))
+
+      res.json({ success: true, data: duplicates })
+    } catch (error) {
+      console.error('Error computing duplicates:', error)
+      res.status(500).json({ success: false, error: 'Failed to compute duplicates' })
+    }
+  })
+
   return router
 }
diff --git a/src/server/routes/registry.ts b/src/server/routes/registry.ts
index 0a343d4..f4e1d80 100644
--- a/src/server/routes/registry.ts
+++ b/src/server/routes/registry.ts
@@ -1,5 +1,5 @@
 import { Router, type Request, type Response } from 'express'
-import { getPackageInfo, getDownloadCounts, getPackageVersions } from '../services/registryClient.js'
+import { getPackageInfo, getDownloadCounts, getDownloadRange, getPackageVersions } from '../services/registryClient.js'
 import { getChangelog } from '../services/changelog.js'
 import { getHealthMetrics } from '../services/health.js'
 
@@ -39,6 +39,18 @@ export function createRegistryRouter(): Router {
     }
   })
 
+  // GET /api/registry/:name/downloads - Daily download history for the last year
+  router.get('/:name/downloads', async (req: Request<{ name: string }>, res: Response) => {
+    try {
+      const packageName = decodeURIComponent(req.params.name)
+      const downloads = await getDownloadRange(packageName)
+      res.json({ success: true, data: downloads ?? [] })
+    } catch (error) {
+      console.error('Error getting download trend:', error)
+      res.status(500).json({ success: false, error: 'Failed to get download trend' })
+    }
+  })
+
   // GET /api/registry/:name/health
   router.get('/:name/health', async (req: Request<{ name: string }>, res: Response) => {
     try {
diff --git a/src/server/services/registryClient.ts b/src/server/services/registryClient.ts
index 933fd9f..0dd02e5 100644
--- a/src/server/services/registryClient.ts
+++ b/src/server/services/registryClient.ts
@@ -1,5 +1,5 @@
 import semver from 'semver'
-import type { RegistryInfo } from '@shared/types'
+import type { RegistryInfo, DownloadDataPoint } from '@shared/types'
 
 const NPM_REGISTRY = 'https://registry.npmjs.org'
 
@@ -141,6 +141,40 @@ export async function getDownloadCounts(packageName: string): Promise<{ weekly:
   }
 }
 
+// Cache for daily download history lookups
+const downloadRangeCache = new Map<string, { data: DownloadDataPoint[]; timestamp: number }>()
+const DOWNLOAD_RANGE_TTL = 6 * 60 * 60 * 1000 // 6 hours
+
+/**
+ * Fetches the daily download history for the last year from the npm downloads API.
+ * Returns a chronological array of { day, downloads }, or null if unavailable.
+ */
+export async function getDownloadRange(packageName: string): Promise<DownloadDataPoint[] | null> {
+  const cached = downloadRangeCache.get(packageName)
+  if (cached && Date.now() - cached.timestamp < DOWNLOAD_RANGE_TTL) {
+    return cached.data
+  }
+
+  try {
+    const encodedName = encodeURIComponent(packageName)
+    const response = await fetch(
+      `https://api.npmjs.org/downloads/range/last-year/${encodedName}`,
+      { signal: AbortSignal.timeout(8000) }
+    )
+
+    if (!response.ok) return null
+
+    const data = (await response.json()) as { downloads?: DownloadDataPoint[] }
+    const downloads = data.downloads ?? []
+
+    downloadRangeCache.set(packageName, { data: downloads, timestamp: Date.now() })
+    return downloads
+  } catch (error) {
+    console.error(`Failed to fetch download range for ${packageName}:`, error)
+    return null
+  }
+}
+
 // Cache for all-versions lookups
 const versionsCache = new Map<string, { versions: string[]; timestamp: number }>()
 
diff --git a/src/server/services/workspaces.ts b/src/server/services/workspaces.ts
new file mode 100644
index 0000000..6d9226a
--- /dev/null
+++ b/src/server/services/workspaces.ts
@@ -0,0 +1,214 @@
+import { existsSync, readFileSync, readdirSync, statSync } from 'fs'
+import { basename, join } from 'path'
+import type { WorkspaceInfo } from '@shared/types'
+
+interface RootPackageJson {
+  name?: string
+  workspaces?: string[] | { packages?: string[] }
+}
+
+interface LernaJson {
+  packages?: string[]
+}
+
+function readJson<T>(path: string): T | null {
+  try {
+    return JSON.parse(readFileSync(path, 'utf-8')) as T
+  } catch {
+    return null
+  }
+}
+
+function isDirectory(path: string): boolean {
+  try {
+    return statSync(path).isDirectory()
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Minimal parser for the `packages:` list in a pnpm-workspace.yaml.
+ * Handles both the block list form and an inline array.
+ */
+function parsePnpmWorkspaceYaml(content: string): string[] {
+  const patterns: string[] = []
+  const lines = content.split(/\r?\n/)
+  let inPackages = false
+
+  for (const raw of lines) {
+    const line = raw.replace(/#.*$/, '')
+
+    const inline = line.match(/^packages:\s*\[(.*)\]\s*$/)
+    if (inline) {
+      for (const item of inline[1].split(',')) {
+        const cleaned = item.trim().replace(/^['"]|['"]$/g, '')
+        if (cleaned) patterns.push(cleaned)
+      }
+      return patterns
+    }
+
+    if (/^packages:\s*$/.test(line)) {
+      inPackages = true
+      continue
+    }
+
+    if (inPackages) {
+      const item = line.match(/^\s*-\s*['"]?([^'"]+?)['"]?\s*$/)
+      if (item) {
+        patterns.push(item[1])
+        continue
+      }
+      if (/^\S/.test(line)) break // a new top-level key ends the list
+    }
+  }
+
+  return patterns
+}
+
+/**
+ * Lists immediate subdirectories of `dir`, skipping node_modules and dotfolders.
+ */
+function listSubdirs(dir: string): string[] {
+  try {
+    return readdirSync(dir).filter((entry) => {
+      if (entry === 'node_modules' || entry.startsWith('.')) return false
+      return isDirectory(join(dir, entry))
+    })
+  } catch {
+    return []
+  }
+}
+
+/**
+ * Recursively collects directories under `dir` (relative to `rootPath`),
+ * skipping node_modules and dotfolders. Used to expand `**` glob patterns.
+ */
+function walkDirs(rootPath: string, relDir: string, acc: string[]): void {
+  for (const entry of listSubdirs(join(rootPath, relDir))) {
+    const rel = relDir ? `${relDir}/${entry}` : entry
+    acc.push(rel)
+    walkDirs(rootPath, rel, acc)
+  }
+}
+
+/**
+ * Expands a single workspace glob pattern into relative directory paths.
+ * Supports exact paths, `*` (one level) and `**` (any depth).
+ */
+function expandPattern(rootPath: string, pattern: string): string[] {
+  const normalized = pattern.replace(/\/+$/, '')
+
+  if (!normalized.includes('*')) {
+    return isDirectory(join(rootPath, normalized)) ? [normalized] : []
+  }
+
+  let current = ['']
+  for (const part of normalized.split('/')) {
+    const next: string[] = []
+    for (const dir of current) {
+      if (part === '*') {
+        for (const sub of listSubdirs(join(rootPath, dir))) {
+          next.push(dir ? `${dir}/${sub}` : sub)
+        }
+      } else if (part === '**') {
+        next.push(dir)
+        walkDirs(rootPath, dir, next)
+      } else {
+        const candidate = dir ? `${dir}/${part}` : part
+        if (isDirectory(join(rootPath, candidate))) next.push(candidate)
+      }
+    }
+    current = next
+  }
+  return current
+}
+
+function collectPatterns(projectPath: string): string[] {
+  const patterns: string[] = []
+
+  const rootPkg = readJson<RootPackageJson>(join(projectPath, 'package.json'))
+  if (rootPkg?.workspaces) {
+    const ws = Array.isArray(rootPkg.workspaces)
+      ? rootPkg.workspaces
+      : rootPkg.workspaces.packages ?? []
+    patterns.push(...ws)
+  }
+
+  const pnpmYamlPath = join(projectPath, 'pnpm-workspace.yaml')
+  if (existsSync(pnpmYamlPath)) {
+    try {
+      patterns.push(...parsePnpmWorkspaceYaml(readFileSync(pnpmYamlPath, 'utf-8')))
+    } catch {
+      /* ignore unreadable yaml */
+    }
+  }
+
+  const lerna = readJson<LernaJson>(join(projectPath, 'lerna.json'))
+  if (lerna) {
+    patterns.push(...(lerna.packages ?? ['packages/*']))
+  }
+
+  return patterns
+}
+
+/**
+ * Detects workspace packages in a project. Returns an empty array when the
+ * project is not a monorepo. When it is, the first entry is always the root.
+ */
+export function detectWorkspaces(projectPath: string): WorkspaceInfo[] {
+  const patterns = collectPatterns(projectPath)
+  if (patterns.length === 0) return []
+
+  const includes = patterns.filter((p) => !p.startsWith('!'))
+  const excludes = patterns
+    .filter((p) => p.startsWith('!'))
+    .flatMap((p) => expandPattern(projectPath, p.slice(1)))
+  const excludeSet = new Set(excludes)
+
+  const seen = new Set<string>()
+  const children: WorkspaceInfo[] = []
+
+  for (const pattern of includes) {
+    for (const relPath of expandPattern(projectPath, pattern)) {
+      if (seen.has(relPath) || excludeSet.has(relPath)) continue
+      if (relPath.split('/').includes('node_modules')) continue
+
+      const pkg = readJson<RootPackageJson>(join(projectPath, relPath, 'package.json'))
+      if (!pkg) continue
+
+      seen.add(relPath)
+      children.push({
+        name: pkg.name || relPath,
+        relativePath: relPath,
+        isRoot: false,
+      })
+    }
+  }
+
+  if (children.length === 0) return []
+
+  children.sort((a, b) => a.name.localeCompare(b.name))
+
+  const rootPkg = readJson<RootPackageJson>(join(projectPath, 'package.json'))
+  const root: WorkspaceInfo = {
+    name: rootPkg?.name || basename(projectPath),
+    relativePath: '.',
+    isRoot: true,
+  }
+
+  return [root, ...children]
+}
+
+/**
+ * Resolves a workspace name to its absolute directory path. Falls back to the
+ * project root when no name is given or the name does not match a workspace.
+ */
+export function resolveWorkspacePath(projectPath: string, workspaceName?: string): string {
+  if (!workspaceName) return projectPath
+
+  const workspace = detectWorkspaces(projectPath).find(
+    (ws) => !ws.isRoot && ws.name === workspaceName
+  )
+  return workspace ? join(projectPath, workspace.relativePath) : projectPath
+}
diff --git a/src/shared/types.ts b/src/shared/types.ts
index 1460a4f..24684cc 100644
--- a/src/shared/types.ts
+++ b/src/shared/types.ts
@@ -37,10 +37,24 @@ export interface ProjectInfo {
   version: string
   path: string
   packageManager: PackageManager
+  isMonorepo: boolean
+  workspaces: WorkspaceInfo[]
 }
 
 export type PackageManager = 'npm' | 'yarn' | 'pnpm'
 
+// Workspace types
+export interface WorkspaceInfo {
+  name: string
+  relativePath: string // '.' for the repo root
+  isRoot: boolean
+}
+
+export interface DuplicateDependency {
+  name: string
+  versions: Array<{ version: string; workspaces: string[] }>
+}
+
 // Operation types
 export interface Operation {
   id: string
@@ -197,6 +211,12 @@ export interface HealthMetrics {
   deprecationMessage?: string
 }
 
+// Download trend types
+export interface DownloadDataPoint {
+  day: string // YYYY-MM-DD
+  downloads: number
+}
+
 // Audit log types
 export interface AuditLogEntry {
   id: string
diff --git a/test/server/workspaces.test.ts b/test/server/workspaces.test.ts
new file mode 100644
index 0000000..68461f6
--- /dev/null
+++ b/test/server/workspaces.test.ts
@@ -0,0 +1,113 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest'
+import { mkdtempSync, mkdirSync, writeFileSync, rmSync } from 'fs'
+import { tmpdir } from 'os'
+import { join } from 'path'
+import { detectWorkspaces, resolveWorkspacePath } from '../../src/server/services/workspaces.js'
+
+let dir: string
+
+beforeEach(() => {
+  dir = mkdtempSync(join(tmpdir(), 'packy-ws-'))
+})
+
+afterEach(() => {
+  rmSync(dir, { recursive: true, force: true })
+})
+
+function writePkg(relPath: string, content: Record<string, unknown>): void {
+  const full = join(dir, relPath)
+  mkdirSync(full, { recursive: true })
+  writeFileSync(join(full, 'package.json'), JSON.stringify(content))
+}
+
+function writeFile(relPath: string, content: string): void {
+  writeFileSync(join(dir, relPath), content)
+}
+
+describe('detectWorkspaces', () => {
+  it('returns empty array for a non-monorepo project', () => {
+    writePkg('.', { name: 'plain-app', version: '1.0.0' })
+    expect(detectWorkspaces(dir)).toEqual([])
+  })
+
+  it('detects npm workspaces declared as an array', () => {
+    writePkg('.', { name: 'root', workspaces: ['packages/*'] })
+    writePkg('packages/a', { name: '@scope/a' })
+    writePkg('packages/b', { name: '@scope/b' })
+
+    const result = detectWorkspaces(dir)
+    expect(result.map((w) => w.name)).toEqual(['root', '@scope/a', '@scope/b'])
+    expect(result[0].isRoot).toBe(true)
+    expect(result[0].relativePath).toBe('.')
+    expect(result[1]).toMatchObject({ name: '@scope/a', relativePath: 'packages/a', isRoot: false })
+  })
+
+  it('detects npm workspaces declared as an object', () => {
+    writePkg('.', { name: 'root', workspaces: { packages: ['apps/*'] } })
+    writePkg('apps/web', { name: 'web' })
+
+    const result = detectWorkspaces(dir)
+    expect(result.map((w) => w.name)).toEqual(['root', 'web'])
+  })
+
+  it('detects pnpm workspaces from pnpm-workspace.yaml', () => {
+    writePkg('.', { name: 'root' })
+    writeFile('pnpm-workspace.yaml', "packages:\n  - 'packages/*'\n  - 'tooling/*'\n")
+    writePkg('packages/core', { name: 'core' })
+    writePkg('tooling/eslint', { name: 'eslint-config' })
+
+    const result = detectWorkspaces(dir)
+    expect(result.map((w) => w.name)).toEqual(['root', 'core', 'eslint-config'])
+  })
+
+  it('detects lerna workspaces from lerna.json', () => {
+    writePkg('.', { name: 'root' })
+    writeFile('lerna.json', JSON.stringify({ packages: ['modules/*'] }))
+    writePkg('modules/one', { name: 'mod-one' })
+
+    const result = detectWorkspaces(dir)
+    expect(result.map((w) => w.name)).toEqual(['root', 'mod-one'])
+  })
+
+  it('honors negated exclude patterns', () => {
+    writePkg('.', { name: 'root', workspaces: ['packages/*', '!packages/internal'] })
+    writePkg('packages/a', { name: 'a' })
+    writePkg('packages/internal', { name: 'internal' })
+
+    const result = detectWorkspaces(dir)
+    expect(result.map((w) => w.name)).toEqual(['root', 'a'])
+  })
+
+  it('ignores glob directories without a package.json', () => {
+    writePkg('.', { name: 'root', workspaces: ['packages/*'] })
+    writePkg('packages/a', { name: 'a' })
+    mkdirSync(join(dir, 'packages/not-a-package'), { recursive: true })
+
+    const result = detectWorkspaces(dir)
+    expect(result.map((w) => w.name)).toEqual(['root', 'a'])
+  })
+
+  it('returns empty array when patterns match no real packages', () => {
+    writePkg('.', { name: 'root', workspaces: ['packages/*'] })
+    expect(detectWorkspaces(dir)).toEqual([])
+  })
+})
+
+describe('resolveWorkspacePath', () => {
+  beforeEach(() => {
+    writePkg('.', { name: 'root', workspaces: ['packages/*'] })
+    writePkg('packages/a', { name: '@scope/a' })
+  })
+
+  it('resolves a workspace name to its directory', () => {
+    expect(resolveWorkspacePath(dir, '@scope/a')).toBe(join(dir, 'packages/a'))
+  })
+
+  it('falls back to the project root when no name is given', () => {
+    expect(resolveWorkspacePath(dir)).toBe(dir)
+  })
+
+  it('falls back to the project root for an unknown workspace name', () => {
+    expect(resolveWorkspacePath(dir, 'does-not-exist')).toBe(dir)
+  })
+})