@mrclrchtr/supi-insights 0.1.0

package/src/report.css

@@ -0,0 +1,411 @@
+/* biome-ignore lint/nursery/noExcessiveLinesPerFile: report stylesheet is shipped as one runtime asset. */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+body {
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
+  background: #f8fafc;
+  color: #334155;
+  line-height: 1.65;
+  padding: 48px 24px;
+}
+.container {
+  max-width: 800px;
+  margin: 0 auto;
+}
+h1 {
+  font-size: 32px;
+  font-weight: 700;
+  color: #0f172a;
+  margin-bottom: 8px;
+}
+h2 {
+  font-size: 20px;
+  font-weight: 600;
+  color: #0f172a;
+  margin-top: 48px;
+  margin-bottom: 16px;
+}
+.subtitle {
+  color: #64748b;
+  font-size: 15px;
+  margin-bottom: 32px;
+}
+.stats-row {
+  display: flex;
+  gap: 24px;
+  margin-bottom: 40px;
+  padding: 20px 0;
+  border-top: 1px solid #e2e8f0;
+  border-bottom: 1px solid #e2e8f0;
+  flex-wrap: wrap;
+}
+.stat {
+  text-align: center;
+}
+.stat-value {
+  font-size: 24px;
+  font-weight: 700;
+  color: #0f172a;
+}
+.stat-label {
+  font-size: 11px;
+  color: #64748b;
+  text-transform: uppercase;
+}
+.at-a-glance {
+  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+  border: 1px solid #f59e0b;
+  border-radius: 12px;
+  padding: 20px 24px;
+  margin-bottom: 32px;
+}
+.glance-title {
+  font-size: 16px;
+  font-weight: 700;
+  color: #92400e;
+  margin-bottom: 16px;
+}
+.glance-sections {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.glance-section {
+  font-size: 14px;
+  color: #78350f;
+  line-height: 1.6;
+}
+.glance-section strong {
+  color: #92400e;
+}
+.project-areas {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 32px;
+}
+.project-area {
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 16px;
+}
+.area-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+.area-name {
+  font-weight: 600;
+  font-size: 15px;
+  color: #0f172a;
+}
+.area-count {
+  font-size: 12px;
+  color: #64748b;
+  background: #f1f5f9;
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+.area-desc {
+  font-size: 14px;
+  color: #475569;
+  line-height: 1.5;
+}
+.narrative {
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 20px;
+  margin-bottom: 24px;
+}
+.narrative p {
+  margin-bottom: 12px;
+  font-size: 14px;
+  color: #475569;
+  line-height: 1.7;
+}
+.key-insight {
+  background: #f0fdf4;
+  border: 1px solid #bbf7d0;
+  border-radius: 8px;
+  padding: 12px 16px;
+  margin-top: 12px;
+  font-size: 14px;
+  color: #166534;
+}
+.section-intro {
+  font-size: 14px;
+  color: #64748b;
+  margin-bottom: 16px;
+}
+.big-wins {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 24px;
+}
+.big-win {
+  background: #f0fdf4;
+  border: 1px solid #bbf7d0;
+  border-radius: 8px;
+  padding: 16px;
+}
+.big-win-title {
+  font-weight: 600;
+  font-size: 15px;
+  color: #166534;
+  margin-bottom: 8px;
+}
+.big-win-desc {
+  font-size: 14px;
+  color: #15803d;
+  line-height: 1.5;
+}
+.friction-categories {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-bottom: 24px;
+}
+.friction-category {
+  background: #fef2f2;
+  border: 1px solid #fca5a5;
+  border-radius: 8px;
+  padding: 16px;
+}
+.friction-title {
+  font-weight: 600;
+  font-size: 15px;
+  color: #991b1b;
+  margin-bottom: 6px;
+}
+.friction-desc {
+  font-size: 13px;
+  color: #7f1d1d;
+  margin-bottom: 10px;
+}
+.friction-examples {
+  margin: 0 0 0 20px;
+  font-size: 13px;
+  color: #334155;
+}
+.friction-examples li {
+  margin-bottom: 4px;
+}
+.claude-md-section {
+  background: #eff6ff;
+  border: 1px solid #bfdbfe;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 20px;
+}
+.claude-md-item {
+  padding: 10px 0;
+  border-bottom: 1px solid #dbeafe;
+}
+.claude-md-item:last-child {
+  border-bottom: none;
+}
+.cmd-code {
+  background: white;
+  padding: 8px 12px;
+  border-radius: 4px;
+  font-size: 12px;
+  color: #1e40af;
+  border: 1px solid #bfdbfe;
+  font-family: monospace;
+  display: block;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.cmd-why {
+  font-size: 12px;
+  color: #64748b;
+  margin-top: 4px;
+}
+.features-section,
+.patterns-section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin: 16px 0;
+}
+.feature-card {
+  background: #f0fdf4;
+  border: 1px solid #86efac;
+  border-radius: 8px;
+  padding: 16px;
+}
+.pattern-card {
+  background: #f0f9ff;
+  border: 1px solid #7dd3fc;
+  border-radius: 8px;
+  padding: 16px;
+}
+.feature-title,
+.pattern-title {
+  font-weight: 600;
+  font-size: 15px;
+  color: #0f172a;
+  margin-bottom: 6px;
+}
+.feature-oneliner {
+  font-size: 14px;
+  color: #475569;
+  margin-bottom: 8px;
+}
+.pattern-summary {
+  font-size: 14px;
+  color: #475569;
+  margin-bottom: 8px;
+}
+.feature-why,
+.pattern-detail {
+  font-size: 13px;
+  color: #334155;
+  line-height: 1.5;
+}
+.example-code,
+.copyable-prompt {
+  display: block;
+  background: #f1f5f9;
+  padding: 8px 12px;
+  border-radius: 4px;
+  font-family: monospace;
+  font-size: 12px;
+  color: #334155;
+  margin-top: 8px;
+  white-space: pre-wrap;
+}
+.charts-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 24px;
+  margin: 24px 0;
+}
+.chart-card {
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 16px;
+}
+.chart-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: #64748b;
+  text-transform: uppercase;
+  margin-bottom: 12px;
+}
+.bar-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 6px;
+}
+.bar-label {
+  width: 120px;
+  font-size: 11px;
+  color: #475569;
+  flex-shrink: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bar-track {
+  flex: 1;
+  height: 6px;
+  background: #f1f5f9;
+  border-radius: 3px;
+  margin: 0 8px;
+}
+.bar-fill {
+  height: 100%;
+  border-radius: 3px;
+}
+.bar-value {
+  width: 28px;
+  font-size: 11px;
+  font-weight: 500;
+  color: #64748b;
+  text-align: right;
+}
+.empty {
+  color: #94a3b8;
+  font-size: 13px;
+}
+.horizon-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.horizon-card {
+  background: linear-gradient(135deg, #faf5ff 0%, #f5f3ff 100%);
+  border: 1px solid #c4b5fd;
+  border-radius: 8px;
+  padding: 16px;
+}
+.horizon-title {
+  font-weight: 600;
+  font-size: 15px;
+  color: #5b21b6;
+  margin-bottom: 8px;
+}
+.horizon-possible {
+  font-size: 14px;
+  color: #334155;
+  margin-bottom: 10px;
+  line-height: 1.5;
+}
+.horizon-tip {
+  font-size: 13px;
+  color: #6b21a8;
+  background: rgba(255, 255, 255, 0.6);
+  padding: 8px 12px;
+  border-radius: 4px;
+}
+.fun-ending {
+  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+  border: 1px solid #fbbf24;
+  border-radius: 12px;
+  padding: 24px;
+  margin-top: 40px;
+  text-align: center;
+}
+.fun-headline {
+  font-size: 18px;
+  font-weight: 600;
+  color: #78350f;
+  margin-bottom: 8px;
+}
+.fun-detail {
+  font-size: 14px;
+  color: #92400e;
+}
+.failure-banner {
+  background: #fef2f2;
+  border: 1px solid #fca5a5;
+  border-radius: 8px;
+  padding: 12px 16px;
+  margin-bottom: 24px;
+  font-size: 13px;
+  color: #991b1b;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.failure-hint {
+  font-size: 12px;
+  color: #64748b;
+}
+@media (max-width: 640px) {
+  .charts-row {
+    grid-template-columns: 1fr;
+  }
+  .stats-row {
+    justify-content: center;
+  }
+}

package/src/report.js

@@ -0,0 +1,35 @@
+const rawHourCounts = __HOUR_COUNTS_JSON__;
+function updateHourHistogram(utcOffset) {
+  const periods = [
+    { label: "Morning (6-12)", range: [6, 7, 8, 9, 10, 11] },
+    { label: "Afternoon (12-18)", range: [12, 13, 14, 15, 16, 17] },
+    { label: "Evening (18-24)", range: [18, 19, 20, 21, 22, 23] },
+    { label: "Night (0-6)", range: [0, 1, 2, 3, 4, 5] },
+  ];
+  const adjustedCounts = {};
+  for (const [hour, count] of Object.entries(rawHourCounts)) {
+    const newHour = (parseInt(hour, 10) + utcOffset + 24) % 24;
+    adjustedCounts[newHour] = (adjustedCounts[newHour] || 0) + count;
+  }
+  const periodCounts = periods.map((p) => ({
+    label: p.label,
+    count: p.range.reduce((sum, h) => sum + (adjustedCounts[h] || 0), 0),
+  }));
+  const maxCount = Math.max(...periodCounts.map((p) => p.count)) || 1;
+  const container = document.getElementById("hour-histogram");
+  if (!container) return;
+  container.innerHTML = periodCounts
+    .map(
+      (p) => `
+        <div class="bar-row">
+          <div class="bar-label">${p.label}</div>
+          <div class="bar-track"><div class="bar-fill" style="width:${(p.count / maxCount) * 100}%;background:#8b5cf6"></div></div>
+          <div class="bar-value">${p.count}</div>
+        </div>
+      `,
+    )
+    .join("");
+}
+document.getElementById("timezone-select")?.addEventListener("change", function () {
+  updateHourHistogram(parseInt(this.value, 10));
+});

package/src/scanner.ts

@@ -0,0 +1,13 @@
+// Session scanner — discover and list PI sessions
+
+import type { SessionInfo } from "@earendil-works/pi-coding-agent";
+import { SessionManager } from "@earendil-works/pi-coding-agent";
+
+export async function scanAllSessions(
+  onProgress?: (loaded: number, total: number) => void,
+): Promise<SessionInfo[]> {
+  const sessions = await SessionManager.listAll(onProgress);
+  // Sort by modified date descending (most recent first)
+  sessions.sort((a, b) => b.modified.getTime() - a.modified.getTime());
+  return sessions;
+}

package/src/types.ts

@@ -0,0 +1,114 @@
+// Shared types for supi-insights
+
+export type SessionMeta = {
+  sessionId: string;
+  projectPath: string;
+  startTime: string;
+  durationMinutes: number;
+  userMessageCount: number;
+  assistantMessageCount: number;
+  toolCounts: Record<string, number>;
+  languages: Record<string, number>;
+  gitCommits: number;
+  gitPushes: number;
+  inputTokens: number;
+  outputTokens: number;
+  firstPrompt: string;
+  summary?: string;
+  userInterruptions: number;
+  userResponseTimes: number[];
+  toolErrors: number;
+  toolErrorCategories: Record<string, number>;
+  usesTaskAgent: boolean;
+  usesMcp: boolean;
+  usesWebSearch: boolean;
+  usesWebFetch: boolean;
+  linesAdded: number;
+  linesRemoved: number;
+  filesModified: number;
+  messageHours: number[];
+  userMessageTimestamps: string[];
+};
+
+export type SessionFacets = {
+  sessionId: string;
+  underlyingGoal: string;
+  goalCategories: Record<string, number>;
+  outcome: string;
+  userSatisfactionCounts: Record<string, number>;
+  claudeHelpfulness: string;
+  sessionType: string;
+  frictionCounts: Record<string, number>;
+  frictionDetail: string;
+  primarySuccess: string;
+  briefSummary: string;
+  userInstructionsToClaude?: string[];
+};
+
+export type AggregatedData = {
+  totalSessions: number;
+  totalSessionsScanned?: number;
+  sessionsWithFacets: number;
+  dateRange: { start: string; end: string };
+  totalMessages: number;
+  totalDurationHours: number;
+  totalInputTokens: number;
+  totalOutputTokens: number;
+  toolCounts: Record<string, number>;
+  languages: Record<string, number>;
+  gitCommits: number;
+  gitPushes: number;
+  projects: Record<string, number>;
+  goalCategories: Record<string, number>;
+  outcomes: Record<string, number>;
+  satisfaction: Record<string, number>;
+  helpfulness: Record<string, number>;
+  sessionTypes: Record<string, number>;
+  friction: Record<string, number>;
+  success: Record<string, number>;
+  sessionSummaries: Array<{
+    id: string;
+    date: string;
+    summary: string;
+    goal?: string;
+  }>;
+  totalInterruptions: number;
+  totalToolErrors: number;
+  toolErrorCategories: Record<string, number>;
+  userResponseTimes: number[];
+  medianResponseTime: number;
+  avgResponseTime: number;
+  sessionsUsingTaskAgent: number;
+  sessionsUsingMcp: number;
+  sessionsUsingWebSearch: number;
+  sessionsUsingWebFetch: number;
+  totalLinesAdded: number;
+  totalLinesRemoved: number;
+  totalFilesModified: number;
+  daysActive: number;
+  messagesPerDay: number;
+  messageHours: number[];
+  multiClauding: {
+    overlapEvents: number;
+    sessionsInvolved: number;
+    userMessagesDuring: number;
+  };
+  /** Number of sessions attempted for LLM facet extraction. */
+  facetExtractionAttempted: number;
+  /** Number of sessions where LLM facet extraction failed. */
+  facetExtractionFailed: number;
+  /** List of insight section names that failed to generate. */
+  insightSectionsFailed: string[];
+};
+
+export type InsightSectionName =
+  | "projectAreas"
+  | "interactionStyle"
+  | "whatWorks"
+  | "frictionAnalysis"
+  | "suggestions"
+  | "onTheHorizon"
+  | "atAGlance"
+  | "funEnding";
+
+export type InsightResults = Partial<Record<InsightSectionName, unknown>>;