DEV Community: Ramu Narasinga

util.promisify in Roo-Code codebase.

Ramu Narasinga — Thu, 30 Apr 2026 16:00:00 +0000

In this article, we review promisify method. You will learn:

What is util.promisify?
What is Roo-Code?
Usage example.

What is util.promisify?

Util is a NodeJS API. It has a lot of method defined. Check the util page. We are interested in promisify.

Promisify

Promisify takes a function following the common error-first callback style, i.e. taking an (err, value) => ... callback as the last argument, and returns a version that returns promises.

Below is an example picked from the docs:

import { promisify } from 'node:util';
import { stat } from 'node:fs';

const promisifiedStat = promisify(stat);
promisifiedStat('.').then((stats) => {
  // Do something with `stats`
}).catch((error) => {
  // Handle the error.
});

Learn more about promisify.

What is Roo-Code?

Roo Code gives you a whole dev team of AI agents in your code editor.

What Can Roo Code Do For YOU?

Generate Code from natural language descriptions and specs
Adapt with Modes: Code, Architect, Ask, Debug, and Custom Modes
Refactor & Debug existing code
Write & Update documentation
Answer Questions about your codebase
Automate repetitive tasks
Utilize MCP Servers

Modes

Roo Code adapts to how you work:

Code Mode: everyday coding, edits, and file ops
Architect Mode: plan systems, specs, and migrations
Ask Mode: fast answers, explanations, and docs
Debug Mode: trace issues, add logs, isolate root causes
Custom Modes: build specialized modes for your team or workflow

Learn more about Roo-Code.

Usage example

In the Roo-Code codebase, there is a file, worktree-service.ts. It has promisify imported as shown below, at the top of the file:

import { promisify } from "util"

How is this used? Roo-Code is making two methods return as a promise as shown below:

import { exec, execFile } from "child_process"
import { promisify } from "util"
...
const execAsync = promisify(exec)
const execFileAsync = promisify(execFile)

and then this promisified functions are used in the WorktreeService class as shown below:

/**
 * Service for managing git worktrees.
 * All methods are platform-agnostic and don't depend on VSCode APIs.
 */
