DEV Community: dinesh0666

I built a VS Code extension that blocks AI so you can actually learn to code

dinesh0666 — Tue, 24 Mar 2026 09:23:46 +0000

🧘 I Built a VS Code Extension That Forces You to Code Without AI

We've all been there — you're stuck on a problem, so you hit Cmd+I, Copilot spits out 40 lines, and you paste it in. Problem "solved." But did you solve it?

I built Raw Code Focus — a VS Code extension that completely blocks all AI assistance for a timed session, so you can actually practice thinking through problems yourself.

What It Does

When you start a session:

🚫 Copilot inline completions, Next Edit Suggestions, and Chat are all disabled
🚫 TabNine, Codeium, and VS Code's built-in inline suggestions are off
🚫 The "Generate code ⌘I" hint is hidden
⏱ A live countdown sits in your status bar (turns yellow under 5 min)
📊 Stats are tracked — streaks, total focus time, completion rate

When time's up, everything is silently restored to exactly how it was.

Why I Built It

I noticed I was reaching for Copilot before I'd even fully read the error. That's not learning — it's outsourcing thinking.

Raw Code Focus gives you a guilt-free way to say "for the next hour, it's just me and the compiler." Like going to the gym without a spotter for every rep.

The Tricky Part — Actually Blocking Copilot

Turns out, just toggling one setting isn't enough. Copilot has multiple entry points:

"github.copilot.editor.enableAutoCompletions": false,
"github.copilot.enable": { "*": false },
"github.copilot.inlineSuggest.enable": false,
"github.copilot.nextEditSuggestions.enabled": false,
"inlineChat.enabled": false,
"chat.commandCenter.enabled": false,
"workbench.editor.empty.hint": "hidden"

And settings must be written to both Global and Workspace targets — otherwise a workspace config can silently override the block.

The extension also re-checks every 3 seconds and closes any chat panels that get reopened, so there's no sneaking around it.

The Dashboard

Open the dashboard with Raw Code Focus: Open Dashboard to see:

🔥 Current and longest day streak
⏱ Total accumulated focus time
✅ Session completion rate
📋 Recent session history

Install It

Search Raw Code Focus in VS Code Extensions, or grab it directly:

👉 marketplace.visualstudio.com/items?itemName=DhineshKumar.raw-code-focus

Source code: github.com/dinesh0666/ai-detox

Roadmap

[ ] Pomodoro-style session scheduler
[ ] Custom session goals and notes
[ ] Weekly stats summary notification

Give it a try and let me know what you think! And if you have ideas for what else should be blocked (looking at you, ChatGPT side-by-side windows 👀), drop them in the comments.

I Built a Claude Skill That Turns Any CSV Into an Executive Report — Here's How

dinesh0666 — Wed, 18 Mar 2026 14:03:02 +0000

Every data person knows the drill.

Someone drops a new dataset in your Slack. You open it, stare at 40 columns and 50,000 rows, and spend the next two hours doing what you always do — profiling nulls, checking distributions, writing up "here's what the data says" for the third time this month.

That two hours? I automated it. With a Claude Skill.

It's called DataStory — upload any CSV or Excel file, and it produces a full executive data narrative report in seconds. Zero manual analysis. I open-sourced it at github.com/dinesh0666/data-story.

Here's exactly how it works.

What is a Claude Skill?

If you haven't seen these yet — Claude Skills are installable instruction sets (SKILL.md files) that teach Claude a specific repeatable workflow. When you install a skill and then trigger it (by uploading a file, using certain phrases, etc.), Claude reads the skill definition and executes the workflow step by step.

Think of it like a .github/workflows YAML, but for AI-driven tasks instead of CI/CD.

The pattern I've been exploring lately is Claude-in-Claude — where the Claude artifact or skill itself calls the Anthropic API to do the heavy analytical lifting. The UI is Claude, the analyst is also Claude. It's surprisingly powerful.

The DataStory architecture

Here's the full pipeline:

CSV/XLSX file
    ↓
profile_data.py        ← pandas: shape, nulls, distributions, outliers
    ↓
