DEV Community: Cesar Castillo

Just Launched My Portfolio — What Do You Think?

Cesar Castillo — Sat, 21 Feb 2026 18:10:08 +0000

After procrastinating for way too long, I finally built and shipped my portfolio:

What I'm looking for
This is my first real portfolio, so I'd love your honest feedback on:

Design — Does it look professional? Easy on the eyes?
Navigation — Can you find what you're looking for quickly?
Content — Are the project descriptions clear?
Mobile experience — How does it feel on your phone?

Stack

Angular 19
Tailwind CSS v4
TypeScript

What would you change? What works well?
Drop your thoughts below — all constructive criticism is welcome! 🙏
Thanks for taking the time to check it out!

Track Your GitHub Copilot Pro from the Terminal 🖥️ - New UI 🧑‍🎨

Cesar Castillo — Sat, 14 Feb 2026 00:49:28 +0000

This is a submission for the GitHub Copilot CLI Challenge

Author: Cesar Castillo

Repository: https://github.com/CGCM070/copilot-usage_tui

From Invisible to Visible

Stop guessing. Start knowing.

GitHub Copilot Pro gives you 300 requests per month… but having to go to the site, navigate through menus, and dig into a specific section just to check your usage? That’s tedious

I built a terminal-based TUI that transforms your Copilot usage from an invisible mystery into a beautiful, real-time dashboard. Because developers deserve to know exactly how they're using their AI pair programmer.

What I Built : Copilot-usage

A Rust-based CLI tool with an interactive terminal UI that tracks GitHub Copilot Pro usage in real-time, featuring progress bars, per-model statistics, and seamless Waybar integration for Hyprland users.

The Problem

If you're a GitHub Copilot Pro user, you know the drill:
You get 300 premium requests per month
There is a page where you can check usage…
But you have to go to the site, open the right section, and dig through settings to find it
So you’re never quite sure where you stand until you manually go look
300 requests. Visibility — technically. Convenience? Not so much.

The Solution: Copilot Usage

I built a terminal dashboard that gives you complete visibility into your Copilot consumption with zero friction.

Key Features

📊 Beautiful Terminal Dashboard

Real-time progress bars with color-coded zones (green → orange → red)
Per-model usage breakdown (GPT-4, Claude 3.5, Gemini, etc.)
Compact, density-focused layout inspired by btop
9 gorgeous color themes: Dark, Nord, Monokai, Gruvbox, Catppuccin, OneDark, TokyoNight, Solarized, Kanagawa

⚡ Async Architecture

Non-blocking UI with tokio async runtime
Smooth spinner animations during API calls (20 FPS)
Cancelable operations with Escape key
Background refresh while you keep working

🎨 Theme System

Instant theme switching without exiting TUI
Persistent theme configuration
Consistent warning (orange) and error (red) colors across all themes
Segmented progress bars for visual feedback

💾 Smart Caching

Local cache with 5-minute TTL (configurable)
Cache status indicator (Fresh/Expired/Missing)
Manual refresh with 'r' key
Automatic cache invalidation on --refresh flag

🔧 Interactive Modals

Command menu (press /) for quick actions
Theme selector with live preview
Help dialog with all keybindings (press ?)
Error dialogs with debug mode toggle (press d)
Cache info modal showing last update time

📈 Waybar Integration

JSON output for Waybar status bar
Customizable format strings
Shows percentage in your status bar
Perfect for Hyprland/wayland users

🚀 Zero-Config Setup

Interactive first-run wizard
Automatic GitHub username detection
Fine-grained PAT or classic token support
XDG-compliant config directory

Architecture Deep Dive

This isn't just a simple API wrapper. It's a full async TUI application with clean separation of concerns:

┌─────────────────────────────────────────────────────────┐
│  Terminal UI (ratatui)                                  │
│  ┌──────────────────────────────────────────────────┐   │
│  │  UI Components                                   │   │
│  │  • Header (user info)                            │   │
│  │  • Usage Progress Bar                            │   │
│  │  • Model Usage Table                             │   │
│  │  • Modal Dialogs                                 │   │
│  └──────────────────────────────────────────────────┘   │
│                       ↓                                 │
│  ┌──────────────────────────────────────────────────┐   │
│  │  Event Loop (50ms poll)                          │   │
│  │  • Keyboard input handling                       │   │
│  │  • Async result processing                       │   │
│  │  • Spinner animation updates                     │   │
│  └──────────────────────────────────────────────────┘   │
│                       ↓                                 │
│  ┌──────────────────────────────────────────────────┐   │
│  │  Async Handler (tokio)                           │   │
│  │  • Background API calls                          │   │
│  │  • Cache operations                              │   │
│  │  • mpsc channels for results                     │   │
│  └──────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────┐
│  GitHub API                                             │
│  • /users/{username}/settings/billing/...              │
│  • 5000 req/hour rate limit                            │
│  • Fine-grained PAT with Plan (Read)                   │
└─────────────────────────────────────────────────────────┘

