before claude

webui/src/assets/stores/aliexpress.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <rect width="64" height="64" rx="12" fill="#1f1f1f" />
+  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="#ebdbb2" font-family="Space Mono, monospace" font-size="20">AE</text>
+</svg>

webui/src/assets/stores/amazon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <rect width="64" height="64" rx="12" fill="#1f1f1f" />
+  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="#ebdbb2" font-family="Space Mono, monospace" font-size="20">AM</text>
+</svg>

webui/src/assets/stores/backmarket.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <rect width="64" height="64" rx="12" fill="#1f1f1f" />
+  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="#ebdbb2" font-family="Space Mono, monospace" font-size="20">BM</text>
+</svg>

webui/src/assets/stores/cdiscount.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <rect width="64" height="64" rx="12" fill="#1f1f1f" />
+  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="#ebdbb2" font-family="Space Mono, monospace" font-size="20">CD</text>
+</svg>

webui/src/components/MiniLineChart.vue

@@ -0,0 +1,280 @@
+<script setup lang="ts">
+import { computed, PropType } from "vue";
+
+const props = defineProps({
+  points: {
+    type: Array as PropType<Array<{ t: number | string; v: number }>>,
+    default: () => [],
+  },
+  width: {
+    type: Number,
+    default: 280,
+  },
+  height: {
+    type: Number,
+    default: 140,
+  },
+  yTicks: {
+    type: Number,
+    default: 4,
+  },
+  xTicks: {
+    type: Number,
+    default: 4,
+  },
+  formatY: {
+    type: Function as PropType<(value: number) => string>,
+    default: (value: number) => new Intl.NumberFormat("fr-FR", { style: "currency", currency: "EUR", maximumFractionDigits: 0 }).format(value),
+  },
+  formatX: {
+    type: Function as PropType<(value: number | string) => string>,
+    default: (value: number | string) => String(value),
+  },
+});
+
+const margins = {
+  left: 44,
+  right: 8,
+  top: 8,
+  bottom: 22,
+};
+
+const validPoints = computed(() =>
+  props.points
+    .map((item) => {
+      const value = Number(item.v);
+      return {
+        t: item.t,
+        v: Number.isFinite(value) ? value : NaN,
+      };
+    })
+    .filter((item) => Number.isFinite(item.v))
+);
+
+const hasTimestamp = computed(() => {
+  return validPoints.value.every((item) => {
+    if (typeof item.t === "number") {
+      return true;
+    }
+    const parsed = Date.parse(String(item.t));
+    return !Number.isNaN(parsed);
+  });
+});
+
+const timestamps = computed(() =>
+  validPoints.value.map((item) => {
+    if (typeof item.t === "number") {
+      return item.t;
+    }
+    const parsed = Date.parse(String(item.t));
+    return Number.isNaN(parsed) ? null : parsed;
+  })
+);
+
+const yBounds = computed(() => {
+  if (!validPoints.value.length) {
+    return { min: 0, max: 0 };
+  }
+  const values = validPoints.value.map((item) => item.v);
+  const rawMin = Math.min(...values);
+  const rawMax = Math.max(...values);
+  const delta = Math.max(rawMax - rawMin, 1);
+  const pad = delta * 0.05;
+  return {
+    min: rawMin - pad,
+    max: rawMax + pad,
+  };
+});
+
+const chartDimensions = computed(() => ({
+  width: props.width - margins.left - margins.right,
+  height: props.height - margins.top - margins.bottom,
+}));
+
+const chartPoints = computed(() => {
+  const points = validPoints.value;
+  if (points.length === 0) {
+    return [];
+  }
+  const { min, max } = yBounds.value;
+  const delta = max - min || 1;
+  const { width: chartWidth, height: chartHeight } = chartDimensions.value;
+  const timeRange =
+    hasTimestamp.value && timestamps.value.some((t) => t !== null)
+      ? (timestamps.value as number[]).reduce(
+          (acc, cur) => {
+            if (cur === null) {
+              return acc;
+            }
+            acc.min = acc.min === null ? cur : Math.min(acc.min, cur);
+            acc.max = acc.max === null ? cur : Math.max(acc.max, cur);
+            return acc;
+          },
+          { min: null as number | null, max: null as number | null }
+        )
+      : { min: null, max: null };
+  const times = (timestamps.value as Array<number | null>).map((value, index) => {
+    if (hasTimestamp.value && value !== null && timeRange.min !== null && timeRange.max !== null) {
+      const range = Math.max(timeRange.max - timeRange.min, 1);
+      return (value - timeRange.min) / range;
+    }
+    return points.length > 1 ? index / (points.length - 1) : 0;
+  });
+
+  return points.map((point, index) => {
+    const x = margins.left + chartWidth * times[index];
+    const normalizedY = 1 - (point.v - min) / delta;
+    const y = margins.top + chartHeight * normalizedY;
+    return { x, y, value: point.v, raw: point.t };
+  });
+});
+
+const hasPoints = computed(() => chartPoints.value.length > 0);
+
+const linePoints = computed(() => {
+  if (!chartPoints.value.length) {
+    return [];
+  }
+  if (chartPoints.value.length === 1) {
+    const point = chartPoints.value[0];
+    const endX = margins.left + chartDimensions.value.width;
+    return [
+      { x: margins.left, y: point.y },
+      { x: endX, y: point.y },
+    ];
+  }
+  return chartPoints.value;
+});
+
+const polylinePoints = computed(() => linePoints.value.map((point) => `${point.x},${point.y}`).join(" "));
+
+const yTickValues = computed(() => {
+  const count = Math.max(2, props.yTicks);
+  const { min, max } = yBounds.value;
+  const step = (max - min) / (count - 1 || 1);
+  return Array.from({ length: count }, (_, index) => ({
+    value: min + step * index,
+    position: margins.top + chartDimensions.value.height * (1 - (min + step * index - min) / (max - min || 1)),
+  }));
+});
+
+const xTickIndices = computed(() => {
+  const points = chartPoints.value;
+  const count = Math.max(2, Math.min(points.length, props.xTicks));
+  if (!points.length) {
+    return [];
+  }
+  return Array.from({ length: count }, (_, index) => {
+    const idx = Math.round((points.length - 1) * (index / (count - 1 || 1)));
+    return points[idx];
+  });
+});
+
+const xLabels = computed(() => {
+  return xTickIndices.value.map((point) => ({
+    label: props.formatX(point.raw),
+    x: point.x,
+  }));
+});
+
+const formattedYTicks = computed(() =>
+  yTickValues.value.map((tick) => ({
+    label: props.formatY(tick.value),
+    y: tick.position,
+  }))
+);
+
+const placeholderLabel = computed(() => "");
+</script>
+
+<template>
+  <div class="mini-line-chart-wrapper">
+    <svg
+      v-if="hasPoints"
+      :width="width"
+      :height="height"
+      :viewBox="`0 0 ${width} ${height}`"
+      role="presentation"
+      aria-hidden="true"
+    >
+      <line
+        :x1="margins.left"
+        :x2="margins.left"
+        :y1="margins.top"
+        :y2="margins.top + chartDimensions.height"
+        stroke="currentColor"
+        stroke-width="1"
+        opacity="0.35"
+      />
+      <line
+        :x1="margins.left"
+        :x2="margins.left + chartDimensions.width"
+        :y1="margins.top + chartDimensions.height"
+        :y2="margins.top + chartDimensions.height"
+        stroke="currentColor"
+        stroke-width="1"
+        opacity="0.35"
+      />
+      <g v-for="tick in formattedYTicks" :key="tick.label">
+        <line
+          :x1="margins.left - 6"
+          :x2="margins.left"
+          :y1="tick.y"
+          :y2="tick.y"
+          stroke="currentColor"
+          stroke-width="1"
+          opacity="0.35"
+        />
+        <text
+          :x="margins.left - 10"
+          :y="tick.y + 4"
+          class="text-[10px]"
+          text-anchor="end"
+          :opacity="0.65"
+        >
+          {{ tick.label }}
+        </text>
+      </g>
+      <g v-for="label in xLabels" :key="label.label">
+        <line
+          :x1="label.x"
+          :x2="label.x"
+          :y1="margins.top + chartDimensions.height"
+          :y2="margins.top + chartDimensions.height + 6"
+          stroke="currentColor"
+          stroke-width="1"
+          opacity="0.35"
+        />
+        <text
+          :x="label.x"
+          :y="height - 4"
+          class="text-[10px]"
+          text-anchor="middle"
+          :opacity="0.65"
+        >
+          {{ label.label }}
+        </text>
+      </g>
+      <polyline
+        :points="polylinePoints"
+        stroke="currentColor"
+        fill="none"
+        stroke-width="2"
+      />
+      <circle
+        v-for="(point, index) in chartPoints"
+        :key="`${point.x}-${point.y}-${index}`"
+        :cx="point.x"
+        :cy="point.y"
+        r="2"
+        stroke="currentColor"
+        stroke-width="1"
+        fill="currentColor"
+        :class="{ 'mini-line-chart__point--last': index === chartPoints.length - 1 }"
+      />
+    </svg>
+    <div v-else class="history-placeholder" aria-hidden="true">
+      {{ placeholderLabel }}
+    </div>
+  </div>
+</template>