export class WorktreeService {
 /**
  * Check if git is installed on the system
  */
 async checkGitInstalled(): Promise<boolean> {
  try {
   await execAsync("git --version")
   return true
  } catch {
   return false
  }
 }
...

About me:

Hey, my name is ramunarasinga. Email: ramunarasinga@gmail.com

Tired of AI slop?

I spent 3+ years studying OSS codebases and wrote 350+ articles on what makes them production-grade. I built

An open source tool that reviews your PR..
Codebase architecture skills, inspired by best OSS projects.

References:

Mediabunny, complete media toolkit.

Ramu Narasinga — Thu, 30 Apr 2026 15:30:00 +0000

In this article, we review Mediabunny. You will learn:

What is Mediabunny?
Mediabunny usage in Supersplat

What is Mediabunny?

Mediabunny is a JavaScript library for reading, writing, and converting video and audio files. Directly in the browser, and faster than anybunny else.

Read any media file

Mediabunny allows you efficiently read data from any video or audio file, no matter the size: duration, resolution, rotation, tracks, codecs and other metadata, as well as raw or decoded media data from anywhere in the file. Load only what you need.

const input = new Input({
  source: new UrlSource('./bigbuckbunny.mp4'),
  formats: ALL_FORMATS, // .mp4, .webm, .wav, ...
});

const duration = await input.computeDuration();

const videoTrack = await input.getPrimaryVideoTrack();
const { displayWidth, displayHeight, rotation } = videoTrack;

const audioTrack = await input.getPrimaryAudioTrack();
const { sampleRate, numberOfChannels } = audioTrack;

// Get the frame halfway through the video
const sink = new VideoSampleSink(videoTrack);
const frame = await sink.getSample(duration / 2);

// Loop over all frames of the video
for await (const frame of sink.samples()) {
  // ...
}

Learn more about Mediabunny.

Mediabunny usage in supersplat.

I found Mediabunny being imported in supersplat/src/render.ts.

import { 
  BufferTarget, 
  EncodedPacket, 
  EncodedVideoPacketSource, 
  MkvOutputFormat, 
  MovOutputFormat, 
  Mp4OutputFormat, 
  Output, 
  StreamTarget, 
  WebMOutputFormat 
} from 'mediabunny';

You might be wondering what Supersplat is. Well, remember how I pick a trending repo every week and share the patterns and packages used? Yeah, Superslat is listed as one of the trending repos.

Superslat is a 3D Gaussian Splat Editor.

superslat/render.ts has registerRenderEvents defined for the following events:

render.video
render.image
render.offscreen

About me:

Hey, my name is ramunarasinga. Email: ramunarasinga@gmail.com

Tired of AI slop?

I spent 3+ years studying OSS codebases and wrote 350+ articles on what makes them production-grade. I built an open source tool that reviews your PR against your existing codebase patterns..

Your codebase. Your patterns. Enforced.

Get started for free — thinkthroo.com.

References:

Error handling in Twenty codebase - part 1.0

Ramu Narasinga — Thu, 23 Apr 2026 15:30:00 +0000

Inspired by BulletProof React, I applied its codebase architecture concepts to the Umami codebase.

You might be wondering:

What is Twenty?
What is error handling?

Let’s find out.

What is Twenty?

Twenty is an open-source CRM that gives you the building blocks to create exactly what your business needs.

Main Features

Calendar & Emails: Sync your mailbox and calendar to see all communications on your CRM records. Learn more.
Data Model: Create custom objects and fields to match your unique business processes. Explore.
Data Migration: Import and export your data via CSV or API. Get started.
Views & Pipelines: Organize your data with table views, kanban boards, and sales pipelines. Discover.
Workflows: Automate your business processes and integrate with external tools. Build automations.
AI: Enhance your CRM with AI-powered features and agents. Explore AI.
Dashboards: Track performance with custom reports and visualizations. View dashboards.
Permissions & Access: Control who can view, edit, and manage your data with role-based permissions. Configure access.
Notes & Tasks: Create notes and tasks linked to your records for better collaboration.
API & Webhooks: Connect to other apps and build custom integrations. Start integrating.

I copied the above info from the Twenty documentation.

What is error handling?

If you take a look at Bulletproof React’s Error Handling guide, you will find the following sections:

We will find out how Twenty has implemented these error handlers in the next articles.

About me:

Hey, my name is Ramu Narasinga. Email: ramu.narasinga@gmail.com

Tired of AI slop?

I spent 3+ years studying OSS codebases and wrote 350+ articles on what makes them production-grade. I built an open source tool that reviews your PR against your existing codebase patterns.

Your codebase. Your patterns. Enforced.

Get started for free — thinkthroo.com

References:

MerkleDAG class in claude-context codebase.

Ramu Narasinga — Wed, 22 Apr 2026 15:30:00 +0000

In this article, we review MerkleDAG class. You will learn:

What is MerkleDAG?
MerkleDAG class in claude-context

Press enter or click to view image in full size

What is MerkleDAG?

A Merkle DAG is a DAG where each node has an identifier, and this is the result of hashing the node’s contents — any opaque payload carried by the node and the list of identifiers of its children — using a cryptographic hash function like SHA256. This brings some important considerations:

Merkle DAGs can only be constructed from the leaves, that is, from nodes without children. Parents are added after children because the children’s identifiers must be computed in advance to be able to link them.
Every node in a Merkle DAG is the root of a (sub)Merkle DAG itself, and this subgraph is contained in the parent DAG.
Merkle DAG nodes are immutable. Any change in a node would alter its identifier and thus affect all the ascendants in the DAG, essentially creating a different DAG.

DAG stands for Directed Acyclic Graphs.

Learn more about MerkleDAG.

MerkleDAG class in claude-context

MerkleDAG class in claude-context has the functions defined shown in the below image:

and has this declaration:

export class MerkleDAG {
    nodes: Map<string, MerkleDAGNode>;
    rootIds: string[];

But the real important question here is, where is this used? one of the applications of MerkleDAG is Git itself.

In the claude-context codebase, I saw the below reference to MerkleDAG in the README.

⚡ Incremental Indexing: Efficiently re-index only changed files using Merkle trees.

This MerkleDAG is instantiated in synchronizer.ts:

private buildMerkleDAG(fileHashes: Map<string, string>): MerkleDAG {
        const dag = new MerkleDAG();
        const keys = Array.from(fileHashes.keys());
        const sortedPaths = keys.slice().sort(); // Create a sorted copy

this buildMerkleDAG is called in checkForChanges method, this method name is aligned with what is mentioned in the README.

public async checkForChanges(): Promise<{ added: string[], removed: string[], modified: string[] }> {
    console.log('[Synchronizer] Checking for file changes...');

    const newFileHashes = await this.generateFileHashes(this.rootDir);
    const newMerkleDAG = this.buildMerkleDAG(newFileHashes);

    // Compare the DAGs
    const changes = MerkleDAG.compare(this.merkleDAG, newMerkleDAG);

    // If there are any changes in the DAG, we should also do a file-level comparison
    if (changes.added.length > 0 || changes.removed.length > 0 || changes.modified.length > 0) {
        console.log('[Synchronizer] Merkle DAG has changed. Comparing file states...');
        const fileChanges = this.compareStates(this.fileHashes, newFileHashes);

        this.fileHashes = newFileHashes;
        this.merkleDAG = newMerkleDAG;
        await this.saveSnapshot();

        console.log(`[Synchronizer] Found changes: ${fileChanges.added.length} added, ${fileChanges.removed.length} removed, ${fileChanges.modified.length} modified.`);
        return fileChanges;
    }

    console.log('[Synchronizer] No changes detected based on Merkle DAG comparison.');
    return { added: [], removed: [], modified: [] };
}

and this checkForChanges is called in core/context.ts

and this reindexByChange is invoked in syncCommand.ts, in VSCode extension.

About me:

Hey, my name is Ramu Narasinga. Email: ramu.narasinga@gmail.com

Tired of AI slop?

I spent 3+ years studying OSS codebases and wrote 350+ articles on what makes them production-grade. I built an open source tool that reviews your PR against your existing codebase patterns.

Your codebase. Your patterns. Enforced.

Get started for free — thinkthroo.com

References

AstCodeSplitter in claude-context codebase.

Ramu Narasinga — Mon, 20 Apr 2026 15:30:00 +0000

In this article, we review AstCodeSplitter class in claude-context codebase. You will learn:

What is Claude Context?
AstCodeSplitter class.
tree-sitter package.

What is Claude Context?

Claude Context is an MCP plugin that adds semantic code search to Claude Code and other AI coding agents, giving them deep context from your entire codebase.

🧠 Your Entire Codebase as Context: Claude Context uses semantic search to find all relevant code from millions of lines. No multi-round discovery needed. It brings results straight into the Claude’s context.

💰 Cost-Effective for Large Codebases: Instead of loading entire directories into Claude for every request, which can be very expensive, Claude Context efficiently stores your codebase in a vector database and only uses related code in context to keep your costs manageable.

Architecture

Below is the architecture from README.md.

I wanted to learn how the re-indexing is done, I found this in the README.

⚡ Incremental Indexing: Efficiently re-index only changed files using Merkle trees.

Learn more about Claude Context.

AstCodeSplitter class

AstCodeSplitter implements Splitter interface.

export class AstCodeSplitter implements Splitter {

and this interface is defined as shown below:

export interface Splitter {
    /**
     * Split code into code chunks
     * @param code Code content
     * @param language Programming language
     * @param filePath File path
     * @returns Array of code chunks
     */
    split(code: string, language: string, filePath?: string): Promise<CodeChunk[]>;

    /**
     * Set chunk size
     * @param chunkSize Chunk size
     */
    setChunkSize(chunkSize: number): void;

    /**
     * Set chunk overlap size
     * @param chunkOverlap Chunk overlap size
     */
    setChunkOverlap(chunkOverlap: number): void;
}

You will find these three functions defined in the AstSplitter class.

It also has the below private defined that are used in the interface methods implemented.

tree-sitter package

extractChunks function has its first parameter type as Parser.SyntaxNode. Parser is imported as shown below:

import Parser from 'tree-sitter';

So what’s tree-sitter? I read this npm package description and found this below example:

const Parser = require('tree-sitter');
const JavaScript = require('tree-sitter-javascript');

const parser = new Parser();
parser.setLanguage(JavaScript);

// parse some code:
const sourceCode = 'let x = 1; console.log(x);';
const tree = parser.parse(sourceCode);

// and inspect the syntax tree.

console.log(tree.rootNode.toString());

// (program
//   (lexical_declaration
//     (variable_declarator (identifier) (number)))
//   (expression_statement
//     (call_expression
//       (member_expression (identifier) (property_identifier))
//       (arguments (identifier)))))

const callExpression = tree.rootNode.child(1).firstChild;
console.log(callExpression);

// {
//   type: 'call_expression',
//   startPosition: {row: 0, column: 16},
//   endPosition: {row: 0, column: 30},
//   startIndex: 0,
//   endIndex: 30
// }

About me:

Hey, my name is Ramu Narasinga. Email: ramu.narasinga@gmail.com

Tired of AI slop?

I spent 3+ years studying OSS codebases and wrote 350+ articles on what makes them production-grade. I built an open source tool that reviews your PR against your existing codebase patterns.

Your codebase. Your patterns. Enforced.

Get started for free — thinkthroo.com

References

andrej-karpathy-skills, A single CLAUDE.md file to improve Claude Code behavior.

Ramu Narasinga — Thu, 16 Apr 2026 15:30:00 +0000

In this article, we review the repo, andrej-karpath-skills. You will learn:

Karpathy inspired claude code guidelines
Four principles

Karpathy inspired claude code guidelines

I found this repo on Github Trending and skimmed thru the repo to find these Karpathy inspired claude code guidelines. I read thru its README.md:

A single CLAUDE.md file to improve Claude Code behavior, derived from Andrej Karpathy's observations on LLM coding pitfalls.

The problems

Listed below is the problems mentioned in the README. These problems were from Andrej’s post:

“The models make wrong assumptions on your behalf and just run along with them without checking. They don’t manage their confusion, don’t seek clarifications, don’t surface inconsistencies, don’t present tradeoffs, don’t push back when they should.”

“They really like to overcomplicate code and APIs, bloat abstractions, don’t clean up dead code… implement a bloated construction over 1000 lines when 100 would do.”

“They still sometimes change/remove comments and code they don’t sufficiently understand as side effects, even if orthogonal to the task.”

I mean, I have personally faced these problems when writing code using AI. You say something and then interprets something else. While testing you realize the output is wrong and restart all over again.

There are four principles that address these problems.

Four principles

These four principles address the issues that were mentioned in Andrej’s post:

Think Before Coding
Simplicity First
Surgical Changes
Goal-Driven Execution

Learn more about these principles.

About me:

Hey, my name is Ramu Narasinga. Email: ramu.narasinga@gmail.com

Tired of AI slop?

I spent 3+ years studying OSS codebases and wrote 350+ articles on what makes them production-grade. I built an open source tool that reviews your PR against your existing codebase patterns.

Your codebase. Your patterns. Enforced.

Get started for free — thinkthroo.com

References

`sanitizeCredentials` function in Archon codebase.

Ramu Narasinga — Thu, 16 Apr 2026 15:00:00 +0000

In this article, we review sanitizeCredentials function in Archon codebase. You will learn:

What is Archon?
sanitizeCredentials function
sanitizeError function.

What is Archon?

Archon is a workflow engine for AI coding agents. Define multi-step development workflows in YAML — code review, bug fixes, feature implementation, testing — and run them with a single command.

It is an open-source harness builder for AI coding. Make AI coding deterministic and repeatable.

Learn more about Archon.

What it looks like?

Here’s an example of an Archon workflow that plans, implements in a loop until tests pass, gets your approval, then creates the PR:

# .archon/workflows/build-feature.yaml
nodes:
  - id: plan
    prompt: "Explore the codebase and create an implementation plan"

  - id: implement
    depends_on: [plan]
    loop:                                      # AI loop - iterate until done
      prompt: "Read the plan. Implement the next task. Run validation."
      until: ALL_TASKS_COMPLETE
      fresh_context: true                      # Fresh session each iteration

  - id: run-tests
    depends_on: [implement]
    bash: "bun run validate"                   # Deterministic - no AI

  - id: review
    depends_on: [run-tests]
    prompt: "Review all changes against the plan. Fix any issues."

  - id: approve
    depends_on: [review]
    loop:                                      # Human approval gate
      prompt: "Present the changes for review. Address any feedback."
      until: APPROVED
      interactive: true                        # Pauses and waits for human input

  - id: create-pr
    depends_on: [approve]
    prompt: "Push changes and create a pull request"

Tell your coding agent what you want, and Archon handles the rest:

You: Use archon to add dark mode to the settings page

Agent: I'll run the archon-idea-to-pr workflow for this.
       → Creating isolated worktree on branch archon/task-dark-mode...
       → Planning...
       → Implementing (task 1/4)...
       → Implementing (task 2/4)...
       → Tests failing - iterating...
       → Tests passing after 2 iterations
       → Code review complete - 0 issues
       → PR ready: https://github.com/you/project/pull/47

I picked this info from the Archon’s Github README.md.

sanitizeCredentials function

I found this function, sanitizeCredentials in the Archon/packages/core/src/utils/credential-sanitizer.ts and it is defined as below:

/**
 * Credential Sanitizer
 * Removes sensitive values from strings to prevent credential leaks
 */

const SENSITIVE_ENV_VARS = ['GH_TOKEN', 'GITHUB_TOKEN'];

function escapeRegExp(str: string): string {
  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

export function sanitizeCredentials(input: string): string {
  let result = input;

  for (const envVar of SENSITIVE_ENV_VARS) {
    const value = process.env[envVar];
    if (value && value.length > 0) {
      result = result.replace(new RegExp(escapeRegExp(value), 'g'), '[REDACTED]');
    }
  }

  // Catch any URL-embedded credentials we might have missed
  result = result.replace(/https:\/\/[^@\s]+@github\.com/g, '@github.com'">https://[REDACTED]@github.com');

  return result;
}

SENSITIVE_ENV_VARS is defined as an array containing the keys that need to be redacted.

sanitizeCredentials removes sensitive values from strings to prevent credential leaks. This function is straight forward but where this used and why?

If you just look under this function in the same, you will find sanitizeError defined.

sanitizeError function

sanitizeError is defined as shown below:

export function sanitizeError(error: Error): Error {
  const sanitized = new Error(sanitizeCredentials(error.message));
  if (error.stack) {
    sanitized.stack = sanitizeCredentials(error.stack);
  }
  return sanitized;
}

This redacts the sensitive info in the error message. Interesting. Where is this used? I always use symbols that pop up when you click on a variable/function name.

One such usage is found in packages/core/handlers/clone.ts:

try {
    await execFileAsync('git', ['clone', cloneUrl, targetPath]);
} catch (error) {
  const safeErr = sanitizeError(error as Error);
  throw new Error(`Failed to clone repository: ${safeErr.message}`);
}

About me:

Hey, my name is Ramu Narasinga. Email: ramu.narasinga@gmail.com

Tired of AI slop?

I spent 3+ years studying OSS codebases and wrote 350+ articles on what makes them production-grade. I built an open source tool that reviews your PR against your existing codebase patterns.

Your codebase. Your patterns. Enforced.

Get started for free — thinkthroo.com

References

skills folder in Langfuse codebase.

Ramu Narasinga — Fri, 10 Apr 2026 15:30:00 +0000

In this article, we review skills folder in Langsude codebase. You will learn:

vercel-react-best-practices
vercel-composition-patterns

Skills

I review skills in the OSS codebases to identify the best practices that go into defining the skills that are used in a codebase. When I write about skills, I tend to keep it to the meta and overview of the sections defined.

vercel-react-best-practices

This skill is defined in web/.agents/skills folder and it has the following metadata:

---
name: vercel-react-best-practices
description: "React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements."
license: MIT
metadata:
  author: vercel
  version: "1.0.0"
---

The description defined the following things:

When this skill should be used:

should be used when writing, reviewing, or refactoring React/Next.js code

2. When this skill should be triggered:

Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements

Usually, you can expect the rest of skills document elaborating on description in metadata.

There’s also rules folder where it has

rules/async-parallel.md
rules/bundle-barrel-imports.md

vercel-composition-patterns

This skill is defined in web/.agents/skills and it has the following metadata:

---
name: vercel-composition-patterns
description:
  React composition patterns that scale. Use when refactoring components with
  boolean prop proliferation, building flexible component libraries, or
  designing reusable APIs. Triggers on tasks involving compound components,
  render props, context providers, or component architecture. Includes React 19
  API changes.
license: MIT
metadata:
  author: vercel
  version: '1.0.0'
---

The description defined the following things:

When this skill should be used?

Use when refactoring components with boolean prop proliferation, etc., or
Building flexible component libraries or
Designing reusable APIs.

2. When this skill should be triggered?

Triggers on tasks involving compound components etc.,

Usually, you can expect the rest of skills document elaborating on description in metadata.

This skill also has rules folder:

rules/architecture-avoid-boolean-props.md
rules/state-context-interface.md

About me:

Hey, my name is Ramu Narasinga. Email: ramu.narasinga@gmail.com

Tired of AI slop?

I spent 3+ years studying OSS codebases and wrote 350+ articles on what makes them production-grade. I built an open source tool that reviews your PR against your existing codebase patterns.

Your codebase. Your patterns. Enforced.

Get started for free — thinkthroo.com

References

State management in Twenty codebase - Part 1.2

Ramu Narasinga — Wed, 08 Apr 2026 15:30:00 +0000

Inspired by BulletProof React, I applied its codebase architecture concepts to the Twenty codebase.

This article focuses only on the state management in Twenty codebase.

Why learn this pattern?

Let’s be honest, your useState code is probably a mess. Mine was too.

Look, we’ve all written this:

const [websites, setWebsites] = useState([]);

const addWebsite = async (data) => {
  const newWebsite = await api.post('/websites', data);
  setWebsites([...websites, newWebsite]); 
};

We all start the same way, useState for everything. Throw in Context API when passing props gets annoying. Works fine until your app grows.

Then you’re debugging why:

Your app is slow because state is everywhere
The UI shows old data after mutations
Clicking fast causes weird race conditions
You have to manually refresh data in 10 places

Production apps like Twenty don’t have these problems because they use different patterns.

Let me show you what I learned from studying their code.

Prerequisite

State management in Twenty codebase — Part 1.0
State management in Twenty codebase — Part 1.1

Approach

The approach we take is simple:

Pick a route, for example, {id}.twenty.com/settings/billing
Locate this route in Twenty codebase.
Review how the state is managed.
We repeat this process for 3+ pages to establish a common pattern, see if there’s any exceptions.

In this part 1.2, you will learn about the state management in the settings/billing route for a workspace. We will find out what libraries Twenty used, how the files are structured, how the data flows to manage its state.

I reviewed the billing route and I found that the following components give us a clear picture about the state management.

SettingsBilling.tsx

In this SettingsBilling.tsx component, currentWorkspace and isPlanLoaded are defined as shown below:

const currentWorkspace = useAtomStateValue(currentWorkspaceState);

const { isPlansLoaded } = usePlans();

Twenty uses Jotai to manage its state. Learn more about Jotai. We also reviewed this useAtomStateValue briefly in part 1.1.

If there is current workspace and isPlansLoaded, then SettingsBillingContent is shown

{currentWorkspace && isPlansLoaded ? <SettingsBillingContent /> : <></>}

usePlans.ts

import { useQuery } from '@apollo/client/react';
import { ListPlansDocument } from '~/generated-metadata/graphql';
import { isDefined } from 'twenty-shared/utils';

export const usePlans = () => {
  const { data, loading, error } = useQuery(ListPlansDocument);

  const isPlansLoaded = isDefined(data?.listPlans);

  const listPlans = () => {
    if (!data) throw new Error('plans is undefined');
    return data.listPlans;
  };

  return { loading, error, isPlansLoaded, listPlans };
};

usePlans.ts is a hook that fetches the plans and it returns the isPlansLoaded.

SettingsBillingContent.tsx

In the SettingsBillingContent.tsx, the following are defined:

SettingsBillingSubscriptionInfo
SettingsBillingCreditsSection

and there’s also other components defined using primitive components H2, Button so I did not list them here and we consider only above two for review.

SettingsBillingSubscriptionInfo

This above shown screenshot is from the Twenty billing, this component SettingsBillingSubscriptionInfo renders this info.

It has the following props:

<SettingsBillingSubscriptionInfo
  currentWorkspace={currentWorkspace}
  currentBillingSubscription={
    currentWorkspace.currentBillingSubscription
  }
/>

And this currentWorkspace is defined as follows:

const currentWorkspace = useAtomStateValue(currentWorkspaceState);

SettingsBillingCreditsSection

SettingsBillingCreditsSection is defined as shown below:

{hasNotCanceledCurrentSubscription &&
  currentWorkspace &&
  currentWorkspace.currentBillingSubscription &&
  isGetMeteredProductsUsageQueryLoaded && (
  <SettingsBillingCreditsSection
    currentBillingSubscription={
      currentWorkspace.currentBillingSubscription
    }
  />
)}

isGetMeteredProductsUsageQueryLoaded is defined as shown below:

const { isGetMeteredProductsUsageQueryLoaded } =
    useGetWorkflowNodeExecutionUsage();

About me:

Hey, my name is Ramu Narasinga. Email: ramu.narasinga@gmail.com

Tired of AI slop?

I spent 3+ years studying OSS codebases and wrote 350+ articles on what makes them production-grade. I built an open source tool that reviews your PR against your existing codebase patterns.

Your codebase. Your patterns. Enforced.

Get started for free — thinkthroo.com

References

TypeBox, a JSON schema type builder

Ramu Narasinga — Tue, 07 Apr 2026 15:30:00 +0000

In this article, we review TypeBox. You will learn:

What is TypeBox?
TypeBox usage in pi-mono codebase

What is TypeBox?

TypeBox is a JSON schema type builder with static type resolution for TypeScript. Below is an usage example:

import Type from 'typebox'

const T = Type.Object({                     // const T = {
  x: Type.Number(),                         //   type: 'object',
  y: Type.Number(),                         //   properties: {
  z: Type.Number()                          //     x: { type: 'number' },
})                                          //     y: { type: 'number' },
                                            //     z: { type: 'number' }
                                            //   },
                                            //   required: ['x', 'y', 'z']
                                            // }

type T = Type.Static<typeof T>              // type T = {
                                            //   x: number,
                                            //   y: number,
                                            //   z: number
                                            // }

TypeBox is a runtime type system that creates in-memory JSON Schema objects that infer as TypeScript types. The schematics produced by this library are designed to match the static type checking rules of the TypeScript compiler. TypeBox offers a unified type system that can be statically checked by TypeScript and validated at runtime using standard JSON Schema.

This library is designed to allow JSON Schema to compose similar to how types compose within TypeScript’s type system. It can be used as a simple tool to build up complex schematics or integrated into REST and RPC services to help validate data received over the wire.

Learn more about TypeBox.

TypeBox usage in pi-mono codebase

I found TypeBox references in pi-mono codebase. pi-mono is an AI agent toolkit providing coding agent CLI, unified LLM API, TUI & web UI libraries, Slack bot, vLLM pods

agent/types

In the agent/types.ts, I found some references:

...
import type { Static, TSchema } from "@sinclair/typebox";
...
/** Tool definition used by the agent runtime. */
export interface AgentTool<TParameters extends TSchema = TSchema, TDetails = any> extends Tool<TParameters> {
 /** Human-readable label for UI display. */
 label: string;
 /**
  * Optional compatibility shim for raw tool-call arguments before schema validation.
  * Must return an object that matches `TParameters`.
  */
 prepareArguments?: (args: unknown) => Static<TParameters>;
 /** Execute the tool call. Throw on failure instead of encoding errors in `content`. */
 execute: (
  toolCallId: string,
  params: Static<TParameters>,
  signal?: AbortSignal,
  onUpdate?: AgentToolUpdateCallback<TDetails>,
 ) => Promise<AgentToolResult<TDetails>>;
}

coding-agent/core/extensions/types.ts

/**
 * Tool definition for registerTool().
 */
export interface ToolDefinition<TParams extends TSchema = TSchema, TDetails = unknown, TState = any> {
 /** Tool name (used in LLM tool calls) */
 name: string;
 /** Human-readable label for UI */
 label: string;
 /** Description for LLM */
 description: string;
 /** Optional one-line snippet for the Available tools section in the default system prompt. Custom tools are omitted from that section when this is not provided. */
 promptSnippet?: string;
 /** Optional guideline bullets appended to the default system prompt Guidelines section when this tool is active. */
 promptGuidelines?: string[];
 /** Parameter schema (TypeBox) */
 parameters: TParams;

 /** Optional compatibility shim to prepare raw tool call arguments before schema validation. Must return an object conforming to TParams. */
 prepareArguments?: (args: unknown) => Static<TParams>;

 /** Execute the tool. */
 execute(
  toolCallId: string,
  params: Static<TParams>,
  signal: AbortSignal | undefined,
  onUpdate: AgentToolUpdateCallback<TDetails> | undefined,
  ctx: ExtensionContext,
 ): Promise<AgentToolResult<TDetails>>;

 /** Custom rendering for tool call display */
 renderCall?: (args: Static<TParams>, theme: Theme, context: ToolRenderContext<TState, Static<TParams>>) => Component;

 /** Custom rendering for tool result display */
 renderResult?: (
  result: AgentToolResult<TDetails>,
  options: ToolRenderResultOptions,
  theme: Theme,
  context: ToolRenderContext<TState, Static<TParams>>,
 ) => Component;
}

TSchema here is a generic type.

About me:

Hey, my name is Ramu Narasinga. Email: ramu.narasinga@gmail.com

Tired of AI slop?

I spent 3+ years studying OSS codebases and wrote 350+ articles on what makes them production-grade. I built an open source tool that reviews your PR against your existing codebase patterns.

Your codebase. Your patterns. Enforced.

Get started for free — thinkthroo.com

References

mom, a Slack bot powered by an LLM, in pi-mono codebase.

Ramu Narasinga — Tue, 07 Apr 2026 13:30:00 +0000

In this article, we review mom (Master Of Mischief). You will learn:

What is mom?
Features

What is mom?

A Slack bot powered by an LLM that can execute bash commands, read/write files, and interact with your development environment. Mom is self-managing. She installs her own tools, programs CLI tools (aka “skills”) she can use to help with your workflows and tasks, configures credentials, and maintains her workspace autonomously.

Features

Minimal by Design: Turn mom into whatever you need. She builds her own tools without pre-built assumptions
Self-Managing: Installs tools (apk, npm, etc.), writes scripts, configures credentials. Zero setup from you
Slack Integration: Responds to @mentions in channels and DMs
Full Bash Access: Execute any command, read/write files, automate workflows
Docker Sandbox: Isolate mom in a container (recommended for all use)
Persistent Workspace: All conversation history, files, and tools stored in one directory you control
Working Memory & Custom Tools: Mom remembers context across sessions and creates workflow-specific CLI tools (aka “skills”) for your tasks
Thread-Based Details: Clean main messages with verbose tool details in threads

Check out the slack app setup.

I also looked into its source code and found this below function that has core features:

function createSlackContext(event: SlackEvent, slack: SlackBot, state: ChannelState, isEvent?: boolean) {

  message: {
   text: event.text,
   rawText: event.text,
   user: event.user,
   userName: user?.userName,
   channel: event.channel,
   ts: event.ts,
   attachments: (event.attachments || []).map((a) => ({ local: a.local })),
  },
  channelName: slack.getChannel(event.channel)?.name,
  store: state.store,
  channels: slack.getAllChannels().map((c) => ({ id: c.id, name: c.name })),
  users: slack.getAllUsers().map((u) => ({ id: u.id, userName: u.userName, displayName: u.displayName })),

  respond: async (text: string, shouldLog = true) => {
   ...
  },

  replaceMessage: async (text: string) => {
   ...
  },

  respondInThread: async (text: string) => {
   ...
  },

  setTyping: async (isTyping: boolean) => {
   ...
  },

  uploadFile: async (filePath: string, title?: string) => {
   await slack.uploadFile(event.channel, filePath, title);
  },

  setWorking: async (working: boolean) => {
   ...
  },

  deleteMessage: async () => {
   ...
  },

}

This is in packages/mom/src/main.ts.

About me:

Hey, my name is Ramu Narasinga. Email: ramu.narasinga@gmail.com

Tired of AI slop?

I spent 3+ years studying OSS codebases and wrote 350+ articles on what makes them production-grade. I built an open source tool that reviews your PR against your existing codebase patterns.

Your codebase. Your patterns. Enforced.

Get started for free — thinkthroo.com

References

State management in Twenty codebase — Part 1.1

Ramu Narasinga — Sat, 04 Apr 2026 15:30:00 +0000

Inspired by BulletProof React, I applied its codebase architecture concepts to the Twenty codebase.

This article focuses only on the state management in Twenty codebase.

Prerequisite

State management in Twenty codebase — Part 1.0

Approach

The approach we take is simple:

Pick a route, for example, {id}.twenty.com/settings/profile
Locate this route in Twenty codebase.
Review how the state is managed.
We repeat this process for 3+ pages to establish a common pattern, see if there’s any exceptions.

In this part 1.1, you will learn about the state management in the settings/general route for a workspace. We will find out what libraries Twenty used, how the files are structured, how the data flows to manage its state.

I reviewed the settings/profile route, I found that the following components give us a clear picture about the state management.

Please note that there are other components in this SettingsProfile component that make up the below route, but we are analyzing 3 components in this route.

SettingsProfile

SettingsProfile.tsx has 98LOC and uses the following components to render the page.

WorkspaceMemberPictureUploader
NameFields
EmailField
SettingsCard
SetOrChangePassword
DeleteAccount

These are individual components that are rendered in this /profile page.

WorkspaceMemberPictureUploader

WorkspaceMemberPictureUploader.tsx has 144LOC. This handles picture upload for the workspace.

The following code handles uploading the file:

...
const [uploadPicture] = useMutation(
  UploadWorkspaceMemberProfilePictureDocument,
);

const { updateOneRecord } = useUpdateOneRecord();
...
const handleUpload = async (file: File) => {
    if (isUndefinedOrNull(file) || !canEdit) {
      return;
    }

    const controller = new AbortController();
    setUploadController(controller);
    setIsUploading(true);
    setErrorMessage(null);

    let newAvatarUrl: string | null = null;
    try {
      const { data } = await uploadPicture({
        variables: { file },
        context: {
          fetchOptions: {
            signal: controller.signal,
          },
        },
      });

      const signedFile = data?.uploadWorkspaceMemberProfilePicture;
      if (!isDefined(signedFile)) {
        throw new Error('Avatar upload failed');
      }

      await updateOneRecord({
        objectNameSingular: CoreObjectNameSingular.WorkspaceMember,
        idToUpdate: workspaceMemberId,
        updateOneRecordInput: { avatarUrl: signedFile.url },
      });

      newAvatarUrl = signedFile.url;

      if (isEditingSelf && isDefined(currentWorkspaceMember)) {
        setCurrentWorkspaceMember({
          ...currentWorkspaceMember,
          avatarUrl: newAvatarUrl,
        });
      }

      if (isDefined(onAvatarUpdated)) {
        onAvatarUpdated(newAvatarUrl);
      }

      setUploadController(null);
      setErrorMessage(null);
    } catch (error) {
      const message =
        error instanceof Error ? error.message : t`Failed to upload picture`;
      setErrorMessage(t`An error occurred while uploading the picture.`);
      enqueueErrorSnackBar({ message });
    } finally {
      setIsUploading(false);
    }
  };

Once the upload is complete, there’s a check if the file exists. So how is the state managed here?

const [currentWorkspaceMember, setCurrentWorkspaceMember] = useAtomState(
  currentWorkspaceMemberState,
);
...
newAvatarUrl = signedFile.url;

if (isEditingSelf && isDefined(currentWorkspaceMember)) {
  setCurrentWorkspaceMember({
    ...currentWorkspaceMember,
    avatarUrl: newAvatarUrl,
  });
}

When you use setCurrentWorkspaceMember, this state is also available in other parts of your codebase because Twenty uses Jotai to manage state and useAtomState is a hook defined in jotai/hooks/useAtomState.

NameFields

Let’s find out how the NameFields are updated. You will find the below code in NameFields.tsx

const [firstName, setFirstName] = useState(
    currentWorkspaceMember?.name?.firstName ?? '',
  );
  const [lastName, setLastName] = useState(
    currentWorkspaceMember?.name?.lastName ?? '',
  );

  const { updateOneRecord } = useUpdateOneRecord();

  // TODO: Enhance this with react-web-hook-form (https://www.react-hook-form.com)
  const debouncedUpdate = useDebouncedCallback(async () => {
    try {
      if (!currentWorkspaceMember?.id) {
        throw new Error('User is not logged in');
      }

      if (autoSave) {
        await updateOneRecord({
          objectNameSingular: CoreObjectNameSingular.WorkspaceMember,
          idToUpdate: currentWorkspaceMember?.id,
          updateOneRecordInput: {
            name: {
              firstName: firstName,
              lastName: lastName,
            },
          },
        });

        setCurrentWorkspaceMember({
          ...currentWorkspaceMember,
          name: {
            firstName,
            lastName,
          },
        });
      }
    } catch (error) {
      logError(error);
    }
  }, 500);

useUpdateOneRecord is commonly used here. There is a debounced update to the name fields, first and last names. The state is set again using the setCurrentWorkspaceMember defined as shown below:

const [currentWorkspaceMember, setCurrentWorkspaceMember] = useAtomState(
  currentWorkspaceMemberState,
);

This is a consistent pattern that can be reused in the other components within this route or in other settings related routes.

About me:

Hey, my name is Ramu Narasinga. Email: ramu.narasinga@gmail.com

Tired of AI slop?

I spent 3+ years studying OSS codebases and wrote 350+ articles on what makes them production-grade. I built an open source tool that reviews your PR against your existing codebase patterns.

Your codebase. Your patterns. Enforced.

Get started for free — thinkthroo.com