JSON profile
    ↓
Anthropic API          ← claude-sonnet-4-20250514: narrative generation
    ↓
JSON narrative
    ↓
generate_report.js     ← docx npm: 9-section Word report
    ↓
datastory_<file>.docx

Three scripts, one orchestrator shell, and a React artifact that does all of this in-browser.

Step 1: Profile the data (Python)

The first script — profile_data.py — runs pure pandas profiling. No ML, no magic. Just stats.

For every column, it outputs:

Numeric: min, max, mean, median, std, q1, q3, outlier_count (IQR method)
Categorical: top 5 value frequencies
Datetime: range in days
All: null count, null %, unique count

# Outlier detection via IQR
iqr = q3 - q1
lower, upper = q1 - 1.5 * iqr, q3 + 1.5 * iqr
outliers = int(((nums < lower) | (nums > upper)).sum())

Files over 10k rows get automatically sampled. CSV encoding failures fall back to latin-1. The output is a clean JSON blob.

Step 2: Generate the narrative (Claude API)

This is where the Claude-in-Claude magic happens. I send the profile JSON to claude-sonnet-4-20250514 with max_tokens: 4000 and a strict system prompt:

You are a senior data analyst writing an executive data story report.
Given a statistical profile, return ONLY valid JSON with these keys:
executive_summary, dataset_overview, key_findings (array of 5),
anomalies, column_insights, data_quality_score (0-100),
data_quality_label, data_quality_assessment, recommended_next_steps.

A critical lesson from building this: always set max_tokens high enough. My first version used 1000 and got Unterminated string in JSON errors because the response was being cut off mid-object. Bumped it to 4000 and it works cleanly.

I also slim the profile before sending — only 3 sample rows and 3 top values per column — to keep the prompt tight without losing analytical context.

const slimProfile = {
  ...profile,
  sample_rows: profile.sample_rows.slice(0, 3),
  columns: profile.columns.map(c => ({
    ...c,
    top_values: c.top_values
      ? Object.fromEntries(Object.entries(c.top_values).slice(0, 3))
      : undefined
  }))
};

The JSON parsing is hardened too — strips markdown fences, falls back to regex-extracting the first {...} block if Claude adds any preamble:

try {
  return JSON.parse(clean);
} catch {
  const match = clean.match(/\{[\s\S]*\}/);
  if (match) return JSON.parse(match[0]);
  throw new Error(`Unexpected response`);
}

Step 3: Generate the report (Node.js + docx)

The generate_report.js script takes the combined profile + narrative and builds a 9-section Word document using the docx npm package:

Cover (title, filename, date)
Executive Summary (callout box)
Dataset Overview (stats table)
Key Findings (numbered list)
Anomalies & Concerns (amber callout — auto-skipped if empty)
Column Profiles (full table: type, nulls, stats, outliers)
Column Insights (bullet list)
Data Quality Assessment (score + paragraph)
Recommended Next Steps + Appendix

A few docx gotchas that burned me and might save you:

// ❌ NEVER use WidthType.PERCENTAGE — breaks in Google Docs
// ✅ Always use WidthType.DXA
width: { size: 9360, type: WidthType.DXA }

// ❌ NEVER ShadingType.SOLID — renders as solid black
// ✅ Always ShadingType.CLEAR
shading: { fill: "D6E4F0", type: ShadingType.CLEAR }

// Tables need DUAL widths — both on table AND each cell
// Forgetting one causes rendering issues on some platforms

The React artifact (Claude-in-Claude in the browser)

The app/DataStory.jsx file does the whole pipeline in-browser — no backend, no server. Just a React component that:

Parses the uploaded file client-side using SheetJS (xlsx)
Runs the profiling in pure JS (rewritten from the Python logic)
Calls the Anthropic API directly from the browser
Renders the full interactive report

And critically — there's a Download report button that generates a self-contained HTML file. Open it in any browser, hit Ctrl+P, save as PDF. That's your shareable report.

The quality ring (SVG animated arc) was a fun touch:

const dash = (score / 100) * circ;
<circle cx="42" cy="42" r={r} stroke={color}
  strokeDasharray={`${dash} ${circ}`}
  strokeLinecap="round"
  transform="rotate(-90 42 42)"
  style={{ transition: "stroke-dasharray 1s ease" }} />

The SKILL.md

The skill definition is what makes this installable in Claude.ai. The description field is critical — it's how Claude decides when to trigger the skill:

description: >
  Auto-generates an executive data narrative report from any uploaded CSV or Excel file.
  Trigger when user uploads a CSV, XLSX, or data file and wants analysis, a data story,
  a data profile, a summary report, insights, anomaly detection, or an executive summary.
  Also trigger when user says: "analyze this data", "what does this dataset say",
  "generate a report from this file", "profile my data", "summarize this spreadsheet".

The description needs to be pushy — Claude tends to undertrigger skills if the description is too vague. List out the exact phrases people will use.

Running it

# CLI — full pipeline
export ANTHROPIC_API_KEY=sk-ant-...
bash skill/scripts/run_datastory.sh sales_data.csv
# → datastory_sales_data.docx

# Just profile (no API key needed)
python3 skill/scripts/profile_data.py data.csv > profile.json

Or just use the React artifact — drag and drop your file, done.

What I learned building this

The Claude-in-Claude pattern is underrated. Having the artifact call the Anthropic API directly removes the need for any backend while still getting full model power. The browser becomes the compute layer.

Skill descriptions are the whole triggering mechanism. Spending 10 minutes writing a precise, phrase-rich description is worth more than spending hours on the skill logic if Claude never triggers it.

Data profiling is still a solved problem — the narrative is the hard part. Pandas stats take seconds. Writing "what this means" used to take hours. That's the gap the LLM fills.

What's next

I'm planning to add:

Multi-sheet Excel support — currently reads sheet 1 only
Correlation matrix — for numeric columns, spot which variables move together
Time series detection — if a datetime column exists, auto-generate trend narrative
PDF output — skip the browser print step

Repo: github.com/dinesh0666/data-story

If you build something with it or find a bug, open an issue. And if this sparked an idea for your own Claude Skill — I'd love to see what you build.

notion-flows: Your Notion Pages Are Your Automation Code

dinesh0666 — Tue, 10 Mar 2026 07:50:09 +0000

The idea that broke my brain a little

What if your automation logic lived in Notion — not as a diagram, not as a config file, but as a plain-English page you just... edit?

No redeploy. No YAML. No drag-and-drop node editors.

Just:

Open a Notion page
Write what you want in plain English
Run notion-flows run
Claude reads your page and executes it against your Notion databases

That's notion-flows.

What it does

notion-flows is a TypeScript CLI that treats Notion pages as executable business logic.

You have a registry page in Notion. Each child page is a "flow" — a plain-English description of an automation. The CLI discovers those pages, sends them to Claude with Notion MCP tools, and Claude executes the instructions step by step.

Three example flows are included out of the box:

🔥 Follow Up Cold Leads

This flow finds leads who haven't been contacted in 7 or more days
and drafts personalized follow-up messages.

## Conditions
• Check Contacts DB for Status = "Lead" or "Prospect"
• Filter where Last Contacted is 7+ days ago
• If Deal Value over $2,000, tag as hot

## Actions
• Draft a warm, professional follow-up for each contact
• Update "Next Action" field with the draft message
• Update "Last Contacted" to today

📝 Content Idea Generator

Generate 5 high-value content ideas for a TypeScript consulting business
targeting early-stage startups, add them to the Content Pipeline database,
and write a full first draft for the highest ROI idea.

📊 Weekly CEO Brief

Generate a weekly executive brief by reading all databases,
then append it to this page.

These aren't config files. They're just text. You can rewrite them any time and the behavior changes on the next run.

The agentic loop

The core of notion-flows is a Claude agentic loop with Notion MCP tools.