webui/src/components/MiniSparkline.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { computed, PropType } from "vue";
+
+const props = defineProps({
+  points: {
+    type: Array as PropType<number[]>,
+    default: () => [],
+  },
+  width: {
+    type: Number,
+    default: 280,
+  },
+  height: {
+    type: Number,
+    default: 14,
+  },
+  padding: {
+    type: Number,
+    default: 4,
+  },
+});
+
+const validPoints = computed(() =>
+  (props.points || [])
+    .map((value) => (Number.isFinite(value) ? Number(value) : null))
+    .filter((value): value is number => value !== null)
+);
+
+const pointRange = computed(() => {
+  const points = validPoints.value;
+  if (points.length === 0) {
+    return { min: 0, max: 1 };
+  }
+  const min = Math.min(...points);
+  const max = Math.max(...points);
+  return { min, max };
+});
+
+const svgPoints = computed(() => {
+  const points = validPoints.value;
+  const { min, max } = pointRange.value;
+  if (points.length === 0) {
+    return "";
+  }
+  const delta = max - min || 1;
+  const availableWidth = props.width - props.padding * 2;
+  const availableHeight = props.height - props.padding * 2;
+  const step = points.length > 1 ? availableWidth / (points.length - 1) : 0;
+  return points
+    .map((value, index) => {
+      const x = props.padding + step * index;
+      const normalized = (value - min) / delta;
+      const y = props.padding + availableHeight * (1 - normalized);
+      return `${x},${y}`;
+    })
+    .join(" ");
+});
+
+const hasPoints = computed(() => validPoints.value.length > 1);
+</script>
+
+<template>
+  <div class="mini-sparkline">
+    <svg
+      :width="width"
+      :height="height"
+      :viewBox="`0 0 ${width} ${height}`"
+      role="presentation"
+      aria-hidden="true"
+    >
+      <polyline
+        v-if="hasPoints"
+        :points="svgPoints"
+        class="sparkline-polyline"
+        fill="none"
+      />
+      <line
+        v-else
+        :x1="padding"
+        :y1="height / 2"
+        :x2="width - padding"
+        :y2="height / 2"
+        class="sparkline-polyline"
+      />
+    </svg>
+  </div>
+</template>

