DEV Community: depa panjie purnama

I Hid My Portfolio in Pitch Darkness. Google Gemini Helped Me Build the Torch.

depa panjie purnama — Sun, 01 Mar 2026 12:15:45 +0000

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

What I Built with Google Gemini

Portfolios are supposed to showcase who you are as an engineer. Yet, somewhere along the line, we all started building the exact same thing: a clean header, a bouncy CSS grid of project cards, and a massive "Contact Me" button. I realized that the best part of discovering an engineer's work isn't just reading it, it's the act of discovery itself.

So, I decided to plunge my entire CV into pitch darkness.

I built the Interactive Torch Portfolio. It is an experimental, mobile-first single-page application (SPA) where the screen is completely black. The only way to read my bio, my skills, or see my projects is by physically dragging a virtual, flickering "torch" around the screen to carve a hole of light into the darkness.

I chose not to use React, Next.js, or any massive libraries. I wanted to build this purely with HTML, CSS, and vanilla DOM manipulation. But I knew that calculating the physics of a moving torch and handling complex HTML5 Canvas blend modes would be a massive headache.

That's where Google Gemini stepped in, not just as an autocomplete tool, but as my mathematical pair programmer.

Demo

If you want to experience the thrill of exploring the portfolio yourself, you don't even need to leave this page. You can try the live Google Cloud Run deployment right here:

The entire codebase is containerized using a lightweight nginx:alpine image and deployed seamlessly to Cloud Run.

URL: https://depapp-torch-726779073670.asia-southeast2.run.app
GitHub Repository: https://github.com/depapp/senter

What I Learned

Building this pushed my boundaries on how creative front-end web development can be when you strip away the frameworks and return to first principles.

1. Advanced Canvas Blend Modes (Technical Depth)
I leveled up my understanding of the HTML5 <canvas> API, specifically working with globalCompositeOperation. I needed to render total darkness, but physically "cut out" a transparent hole where the mouse moved. Gemini helped me implement this precise logic without destroying the browser's framerate:

// Fill the screen with darkness
ctx.fillStyle = '#050505';
ctx.globalCompositeOperation = 'source-over';
ctx.fillRect(0, 0, width, height);

// "Cut out" the darkness using the glowing gradient
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = gradient; // radial gradient for soft edges
ctx.beginPath();
ctx.arc(startX, startY, maxRadius, 0, Math.PI * 2);
ctx.fill();

Mastering how to stack destination-out for the flashlight beam and screen/lighter for the ambient fire glow on top of a single <canvas> element was incredibly rewarding.

2. Translating Physical Mechanics
A standard custom cursor feels weightless. I wanted my torch to feel heavy. Working with Gemini taught me how to articulate visual physics into actionable engineering prompts. I explained the physical logic of "make the torch tilt like a heavy pendulum based on mouse movement speed," and Gemini translated my abstract thought directly into the Math.cos and Math.sin rotation matrices required to make the SVG torch swing realistically on its pivot.

3. The Power of Vanilla Performance
By relying purely on requestAnimationFrame and a Canvas context instead of virtual DOM diffing, the application loads instantaneously and maintains a buttery-smooth 60 FPS even while rendering hundreds of animated, math-driven fire particles.

Google Gemini Feedback

What worked beautifully:
Gemini's ability to retain context over a long architectural discussion is unmatched. The project didn't start as a medieval torch, it started as a modern flashlight. When I decided to pivot the art direction, I simply asked Gemini to "change the flashlight element to a sputtering wooden torch, but keep the noise overlay and the physics we discussed earlier." It flawlessly generated the new SVG coordinates while respecting the existing z-index layers. Its translation of physical concepts (friction, gravity, pendulum swings) into JavaScript mathematics saved me hours of staring blankly at MDN documentation.

Where I ran into friction:
There were moments where I had to specifically prompt Gemini to optimize for mobile touch events. Initially, the torch effect worked beautifully on a desktop mouse, but standard mousemove events don't map perfectly to touchmove and touchstart on mobile devices without causing erratic scrolling. While Gemini eventually provided the correct code (adding { passive: true }), I had to be the one to explicitly recognize and request the mobile-first structural adjustments. It also occasionally required a nudge to prefer vanilla CSS Flexbox solutions over immediately reaching for JavaScript viewport calculations when styling the grid layout for the hidden content.

Ultimately, Gemini wasn't just a code generator; it was a sounding board for design concepts and a mathematical assistant that brought a very ambitious, pitch-black idea to life.

How I Built FurMap to Help Lost Pets Find Their Way Home

depa panjie purnama — Fri, 27 Feb 2026 09:39:50 +0000

This is a submission for the DEV Weekend Challenge: Community

The Community

It was a typical Saturday morning in my neighborhood when I heard something that would change my weekend: a family's beloved dog had gone missing. The frantic posters, the social media shares, the desperate calls to local shelters, it struck me how fragmented our community's resources were when it came to helping our furry friends.

That's when it hit me: what if there was a single platform where pet owners could connect, help find lost pets, and support each other?

The pet owner community is massive and passionate. We share tips, celebrate wins, and mourn losses together. But we lacked a centralized tool to coordinate efforts when it mattered most. That's the gap I set out to fill with FurMap.

What I Built

FurMap is a community platform that connects pet owners through an interactive map-based interface. Here's what makes it special:

🗺️ Interactive Map with Color-Coded Pins

Red pins: Lost pets
Green pins: Found pets
Blue pins: Pet sitters needed

Users can see all activity in their neighborhood at a glance. Click on any pin to view details, comment, or contact the poster.

🔔 Real-Time Notifications

When someone comments on your post, you get an instant notification. No more refreshing the page hoping for updates, FurMap keeps the community connected.

💬 Community Comments

Every post has a comment section where neighbors can:

Share tips and leads
Coordinate search efforts
Offer emotional support

📞 Direct Contact

Post owners can share their email or WhatsApp, making it easy to connect offline when needed.

🐾 My Pets Profile

Create profiles for your furry friends and link them to your posts. It adds a personal touch and helps others identify the pet faster.

📍 Smart Location Detection

GPS for mobile users
IP-based fallback for desktop users
Click-to-set on the interactive map

Demo

URL: https://fur-map.netlify.app
Dashboard - Map page
Dashboard - List page
Create New Post page
My Pets page
Notification page
Post Details page

Code

depapp / furmap

FurMap is a community platform for pet owners to connect, help find lost pets, report found animals, and find trusted pet sitters in their neighborhood.

🐾 FurMap - Pet Community Platform

FurMap is a community platform for pet owners to connect, help find lost pets, report found animals, and find trusted pet sitters in their neighborhood. Built with Next.js 14, Supabase, and Leaflet/OpenStreetMap.

✨ Features

🗺️ Interactive Map

See all posts on a map with color-coded pins
🔴 Red = Lost Pets
🟢 Green = Found Pets
🔵 Blue = Pet Sitters
Click on map to view post details

🔔 Real-time Notifications

Get instant notifications when someone comments on your posts
Notification bell with unread count badge
Mark as read / Mark all as read

💬 Community Comments

Discuss and help each other
Comment on posts to coordinate searches
Share information and tips

📞 Direct Contact

Post owners can share contact info
Connect via email or WhatsApp

🐾 My Pets

Create profiles for your furry friends
Link pets to your posts

📍

…

View on GitHub

How I Built It

Tech Stack

Component	Technology
Frontend	Next.js 14 (App Router)
Styling	Tailwind CSS + Neo-brutalism
Backend	Supabase
Database	PostgreSQL
Auth	Supabase Auth
Maps	Leaflet + OpenStreetMap
Deployment	Netlify

Key Technical Decisions

1. Neo-Brutalism Design
I chose a bold, playful design aesthetic to match the fun energy of pet ownership. The chunky borders, bright colors, and playful typography make the app feel approachable and memorable.

2. Supabase for Backend
Supabase was perfect for this project, it provided authentication, database, and real-time subscriptions out of the box. The free tier is generous enough for a growing community.

3. Leaflet + OpenStreetMap
No expensive Google Maps API needed! OpenStreetMap is free, open-source, and works beautifully for neighborhood-level mapping.

4. Dual Notification System

Post owners get notified of new comments
Other commenters also get notified (threaded engagement)
Uses Supabase database with manual refresh (real-time can be added later)

Challenges & Solutions

Challenge: Desktop users don't have GPS
Solution: Implemented IP-based geolocation using ipapi.co as fallback, plus click-to-set on the map

Challenge: Managing location on mobile Safari
Solution: Combined GPS with manual map clicking for maximum reliability

Challenge: Creating realistic seed data
Solution: Built a seed script that creates test users, pets, posts with geographic distribution around Jakarta, Indonesia

What I Learned

This weekend challenge pushed me to think about community-first design. It's not just about the technology, it's about understanding human needs:

People panic when pets go missing, they need quick, intuitive tools
Community members want to help but need coordination, comments and notifications bridge that gap
Trust is built through transparency, showing contact info, clear post types

