Skip to content

Commit c3ae326

Browse files
authored
Merge pull request #20 from melagiri/feature/docs-full-content
docs: full content for dashboard guides — sessions, insights, analytics, export
2 parents 0cd0f8a + bac49ab commit c3ae326

7 files changed

Lines changed: 548 additions & 37 deletions

File tree

‎docs-site/astro.config.mjs‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,9 @@ export default defineConfig({
3838
{ label: 'Firebase Setup', slug: 'guides/firebase-setup' },
3939
{ label: 'Syncing Sessions', slug: 'guides/syncing-sessions' },
4040
{ label: 'Web Dashboard', slug: 'guides/web-dashboard' },
41+
{ label: 'Sessions & Chat', slug: 'guides/sessions-and-chat' },
42+
{ label: 'Insights & Analysis', slug: 'guides/insights-and-analysis' },
43+
{ label: 'Analytics & Export', slug: 'guides/analytics-and-export' },
4144
],
4245
},
4346
{

‎docs-site/public/images/README.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# Screenshot Manifest
2+
3+
Screenshots referenced in the documentation. Capture from [code-insights.app](https://code-insights.app) in light mode at 1512px viewport width.
4+
5+
## Required Screenshots
6+
7+
| Filename | Referenced In | What to Capture |
8+
|----------|--------------|-----------------|
9+
| `dashboard-overview.png` | `guides/web-dashboard.md` | Full dashboard: greeting, all 8 stat cards, activity chart with 30d selected |
10+
| `session-sidebar.png` | `guides/sessions-and-chat.md` | Sessions page showing left sidebar with search bar, project filter, and session list |
11+
| `session-overview.png` | `guides/sessions-and-chat.md` | Session detail Overview tab: title, metadata bar, summary, vitals cards with character badge (use a Deep Focus session) |
12+
| `conversation-view.png` | `guides/sessions-and-chat.md` | Session detail Conversation tab: user message, Claude response with thinking block, tool call badges |
13+
| `prompt-quality.png` | `guides/insights-and-analysis.md` | Prompt Quality Analysis card: score (75-85 range), anti-patterns with counts, wasted turns, tips |
14+
| `insight-cards.png` | `guides/insights-and-analysis.md` | Insights browse page: mix of Learning, Decision, Summary cards with type badges |
15+
| `analytics-charts.png` | `guides/analytics-and-export.md` | Analytics page: summary cards + Activity Over Time chart + Insight Types donut + Top Projects bar |
16+
| `export-wizard.png` | `guides/analytics-and-export.md` | Export page step 1: three scope cards (Everything, Project, Daily Digest) |
17+
18+
## Suggested Sessions for Screenshots
19+
20+
These sessions have rich data suitable for documentation screenshots:
21+
22+
- `d9474210` — "Pre-launch audits, fixes, and docs site deployment" (Prompt Quality 75, 5 learnings, 3 decisions)
23+
- `29ebf872` — "Deep work: sheet.tsx" (Deep Focus character, 5h 24m, 249 messages)
24+
- `0d4b2de8` — Good conversation view examples
25+
- `7de0525b` — Variety of insight types
26+
27+
## Capture Notes
28+
29+
- Use light mode (default for docs)
30+
- Viewport: 1512 x 775 (standard MacBook Pro)
31+
- Crop to content area (remove browser chrome)
32+
- Save as PNG, optimize with `sharp` or `pngquant`
33+
- Recommended max width: 1200px for retina displays
Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
---
2+
title: Analytics & Export
3+
description: Visualize usage patterns across sessions and export your insights as Markdown for Obsidian, Notion, or plain files.
4+
---
5+
6+
Analytics show the big picture: how you use AI coding tools over time, which projects demand the most attention, where your money goes, and what kinds of insights emerge from your sessions. The dashboard's Analytics page turns raw Firestore data into charts and summaries that reveal patterns you wouldn't notice session by session. And when you want to take that data somewhere else — into your note-taking app, a team wiki, or a personal knowledge base — the Export wizard packages everything as clean Markdown files.
7+
8+
## Analytics Overview
9+
10+
The Analytics page aggregates your entire session history into a single view. At the top, four summary cards give you the headline numbers:
11+
12+
- **Total Sessions** — Every session synced to Firestore, across all projects and devices
13+
- **Total Insights** — The combined count of all LLM-generated insights (summaries, decisions, learnings, techniques, and prompt quality reports)
14+
- **Active Projects** — How many distinct codebases you've worked on
15+
- **Estimated Cost** — Approximate total spend based on token counts and model pricing
16+
17+
These cards update in real-time as new sessions sync and new insights are generated. They're your at-a-glance health check — a way to gauge the scale and cost of your AI-assisted development without digging into individual sessions.
18+
19+
## Charts
20+
21+
Below the summary cards, five charts break your data down into visual patterns.
22+
23+
### Activity Over Time
24+
25+
A full-width area chart showing two metrics across your entire history:
26+
27+
- **Sessions** (blue) — How many sessions you started each day
28+
- **Insights** (green) — How many insights were generated each day, reflecting your analysis activity
29+
30+
Unlike the dashboard home page, which defaults to a 30-day window, the Analytics chart shows everything from your first session onward. Hover over any point to see the exact daily counts. This is where you spot long-term trends: a ramp-up before a release, a quiet stretch during vacation, or a steady cadence that tells you your workflow is stable.
31+
32+
### Insight Types
33+
34+
A donut chart showing the distribution of your insight categories:
35+
36+
- **Decisions** (blue) — Architectural and design choices the LLM identified
37+
- **Learnings** (green) — New knowledge or techniques you picked up (Technique insights are grouped under Learnings here)
38+
- **Prompt Quality** (red) — Analysis of how effectively you prompted Claude
39+
- **Summaries** (purple) — High-level session recaps
40+
41+
This chart helps you see whether your analysis is balanced or skewed. If you're generating mostly summaries and few decisions, you might want to run decision-focused analysis on older sessions. If prompt quality reports dominate, that's a signal you're actively working on improving your prompting habits.
42+
43+
### Top Projects
44+
45+
A horizontal bar chart ranking your projects by session count. The longest bar is the project that gets the most AI attention. This is useful for understanding where your time goes — and for spotting projects that might benefit from more structured analysis.
46+
47+
### Cost Over Time
48+
49+
An area chart tracking your estimated spending day by day. The shape of this chart tells a story: did switching from Opus to Sonnet flatten the curve? Did that week-long refactor spike your costs? Are you spending more or less than last month? Pair this with the Activity chart to understand whether cost changes come from volume (more sessions) or intensity (more tokens per session).
50+
51+
### Model Usage
52+
53+
A donut chart showing which Claude models you use most frequently — for example, `sonnet-4` at 67% and `opus-4-6` at 32%. This helps you understand your model preferences and their cost implications. If you're trying to reduce spend, this chart shows exactly where the tokens are going.
54+
55+
![Analytics page showing activity chart and insight type distribution](/images/analytics-charts.png)
56+
57+
:::tip
58+
The Analytics page is a good place to visit at the end of each week. Spend two minutes scanning the charts: is your activity trending up or down? Are costs where you expect them? Are you generating insights across all categories? These quick checks keep you aware of your patterns without requiring deep analysis.
59+
:::
60+
61+
## Export
62+
63+
The Export page walks you through a 4-step wizard to download your sessions and insights as Markdown files. Everything runs client-side — the dashboard reads from your Firestore, formats the data locally, and hands you a file. Nothing leaves your browser.
64+
65+
### Step 1: What to Export
66+
67+
Choose your scope:
68+
69+
- **Everything** — All sessions and insights across all projects. You can optionally narrow this with a date range in the next step.
70+
- **Project** — All insights from a single project. Useful when you want a focused export for one codebase.
71+
- **Daily Digest** — A summary for a specific day. Pulls together all sessions and insights from that date into a single document.
72+
73+
### Step 2: Configure
74+
75+
Set the parameters for your chosen scope:
76+
77+
- **Everything** — Pick a start and end date to filter, or leave blank to export your full history
78+
- **Project** — Select a project from the dropdown (populated from your Firestore data)
79+
- **Daily Digest** — Choose a specific date
80+
81+
### Step 3: Format
82+
83+
Choose your output format. All three produce valid Markdown — they differ in how they handle structure and linking.
84+
85+
- **Plain Markdown** — Standard `.md` with headers, lists, and code blocks. Works everywhere: GitHub, VS Code preview, any text editor. This is the safe default.
86+
- **Obsidian** — Adds callout blocks (`> [!note]`, `> [!tip]`, `> [!warning]`) for visual emphasis, and `[[wiki-style]]` backlinks between related sessions and insights. Import the file directly into your Obsidian vault and the links resolve automatically if you export multiple files into the same vault.
87+
- **Notion** — Uses HTML `<details>` toggle blocks for collapsible sections. When you paste this Markdown into Notion, the toggles render natively as expandable/collapsible blocks — useful for long exports that would otherwise be overwhelming to scroll through.
88+
89+
:::note
90+
The format choice only affects presentation. The underlying data is identical across all three formats. You can always re-export in a different format later.
91+
:::
92+
93+
### Step 4: Preview & Download
94+
95+
The wizard generates a live preview of the Markdown output. Scroll through it to verify the content and formatting look right, then click **Download** to save the `.md` file to your machine.
96+
97+
![Export wizard showing scope selection](/images/export-wizard.png)
98+
99+
## Use Cases
100+
101+
A few practical ways to use Analytics and Export together:
102+
103+
- **Weekly retrospective** — Export a Daily Digest for each day of the week into Obsidian. Review the digests in sequence to see how the week unfolded: what you built, what you decided, what you learned. The `[[backlinks]]` in Obsidian format connect related sessions across days.
104+
105+
- **Personal knowledge base** — Run LLM analysis on all your sessions, then export all Learnings and Techniques to Obsidian. Over time, this builds a personal wiki of patterns, tools, and approaches you've encountered — searchable and cross-linked.
106+
107+
- **Team sharing** — Export a project's Decisions as Plain Markdown and paste them into a PR description, a team wiki page, or a Slack thread. The plain format renders cleanly anywhere without requiring a specific tool.
108+
109+
- **Cost tracking** — Check the Analytics cost chart weekly. If spending is higher than expected, use the Model Usage donut to see whether you're over-indexing on expensive models. Adjust your LLM provider settings accordingly.
110+
111+
:::tip
112+
Export pairs well with the [Insights](/guides/web-dashboard/#main-navigation) page. Use Insights to review and curate what the LLM generated, then use Export to pull the curated results into your preferred tool.
113+
:::

0 commit comments

Comments
 (0)