webui/src/components/PriceHistoryChart.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="price-history-chart panel p-3">
+    <div class="flex items-center justify-between mb-2">
+      <div class="section-title text-sm">Historique</div>
+      <div class="label text-xs">{{ deltaLabel }}</div>
+    </div>
+    <svg class="w-full h-20 mb-2" viewBox="0 0 120 50" preserveAspectRatio="none">
+      <polyline :points="polyPoints" class="sparkline" fill="none" />
+      <circle
+        v-for="(point, index) in svgPoints"
+        :key="`history-detail-point-${index}`"
+        :cx="point.cx"
+        :cy="point.cy"
+        r="1.3"
+        stroke="currentColor"
+        fill="currentColor"
+      />
+    </svg>
+    <div class="grid grid-cols-2 gap-3 text-xs">
+      <div>Actuel<br /><strong>{{ formatPrice(currentPrice) }}</strong></div>
+      <div>Min<br /><strong>{{ formatPrice(minPrice) }}</strong></div>
+      <div>Max<br /><strong>{{ formatPrice(maxPrice) }}</strong></div>
+      <div>Delta<br /><strong>{{ deltaLabel }}</strong></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps({
+  history: {
+    type: Array as () => number[],
+    default: () => [],
+  },
+  currentPrice: {
+    type: Number,
+    default: 0,
+  },
+  minPrice: {
+    type: Number,
+    default: 0,
+  },
+  maxPrice: {
+    type: Number,
+    default: 0,
+  },
+  deltaLabel: {
+    type: String,
+    default: "—",
+  },
+});
+
+const polyPoints = computed(() => {
+  if (!props.history.length) {
+    return "0,40 30,30 60,35 90,25 120,28";
+  }
+  const max = Math.max(...props.history);
+  const min = Math.min(...props.history);
+  const range = max - min || 1;
+  return props.history
+    .map((value, index) => {
+      const x = (index / (props.history.length - 1 || 1)) * 120;
+      const y = 50 - ((value - min) / range) * 50;
+      return `${x.toFixed(1)},${y.toFixed(1)}`;
+    })
+    .join(" ");
+});
+
+const svgPoints = computed(() => {
+  if (!props.history.length) {
+    return [];
+  }
+  const max = Math.max(...props.history);
+  const min = Math.min(...props.history);
+  const range = max - min || 1;
+  return props.history.map((value, index) => {
+    const x = (index / (props.history.length - 1 || 1)) * 120;
+    const y = 50 - ((value - min) / range) * 50;
+    return { cx: x.toFixed(1), cy: y.toFixed(1) };
+  });
+});
+
+const formatPrice = (value: number) => {
+  if (!Number.isFinite(value)) {
+    return "n/a";
+  }
+  return `${value.toFixed(2)} €`;
+};
+</script>