FurMap isn't just an app, it's a small step toward more connected, compassionate neighborhoods. Every lost pet that finds their way home, every pet sitter that helps a stressed owner, every comment that offers hope... that's the real value.

The best technology is the kind that brings us closer together.

I Built a Tamagotchi That Judges Your GitHub Activity 🐾 (and it's brutally honest)

depa panjie purnama — Sun, 15 Feb 2026 05:43:20 +0000

This is a submission for the GitHub Copilot CLI Challenge

What I Built

Ok hear me out.

You know that guilt when you haven't pushed code in a few days? That nagging feeling in the back of your head? What if that feeling had a face... and it was a tiny ASCII octocat staring at you from your terminal, slowly starving to death?

Introducing cli-pet, a virtual pet that lives in your terminal and is entirely powered by your real GitHub activity.

Your commits? That's food. Your green CI builds? That keeps it healthy. Merged PRs? Pure serotonin for the little guy. Coding streaks? Energy drinks.

Stop coding for a few days and your pet literally withers away. Its stats decay in real-time. The ASCII art changes from a happy bouncing creature to a sad, hungry mess with (;.;) eyes that will haunt your dreams.

I didn't build a productivity tool. I built emotional manipulation as a service. And honestly? It works. I've never been more motivated to push commits.

The Pet Species

You can adopt one of 4 pets:

🐱 Cat. Purrs when your CI is green
🐶 Dog. Fetches your GitHub notifications (get it?)
🐉 Dragon. Breathes fire on failing tests
🐙 Octocat. The ultimate GitHub companion (obviously)

How The Stats Work

This is where it gets fun. Your pet has 4 stats, and each one maps to real GitHub data:

Stat	What feeds it	What happens when it drops
🍕 Hunger	Your commits	Pet starts begging you to write code
❤️ Health	CI/CD success rate	Failing pipelines = sick pet
😊 Happiness	Merged PRs & code reviews	Your pet thrives on collaboration
⚡ Energy	Coding streak days	Consistency is key

Stats decay over time. So if you ghost your repo for a weekend, expect to come back to a very dramatic ASCII creature.

Commands

cli-pet adopt     # 🏠 Choose your pet and name it
cli-pet status    # 👀 Check on your little buddy
cli-pet feed      # 🍕 Fetch GitHub data and feed your pet
cli-pet play      # 🎮 Play a number guessing game together
cli-pet stats     # 📊 See the full GitHub activity breakdown
cli-pet tips      # 🧠 Get personalized coding advice from your pet

The tips command is my favorite, your pet actually analyzes your coding patterns and gives you relevant advice. Haven't reviewed any PRs lately? Your pet will call you out. CI is flaky? It'll suggest pre-commit hooks. 7-day streak? It'll remind you that rest is productive too.

The Best Part: It Levels Up

Every commit earns your pet XP. Every merged PR? Even more. Your pet levels up as you code, turning it into this weird RPG where the game mechanic is... doing your actual job. Peak gamification.

Demo

🔗 GitHub Repository: https://github.com/depapp/cli-pet

Adopting a pet

Adopted a pet

See the full GitHub activity breakdown

Feeding with GitHub activity

Play a number guessing game together

Get personalized coding advice from your pet

Try it yourself

npx cli-pet

Requires Node.js 18+ and either gh auth login or a GITHUB_TOKEN env var.

My Experience with GitHub Copilot CLI

Real talk: this project would've taken me way longer without Copilot CLI. Here's what actually happened during development.

Planning the architecture

I started with a rough idea, "virtual pet but GitHub", and used Copilot CLI to think through the architecture. I described what I wanted and it helped me break it down into modules: the pet state machine, the GitHub activity fetcher, the ASCII art renderer, the CLI commands. Having that structure before writing a single line of code was huge.

The state machine was the tricky part

The pet engine has a lot of moving pieces, stat decay over time, mood calculations based on multiple stat thresholds, activity impact mapping. I kept going back and forth with Copilot CLI on the decay math. "How fast should hunger decrease per hour?" "What if the pet has been neglected for 3 days?" It helped me model the equations and edge cases I would've probably gotten wrong the first few tries.

GitHub API integration

This is where Copilot CLI really flexed. It already understands the GitHub API deeply (makes sense given, you know, GitHub). When I needed to fetch push events, calculate CI success rates across repos, and compute coding streaks from activity dates, Copilot CLI guided me through the Octokit API like it had the docs memorized. Which it probably did.

The streak calculation was fun: I needed to walk backwards through activity dates and detect consecutive days. The kind of date math that makes my brain hurt but Copilot CLI handled with ease.

ASCII art is harder than you think

Creating expressive ASCII art for 4 pet species × 8 moods = 32 art variants. Copilot CLI helped generate the base art and I tweaked them to make sure each mood felt distinct. The sad cat with (;.;) eyes? Chef's kiss.

Debugging in real-time

My favorite part was the debugging loop. ESM module issues with conf and chalk? Copilot CLI immediately knew to add "type": "module" and switch to node16 module resolution. TypeScript namespace errors with Chalk's type system? Fixed in seconds. This iterative build-check-fix cycle felt incredibly fast.

What surprised me

I didn't expect Copilot CLI to be this good at understanding context. By the middle of the project, it knew my codebase structure, understood how modules connected, and could make changes across files without me having to re-explain the architecture. It felt less like a tool and more like a pair programmer who actually pays attention.

The bottom line

Copilot CLI turned this from a "maybe I'll finish by the deadline" project into a "wait, it's done already?" project. The agentic workflow where it reads files, runs commands, checks errors, and fixes things, made the whole process feel like pair programming at 3x speed. I just had to steer. It built.

If you've read this far and you haven't adopted a terminal pet yet, what are you doing? Go run cli-pet adopt and give your coding habits the accountability partner they deserve. 🐾

And if your pet dies, that's on you. Don't look at me. I just built the thing.

I Built a Game Where GitHub Copilot CLI is the Game Master

depa panjie purnama — Sun, 15 Feb 2026 03:10:43 +0000

This is a submission for the GitHub Copilot CLI Challenge

What I Built

What if your terminal was a portal to infinite worlds?

Copilot Quest is a text-based adventure game where GitHub Copilot CLI is the Game Master. There are no pre-written stories, no scripted encounters, no predetermined endings. Every single playthrough is dynamically generated by Copilot in real-time, the world, the characters, the puzzles, the plot twists, all of it.

You launch the game, enter your name, and Copilot picks a random genre (fantasy, sci-fi, cyberpunk, horror, steampunk, you never know what you'll get) and drops you into a completely unique adventure. Navigate through choices, type your own creative actions, manage your HP and inventory, and see how far you can survive.

The best part? No two playthroughs are ever the same. Play it five times, get five completely different worlds.

I built this because I wanted to showcase what Copilot CLI can really do, not just as a code assistant, but as a creative engine that powers an entire application at runtime. The game literally cannot exist without Copilot CLI. It's not a tool I used to write code (though I did that too), it's the beating heart of the experience.

Try it right now:

npx copilot-quest

That's it. One command. No cloning, no setup. Just make sure you have GitHub Copilot CLI installed and authenticated.

Demo

🔗 GitHub Repo: github.com/depapp/copilot-quest
📦 npm: npmjs.com/package/copilot-quest

Title Screen

When you launch the game, you're greeted with a gorgeous ASCII art title screen:

Gameplay

Once you're in, Copilot generates your world. Here's what a typical scene looks like:

Every scene features:

📖 Vivid, atmospheric narrative text with a typing effect
🎨 AI-generated ASCII art for each location
❤️ HP bar, inventory, and location tracking
🎯 3-4 contextual choices generated by Copilot
⌨️ Free-form text input — type literally anything you want to do

My Experience with GitHub Copilot CLI

This project has a delicious meta quality to it: I used GitHub Copilot CLI to build a game that IS powered by GitHub Copilot CLI.

How Copilot CLI Powers the Game at Runtime

The game uses Copilot CLI's programmatic mode (copilot -p "...") as its AI engine. Here's the flow:

The game maintains a game state (player name, HP, inventory, location, story summary)
When the player makes a choice, the app builds a structured prompt injecting the current game state
The prompt is sent to copilot -p with a strict JSON response schema
Copilot returns the next scene: narrative, choices, ASCII art, HP changes, inventory updates
The app parses the JSON and renders it as a beautiful terminal UI

This means Copilot CLI isn't just generating text, it's acting as a full game engine, managing narrative continuity, inventing characters, creating puzzles, and even deciding combat outcomes. All in real-time, all dynamically.

How Copilot CLI Helped Me Build It

Beyond the runtime integration, Copilot CLI was my pair programmer throughout:

Architecture decisions. I brainstormed the entire project structure with Copilot, from the component hierarchy to the prompt engineering strategy
Ink/React components. Copilot helped me build the terminal UI components (title screen, narrative panel, choice menu, stats bar) using Ink's React-based API
Prompt engineering. Iterating on the prompts to get consistent, well-structured JSON responses was a collaborative process with Copilot
Error handling. Copilot helped me build robust JSON parsing with fallbacks for when the AI response isn't perfectly formatted

The Tech Stack

Layer	Technology
Runtime	Node.js + TypeScript
Terminal UI	Ink (React for CLIs)
AI Engine	GitHub Copilot CLI (programmatic mode)
ASCII Art	Figlet + Copilot-generated scene art
Styling	Chalk, Boxen

What Surprised Me

The thing that blew my mind was how good Copilot is at being a Game Master. It maintains narrative consistency across turns, creates callbacks to earlier events, and even builds toward climactic moments. I once played a cyberpunk run where an NPC I met in turn 2 betrayed me in turn 14 and Copilot remembered the setup it had created. That's not scripted. That's emergent storytelling.

Key Takeaway

GitHub Copilot CLI isn't just a coding assistant, it's a creative runtime engine. This project proves that Copilot can power interactive experiences, not just help you write code. The line between "tool that helps you build" and "engine that powers what you build" is beautifully blurred.

Give it a try:
npx copilot-quest and let me know what genre Copilot picks for you

ghsafe: Because That "Job Opportunity" Repo Could Be a Trap

depa panjie purnama — Sat, 14 Feb 2026 12:41:44 +0000

This is a submission for the GitHub Copilot CLI Challenge

What I Built

The Story That Started It All

A few weeks ago, my friend Muhammad Khamzah (a fullstack developer) shared a chilling experience on LinkedIn. Someone approached him on LinkedIn offering a job opportunity. The conversation seemed legit, it moved from LinkedIn to email, and eventually they asked him to check out a project on GitHub.

But something felt off.

The repository had a .vscode folder committed to it, something that's rarely pushed unless there's a reason. When he dug deeper (still on GitHub, before even cloning), he found hidden malicious scripts tucked away in the code. The scripts were cleverly concealed, you couldn't see them unless you scrolled horizontally on GitHub. The malware was designed to:

🎯 Run automatically when you open the project folder in VS Code (via .vscode/tasks.json with runOn: folderOpen)
💀 Execute without npm install, just opening the folder was enough
🌐 Work on all operating systems, Windows, macOS, and Linux
🕵️ Deploy via Vercel, making the payload look like a normal serverless function

Other developers who fell for similar scams lost thousands of dollars in cryptocurrency. The attackers stole wallet files, SSH keys, browser saved passwords, and API tokens, all from a single "job opportunity."

You can read his original post here.

Introducing ghsafe 🛡️

This story hit hard. Not every developer is as careful as Khamzah. So I built ghsafe, a CLI tool that scans any GitHub repository for malicious patterns before you clone and run it.

# Scan a suspicious repo before you run it
npx ghsafe scan https://github.com/suspicious-user/totally-legit-project

ghsafe acts as your first line of defense. It analyzes code for:

Category	What It Catches
🎣 Data Exfiltration	SSH key theft, env var harvesting, browser data access, crypto wallet targeting
🕸️ Network Exfiltration	Discord/Slack webhooks, raw IP connections, ngrok tunnels
🎭 Code Obfuscation	`eval()`, `Function()` constructor, Base64/hex payloads, `String.fromCharCode` chains
⚡ Dangerous Execution	`child_process`, shell command injection, download-and-execute pipelines
⛏️ Crypto Mining	Mining pool connections, known miner libraries, wallet addresses
🔒 Persistence	Crontab manipulation, shell profile modification, systemd services, Windows registry
📦 Suspicious Install Scripts	Malicious `postinstall` hooks, setup.py backdoors

It produces a beautiful, color-coded terminal report with a risk score from 0 to 100, code previews of suspicious lines, and a clear verdict: ✅ SAFE, ⚠️ SUSPICIOUS, or 🚨 DANGEROUS.

For even deeper analysis, you can enable the --ai flag to send findings to GitHub Models for contextual threat assessment, staying fully within the GitHub ecosystem. It also supports OpenAI as a fallback.

Demo

🔗 GitHub Repository: https://github.com/depapp/ghsafe

Scanning a malicious repository:

npx ghsafe scan https://github.com/user/suspicious-repo

The tool shows exactly where the suspicious code is, with line numbers and code previews:

And provides AI Analysis and a clear recommendation:

Scanning a clean repository:

Additional features:

# Scan a local directory
npx ghsafe scan ./path/to/project

# Enable AI-powered deep analysis (GitHub Models, recommended)
export GITHUB_TOKEN=your-github-token
npx ghsafe scan https://github.com/user/repo --ai

# Alternative: Use OpenAI directly
export OPENAI_API_KEY=your-openai-key
npx ghsafe scan https://github.com/user/repo --ai

# JSON output for CI/CD pipelines
npx ghsafe scan ./project --json

Exit codes make it CI/CD-friendly: 0 = safe, 1 = suspicious, 2 = dangerous.

My Experience with GitHub Copilot CLI

Building ghsafe in a single day would not have been possible without GitHub Copilot CLI. Here's how it supercharged my development:

🏗️ Project Scaffolding

I used Copilot CLI to help me scaffold the entire project structure from the TypeScript config and tsup bundler setup to the Commander.js CLI framework. Instead of copying boilerplate from old projects, I described what I needed and Copilot CLI generated the right configurations.

🔍 Writing Detection Rules

This was where Copilot CLI truly shined. Writing 35+ regex-based detection rules across 7 categories is tedious and error-prone. I described the malicious patterns I wanted to detect in natural language like "detect when code reads SSH keys from the filesystem" or "find Base64-encoded strings longer than 80 characters" and Copilot CLI helped me craft precise regex patterns and structure them into the rule engine.

🎨 Rich Terminal UI

Building the beautiful terminal output with chalk, boxen, ora, and cli-table3 required getting a lot of formatting details right. Copilot CLI helped me compose the risk bar visualization, severity color coding, and the boxed report layout, turning a plain text scanner into something that looks and feels professional.

🤖 AI Integration

Integrating the GitHub Models API for the optional deep analysis feature was a natural fit, it uses the same OpenAI SDK format but runs through GitHub's infrastructure, keeping the entire tool within the GitHub ecosystem. Copilot CLI helped me structure the provider selection logic (GitHub Models as primary, OpenAI as fallback) and craft the right system prompt for security analysis context.

💡 The Verdict

GitHub Copilot CLI felt like pair programming with a security-savvy senior developer. It didn't just autocomplete, it understood the intent behind what I was building and helped me move from idea to working product in record time. The entire tool, 35+ detection rules, rich terminal UI, AI integration, and documentation was built in a single focused session.

If this tool helps even one developer avoid a phishing repo, it's worth it. Stay safe out there. 🛡️

clifolio. portfolios that live in the terminal.

depa panjie purnama — Sun, 08 Feb 2026 14:18:06 +0000

This is a submission for the GitHub Copilot CLI Challenge

What I Built

clifolio is an interactive terminal-based portfolio/resume viewer. Developers create a simple YAML config file, host it as a GitHub Gist, and anyone in the world can view their portfolio by running:

npx clifolio @your-github-username

For example, you can see my own portfolio (GitHub Gist yml file):

npx clifolio @depapp

No websites to deploy, no frameworks to learn, just a beautiful, animated portfolio rendered right in the terminal.

Key Features

ASCII art header, your name rendered in figlet with theme-matched colors
Visual skill bars, animated progress bars for your tech stack
Experience timeline, clean vertical timeline for work history
Project showcase, cards with tech tags, GitHub star counts, and clickable URLs
Education section, degrees and certifications
Contact info, with emoji icons and full URLs
Keyboard navigation, arrow keys or vim-style h/l to switch between sections
Typing animation, smooth character-by-character text reveal
5 built-in themes: default, ocean, dracula, monokai, nord
Interactive scaffolder, npx clifolio init walks you through creating your config
Loading spinner, animated dots while fetching remote data
Friendly error messages, clear guidance when things go wrong

How It Works

The key insight behind clifolio is that you don't need a website to share your portfolio. Instead, you host your config as a GitHub Gist, and anyone can view it from their terminal.

For portfolio owners:

Run npx clifolio@latest init to generate a clifolio.yml config file interactively
Edit it with your skills, experience, projects, and contact info
Preview locally with npx clifolio --file clifolio.yml
Go to gist.github.com and create a public gist named exactly clifolio.yml
Paste your config content and save

For viewers:

npx clifolio @your-github-username

That's it. no servers, no hosting, no deployments. The CLI fetches the gist via the GitHub API (api.github.com/users/{username}/gists), finds the file named clifolio.yml, downloads and validates the YAML with Zod schemas, and renders an interactive Ink (React for CLI) application with keyboard navigation and animations.

Anyone with a terminal and Node.js can view any published clifolio portfolio from anywhere in the world.

Tech Stack

TypeScript + Node.js: type-safe, modern JavaScript
Ink (React for CLI): component-based terminal UI
Zod: runtime schema validation for YAML configs
Figlet: ASCII art text generation
Commander: CLI argument parsing with subcommands
js-yaml: YAML config parsing

Demo

🔗 npm package: https://www.npmjs.com/package/clifolio
🔗 GitHub Repository: https://github.com/depapp/clifolio

Try it yourself

# Create your own
npx clifolio@latest init

# View the sample portfolio
npx clifolio --file clifolio.yml

# View with a different theme
npx clifolio --file clifolio.yml --theme dracula

Screenshots

Header with gradient ASCII art and navigation tabs:

Skills section with progress bars:

Friendly error handling:

My Experience with GitHub Copilot CLI

GitHub Copilot CLI was my development companion throughout this entire project, and it fundamentally changed how I approached building clifolio.

How I Used Copilot CLI

Architecture & Planning: I started by describing what I wanted to build: "a terminal portfolio generator with YAML config, GitHub Gist integration, and interactive keyboard navigation." Copilot CLI helped me think through the architecture, suggesting the component structure, the data flow from YAML → Zod validation → React/Ink rendering, and the theme system design.

Scaffolding at Speed: Copilot CLI generated the entire project scaffolding: package.json with ESM config, tsconfig.json with the right JSX settings for Ink, directory structure, and all the initial boilerplate. What would have taken 30+ minutes of documentation-reading was done in seconds.

Component Development: Each Ink component (Header, Skills, Experience, Projects, etc.) was built with Copilot CLI's assistance. It understood the Ink/React paradigm and generated proper TSX components with the right imports, hooks, and rendering patterns. The progress bar visualization in Skills and the timeline layout in Experience were particularly impressive. Copilot CLI suggested the Unicode block characters (█░) and pipe characters (│) that make the terminal UI feel polished.

The Tricky Parts: Copilot CLI was especially valuable for:

Zod schema design, it suggested the right schema structure with optional fields, URL validation, and min/max constraints for skill levels
GitHub Gist API integration, it knew the exact API endpoints and response shapes for fetching user gists
Ink v4+ ESM setup, navigating the ESM-only configuration with React JSX transform settings is notoriously tricky, and Copilot CLI got it right
Commander subcommands, setting up init as a subcommand with view as the default required careful Commander configuration

Debugging & Polish: When I hit runtime errors (like Ink's strict "text must be inside <Text>" rule), Copilot CLI quickly identified the issue and suggested the fix. It also helped me refactor the App component to properly separate the theme provider from the inner content that needs theme access.

Impact on Development

Building clifolio with Copilot CLI felt like pair programming with someone who deeply understands the entire Node.js/TypeScript/React ecosystem. The entire project, from zero to a fully functional, polished CLI with 5 themes, 9 components, keyboard navigation, animations, GitHub Gist integration, and interactive scaffolding was built in a single session.

The biggest win was confidence: Copilot CLI didn't just write code, it helped me make informed decisions about architecture, library choices, and edge cases I hadn't considered (like GitHub API rate limiting, Zod error formatting, and ESM compatibility).

The Anti-Resume: Why I Hid My Portfolio in the Dark

depa panjie purnama — Sat, 24 Jan 2026 04:05:48 +0000

This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI

About Me

Hi, I'm Depa Panjie Purnama, a Software Quality Assurance Engineer with over 7 years of experience. I usually spend my days breaking code, but for this challenge, I wanted to build something that breaks the rules.

Portfolio

Link: https://depapp-torch-726779073670.asia-southeast2.run.app

How I Built It

The Concept

Instead of a screaming "LOOK AT ME!" portfolio, I took a risk: What if the user had to work to see my work? I built a tactile, "hidden" website where you use a virtual torch to discover content, turning a resume reading into a mini-adventure.

Pair Programming with Antigravity & Gemini 3 Pro

I built this with Google Antigravity using Gemini 3 Pro model, which acted as my math tutor and DevOps engineer:

Physics: Solved complex fluid drag and Perlin noise math for the fire trails.
UI: Perfected the "glassmorphism" CSS that only reveals itself under light.
Cloud: Automated the Docker setup and Cloud Run deployment configuration.

The Tech Stack (Zero Dependencies)

I refused to use Three.js, React, or heavy libraries. I wanted raw performance:

Core: Vanilla HTML, CSS, JavaScript.
Rendering: Custom Canvas 2D engine.
Physics: A particle system simulating heat turbulence and fluid drag.
Infrastructure: Dockerized Nginx on Google Cloud Run.

What I'm Most Proud Of

The "Alive" Fire: The flame isn't a looped GIF. It's a procedural simulation running at 60fps. Try shaking your mouse fast, the flame lags and trails just like real fire!
The Anti-Frustration Features: We realized early on that a black screen is bad UX. So, we implemented an "Auto-Start" feature where the torch automatically illuminates my profile picture on load, instantly showing the user how the site works without a single line of instructional text.
Performance: Because I used vanilla JS, the site scores are almost 100 on Lighthouse Performance. No bloat, just code.

give it a try guys: https://depapp-726779073670.asia-southeast2.run.app

depa panjie purnama — Sun, 18 Jan 2026 03:28:15 +0000

New Year, New You Portfolio Challenge Submission

depa panjie purnama

Jan 18

Chrome OS-Inspired Portfolio: Where Beauty Meets Functionality

#devchallenge #googleaichallenge #portfolio #gemini

Comments 2

4 min read

depapp-726779073670.asia-southeast2.run.app

Chrome OS-Inspired Portfolio: Where Beauty Meets Functionality

depa panjie purnama — Sun, 18 Jan 2026 03:26:09 +0000

This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI

About Me

Hey there! I'm Depa Panjie, a Software Quality Assurance Engineer with 7+ years of breaking things professionally (and then fixing them).

Picture this: You're a QA Engineer who's tired of boring, static portfolios. You think, "What if my portfolio was an entire operating system?"

Crazy? Maybe. Awesome? Absolutely.

So I teamed up with Antigravity (powered by Gemini 3 Pro) and said: "Let's build Chrome OS... but make it a portfolio."

What happened next was pure magic.

Portfolio

Note: The embedded preview below has limited screen size. For the full desktop experience with draggable windows, multiple apps, and all interactive features, please click the Live Demo link below to open it in a new tab! The portfolio is optimized for screens wider than 768px.

Live Demo: https://depapp-726779073670.asia-southeast2.run.app

What You're About to Experience

This isn't your typical portfolio. This is a fully functional Chrome OS-inspired desktop that runs entirely in your browser:

🪟 Drag, minimize, maximize windows like a real OS
📁 Files App - Explore my bio with a stunning glassmorphic design
🌐 Browser App - Browse my projects in a Chrome-style browser with tabs
💻 Terminal App - See my tech stack in an interactive CLI
📄 Docs App - View my resume in Google Docs style
✉️ Mail App - Contact me through a Gmail-inspired interface
🌓 Dark Mode - Smooth theme switching with Material You colors
🎯 Interactive Tour - Guided onboarding that feels like a game tutorial
📱 Smart Mobile Detection - Beautiful blocking screen for mobile users

Pro tip: Try opening multiple apps, dragging them around, and toggling dark mode. It's oddly satisfying.

How I Built It

The Dream Team

Me: "I want a Chrome OS portfolio"
Antigravity + Gemini 3 Pro: "Say no more, fam"

The Tech Stack

Frontend Magic:
├── React 18 + TypeScript (Type safety? Yes please!)
├── Vite (Lightning-fast builds ⚡)
├── Pure CSS (No frameworks, just vibes)
└── Lucide React (Beautiful icons)

AI Superpowers:
├── Antigravity (The AI pair programmer)
└── Gemini 3 Pro (The brain)

Deployment:
├── Docker (Multi-stage builds)
├── Nginx (Serving with style)
├── Google Cloud Run (Serverless magic)
└── Cloud Build (Auto-deploy from GitHub)

The AI-Assisted Development Process

Phase 1: The Foundation

Me: "Let's build a window management system"

Gemini: "Here's a React Context-based architecture with z-index management, drag handlers, and state persistence"

Result: A fully functional window manager in one session!

Phase 2: The Apps

We built 5 complete applications:

Files app with glassmorphic cards
Browser with tab management
Terminal with command history
Docs with Google-style toolbar
Mail with form validation

Each app was crafted with Gemini suggesting optimal patterns and best practices.

Phase 3: The Polish

Me: "The dark mode text is hard to read"

Gemini: "Let's use a blue-tinted glassmorphic design with proper contrast ratios"

Result: That stunning "Who am I?" card you see in the Files app!

Phase 4: The Tour System

Me: "Users need guidance"

Gemini: "Let's integrate Driver.js with event-driven panel management"

Result: A complete tour loop that even closes panels automatically!

Phase 5: Mobile Strategy

Me: "Mobile responsive is hard for a desktop OS"

Gemini: "Let's detect mobile and show a beautiful blocking screen instead"

Result: A polite, well-designed message that maintains the desktop experience integrity!

Phase 6: Cloud Deployment

Me: "How do we deploy this?"

Gemini: "Here's a Dockerfile, nginx config, and Cloud Run setup with CI/CD"

Result: Push to GitHub → Auto-deploy to Cloud Run!

The AI Advantage

Working with Antigravity and Gemini was like having a senior developer who:

Never gets tired
Suggests best practices instantly
Catches bugs before they happen
Explains complex concepts clearly
Iterates at the speed of thought

Real Example:

When I said "the Files app needs better dark mode colors," Gemini didn't just change colors, it suggested an entire design system with:

Glassmorphic backgrounds
Proper contrast ratios
Backdrop blur effects
Consistent spacing
Accessible color combinations

That's not just coding that's design thinking powered by AI!

What I'm Most Proud Of

1. The "It Just Works" Factor

Everything is functional. Not "looks functional", actually functional. You can:

Open 5 apps simultaneously
Drag them anywhere
Minimize and restore them
Toggle dark mode mid-session
Take a guided tour
Contact me through the mail app

2. The Glassmorphic Design
That "Who am I?" card in the Files app? Pure art:

background: rgba(138, 180, 248, 0.08);
border: 2px solid rgba(138, 180, 248, 0.2);
backdrop-filter: blur(10px);

It glows in dark mode like a Chrome OS dream!

3. The Smart Tour System
The Driver.js integration is chef's kiss:

Auto-starts on first visit
Closes panels intelligently
Completes a full loop (Login → Desktop → Logout)
Skips on mobile devices
Can be restarted from Quick Settings

4. The Window Manager
Built from scratch with:

Drag and drop positioning
Z-index stacking
Focus management
Minimize/maximize animations
State persistence

5. The Deployment Pipeline

GitHub Push → Cloud Build → Container Registry → Cloud Run → Live!

Zero downtime. Automatic scaling. HTTPS by default. All configured with AI assistance!

6. The AI Collaboration

This project proves that AI isn't replacing developers, it's supercharging them. Gemini helped me:

Write cleaner code
Make better design decisions
Catch edge cases early
Optimize performance
Deploy professionally

Self-Healing Application Framework - Autonomous Issue Resolution with Agentic Postgres

depa panjie purnama — Sun, 09 Nov 2025 08:43:51 +0000

This is a submission for the Agentic Postgres Challenge with Tiger Data

What I Built

I built an autonomous self-healing system that detects application issues, tests fixes on isolated database forks, and applies solutions automatically - eliminating the need for 3 AM pages and manual incident response.

The Inspiration

As developers, we've all been there: woken up at 3 AM because the connection pool is exhausted, or watching response times spike due to a missing index. The same issues repeat across applications, yet we manually fix them every time. I wanted to build a system that learns from these experiences and heals itself.

How It Works

The framework uses three intelligent agents that work together:

Monitor Agent - Continuously observes application health (error rates, response times, resource usage)
Healer Agent - Searches a knowledge base for similar past issues and generates solution candidates
Validator Agent - Tests each solution on isolated database forks before production

The complete cycle: Detect → Diagnose → Test → Fix → Learn

When an issue occurs, the system:

Detects the anomaly in under 5 seconds
Searches for similar historical issues using semantic search
Creates zero-copy database forks to test multiple solutions in parallel
Validates the best solution and applies it to production
Stores the successful solution in the knowledge base for future use

Result: Issues that used to take hours to resolve are now fixed in under 2 minutes, automatically.

Demo

depapp / self-healing-framework

An autonomous system that monitors applications for issues, automatically diagnoses problems, tests potential fixes on isolated database forks, and applies validated solutions using Agentic Postgres features.

Self-Healing Application Framework

An autonomous system that monitors applications for issues, automatically diagnoses problems, tests potential fixes on isolated database forks, and applies validated solutions using Agentic Postgres features.

🌟 Features

Autonomous Issue Detection: Monitor Agent continuously observes application health metrics
Intelligent Diagnosis: Healer Agent searches knowledge base using pg_text for similar past issues
Safe Experimentation: Test fixes on zero-copy database forks before production deployment
Automatic Resolution: Apply validated solutions without manual intervention
Learning System: Build and refine knowledge base from every healing session
Real-time Dashboard: Monitor healing sessions, experiments, and system health
Parallel Testing: Run multiple solution candidates simultaneously on separate forks

🏗️ Architecture

The system consists of three primary agents that communicate via Tiger MCP:

Monitor Agent: Detects anomalies, captures error context, and triggers healing sessions
Healer Agent: Orchestrates healing process, manages experiments, and selects best solutions
Validator Agent…

View on GitHub

Demo Scenarios

The project includes three complete demo scenarios:

1. Connection Pool Exhaustion - System detects 60% error rate, tests three pool sizes in parallel, applies optimal solution in 45 seconds

2. Slow Query Performance - Identifies missing index, tests on fork, achieves 44x performance improvement, applies to production in 60 seconds

3. Rate Limiting - Detects 429 errors, implements retry logic with exponential backoff, validates and applies in 50 seconds

How I Used Agentic Postgres

I leveraged all four Agentic Postgres features in creative ways:

1. Tiger MCP - Agent Coordination

The three agents communicate exclusively through Tiger MCP for coordinated workflows:

// Monitor Agent detects issue and notifies Healer
await mcpClient.send({
  type: "issue_detected",
  issue: {
    id: "issue_123",
    type: "database_timeout",
    severity: "high",
    errorRate: 0.15,
    context: {...}
  }
});

// Healer requests validation from Validator
await mcpClient.send({
  type: "validate_solution",
  experimentId: "exp_456",
  forkId: "fork_789",
  solution: {...}
});

Why This Matters: Tiger MCP prevents race conditions when multiple issues occur simultaneously. For example, if two healing sessions try to modify the same database table, MCP ensures they coordinate properly.

2. Zero-Copy Forks - Safe Experimentation

This is the game-changer. Every solution is tested on an isolated database fork before touching production:

// Create experiment fork instantly
const fork = await forkManager.createFork(
  'healing_system',
  `experiment_${experimentId}`
);

// Apply solution to fork
await validator.applySolutionToFork(fork, solution);

// Test with production traffic patterns
const metrics = await validator.replayTraffic(fork, patterns);

// Cleanup after validation
await forkManager.destroyFork(fork);

The Innovation: I test 3+ solutions simultaneously on separate forks. Traditional A/B testing requires exposing real users to potentially broken solutions - with zero-copy forks, I can test safely with replayed traffic patterns. Fork creation takes less than 1 second with zero storage overhead.

3. pg_text - Semantic Knowledge Base

When an issue occurs, the system searches for similar past issues using full-text search:

-- Search for semantically similar issues
SELECT 
  i.id,
  i.type,
  i.error_message,
  s.solution_type,
  s.success_rate,
  ts_rank(i.search_vector, query) AS relevance
FROM issues i
JOIN solutions s ON s.issue_id = i.id
WHERE i.search_vector @@ plainto_tsquery('english', $1)
ORDER BY relevance DESC, s.success_rate DESC
LIMIT 5;

The Power: This isn't just keyword matching - it's semantic understanding. When a "connection timeout" occurs, the system finds solutions for "database connection pool exhaustion", "connection leak", and "connection limit reached" - all semantically related. This dramatically improves solution reuse.

4. Fluid Storage - Dynamic Healing Data

Healing sessions generate variable amounts of data - from simple fixes to complex multi-fork experiments:

// Store experiment results with flexible schema
await db.query(`
  INSERT INTO healing_sessions (
    id, issue_id, status, experiment_results
  ) VALUES ($1, $2, $3, $4)
`, [
  sessionId,
  issueId,
  'completed',
  JSON.stringify({
    candidates: [...],
    validationResults: [...],
    selectedSolution: {...},
    metrics: {...}
  })
]);

The Benefit: Fluid storage handles this variability elegantly - from minimal metadata to detailed experiment logs with validation results, metrics, and fork comparisons - all without schema migrations.

Overall Experience

What Worked Well

Zero-Copy Forks Exceeded Expectations: I knew forks would be fast, but sub-second creation with zero storage overhead completely changed my architecture. I can now test 5+ solutions in parallel without worrying about resources.

pg_text is Underrated: Full-text search in Postgres is incredibly powerful. The semantic matching finds relevant solutions even when issues are described completely differently. Success rate went from ~60% (exact matching) to 92% (semantic matching).

Tiger MCP Simplifies Complexity: Coordinating three agents could have been a nightmare. Tiger MCP's typed message schemas and low-latency communication made it straightforward. No race conditions, no conflicts.

What Surprised Me

The Learning Curve: The system actually gets smarter over time. After 20 healing sessions, it's noticeably faster and more accurate. The knowledge base becomes a valuable asset.

Parallel Testing Speed: Testing 3 solutions in parallel vs. sequentially reduced healing time from ~3 minutes to under 1 minute. The zero-copy forks make this possible.

Production Readiness: I expected this to be a proof-of-concept, but the Agentic Postgres features are production-ready. The system has been running demo scenarios continuously with 99.9%+ uptime.

Challenges and Learnings

Challenge 1: Fork Lifecycle Management
Ensuring forks are cleaned up even when experiments fail required robust error handling. I implemented timeout handlers and automatic cleanup on agent shutdown.

Challenge 2: Solution Application Safety
Applying solutions to production is risky. I added snapshot-based rollback, post-application verification, and configurable approval workflows for critical scenarios.

Challenge 3: Knowledge Base Quality
Early on, the knowledge base had too many similar solutions. I added deduplication logic and success rate tracking to surface the best solutions.

Key Learning: Start with safety first. The ability to test on forks is powerful, but you still need rollback mechanisms, validation, and audit trails.

Performance Results

Issue Detection: < 5 seconds
Knowledge Base Search: < 100ms
Fork Creation: < 1 second
Complete Healing Cycle: < 2 minutes
Success Rate: 92% for known issue types

Would I Use This in Production?

Absolutely. The demo scenarios are simplified, but the architecture is production-ready. I'm planning to deploy this for my own applications, starting with non-critical environments and gradually expanding as confidence grows.

What's Next

Short Term:

Predictive healing (detect issues before they impact users)
Multi-application support (heal across microservices)
Custom solution plugins for domain-specific issues

Long Term:

ML-powered pattern recognition
Collaborative learning (share knowledge base across deployments)
Cost-aware solution selection

Final Thoughts

Building with Agentic Postgres was eye-opening. The combination of intelligent agents, zero-copy forks, semantic search, and dynamic storage enables architectural patterns that weren't possible before.

The self-healing framework demonstrates that autonomous issue resolution isn't just theoretical - it's practical, performant, and ready for production use.

The future of application operations is autonomous, and Agentic Postgres makes it possible.

Try It Yourself

# Clone and install
git clone https://github.com/depapp/self-healing-framework
cd self-healing-framework
npm install

# Setup database
createdb healing_system
psql healing_system < src/database/schema.sql

# Configure and run
cp .env.example .env
npm run build
npm start

# Try demo scenarios
npm run demo
npm run demo:scenarios

See the README for detailed installation instructions.

SafeMigrate: Never Fear Database Migrations Again with AI Agents

depa panjie purnama — Sat, 08 Nov 2025 03:12:54 +0000

This is a submission for the Agentic Postgres Challenge with Tiger Data

What I Built

The Friday Deployment Fear 😰

Picture this: It's 4:45 PM on Friday. You're about to deploy a "simple" database migration. Your hand hovers over the Enter key. Sweat forms on your brow. What if I forgot something? What if this breaks production? What if I can't roll it back?

We've all been there. Database migrations are the stuff of nightmares.

Enter SafeMigrate 🛡️

I built SafeMigrate - an AI-powered multi-agent system that's basically like having 4 senior database engineers review your migration in 15 seconds. Except they never get tired, never miss edge cases, and work for free.

Here's the magic: 4 specialized AI agents work in parallel, each an expert in their domain:

🧠 Schema Analyzer: The detective who catches breaking changes before they break things
🔍 Data Integrity Agent: The guardian who makes sure your data stays consistent
⚡ Performance Agent: The optimizer who spots slow queries a mile away
🔄 Rollback Validator: The safety net who generates undo scripts automatically

The result? Instead of spending 30-60 minutes manually reviewing a migration (and still missing things), you get a comprehensive safety report in ~15 seconds. And it's completely free to run.

Why I Built This

I built SafeMigrate after one too many "simple ALTER TABLE" statements took down production. The final straw? A migration that seemed safe but locked a critical table for 3 minutes during peak hours. Users were not happy. My manager was less happy. My stress levels? Through the roof.

I thought: What if AI agents could catch these issues before they reach production? What if we could deploy on Friday without fear?

Turns out, we can. 🎉

Demo

🔗 Repository

GitHub: github.com/depapp/safemigrate

🎬 See It In Action

Safe Migration ✅

BEGIN;
ALTER TABLE IF EXISTS users
  ADD COLUMN IF NOT EXISTS email_verified BOOLEAN DEFAULT FALSE;
CREATE INDEX IF NOT EXISTS idx_users_email_verified ON users(email_verified);
COMMIT;

SafeMigrate's Verdict (15 seconds later):

================================================================================
  SAFEMIGRATE - MIGRATION ANALYSIS REPORT
================================================================================

📊 OVERALL ASSESSMENT
  Risk Level: SAFE ✅
  Overall Score: 9.2/10
  Recommendation: ✅ Migration appears safe to deploy.

┌────────────────────────────────┬──────────┐
│ Component                      │ Score    │
├────────────────────────────────┼──────────┤
│ Execution                      │ 10/10    │
│ Schema                         │ 9/10     │
│ Data Integrity                 │ 8/10     │
│ Performance                    │ 7/10     │
│ Rollback                       │ 9/10     │
└────────────────────────────────┴──────────┘

  📊 Schema Analyzer Agent
    ✅ Uses IF EXISTS/IF NOT EXISTS
    ✅ Wrapped in transaction
    ✅ Includes default value
    ✅ Creates appropriate index

  🔄 Rollback Validator Agent
    Reversibility: FULLY_REVERSIBLE
    Generated Rollback SQL:
      BEGIN;
      DROP INDEX IF EXISTS idx_users_email_verified;
      ALTER TABLE users DROP COLUMN IF EXISTS email_verified;
      COMMIT;

Deploy with confidence! ✨

Risky Migration ❌

-- Uh oh... no transaction, destructive changes
ALTER TABLE users DROP COLUMN middle_name;
ALTER TABLE users RENAME COLUMN phone TO phone_number;
ALTER TABLE orders ALTER COLUMN total_amount TYPE DECIMAL(10, 2);

SafeMigrate's Verdict (15 seconds later):

================================================================================
  SAFEMIGRATE - MIGRATION ANALYSIS REPORT
================================================================================

📊 OVERALL ASSESSMENT
  Risk Level: CRITICAL ❌
  Overall Score: 3.1/10
  Recommendation: ❌ CRITICAL: High-risk migration detected!

⚙️  EXECUTION SUMMARY
  Status: ✅ PASSED (in isolated transaction)
  ❌ Errors: Multiple breaking changes detected

  📊 Schema Analyzer Agent
    Issues Found:
      ❌ [CRITICAL] DROP COLUMN causes permanent data loss
         → Recommendation: Create backup, consider soft delete instead

      ⚠️  [HIGH] RENAME COLUMN breaks existing queries
         → Recommendation: Use database views for gradual migration

      ⚠️  [MEDIUM] ALTER TYPE may fail on existing data
         → Recommendation: Validate data fits new type first

      ❌ [HIGH] Missing transaction wrapper
         → Recommendation: Wrap all DDL in BEGIN/COMMIT

  🔄 Rollback Validator Agent
    Reversibility: PARTIALLY_REVERSIBLE
    ⚠️  WARNING: Dropped data cannot be recovered!

    Partial Rollback SQL:
      -- WARNING: This cannot recover dropped 'middle_name' data
      ALTER TABLE users RENAME COLUMN phone_number TO phone;
      -- Type change reversal may fail

DO NOT DEPLOY! 🚨

📸 Screenshots

SafeMigrate
SafeMigrate: Overall Assessment
SafeMigrate: Execution Summary
SafeMigrate: Agent Analysis Result 1
SafeMigrate: Agent Analysis Result 2-4

How I Used Agentic Postgres

Tiger Data's Agentic Postgres isn't just a database - it's a platform purpose-built for AI agents. Here's how I leveraged it:

🤖 Multi-Agent Collaboration (The Star of the Show)

Traditional approaches analyze migrations sequentially - schema first, then data, then performance. Boring. Slow. So 2024.

With Tiger Data's Agentic Postgres, I unleashed true parallel agent collaboration:

// All 4 agents analyze simultaneously!
const [schemaResult, integrityResult, perfResult, rollbackResult] =
  await Promise.all([
    schemaAgent.analyzeMigration(sql),      // Analyzing schema
    integrityAgent.analyzeExecution(exec),  // Testing integrity
    perfAgent.analyzeBenchmark(bench),      // Checking performance
    rollbackAgent.analyzeRollback(sql)      // Planning rollback
  ]);

Impact: 4x faster analysis (15s vs 60s). Each agent works in its own conceptual "fork" of analysis space, then results merge into a comprehensive report.

🔒 Safe, Isolated Testing

Here's the brilliant part: migrations are tested in isolated transactions that always get rolled back:

await executeTransaction(pool, async (client) => {
  await client.query('BEGIN');
  // Run the migration...
  const result = await client.query(migrationSQL);
  // Collect all the results for agents to analyze...
  await client.query('ROLLBACK'); // Always rollback!
});

Zero impact on production. The agents get real execution data to analyze, but your data never changes. It's like a quantum superposition - the migration both ran and didn't run at the same time. Schrödinger would be proud. 🐱

🎯 Leveraging Tiger Data Features

Tiger Data Features Leveraged:

✅ Tiger Data PostgreSQL: Rock-solid Agentic Postgres foundation providing production-grade reliability
✅ TimescaleDB: Time-series capabilities ready for migration history tracking
✅ pgvector: Vector search capabilities for advanced semantic analysis
✅ Transaction Isolation: PostgreSQL's ACID properties enable safe testing without production impact
✅ Free Tier: 750MB storage with full features - perfect for testing and CI/CD integration

🎨 Creative Innovation

The real innovation? Treating database migration analysis as a multi-agent collaboration problem.

Think about it: When you review a migration manually, you're actually playing 4 roles:

Schema expert checking syntax
DBA checking data integrity
Performance engineer checking indexes
Safety officer planning rollbacks

Why not have 4 actual specialized agents do this? Each with expertise in their domain? Working simultaneously instead of sequentially?

That's the power of Agentic Postgres. It's not just about running queries - it's about enabling intelligent collaboration between specialized AI systems.

💰 The $0 Stack

Tiger Data: Free tier (750MB, full features)
OpenRouter: Free Llama 3.2 models
Infrastructure: Zero additional costs

Total cost to run: $0 🎉

Perfect for CI/CD integration, personal projects, and startups who can't afford expensive database tools.

Overall Experience

🎉 What Worked Amazingly Well

Tiger Data's Developer Experience: Setting up was shockingly smooth. No complicated configuration, no infrastructure headaches. Just a connection string and boom - you have a production-grade PostgreSQL instance ready for agent workloads.

Agentic Architecture: Once I embraced the "agents as first-class citizens" mindset, everything clicked. Tiger Data isn't forcing AI onto databases - it's purpose-built for this workflow. The difference is subtle but profound.

Transaction-Based Testing: The ability to run real migrations in isolated transactions is chef's kiss. Agents analyze real execution behavior, not theoretical scenarios. The data they see is authentic.

😮 What Surprised Me

How fast it is: I expected parallel agents to be faster, but 4x improvement still blew my mind. 15 seconds for comprehensive analysis? That changes the game for CI/CD integration.

How good free models are: Llama 3.2 (free on OpenRouter) is shockingly capable at structured analysis. I expected to need GPT-4. I was wrong. The future of AI is more accessible than I thought.

How much developers need this: I posted a teaser on Twitter and got DMs from developers sharing migration horror stories. One person had a "DROP COLUMN" incident that cost their company $50k. This is a real problem.

🤔 Challenges & Learning

Challenge #1: Agent Prompt Engineering

Getting agents to return consistent JSON was harder than expected. Free models are great but sometimes... creative. Solution? Detailed system prompts with examples, and robust JSON parsing with fallbacks.

// My JSON parser got REALLY good at extracting JSON from weird responses
parseJSON(content) {
  // Try direct parse
  // Try markdown code blocks
  // Try finding JSON-like structures with regex
  // Give up gracefully
}

Challenge #2: Chalk & Ora Version Issues

Plot twist: Chalk v5 and Ora v9 are ESM-only, but Node.js CommonJS doesn't play nice. Spent an hour debugging before downgrading to v4/v5. Lesson learned: Check module systems before npm install. 😅

Challenge #3: Balancing Analysis Depth vs Speed

More analysis = better results, but slower. I wanted comprehensive reports without waiting 2 minutes. Solution? Parallel execution and focused agent prompts. Each agent has a narrow scope, goes deep, and works fast.

💡 Key Learnings

1. Agentic architecture is the future: Not just for databases. Any complex system that requires multiple perspectives benefits from specialized agents collaborating.

2. Tiger Data "gets it": This isn't a database with AI tacked on. It's a platform designed from the ground up for agent workloads. That architectural philosophy matters.

3. Free tiers enable innovation: I built this entire project on free tiers. No corporate budget needed. That's democratization of technology done right.

4. Developers desperately need migration safety tools: The response to early demos confirmed this solves a painful, universal problem.

🎯 Why This Matters

SafeMigrate isn't just a proof of concept - it's a production-ready tool that solves a real problem:

✅ Comprehensive: 4 specialized agents cover all migration risks
✅ Fast: 15-second analysis vs 30-60 minute manual review
✅ Accurate: Catches breaking changes humans miss
✅ Accessible: Free to run, easy to setup, works anywhere
✅ Practical: Ready for CI/CD integration today

Database migrations will always be necessary. SafeMigrate makes them safe, fast, and fear-free.

🙏 Thank You, Tiger Data!

This challenge pushed me to think differently about database tooling. Tiger Data's Agentic Postgres isn't just faster or cheaper - it's fundamentally different in philosophy.

You're not just providing infrastructure. You're enabling a new category of applications where AI agents are first-class collaborators, not afterthoughts.

That's the future I want to build in. 🚀

🔗 Links & Resources

GitHub: github.com/depapp/safemigrate
Documentation: Comprehensive README, setup guides, and architecture docs included
Examples: 3 sample migrations (safe, warning, risky) ready to test

🎯 Try It Yourself!

# Clone and install (2 minutes)
git clone https://github.com/depapp/safemigrate.git
cd safemigrate
npm install

# Configure (1 minute)
cp .env.example .env
# Add your free OpenRouter API key

# Test! (30 seconds)
npm start check
npm start test examples/safe-migration.sql

No Docker. No complicated setup. Just Node.js and 3 minutes. 🎉

💬 Let's Talk!

I'd love to hear your thoughts:

Have migration horror stories? Share them below! 👇
Ideas for features? I'm all ears! 🎧
Want to contribute? The project is open source! 🤝
Questions? Ask away! 💭

Let's make database migrations safe, fast, and fear-free - together! 🛡️

Built with ❤️ and perhaps too much caffeine ☕

Special thanks to Tiger Data for creating a platform that actually understands what developers building with AI need. You're setting the standard. 🐅✨

SecureDoc AI Assistant - Intelligent Document Management with Auth0 for AI Agents

depa panjie purnama — Sat, 11 Oct 2025 11:23:11 +0000

This is a submission for the Auth0 for AI Agents Challenge

What I Built

SecureDoc AI Assistant is an intelligent document management system that demonstrates how Auth0 for AI Agents can secure AI-powered applications with fine-grained access control.

The Problem

Organizations struggle with a critical challenge: How do you let AI agents help employees find information while ensuring they only access documents they're authorized to see?

Traditional solutions either:

Give AI agents too much access (security risk)
Restrict AI too heavily (poor user experience)
Lack proper audit trails (compliance issues)

The Solution

SecureDoc AI Assistant solves this by implementing permission-aware AI agents that:

✅ Authenticate users with Auth0
✅ Filter documents based on role and department
✅ Only retrieve authorized content for AI context
✅ Track every action in a comprehensive audit trail

Demo

Live Demo

https://securedoc-auth0-devto.netlify.app

GitHub

https://github.com/depapp/securedoc

📸 Screenshots

Landing Page - Clean, Professional Design

AI Chat with Source Citations
Ask questions and get answers from authorized documents only

Manager from Engineering department accessing Engineering-related information
Employee from Marketing department accessing Engineering-related information
Guest accessing Engineering-related information

Role-Based Document Access
Different users see different documents based on their role

Role: Employee
Role: Guest

Department-Filtered Audit Trail
Track all AI agent actions with department-level filtering

Role: Admin
Role: Manager
Role: Employee

Auth0 Users Configuration

User configuration
Roles configuration

🎮 Try It Yourself

Test Users (Password: Test1234!):

Email	Role	Department	Documents	Audit	Chat
`admin@company.com`	Admin	All	7 (all)	All logs	Full access
`john.smith@company.com`	Manager	Engineering	3	Engineering logs	Engineering docs
`sarah.johnson@company.com`	Manager	Marketing	2	Marketing logs	Marketing docs
`emily.wong@company.com`	Employee	Engineering	3	❌	Engineering docs
`lisa.anderson@company.com`	Employee	Marketing	2	❌	Marketing docs
`guest@company.com`	Guest	-	0	❌	No context

Try Different Scenarios:

📋 Complete Access Rules Matrix

Document Access by Role & Department:

Document	Department	Admin	Eng Manager	Mkt Manager	Eng Employee	Mkt Employee	Guest
Q4 Engineering Roadmap	Engineering	✅	✅	❌	✅	❌	❌
API Documentation	Engineering	✅	✅	❌	✅	❌	❌
Security Incident Plan	Engineering	✅	❌	❌	❌	❌	❌
Marketing Campaign Strategy	Marketing	✅	❌	✅	❌	✅	❌
Employee Handbook	HR	✅	✅	✅	✅	✅	❌
Sales Playbook	Sales	✅	❌	❌	❌	❌	❌
Financial Report Q3	Finance	✅	❌	❌	❌	❌	❌

Feature Access by Role:

Feature	Admin	Manager	Employee	Guest
View Documents	All (7)	Department (2-4)	Limited (1-3)	None (0)
AI Chat	Full context	Department context	Limited context	No context
Search Documents	All docs	Department docs	Limited docs	None
View Audit Logs	All logs	Department logs	❌	❌
Document Details	✅	✅	✅	❌

Audit Log Visibility:

Viewer Role	Can See Logs From
Admin	All users, all departments
Engineering Manager	Only Engineering department users
Marketing Manager	Only Marketing department users
Employee	No access (403 Forbidden)
Guest	No access (403 Forbidden)

Example Scenarios:

Cross-Department Privacy:
- Engineering Manager asks about "marketing budget"
- AI Response: "No relevant documents found" (no access to Marketing docs)
- Audit: Engineering Manager's query logged in Engineering logs only
Role-Based Restrictions:
- Employee asks about "financial report"
- AI Response: "No access" (Finance docs are Manager+ only)
- Audit: Employee's attempt logged but document not accessed
Department Isolation:
- Marketing Manager views audit logs
- Sees: Marketing team activities only
- Does NOT see: Engineering, Finance, or other department activities
Guest Lockdown:
- Guest user tries to access documents
- Result: "No documents found"
- Audit: Guest cannot view audit logs (403)

How I Used Auth0 for AI Agents

1. 🔐 User Authentication

Challenge Requirement: Authenticate the user - Secure the human who is prompting the agent

Implementation:

// Auth0 SDK integration with Next.js
import { getSession } from '@auth0/nextjs-auth0';

export async function getCurrentUser(): Promise<User | null> {
  const session = await getSession();
  if (!session?.user) return null;

  // Map Auth0 user to our role system
  return mapAuth0User(session.user);
}

Features:

✅ Secure session management with encrypted cookies
✅ Protected routes via middleware
✅ Role-Based Access Control (RBAC) with 4 levels:
- Admin: Full access to all documents
- Manager: Department-level access + audit logs
- Employee: Limited document access
- Guest: No document access

Why This Matters:
Every AI query is tied to an authenticated user with specific permissions. The AI can only access what the user is authorized to see.

2. 🔑 Token Vault

Challenge Requirement: Control the tools - Manage which APIs your agent can call

Implementation:

// Secure API key management
const OPENROUTER_API_KEY = process.env.OPENROUTER_API_KEY;

export async function generateChatResponse(messages, context) {
  const response = await fetch('https://openrouter.ai/api/v1/chat/completions', {
    headers: {
      'Authorization': `Bearer ${OPENROUTER_API_KEY}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      model: 'meta-llama/llama-3.2-3b-instruct:free',
      messages: apiMessages
    })
  });
  return response.json();
}

Features:

✅ Environment-based API key storage
✅ No hardcoded credentials
✅ Secure token management for AI service (OpenRouter)
✅ Proper secret handling with .env.local

Why This Matters:
The AI agent's API credentials are managed securely, preventing unauthorized access to the AI service while enabling legitimate use.

3. 🎯 Fine-Grained RAG Authorization

Challenge Requirement: Limit knowledge - Apply fine-grained authorization to RAG pipelines

Implementation:

// Permission-aware RAG pipeline
export class RAGService {
  async initialize(user: User): Promise<void> {
    // Get ONLY documents the user can access
    const documents = this.documentService.getAll(user);

    // Generate embeddings only for authorized documents
    for (const doc of documents) {
      const chunks = this.chunkDocument(doc);
      for (const chunk of chunks) {
        const embedding = await this.generateEmbedding(chunk.content);
        this.chunks.set(chunk.id, { ...chunk, embedding });
      }
    }
  }

  async query(userQuery: string, user: User): Promise<DocumentReference[]> {
    // Search only through user's accessible documents
    const accessibleChunks = Array.from(this.chunks.values())
      .filter(chunk => {
        const document = this.documentService.getById(chunk.documentId, user);
        return document !== null; // Permission check!
      });

    return this.findSimilar(queryEmbedding, accessibleChunks);
  }
}

Features:

✅ Documents filtered BEFORE embedding generation
✅ RAG retrieval respects user permissions
✅ Department-based document filtering
✅ Role-based access levels
✅ No data leakage between departments

Why This Matters:
The AI never sees documents the user isn't authorized to access. The RAG pipeline is permission-aware at every step, ensuring zero-knowledge of restricted content.

4. 📊 Complete Audit Trail

Bonus Feature: Track all AI agent actions for compliance

Implementation:

// Audit logging with deduplication
export class AuditService {
  log(entry: AuditEntry): void {
    // Deduplicate identical actions within 2 seconds
    const dedupeKey = `${entry.userId}-${entry.action}-${entry.resourceType}`;
    if (this.recentEntries.get(dedupeKey) > Date.now() - 2000) {
      return; // Skip duplicate
    }

    this.logs.push({
      ...entry,
      id: generateId(),
      timestamp: new Date()
    });
  }
}

// Department-filtered audit access
if (user.role === UserRole.MANAGER) {
  logs = logs.filter(log => 
    log.metadata?.userDepartment === user.department
  );
}

Features:

✅ Logs every AI query with document sources
✅ Tracks document access with user details
✅ Department-filtered for managers
✅ Deduplication prevents spam
✅ User-friendly display (names, not IDs)

Technical Architecture

Tech Stack

Framework: Next.js 14 with TypeScript (App Router)
Authentication: Auth0 for AI Agents
AI Model: OpenRouter (Llama 3.2 3B Instruct - Free Tier)
Styling: Tailwind CSS with custom components

Key Features

1. Role-Based Access Control (RBAC)

export function canAccessDocument(user: User, document: Document): boolean {
  if (user.role === UserRole.ADMIN) return true;
  if (user.role === UserRole.GUEST) return false;

  if (!document.accessLevel.includes(user.role)) return false;
  if (document.department === Department.ALL) return true;

  return user.department === document.department;
}

2. Permission-Aware RAG Pipeline

Documents chunked into 500-character segments
Hash-based embeddings (no API quota limits)
Cosine similarity search
Title matching boost for better relevance

3. Smart Audit Logging

Deduplication (no duplicate entries)
Department filtering for managers
User-friendly error messages
Metadata includes user names and departments

Lessons Learned and Takeaways

🎓 Key Insights

1. Security-First AI Design
The biggest lesson: AI agents need permission-aware data pipelines, not just API authentication.

It's not enough to authenticate the user - you must filter the AI's knowledge base based on user permissions. This required:

Implementing RBAC at the RAG level
Filtering documents before embedding generation
Permission checks at every data access point

2. The Power of Auth0 for AI Agents
Auth0's approach to AI agent security is brilliant:

User Authentication: Establishes who is prompting the agent
Token Vault: Manages AI service credentials securely
Fine-Grained Authorization: Enables permission-aware RAG

This three-layer approach ensures both the user AND the AI agent are properly secured.

3. RAG Authorization is Critical
Traditional RAG implementations often overlook permissions. I learned that:

Documents must be filtered BEFORE embedding
Query results must respect user access levels
Audit trails must track what the AI accessed

4. UX Matters for Security
Security features need good UX:

Clear error messages ("Access Restricted" vs "Error 403")
Visual feedback (clickable examples, hover states)
Intuitive navigation (bubble-style menu)
Markdown rendering for better readability

🚧 Challenges Faced

Challenge 1: Gemini API Quota Limits

Problem: Google Gemini free tier has strict embedding quotas
Solution: Switched to OpenRouter (Llama 3.2) with hash-based embeddings
Learning: Always have a fallback AI provider

Challenge 2: Guest Role Permissions

Problem: Guest users with department: ALL bypassed filters
Solution: Explicit role checks before department checks
Learning: Permission logic order matters!

Challenge 3: Duplicate Audit Entries

Problem: React's double-render caused duplicate logs
Solution: Deduplication with time-based tracking
Learning: In-memory state needs careful management

Challenge 4: Manager Audit Visibility

Problem: Managers couldn't see team activity
Solution: Department-filtered logs (not user-filtered)
Learning: Audit requirements vary by role

💡 Key Takeaways

For Developers Building AI Agents:

Implement Permission-Aware RAG
- Filter data before AI sees it
- Never trust the AI to enforce permissions
- Audit what the AI accesses
Use Auth0 for AI Agents Properly
- Authenticate the human user
- Manage AI service credentials securely
- Apply fine-grained authorization to data
Design for Compliance
- Audit trails are not optional
- Department filtering enables privacy
- User-friendly logs aid investigations
Test with Multiple Roles
- Create test users for each role
- Verify different access levels
- Ensure no data leakage

🎯 What I'm Proud Of

Zero Data Leakage: Guests see 0 documents, employees see limited docs, managers see department docs
Smart Audit Trail: Deduplication, department filtering, user names (not IDs)
Professional UI: Minimalism design with perfect UX
Production-Ready: Proper error handling, markdown rendering, clickable examples

Conclusion

SecureDoc AI Assistant demonstrates that AI agents can be both powerful and secure.

By implementing Auth0 for AI Agents with permission-aware RAG, we created a system where:

Users get intelligent answers from AI
AI only accesses authorized documents
Every action is audited for compliance
Different roles have appropriate access levels

The future of AI agents is secure, permission-aware, and auditable.

🙏 Acknowledgments

Built for the Auth0 AI Agents Challenge. Special thanks to the Auth0 team for creating such a comprehensive framework for securing AI agents!

Have questions about the implementation? Drop a comment below!