Async Event Loop Pattern

The heart of the application is a non-blocking event loop:

loop {
    // 1. Handle user input (non-blocking)
    if event::poll(Duration::from_millis(50))? {
        // Process keyboard events
    }

    // 2. Animate spinner during loading
    if matches!(app.state, LoadingRefresh | LoadingCache) {
        app.advance_spinner();
    }

    // 3. Check for async results
    if let Some(result) = async_handler.try_recv() {
        match result {
            RefreshComplete(Ok(stats)) => update_dashboard(stats),
            RefreshComplete(Err(e)) => show_error_modal(e),
            CacheInfoReady(info) => show_cache_modal(info),
        }
    }

    // 4. Render UI (20 FPS)
    terminal.draw(|f| render_ui(f, &app, &stats, theme))?;
}

Why async matters:

API calls don't freeze the UI
Spinner animations stay smooth
Users can cancel operations anytime
Background tasks complete even after cancel

Technical Decisions

1. Modular Component Architecture

Each UI component is a pure function with zero side effects:

// Pure rendering function - no state mutations
pub fn render_usage_overall(
    f: &mut Frame, 
    area: Rect, 
    stats: &UsageStats, 
    colors: &ThemeColors
) {
    // Calculate progress bar segments
    // Render with theme colors
    // No state changes, no events handled
}

Benefits:

Easy to test (input → output)
No hidden state mutations
Components compose naturally
Theme changes apply instantly

2. State Machine Pattern

AppState enum models all UI states explicitly:

pub enum AppState {
    Dashboard,                    // Main view
    LoadingRefresh,              // Spinner during API call
    ShowCacheInfo(CacheInfo),    // Cache status modal
    ShowError {                  // Error with debug toggle
        message: String,
        debug_message: String,
        show_debug: bool,
    },
    // ... more states
}

No boolean flags. No hidden state. Every state is explicit and handled.

3. Constant Warning/Error Colors

Across all 9 themes, warning and error colors remain constant:

Warning: rgb(255, 184, 108) (orange)
Error: rgb(255, 85, 85) (red)

Users instantly recognize status regardless of theme.

4. Compact Layout Philosophy

Inspired by system monitors like btop:

Dynamic height: Model table resizes based on data (N + 3 rows)
Compact width: 50% of terminal for readability
Minimal padding: Information density over whitespace
Rounded borders: Modern, polished feel

5. Never Exit TUI Philosophy

All operations happen via modals:

Reconfigure token? Modal dialog
Change theme? Theme selector modal
Refresh data? Loading spinner modal
Error occurred? Error modal with debug info

The TUI stays alive. No jarring exits. No lost context.

📸 Screenshots

Dashboard - Before

Dashboard - After

Theme Selector

Waybar Integration

Refresh

My Experience with GitHub Copilot CLI

This project was built with extensive help from GitHub Copilot CLI, turning natural language into idiomatic Rust code.

How I Used Copilot CLI

1. Async Architecture Design

# Asked: "Best way to structure async TUI in Rust?"
# Copilot suggested: tokio + mpsc channels + non-blocking event loop
# Result: Smooth 20 FPS UI with background API calls

2. State Machine Pattern

# Asked: "How to model TUI states without boolean flags?"
# Copilot proposed: AppState enum with exhaustive match
# Result: Clean state transitions, no hidden bugs

3. Theme System

# Asked: "Implement 9 color themes with constant warning/error colors"
# Copilot generated: ThemeColors struct + theme implementations
# Result: 9 gorgeous themes with consistent UX

4. Progress Bar Segmentation

# Asked: "Create gradient progress bars (green→orange→red)"
# Copilot designed: Segmented bar with zone calculations
# Result: Visual feedback at a glance

5. Cache System