webui/src/components/PriceHistoryHover.vue

@@ -0,0 +1,136 @@
+<template>
+  <Teleport to="body" v-if="visible">
+    <div
+      class="price-history-popup panel p-4 shadow-lg"
+      :style="popupStyle"
+      @mouseenter="keepOpen"
+      @mouseleave="close"
+    >
+      <div class="flex items-center justify-between mb-2">
+        <div class="section-title text-sm">Historique 30j</div>
+      </div>
+      <svg class="w-full h-12 mb-2" viewBox="0 0 120 40" preserveAspectRatio="none">
+        <polyline
+          :points="polyPoints"
+          class="sparkline"
+          fill="none"
+        />
+        <circle
+          v-for="(point, index) in svgPoints"
+          :key="`history-point-${index}`"
+          :cx="point.cx"
+          :cy="point.cy"
+          r="1.2"
+          stroke="currentColor"
+          fill="currentColor"
+        />
+      </svg>
+      <div class="grid grid-cols-2 gap-3 text-[0.75rem]">
+        <div>Actuel<br /><strong>{{ formatPrice(currentPrice) }}</strong></div>
+        <div>Min<br /><strong>{{ formatPrice(minPrice) }}</strong></div>
+        <div>Max<br /><strong>{{ formatPrice(maxPrice) }}</strong></div>
+        <div>Delta<br /><strong>{{ deltaLabel }}</strong></div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps({
+  visible: Boolean,
+  position: {
+    type: Object,
+    default: () => ({ top: 0, left: 0 }),
+  },
+  history: {
+    type: Array,
+    default: () => [],
+  },
+  currentPrice: {
+    type: Number,
+    default: 0,
+  },
+  minPrice: {
+    type: Number,
+    default: 0,
+  },
+  maxPrice: {
+    type: Number,
+    default: 0,
+  },
+  delta: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const formattedDelta = computed(() => {
+  const value = Number(props.delta ?? 0);
+  if (!Number.isFinite(value) || value === 0) {
+    return "—";
+  }
+  const arrow = value > 0 ? "▲" : "▼";
+  return `${arrow} ${Math.abs(value).toFixed(1)}%`;
+});
+
+const polyPoints = computed(() => {
+  if (!props.history.length) {
+    return "0,30 30,20 60,15 90,25 120,20";
+  }
+  const max = Math.max(...props.history);
+  const min = Math.min(...props.history);
+  const range = max - min || 1;
+  return props.history
+    .map((value, index) => {
+      const x = (index / (props.history.length - 1 || 1)) * 120;
+      const y = 40 - ((value - min) / range) * 40;
+      return `${x.toFixed(1)},${y.toFixed(1)}`;
+    })
+    .join(" ");
+});
+
+const svgPoints = computed(() => {
+  if (!props.history.length) {
+    return [];
+  }
+  const max = Math.max(...props.history);
+  const min = Math.min(...props.history);
+  const range = max - min || 1;
+  return props.history.map((value, index) => {
+    const x = (index / (props.history.length - 1 || 1)) * 120;
+    const y = 40 - ((value - min) / range) * 40;
+    return { cx: x.toFixed(1), cy: y.toFixed(1) };
+  });
+});
+
+const emit = defineEmits<{
+  (event: "mouseenter"): void;
+  (event: "mouseleave"): void;
+}>();
+
+const popupStyle = computed(() => ({
+  position: "fixed",
+  top: `${props.position.top}px`,
+  left: `${props.position.left}px`,
+  width: "280px",
+  zIndex: 50,
+}));
+const deltaLabel = formattedDelta;
+
+const formatPrice = (value: number) => {
+  if (!Number.isFinite(value)) {
+    return "n/a";
+  }
+  return `${value.toFixed(2)} €`;
+};
+
+function keepOpen() {
+  emit("mouseenter");
+}
+
+function close() {
+  emit("mouseleave");
+}
+</script>

webui/src/index.css

@@ -4,6 +4,10 @@
 
 :root {
   color-scheme: light dark;
+  --pw-store-icon: 40px;
+  --pw-card-height-factor: 1;
+  --pw-card-mobile-height-factor: 1;
+  --pw-card-media-height: 160px;
 }
 
 .app-root {
@@ -134,7 +138,264 @@
   background: var(--surface);
   border-radius: var(--radius);
   border: 1px solid rgba(255, 255, 255, 0.08);
-  box-shadow: 0 10px 24px var(--shadow);
+  box-shadow: 0 16px 32px var(--shadow);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-height: calc(470px * var(--pw-card-height-factor, 1));
+  padding: 24px;
+  position: relative;
+  padding-bottom: 90px;
+}
+
+.card-thumbnail {
+  width: 100%;
+  height: var(--pw-card-media-height, 160px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 16px;
+  background: var(--surface-2);
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.card-media-image {
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+}
+
+.card-media-contain {
+  object-fit: contain;
+}
+
+.card-media-cover {
+  object-fit: cover;
+}
+
+.card-price-history {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.history-price-grid {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 16px;
+}
+
+.history-panel {
+  position: relative;
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  padding: 12px;
+  background: var(--surface);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
+}
+
+.chart-period-label {
+  margin-top: 6px;
+  font-size: 0.75rem;
+  color: var(--muted);
+  text-align: right;
+}
+
+.price-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  justify-content: center;
+  min-width: 120px;
+}
+
+.price-main {
+  font-size: clamp(24px, 2.2vw, 32px);
+  font-weight: 700;
+  text-align: right;
+}
+
+.price-msrp {
+  font-size: 0.85rem;
+  color: var(--muted);
+  text-align: right;
+  text-decoration: line-through;
+}
+
+.price-discount {
+  font-size: 0.85rem;
+  text-align: right;
+}
+
+.stock-line {
+  margin-top: 6px;
+  text-transform: none;
+  font-weight: 500;
+  transition: color 0.2s ease;
+}
+
+.history-summary {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.75rem;
+  color: var(--muted);
+}
+
+@media (max-width: 900px) {
+  .history-price-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.history-trend {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.trend-pill {
+  font-size: 0.85rem;
+  font-weight: 600;
+}
+
+.trend-delta {
+  font-size: 0.75rem;
+  font-family: var(--font-mono);
+}
+
+.card-update {
+  font-size: 0.72rem;
+  color: rgba(235, 219, 178, 0.7);
+}
+
+.card-media {
+  width: 100%;
+  height: var(--pw-card-media-height, 160px);
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: var(--surface-2);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.card-media-image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.card-identity {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.store-icon {
+  width: var(--pw-store-icon);
+  height: var(--pw-store-icon);
+  border-radius: 14px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: var(--surface-2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: 2px;
+}
+
+.store-icon img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.card-identity-text {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.filter-chip {
+  border-radius: 999px;
+  padding: 4px 10px;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  font-size: 0.75rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+}
+
+.filter-chip:hover {
+  border-color: var(--accent);
+}
+
+.card-hover {
+  overflow: hidden;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.card-title {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.card-toolbar {
+  position: absolute;
+  bottom: 12px;
+  right: 12px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.card-toolbar .primary-action {
+  width: 36px;
+  height: 36px;
+  pointer-events: auto;
+}
+
+.secondary-actions {
+  display: flex;
+  gap: 4px;
+  opacity: 0;
+  transform: translateY(4px);
+  pointer-events: none;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.group:hover .secondary-actions,
+.group:focus-within .secondary-actions {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+.card-hover:hover,
+.card-hover:focus-within {
+  transform: translateY(-2px);
+  box-shadow: 0 18px 32px var(--shadow);
+}
+
+.card-delta {
+  font-size: 0.75rem;
+  letter-spacing: 0.5px;
+}
+
+.status-pill[data-placeholder] {
+  text-transform: none;
+}
+
+.status-pill.pill {
+  text-transform: none;
 }
 
 .card-accent {
@@ -160,6 +421,178 @@
   color: var(--muted);
 }
 
+.detail-dialog {
+  max-height: 90vh;
+  border-radius: 24px;
+}
+
+.detail-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 24px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.detail-title {
+  font-weight: 600;
+  display: inline-block;
+  max-width: 22ch;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.detail-content-area {
+  padding: 24px;
+  overflow-y: auto;
+}
+
+.detail-columns {
+  min-height: 0;
+}
+
+.detail-card {
+  background: var(--surface-1);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 18px;
+  padding: 16px;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
+  min-height: 0;
+}
+
+.detail-summary-image {
+  width: 100%;
+  height: 220px;
+}
+
+.detail-summary-image img {
+  width: 100%;
+  height: 100%;
+}
+
+.detail-tabs {
+  display: flex;
+  gap: 8px;
+}
+
+.detail-tab-button {
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 10px;
+  padding: 6px 14px;
+  background: transparent;
+  color: inherit;
+  font-size: 0.75rem;
+  line-height: 1;
+  cursor: pointer;
+  transition: transform 0.2s ease, border-color 0.2s ease;
+}
+
+.detail-tab-button:hover {
+  border-color: rgba(255, 255, 255, 0.16);
+  transform: translateY(-1px);
+}
+
+.detail-tab-button.active {
+  border-color: rgba(255, 255, 255, 0.35);
+  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
+}
+
+.detail-tab-panel {
+  margin-top: 4px;
+}
+
+.detail-text {
+  white-space: pre-wrap;
+  line-height: 1.4;
+}
+
+.detail-empty {
+  font-style: italic;
+  opacity: 0.75;
+}
+
+.detail-history-periods {
+  margin-bottom: 4px;
+}
+
+.detail-period-button {
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 999px;
+  padding: 4px 12px;
+  background: transparent;
+  font-size: 0.7rem;
+  cursor: pointer;
+  transition: box-shadow 0.2s ease;
+}
+
+.detail-period-button.selected {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
+  border-color: rgba(255, 255, 255, 0.45);
+}
+
+.detail-history-summary .section-title {
+  font-size: 0.85rem;
+}
+
+.detail-price-row {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.detail-price-value {
+  font-size: clamp(28px, 2.8vw, 34px);
+  font-weight: 700;
+}
+
+.detail-price-updated {
+  font-size: 0.7rem;
+  color: var(--muted);
+  text-transform: uppercase;
+}
+
+.detail-specs span {
+  font-weight: 600;
+}
+
+.detail-card.edit-card .actions-section {
+  justify-content: flex-start;
+}
+
+.header-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.header-actions .icon-btn {
+  width: 32px;
+  height: 32px;
+}
+
+.add-product-btn {
+  width: 50px;
+  height: 50px;
+  box-shadow: 0 16px 32px var(--shadow);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.add-product-btn:hover {
+  transform: translateY(-3px) scale(1.02);
+  box-shadow: 0 20px 36px var(--shadow);
+}
+
+.header-actions .icon-btn .fa-solid {
+  font-size: 0.95rem;
+}
+
 .input {
   width: 100%;
   background: var(--surface-2);
@@ -229,6 +662,96 @@
   color: #1b1b1b;
 }
 
+.logs-panel {
+  display: flex;
+  flex-direction: column;
+  max-height: min(80vh, 560px);
+  gap: 0.75rem;
+}
+
+.logs-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  overflow-y: auto;
+  max-height: calc(80vh - 200px);
+}
+
+.logs-toolbar {
+  margin-top: auto;
+  justify-content: flex-end;
+}
+
+.scrape-log-bar {
+  position: fixed;
+  bottom: 1.5rem;
+  left: 50%;
+  transform: translateX(-50%);
+  width: min(80%, 900px);
+  max-height: 140px;
+  background: var(--surface);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 18px;
+  padding: 16px;
+  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.45);
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  z-index: 60;
+  font-family: var(--font-mono);
+  font-size: 0.85rem;
+}
+
+.scrape-log-line {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  color: var(--text);
+  white-space: nowrap;
+}
+
+.scrape-log-time {
+  color: var(--muted);
+  font-size: 0.75rem;
+}
+
+.scrape-log-icon {
+  font-size: 0.85rem;
+}
+
+.scrape-log-text {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.scrape-log-enter-active,
+.scrape-log-leave-active {
+  transition: opacity 0.25s ease, transform 0.25s ease;
+}
+
+.scrape-log-enter-from,
+.scrape-log-leave-to {
+  opacity: 0;
+  transform: translateY(12px);
+}
+
+.price-section .price-value {
+  font-size: 2.1rem;
+  font-weight: 700;
+}
+
+.source-section .link {
+  color: var(--accent);
+  text-decoration: underline;
+}
+
+.actions-section .icon-btn {
+  background: var(--surface-2);
+}
+
 .app-root.layout-compact .sidebar,
 .app-root.layout-compact .detail-panel {
   display: none;
@@ -254,8 +777,8 @@
 
 .product-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-  gap: 16px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 32px;
 }
 
 @media (max-width: 1024px) {
@@ -278,4 +801,97 @@
   .product-grid {
     grid-template-columns: 1fr;
   }
+  .card {
+    min-height: calc(470px * var(--pw-card-mobile-height-factor, 1));
+  }
+}
+.view-toggle-group {
+  display: flex;
+  gap: 4px;
+}
+
+.price-dominant {
+  margin-top: -4px;
+}
+
+.price-dominant .price-value {
+  font-size: clamp(24px, 3vw, 32px);
+  font-weight: 700;
+  line-height: 1.1;
+}
+
+.price-dominant .price-value {
+  font-size: clamp(20px, 2.4vw, 26px);
+  font-weight: 700;
+}
+
+.mini-sparkline {
+  margin-top: 8px;
+  border-radius: 12px;
+  padding: 6px;
+  background: var(--surface-2);
+  overflow: hidden;
+}
+
+.sparkline-polyline {
+  stroke: var(--text);
+  stroke-width: 1.3;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}
+
+.mini-line-chart__point--last {
+  r: 3;
+}
+
+.history-placeholder {
+  font-size: 0.75rem;
+  opacity: 0.6;
+  text-align: center;
+  padding-top: 10px;
+}
+.mini-line-chart-panel {
+  height: 160px;
+  overflow: hidden;
+  position: relative;
+  margin-top: 12px;
+  width: 100%;
+}
+
+.mini-line-chart-wrapper {
+  height: 100%;
+}
+
+.mini-line-chart-wrapper svg {
+  display: block;
+}
+
+.price-history-popup {
+  width: 280px;
+  border-radius: 14px;
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35);
+  background: var(--surface);
+  color: var(--text);
+  min-height: 120px;
+  max-width: 320px;
+}
+
+.price-history-popup .sparkline {
+  stroke: currentColor;
+  stroke-width: 1.5;
+}
+
+.price-history-popup strong {
+  font-weight: 700;
+}
+
+.price-history-chart {
+  border-radius: 14px;
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
+  background: var(--surface);
+}
+
+.price-history-chart .sparkline {
+  stroke: var(--accent);
+  stroke-width: 1.6;
 }

webui/src/utils/computeFloatingPosition.ts

@@ -0,0 +1,38 @@
+export interface FloatingPositionParams {
+  rect: DOMRect;
+  popupWidth: number;
+  popupHeight: number;
+  viewportWidth: number;
+  viewportHeight: number;
+  margin?: number;
+}
+
+export interface FloatingPosition {
+  top: number;
+  left: number;
+}
+
+export const computeFloatingPosition = ({
+  rect,
+  popupWidth,
+  popupHeight,
+  viewportWidth,
+  viewportHeight,
+  margin = 8,
+}: FloatingPositionParams): FloatingPosition => {
+  const spaceBelow = viewportHeight - rect.bottom;
+  const spaceAbove = rect.top;
+  const verticalGap = margin;
+  let top = rect.bottom + verticalGap;
+  if (spaceBelow < popupHeight + verticalGap && spaceAbove >= popupHeight + verticalGap) {
+    top = rect.top - popupHeight - verticalGap;
+  }
+  if (spaceBelow < popupHeight + verticalGap && spaceAbove < popupHeight + verticalGap) {
+    top = Math.max(margin, viewportHeight - popupHeight - margin);
+  }
+  const clampedLeft = Math.min(
+    Math.max(margin, rect.left),
+    Math.max(margin, viewportWidth - popupWidth - margin)
+  );
+  return { top, left: clampedLeft };
+};

webui/src/utils/storeLogos.ts

@@ -0,0 +1,26 @@
+import amazonLogo from "@/assets/stores/amazon.svg";
+import cdiscountLogo from "@/assets/stores/cdiscount.svg";
+import aliexpressLogo from "@/assets/stores/aliexpress.svg";
+import backmarketLogo from "@/assets/stores/backmarket.svg";
+
+const LOGOS: Record<string, string> = {
+  amazon: amazonLogo,
+  cdiscount: cdiscountLogo,
+  aliexpress: aliexpressLogo,
+  backmarket: backmarketLogo,
+};
+
+const normalize = (value: string | undefined): string => {
+  if (!value) {
+    return "";
+  }
+  return value
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+};
+
+export const getStoreLogo = (storeName: string | undefined): string | null => {
+  const key = normalize(storeName);
+  return LOGOS[key] || null;
+};

webui/vite.config.js

@@ -1,8 +1,14 @@
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
+import { fileURLToPath, URL } from "node:url";
 
 export default defineConfig({
   plugins: [vue()],
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },
   server: {
     port: 3000,
   },