Upload 5 files

Dockerfile

@@ -0,0 +1,11 @@
+FROM python:3.10-slim
+
+WORKDIR /app
+
+RUN pip install --no-cache-dir flask waitress
+
+COPY . .
+
+EXPOSE 5000
+
+CMD ["python", "app.py"]

app.py

@@ -0,0 +1,27 @@
+"""
+Activity Time Explorer (Flask)
+-------------------------------
+Minimal Flask server — serves only the HTML template and static assets.
+All CSV processing happens client-side in the browser.
+
+Run with:
+    pip install flask
+    python app.py
+
+Then open http://localhost:5000 and upload a CSV.
+"""
+
+from flask import Flask, render_template
+from waitress import serve
+
+app = Flask(__name__)
+
+
+@app.route("/")
+def index():
+    return render_template("index.html")
+
+
+if __name__ == "__main__":
+    print("Serving on http://localhost:5000")
+    serve(app, host="0.0.0.0", port=5000)

static/app.js

@@ -0,0 +1,592 @@
+// ---------------------------------------------------------------
+// Activity Time Explorer — fully client-side processing
+// ---------------------------------------------------------------
+
+const el = (id) => document.getElementById(id);
+
+// ---- State ----
+const state = {
+  rows: [],         // parsed CSV rows (array of objects)
+  columns: [],      // CSV header column names
+  filtered: [],     // filtered subset
+  page: 1,
+  pageSize: 25,
+  sortBy: "Total Duration (s)",
+  sortDir: "desc",
+  debounceTimer: null,
+};
+
+// ---- Elements ----
+const fileInput = el("fileInput");
+const uploadTile = el("uploadTile");
+const fileMeta = el("fileMeta");
+const fileMetaName = el("fileMetaName");
+const fileMetaRows = el("fileMetaRows");
+
+const searchInput = el("searchInput");
+const domainSelect = el("domainSelect");
+const reasonSelect = el("reasonSelect");
+const startDate = el("startDate");
+const endDate = el("endDate");
+const minDuration = el("minDuration");
+const minDurationLabel = el("minDurationLabel");
+const resetBtn = el("resetBtn");
+const downloadBtn = el("downloadBtn");
+
+const collapseBtn = el("collapseBtn");
+const expandBtn = el("expandBtn");
+const sidebar = el("sidebar");
+
+const emptyState = el("emptyState");
+const dashboard = el("dashboard");
+
+const tabBtns = document.querySelectorAll(".tab-btn");
+const tabDomain = el("tabDomain");
+const tabUrl = el("tabUrl");
+
+const toastEl = el("toast");
+
+// ================ Utilities ================
+
+function showToast(msg, isError = false) {
+  toastEl.textContent = msg;
+  toastEl.classList.toggle("error", isError);
+  toastEl.classList.remove("hidden");
+  setTimeout(() => toastEl.classList.add("hidden"), 3200);
+}
+
+function formatSeconds(sec) {
+  sec = Math.round(sec);
+  const m = Math.floor(sec / 60);
+  const s = sec % 60;
+  return m > 0 ? `${m}m ${s}s` : `${s}s`;
+}
+
+// ================ CSV Parsing ================
+
+function parseCSV(text) {
+  const lines = text.split(/\r?\n/);
+  if (lines.length < 2) return { headers: [], rows: [] };
+
+  const headers = parseCSVLine(lines[0]);
+  const rows = [];
+
+  for (let i = 1; i < lines.length; i++) {
+    const line = lines[i].trim();
+    if (!line) continue;
+    const values = parseCSVLine(line);
+    const row = {};
+    headers.forEach((h, idx) => {
+      row[h] = values[idx] !== undefined ? values[idx] : "";
+    });
+    rows.push(row);
+  }
+
+  return { headers, rows };
+}
+
+function parseCSVLine(line) {
+  const result = [];
+  let current = "";
+  let inQuotes = false;
+
+  for (let i = 0; i < line.length; i++) {
+    const ch = line[i];
+    if (inQuotes) {
+      if (ch === '"') {
+        if (i + 1 < line.length && line[i + 1] === '"') {
+          current += '"';
+          i++;
+        } else {
+          inQuotes = false;
+        }
+      } else {
+        current += ch;
+      }
+    } else {
+      if (ch === '"') {
+        inQuotes = true;
+      } else if (ch === ",") {
+        result.push(current.trim());
+        current = "";
+      } else {
+        current += ch;
+      }
+    }
+  }
+  result.push(current.trim());
+  return result;
+}
+
+// ================ Data Processing ================
+
+function processRows(rows) {
+  return rows.map((row) => {
+    // Numeric columns
+    for (const col of ["Total Duration (s)", "Idle Time (s)", "Active Time (s)"]) {
+      row[col] = parseFloat(row[col]) || 0;
+    }
+
+    // Ensure string columns
+    for (const col of ["Domain", "URL", "End Reason", "Start Time Local", "End Time Local"]) {
+      row[col] = row[col] || "";
+    }
+
+    // Extract date from Start Time (UTC)
+    if (row["Start Time (UTC)"]) {
+      const d = new Date(row["Start Time (UTC)"]);
+      row["Date"] = isNaN(d) ? "" : d.toISOString().slice(0, 10);
+    } else {
+      row["Date"] = "";
+    }
+
+    return row;
+  });
+}
+
+function getUniqueSorted(rows, key) {
+  const set = new Set();
+  rows.forEach((r) => {
+    const val = r[key];
+    if (val && val.trim()) set.add(val);
+  });
+  return Array.from(set).sort();
+}
+
+// ================ Sidebar Collapse ================
+
+collapseBtn.addEventListener("click", () => {
+  sidebar.classList.add("collapsed");
+  expandBtn.classList.remove("hidden");
+});
+expandBtn.addEventListener("click", () => {
+  sidebar.classList.remove("collapsed");
+  expandBtn.classList.add("hidden");
+});
+
+// ================ File Upload ================
+
+fileInput.addEventListener("change", () => {
+  const file = fileInput.files[0];
+  if (!file) return;
+
+  const reader = new FileReader();
+  reader.onload = (e) => {
+    try {
+      const { headers, rows } = parseCSV(e.target.result);
+      if (!headers.length || !rows.length) {
+        showToast("CSV is empty or could not be parsed", true);
+        return;
+      }
+      state.columns = headers;
+      state.rows = processRows(rows);
+      onDataLoaded(file.name);
+    } catch (err) {
+      showToast("Error parsing CSV: " + err.message, true);
+    }
+  };
+  reader.onerror = () => showToast("Error reading file", true);
+  reader.readAsText(file);
+});
+
+function onDataLoaded(filename) {
+  const rows = state.rows;
+
+  fileMetaName.textContent = filename;
+  fileMetaRows.textContent = `${rows.length.toLocaleString()} rows`;
+  fileMeta.classList.remove("hidden");
+
+  // Populate domain select
+  domainSelect.innerHTML = "";
+  getUniqueSorted(rows, "Domain").forEach((d) => {
+    const opt = document.createElement("option");
+    opt.value = d;
+    opt.textContent = d;
+    domainSelect.appendChild(opt);
+  });
+
+  // Populate end reason select
+  reasonSelect.innerHTML = "";
+  getUniqueSorted(rows, "End Reason").forEach((r) => {
+    const opt = document.createElement("option");
+    opt.value = r;
+    opt.textContent = r;
+    reasonSelect.appendChild(opt);
+  });
+
+  // Date range
+  const dates = rows.map((r) => r.Date).filter(Boolean).sort();
+  if (dates.length) {
+    startDate.min = dates[0];
+    startDate.max = dates[dates.length - 1];
+    endDate.min = dates[0];
+    endDate.max = dates[dates.length - 1];
+    startDate.value = dates[0];
+    endDate.value = dates[dates.length - 1];
+  }
+
+  // Duration slider
+  const maxDur = Math.max(...rows.map((r) => r["Total Duration (s)"]), 1);
+  minDuration.min = 0;
+  minDuration.max = Math.ceil(maxDur);
+  minDuration.value = 0;
+  minDurationLabel.textContent = "0s";
+
+  // Enable controls
+  [searchInput, domainSelect, reasonSelect, startDate, endDate, minDuration, resetBtn, downloadBtn].forEach(
+    (elm) => (elm.disabled = false)
+  );
+  searchInput.value = "";
+
+  emptyState.classList.add("hidden");
+  dashboard.classList.remove("hidden");
+
+  showToast(`Loaded ${filename}`);
+  state.page = 1;
+  runFilter();
+}
+
+// ================ Filtering ================
+
+function debounceFilter() {
+  clearTimeout(state.debounceTimer);
+  state.debounceTimer = setTimeout(() => {
+    state.page = 1;
+    runFilter();
+  }, 300);
+}
+
+searchInput.addEventListener("input", debounceFilter);
+domainSelect.addEventListener("change", () => { state.page = 1; runFilter(); });
+reasonSelect.addEventListener("change", () => { state.page = 1; runFilter(); });
+startDate.addEventListener("change", () => { state.page = 1; runFilter(); });
+endDate.addEventListener("change", () => { state.page = 1; runFilter(); });
+minDuration.addEventListener("input", () => { minDurationLabel.textContent = `${minDuration.value}s`; });
+minDuration.addEventListener("change", () => { state.page = 1; runFilter(); });
+
+resetBtn.addEventListener("click", () => {
+  searchInput.value = "";
+  Array.from(domainSelect.options).forEach((o) => (o.selected = false));
+  Array.from(reasonSelect.options).forEach((o) => (o.selected = false));
+  startDate.value = startDate.min || "";
+  endDate.value = endDate.max || "";
+  minDuration.value = 0;
+  minDurationLabel.textContent = "0s";
+  state.page = 1;
+  runFilter();
+});
+
+function getSelectedValues(selectEl) {
+  return Array.from(selectEl.selectedOptions).map((o) => o.value);
+}
+
+function runFilter() {
+  if (!state.rows.length) return;
+
+  let filtered = state.rows;
+
+  // Search
+  const search = searchInput.value.trim().toLowerCase();
+  if (search) {
+    filtered = filtered.filter(
+      (r) =>
+        (r.Domain || "").toLowerCase().includes(search) ||
+        (r.URL || "").toLowerCase().includes(search)
+    );
+  }
+
+  // Domain filter
+  const domains = getSelectedValues(domainSelect);
+  if (domains.length) {
+    const set = new Set(domains);
+    filtered = filtered.filter((r) => set.has(r.Domain));
+  }
+
+  // End reason filter
+  const reasons = getSelectedValues(reasonSelect);
+  if (reasons.length) {
+    const set = new Set(reasons);
+    filtered = filtered.filter((r) => set.has(r["End Reason"]));
+  }
+
+  // Date range
+  const sd = startDate.value;
+  const ed = endDate.value;
+  if (sd && ed) {
+    filtered = filtered.filter((r) => r.Date >= sd && r.Date <= ed);
+  }
+
+  // Min duration
+  const minDur = Number(minDuration.value) || 0;
+  if (minDur > 0) {
+    filtered = filtered.filter((r) => r["Total Duration (s)"] >= minDur);
+  }
+
+  state.filtered = filtered;
+
+  renderSummary(filtered);
+  renderDomainChart(filtered);
+  renderUrlChart(filtered);
+  renderTable(filtered);
+}
+
+// ================ Summary ================
+
+function renderSummary(filtered) {
+  const totalSec = filtered.reduce((s, r) => s + r["Total Duration (s)"], 0);
+  const uniqueDomains = new Set(filtered.map((r) => r.Domain)).size;
+  const uniqueUrls = new Set(filtered.map((r) => r.URL)).size;
+
+  el("metricEntries").textContent = filtered.length.toLocaleString();
+  el("metricTime").textContent = formatSeconds(totalSec);
+  el("metricDomains").textContent = uniqueDomains.toLocaleString();
+  el("metricUrls").textContent = uniqueUrls.toLocaleString();
+}
+
+// ================ Charts ================
+
+function aggregateBy(rows, key, top = 25) {
+  const map = {};
+  rows.forEach((r) => {
+    const k = r[key] || "(empty)";
+    map[k] = (map[k] || 0) + r["Total Duration (s)"];
+  });
+  return Object.entries(map)
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, top)
+    .map(([label, seconds]) => ({ label, seconds }));
+}
+
+function renderBarChart(container, items) {
+  container.innerHTML = "";
+  if (!items.length) return;
+
+  const maxVal = Math.max(...items.map((d) => d.seconds), 1);
+
+  items.forEach((item) => {
+    const row = document.createElement("div");
+    row.className = "bar-row";
+
+    const label = document.createElement("div");
+    label.className = "bar-label";
+    label.textContent = item.label;
+    label.title = item.label;
+
+    const track = document.createElement("div");
+    track.className = "bar-track";
+    const fill = document.createElement("div");
+    fill.className = "bar-fill";
+    fill.style.width = `${(item.seconds / maxVal) * 100}%`;
+    track.appendChild(fill);
+
+    const value = document.createElement("div");
+    value.className = "bar-value";
+    value.textContent = formatSeconds(item.seconds);
+
+    row.appendChild(label);
+    row.appendChild(track);
+    row.appendChild(value);
+    container.appendChild(row);
+  });
+}
+
+function renderDomainChart(filtered) {
+  const chartEl = el("domainChart");
+  const emptyEl = el("domainEmpty");
+  const items = aggregateBy(filtered, "Domain");
+  if (!items.length) {
+    chartEl.innerHTML = "";
+    emptyEl.classList.remove("hidden");
+    return;
+  }
+  emptyEl.classList.add("hidden");
+  renderBarChart(chartEl, items);
+}
+
+function renderUrlChart(filtered) {
+  const chartEl = el("urlChart");
+  const emptyEl = el("urlEmpty");
+  const items = aggregateBy(filtered, "URL");
+  if (!items.length) {
+    chartEl.innerHTML = "";
+    emptyEl.classList.remove("hidden");
+    return;
+  }
+  emptyEl.classList.add("hidden");
+  renderBarChart(chartEl, items);
+}
+
+// ================ Tabs ================
+
+tabBtns.forEach((btn) => {
+  btn.addEventListener("click", () => {
+    tabBtns.forEach((b) => b.classList.remove("active"));
+    btn.classList.add("active");
+    if (btn.dataset.tab === "domain") {
+      tabDomain.classList.remove("hidden");
+      tabUrl.classList.add("hidden");
+    } else {
+      tabUrl.classList.remove("hidden");
+      tabDomain.classList.add("hidden");
+    }
+  });
+});
+
+// ================ Table ================
+
+const displayCols = [
+  "Domain",
+  "URL",
+  "Start Time Local",
+  "End Time Local",
+  "Total Duration (s)",
+  "Idle Time (s)",
+  "Active Time (s)",
+  "End Reason",
+];
+
+function renderTable(filtered) {
+  const cols = displayCols.filter((c) => state.columns.includes(c));
+
+  // Sort
+  const sorted = [...filtered].sort((a, b) => {
+    let va = a[state.sortBy];
+    let vb = b[state.sortBy];
+    if (typeof va === "number" && typeof vb === "number") {
+      return state.sortDir === "asc" ? va - vb : vb - va;
+    }
+    va = String(va || "");
+    vb = String(vb || "");
+    return state.sortDir === "asc" ? va.localeCompare(vb) : vb.localeCompare(va);
+  });
+
+  // Paginate
+  const totalRows = sorted.length;
+  const startIdx = (state.page - 1) * state.pageSize;
+  const pageRows = sorted.slice(startIdx, startIdx + state.pageSize);
+
+  // Header
+  const thead = el("tableHead");
+  thead.innerHTML = "";
+  const headRow = document.createElement("tr");
+  cols.forEach((col) => {
+    const th = document.createElement("th");
+    th.textContent = col;
+    if (state.sortBy === col) {
+      const indicator = document.createElement("span");
+      indicator.className = "sort-indicator";
+      indicator.textContent = state.sortDir === "asc" ? "▲" : "▼";
+      th.appendChild(indicator);
+    }
+    th.addEventListener("click", () => {
+      if (state.sortBy === col) {
+        state.sortDir = state.sortDir === "asc" ? "desc" : "asc";
+      } else {
+        state.sortBy = col;
+        state.sortDir = "desc";
+      }
+      state.page = 1;
+      runFilter();
+    });
+    headRow.appendChild(th);
+  });
+  thead.appendChild(headRow);
+
+  // Body
+  const tbody = el("tableBody");
+  tbody.innerHTML = "";
+  if (!pageRows.length) {
+    const tr = document.createElement("tr");
+    const td = document.createElement("td");
+    td.colSpan = cols.length;
+    td.textContent = "No data matches the current filters.";
+    td.style.textAlign = "center";
+    td.style.color = "var(--text-muted)";
+    td.style.padding = "24px";
+    tr.appendChild(td);
+    tbody.appendChild(tr);
+  } else {
+    pageRows.forEach((row) => {
+      const tr = document.createElement("tr");
+      cols.forEach((col) => {
+        const td = document.createElement("td");
+        let val = row[col];
+        if (typeof val === "number" && col.includes("(s)")) val = val.toFixed(1);
+        td.textContent = val === null || val === undefined ? "" : val;
+        td.title = td.textContent;
+        tr.appendChild(td);
+      });
+      tbody.appendChild(tr);
+    });
+  }
+
+  renderPagination(totalRows);
+}
+
+function renderPagination(totalRows) {
+  const container = el("pagination");
+  container.innerHTML = "";
+  const totalPages = Math.max(Math.ceil(totalRows / state.pageSize), 1);
+
+  const info = document.createElement("span");
+  const startIdx = totalRows === 0 ? 0 : (state.page - 1) * state.pageSize + 1;
+  const endIdx = Math.min(state.page * state.pageSize, totalRows);
+  info.textContent = `${startIdx}–${endIdx} of ${totalRows.toLocaleString()}`;
+
+  const prevBtn = document.createElement("button");
+  prevBtn.textContent = "← Prev";
+  prevBtn.disabled = state.page <= 1;
+  prevBtn.addEventListener("click", () => { state.page--; runFilter(); });
+
+  const nextBtn = document.createElement("button");
+  nextBtn.textContent = "Next →";
+  nextBtn.disabled = state.page >= totalPages;
+  nextBtn.addEventListener("click", () => { state.page++; runFilter(); });
+
+  container.appendChild(info);
+  container.appendChild(prevBtn);
+  container.appendChild(nextBtn);
+}
+
+// ================ Download ================
+
+downloadBtn.addEventListener("click", () => {
+  if (!state.filtered.length) return;
+
+  const cols = displayCols.filter((c) => state.columns.includes(c));
+
+  // Sort same as table
+  const sorted = [...state.filtered].sort((a, b) => {
+    let va = a[state.sortBy];
+    let vb = b[state.sortBy];
+    if (typeof va === "number" && typeof vb === "number") {
+      return state.sortDir === "asc" ? va - vb : vb - va;
+    }
+    va = String(va || "");
+    vb = String(vb || "");
+    return state.sortDir === "asc" ? va.localeCompare(vb) : vb.localeCompare(va);
+  });
+
+  // Build CSV
+  const escapeCSV = (v) => {
+    const s = String(v ?? "");
+    return s.includes(",") || s.includes('"') || s.includes("\n")
+      ? '"' + s.replace(/"/g, '""') + '"'
+      : s;
+  };
+
+  const lines = [cols.map(escapeCSV).join(",")];
+  sorted.forEach((row) => {
+    lines.push(cols.map((c) => escapeCSV(row[c])).join(","));
+  });
+
+  const blob = new Blob([lines.join("\n")], { type: "text/csv" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = "filtered_activity.csv";
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+});

static/style.css

@@ -0,0 +1,669 @@
+/* ---------------------------------------------------------------
+   Activity Time Explorer — Minimalistic dark-first theme
+   System theme detection via prefers-color-scheme
+   --------------------------------------------------------------- */
+
+/* ---- Dark mode (default) ---- */
+:root {
+  --bg-main: #111111;
+  --bg-sidebar: #161616;
+  --bg-card: #1a1a1a;
+  --bg-hover: #252525;
+  --bg-input: #1e1e1e;
+  --border: #2a2a2a;
+  --border-subtle: #222222;
+  --text-primary: #e4e4e7;
+  --text-secondary: #9a9aa0;
+  --text-muted: #636368;
+  --accent: #2dd4a8;
+  --accent-hover: #22b893;
+  --accent-dim: rgba(45, 212, 168, 0.12);
+  --danger: #ef4444;
+  --bar-track: #222222;
+  --radius: 8px;
+  --sidebar-width: 260px;
+  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  color-scheme: dark;
+}
+
+/* ---- Light mode (follows system) ---- */
+@media (prefers-color-scheme: light) {
+  :root {
+    --bg-main: #fafafa;
+    --bg-sidebar: #f3f3f3;
+    --bg-card: #ffffff;
+    --bg-hover: #ebebeb;
+    --bg-input: #ffffff;
+    --border: #e2e2e2;
+    --border-subtle: #eeeeee;
+    --text-primary: #1a1a1a;
+    --text-secondary: #6b6b74;
+    --text-muted: #9a9aa0;
+    --accent: #10a37f;
+    --accent-hover: #0d8a6a;
+    --accent-dim: rgba(16, 163, 127, 0.08);
+    --danger: #d1453b;
+    --bar-track: #f0f0f0;
+    color-scheme: light;
+  }
+}
+
+/* ---- Reset ---- */
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+html, body {
+  height: 100%;
+  font-family: var(--font);
+  color: var(--text-primary);
+  background: var(--bg-main);
+  font-size: 13.5px;
+  -webkit-font-smoothing: antialiased;
+}
+
+button, input, select, textarea {
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+}
+
+.hidden { display: none !important; }
+.muted  { color: var(--text-muted); font-weight: 400; }
+
+/* ================ App Shell ================ */
+
+.app {
+  display: flex;
+  height: 100vh;
+  overflow: hidden;
+}
+
+/* ================ Sidebar ================ */
+
+.sidebar {
+  width: var(--sidebar-width);
+  min-width: var(--sidebar-width);
+  background: var(--bg-sidebar);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  padding: 14px 12px;
+  overflow-y: auto;
+  transition: margin-left 0.2s ease;
+}
+
+.sidebar.collapsed {
+  margin-left: calc(-1 * var(--sidebar-width));
+}
+
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 2px 16px 2px;
+}
+
+.brand {
+  font-weight: 600;
+  font-size: 14px;
+  letter-spacing: -0.01em;
+}
+
+.icon-btn {
+  background: transparent;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  padding: 5px 7px;
+  border-radius: 6px;
+  font-size: 12px;
+  transition: background 0.15s, color 0.15s;
+}
+
+.icon-btn:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+/* ---- Upload tile ---- */
+
+.upload-tile {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 10px 12px;
+  cursor: pointer;
+  margin-bottom: 12px;
+  background: var(--bg-card);
+  transition: border-color 0.15s, background 0.15s;
+}
+
+.upload-tile:hover {
+  border-color: var(--accent);
+  background: var(--accent-dim);
+}
+
+.upload-icon {
+  font-size: 15px;
+  color: var(--accent);
+  font-weight: 600;
+}
+
+.upload-text {
+  font-weight: 500;
+  color: var(--text-primary);
+  font-size: 13px;
+}
+
+/* ---- File meta ---- */
+
+.file-meta {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 8px 10px;
+  margin-bottom: 14px;
+}
+
+.file-meta-name {
+  font-weight: 600;
+  font-size: 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.file-meta-rows {
+  color: var(--text-secondary);
+  font-size: 11.5px;
+  margin-top: 2px;
+}
+
+/* ---- Sidebar sections ---- */
+
+.sidebar-section {
+  margin-bottom: 14px;
+}
+
+.sidebar-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  margin-bottom: 6px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.text-input {
+  width: 100%;
+  padding: 7px 10px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg-input);
+  color: var(--text-primary);
+  outline: none;
+  transition: border-color 0.15s;
+}
+
+.text-input:focus {
+  border-color: var(--accent);
+}
+
+.text-input:disabled,
+.multi-select:disabled,
+.range-input:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.date-row {
+  display: flex;
+  gap: 6px;
+}
+
+.date-row .text-input {
+  min-width: 0;
+}
+
+.multi-select {
+  width: 100%;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg-input);
+  color: var(--text-primary);
+  padding: 4px;
+  max-height: 100px;
+}
+
+.multi-select option {
+  padding: 4px 6px;
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+.range-input {
+  width: 100%;
+  accent-color: var(--accent);
+}
+
+.reset-btn {
+  margin-top: auto;
+  width: 100%;
+  padding: 8px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg-card);
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-weight: 500;
+  font-size: 12.5px;
+  transition: background 0.15s, color 0.15s;
+}
+
+.reset-btn:hover:not(:disabled) {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.reset-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ================ Main Panel ================ */
+
+.main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.topbar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 20px;
+  border-bottom: 1px solid var(--border);
+}
+
+.topbar-title {
+  font-weight: 600;
+  font-size: 14px;
+  flex: 1;
+  letter-spacing: -0.01em;
+}
+
+.secondary-btn {
+  padding: 7px 14px;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  background: var(--bg-card);
+  color: var(--text-primary);
+  cursor: pointer;
+  font-weight: 500;
+  font-size: 12.5px;
+  transition: background 0.15s;
+}
+
+.secondary-btn:hover:not(:disabled) {
+  background: var(--bg-hover);
+}
+
+.secondary-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px 28px 48px 28px;
+}
+
+/* ================ Empty State ================ */
+
+.empty-state {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.empty-card {
+  text-align: center;
+  max-width: 420px;
+}
+
+.empty-icon {
+  font-size: 36px;
+  margin-bottom: 8px;
+  opacity: 0.8;
+}
+
+.empty-card h1 {
+  font-size: 20px;
+  font-weight: 600;
+  margin: 0 0 6px 0;
+  letter-spacing: -0.02em;
+}
+
+.empty-card p {
+  color: var(--text-secondary);
+  line-height: 1.55;
+  margin: 0 0 18px 0;
+  font-size: 13px;
+}
+
+.empty-upload-btn {
+  display: inline-block;
+  padding: 9px 20px;
+  background: var(--accent);
+  color: #111;
+  border-radius: 6px;
+  font-weight: 600;
+  font-size: 13px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.empty-upload-btn:hover {
+  background: var(--accent-hover);
+}
+
+.empty-hint {
+  font-size: 11.5px;
+  color: var(--text-muted) !important;
+  margin-top: 12px !important;
+}
+
+/* ================ Metrics ================ */
+
+.metrics-row {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.metric-card {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 14px 16px;
+  background: var(--bg-card);
+}
+
+.metric-value {
+  font-size: 20px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+.metric-label {
+  color: var(--text-muted);
+  font-size: 11.5px;
+  margin-top: 3px;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+/* ================ Tabs ================ */
+
+.tabs {
+  display: flex;
+  gap: 2px;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 14px;
+}
+
+.tab-btn {
+  padding: 8px 14px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--text-muted);
+  font-weight: 500;
+  font-size: 13px;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  transition: color 0.15s;
+}
+
+.tab-btn.active {
+  color: var(--text-primary);
+  border-bottom-color: var(--accent);
+}
+
+.tab-btn:hover:not(.active) {
+  color: var(--text-secondary);
+}
+
+/* ================ Chart ================ */
+
+.chart-card {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 16px 18px;
+  background: var(--bg-card);
+  margin-bottom: 20px;
+}
+
+.chart-title {
+  font-weight: 600;
+  font-size: 13px;
+  margin-bottom: 12px;
+  color: var(--text-secondary);
+}
+
+.bar-chart {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-height: 580px;
+  overflow-y: auto;
+}
+
+.bar-row {
+  display: grid;
+  grid-template-columns: 160px 1fr 65px;
+  align-items: center;
+  gap: 10px;
+  font-size: 12px;
+}
+
+.bar-row .bar-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--text-secondary);
+  cursor: default;
+}
+
+.bar-track {
+  background: var(--bar-track);
+  border-radius: 3px;
+  height: 16px;
+  position: relative;
+  overflow: hidden;
+}
+
+.bar-fill {
+  background: var(--accent);
+  height: 100%;
+  border-radius: 3px;
+  transition: width 0.25s ease;
+}
+
+.bar-row .bar-value {
+  text-align: right;
+  color: var(--text-muted);
+  font-variant-numeric: tabular-nums;
+  font-size: 11.5px;
+}
+
+.chart-empty {
+  color: var(--text-muted);
+  padding: 20px 0;
+  text-align: center;
+  font-size: 12.5px;
+}
+
+/* ================ Table ================ */
+
+.table-section {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-card);
+  padding: 16px 18px 10px 18px;
+}
+
+.table-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.table-header h2 {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.table-wrap {
+  overflow-x: auto;
+  max-height: 440px;
+  overflow-y: auto;
+  border-top: 1px solid var(--border);
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+thead th {
+  position: sticky;
+  top: 0;
+  background: var(--bg-sidebar);
+  text-align: left;
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--border);
+  color: var(--text-muted);
+  font-weight: 600;
+  cursor: pointer;
+  white-space: nowrap;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+thead th:hover {
+  background: var(--bg-hover);
+}
+
+thead th .sort-indicator {
+  margin-left: 4px;
+  color: var(--text-muted);
+}
+
+tbody td {
+  padding: 7px 10px;
+  border-bottom: 1px solid var(--border-subtle);
+  white-space: nowrap;
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--text-secondary);
+}
+
+tbody tr:hover {
+  background: var(--bg-hover);
+}
+
+.pagination {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.pagination button {
+  border: 1px solid var(--border);
+  background: var(--bg-card);
+  border-radius: 5px;
+  padding: 4px 10px;
+  cursor: pointer;
+  color: var(--text-primary);
+  font-size: 12px;
+  transition: background 0.15s;
+}
+
+.pagination button:hover:not(:disabled) {
+  background: var(--bg-hover);
+}
+
+.pagination button:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+/* ================ Toast ================ */
+
+.toast {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--bg-card);
+  color: var(--text-primary);
+  padding: 9px 18px;
+  border-radius: 6px;
+  font-size: 12.5px;
+  border: 1px solid var(--border);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+  z-index: 999;
+}
+
+.toast.error {
+  border-color: var(--danger);
+  color: var(--danger);
+}
+
+/* ================ Scrollbar ================ */
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--text-muted);
+}
+
+/* ================ Responsive ================ */
+
+@media (max-width: 900px) {
+  .metrics-row {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .sidebar {
+    position: fixed;
+    z-index: 50;
+    height: 100vh;
+  }
+}

templates/index.html

@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="color-scheme" content="dark light" />
+  <title>Activity Time Explorer</title>
+  <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
+</head>
+
+<body>
+
+  <div class="app">
+
+    <!-- Sidebar (ChatGPT-style rail) -->
+    <aside class="sidebar" id="sidebar">
+      <div class="sidebar-header">
+        <span class="brand">Activity Explorer</span>
+        <button id="collapseBtn" class="icon-btn" title="Collapse sidebar">⟨⟨</button>
+      </div>
+
+      <label class="upload-tile" id="uploadTile">
+        <input type="file" id="fileInput" accept=".csv" hidden />
+        <span class="upload-icon">+</span>
+        <span class="upload-text">Upload CSV</span>
+      </label>
+      <div id="fileMeta" class="file-meta hidden">
+        <div class="file-meta-name" id="fileMetaName"></div>
+        <div class="file-meta-rows" id="fileMetaRows"></div>
+      </div>
+
+      <div class="sidebar-section">
+        <div class="sidebar-label">Search</div>
+        <input type="text" id="searchInput" class="text-input" placeholder="domain or URL contains…" disabled />
+      </div>
+
+      <div class="sidebar-section">
+        <div class="sidebar-label">Domain</div>
+        <select id="domainSelect" class="multi-select" multiple disabled></select>
+      </div>
+
+      <div class="sidebar-section">
+        <div class="sidebar-label">Date range</div>
+        <div class="date-row">
+          <input type="date" id="startDate" class="text-input" disabled />
+          <input type="date" id="endDate" class="text-input" disabled />
+        </div>
+      </div>
+
+      <div class="sidebar-section">
+        <div class="sidebar-label">End Reason</div>
+        <select id="reasonSelect" class="multi-select" multiple disabled></select>
+      </div>
+
+      <div class="sidebar-section">
+        <div class="sidebar-label">
+          Min duration per entry
+          <span id="minDurationLabel" class="muted">0s</span>
+        </div>
+        <input type="range" id="minDuration" class="range-input" min="0" max="0" value="0" disabled />
+      </div>
+
+      <button id="resetBtn" class="reset-btn" disabled>Reset filters</button>
+    </aside>
+
+    <!-- Main panel -->
+    <main class="main">
+      <div class="topbar">
+        <button id="expandBtn" class="icon-btn hidden" title="Expand sidebar">⟩⟩</button>
+        <div class="topbar-title">Activity Time Explorer</div>
+        <button id="downloadBtn" class="secondary-btn" disabled>↓ Download filtered CSV</button>
+      </div>
+
+      <div class="content">
+
+        <!-- Empty state -->
+        <div id="emptyState" class="empty-state">
+          <div class="empty-card">
+            <div class="empty-icon">—</div>
+            <h1>Explore your activity data</h1>
+            <p>Upload a browser activity time-tracking CSV to filter, search, and visualize time spent by domain and
+              URL.</p>
+            <label class="empty-upload-btn" for="fileInput">Upload CSV</label>
+            <p class="empty-hint">Expected columns: Domain, URL, Start Time (UTC), Total Duration (s), End Reason…</p>
+          </div>
+        </div>
+
+        <!-- Dashboard (hidden until data loaded) -->
+        <div id="dashboard" class="dashboard hidden">
+
+          <div class="metrics-row">
+            <div class="metric-card">
+              <div class="metric-value" id="metricEntries">0</div>
+              <div class="metric-label">Total entries</div>
+            </div>
+            <div class="metric-card">
+              <div class="metric-value" id="metricTime">0m 0s</div>
+              <div class="metric-label">Total time</div>
+            </div>
+            <div class="metric-card">
+              <div class="metric-value" id="metricDomains">0</div>
+              <div class="metric-label">Unique domains</div>
+            </div>
+            <div class="metric-card">
+              <div class="metric-value" id="metricUrls">0</div>
+              <div class="metric-label">Unique URLs</div>
+            </div>
+          </div>
+
+          <div class="tabs">
+            <button class="tab-btn active" data-tab="domain">By Domain</button>
+            <button class="tab-btn" data-tab="url">By URL</button>
+          </div>
+
+          <div class="tab-panel" id="tabDomain">
+            <div class="chart-card">
+              <div class="chart-title">Time spent by domain (top 25)</div>
+              <div id="domainChart" class="bar-chart"></div>
+              <div id="domainEmpty" class="chart-empty hidden">No data matches the current filters.</div>
+            </div>
+          </div>
+
+          <div class="tab-panel hidden" id="tabUrl">
+            <div class="chart-card">
+              <div class="chart-title">Time spent by URL (top 25)</div>
+              <div id="urlChart" class="bar-chart"></div>
+              <div id="urlEmpty" class="chart-empty hidden">No data matches the current filters.</div>
+            </div>
+          </div>
+
+          <div class="table-section">
+            <div class="table-header">
+              <h2>Filtered entries</h2>
+              <div class="pagination" id="pagination"></div>
+            </div>
+            <div class="table-wrap">
+              <table id="dataTable">
+                <thead id="tableHead"></thead>
+                <tbody id="tableBody"></tbody>
+              </table>
+            </div>
+          </div>
+
+        </div>
+
+      </div>
+    </main>
+  </div>
+
+  <div id="toast" class="toast hidden"></div>
+
+  <script src="{{ url_for('static', filename='app.js') }}"></script>
+</body>
+
+</html>