# Asked: "Implement file-based cache with TTL in Rust"
# Copilot built: Cache with CacheStatus enum (Fresh/Expired/Missing)
# Result: Fast cached responses, automatic invalidation

Copilot suggested the modular component pattern that made the codebase maintainable and testable.

Edge Cases: Error handling, terminal cleanup on panic, XDG directory resolution - Copilot handled these gracefully.

Installation ( Only tested on LINUX )

Using install script (Recommended)

git clone https://github.com/CGCM070/copilot-usage.git
cd copilot-usage/
./install.sh

Manual installation

cargo install --path . --force

Usage

# First run - interactive setup
copilot-usage

# Dashboard (uses cache if available)
copilot-usage

# Force refresh from API
copilot-usage --refresh

# Waybar JSON output
copilot-usage --waybar

# Change theme temporarily
copilot-usage --theme nord

# Reconfigure token/theme
copilot-usage reconfigure

# Check cache status
copilot-usage --cache-status

Keybindings (in TUI)

Key	Action
`r`	Refresh data from API
`t`	Open theme selector
`?`	Show help dialog
`/`	Open command menu
`c`	Show cache info
`q` `Esc`	Quit / Close modal

Configuration

File: ~/.config/copilot-usage/config.toml

token = "ghp_..."
theme = "dark"
cache_ttl_minutes = 5
waybar_format = "{}"
username = "octocat"

Required GitHub Permissions

Fine-grained PAT with Plan (Read) permission
Classic tokens need read:user scope
NOT "Copilot Requests" - different permission!

What's Next?

Notification Support - Alert when usage > 80%
Historical Graphs - Usage trends over time

🤝 Open Source
This project is open source. Want to contribute?

PRs welcome
Good first issues: new themes, documentation, tests

Credits & Thanks

GitHub for Copilot Pro - the AI that powers our coding
GitHub Copilot CLI for helping build this tool faster than ever <3
DEV.to for hosting this challenge

Developer Desk Setups: What Do YOU Consider Truly Indispensable?

Cesar Castillo — Mon, 09 Feb 2026 16:55:18 +0000

What’s the One Thing You Can’t Code Without? Essential Developer Desk Items and the Linus Torvalds Reality Check

We all spend hours — sometimes entire days — in front of our desks writing code, debugging, and shipping features. A good setup can make those hours feel smoother, healthier, and more productive. But what actually matters?

One thing you notice quickly in the dev community: people are passionate about their setups. Some invest in expensive ergonomic gear, others prefer to keep things extremely simple, yet both approaches seem to work amazingly well.

Here are the items that come up again and again as game-changers in desk setup threads, comments, and photos across Dev.to, Reddit, and Hacker News.

The Most Loved (and Most Debated) Desk Items

Ergonomic Chair

The undisputed king. Herman Miller Aeron, Steelcase Gesture, or more affordable options like Sihoo and Secretlab dominate conversations. Reason: long coding sessions without back pain = more focus and fewer sick days.
Big/High-Quality Monitor(s)

