pluto-atom-4

Migrating React GraphQL Dashboard to Angular 19: Full-Stack Implementation

Created: Aug 4, 2026 | Completed: Aug 6, 2026
Tech Stack: Angular 19 + Hot Chocolate GraphQL + ASP.NET Core + Daisy UI + Playwright
Sessions: 3 interactive Claude Code sessions | Commits: 11 phases

---

Design Reference

pluto-atom-4

Isolating UI State Bugs: The POC Path to Issue #120

Issue #120: A shuffle button in IntVue's ProductReviewPage wasn't working. Not a missing feature—a broken one, already wired up with converters and handlers, but clicking it produced no visible change. The shape of the fix wasn't obvious from the code alone. So instead of guessing in the live codebase, I spun up a separate prototype project, validated the solution at arm's length, and then ported it back.

This is the case for the POC-first workflow: when UI state logic is tangled with navigation, services, and converters, isolating it lets you move fast and fail cheap. That isolation—a 5-minute standalone WinUI3 app—turned what could have been a week of iterative tweaks in the real codebase into a confident, one-shot integration.

flowchart TD
    A["❌ Issue #120:<br/>Shuffle button unresponsive<br/>Root cause unclear"] -->|wrong path| B["🔴 Debug in-place in IntVue<br/>Complex state graph<br/>Slow, multiple rework cycles"]
    A -->|right path

pluto-atom-4

Centralizing Real-Time State: Separating UI Components from State Workers in Angular

Problem: The Hidden Cost of Distributed State

A seemingly simple bug—build status badge showing "Pending" in a card but "COMPLETE" in the modal—revealed a deeper architectural issue. Two UI components (BuildProgressCard and BuildDetailsModal) were independently subscribing to different GraphQL services, each maintaining its own view of truth:

• BuildProgressCard subscribed to BuildStatusService (real-time updates via subscription)
• BuildDetailsModal subscribed to BuildService (one-time query fetch)

When real-time updates arrived, the card reflected the latest status immediately, while the modal lagged behind with stale query data. Users saw inconsistent state in the same workflow, undermining confidence in the UI.

pluto-atom-4

Tightening the Man-in-the-Loop: A Week of MCP Servers and Skills

This week I ran four projects in parallel — an Angular/GraphQL full-stack app, a TUI ATS tool, a Blender 3D modeling pipeline, and a WinUI 3 talk-recording app. Different stacks, different domains, but one common bottleneck: GitHub operations (issue/PR CRUD, comments, branch management) kept eating turns as raw bash-in-the-loop through the Claude Code interactive session.

The fix wasn't "automate everything" — it was reducing the number of prompt turns spent on repetitive GitHub plumbing, while keeping a human decision point at every step that matters. That's the theme of the week: as agentic coding trends toward self-controlling loops, the useful skill isn't building a bigger loop — it's deciding precisely where the human stays in it.

flowchart TD
    A["🗂️ 4 parallel projects<br/>NG-GraphQL · ATS TUI · Blender · WinUI 3"] --> B{"🔁 Repetitive GitHub/git ops<br/>issue & PR CRUD, comments, branches"}
    B -->|old path| C["⌨

pluto-atom-4

AI Agentic Coding: Identifying Knowledge Gaps Before They Block

graph LR
    A["🔍 Research<br/>Elsa 3.7.1 & Dapper"] -->|Found Reorg| B["💡 Discovery<br/>Namespace Analysis"]
    B -->|Shared Findings| C["🤝 Context<br/>Agent Alignment"]
    C -->|Strategy Defined| D["🛠️ Implementation<br/>Persistence Layer"]
    D -->|Complete| E["📦 Deliverables<br/>Full Feature Set"]
    
 E --&gt; F["📜 Migrations &amp; History"]

pluto-atom-4

GitHub-Native AI Agentic Coding: Keeping Product Management Where the Code Lives

Problem

When building with AI code assistants (Claude Code, GitHub Copilot), teams accumulate scattered decision artifacts: Meeting notes, separate planning docs. The codebase and its management story diverge. It is hard to trace why a feature exists, what was tried first, or what tradeoffs were made. Historical context rots in external tools while the code persists.

The real inefficiency: product decisions live outside the repository, but the implementation lives inside it.

Approach

pluto-atom-4

How Progressive Disclosure Keeps Your AI Agent Guidance Fresh and Aligned

The Challenge

AI agent capabilities shift constantly—sometimes weekly, sometimes daily. Every change ripples through your team's workflow. Yet guidance documentation lags, catches people off-guard, and fragments across tools.

The Real Problem:

• Monolithic CLAUDE.md files (196+ lines) get buried; agents miss critical guardrails
• Rules scattered, inconsistent; different team members apply different patterns
• When guidance changes unexpectedly, sprint retro scrambles to catch up

pluto-atom-4

The Problem

As a solo developer, the biggest challenge with AI agents is maintaining your own grip on context while the agent executes work.

Without structured tracking, you lose:

• What the issue originally asked for vs. what got implemented
• Whether the agent's solution actually solves the problem
• How to hand off or resume work if interrupted

pluto-atom-4

You are an expert AI Platform Engineer specializing in agentic workflows, multi-tool synergy, and prompt engineering. Your task is to write the complete configuration files and rules to perfectly synchronize and optimize GitHub Copilot (Agent Mode / Custom Instructions) and Anthropic's Claude Code CLI for the project structure provided below.

The target state must respect the absolute latest best practices as of July 24, 2026:

1. Cross-Compatibility: Copilot reads and hooks into .claude/settings.json, and cross-platform instructions should align natively without conflicts.
2. Progressive Disclosure & Strict Token Control: Keep high-level MD files under 200–300 lines to avoid the "agent dumb zone" (performance degradation beyond 50-60% context).
3. Evidence-Based Execution: Forcing agents to use verified local tools (LSP, tests, builds) rather than predicting outcomes.

Here is my current project structure:

(project root)

pluto-atom-4

GitHub Copilot Pricing Shift (June 2026): How I Restructured My Agentic Workflow to Cut Costs 10x

TL;DR

On June 1, 2026, GitHub Copilot switched from flat-rate PRU requests to metered token-based billing. My agentic workflow costs exploded ~10x. So, I swtiched to a hybrid approach... using GitHub Copilot CLI as a planer (issue generation), then delegate implementation to Claude Code with Anthropic's native API to eliminate platform markup.

---