Upload 5 files

ui_pages/__init__.py

@@ -0,0 +1 @@
+# FocusTrack UI Pages

ui_pages/activity_log.py

@@ -0,0 +1,175 @@
+"""
+FocusTrack - Page 3: Activity Log
+Searchable, filterable, paginated activity table.
+"""
+
+import streamlit as st
+import pandas as pd
+from datetime import datetime, timedelta, date
+
+from ui_utils import (
+    fmt_duration, privacy_badge, page_header,
+    CATEGORY_COLORS, get_db, get_date_range
+)
+
+
+PAGE_SIZE = 50
+
+
+def render():
+    db = get_db()
+    privacy_badge()
+    page_header("Activity Log", "Browse and search all tracked sessions")
+
+    # ── Filters ───────────────────────────────────────────────────────────────
+    col1, col2, col3, col4 = st.columns([1.5, 1, 1, 1])
+
+    with col1:
+        search = st.text_input("🔍 Search", placeholder="App, title, or category…")
+
+    with col2:
+        range_sel = st.selectbox("Range", ["Today", "Yesterday", "Last 7 days", "Last 30 days", "Custom"], index=2)
+
+    start, end = get_date_range(range_sel)
+    if range_sel == "Custom":
+        with col3:
+            start_d = st.date_input("From", value=date.today() - timedelta(days=6))
+        with col4:
+            end_d = st.date_input("To", value=date.today())
+        start = datetime.combine(start_d, datetime.min.time())
+        end   = datetime.combine(end_d, datetime.max.time())
+
+    # Filter by category
+    cats = [c["name"] for c in db.get_categories()]
+    with col3 if range_sel != "Custom" else st.columns(1)[0]:
+        pass
+    cat_filter_col, show_idle_col = st.columns([2, 1])
+    with cat_filter_col:
+        selected_cats = st.multiselect("Filter by category", cats, default=[])
+    with show_idle_col:
+        show_idle = st.checkbox("Include idle", value=False)
+
+    # ── Count & Pagination ────────────────────────────────────────────────────
+    total_count = db.get_activity_count(start, end, search)
+
+    if "log_page" not in st.session_state:
+        st.session_state.log_page = 0
+    page = st.session_state.log_page
+    offset = page * PAGE_SIZE
+    total_pages = max(1, (total_count + PAGE_SIZE - 1) // PAGE_SIZE)
+
+    # ── Fetch Data ────────────────────────────────────────────────────────────
+    rows = db.get_activities(start, end, search=search, limit=PAGE_SIZE, offset=offset)
+
+    # Apply local filters
+    if selected_cats:
+        rows = [r for r in rows if r.get("category") in selected_cats]
+    if not show_idle:
+        rows = [r for r in rows if not r.get("is_idle")]
+
+    # ── Stats bar ─────────────────────────────────────────────────────────────
+    st.markdown(
+        f"<p style='color:#9090b0; font-size:0.8rem; margin:8px 0;'>"
+        f"Showing {len(rows)} of {total_count:,} records &nbsp;|&nbsp; "
+        f"Page {page + 1} of {total_pages}"
+        f"</p>",
+        unsafe_allow_html=True,
+    )
+
+    # ── Table ─────────────────────────────────────────────────────────────────
+    if rows:
+        html_rows = ""
+        for r in rows:
+            cat   = r.get("category", "uncategorized")
+            color = CATEGORY_COLORS.get(cat, "#6366f1")
+            ts    = r.get("timestamp", "")[:19].replace("T", " ")
+            is_idle_icon = "💤" if r.get("is_idle") else "●"
+            idle_color   = "#374151" if r.get("is_idle") else "#10b981"
+            dur   = fmt_duration(r.get("duration_seconds", 0))
+            app   = str(r.get("app_name", ""))[:30]
+            title = str(r.get("window_title", ""))[:60]
+
+            html_rows += f"""
+            <tr style="border-bottom:1px solid #1a1a2a; transition:background 0.15s;"
+                onmouseover="this.style.background='#1c1c27'" onmouseout="this.style.background='transparent'">
+                <td style="padding:9px 12px; font-family:'DM Mono',monospace; font-size:0.78rem; color:#9090b0; white-space:nowrap;">{ts}</td>
+                <td style="padding:9px 12px; font-weight:500; color:#f0f0ff; font-size:0.85rem;">{app}</td>
+                <td style="padding:9px 12px; color:#9090b0; font-size:0.82rem; max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">{title}</td>
+                <td style="padding:9px 12px; font-family:'DM Mono',monospace; font-size:0.82rem; color:#9090b0;">{dur}</td>
+                <td style="padding:9px 12px;">
+                    <span style="background:{color}22; color:{color}; border:1px solid {color}44;
+                          border-radius:20px; padding:2px 8px; font-size:0.7rem; font-weight:600; font-family:'DM Mono',monospace;">{cat}</span>
+                </td>
+                <td style="padding:9px 12px; color:{idle_color}; font-size:0.9rem;" title="{'Idle' if r.get('is_idle') else 'Active'}">{is_idle_icon}</td>
+            </tr>"""
+
+        st.markdown(f"""
+        <div style="overflow-x:auto; border:1px solid #2a2a3a; border-radius:12px; margin-bottom:1rem;">
+        <table style="width:100%; border-collapse:collapse; font-family:'Inter',sans-serif;">
+            <thead>
+                <tr style="background:#111118; color:#5a5a7a; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; border-bottom:1px solid #2a2a3a;">
+                    <th style="text-align:left; padding:10px 12px; font-weight:500;">Time</th>
+                    <th style="text-align:left; padding:10px 12px; font-weight:500;">App</th>
+                    <th style="text-align:left; padding:10px 12px; font-weight:500;">Window Title</th>
+                    <th style="text-align:left; padding:10px 12px; font-weight:500;">Duration</th>
+                    <th style="text-align:left; padding:10px 12px; font-weight:500;">Category</th>
+                    <th style="text-align:left; padding:10px 12px; font-weight:500;">Status</th>
+                </tr>
+            </thead>
+            <tbody>{html_rows}</tbody>
+        </table>
+        </div>
+        """, unsafe_allow_html=True)
+    else:
+        st.markdown("""
+        <div style="padding:3rem; text-align:center; border:1px dashed #2a2a3a; border-radius:12px; color:#5a5a7a;">
+            No activity records found for the selected filters.
+        </div>""", unsafe_allow_html=True)
+
+    # ── Pagination controls ───────────────────────────────────────────────────
+    pc1, pc2, pc3, pc4, pc5 = st.columns([1, 1, 2, 1, 1])
+    with pc1:
+        if st.button("⏮ First") and page > 0:
+            st.session_state.log_page = 0
+            st.rerun()
+    with pc2:
+        if st.button("◀ Prev") and page > 0:
+            st.session_state.log_page = page - 1
+            st.rerun()
+    with pc3:
+        st.markdown(
+            f"<div style='text-align:center; color:#9090b0; font-size:0.82rem; padding-top:8px;'>"
+            f"Page {page + 1} / {total_pages}</div>",
+            unsafe_allow_html=True,
+        )
+    with pc4:
+        if st.button("Next ▶") and page < total_pages - 1:
+            st.session_state.log_page = page + 1
+            st.rerun()
+    with pc5:
+        if st.button("Last ⏭") and page < total_pages - 1:
+            st.session_state.log_page = total_pages - 1
+            st.rerun()
+
+    # ── Export ────────────────────────────────────────────────────────────────
+    st.markdown("---")
+    all_rows = db.get_activities(start, end, search=search, limit=100000)
+    if all_rows:
+        df_export = pd.DataFrame(all_rows)
+        col_ex1, col_ex2 = st.columns([1, 1])
+        with col_ex1:
+            st.download_button(
+                "📥 Export visible data (CSV)",
+                df_export.to_csv(index=False).encode("utf-8"),
+                file_name="focustrack_log.csv",
+                mime="text/csv",
+                use_container_width=True,
+            )
+        with col_ex2:
+            st.download_button(
+                "📥 Export visible data (JSON)",
+                df_export.to_json(orient="records", indent=2).encode("utf-8"),
+                file_name="focustrack_log.json",
+                mime="application/json",
+                use_container_width=True,
+            )

ui_pages/analytics.py

@@ -0,0 +1,199 @@
+"""
+FocusTrack - Page 2: Analytics & Reports
+Date-range charts, heatmaps, export.
+"""
+
+import streamlit as st
+import plotly.express as px
+import plotly.graph_objects as go
+import pandas as pd
+import json
+import io
+from datetime import datetime, timedelta, date
+
+from ui_utils import (
+    fmt_duration, fmt_duration_long, get_focus_score,
+    privacy_badge, page_header, CATEGORY_COLORS, get_db, get_date_range
+)
+
+
+def render():
+    db = get_db()
+    privacy_badge()
+    page_header("Analytics & Reports", "Visualize your productivity trends")
+
+    # ── Date Range Selector ───────────────────────────────────────────────────
+    col_range, col_start, col_end = st.columns([1.5, 1, 1])
+    with col_range:
+        range_sel = st.selectbox(
+            "Date range",
+            ["Today", "Yesterday", "Last 7 days", "Last 30 days", "Custom"],
+            index=2,
+        )
+    start, end = get_date_range(range_sel)
+    if range_sel == "Custom":
+        with col_start:
+            start_d = st.date_input("From", value=date.today() - timedelta(days=6))
+        with col_end:
+            end_d = st.date_input("To", value=date.today())
+        start = datetime.combine(start_d, datetime.min.time())
+        end   = datetime.combine(end_d, datetime.max.time())
+
+    # ── Summary Metrics ───────────────────────────────────────────────────────
+    summary = db.get_summary(start, end)
+    focus_sec = summary.get("focus_seconds") or 0
+    idle_sec  = summary.get("idle_seconds") or 0
+    total_sec = summary.get("total_seconds") or 0
+
+    c1, c2, c3, c4 = st.columns(4)
+    with c1: st.metric("Total Focus Time", fmt_duration_long(focus_sec))
+    with c2: st.metric("Total Idle Time",  fmt_duration_long(idle_sec))
+    with c3: st.metric("Focus Score",      f"{get_focus_score(focus_sec, total_sec)}%")
+    with c4: st.metric("Tracked Time",     fmt_duration_long(total_sec))
+
+    st.markdown("<div style='height:0.75rem'></div>", unsafe_allow_html=True)
+
+    # ── Daily Activity Bar Chart ──────────────────────────────────────────────
+    daily = db.get_daily_totals(start, end)
+    if daily:
+        st.markdown("#### Daily Activity")
+        df_daily = pd.DataFrame(daily)
+        df_daily["focus_min"] = df_daily["focus_seconds"] / 60
+        df_daily["idle_min"]  = df_daily["idle_seconds"] / 60
+
+        fig = go.Figure()
+        fig.add_bar(
+            x=df_daily["day"], y=df_daily["focus_min"],
+            name="Focus", marker_color="#6366f1",
+            hovertemplate="<b>%{x}</b><br>Focus: %{y:.0f} min<extra></extra>"
+        )
+        fig.add_bar(
+            x=df_daily["day"], y=df_daily["idle_min"],
+            name="Idle", marker_color="#374151",
+            hovertemplate="<b>%{x}</b><br>Idle: %{y:.0f} min<extra></extra>"
+        )
+        fig.update_layout(
+            barmode="stack", height=280,
+            paper_bgcolor="rgba(0,0,0,0)", plot_bgcolor="rgba(0,0,0,0)",
+            font=dict(color="#9090b0", family="Inter"),
+            margin=dict(t=10, b=30, l=0, r=0),
+            xaxis=dict(showgrid=False),
+            yaxis=dict(showgrid=True, gridcolor="#2a2a3a", title="Minutes"),
+            legend=dict(orientation="h", yanchor="bottom", y=1, xanchor="left", x=0),
+        )
+        st.plotly_chart(fig, use_container_width=True, config={"displayModeBar": False})
+
+    # ── Two-column: Category Breakdown + Top Apps ─────────────────────────────
+    col_l, col_r = st.columns(2)
+
+    with col_l:
+        st.markdown("#### Time by Category")
+        cat_data = db.get_by_category(start, end)
+        if cat_data:
+            df_cat = pd.DataFrame(cat_data)
+            df_cat["minutes"] = df_cat["total_seconds"] / 60
+            colors = [CATEGORY_COLORS.get(c, "#6366f1") for c in df_cat["category"]]
+            fig_cat = px.bar(
+                df_cat, x="minutes", y="category", orientation="h",
+                color="category", color_discrete_map=CATEGORY_COLORS,
+                labels={"minutes": "Minutes", "category": ""},
+            )
+            fig_cat.update_layout(
+                height=300, showlegend=False,
+                paper_bgcolor="rgba(0,0,0,0)", plot_bgcolor="rgba(0,0,0,0)",
+                font=dict(color="#9090b0", family="Inter"),
+                margin=dict(t=10, b=30, l=0, r=0),
+                xaxis=dict(showgrid=True, gridcolor="#2a2a3a"),
+                yaxis=dict(showgrid=False),
+            )
+            st.plotly_chart(fig_cat, use_container_width=True, config={"displayModeBar": False})
+        else:
+            st.markdown("<p style='color:#5a5a7a'>No data for this range.</p>", unsafe_allow_html=True)
+
+    with col_r:
+        st.markdown("#### Top Apps Leaderboard")
+        apps_data = db.get_by_app(start, end, limit=10)
+        if apps_data:
+            df_apps = pd.DataFrame(apps_data)
+            df_apps["minutes"] = df_apps["total_seconds"] / 60
+            html = ""
+            max_min = df_apps["minutes"].max() or 1
+            for i, row in df_apps.iterrows():
+                cat   = row.get("category", "uncategorized")
+                color = CATEGORY_COLORS.get(cat, "#6366f1")
+                pct   = int((row["minutes"] / max_min) * 100)
+                rank  = i + 1
+                html += f"""
+                <div style="display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid #1e1e2e;">
+                    <div style="font-family:'DM Mono',monospace; font-size:0.8rem; color:#5a5a7a; min-width:20px;">#{rank}</div>
+                    <div style="flex:1; min-width:0;">
+                        <div style="font-size:0.85rem; font-weight:500; color:#f0f0ff; margin-bottom:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">{row['app_name'][:30]}</div>
+                        <div style="background:#1e1e2e; border-radius:4px; height:4px;">
+                            <div style="background:{color}; width:{pct}%; height:100%; border-radius:4px;"></div>
+                        </div>
+                    </div>
+                    <div style="font-family:'DM Mono',monospace; font-size:0.8rem; color:#9090b0; min-width:55px; text-align:right;">{fmt_duration(row['total_seconds'])}</div>
+                </div>"""
+            st.markdown(f'<div style="font-family:Inter,sans-serif;">{html}</div>', unsafe_allow_html=True)
+        else:
+            st.markdown("<p style='color:#5a5a7a'>No data for this range.</p>", unsafe_allow_html=True)
+
+    # ── Weekly Heatmap ────────────────────────────────────────────────────────
+    if range_sel in ("Last 7 days", "Last 30 days", "Custom"):
+        st.markdown("#### Weekly Activity Heatmap (hours × days)")
+        acts = db.get_activities(start, end, limit=50000)
+        if acts:
+            df_all = pd.DataFrame(acts)
+            df_all["dt"] = pd.to_datetime(df_all["timestamp"])
+            df_all["hour"] = df_all["dt"].dt.hour
+            df_all["day"]  = df_all["dt"].dt.strftime("%a %b %d")
+            heatmap = df_all.groupby(["day", "hour"])["duration_seconds"].sum().reset_index()
+            heatmap["minutes"] = heatmap["duration_seconds"] / 60
+            pivot = heatmap.pivot_table(index="day", columns="hour", values="minutes", fill_value=0)
+
+            fig_hm = go.Figure(go.Heatmap(
+                z=pivot.values,
+                x=[f"{h:02d}:00" for h in pivot.columns],
+                y=pivot.index.tolist(),
+                colorscale=[[0, "#0a0a0f"], [0.3, "#1a1a3a"], [0.7, "#4040a0"], [1, "#6366f1"]],
+                showscale=True,
+                hovertemplate="<b>%{y}</b> at <b>%{x}</b><br>%{z:.0f} minutes<extra></extra>",
+            ))
+            fig_hm.update_layout(
+                height=max(200, len(pivot) * 30 + 80),
+                paper_bgcolor="rgba(0,0,0,0)",
+                plot_bgcolor="rgba(0,0,0,0)",
+                font=dict(color="#9090b0", family="Inter"),
+                margin=dict(t=10, b=30, l=80, r=0),
+                xaxis=dict(tickfont=dict(size=9)),
+                yaxis=dict(tickfont=dict(size=9)),
+            )
+            st.plotly_chart(fig_hm, use_container_width=True, config={"displayModeBar": False})
+
+    # ── Export ────────────────────────────────────────────────────────────────
+    st.markdown("---")
+    st.markdown("#### Export Data")
+    col_ex1, col_ex2, col_ex3 = st.columns([1, 1, 4])
+
+    acts_for_export = db.get_activities(start, end, limit=100000)
+    if acts_for_export:
+        df_export = pd.DataFrame(acts_for_export)
+
+        with col_ex1:
+            csv_buf = df_export.to_csv(index=False).encode("utf-8")
+            st.download_button(
+                "📥 Export CSV", csv_buf,
+                file_name=f"focustrack_export_{start.date()}_{end.date()}.csv",
+                mime="text/csv", use_container_width=True
+            )
+
+        with col_ex2:
+            json_buf = df_export.to_json(orient="records", indent=2).encode("utf-8")
+            st.download_button(
+                "📥 Export JSON", json_buf,
+                file_name=f"focustrack_export_{start.date()}_{end.date()}.json",
+                mime="application/json", use_container_width=True
+            )
+    else:
+        st.markdown("<p style='color:#5a5a7a; font-size:0.85rem;'>No data to export for selected range.</p>",
+                    unsafe_allow_html=True)

ui_pages/dashboard.py

@@ -0,0 +1,253 @@
+"""
+FocusTrack - Page 1: Live Dashboard
+Real-time activity overview with charts and controls.
+"""
+
+import streamlit as st
+import plotly.express as px
+import plotly.graph_objects as go
+import pandas as pd
+from datetime import datetime, timedelta, date
+
+from ui_utils import (
+    fmt_duration, fmt_duration_long, get_focus_score,
+    privacy_badge, page_header, status_dot, category_pill,
+    CATEGORY_COLORS, get_db
+)
+
+
+def render():
+    db = get_db()
+    privacy_badge()
+    page_header("Live Dashboard", "Real-time activity overview")
+
+    # ── Current Session Card ──────────────────────────────────────────────────
+    latest = db.get_latest_activity()
+    tracker_status = db.get_setting("tracker_running", "true")
+
+    status_label = {
+        "true": ("running", "#10b981"),
+        "paused": ("paused", "#f59e0b"),
+        "false": ("stopped", "#f43f5e"),
+    }.get(tracker_status, ("unknown", "#6366f1"))
+
+    app_name = latest.get("app_name", "—") if latest else "—"
+    window   = latest.get("window_title", "—") if latest else "—"
+    category = latest.get("category", "—") if latest else "—"
+    cat_color = CATEGORY_COLORS.get(category, "#6366f1")
+
+    st.markdown(f"""
+    <div style="
+        background: linear-gradient(135deg, #16161f 0%, #1a1a2a 100%);
+        border: 1px solid #2a2a3a; border-left: 4px solid {cat_color};
+        border-radius: 16px; padding: 1.5rem 2rem; margin-bottom: 1.5rem;
+        display: flex; justify-content: space-between; align-items: center;
+        box-shadow: 0 4px 20px rgba(0,0,0,0.3);
+    ">
+        <div>
+            <div style="display:flex; align-items:center; gap:10px; margin-bottom:6px;">
+                <span style="font-size:0.75rem; color:#9090b0; font-family:'DM Mono',monospace; text-transform:uppercase; letter-spacing:0.1em;">NOW TRACKING</span>
+                <span style="background:{status_label[1]}22; color:{status_label[1]}; border:1px solid {status_label[1]}44; border-radius:20px; padding:2px 10px; font-size:0.7rem; font-weight:600;">● {status_label[0].upper()}</span>
+            </div>
+            <div style="font-family:'Syne',sans-serif; font-size:1.6rem; font-weight:700; color:#f0f0ff; margin-bottom:4px; letter-spacing:-0.02em;">
+                {app_name[:60]}
+            </div>
+            <div style="color:#9090b0; font-size:0.85rem; margin-bottom:8px; max-width:600px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">
+                {window[:80]}
+            </div>
+            <span style="background:{cat_color}22; color:{cat_color}; border:1px solid {cat_color}44; border-radius:20px; padding:3px 12px; font-size:0.72rem; font-weight:600; font-family:'DM Mono',monospace;">
+                {category}
+            </span>
+        </div>
+        <div style="text-align:right; color:#9090b0; font-family:'DM Mono',monospace; font-size:0.8rem;">
+            {datetime.now().strftime("%H:%M:%S")}
+        </div>
+    </div>
+    """, unsafe_allow_html=True)
+
+    # ── Summary Metrics ────────────────────────────────────────────────────────
+    today_start = datetime.combine(date.today(), datetime.min.time())
+    today_end   = datetime.combine(date.today(), datetime.max.time())
+    summary = db.get_summary(today_start, today_end)
+
+    focus_sec  = summary.get("focus_seconds") or 0
+    idle_sec   = summary.get("idle_seconds") or 0
+    total_sec  = summary.get("total_seconds") or 0
+    focus_score = get_focus_score(focus_sec, total_sec)
+
+    top_apps = db.get_by_app(today_start, today_end, limit=1)
+    top_app  = top_apps[0]["app_name"] if top_apps else "—"
+
+    c1, c2, c3, c4 = st.columns(4)
+    with c1:
+        st.metric("🎯 Focus Today",    fmt_duration_long(focus_sec),
+                  delta=f"+{fmt_duration(focus_sec)}" if focus_sec > 0 else None)
+    with c2:
+        st.metric("💤 Idle Time",      fmt_duration_long(idle_sec))
+    with c3:
+        pct_color = "normal" if focus_score >= 60 else "inverse"
+        st.metric("📊 Focus Score",    f"{focus_score}%",
+                  delta="Good" if focus_score >= 60 else "Low",
+                  delta_color=pct_color)
+    with c4:
+        st.metric("🏆 Top App",        top_app[:20] if top_app != "—" else "—")
+
+    st.markdown("<div style='height:1rem'></div>", unsafe_allow_html=True)
+
+    # ── Controls ──────────────────────────────────────────────────────────────
+    st.markdown("**Tracker Controls**")
+    col1, col2, col3, col4 = st.columns([1, 1, 1, 4])
+    with col1:
+        if st.button("▶ Start", use_container_width=True):
+            db.set_setting("tracker_running", "true")
+            st.toast("✅ Tracker started!", icon="▶")
+            st.rerun()
+    with col2:
+        if st.button("⏸ Pause", use_container_width=True):
+            db.set_setting("tracker_running", "paused")
+            st.toast("⏸ Tracker paused", icon="⏸")
+            st.rerun()
+    with col3:
+        if st.button("⏹ Stop", use_container_width=True):
+            db.set_setting("tracker_running", "false")
+            st.toast("⏹ Tracker stopped", icon="⏹")
+            st.rerun()
+
+    st.markdown("<div style='height:0.5rem'></div>", unsafe_allow_html=True)
+
+    # ── Charts Row ────────────────────────────────────────────────────────────
+    col_left, col_right = st.columns([1.1, 1.9])
+
+    with col_left:
+        st.markdown("#### Time by Category")
+        cat_data = db.get_by_category(today_start, today_end)
+        if cat_data:
+            df_cat = pd.DataFrame(cat_data)
+            df_cat["minutes"] = df_cat["total_seconds"] / 60
+            df_cat["label"] = df_cat.apply(
+                lambda r: f"{r['category']} ({fmt_duration(r['total_seconds'])})", axis=1
+            )
+            colors = [CATEGORY_COLORS.get(c, "#6366f1") for c in df_cat["category"]]
+            fig = go.Figure(go.Pie(
+                labels=df_cat["category"],
+                values=df_cat["minutes"],
+                hole=0.55,
+                marker=dict(colors=colors, line=dict(width=2, color="#0a0a0f")),
+                textinfo="label+percent",
+                textfont=dict(size=11, family="Inter"),
+                hovertemplate="<b>%{label}</b><br>%{value:.0f} min<br>%{percent}<extra></extra>",
+            ))
+            fig.update_layout(
+                showlegend=False,
+                margin=dict(t=20, b=20, l=20, r=20),
+                height=300,
+                paper_bgcolor="rgba(0,0,0,0)",
+                plot_bgcolor="rgba(0,0,0,0)",
+                font=dict(color="#9090b0", family="Inter"),
+                annotations=[dict(
+                    text=f"<b>{fmt_duration(focus_sec)}</b>",
+                    x=0.5, y=0.5, font_size=16,
+                    font_family="Syne", font_color="#f0f0ff",
+                    showarrow=False
+                )]
+            )
+            st.plotly_chart(fig, use_container_width=True, config={"displayModeBar": False})
+        else:
+            st.markdown("""
+            <div style="height:280px; display:flex; align-items:center; justify-content:center;
+                        color:#5a5a7a; font-size:0.9rem; border:1px dashed #2a2a3a; border-radius:12px;">
+                No data yet today. Start the tracker to begin.
+            </div>""", unsafe_allow_html=True)
+
+    with col_right:
+        st.markdown("#### Hourly Activity Timeline")
+        hourly = db.get_hourly_timeline(date.today())
+        if hourly:
+            df_h = pd.DataFrame(hourly)
+            df_h["hour_label"] = df_h["hour"].apply(lambda h: f"{int(h):02d}:00")
+            df_h["minutes"] = df_h["total_seconds"] / 60
+            df_h["color"] = df_h["category"].map(lambda c: CATEGORY_COLORS.get(c, "#6366f1"))
+
+            fig2 = px.bar(
+                df_h, x="hour_label", y="minutes",
+                color="category",
+                color_discrete_map=CATEGORY_COLORS,
+                labels={"hour_label": "Hour", "minutes": "Minutes"},
+                barmode="stack",
+            )
+            fig2.update_layout(
+                margin=dict(t=20, b=30, l=0, r=0),
+                height=300,
+                paper_bgcolor="rgba(0,0,0,0)",
+                plot_bgcolor="rgba(0,0,0,0)",
+                font=dict(color="#9090b0", family="Inter"),
+                xaxis=dict(showgrid=False, tickfont=dict(size=10)),
+                yaxis=dict(showgrid=True, gridcolor="#2a2a3a", tickfont=dict(size=10)),
+                legend=dict(
+                    orientation="h", yanchor="bottom", y=1.02,
+                    xanchor="left", x=0, font=dict(size=10)
+                ),
+                bargap=0.15,
+            )
+            st.plotly_chart(fig2, use_container_width=True, config={"displayModeBar": False})
+        else:
+            st.markdown("""
+            <div style="height:280px; display:flex; align-items:center; justify-content:center;
+                        color:#5a5a7a; font-size:0.9rem; border:1px dashed #2a2a3a; border-radius:12px;">
+                No hourly data yet for today.
+            </div>""", unsafe_allow_html=True)
+
+    # ── Top Apps Table ────────────────────────────────────────────────────────
+    st.markdown("#### Top Apps Today")
+    top_apps_data = db.get_by_app(today_start, today_end, limit=8)
+    if top_apps_data:
+        df_apps = pd.DataFrame(top_apps_data)
+        df_apps["time"] = df_apps["total_seconds"].apply(fmt_duration_long)
+        df_apps["pct"] = df_apps["total_seconds"].apply(
+            lambda s: f"{(s / focus_sec * 100):.0f}%" if focus_sec > 0 else "—"
+        )
+        # Render as styled rows
+        html_rows = ""
+        for _, row in df_apps.iterrows():
+            cat = row.get("category", "uncategorized")
+            color = CATEGORY_COLORS.get(cat, "#6366f1")
+            bar_w = int((row["total_seconds"] / (df_apps["total_seconds"].max() or 1)) * 100)
+            html_rows += f"""
+            <tr style="border-bottom:1px solid #1e1e2e;">
+                <td style="padding:10px 12px; font-weight:500; color:#f0f0ff;">{row['app_name'][:40]}</td>
+                <td style="padding:10px 12px;">
+                    <span style="background:{color}22; color:{color}; border:1px solid {color}44;
+                          border-radius:20px; padding:2px 8px; font-size:0.7rem; font-family:'DM Mono',monospace;">{cat}</span>
+                </td>
+                <td style="padding:10px 12px; font-family:'DM Mono',monospace; font-size:0.85rem;">{row['time']}</td>
+                <td style="padding:10px 24px 10px 12px; min-width:120px;">
+                    <div style="background:#1e1e2e; border-radius:4px; height:6px; overflow:hidden;">
+                        <div style="background:{color}; width:{bar_w}%; height:100%; border-radius:4px;"></div>
+                    </div>
+                </td>
+            </tr>"""
+
+        st.markdown(f"""
+        <table style="width:100%; border-collapse:collapse; font-size:0.85rem; font-family:'Inter',sans-serif;">
+            <thead>
+                <tr style="color:#5a5a7a; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; border-bottom:1px solid #2a2a3a;">
+                    <th style="text-align:left; padding:8px 12px; font-weight:500;">App</th>
+                    <th style="text-align:left; padding:8px 12px; font-weight:500;">Category</th>
+                    <th style="text-align:left; padding:8px 12px; font-weight:500;">Time</th>
+                    <th style="text-align:left; padding:8px 24px 8px 12px; font-weight:500;">Share</th>
+                </tr>
+            </thead>
+            <tbody>{html_rows}</tbody>
+        </table>
+        """, unsafe_allow_html=True)
+    else:
+        st.markdown("<p style='color:#5a5a7a; font-size:0.85rem;'>No app data yet. Start tracking!</p>",
+                    unsafe_allow_html=True)
+
+    # Auto-refresh every 10 seconds
+    if st.session_state.get("auto_refresh", True):
+        import time
+        st.markdown("""
+        <script>
+        setTimeout(() => window.location.reload(), 15000);
+        </script>""", unsafe_allow_html=True)

ui_pages/settings.py

@@ -0,0 +1,262 @@
+"""
+FocusTrack - Page 4: Settings
+Configure tracker behavior, categories, and data management.
+"""
+
+import streamlit as st
+import json
+import shutil
+from datetime import datetime
+from pathlib import Path
+
+from ui_utils import privacy_badge, page_header, CATEGORY_COLORS, get_db
+
+DB_PATH = Path(__file__).parent.parent / "data" / "activity.db"
+
+
+def render():
+    db = get_db()
+    privacy_badge()
+    page_header("Settings", "Configure FocusTrack to your workflow")
+
+    settings = db.get_all_settings()
+
+    tab1, tab2, tab3, tab4 = st.tabs(["⚙️ Tracker", "🏷️ Categories", "🗄️ Data & Backup", "🎨 Appearance"])
+
+    # ─── Tab 1: Tracker Settings ──────────────────────────────────────────────
+    with tab1:
+        st.markdown("#### Tracking Behavior")
+
+        col1, col2 = st.columns(2)
+        with col1:
+            idle_threshold = st.number_input(
+                "Idle threshold (seconds)",
+                min_value=30, max_value=3600,
+                value=int(settings.get("idle_threshold_seconds", 300)),
+                step=30,
+                help="User is considered idle after this many seconds without mouse/keyboard activity."
+            )
+
+            heartbeat = st.number_input(
+                "Heartbeat interval (seconds)",
+                min_value=1, max_value=60,
+                value=int(settings.get("heartbeat_interval", 5)),
+                step=1,
+                help="How often activity is logged. Lower = more granular, higher = less CPU."
+            )
+
+        with col2:
+            ignored_raw = settings.get("ignored_apps", '[]')
+            try:
+                ignored_list = json.loads(ignored_raw)
+            except Exception:
+                ignored_list = []
+
+            ignored_text = st.text_area(
+                "Ignored apps (one per line)",
+                value="\n".join(ignored_list),
+                height=120,
+                help="Apps listed here will not be tracked."
+            )
+
+            auto_start = st.toggle(
+                "Auto-start tracker on launch",
+                value=settings.get("auto_start", "false") == "true"
+            )
+
+        if st.button("💾 Save Tracker Settings", use_container_width=False):
+            db.set_setting("idle_threshold_seconds", str(idle_threshold))
+            db.set_setting("heartbeat_interval", str(heartbeat))
+            db.set_setting("auto_start", "true" if auto_start else "false")
+            new_ignored = [a.strip() for a in ignored_text.strip().split("\n") if a.strip()]
+            db.set_setting("ignored_apps", json.dumps(new_ignored))
+            st.toast("✅ Tracker settings saved!", icon="✅")
+            st.rerun()
+
+        st.markdown("---")
+        st.markdown("#### Tracker Status")
+
+        status = db.get_setting("tracker_running", "true")
+        status_map = {"true": ("🟢 Running", "#10b981"), "paused": ("🟡 Paused", "#f59e0b"), "false": ("🔴 Stopped", "#f43f5e")}
+        label, color = status_map.get(status, ("Unknown", "#6366f1"))
+        st.markdown(
+            f"<span style='color:{color}; font-size:1rem; font-weight:600;'>{label}</span>",
+            unsafe_allow_html=True
+        )
+
+        col_s1, col_s2, col_s3 = st.columns([1, 1, 1])
+        with col_s1:
+            if st.button("▶ Start", use_container_width=True):
+                db.set_setting("tracker_running", "true")
+                st.toast("Tracker started")
+                st.rerun()
+        with col_s2:
+            if st.button("⏸ Pause", use_container_width=True):
+                db.set_setting("tracker_running", "paused")
+                st.toast("Tracker paused")
+                st.rerun()
+        with col_s3:
+            if st.button("⏹ Stop", use_container_width=True):
+                db.set_setting("tracker_running", "false")
+                st.toast("Tracker stopped")
+                st.rerun()
+
+    # ─── Tab 2: Categories ────────────────────────────────────────────────────
+    with tab2:
+        st.markdown("#### Category Rules")
+        st.markdown("<p style='color:#9090b0; font-size:0.85rem;'>Define which apps and keywords map to which category. The tracker uses these rules to auto-categorize activity.</p>", unsafe_allow_html=True)
+
+        cats = db.get_categories()
+
+        for cat in cats:
+            with st.expander(f"{'●'} {cat['name'].title()}", expanded=False):
+                col_n, col_c = st.columns([3, 1])
+                with col_n:
+                    cat_name = st.text_input("Name", value=cat["name"], key=f"cname_{cat['id']}")
+                with col_c:
+                    cat_color = st.color_picker("Color", value=cat["color"], key=f"ccolor_{cat['id']}")
+
+                try:
+                    kw_list = json.loads(cat["keywords"] or "[]")
+                    app_list = json.loads(cat["apps"] or "[]")
+                except Exception:
+                    kw_list, app_list = [], []
+
+                col_k, col_a = st.columns(2)
+                with col_k:
+                    kw_text = st.text_area(
+                        "Keywords (one per line)",
+                        value="\n".join(kw_list),
+                        height=100,
+                        key=f"kw_{cat['id']}",
+                        help="These words are matched against app name and window title."
+                    )
+                with col_a:
+                    app_text = st.text_area(
+                        "App names (one per line)",
+                        value="\n".join(app_list),
+                        height=100,
+                        key=f"apps_{cat['id']}",
+                        help="Partial matches against the process/app name."
+                    )
+
+                col_save, col_del = st.columns([1, 1])
+                with col_save:
+                    if st.button("💾 Save", key=f"save_cat_{cat['id']}", use_container_width=True):
+                        new_kw  = [k.strip() for k in kw_text.strip().split("\n") if k.strip()]
+                        new_app = [a.strip() for a in app_text.strip().split("\n") if a.strip()]
+                        db.upsert_category(cat_name, cat_color, new_kw, new_app)
+                        st.toast(f"✅ '{cat_name}' saved")
+                        st.rerun()
+                with col_del:
+                    if cat["name"] not in ("idle", "uncategorized"):
+                        if st.button("🗑 Delete", key=f"del_cat_{cat['id']}", use_container_width=True):
+                            db.delete_category(cat["name"])
+                            st.toast(f"Deleted '{cat['name']}'")
+                            st.rerun()
+
+        st.markdown("---")
+        st.markdown("#### Add New Category")
+        nc1, nc2, nc3 = st.columns([2, 1, 1])
+        with nc1:
+            new_cat_name = st.text_input("Category name", placeholder="e.g. learning")
+        with nc2:
+            new_cat_color = st.color_picker("Color", value="#6366f1")
+        with nc3:
+            st.markdown("<div style='margin-top:28px'></div>", unsafe_allow_html=True)
+            if st.button("➕ Add Category", use_container_width=True):
+                if new_cat_name.strip():
+                    db.upsert_category(new_cat_name.strip(), new_cat_color, [], [])
+                    st.toast(f"✅ Added '{new_cat_name}'")
+                    st.rerun()
+
+    # ─── Tab 3: Data & Backup ─────────────────────────────────────────────────
+    with tab3:
+        st.markdown("#### Database Info")
+
+        db_size = db.get_db_size_mb()
+        from datetime import date
+        from datetime import datetime as dt2
+        from ui_utils import get_date_range
+        start, end = get_date_range("Last 30 days")
+        count = db.get_activity_count(start, end)
+
+        col_i1, col_i2, col_i3 = st.columns(3)
+        with col_i1:
+            st.metric("Database Size", f"{db_size:.2f} MB")
+        with col_i2:
+            st.metric("Records (30d)", f"{count:,}")
+        with col_i3:
+            st.metric("DB Location", "Local only ✅")
+
+        st.code(str(DB_PATH), language=None)
+
+        st.markdown("---")
+        st.markdown("#### Backup Database")
+        col_b1, col_b2 = st.columns([1, 2])
+        with col_b1:
+            if st.button("📦 Download Backup", use_container_width=True):
+                if DB_PATH.exists():
+                    with open(DB_PATH, "rb") as f:
+                        data = f.read()
+                    st.download_button(
+                        "💾 Save activity.db",
+                        data,
+                        file_name=f"focustrack_backup_{datetime.now().strftime('%Y%m%d_%H%M%S')}.db",
+                        mime="application/octet-stream",
+                        use_container_width=True,
+                    )
+
+        st.markdown("---")
+        st.markdown("#### Restore Database")
+        uploaded = st.file_uploader("Upload a backup .db file", type=["db"])
+        if uploaded:
+            if st.button("⚠️ Restore from backup (overwrites current data)"):
+                DB_PATH.write_bytes(uploaded.read())
+                if "db" in st.session_state:
+                    del st.session_state["db"]
+                st.toast("✅ Database restored! Please refresh the page.", icon="✅")
+
+        st.markdown("---")
+        st.markdown("#### Danger Zone")
+        st.markdown(
+            "<div style='background:#1a0a0f; border:1px solid #4a1a2a; border-radius:12px; padding:1.25rem; margin-bottom:1rem;'>"
+            "<p style='color:#f43f5e; font-weight:600; margin:0 0 8px;'>⚠️ Clear All Data</p>"
+            "<p style='color:#9090b0; font-size:0.85rem; margin:0;'>This permanently deletes all tracked activity. This action cannot be undone.</p>"
+            "</div>",
+            unsafe_allow_html=True,
+        )
+        confirm = st.text_input("Type DELETE to confirm")
+        if st.button("🗑 Clear All Activity Data", type="secondary"):
+            if confirm == "DELETE":
+                db.clear_all_data()
+                st.toast("All data cleared.")
+                st.rerun()
+            else:
+                st.error("Please type DELETE to confirm.")
+
+    # ─── Tab 4: Appearance ────────────────────────────────────────────────────
+    with tab4:
+        st.markdown("#### Theme")
+        current_theme = db.get_setting("theme", "dark")
+        theme = st.radio(
+            "Color mode",
+            ["dark", "light"],
+            index=0 if current_theme == "dark" else 1,
+            horizontal=True,
+        )
+        if theme != current_theme:
+            db.set_setting("theme", theme)
+            st.toast("Theme updated — refresh to apply.")
+            st.rerun()
+
+        st.markdown("---")
+        st.markdown("#### About FocusTrack")
+        st.markdown("""
+        <div style="background:#16161f; border:1px solid #2a2a3a; border-radius:12px; padding:1.5rem;">
+            <h3 style="font-family:'Syne',sans-serif; margin:0 0 8px; color:#f0f0ff;">FocusTrack v1.0</h3>
+            <p style="color:#9090b0; font-size:0.85rem; margin:0 0 4px;">100% local, privacy-first productivity tracker.</p>
+            <p style="color:#9090b0; font-size:0.85rem; margin:0 0 4px;">Built with Python 3.11+ · Streamlit · SQLite · Plotly</p>
+            <p style="color:#5a5a7a; font-size:0.8rem; margin:0;">No internet • No accounts • No cloud • Your data never leaves your device.</p>
+        </div>
+        """, unsafe_allow_html=True)