while (toolCallCount < 30) {
  const response = await claude.messages.create({
    model: 'claude-opus-4-5',
    max_tokens: 4096,
    system: systemPrompt,
    tools: notion.getMCPTools(),  // query, create, update, append, get
    messages
  })

  if (response.stop_reason === 'end_turn') {
    finalSummary = extractText(response)
    break
  }

  if (response.stop_reason === 'tool_use') {
    messages.push({ role: 'assistant', content: response.content })

    const toolResults = []
    for (const block of response.content) {
      if (block.type === 'tool_use') {
        const result = await notion.executeTool(block.name, block.input)
        toolResults.push({
          type: 'tool_result',
          tool_use_id: block.id,
          content: JSON.stringify(result)
        })
      }
    }

    messages.push({ role: 'user', content: toolResults })
  }
}

Claude gets 5 Notion MCP tools:

notion_query_database — filter & sort any database
notion_create_page — create DB entries or sub-pages
notion_update_page — patch any page properties
notion_append_blocks — write rich content to a page
notion_get_page — retrieve page properties

After each run, the flow's own Notion page gets a run log appended automatically — timestamp, summary, and every action taken.

Terminal output

⚡ notion-flows  v1.0.0

⚡ Executing: 🔥 Follow Up Cold Leads
   Source: https://notion.so/xxxxx
────────────────────────────────────────────────────────────
  💭 I'll query the Contacts database for leads not contacted recently...
  🔧 notion_query_database (1/30) ✓
  💭 Found 3 contacts — drafting follow-ups and tagging one as hot...
  🔧 notion_update_page (2/30) ✓
  🔧 notion_update_page (3/30) ✓
  🔧 notion_update_page (4/30) ✓
  🔧 notion_append_blocks (5/30) ✓

✅ Updated 3 contacts with follow-up drafts. Tagged 1 as hot ($4,200 deal).

────────────────────────────────────────────────────────────
📊 Run Summary
────────────────────────────────────────────────────────────
✓ Follow Up Cold Leads — 3 records, 8.4s

Watch mode

npx tsx src/cli.ts watch

Polls every 60 seconds. If you edit a flow page in Notion, it automatically re-runs that flow. Your Notion page is your CI pipeline.

Project structure

notion-flows/
├── src/
│   ├── cli.ts                    # setup / list / run / watch
│   ├── types/index.ts            # Flow, FlowRunResult, NotionWrite
│   ├── runtime/notion.ts         # Notion client + MCP tools
│   ├── executor/flow-executor.ts # Agentic Claude loop
│   └── utils/setup.ts            # One-command workspace scaffolder
├── package.json
├── tsconfig.json
└── .env.example

Tech stack:

TypeScript (ESM, strict)
@anthropic-ai/sdk — Claude claude-opus-4-5
@notionhq/client — Notion REST API
chalk + ora — terminal UX
dotenv + zod

Get started in 3 commands

git clone https://github.com/dinesh0666/notion-flows
cd notion-flows
npm install
cp .env.example .env
# Add NOTION_API_KEY and ANTHROPIC_API_KEY to .env

npx tsx src/cli.ts setup <your-notion-page-id>
# Prints DB IDs → paste them into .env

npx tsx src/cli.ts run

The setup command scaffolds your entire workspace:

Creates the ⚡ notion-flows registry page
Creates Contacts, Content Pipeline, and Revenue databases with full property schemas
Seeds all 3 example flow pages

Why this matters

Every automation tool eventually forces you to learn its interface — a canvas, a config syntax, a DSL. notion-flows flips that: the interface is a Notion page, which you already know.

You can share flows with non-technical teammates. They can edit the logic. You re-run the CLI. No PRs, no deployments.

The Notion page IS the code.

What's next

Scheduled triggers — the trigger: schedule: 0 9 * * 1 syntax is already parsed, just needs a cron runner wired up
Multi-workspace support — share flows between orgs
Flow versioning — Notion's page history is already your git log

Built for the Notion dev.to challenge. Source code on GitHub.

This VS Code Extension Gives Your Coding Session a Vibe Score (and Loses Its Mind at GOD MODE)

dinesh0666 — Tue, 03 Mar 2026 10:28:25 +0000

This is a submission for the Built with Google Gemini: Writing Challenge

What I Built with Google Gemini