Dual setups, ultrawides (34"+), or 4K 27-32" panels. More screen real estate means less tab-switching and easier debugging.
Mechanical Keyboard

Clicky, tactile, custom — Keychron, Ducky, or full custom builds. Devs love the feel and the speed.
Good Lighting

Often underrated until someone tries it. BenQ ScreenBar, desk lamps with adjustable temperature, or just natural light setups. Reduces eye strain dramatically.
Standing Desk or Converter + Ergonomic Mouse

Alternating sitting and standing, plus vertical mice to avoid wrist pain.
Cable Management & Small Quality-of-Life Touches

Monitor arms, plants, good headphones, or a clean cable tray.

The Linus Torvalds Reminder: Simplicity Works Too

While many of us chase the perfect chair or ultrawide, Linus Torvalds — creator of Linux and Git — keeps his setup remarkably simple: solid hardware, multiple monitors for productivity, but no fancy RGB or obsession with gear. Just tools that get out of the way and let him code.

It’s a good reality check: you don’t need to spend thousands to be effective.

Now It’s Your Turn

This post is really about you. What’s the one item (or habit) in your desk setup that you genuinely consider indispensable?

For me, it's my simple wireless mouse and regular weight training 🏋️‍♂️ — keeps my wrist happy and my energy up.

Drop your must-have in the comments. Bonus points if you share a photo or quick description! The best recommendations always come from the community 👇

productivity discuss

NotebookLM Enhancer - UPDATE ✨

Cesar Castillo — Wed, 04 Feb 2026 21:06:09 +0000

This is a submission for the GitHub Copilot CLI Challenge

Author: Cesar Castillo
Repository: https://github.com/CGCM070/NotebookLM_Enhancer

From Chaos to Order

🎉 UPDATE : Just released Smart Batch Delete : delete multiple notes with one click! No more 60+ clicks to clean up 20 notes. Check out the new feature section below! 👇

Building a Chrome Extension That Finally Organizes NotebookLM

What I Built

A Chrome extension that transforms NotebookLM's chaotic sidebar into a beautifully organized folder system, because 47 research notes shouldn't look like a pile of digital laundry.

The Problem That Drove Me Crazy

If you've used NotebookLM, you know it's magical for research. Upload PDFs, paste URLs, ask questions it's like having a research assistant that never sleeps.

But there's one maddening catch: the sidebar becomes a nightmare when you have more than 10 notes.

Imagine:

15 research papers on Spring Framework
8 articles about microservices
12 random bookmarks you saved "for later"
All. In. One. Giant. List.

No folders. No organization. Just... chaos.

The Solution: NotebookLM Enhancer

I built a Chrome extension that injects a complete folder management system directly into NotebookLM's sidebar.

Key Features

🗂️ Smart Folder Organization

Create folders and subfolders (1 level deep keeping it simple!)
Drag & drop notes between folders with smooth animations
"Inbox" view for unassigned notes
Each notebook project has isolated folders (no cross-contamination!)

🧑‍🎨 Polished UI That Matches NotebookLM

Built with Angular + Tailwind CSS
Dark/light/system theme toggle
Minimalist design that feels native
Smooth expand/collapse animations

🌎Internationalization

Full i18n support (English/Spanish currently)
One-click language switcher
All UI text translatable

💭Intelligent Integrations

Click any note → opens native NotebookLM
Click 3-dots menu → native menu appears aligned to the right (matching native position)
Drag notes from native sidebar → drops into our folders
Add new notes button that triggers native NotebookLM

🗑️ Batch Delete NEW!

Select multiple notes at once with checkboxes
"Selection Mode" toggle with icon in header
Click any row to toggle selection
ESC key to cancel selection mode
Automatic confirmation of NotebookLM's native delete modal - no manual interaction needed

Robust Architecture

Chrome Extension MV3 (latest manifest version)
Content Scripts + Shadow DOM for style isolation
Iframe-based Angular app for the UI
PostMessage bridge for iframe ↔ page communication
chrome.storage.sync for persistence across devices

Architecture Deep Dive

This isn't a simple content script that adds a few buttons. It's a full micro-frontend architecture:

┌─────────────────────────────────────────────────────────┐
│  NotebookLM Page                                        │
│  ┌──────────────────────────────────────────────────┐   │
│  │  Native Sidebar (hidden but functional)          │   │
│  │  • Still handles clicks & menus                  │   │
│  │  • We extract data from it                       │   │
│  └──────────────────────────────────────────────────┘   │
│                       ↓                                 │
│  ┌──────────────────────────────────────────────────┐   │
│  │  Our Injected Host (Shadow DOM)                  │   │
│  │  ┌───────────────────────────────────────────┐   │   │
│  │  │  Iframe (Angular App)                     │   │   │
│  │  │  • Folder tree                            │   │   │
│  │  │  • Drag & drop (Angular CDK)              │   │   │
│  │  │  • Theme toggle                           │   │   │
│  │  │  • Note add. folder add...                │   │   │
│  │  │  • i18n                                   │   │   │
│  │  └───────────────────────────────────────────┘   │   │
│  └──────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────┘

Why an iframe inside Shadow DOM?

Isolation: NotebookLM uses Angular Material with global styles our iframe keeps our Tailwind styles pristine
Security: Content scripts can't easily access iframe internals (and vice versa)
Performance: Angular app runs independently without polluting the main page

Communication Flow:

Content script reads native DOM → extracts notebook data
PostMessage to iframe → Angular displays organized folders
User drags note to folder → PostMessage back to content script
Content script updates chrome.storage.sync

Technical Decisions

1. Storage V3 with Notebook Isolation

Instead of one global folder structure, each NotebookLM project gets its own isolated state:

// StorageStateV3
{
  byNotebook: {
    "uuid-abc-123": {
      folders: [...],
      notebookFolderByKey: {...}
    },
    "uuid-def-456": {
      folders: [...],
      notebookFolderByKey: {...}
    }
  }
}

This means your "Work" folder structure doesn't leak into your "Personal" research. Clean separation.

2. Handling MV3 Service Worker Sleep

Chrome MV3 Service Workers sleep after 30 seconds of inactivity. This breaks chrome.runtime calls.

Instead of fighting it with "keep-alive" hacks, we:

Detect context invalidation gracefully
Silently retry on the next frame
Log to our own NLE.log() instead of spamming console.warn

3. Native Drag Bridge

Making the native NotebookLM sidebar items draggable was tricky. We:

Hook dragstart on native items
Create an invisible overlay above our iframe during drag
Calculate drop target using elementFromPoint() with coordinates
Result: Native notes can be dropped into our folders seamlessly

4. One-Click Batch Delete

Deleting notes in NotebookLM means:

Click 3-dots menu on a note
Click "Delete" option
Confirm in the modal
Repeat for every single note :(

With 20 notes to clean up? That's 60+ clicks

Our Solution: One-Click Batch Delete

Automatic Modal Handling: Content script detects NotebookLM's confirmation dialog and clicks "Delete" automatically
Index Adjustment: When notes are deleted, indexes shift - we compensate by tracking deletion count
RxJS State Management: BatchSelectionService with BehaviorSubjects for reactive UI updates

5. Auto-Focus Input in Modals

Small UX detail that makes a huge difference:

Create folder → input already focused, ready to type
Rename folder → text is pre-selected, just type to replace
No extra clicks needed

📸 Screenshots

Before:

After:

Export your notes :

Drag & Drop:

🗑️ Batch Delete NEW!

Full video

https://www.youtube.com/watch?v=KpqXmjq_oow

My Experience with GitHub Copilot CLI

This project was built almost entirely through GitHub Copilot CLI interactions turning natural language into production-ready code.

How I Used Copilot CLI

1. Architecture Decisions

# Asked Copilot: "Best way to inject UI into an existing Angular Material page?"
# Copilot suggested: Shadow DOM + iframe for isolation
# Result: Zero style conflicts with NotebookLM's Material Design

2. Content Script Structure

# Asked: "How to structure 8 content scripts that share state?"
# Copilot proposed: Module pattern with window.__NLE__ namespace
# Result: Clean separation, no global pollution

3. Drag & Drop Implementation

# Asked: "Bridge native HTML5 drag with Angular CDK drop?"
# Copilot designed: Overlay system with coordinate translation
# Result: Seamless drag from native sidebar to our folders

4. Debugging Context Invalidation

# Asked: "Chrome MV3 extension context invalidated errors?"
# Copilot implemented: Graceful detection + silent retry logic
# Result: No console spam, smooth recovery

5. i18n System

# Asked: "Lightweight i18n without ngx-translate bloat?"
# Copilot built: Custom TranslationService with lazy loading
# Result: ~3KB vs ~50KB, full interpolation support

Wins

Speed: What would have taken weeks took days. Complex features like the drag bridge were implemented in hours, not days.

Architecture: Copilot suggested patterns I wouldn't have considered (like the iframe-in-shadow approach) that solved isolation problems elegantly.

Edge Cases: MV3 quirks, Material Design menu positioning, SPA navigation detection Copilot handled these gracefully.

Learning: Every interaction was a learning moment :) . I now understand Chrome Extension architecture, Angular standalone components, and Tailwind customization.

What's Next?

Chrome Web Store Launch - Polish, package, publish
More Languages - French, German, Portuguese (easy with our i18n system)
Search & Filter - Find notes within folders instantly
Keyboard Shortcuts - Power-user features (Ctrl+Shift+N for new folder)

🤝 Open Source

This project will be open-sourced. Want to contribute?

PRs welcome
Good first issues: translations, themes, documentation

Credits & Thanks

Google for NotebookLM an incredible research tool
GitHub Copilot CLI for turning ideas into code faster than ever <3
Tailwind CSS for making dark mode trivial
DEV.to for hosting this challenge and bringing the community together

GitHub Repository

Built with ❤️, and a lot of help from GitHub Copilot CLI.

devchallenge
githubchallenge
cli
githubcopilot