#develop show uncategorized

Author: bennobuilder

apps/desktop/src/routes/window.activity.overview/components/ActivityBalanceChart.tsx

@@ -19,7 +19,7 @@ export const ActivityBalanceChart: React.FC<TActivityBalanceChartProps> = (props
 	const bins = React.useMemo(() => computeBins(activities, startOfDay), [activities, startOfDay]);
 
 	const maxPositive = React.useMemo(
-		() => Math.max(1, ...bins.map((b) => b.focused + b.neutral)),
+		() => Math.max(1, ...bins.map((b) => b.focused + b.neutral + b.uncategorized)),
 		[bins]
 	);
 	const maxNegative = React.useMemo(() => Math.max(1, ...bins.map((b) => b.distracting)), [bins]);
@@ -84,21 +84,48 @@ export const ActivityBalanceChart: React.FC<TActivityBalanceChartProps> = (props
 								bin.focused > 0 ? Math.max((bin.focused / maxPositive) * halfH, minBarPx) : 0;
 							const neutralH =
 								bin.neutral > 0 ? Math.max((bin.neutral / maxPositive) * halfH, minBarPx) : 0;
+							const uncategorizedH =
+								bin.uncategorized > 0
+									? Math.max((bin.uncategorized / maxPositive) * halfH, minBarPx)
+									: 0;
 							const distractingH =
 								bin.distracting > 0
 									? Math.max((bin.distracting / maxNegative) * halfH, minBarPx)
 									: 0;
 
 							const focusedActivities = bin.activities.filter((a) => a.category === 'focused');
 							const neutralActivities = bin.activities.filter((a) => a.category === 'neutral');
+							const uncategorizedActivities = bin.activities.filter((a) =>
+								isUncategorizedActivity(a.category)
+							);
 							const distractingActivities = bin.activities.filter(
 								(a) => a.category === 'distracting'
 							);
 
 							return (
 								<div key={h} className="relative flex flex-1 flex-col">
-									{/* Upper half — focused (bottom) + neutral (top), touching axis */}
+									{/* Upper half — focused (bottom), neutral, uncategorized (top), touching axis */}
 									<div className="flex flex-col justify-end" style={{ height: halfH }}>
+										{uncategorizedH > 0 && (
+											<Tooltip
+												content={
+													<FocusCategoryTooltip
+														category={null}
+														durationMs={bin.uncategorized}
+														activities={uncategorizedActivities}
+													/>
+												}
+												side="bottom"
+											>
+												<div
+													className="w-full cursor-default hover:opacity-80"
+													style={{
+														height: uncategorizedH,
+														backgroundColor: categoryToColor(null)
+													}}
+												/>
+											</Tooltip>
+										)}
 										{neutralH > 0 && (
 											<Tooltip
 												content={
@@ -196,6 +223,7 @@ function computeBins(activities: specta.WindowActivityDto[], startOfDay: number)
 	const bins: THourBin[] = Array.from({ length: 24 }, () => ({
 		focused: 0,
 		neutral: 0,
+		uncategorized: 0,
 		distracting: 0,
 		activities: []
 	}));
@@ -215,6 +243,7 @@ function computeBins(activities: specta.WindowActivityDto[], startOfDay: number)
 			if (cat === 'focused') bin.focused += overlap;
 			else if (cat === 'neutral') bin.neutral += overlap;
 			else if (cat === 'distracting') bin.distracting += overlap;
+			else bin.uncategorized += overlap;
 
 			bin.activities.push({ ...activity, startedAt: clippedStart, endedAt: clippedEnd });
 		}
@@ -226,11 +255,16 @@ function computeBins(activities: specta.WindowActivityDto[], startOfDay: number)
 interface THourBin {
 	focused: number; // ms
 	neutral: number; // ms
+	uncategorized: number; // ms
 	distracting: number; // ms
 	/** Activities clipped to this hour's boundaries */
 	activities: specta.WindowActivityDto[];
 }
 
+function isUncategorizedActivity(category: specta.WindowActivityDto['category']): boolean {
+	return category !== 'focused' && category !== 'neutral' && category !== 'distracting';
+}
+
 function niceTickInterval(maxMs: number, maxTicks = 3): number {
 	const intervals = [60_000, 120_000, 300_000, 600_000, 900_000, 1_800_000, 3_600_000];
 	return intervals.find((i) => Math.ceil(maxMs / i) <= maxTicks) ?? 3_600_000;

apps/desktop/src/routes/window.activity.overview/components/FocusPulse.tsx

@@ -1,39 +1,44 @@
-import { Tooltip, TooltipProvider } from '@repo/ui';
+import { formatDuration, Tooltip, TooltipProvider } from '@repo/ui';
 import React from 'react';
 import type { specta } from '@/environment';
 import { categoryToColor, FocusCategoryTooltip } from '@/features/focus';
 
 export const FocusPulse: React.FC<TFocusPulseProps> = (props) => {
 	const { activities } = props;
 
-	const { focusedMs, neutralMs, distractingMs, score } = React.useMemo(() => {
-		let focusedMs = 0;
-		let neutralMs = 0;
-		let distractingMs = 0;
-		for (const a of activities) {
-			const dur = a.endedAt - a.startedAt;
-			if (a.category === 'focused') focusedMs += dur;
-			else if (a.category === 'neutral') neutralMs += dur;
-			else if (a.category === 'distracting') distractingMs += dur;
-		}
-		const totalMs = focusedMs + neutralMs + distractingMs;
-		const score =
-			totalMs === 0
-				? 0
-				: Math.min(100, Math.round(((focusedMs + neutralMs * 0.5) / totalMs) * 100));
-		return { focusedMs, neutralMs, distractingMs, score };
-	}, [activities]);
+	const { focusedMs, neutralMs, distractingMs, uncategorizedMs, categorizedMs, score } =
+		React.useMemo(() => {
+			let focusedMs = 0;
+			let neutralMs = 0;
+			let distractingMs = 0;
+			let uncategorizedMs = 0;
+			for (const a of activities) {
+				const dur = a.endedAt - a.startedAt;
+				if (a.category === 'focused') focusedMs += dur;
+				else if (a.category === 'neutral') neutralMs += dur;
+				else if (a.category === 'distracting') distractingMs += dur;
+				else uncategorizedMs += dur;
+			}
+			const categorizedMs = focusedMs + neutralMs + distractingMs;
+			const score =
+				categorizedMs === 0
+					? 0
+					: Math.min(100, Math.round(((focusedMs + neutralMs * 0.5) / categorizedMs) * 100));
+			return { focusedMs, neutralMs, distractingMs, uncategorizedMs, categorizedMs, score };
+		}, [activities]);
 
 	const size = 128;
 	const center = size / 2;
 	const r = 52;
 	const strokeWidth = 14;
 	const c = 2 * Math.PI * r;
-	const totalMs = focusedMs + neutralMs + distractingMs;
+	const totalMs = categorizedMs + uncategorizedMs;
 
 	const focusedLen = totalMs > 0 ? (focusedMs / totalMs) * c : 0;
 	const neutralLen = totalMs > 0 ? (neutralMs / totalMs) * c : 0;
 	const distractingLen = totalMs > 0 ? (distractingMs / totalMs) * c : 0;
+	const uncategorizedLen = totalMs > 0 ? (uncategorizedMs / totalMs) * c : 0;
+	const categorizedPct = totalMs > 0 ? Math.round((categorizedMs / totalMs) * 100) : 0;
 
 	const focusedActivities = React.useMemo(
 		() => activities.filter((activity) => activity.category === 'focused'),
@@ -47,6 +52,10 @@ export const FocusPulse: React.FC<TFocusPulseProps> = (props) => {
 		() => activities.filter((activity) => activity.category === 'distracting'),
 		[activities]
 	);
+	const uncategorizedActivities = React.useMemo(
+		() => activities.filter((activity) => isUncategorizedActivity(activity.category)),
+		[activities]
+	);
 
 	// MARK: - UI
 
@@ -147,6 +156,33 @@ export const FocusPulse: React.FC<TFocusPulseProps> = (props) => {
 								/>
 							</Tooltip>
 						)}
+						{/* Uncategorized arc */}
+						{uncategorizedLen > 0 && (
+							<Tooltip
+								content={
+									<FocusCategoryTooltip
+										category={null}
+										durationMs={uncategorizedMs}
+										activities={uncategorizedActivities}
+									/>
+								}
+								side="left"
+								positionerClassName="z-50"
+							>
+								<circle
+									cx={center}
+									cy={center}
+									r={r}
+									fill="none"
+									strokeWidth={strokeWidth}
+									stroke={categoryToColor(null)}
+									strokeDasharray={`${uncategorizedLen} ${c}`}
+									strokeDashoffset={-(focusedLen + neutralLen + distractingLen)}
+									transform={`rotate(-90 ${center} ${center})`}
+									className="cursor-default transition-opacity hover:opacity-80"
+								/>
+							</Tooltip>
+						)}
 					</svg>
 					{/* Score */}
 					<div className="pointer-events-none absolute inset-0 flex items-center justify-center">
@@ -156,6 +192,11 @@ export const FocusPulse: React.FC<TFocusPulseProps> = (props) => {
 
 				{/* Label */}
 				<span className="text-base-400 text-[11px]">focus score</span>
+				<span className="text-base-400 text-[11px]">
+					{uncategorizedMs > 0
+						? `${categorizedPct}% categorized · ${formatDuration(uncategorizedMs / 1000)} uncategorized`
+						: 'fully categorized'}
+				</span>
 			</div>
 		</TooltipProvider>
 	);
@@ -164,3 +205,7 @@ export const FocusPulse: React.FC<TFocusPulseProps> = (props) => {
 interface TFocusPulseProps {
 	activities: specta.WindowActivityDto[];
 }
+
+function isUncategorizedActivity(category: specta.WindowActivityDto['category']): boolean {
+	return category !== 'focused' && category !== 'neutral' && category !== 'distracting';
+}