VibeMeter — a VS Code extension that elevates vibe coding. It watches how you code in real-time, tracks your flow state, fires achievements when you hit milestones, and calls in an AI coach to roast or praise your session when you need it.

Here's what it does:

⚡ Live Vibe Score (0–100) — computed from your typing speed, saves, active errors, and idle time. Updates every 5 seconds.
🔥 Flow State Levels — six levels that evolve as you code: 😴 Dead Inside → 🥶 Cold Start → 🧘 Vibing → 🌊 In the Flow → 🔥 On Fire → ⚡ GOD MODE
🏆 Achievement System — 14 unlockable achievements that fire as toast notifications mid-session ("Keyboard Destroyer", "Zone Resident", "GOD MODE", "The Comeback")
🤖 AI Vibe Coach — powered by Google Gemini. Sends your session stats + active code context and returns a witty, personalised coaching message
📊 Live Dashboard — animated hero display, colour-coded score bar, 6-stat grid, and an achievement wall

The status bar reacts immediately — reach GOD MODE and it cycles through ⚡ GOD MODE 💀 GOD MODE 🔥 GOD MODE at 450ms intervals. It's dramatic. That's the point.

The Core Idea: Measure Flow, Not Just Output

Most productivity tools count lines of code, commits, or PRs. But those are lagging indicators. What actually matters mid-session is flow state — that effortless, locked-in zone where the code just pours out.

VibeMeter tries to detect that in real-time:

private computeScore(): number {
    const kpm  = this.getKpm();       // keystrokes in last 60s
    const idle = this.getIdleSeconds();

    let score = Math.min(kpm, 60);          // typing speed: 0–60 pts (caps at 60 KPM)
    score += Math.min(this.saves * 2, 20);  // save bonus: max 20 pts
    score -= Math.min(this.errors * 5, 30); // error penalty: max –30 pts

    if      (idle > 300) { score -= 30; }   // 5+ min idle: big drop
    else if (idle > 120) { score -= 15; }
    else if (idle > 60)  { score -= 5;  }

    return Math.max(0, Math.min(100, score));
}

It's not perfect science — it's a vibe. The algorithm rewards momentum and punishes stagnation, which is exactly what flow state is.

How Gemini Powers the AI Coach

When you hit ⌘⇧C (Mac) or Ctrl+Alt+C (Windows), the AI Vibe Coach fires. It:

Grabs your current session stats (score, KPM, saves, errors, flow time)
Grabs up to 100 lines of code around your cursor
Sends both to gemini-2.0-flash with a prompt that makes it act as a witty senior engineer slash hype man

The prompt engineering here was the most fun part. The brief to Gemini:

You are a witty, hype, but genuinely smart AI coding coach.
You're the vibe check your dev session deserves — equal parts hype man and senior engineer.

Rules:
1. Comment on their vibe state — hype them if they're cooking, roast gently if they're slacking.
2. Make ONE sharp, specific observation about the visible code (naming, logic, structure, etc.).
3. End with a concrete power tip or fun challenge to level up their session.
Use emojis. Be that coach nobody asked for but everyone needed.

The result is coaching that actually reads the room. At 80 KPM with zero errors, Gemini is hyping you. At 10 KPM with 6 errors and 4 minutes idle, it's dishing out a gentle roast and a push. Surprisingly motivating.

The Achievement System

The HypeMachine class listens to every VibeEngine state update and checks 14 different conditions. Some are simple counters:

if (state.totalKeystrokes >= 1000) { unlock("ks_1000"); } // "Keyboard Destroyer 🚀"
if (state.flowMinutes >= 30)        { unlock("flow_30");  } // "Zone Resident 🧘"
if (state.level === "⚡")           { unlock("godmode");  } // "GOD MODE ⚡"

Others are more nuanced — the "The Comeback" achievement tracks if you started at Dead Inside (😴) and climbed back to In the Flow (🌊) or higher in the same session. That one feels earned.

Level changes also trigger hype messages:

const HYPE = {
    level_up:   ["Level UP! Your vibe is evolving 🔥", "The vibes are immaculate rn ✨", ...],
    level_down: ["Took a micro-nap mid-sprint, eh? 😴", "Vibe dipped a bit — shake it off 🎯", ...],
    idle_nudge: ["Hey… you alive in there? 👀", "The cursor is lonely. Come back 🖱️", ...],
    godmode:    ["⚡ GOD MODE ACTIVATED. Absolute unit energy 💀", ...],
};

These fire as VS Code showInformationMessage toasts — non-intrusive, fun, and just visible enough to deliver a little dopamine hit mid-session.

What I Learned

1. Context Is Everything in AI Coaching

My first version of the coach prompt sent only session stats — pure numbers. The responses were generic ("you're doing great!"). The moment I added the actual code around the cursor, the responses became specific and genuinely useful. Gemini would call out a suspicious variable name, notice a deeply nested callback, or compliment clean destructuring. That specificity is what makes it feel like a real coach rather than a motivational poster.

Lesson: Give the model context, not just data. Numbers alone don't let it reason. Code + numbers lets it actually see what's happening.

2. Structured Prompts Beat Conversational Ones

For the coach, I gave Gemini three explicit rules and told it to use emojis. Responses are now consistently punchy — 4–5 sentences, always ending with an actionable tip. Without that structure, responses were all over the place in length and tone.

This is the same lesson I'd take into any AI feature: treat the prompt like an API contract, not a conversation starter.

3. Real-Time Event Architecture Is Different from Request-Response

The VibeEngine fires a state update every 5 seconds via a VS Code EventEmitter. The status bar and hype machine both subscribe to it. This reactive pattern — where multiple consumers listen to one source of truth — is fundamentally different from the request-response model most AI apps use.

The interesting design challenge: the event fires frequently, but you don't want achievement toasts firing on every tick. The solution was tracking state transitions (level changed? fire hype) rather than state values (score is 85? always fire).

4. Idle Detection Is Harder Than It Sounds

First version penalised idle time from Date.now() at activation. So if you opened VS Code, didn't type for 30 seconds, and then started — you were already "Dead Inside" before writing a single character.

Fix: only start the idle clock from the first keystroke. Sounds obvious in retrospect. Most UX bugs do.

5. GOD MODE Is a Design Decision

I could have called the top level "Expert" or "Peak Flow". I called it GOD MODE and gave it a cycling animation with skull emojis. That choice made people actually want to reach it. Naming and personality in developer tools matters more than we admit.

My Google Gemini Feedback

What Worked Well

Speed: gemini-2.0-flash returns coaching responses in 1–2 seconds. For a mid-session check-in, that's the right window — fast enough to feel real-time, not so fast it feels canned.
Code Comprehension: Sending raw TypeScript/Python/whatever-the-dev-is-writing and asking for a specific observation worked better than I expected. Gemini consistently gave code-level feedback, not just generic encouragement.
Tone Control: The "equal parts hype man and senior engineer" brief held up well across different code quality levels. It rarely went off the rails.
The SDK: model.generateContent(prompt) is genuinely as simple as it looks. The npm package just works.

Where I Hit Friction

Structured Output Guarantee: Even with explicit format instructions, Gemini occasionally adds a preamble ("Sure! Here's your vibe check:") before the actual content. A strict mode where you pass a schema and get guaranteed JSON back would eliminate all the regex fallback code.
No Streaming in This Context: I wanted to stream the coaching output word-by-word into the output channel for a typewriter effect. The VS Code Output Channel API supports appending line by line, but wiring that together with Gemini's streaming API required more plumbing than it was worth. Better streaming examples for non-web (IDE/CLI) contexts would help.
Token Visibility: I still don't have a clear picture of token consumption per call. An easy model.countTokens() surfaced in the quickstart would help developers think about token economy earlier.

The Honest Take

For a real-time, session-aware developer tool, gemini-2.0-flash is the right model. It's fast enough to not break flow, smart enough to give code-specific feedback, and cheap enough that I'm not watching a meter tick during development. The coaching feature went from "cool gimmick" to "thing I actually use" surprisingly quickly.

