prompt-profile 0.1.0 → 0.1.2

package/README.md

@@ -5,14 +5,27 @@ personal profile.
 
 ![Synthetic sample share card](docs/sample-card.png)
 
-[Sample HTML report](https://htmlpreview.github.io/?https://github.com/EricTsai83/prompt-profile/blob/main/docs/sample-report.html)
+[Sample HTML report](https://erictsai83.github.io/prompt-profile/sample-report.html)
 · [Sample profile JSON](docs/sample-profile.json) (all sample data is hand-written and fictional).
 
-The same profile in the other looks (`--look signal`, `afterhours`, `studio`):
+### A real report
 
-| Signal                                      | Afterhours                                          | Studio                                      |
-| ------------------------------------------- | --------------------------------------------------- | ------------------------------------------- |
-| ![Signal look](docs/sample-card-signal.png) | ![Afterhours look](docs/sample-card-afterhours.png) | ![Studio look](docs/sample-card-studio.png) |
+The author's own report, from about 1,700 real prompts over six months, published as written:
+
+- [Full report](https://erictsai83.github.io/prompt-profile/demo/full/report.html): what you see on your own machine, with quotes from
+  real prompts, suggested rewrites, project names, exact dates and fun facts.
+- [Shareable report](https://erictsai83.github.io/prompt-profile/demo/without-personal/report.html): the same profile rendered with
+  `--exclude personal`: no quotes, rewrites or fun facts, projects shown as "Project A, B…",
+  dates by month. This is what you would post publicly.
+
+The share card is the same for both: it never contains quotes or project names. The full report
+in every look (`--look`; render only, no new analysis):
+
+| [Classic](https://erictsai83.github.io/prompt-profile/demo/full/report.html) (default) | [Signal](https://erictsai83.github.io/prompt-profile/demo/signal/report.html) |
+| -------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
+| ![Classic card](docs/demo/card.png)                                                    | ![Signal card](docs/demo/signal/card.png)                                     |
+| [Afterhours](https://erictsai83.github.io/prompt-profile/demo/afterhours/report.html)  | [Studio](https://erictsai83.github.io/prompt-profile/demo/studio/report.html) |
+| ![Afterhours card](docs/demo/afterhours/card.png)                                      | ![Studio card](docs/demo/studio/card.png)                                     |
 
 ## Quick start
 
@@ -22,24 +35,27 @@ The same profile in the other looks (`--look signal`, `afterhours`, `studio`):
 2. Run it (Node.js ≥ 22):
 
    ```bash
-   npx prompt-profile
+   npx prompt-profile@latest
    ```
 
+   `@latest` makes npx fetch the newest version instead of reusing one it cached earlier.
+
 3. It reads your local history, shows how many prompts it found and how many CLI calls the
    analysis will take, and asks `Continue?`. The calls use your Claude / ChatGPT subscription
-   quota. To see what would be sent first, run `npx prompt-profile --dry-run` (calls nothing).
+   quota. To see what would be sent first, run `npx prompt-profile@latest --dry-run` (calls nothing).
 4. When it is done, the report opens in your browser. Everything is written to
    `./prompt-profile-report/`.
 
-Want to look around for free first? `npx prompt-profile stats` shows statistics without any LLM
+Want to look around for free first? `npx prompt-profile@latest stats` shows statistics without any LLM
 call.
 
 ## Install
 
 ```bash
-npx prompt-profile              # run without installing
+npx prompt-profile@latest       # run without installing (always the newest version)
 npm i -g prompt-profile         # or install the `prompt-profile` command
 prompt-profile --help
+npm i -g prompt-profile@latest  # update the installed command
 ```
 
 No Node.js? Every [GitHub Release](https://github.com/EricTsai83/prompt-profile/releases) has a

package/dist/bin.js

@@ -1302,7 +1302,7 @@ const fileCacheLayer = (dir) => Layer.effect(AnalysisCache, Effect.gen(function*
 * Package version. Injected by tsdown at build time; during development and tests
 * (tsx / vitest) it falls back to reading package.json.
 */
-const VERSION = "0.1.0";
+const VERSION = "0.1.2";
 // src/cli/errors.ts
 /** No prompts found at all, or none in the selected range. */
 var NoData = class extends Data.TaggedError("NoData") {};
@@ -2401,7 +2401,94 @@ const withRetry = (runner, options = {}) => {
 		generate
 	};
 };
-// src/report/graphic.ts
+// src/report/derive.ts
+/** The busiest four consecutive hours (wrapping past midnight); `end` is exclusive. */
+const chronotype = (s) => {
+	const total = s.hourHistogram.reduce((a, b) => a + b, 0);
+	if (total === 0) return null;
+	let best = {
+		start: 0,
+		sum: -1
+	};
+	for (let start = 0; start < 24; start++) {
+		let sum = 0;
+		for (let i = 0; i < 4; i++) sum += s.hourHistogram[(start + i) % 24];
+		if (sum > best.sum) best = {
+			start,
+			sum
+		};
+	}
+	return {
+		start: best.start,
+		end: (best.start + 4) % 24,
+		share: best.sum / total
+	};
+};
+/** Mean prompts per session, one decimal; null without sessions. */
+const promptsPerSession = (s) => s.totalSessions === 0 ? null : Math.round(10 * s.totalPrompts / s.totalSessions) / 10;
+/** "1 in N prompts corrects the AI"; null without corrections. */
+const correctionEvery = (s) => s.correctionRate <= 0 ? null : Math.round(1 / s.correctionRate);
+/**
+* The dominant project per month, with consecutive months of the same project merged. "Other
+* folders" only names a month when no named project has prompts in it.
+*/
+const chapters = (s) => {
+	const slots = s.activity.projects.length + 1;
+	const months = /* @__PURE__ */ new Map();
+	for (const d of s.activity.days) {
+		const key = d.date.slice(0, 7);
+		const counts = months.get(key) ?? Array.from({ length: slots }, () => 0);
+		d.byProject.forEach((n, i) => counts[i] += n);
+		months.set(key, counts);
+	}
+	const out = [];
+	for (const [month, counts] of [...months.entries()].toSorted(([a], [b]) => a.localeCompare(b))) {
+		const named = counts.slice(0, slots - 1);
+		const pool = named.some((n) => n > 0) ? named : counts;
+		const slot = pool.indexOf(Math.max(...pool));
+		const prompts = counts.reduce((a, b) => a + b, 0);
+		const last = out.at(-1);
+		if (last && last.slot === slot) out[out.length - 1] = {
+			...last,
+			to: month,
+			prompts: last.prompts + prompts
+		};
+		else out.push({
+			from: month,
+			to: month,
+			slot,
+			prompts
+		});
+	}
+	return out;
+};
+/**
+* The 24 radial bars of the hour clock (260 × 260, centre 130): length by prompts in that hour,
+* `on` for the busiest window. Shared by the report's hero and the classic card.
+*/
+const clockBars = (hours, window) => {
+	const max = Math.max(1, ...hours);
+	const inWindow = (h) => window !== null && (h - window.start + 24) % 24 < (window.end - window.start + 24) % 24;
+	return hours.map((n, h) => {
+		const a = h / 24 * Math.PI * 2 - Math.PI / 2;
+		const r0 = 62;
+		const r1 = 66 + 54 * n / max;
+		const p = (r) => `${(130 + Math.cos(a) * r).toFixed(1)} ${(130 + Math.sin(a) * r).toFixed(1)}`;
+		return {
+			from: p(r0),
+			to: p(r1),
+			on: inWindow(h)
+		};
+	});
+};
+/** The report's hour clock as a standalone SVG (no hour labels: the card has no SVG fonts). */
+const clockSvg = (hours, color) => {
+	return {
+		svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 260"><circle cx="130" cy="130" r="60" fill="none" stroke="${color}" stroke-opacity="0.25"/>${clockBars(hours, chronotype({ hourHistogram: hours })).map((b) => `<path d="M${b.from}L${b.to}" stroke="${color}" stroke-width="7" stroke-linecap="round" stroke-opacity="${b.on ? 1 : .35}"/>`).join("")}</svg>`,
+		width: 260,
+		height: 260
+	};
+};
 /** A look's signature graphic as a standalone SVG, drawn from the 24-hour histogram only. */
 const graphicSvg = (kind, hours, identity) => {
 	const max = Math.max(1, ...hours);
@@ -2603,6 +2690,31 @@ const LOOKS = [
 ];
 /** The look's data, or null for `classic`. */
 const lookOf = (id) => LOOKS.find((l) => l.id === id) ?? null;
+/** Colors of the classic report (no look); the classic card uses the light ones. */
+const CLASSIC_TOKENS = {
+	light: {
+		bg: "#f6f6f3",
+		fg: "#1d1d1f",
+		muted: "#6b6b70",
+		card: "#ffffff",
+		border: "#e6e6e1",
+		accent: "#5b5bd6",
+		accentSoft: "#ececfb",
+		warn: "#9a5800",
+		empty: "#ececea"
+	},
+	dark: {
+		bg: "#121214",
+		fg: "#ececee",
+		muted: "#9a9aa2",
+		card: "#1c1c20",
+		border: "#2c2c33",
+		accent: "#9d9dff",
+		accentSoft: "#25254a",
+		warn: "#f0b35a",
+		empty: "#26262c"
+	}
+};
 // src/report/content.ts
 const contentIn = (p, lang) => {
 	const t = lang === "en" ? void 0 : p.translations[lang];
@@ -2618,67 +2730,6 @@ const contentIn = (p, lang) => {
 		improvement: (i) => t?.improvements[i] ?? p.improvements[i]
 	};
 };
-// src/report/derive.ts
-/** The busiest four consecutive hours (wrapping past midnight); `end` is exclusive. */
-const chronotype = (s) => {
-	const total = s.hourHistogram.reduce((a, b) => a + b, 0);
-	if (total === 0) return null;
-	let best = {
-		start: 0,
-		sum: -1
-	};
-	for (let start = 0; start < 24; start++) {
-		let sum = 0;
-		for (let i = 0; i < 4; i++) sum += s.hourHistogram[(start + i) % 24];
-		if (sum > best.sum) best = {
-			start,
-			sum
-		};
-	}
-	return {
-		start: best.start,
-		end: (best.start + 4) % 24,
-		share: best.sum / total
-	};
-};
-/** Mean prompts per session, one decimal; null without sessions. */
-const promptsPerSession = (s) => s.totalSessions === 0 ? null : Math.round(10 * s.totalPrompts / s.totalSessions) / 10;
-/** "1 in N prompts corrects the AI"; null without corrections. */
-const correctionEvery = (s) => s.correctionRate <= 0 ? null : Math.round(1 / s.correctionRate);
-/**
-* The dominant project per month, with consecutive months of the same project merged. "Other
-* folders" only names a month when no named project has prompts in it.
-*/
-const chapters = (s) => {
-	const slots = s.activity.projects.length + 1;
-	const months = /* @__PURE__ */ new Map();
-	for (const d of s.activity.days) {
-		const key = d.date.slice(0, 7);
-		const counts = months.get(key) ?? Array.from({ length: slots }, () => 0);
-		d.byProject.forEach((n, i) => counts[i] += n);
-		months.set(key, counts);
-	}
-	const out = [];
-	for (const [month, counts] of [...months.entries()].toSorted(([a], [b]) => a.localeCompare(b))) {
-		const named = counts.slice(0, slots - 1);
-		const pool = named.some((n) => n > 0) ? named : counts;
-		const slot = pool.indexOf(Math.max(...pool));
-		const prompts = counts.reduce((a, b) => a + b, 0);
-		const last = out.at(-1);
-		if (last && last.slot === slot) out[out.length - 1] = {
-			...last,
-			to: month,
-			prompts: last.prompts + prompts
-		};
-		else out.push({
-			from: month,
-			to: month,
-			slot,
-			prompts
-		});
-	}
-	return out;
-};
 // src/report/messages.ts
 const plural = (n, one, many) => `${n.toLocaleString("en")} ${n === 1 ? one : many}`;
 /** Every text of the report and the card, per language. */
@@ -3192,76 +3243,143 @@ const cardMetrics = (profile, lang, n) => {
 		[t.cardStreak, t.days(s.longestStreakDays)]
 	].slice(0, n);
 };
-/** Today's card. `hide` can only remove the trait or number rows. */
+/** Clock size on the classic card; the report's 260 × 260 drawing is scaled to it. */
+const CARD_CLOCK = 300;
+/**
+* The classic card: the classic report's hero on its page, in the same colors, with the same
+* hour clock. The hour labels are text nodes over the drawing (SVG images get no fonts).
+*/
 const classicTree = (profile, hide, lang) => {
 	const t = MESSAGES[lang];
 	const c = contentIn(profile, lang);
-	const numbers = cardMetrics(profile, lang, 3);
+	const k = CLASSIC_TOKENS.light;
+	const name = clip(c.archetype.name, 56);
+	const showGraphic = !hide.includes("graphic");
+	const clock = clockSvg(profile.stats.hourHistogram, k.accent);
+	const left = 808;
+	const top = 165;
+	const scale = CARD_CLOCK / clock.width;
+	const ticks = [
+		0,
+		6,
+		12,
+		18
+	].map((hour) => {
+		const a = hour / 24 * Math.PI * 2 - Math.PI / 2;
+		return h("div", {
+			position: "absolute",
+			left: left + (130 + Math.cos(a) * 46) * scale - 20,
+			top: top + (130 + Math.sin(a) * 46) * scale - 10,
+			width: 40,
+			display: "flex",
+			justifyContent: "center",
+			fontSize: 14,
+			color: k.muted
+		}, String(hour).padStart(2, "0"));
+	});
 	return h("div", {
 		width: CARD_WIDTH,
 		height: 630,
 		boxSizing: "border-box",
 		display: "flex",
-		flexDirection: "column",
-		justifyContent: "space-between",
-		padding: "56px 64px",
-		backgroundImage: "linear-gradient(135deg, #17172b 0%, #2b2b6b 60%, #5b5bd6 100%)",
-		color: "#f4f4ff",
+		position: "relative",
+		backgroundColor: k.bg,
+		color: k.fg,
 		fontFamily: "Inter"
 	}, [
+		h("div", {
+			position: "absolute",
+			left: 36,
+			top: 36,
+			width: 1128,
+			height: 558,
+			backgroundColor: k.card,
+			border: `1.5px solid ${k.border}`,
+			borderRadius: 32
+		}),
+		...showGraphic ? [{
+			type: "img",
+			props: {
+				src: svgDataUrl(clock.svg),
+				width: CARD_CLOCK,
+				height: CARD_CLOCK,
+				style: {
+					position: "absolute",
+					left,
+					top
+				}
+			}
+		}, ...ticks] : [],
 		h("div", {
 			display: "flex",
-			flexDirection: "column"
+			flexDirection: "column",
+			justifyContent: "space-between",
+			position: "absolute",
+			left: 36,
+			top: 36,
+			width: 1128,
+			height: 558,
+			padding: "40px 56px",
+			boxSizing: "border-box"
 		}, [
 			h("div", {
-				fontSize: 22,
-				color: "#b9b9ff",
-				letterSpacing: 1
+				fontSize: 20,
+				fontWeight: 700
 			}, t.project),
 			h("div", {
-				fontSize: 56,
-				fontWeight: 700,
-				marginTop: 14,
-				lineHeight: 1.15
-			}, clip(c.archetype.name, 56)),
+				display: "flex",
+				flexDirection: "column",
+				maxWidth: showGraphic ? 700 : 1e3
+			}, [
+				h("div", {
+					fontFamily: DISPLAY_FONT,
+					fontWeight: 800,
+					fontSize: titleSize(name),
+					lineHeight: .98,
+					letterSpacing: -2
+				}, name),
+				h("div", {
+					fontSize: 24,
+					lineHeight: 1.4,
+					marginTop: 18,
+					color: k.muted
+				}, clip(c.headline, 120)),
+				hide.includes("traits") ? null : h("div", {
+					display: "flex",
+					gap: 10,
+					flexWrap: "wrap",
+					marginTop: 20
+				}, profile.traits.slice(0, 3).map((_tr, i) => h("div", {
+					display: "flex",
+					fontSize: 18,
+					padding: "6px 16px",
+					borderRadius: 999,
+					color: k.accent,
+					backgroundColor: k.accentSoft
+				}, clip(c.trait(i).name, 32))))
+			]),
 			h("div", {
-				fontSize: 26,
-				marginTop: 16,
-				lineHeight: 1.4,
-				color: "#dcdcf5"
-			}, clip(c.headline, 150))
-		]),
-		h("div", {
-			display: "flex",
-			gap: 12,
-			flexWrap: "wrap"
-		}, (hide.includes("traits") ? [] : profile.traits.slice(0, 3)).map((_tr, i) => h("div", {
-			display: "flex",
-			fontSize: 24,
-			padding: "8px 18px",
-			borderRadius: 999,
-			backgroundColor: "rgba(255,255,255,0.14)"
-		}, clip(c.trait(i).name, 32)))),
-		h("div", {
-			display: "flex",
-			justifyContent: "space-between",
-			alignItems: "flex-end"
-		}, [h("div", {
-			display: "flex",
-			gap: 48
-		}, (hide.includes("stats") ? [] : numbers).map(([label, value]) => h("div", {
-			display: "flex",
-			flexDirection: "column"
-		}, [h("div", {
-			fontSize: 40,
-			fontWeight: 700
-		}, value), h("div", {
-			fontSize: 18,
-			color: "#b9b9ff"
-		}, label)]))), h("div", {
-			fontSize: 20,
-			color: "#b9b9ff"
-		}, "npx prompt-profile")])
+				display: "flex",
+				justifyContent: "space-between",
+				alignItems: "flex-end"
+			}, [h("div", {
+				display: "flex",
+				gap: 44
+			}, (hide.includes("stats") ? [] : cardMetrics(profile, lang, 3)).map(([label, value]) => h("div", {
+				display: "flex",
+				flexDirection: "column"
+			}, [h("div", {
+				fontFamily: DISPLAY_FONT,
+				fontWeight: 800,
+				fontSize: 36
+			}, value), h("div", {
+				fontSize: 16,
+				color: k.muted
+			}, label)]))), h("div", {
+				fontSize: 18,
+				color: k.muted
+			}, "npx prompt-profile")])
+		])
 	]);
 };
 /** Archetype size steps: long names get smaller type instead of overflowing. */
@@ -3543,15 +3661,7 @@ const heatmap = (s, loc, view = PRIVATE_VIEW) => {
 };
 /** 24 radial bars around a dial; the busiest four hours are drawn in full colour. */
 const radialClock = (s, window, label) => {
-	const max = Math.max(1, ...s.hourHistogram);
-	const inWindow = (h) => window !== null && (h - window.start + 24) % 24 < (window.end - window.start + 24) % 24;
-	const bars = s.hourHistogram.map((n, h) => {
-		const a = h / 24 * Math.PI * 2 - Math.PI / 2;
-		const r0 = 62;
-		const r1 = 66 + 54 * n / max;
-		const p = (r) => `${(130 + Math.cos(a) * r).toFixed(1)} ${(130 + Math.sin(a) * r).toFixed(1)}`;
-		return html`<path d="M${p(r0)}L${p(r1)}" class="${inWindow(h) ? "clock-bar on" : "clock-bar"}" />`;
-	});
+	const bars = clockBars(s.hourHistogram, window).map((b) => html`<path d="M${b.from}L${b.to}" class="${b.on ? "clock-bar on" : "clock-bar"}" />`);
 	const ticks = [
 		0,
 		6,
@@ -3569,7 +3679,7 @@ const radialClock = (s, window, label) => {
 	});
 	return html`<figure class="clock">
     <svg viewBox="0 0 260 260" aria-hidden="true">
-      <circle cx="130" cy="130" r="60" class="clock-dial" />
+      <circle cx="130" cy="130" r="${60}" class="clock-dial" />
       ${bars}${ticks}
     </svg>
     <figcaption>${label}</figcaption>
@@ -4305,30 +4415,6 @@ const progressBlock = (p, loc, v, scrub) => {
 const signatureTile = (value, label, tip, i) => html`<div class="sig tip ${i === 0 ? "tip-l" : i === 3 ? "tip-r" : ""}" ${tip} tabindex="-1">
     <b>${value}</b><span>${label}</span>
   </div>`;
-const CLASSIC_TOKENS = {
-	light: {
-		bg: "#f6f6f3",
-		fg: "#1d1d1f",
-		muted: "#6b6b70",
-		card: "#ffffff",
-		border: "#e6e6e1",
-		accent: "#5b5bd6",
-		accentSoft: "#ececfb",
-		warn: "#9a5800",
-		empty: "#ececea"
-	},
-	dark: {
-		bg: "#121214",
-		fg: "#ececee",
-		muted: "#9a9aa2",
-		card: "#1c1c20",
-		border: "#2c2c33",
-		accent: "#9d9dff",
-		accentSoft: "#25254a",
-		warn: "#f0b35a",
-		empty: "#26262c"
-	}
-};
 /** The classic hero: today's colors on a card, with the hour graphic. */
 const CLASSIC_IDENTITY = {
 	background: "var(--card)",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prompt-profile",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Analyze your past prompts from AI coding agents (Claude Code, Codex) locally and generate a personal profile.",
   "keywords": [
     "ai",