pacatui 0.1.0 → 0.1.5

package/README.md

@@ -1,6 +1,8 @@
 # Paca
 
-A simple tui app for task, timer and invoicing for projects.
+![Paca](assets/paca-mascot.png "Paca - the friendly alpaca mascot")
+
+A simple TUI app for task, timer and invoicing for projects.
 
 ![License](https://img.shields.io/npm/l/pacatui)
 ![npm](https://img.shields.io/npm/v/pacatui)
@@ -21,16 +23,15 @@ A simple tui app for task, timer and invoicing for projects.
 
 ### Via npm (recommended)
 
-Requires [Bun](https://bun.sh) runtime.
-
 ```bash
-# Install bun if you haven't already
-curl -fsSL https://bun.sh/install | bash
+npm install -g pacatui
+paca
+```
 
-# Install pacatui globally
-bun install -g pacatui
+### Via bun
 
-# Run it
+```bash
+bun install -g pacatui
 paca
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pacatui",
-  "version": "0.1.0",
+  "version": "0.1.5",
   "description": "A simple tui app for task, timer and invoicing for projects.",
   "module": "src/index.tsx",
   "type": "module",
@@ -11,7 +11,8 @@
   "files": [
     "src",
     "prisma",
-    "generated"
+    "generated",
+    "assets"
   ],
   "scripts": {
     "start": "bun run src/index.tsx",
@@ -20,7 +21,8 @@
     "db:push": "bunx prisma db push",
     "db:studio": "bunx prisma studio",
     "postinstall": "bunx prisma generate",
-    "prepublishOnly": "bunx prisma generate"
+    "prepublishOnly": "bunx prisma generate",
+    "release": "bunx bumpp && bun publish --access public"
   },
   "keywords": [
     "tui",
@@ -64,6 +66,8 @@
     "@prisma/adapter-libsql": "^7.2.0",
     "@prisma/client": "^7.2.0",
     "better-sqlite3": "^12.6.0",
+    "paca": "^1.0.10",
+    "pacatui": "^0.1.1",
     "prisma": "^7.2.0",
     "react": "^19.2.3",
     "stripe": "^20.2.0"

package/src/App.tsx

@@ -14,7 +14,6 @@ import {
 	ProjectModal,
 	ProjectSelectModal,
 	StopTimerModal,
-	SplashScreen,
 	TimesheetView,
 	CustomerModal,
 	CustomerSelectModal,
@@ -32,7 +31,7 @@ import {
 	customers,
 	invoices,
 } from "./db.ts";
-import { getOrCreateStripeCustomer, createDraftInvoice, listInvoices, type StripeInvoiceItem } from "./stripe.ts";
+import { getOrCreateStripeCustomer, createDraftInvoice, listInvoices, clearInvoiceCache, type StripeInvoiceItem } from "./stripe.ts";
 import {
 	getEffectiveTimezone,
 	type View,
@@ -47,6 +46,7 @@ import {
 	type Customer,
 	type TimeEntry,
 	type TimeEntryWithProject,
+	type WeeklyTimeData,
 } from "./types.ts";
 
 function formatDuration(ms: number): string {
@@ -64,9 +64,6 @@ function formatDuration(ms: number): string {
 export function App() {
 	const renderer = useRenderer();
 
-	// Splash Screen State
-	const [showSplash, setShowSplash] = useState(true);
-
 	// View & Navigation State
 	const [currentView, setCurrentView] = useState<View>("dashboard");
 	const [activePanel, setActivePanel] = useState<Panel>("projects");
@@ -89,6 +86,7 @@ export function App() {
 	const [recentTasks, setRecentTasks] = useState<
 		(Task & { project: { name: string; color: string } })[]
 	>([]);
+	const [weeklyTimeData, setWeeklyTimeData] = useState<WeeklyTimeData[]>([]);
 
 	// Timer State
 	const [runningTimer, setRunningTimer] = useState<RunningTimer | null>(null);
@@ -171,14 +169,16 @@ export function App() {
 	}, [projectList, selectedProjectIndex, selectedTaskIndex]);
 
 	const loadDashboard = useCallback(async () => {
-		const [statsData, recent] = await Promise.all([
+		const [statsData, recent, weeklyTime] = await Promise.all([
 			stats.getDashboardStats(),
 			stats.getRecentActivity(10),
+			stats.getWeeklyTimeStats(6),
 		]);
 		setDashboardStats(statsData);
 		setRecentTasks(
 			recent as (Task & { project: { name: string; color: string } })[],
 		);
+		setWeeklyTimeData(weeklyTime);
 	}, []);
 
 	const loadRunningTimer = useCallback(async () => {
@@ -204,21 +204,27 @@ export function App() {
 		setCustomerList(data);
 	}, []);
 
-	const loadStripeInvoices = useCallback(async (cursor?: string, isNextPage = false) => {
+	const loadStripeInvoices = useCallback(async (cursor?: string, isNextPage = false, forceRefresh = false) => {
 		if (!appSettings.stripeApiKey) {
 			setStripeInvoices([]);
 			setInvoicesError(null);
 			return;
 		}
 
-		setInvoicesLoading(true);
+		// Only show loading spinner if we don't have existing data
+		const showLoading = stripeInvoices.length === 0;
+		if (showLoading) {
+			setInvoicesLoading(true);
+		}
 		setInvoicesError(null);
 
 		try {
-			const result = await listInvoices(appSettings.stripeApiKey, 25, cursor);
+			const result = await listInvoices(appSettings.stripeApiKey, 25, cursor, forceRefresh);
 			setStripeInvoices(result.invoices);
 			setInvoicesHasMore(result.hasMore);
-			setSelectedInvoiceIndex(0);
+			if (showLoading || isNextPage) {
+				setSelectedInvoiceIndex(0);
+			}
 
 			// Track cursor for pagination
 			if (isNextPage && cursor) {
@@ -230,7 +236,7 @@ export function App() {
 		} finally {
 			setInvoicesLoading(false);
 		}
-	}, [appSettings.stripeApiKey]);
+	}, [appSettings.stripeApiKey, stripeInvoices.length]);
 
 	const loadTimesheets = useCallback(async () => {
 		const entries = await timeEntries.getUninvoiced();
@@ -287,12 +293,6 @@ export function App() {
 		}
 	}, [selectedTimesheetGroupIndex, selectedTimeEntryIndex]);
 
-	// Hide splash screen after 2 seconds
-	useEffect(() => {
-		const timer = setTimeout(() => setShowSplash(false), 1000);
-		return () => clearTimeout(timer);
-	}, []);
-
 	// Initial load
 	useEffect(() => {
 		loadProjects();
@@ -512,27 +512,43 @@ export function App() {
 			return;
 		}
 
-		// Toggle status
+		// Toggle status (update locally to preserve order)
 		if (key.name === "space" && recentTasks[selectedDashboardTaskIndex]) {
 			const task = recentTasks[selectedDashboardTaskIndex];
 			if (task) {
+				const statusCycle: Record<string, string> = {
+					todo: "in_progress",
+					in_progress: "done",
+					done: "todo",
+				};
+				const newStatus = statusCycle[task.status] || "todo";
 				tasks.toggleStatus(task.id).then(() => {
-					loadDashboard();
+					// Update local state without reordering
+					setRecentTasks((prev) =>
+						prev.map((t) =>
+							t.id === task.id ? { ...t, status: newStatus } : t,
+						),
+					);
 				});
 			}
 			return;
 		}
 
-		// Cycle priority
+		// Cycle priority (update locally to preserve order)
 		if (key.name === "p" && recentTasks[selectedDashboardTaskIndex]) {
 			const task = recentTasks[selectedDashboardTaskIndex];
 			if (task) {
-				const priorities = ["low", "medium", "high", "urgent"];
-				const currentIndex = priorities.indexOf(task.priority);
-				const nextPriority = priorities[(currentIndex + 1) % priorities.length];
+				const priorities = ["low", "medium", "high", "urgent"] as const;
+				const currentIndex = priorities.indexOf(task.priority as typeof priorities[number]);
+				const nextPriority = priorities[(currentIndex + 1) % priorities.length] ?? "low";
 				tasks.update(task.id, { priority: nextPriority }).then(() => {
 					showMessage(`Priority: ${nextPriority}`);
-					loadDashboard();
+					// Update local state without reordering
+					setRecentTasks((prev) =>
+						prev.map((t) =>
+							t.id === task.id ? { ...t, priority: nextPriority } : t,
+						),
+					);
 				});
 			}
 			return;
@@ -686,12 +702,23 @@ export function App() {
 			return;
 		}
 
-		// Toggle status
+		// Toggle status (update locally to preserve order)
 		if (key.name === "space" && taskList[selectedTaskIndex]) {
 			const task = taskList[selectedTaskIndex];
 			if (task) {
+				const statusCycle: Record<string, string> = {
+					todo: "in_progress",
+					in_progress: "done",
+					done: "todo",
+				};
+				const newStatus = statusCycle[task.status] || "todo";
 				tasks.toggleStatus(task.id).then(() => {
-					loadTasks();
+					// Update local state without reordering
+					setTaskList((prev) =>
+						prev.map((t) =>
+							t.id === task.id ? { ...t, status: newStatus } : t,
+						),
+					);
 					loadDashboard();
 				});
 			}
@@ -714,16 +741,21 @@ export function App() {
 			return;
 		}
 
-		// Cycle priority
+		// Cycle priority (update locally to preserve order)
 		if (key.name === "p" && taskList[selectedTaskIndex]) {
 			const task = taskList[selectedTaskIndex];
 			if (task) {
-				const priorities = ["low", "medium", "high", "urgent"];
-				const currentIndex = priorities.indexOf(task.priority);
-				const nextPriority = priorities[(currentIndex + 1) % priorities.length];
+				const priorities = ["low", "medium", "high", "urgent"] as const;
+				const currentIndex = priorities.indexOf(task.priority as typeof priorities[number]);
+				const nextPriority = priorities[(currentIndex + 1) % priorities.length] ?? "low";
 				tasks.update(task.id, { priority: nextPriority }).then(() => {
 					showMessage(`Priority: ${nextPriority}`);
-					loadTasks();
+					// Update local state without reordering
+					setTaskList((prev) =>
+						prev.map((t) =>
+							t.id === task.id ? { ...t, priority: nextPriority } : t,
+						),
+					);
 				});
 			}
 			return;
@@ -875,17 +907,28 @@ export function App() {
 			return;
 		}
 
-		// Open invoice in browser
+		// Open invoice in Stripe dashboard
 		if (key.name === "return") {
 			const invoice = stripeInvoices[selectedInvoiceIndex];
 			if (invoice) {
-				// Use hosted URL for finalized invoices, dashboard URL for drafts
-				const url = invoice.hostedUrl || invoice.dashboardUrl;
 				const { spawn } = require("child_process");
 				const platform = process.platform;
 				const cmd = platform === "darwin" ? "open" : platform === "win32" ? "start" : "xdg-open";
-				spawn(cmd, [url], { detached: true, stdio: "ignore" });
-				showMessage(invoice.hostedUrl ? "Opening invoice..." : "Opening in Stripe dashboard...");
+				spawn(cmd, [invoice.dashboardUrl], { detached: true, stdio: "ignore" });
+				showMessage("Opening in Stripe dashboard...");
+			}
+			return;
+		}
+
+		// Open public invoice URL
+		if (key.name === "p") {
+			const invoice = stripeInvoices[selectedInvoiceIndex];
+			if (invoice?.hostedUrl) {
+				const { spawn } = require("child_process");
+				const platform = process.platform;
+				const cmd = platform === "darwin" ? "open" : platform === "win32" ? "start" : "xdg-open";
+				spawn(cmd, [invoice.hostedUrl], { detached: true, stdio: "ignore" });
+				showMessage("Opening public invoice...");
 			}
 			return;
 		}
@@ -894,7 +937,7 @@ export function App() {
 		if (key.name === "r") {
 			setInvoicesPage(1);
 			setInvoicesCursors([]);
-			loadStripeInvoices();
+			loadStripeInvoices(undefined, false, true);
 			showMessage("Refreshing invoices...");
 			return;
 		}
@@ -1174,6 +1217,9 @@ export function App() {
 			// Update with Stripe invoice ID
 			await invoices.updateStripeId(invoice.id, stripeInvoiceId);
 
+			// Clear invoice cache so new invoice appears on refresh
+			clearInvoiceCache();
+
 			showMessage(`Stripe draft invoice created: ${stripeInvoiceId}`);
 
 			// Clear selections and reload
@@ -1187,11 +1233,6 @@ export function App() {
 
 	const selectedProject = projectList[selectedProjectIndex];
 
-	// Show splash screen on boot
-	if (showSplash) {
-		return <SplashScreen />;
-	}
-
 	return (
 		<box
 			style={{
@@ -1212,6 +1253,7 @@ export function App() {
 					<Dashboard
 						stats={dashboardStats}
 						recentTasks={recentTasks}
+						weeklyTimeData={weeklyTimeData}
 						selectedIndex={selectedDashboardTaskIndex}
 						focused={true}
 					/>

package/src/components/Dashboard.tsx

@@ -1,10 +1,12 @@
+import type { ReactNode } from "react";
 import { useTerminalDimensions } from "@opentui/react";
-import type { DashboardStats, Task } from "../types.ts";
+import type { DashboardStats, Task, WeeklyTimeData } from "../types.ts";
 import { COLORS } from "../types.ts";
 
 interface DashboardProps {
 	stats: DashboardStats;
 	recentTasks: (Task & { project: { name: string; color: string } })[];
+	weeklyTimeData: WeeklyTimeData[];
 	selectedIndex: number;
 	focused: boolean;
 }
@@ -88,9 +90,217 @@ function StackedBarChart({
 	);
 }
 
+function formatHours(ms: number): string {
+	const hours = ms / 3600000;
+	if (hours < 1) {
+		const minutes = Math.round(ms / 60000);
+		return `${minutes}m`;
+	}
+	return `${hours.toFixed(1)}h`;
+}
+
+// Distinct color palette for chart bars
+const CHART_COLORS = [
+	"#3b82f6", // Blue
+	"#10b981", // Green
+	"#f59e0b", // Amber
+	"#ef4444", // Red
+	"#8b5cf6", // Purple
+	"#ec4899", // Pink
+	"#06b6d4", // Cyan
+	"#f97316", // Orange
+	"#84cc16", // Lime
+	"#6366f1", // Indigo
+];
+
+function WeeklyTimeChart({
+	data,
+	width,
+}: {
+	data: WeeklyTimeData[];
+	width: number;
+}) {
+	const chartWidth = Math.max(width + 4, 40);
+	const maxBars = Math.min(data.length, 25, Math.floor(chartWidth / 3)); // Each bar needs ~3 chars min, max 25 weeks
+	const recentData = data.slice(-maxBars);
+
+	if (recentData.length === 0) {
+		return (
+			<box style={{ flexDirection: "column", gap: 1, width: "100%" }}>
+				<text fg="#64748b">No time entries in the last 6 months</text>
+			</box>
+		);
+	}
+
+	// Find max hours for scaling
+	const maxMs = Math.max(...recentData.map((d) => d.totalMs), 1);
+	const barHeight = 5; // Height of bars in rows
+
+	// Calculate bar width to fill available space
+	// Total width = (barWidth * n) + (n - 1) spaces = chartWidth
+	// barWidth = (chartWidth - n + 1) / n
+
+	const barWidth = 4;
+
+	// Collect unique projects for legend (sorted by total time across all weeks)
+	const projectTotals = new Map<
+		string,
+		{ name: string; color: string; totalMs: number }
+	>();
+	for (const week of recentData) {
+		for (const p of week.projects) {
+			const existing = projectTotals.get(p.projectId);
+			if (existing) {
+				existing.totalMs += p.ms;
+			} else {
+				projectTotals.set(p.projectId, {
+					name: p.projectName,
+					color: p.projectColor,
+					totalMs: p.ms,
+				});
+			}
+		}
+	}
+	// Sort projects by total time (descending) for consistent stacking order
+	const sortedProjects = Array.from(projectTotals.entries()).sort(
+		(a, b) => b[1].totalMs - a[1].totalMs,
+	);
+
+	// Assign dynamic colors to each project based on their sorted position
+	const projectColorMap = new Map<string, string>();
+	sortedProjects.forEach(([projectId], index) => {
+		projectColorMap.set(projectId, CHART_COLORS[index % CHART_COLORS.length]!);
+	});
+
+	// Pre-sort each week's projects by the global order for consistent stacking
+	const weekProjectsSorted = recentData.map((week) =>
+		[...week.projects].sort((a, b) => {
+			const aIdx = sortedProjects.findIndex(([id]) => id === a.projectId);
+			const bIdx = sortedProjects.findIndex(([id]) => id === b.projectId);
+			return aIdx - bIdx;
+		}),
+	);
+
+	// Pre-calculate bar heights for label positioning
+	const barHeights = recentData.map((week) =>
+		Math.round((week.totalMs / maxMs) * barHeight),
+	);
+
+	// Build bars row by row (from top to bottom, +1 row for labels on tallest bars)
+	const rows: ReactNode[] = [];
+	for (let row = barHeight; row >= 0; row--) {
+		const rowParts: ReactNode[] = [];
+
+		for (let i = 0; i < recentData.length; i++) {
+			const week = recentData[i]!;
+			const barTotalRows = barHeights[i]!;
+
+			if (row < barTotalRows) {
+				// This row should be filled - determine which project's color
+				// Use fraction-based calculation to avoid rounding errors
+				const rowFraction = (row + 0.5) / barTotalRows;
+				const weekProjects = weekProjectsSorted[i]!;
+
+				// Find which project this row belongs to based on cumulative fraction
+				let cumulativeFraction = 0;
+				let projectColor = CHART_COLORS[0]!;
+
+				for (const proj of weekProjects) {
+					const projFraction = proj.ms / week.totalMs;
+					cumulativeFraction += projFraction;
+					if (rowFraction <= cumulativeFraction) {
+						projectColor =
+							projectColorMap.get(proj.projectId) || CHART_COLORS[0]!;
+						break;
+					}
+				}
+
+				rowParts.push(
+					<span key={i} fg={projectColor}>
+						{"█".repeat(barWidth)}
+					</span>,
+				);
+			} else if (row === barTotalRows && week.totalMs > 0) {
+				// Show hour label just above the bar (centered)
+				const label = formatHours(week.totalMs);
+				const trimmed = label.slice(0, barWidth);
+				const padLeft = Math.floor((barWidth - trimmed.length) / 2);
+				const centered =
+					" ".repeat(padLeft) +
+					trimmed +
+					" ".repeat(barWidth - padLeft - trimmed.length);
+				rowParts.push(
+					<span key={i} fg="#64748b">
+						{centered}
+					</span>,
+				);
+			} else {
+				rowParts.push(<span key={i}>{" ".repeat(barWidth)}</span>);
+			}
+			// Add space between bars
+			if (i < recentData.length - 1) {
+				rowParts.push(<span key={`sp-${i}`}> </span>);
+			}
+		}
+
+		rows.push(<text key={row}>{rowParts}</text>);
+	}
+
+	// Calculate total hours for display
+	const totalMs = recentData.reduce((sum, w) => sum + w.totalMs, 0);
+
+	// Build date labels row
+	const dateLabelParts: ReactNode[] = [];
+	for (let i = 0; i < recentData.length; i++) {
+		const week = recentData[i]!;
+		const trimmed = week.weekLabel.slice(0, barWidth);
+		const padLeft = Math.floor((barWidth - trimmed.length) / 2);
+		const centered =
+			" ".repeat(padLeft) +
+			trimmed +
+			" ".repeat(barWidth - padLeft - trimmed.length);
+		dateLabelParts.push(
+			<span key={i} fg="#64748b">
+				{centered}
+			</span>,
+		);
+		if (i < recentData.length - 1) {
+			dateLabelParts.push(<span key={`sp-${i}`}> </span>);
+		}
+	}
+
+	return (
+		<box style={{ flexDirection: "column", gap: 1, width: "100%" }}>
+			{/* Bars (with hour labels at top) */}
+			{rows}
+			{/* Date labels */}
+			<text>{dateLabelParts}</text>
+
+			{/* Legend - show top projects by time */}
+			<box
+				style={{ flexDirection: "row", gap: 2, marginTop: 1, flexWrap: "wrap" }}
+			>
+				{sortedProjects.slice(0, 4).map(([id, proj]) => (
+					<text key={id}>
+						<span fg={projectColorMap.get(id)}>●</span>
+						<span fg="#94a3b8"> {proj.name.slice(0, 12)}</span>
+					</text>
+				))}
+				<text>
+					<span fg="#94a3b8">Total: </span>
+					<span fg="#ffffff" attributes="bold">
+						{formatHours(totalMs)}
+					</span>
+				</text>
+			</box>
+		</box>
+	);
+}
+
 export function Dashboard({
 	stats,
 	recentTasks,
+	weeklyTimeData,
 	selectedIndex,
 	focused,
 }: DashboardProps) {
@@ -124,22 +334,24 @@ export function Dashboard({
 			style={{
 				flexDirection: "column",
 				flexGrow: 1,
-				padding: 1,
-				gap: 1,
+				padding: 2,
+				gap: 3,
 			}}
 		>
 			{/* Progress Section */}
+			<box title="Task Status">
+				<StackedBarChart stats={stats} width={termWidth} />
+			</box>
+
+			{/* Weekly Time Chart */}
 			<box
-				title="Task Status"
+				title="Weekly Time"
 				style={{
-					border: true,
-					borderColor: "#334155",
-					padding: 1,
-					flexDirection: "column",
-					width: "100%",
+					justifyContent: "center",
+					alignItems: "center",
 				}}
 			>
-				<StackedBarChart stats={stats} width={termWidth} />
+				<WeeklyTimeChart data={weeklyTimeData} width={termWidth} />
 			</box>
 
 			{/* Recent Activity */}

package/src/components/InvoicesView.tsx

@@ -22,7 +22,7 @@ function formatCurrency(amount: number, currency: string): string {
 
 function formatDate(date: Date): string {
 	return date.toLocaleDateString("en-US", {
-		month: "short",
+		month: "numeric",
 		day: "numeric",
 		year: "numeric",
 	});
@@ -45,13 +45,12 @@ function getStatusColor(status: string): string {
 	}
 }
 
-// Column widths for table layout
+// Column widths for table layout (client column uses flexGrow for 100% width)
 const COL = {
-	number: 12,
-	date: 14,
-	customer: 24,
+	invoiceId: 18,
 	status: 10,
-	amount: 12,
+	date: 14,
+	amount: 14,
 };
 
 export function InvoicesView({
@@ -82,7 +81,7 @@ export function InvoicesView({
 				>
 					<text fg="#ffffff">Invoices</text>
 				</box>
-				<text fg={COLORS.borderOff}>{"─".repeat(72)}</text>
+				<text fg={COLORS.borderOff}>{"─".repeat(200)}</text>
 				<box
 					style={{
 						flexGrow: 1,
@@ -114,7 +113,7 @@ export function InvoicesView({
 				>
 					<text fg="#ffffff">Invoices</text>
 				</box>
-				<text fg={COLORS.borderOff}>{"─".repeat(72)}</text>
+
 				<box
 					style={{
 						flexGrow: 1,
@@ -145,7 +144,7 @@ export function InvoicesView({
 				>
 					<text fg="#ffffff">Invoices</text>
 				</box>
-				<text fg={COLORS.borderOff}>{"─".repeat(72)}</text>
+
 				<box
 					style={{
 						flexGrow: 1,
@@ -176,7 +175,7 @@ export function InvoicesView({
 				>
 					<text fg="#ffffff">Invoices</text>
 				</box>
-				<text fg={COLORS.borderOff}>{"─".repeat(72)}</text>
+
 				<box
 					style={{
 						flexGrow: 1,
@@ -198,21 +197,6 @@ export function InvoicesView({
 				padding: 1,
 			}}
 		>
-			{/* Header */}
-			<box
-				style={{
-					flexDirection: "row",
-					justifyContent: "space-between",
-				}}
-			>
-				<text fg="#ffffff">Invoices</text>
-				<text fg="#94a3b8">
-					Page {currentPage} {hasMore && "| ] next"} {hasPrevious && "| [ prev"}
-				</text>
-			</box>
-			<text fg={COLORS.borderOff}>{"─".repeat(72)}</text>
-
-			{/* Column Headers */}
 			<box
 				style={{
 					flexDirection: "row",
@@ -220,23 +204,23 @@ export function InvoicesView({
 					paddingRight: 1,
 				}}
 			>
-				<box style={{ width: COL.number }}>
-					<text fg="#64748b">Invoice #</text>
+				<box style={{ width: COL.invoiceId }}>
+					<text fg="#64748b">Invoice ID</text>
 				</box>
 				<box style={{ width: COL.date }}>
 					<text fg="#64748b">Date</text>
 				</box>
-				<box style={{ width: COL.customer }}>
-					<text fg="#64748b">Customer</text>
-				</box>
 				<box style={{ width: COL.status }}>
 					<text fg="#64748b">Status</text>
 				</box>
+				<box style={{ flexGrow: 1 }}>
+					<text fg="#64748b">Client</text>
+				</box>
+
 				<box style={{ width: COL.amount, alignItems: "flex-end" }}>
 					<text fg="#64748b">Amount</text>
 				</box>
 			</box>
-			<text fg={COLORS.borderOff}>{"─".repeat(72)}</text>
 
 			{/* Invoice List */}
 			<scrollbox focused={focused} style={{ flexGrow: 1 }}>
@@ -255,8 +239,8 @@ export function InvoicesView({
 								paddingRight: 1,
 							}}
 						>
-							{/* Invoice Number */}
-							<box style={{ width: COL.number }}>
+							{/* Invoice ID */}
+							<box style={{ width: COL.invoiceId }}>
 								<text fg={isSelected ? "#ffffff" : "#e2e8f0"}>
 									{invoice.number || invoice.id.slice(-8)}
 								</text>
@@ -265,19 +249,19 @@ export function InvoicesView({
 							<box style={{ width: COL.date }}>
 								<text fg="#94a3b8">{formatDate(invoice.created)}</text>
 							</box>
-							{/* Customer */}
-							<box style={{ width: COL.customer }}>
-								<text fg={isSelected ? "#ffffff" : "#e2e8f0"}>
-									{(invoice.customerName || invoice.customerEmail || "Unknown")
-										.slice(0, COL.customer - 2)}
-								</text>
-							</box>
 							{/* Status */}
 							<box style={{ width: COL.status }}>
 								<text fg={getStatusColor(invoice.status)}>
 									{invoice.status}
 								</text>
 							</box>
+							{/* Client */}
+							<box style={{ flexGrow: 1 }}>
+								<text fg={isSelected ? "#ffffff" : "#e2e8f0"}>
+									{invoice.customerName || invoice.customerEmail || "Unknown"}
+								</text>
+							</box>
+
 							{/* Amount */}
 							<box style={{ width: COL.amount, alignItems: "flex-end" }}>
 								<text fg="#10b981">
@@ -288,10 +272,6 @@ export function InvoicesView({
 					);
 				})}
 			</scrollbox>
-
-			{/* Footer */}
-			<text fg={COLORS.borderOff}>{"─".repeat(72)}</text>
-			<text fg="#64748b">Enter to open in browser | r to refresh</text>
 		</box>
 	);
 }

package/src/components/StatusBar.tsx

@@ -30,7 +30,8 @@ function getShortCuts(
 		return [
 			...baseShortcuts,
 			{ key: "⇅", action: "navigate" },
-			{ key: "↵", action: "open" },
+			{ key: "↵", action: "open in Stripe" },
+			{ key: "p", action: "public URL" },
 			{ key: "r", action: "refresh" },
 			{ key: "[]", action: "page" },
 		];

package/src/components/TimerModals.tsx

@@ -16,21 +16,32 @@ export function ProjectSelectModal({
 	onCancel,
 }: ProjectSelectModalProps) {
 	const [selectedIndex, setSelectedIndex] = useState(0);
+	const [searchQuery, setSearchQuery] = useState("");
+	const inputRef = usePaste();
+
+	const filteredProjects = projects.filter((project) =>
+		project.name.toLowerCase().includes(searchQuery.toLowerCase()),
+	);
+
+	const handleSearchChange = (value: string) => {
+		setSearchQuery(value);
+		setSelectedIndex(0);
+	};
 
 	useKeyboard((key) => {
 		if (key.name === "escape") {
 			onCancel();
 			return;
 		}
-		if (key.name === "return" && projects[selectedIndex]) {
-			onSelect(projects[selectedIndex].id);
+		if (key.name === "return" && filteredProjects[selectedIndex]) {
+			onSelect(filteredProjects[selectedIndex].id);
 			return;
 		}
-		if (key.name === "j" || key.name === "down") {
-			setSelectedIndex((i) => Math.min(i + 1, projects.length - 1));
+		if (key.name === "down") {
+			setSelectedIndex((i) => Math.min(i + 1, filteredProjects.length - 1));
 			return;
 		}
-		if (key.name === "k" || key.name === "up") {
+		if (key.name === "up") {
 			setSelectedIndex((i) => Math.max(i - 1, 0));
 			return;
 		}
@@ -38,35 +49,56 @@ export function ProjectSelectModal({
 
 	return (
 		<Modal title="Start Timer" height={20}>
-			<box style={{ marginTop: 1, flexGrow: 1 }}>
-				<scrollbox focused style={{ flexGrow: 1 }}>
-					{projects.map((project, index) => (
-						<box
-							key={project.id}
-							style={{
-								paddingLeft: 1,
-								paddingRight: 1,
-								backgroundColor:
-									index === selectedIndex ? "#1e40af" : "transparent",
-							}}
-						>
-							<text>
-								<span fg={project.color}>[*] </span>
-								<span
-									fg={index === selectedIndex ? "#ffffff" : "#e2e8f0"}
-									attributes={index === selectedIndex ? "bold" : undefined}
-								>
-									{project.name}
-								</span>
-								{project.hourlyRate != null && (
-									<span fg="#10b981"> ${project.hourlyRate}/hr</span>
-								)}
-							</text>
-						</box>
-					))}
+			<box
+				style={{
+					border: true,
+					borderColor: "#475569",
+					height: 3,
+					marginBottom: 1,
+				}}
+			>
+				<input
+					ref={inputRef}
+					placeholder="Search projects..."
+					focused
+					value={searchQuery}
+					onInput={handleSearchChange}
+				/>
+			</box>
+			<box style={{ flexGrow: 1 }}>
+				<scrollbox style={{ flexGrow: 1 }}>
+					{filteredProjects.length === 0 ? (
+						<text fg="#64748b" style={{ paddingLeft: 1 }}>
+							No projects found
+						</text>
+					) : (
+						filteredProjects.map((project, index) => (
+							<box
+								key={project.id}
+								style={{
+									paddingLeft: 1,
+									paddingRight: 1,
+									backgroundColor:
+										index === selectedIndex ? "#1e40af" : "transparent",
+								}}
+							>
+								<text>
+									<span fg={project.color}>[*] </span>
+									<span
+										fg={index === selectedIndex ? "#ffffff" : "#e2e8f0"}
+										attributes={index === selectedIndex ? "bold" : undefined}
+									>
+										{project.name}
+									</span>
+									{project.hourlyRate != null && (
+										<span fg="#10b981"> ${project.hourlyRate}/hr</span>
+									)}
+								</text>
+							</box>
+						))
+					)}
 				</scrollbox>
 			</box>
-			<text fg="#64748b">Enter to select, Esc to cancel</text>
 		</Modal>
 	);
 }

package/src/components/TimesheetView.tsx

@@ -62,9 +62,8 @@ export function TimesheetView({
 					}}
 				>
 					<text fg="#ffffff">Timesheets</text>
-					<text fg="#94a3b8">Uninvoiced Time</text>
 				</box>
-				<text fg={COLORS.borderOff}>{"─".repeat(56)}</text>
+
 				<box
 					style={{
 						flexGrow: 1,
@@ -86,21 +85,6 @@ export function TimesheetView({
 				padding: 1,
 			}}
 		>
-			<box
-				style={{
-					flexDirection: "row",
-					justifyContent: "space-between",
-				}}
-			>
-				<text fg="#ffffff">Timesheets</text>
-				<text fg="#94a3b8">
-					{selectedEntryIds.size > 0
-						? `${selectedEntryIds.size} selected`
-						: "Uninvoiced Time"}
-				</text>
-			</box>
-			<text fg={COLORS.borderOff}>{"─".repeat(56)}</text>
-
 			<scrollbox focused={focused} style={{ flexGrow: 1 }}>
 				{groups.map((group, groupIndex) => {
 					const isSelectedGroup = groupIndex === selectedGroupIndex;

package/src/components/index.ts

@@ -9,7 +9,6 @@ export { InputModal, ConfirmModal } from "./InputModal.tsx";
 export { ProjectModal } from "./ProjectModal.tsx";
 export { Timer, formatDurationHuman } from "./Timer.tsx";
 export { ProjectSelectModal, StopTimerModal } from "./TimerModals.tsx";
-export { SplashScreen } from "./SplashScreen.tsx";
 export { TimesheetView } from "./TimesheetView.tsx";
 export { CustomerModal } from "./CustomerModal.tsx";
 export { CustomerSelectModal } from "./CustomerSelectModal.tsx";

package/src/db.ts

@@ -343,6 +343,93 @@ export const stats = {
       monthMs: calcDuration(monthEntries),
     };
   },
+
+  async getWeeklyTimeStats(months = 6) {
+    // Get date 6 months ago
+    const startDate = new Date();
+    startDate.setMonth(startDate.getMonth() - months);
+    startDate.setHours(0, 0, 0, 0);
+    // Set to start of that week (Sunday)
+    startDate.setDate(startDate.getDate() - startDate.getDay());
+
+    // Get all time entries in this range
+    const entries = await db.timeEntry.findMany({
+      where: {
+        startTime: { gte: startDate },
+        endTime: { not: null },
+      },
+      include: {
+        project: {
+          select: { id: true, name: true, color: true },
+        },
+      },
+    });
+
+    // Group entries by week and project
+    const weeklyData = new Map<string, Map<string, { ms: number; project: { id: string; name: string; color: string } }>>();
+
+    for (const entry of entries) {
+      if (!entry.endTime) continue;
+
+      // Get week start (Sunday) for this entry
+      const entryDate = new Date(entry.startTime);
+      const weekStart = new Date(entryDate);
+      weekStart.setDate(weekStart.getDate() - weekStart.getDay());
+      weekStart.setHours(0, 0, 0, 0);
+      const weekKey = weekStart.toISOString().split("T")[0]!;
+
+      if (!weeklyData.has(weekKey)) {
+        weeklyData.set(weekKey, new Map());
+      }
+
+      const weekMap = weeklyData.get(weekKey)!;
+      const projectId = entry.project.id;
+
+      if (!weekMap.has(projectId)) {
+        weekMap.set(projectId, { ms: 0, project: entry.project });
+      }
+
+      const projectData = weekMap.get(projectId)!;
+      projectData.ms += new Date(entry.endTime).getTime() - new Date(entry.startTime).getTime();
+    }
+
+    // Convert to array sorted by week
+    const result: {
+      weekStart: string;
+      weekLabel: string;
+      projects: { projectId: string; projectName: string; projectColor: string; ms: number }[];
+      totalMs: number;
+    }[] = [];
+
+    const sortedWeeks = Array.from(weeklyData.keys()).sort();
+    for (const weekKey of sortedWeeks) {
+      const weekMap = weeklyData.get(weekKey)!;
+      const weekDate = new Date(weekKey);
+      const weekLabel = `${weekDate.getMonth() + 1}/${weekDate.getDate()}`;
+
+      const projects: { projectId: string; projectName: string; projectColor: string; ms: number }[] = [];
+      let totalMs = 0;
+
+      for (const [projectId, data] of weekMap) {
+        projects.push({
+          projectId,
+          projectName: data.project.name,
+          projectColor: data.project.color,
+          ms: data.ms,
+        });
+        totalMs += data.ms;
+      }
+
+      result.push({
+        weekStart: weekKey,
+        weekLabel,
+        projects,
+        totalMs,
+      });
+    }
+
+    return result;
+  },
 };
 
 // Time entry operations

package/src/index.tsx

@@ -9,7 +9,77 @@ import { dirname } from "path";
 
 let renderer: CliRenderer | null = null;
 
+// Show splash screen with ASCII art paca
+function showSplash(): boolean {
+  try {
+    const cols = process.stdout.columns || 80;
+    const rows = process.stdout.rows || 24;
+
+    // Cute ASCII paca
+    const paca = [
+      "       \\\\",
+      "        \\\\  ♥",
+      "    (\\__/)",
+      "    (o^.^)    ~paca~",
+      "    z(_(\")(\"))",
+    ];
+
+    const logoLines = [
+      "██████╗  █████╗  ██████╗ █████╗",
+      "██╔══██╗██╔══██╗██╔════╝██╔══██╗",
+      "██████╔╝███████║██║     ███████║",
+      "██╔═══╝ ██╔══██║██║     ██╔══██║",
+      "██║     ██║  ██║╚██████╗██║  ██║",
+      "╚═╝     ╚═╝  ╚═╝ ╚═════╝╚═╝  ╚═╝",
+    ];
+    const tagline = "Task Management for the Terminal";
+
+    const totalHeight = paca.length + 2 + logoLines.length + 1 + 1;
+    const startRow = Math.max(1, Math.floor((rows - totalHeight) / 2));
+
+    // Clear screen and hide cursor
+    process.stdout.write("\x1b[2J\x1b[H\x1b[?25l");
+
+    // Output paca ASCII art centered
+    for (let i = 0; i < paca.length; i++) {
+      const line = paca[i];
+      const pad = Math.max(0, Math.floor((cols - 20) / 2));
+      process.stdout.write(`\x1b[${startRow + i};${pad + 1}H\x1b[38;2;222;184;135m${line}\x1b[0m`);
+    }
+
+    // Position for logo
+    const logoStartRow = startRow + paca.length + 2;
+
+    // Output PACA logo centered
+    for (let i = 0; i < logoLines.length; i++) {
+      const line = logoLines[i];
+      const pad = Math.max(0, Math.floor((cols - line.length) / 2));
+      process.stdout.write(`\x1b[${logoStartRow + i};${pad + 1}H\x1b[38;2;96;165;250m${line}\x1b[0m`);
+    }
+
+    // Output tagline
+    const taglineRow = logoStartRow + logoLines.length + 1;
+    const taglinePad = Math.max(0, Math.floor((cols - tagline.length) / 2));
+    process.stdout.write(`\x1b[${taglineRow};${taglinePad + 1}H\x1b[38;2;100;116;139m${tagline}\x1b[0m`);
+
+    // Move cursor to bottom
+    process.stdout.write(`\x1b[${rows};1H`);
+
+    return true;
+  } catch {
+    return false;
+  }
+}
+
 async function main() {
+  // Show splash with ASCII paca
+  const splashShown = showSplash();
+
+  // If splash was shown, wait a moment before starting TUI
+  if (splashShown) {
+    await new Promise(resolve => setTimeout(resolve, 1500));
+  }
+
   // Check if database exists, if not run migration
   if (!existsSync(DB_PATH)) {
     console.log("Initializing Paca database...");

package/src/stripe.ts

@@ -119,12 +119,37 @@ export interface ListInvoicesResult {
   nextCursor: string | null;
 }
 
-// List invoices from Stripe with pagination
+// Cache for invoice list requests (2 minute TTL)
+const CACHE_TTL_MS = 2 * 60 * 1000;
+const invoiceCache = new Map<string, { data: ListInvoicesResult; timestamp: number }>();
+
+function getCacheKey(apiKey: string, cursor?: string): string {
+  // Use last 8 chars of API key + cursor for cache key
+  return `${apiKey.slice(-8)}:${cursor ?? "first"}`;
+}
+
+// Clear the invoice cache (call after creating new invoices)
+export function clearInvoiceCache(): void {
+  invoiceCache.clear();
+}
+
+// List invoices from Stripe with pagination and caching
 export async function listInvoices(
   apiKey: string,
   limit = 25,
   startingAfter?: string,
+  forceRefresh = false,
 ): Promise<ListInvoicesResult> {
+  const cacheKey = getCacheKey(apiKey, startingAfter);
+
+  // Check cache first (unless force refresh)
+  if (!forceRefresh) {
+    const cached = invoiceCache.get(cacheKey);
+    if (cached && Date.now() - cached.timestamp < CACHE_TTL_MS) {
+      return cached.data;
+    }
+  }
+
   const stripe = new Stripe(apiKey);
 
   const params: Stripe.InvoiceListParams = {
@@ -155,9 +180,14 @@ export async function listInvoices(
     };
   });
 
-  return {
+  const result: ListInvoicesResult = {
     invoices,
     hasMore: response.has_more,
     nextCursor: response.data.length > 0 ? response.data[response.data.length - 1]?.id ?? null : null,
   };
+
+  // Store in cache
+  invoiceCache.set(cacheKey, { data: result, timestamp: Date.now() });
+
+  return result;
 }

package/src/types.ts

@@ -270,6 +270,18 @@ export interface DashboardStats {
 	completionRate: number;
 }
 
+export interface WeeklyTimeData {
+	weekStart: string;
+	weekLabel: string;
+	projects: {
+		projectId: string;
+		projectName: string;
+		projectColor: string;
+		ms: number;
+	}[];
+	totalMs: number;
+}
+
 export interface TimesheetGroup {
 	project: {
 		id: string;

package/src/components/SplashScreen.tsx

@@ -1,25 +0,0 @@
-const PACA_TEXT = `
-  ██████╗  █████╗  ██████╗ █████╗
-  ██╔══██╗██╔══██╗██╔════╝██╔══██╗
-  ██████╔╝███████║██║     ███████║
-  ██╔═══╝ ██╔══██║██║     ██╔══██║
-  ██║     ██║  ██║╚██████╗██║  ██║
-  ╚═╝     ╚═╝  ╚═╝ ╚═════╝╚═╝  ╚═╝
-`;
-
-export function SplashScreen() {
-  return (
-    <box
-      style={{
-        width: "100%",
-        height: "100%",
-        flexDirection: "column",
-        justifyContent: "center",
-        alignItems: "center",
-      }}
-    >
-      <text>{PACA_TEXT}</text>
-      <text>Task Management for the Terminal</text>
-    </box>
-  );
-}