The one capability I wish existed: a lightweight classification endpoint that could passively detect code patterns (AI-generated vs human written, or common anti-patterns) without needing full prompt round-trips. That would unlock a whole tier of always-on analysis.

What's Next

Persist achievements to workspace storage so they survive restarts
Vibe streaks — track how many consecutive days you hit flow state
Team leaderboard — compare vibe scores across a team repo
Custom hype messages — let devs write their own achievement toasts
Publish to the VS Code Marketplace

Try It Now — Sideload the VSIX

A pre-built VSIX is included in the repo so you can try it without cloning or compiling:

Download vibemeter.vsix
In VS Code: ⌘⇧P → Extensions: Install from VSIX… → pick the file
Add your Gemini API key in Settings → VibeMeter → Gemini Api Key
Start coding — the vibe score appears in your status bar immediately

Or via the terminal: code --install-extension vibemeter.vsix

The real irony: I spent a session deep in GOD MODE building the system that detects GOD MODE. The tool validated itself. 🔥

GitHub Repo | Built with Google Gemini 2.0 Flash ✨

Terminal Tunes - A Beautiful CLI Music Player with YouTube Streaming

dinesh0666 — Mon, 09 Feb 2026 11:59:07 +0000

This is a submission for the GitHub Copilot CLI Challenge

What I Built

Terminal Tunes - A feature-rich CLI music player that brings the joy of music to your terminal with:

🎨 Real-time Audio Spectrum Visualizer - Colorful frequency bars that dance to your music
🎬 YouTube Streaming - Stream music directly from YouTube URLs and playlists with smart loading animations
📁 Local File Playback - Play MP3, M4A, WAV, FLAC files and entire folders
💾 Smart Playlists - Create custom playlists mixing local files and YouTube URLs
📊 Live Progress Tracking - Real-time progress bars with actual duration
🎚️ Dynamic Volume Control - Adjust volume instantly using mpv IPC without interrupting playback
🔀 Shuffle & Repeat - Full playback control with keyboard shortcuts
🌐 Network Error Handling - 15-second timeout with animated error displays for offline/connectivity issues

The player features a beautiful terminal UI built with blessed and blessed-contrib, providing a Spotify-like experience right in your terminal.

Demo

GitHub Repository: https://github.com/dinesh0666/terminal-tunes

Video Demo

Screenshots

Main Player Interface:

┌─Audio Spectrum───────────────────────────────────────────────────┐
│  ▉ ▉ ▉ ▉     ▉ ▉ ▉ ▉ ▉     ▉ ▉ ▉                                │
│  Now Playing: Artist - Song Title                                 │
└──────────────────────────────────────────────────────────────────┘

┌─♪ Now Playing──────┐  ┌─≡ Playlist──────────────────┐
│ Song Title          │  │ 1. First Song               │
│                     │  │ 2. Second Song ▶            │
│ Artist: Unknown     │  │ 3. Third Song               │
│ Album: Unknown      │  └─────────────────────────────┘
│ Format: stream      │
│                     │
│ Status: ▶ Playing   │
└─────────────────────┘

┌─Progress [0:45 / 3:30]──────────────┐  ┌─Vol 80%───┐
└─────────────────────────────────────┘  └───────────┘

Quick Start

# Install globally
npm install -g terminal-tunes

# Play local music
tt play ~/Music/ --shuffle

# Stream from YouTube
tt play "https://www.youtube.com/watch?v=VIDEO_ID"

# Create custom playlist
tt playlist create my-mix
# Mix local files and YouTube URLs interactively

# Import YouTube playlist
tt youtube import "PLAYLIST_URL"

Key Features Demo

1. YouTube Streaming with Loading Animation:

Detects YouTube URLs automatically
Fetches video metadata (title, duration) using yt-dlp
Shows beautiful loading animation while buffering
Displays real-time progress tracking

2. Custom Mixed Playlists:

Create playlists combining local MP3s and YouTube URLs
Interactive track addition with metadata validation
Save, load, and manage playlists easily

3. Real-time Audio Visualization:

