[#515] Add top websites and window titles by grigor-dochev · Pull Request #522 · HASEL-UZH/PersonalAnalytics

grigor-dochev · 2026-05-11T10:56:19Z

Add Top Websites and Window Titles to Retrospection (Closes #515)

Description

Adds two new Retrospection detail cards that summarize where participants spent the most time during the selected day: top websites and top window titles. The cards use compact horizontal bars, durations, and relative percentages to make the details easy to scan alongside the existing Retrospection timeline and insights.

Changes Made

New Top websites card showing the top 3 website domains for the selected day
New Top window titles card showing the top 3 non-browsing window titles for the selected day
Website entries are derived from WorkRelatedBrowsing activity and grouped by domain, without showing the browser app name
Window title entries exclude browsing categories to avoid duplicating website activity
Other, Unknown, and Idle entries are filtered out before selecting the top 3
Relative percentage shown next to each duration, calculated within each card
Card accent colors reuse the existing Retrospection activity color mapping used by the timeline legend
Added IPC handlers and typed renderer commands for loading top websites and top window titles
Updated Retrospection session aggregation to support derived grouping keys such as website domains and cleaned window titles
Removed noisy service warnings for intentionally skipped rows during derived aggregation

Implementation Details

Retrospection session reconstruction now supports grouping by a derived key, not only direct fields such as processName or activity. This allows website domains to be extracted from URLs and window titles to be cleaned before aggregation.
getTopWebsiteSessions only considers WorkRelatedBrowsing entries, extracts the hostname from each URL, groups active time by domain, filters irrelevant values, sorts by total duration, and returns the top 3.
getTopWindowTitleSessions excludes browsing categories (WorkRelatedBrowsing, WorkUnrelatedBrowsing, and SocialMedia), strips matching app suffixes from window titles, groups active time by cleaned title, filters irrelevant values, sorts by total duration, and returns the top 3.
Each returned top item carries its source activity so the frontend can use the same category color mapping as the timeline.
Rows with no derived key are treated as expected separators during aggregation instead of creating log warnings.

Screenshots

Light mode	Dark mode

Closes #515

casaout

great start, thank you!

I now mostly reviewed UI; and will review the code once we've settled on the design

casaout · 2026-05-13T09:05:30Z


+        <!-- Website and window title details -->
+        <div v-if="topItemsAvailable">
+          <div class="mb-2 mt-8">


i don't think we'll need another title

also in terms of what is displayed, it's very similar to "top apps" and "top activities pursued" anyways

this will also help to reduce the window size

casaout · 2026-05-13T09:07:24Z

+              v-if="topWebsites.length"
+              class="top-item-card rounded border border-gray-200 bg-gray-100 px-4 py-3 text-gray-800 dark:border-transparent dark:bg-neutral-800 dark:text-slate-200"
+            >
+              <h2 class="primary-blue font-bold leading-4">Top websites</h2>


note that I don't see the "top website" box (tested on multiple days), even though "Microsoft Edge use" and "Work Related Browsing" was quite big overall

(so i couldn't test that feature yet)

casaout · 2026-05-13T09:11:10Z

+                        renderCompactTime(website.totalDurationMs)
+                      }}</span>
+                      <span class="top-item-percentage">{{
+                        getTopItemPercentage(website, topWebsites)


I think we should try to align the design slightly more to the existing design; few suggestions:

the numbering can be simplified (no rounded border); or maybe even removed as it'll be intuitive which one is the highest one?

the fonts should be the same as for the other insight boxes

in the dark mode, i think the light background of the chart is a bit too strong

i think we don't need to display the percentages (as the timeline chart will imply this anyways), and to have more space for the window title)

it can be made a bit more compact, to reduce the overall height of the insights

Great that you're using the activity colors; that's awesome!!

It already looks better, thank you. However, to me still looks a bit like it's in light mode (with the bright colors)...

I wonder if it'd work better if the barchart was the actual category color

the font was white (in dark mode) and dark (as is in light mode)? (then it'd look much more similar to the activities timeline (which also helps to clarify the colors)

And the "white" part could be white in light mode; and a very dark shade (i.e. the background color); so the white font would easily be readable

Also, can we vertically make it slightly more compact, such as by removing some of the top/bottom padding between the text and the barchart?

It already looks better, thank you. However, to me still looks a bit like it's in light mode (with the bright colors)...

I wonder if it'd work better if the barchart was the actual category color

the font was white (in dark mode) and dark (as is in light mode)? (then it'd look much more similar to the activities timeline (which also helps to clarify the colors)

And the "white" part could be white in light mode; and a very dark shade (i.e. the background color); so the white font would easily be readable

Also, can we vertically make it slightly more compact, such as by removing some of the top/bottom padding between the text and the barchart?

What do you think of this?

that's great, thanks! Do we need the broders at all? and how dos it look in light mode? thanks!

casaout · 2026-05-13T09:11:58Z

+                      <span class="top-item-time">{{
+                        renderCompactTime(website.totalDurationMs)
+                      }}</span>
+                      <span class="top-item-percentage">{{


once we finalize on the design of these "charts", i think we can uniformly use the same design (and CSS) for all 4 boxes: top apps/activities & websites

casaout · 2026-05-13T09:15:33Z

+  return await getWindowActivitySessionsByKey((activity) => activity[prop], date);
+}
+
+function getDomainFromUrl(url: string | null): string | null {


guiding from your screenshot, i think just having the domain is not sufficient to know what a person was doing; e.g. on github it could be specification, code review, browsing, etc

is it possible to show slightly more (i.e. the core part of the displayed window title)?

thanks for the updates, however,w ithout in-code documentation, it is very difficult to understand what exactly is done.

I suggest to make an example and describe the supsteps

casaout · 2026-05-13T09:17:21Z

+  }
+
+  if (processName) {
+    const suffixes = [` - ${processName}`, ` — ${processName}`, ` | ${processName}`];


i think one more cleaning step should be in case a path is part of the window title; see example:

casaout · 2026-05-13T09:19:23Z

+
+  if (processName) {
+    const suffixes = [` - ${processName}`, ` — ${processName}`, ` | ${processName}`];
+    const matchingSuffix = suffixes.find((suffix) => title.endsWith(suffix));


When matching an URL to an activity (not website); e.g. "Overleaf" to "read/write doucment", i think the window/browser cleaning doesn't fully work yet. it's great that it shows the website name first; but on hover one sees for example "4 or more pages"

casaout

thanks for the updates! To understand the "algorithm" for loading the actual datasets, extracting window titles, I think it'd be beneficial to add more documentation and rationale. otherwise, it's difficult to review the code, and also later maintain it. Thanks!

casaout · 2026-05-21T09:23:26Z

          </div>
+        </div>

+        <div v-if="topItemsAvailable" class="tile-grid mt-8">


spacing between the old rows and new rows is off (see red arrows):

(please make it lower for the new row, same as for the previous ones)

casaout · 2026-05-21T09:28:29Z


+type WindowActivitySessionKeySelector = (activity: WindowActivityEntity) => string | null;
+
+const BROWSER_PROCESS_NAMES = [


what do we need this list for? (please add a quick comment to remember this later)

also, i wonder if we could reuse the list from https://github.com/HASEL-UZH/PA.WindowsActivityTracker/blob/main/typescript/src/mappings/browsers.ts and then compare the process name instead of app name? (and also extend it with the list from there)

The tracker doesn't export the list a sa runtime import and it's being used to recognise the browser process names for title cleanup. So, for now, I've mirred the tracker browser mapping instead.

casaout · 2026-05-21T09:32:44Z

+  map.set(key, entry);
+}
+
+function addSessionWithActiveMinuteSplits(


can you briefly explain (and document) the goal and logic of this method?

casaout · 2026-05-21T09:34:10Z

-async function getWindowActivitySessionsByType(prop: "processName" | "activity", date: Date): Promise<ActivitySessions[]> {
-  const windowActivityToday = await getWindowActivities(date)
-  const activeMinutesSet = await getActiveMinutesSet(date)
+async function getWindowActivitySessionsByKey(


can you please explain this method a bit; and also what changed from the existing one?

what is a sessionkey?

casaout · 2026-05-21T09:34:56Z

+  return await getWindowActivitySessionsByKey((activity) => activity[prop], date);
+}
+
+function getDomainFromUrl(url: string | null): string | null {


thanks for the updates, however,w ithout in-code documentation, it is very difficult to understand what exactly is done.

I suggest to make an example and describe the supsteps

Add in-line comments and doc strings to RetrospectionService

[#515] Add top websites and window titles

7f35483

grigor-dochev requested a review from casaout May 11, 2026 10:56

grigor-dochev self-assigned this May 11, 2026

grigor-dochev added the enhancement label May 11, 2026

casaout requested changes May 13, 2026

View reviewed changes

grigor-dochev added 2 commits May 18, 2026 14:21

[#515] Address PR feedback

4f3ea1e

[#515] Address UI feedback

8599e7c

casaout reviewed May 21, 2026

View reviewed changes

[#515] Address PR feedback

cd5d6ea

Add in-line comments and doc strings to RetrospectionService


		type WindowActivitySessionKeySelector = (activity: WindowActivityEntity) => string \| null;

		const BROWSER_PROCESS_NAMES = [

Conversation

grigor-dochev commented May 11, 2026

Add Top Websites and Window Titles to Retrospection (Closes #515)

Description

Changes Made

Implementation Details

Screenshots

Uh oh!

casaout left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

casaout May 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

casaout left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

casaout May 18, 2026 •

edited

Loading