32-bar spectrum analyzer with color gradients
Smooth animations synced with playback
Modern Spotify-inspired design

My Experience with GitHub Copilot CLI

Building Terminal Tunes with GitHub Copilot CLI was transformative. Here's how it impacted my development:

🚀 Rapid Prototyping

Copilot helped me quickly scaffold the project structure, suggesting the perfect libraries (blessed, blessed-contrib) for terminal UI. It understood my intent to build a "CLI music player with visualizations" and recommended the entire tech stack including mpv for streaming and yt-dlp for YouTube metadata.

🐛 Problem-Solving Challenges

One of the biggest challenges was process management - preventing zombie processes when users pause/resume or change tracks. Copilot suggested multiple killing strategies:

PID-based termination
Process group killing
Synchronous cleanup with execSync
Fallback commands (killall, pkill, ps+awk)

This multi-layered approach solved audio playback conflicts that would have taken hours to debug manually.

💡 Smart Suggestions

When implementing YouTube streaming, Copilot:

Recommended using yt-dlp for metadata fetching (actual duration, not static)
Suggested process spawning with afplay for local files vs mpv for streams
Helped implement loading animations and error handling for network issues

🎨 UI/UX Enhancements

Copilot suggested adding:

Volume percentage labels on gauge widgets
Loading animations using braille characters (⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏)
Network error displays with pulsing borders
Force-clearing trackInfo content to prevent UI state bugs

📚 Code Organization

It helped restructure 500+ lines of player logic into clean sections:

Process Management
Playback Control
Visualization & Progress
Playlist Management

With private methods (_initializeState, _cleanupZombieProcesses) and comprehensive JSDoc comments.

⚡ Time Saved

What would have taken 2-3 weeks of research and trial-and-error was completed in days. Copilot's context-aware suggestions meant:

Less time reading documentation
Fewer bugs to debug
More time on features, not boilerplate

🎯 Workflow Impact

My typical workflow became:

Write a comment describing what I want
Copilot suggests implementation
Accept or modify suggestion
Test and iterate

This conversational coding style felt natural and productive. I could focus on what to build, while Copilot helped with how to build it.

🔧 Technical Deep Dive

Some impressive moments:

Suggested using music-metadata for parsing MP3 duration
Recommended EventEmitter pattern for player state management
Proposed request IDs to prevent race conditions in async playback
Helped implement YouTube playlist import with ytdl-core

📈 Learning Opportunity

Beyond just code generation, Copilot became a learning tool. It exposed me to:

Better Node.js process management techniques
Terminal UI best practices with blessed
YouTube metadata extraction patterns
Efficient error handling for network operations

Technical Stack

Runtime: Node.js
UI Framework: blessed, blessed-contrib
Audio Players: afplay (macOS local), mpv (streaming)
YouTube Integration: yt-dlp, ytdl-core, youtube-search-api
Metadata Parsing: music-metadata
CLI Framework: Commander.js

Installation

# Clone repository
git clone https://github.com/dinesh0666/terminal-tunes.git
cd terminal-tunes

# Install dependencies
npm install

# Install system dependencies
brew install mpv yt-dlp  # macOS

# Run
npm start play ~/Music/ --shuffle

Impact & Future

Terminal Tunes demonstrates that CLI tools don't have to be boring. With proper UI design and modern features like streaming, they can compete with GUI applications.

Future Enhancements:

Real FFT audio analysis (currently simulated)
Seek/scrubbing functionality
Lyrics display integration
Last.fm scrobbling support
Cross-platform audio engine

Conclusion

GitHub Copilot CLI transformed how I approach development. It's not just an autocomplete tool—it's a pair programming partner that understands context, suggests best practices, and helps solve complex problems. Building Terminal Tunes showed me that with the right tools, ambitious projects become achievable in record time.

Try it yourself:

npm install -g terminal-tunes
tt play "https://www.youtube.com/watch?v=dQw4w9WgXcQ"

Made with ❤️ for music lovers who live in the terminal

Repository: github.com/dinesh0666/terminal-tunes

Tags: #cli #music #nodejs #githubcopilot #terminal