正在加载视频...

视频加载失败

introducing diffmap: a new document format for planning and reviewing agent code. The idea behind diffmap is letting you review the important design changes, not massive line diffs. "Write a diffmap spec for the changes on this branch. Use I've been working and iterating on this skill for more...

50,674 次观看 • 5 天前 •via X (Twitter)

35 条评论

Tanishq (tk) 的头像
Tanishq (tk)5 天前

diffmap gives your agent a ton of interactive diagrams and widgets to help collaboratively plan and review with you. one example is a services diagram. it shows you different involved services, along with state changes and data flow over time

Tanishq (tk) 的头像
Tanishq (tk)5 天前

other ones include mermaid diagram diffs and of course, callstack diffs. the skill includes guidance on when to use each diagram.

Tanishq (tk) 的头像
Tanishq (tk)5 天前

the agent writes the plan in phases. Each phase is meant to be a single commit. after an agent completes a phase, it shows a commit widget, with the most important files ordered. Clicking on a file opens a diff panel (powered by @pierrecomputer ofc!)

Tanishq (tk) 的头像
Tanishq (tk)5 天前

You're also able to add comments to the diffmap and copy it for your agent

Tanishq (tk) 的头像
Tanishq (tk)5 天前

Diffmap is open-source and MIT licensed! Check it out

joel 的头像
joel4 天前

looks interesting! a few thoughts on the video - we don’t find out what it actually is until about half way through. from the first frame i already knew what you were trying to address (by having skimmed the post). i would deliver the before and after payoff right away. the other alternative is to come up with a really good hook but then you have to keep attention for every second up to the reveal

Tanishq (tk) 的头像
Tanishq (tk)4 天前

yeah i had the same thought, agreed! will have to show payoff faster

Jake Jillen 的头像
Jake Jillen4 天前

Good stuff. The psuedo code with links to actual implementation is the best part I think. I used it immediately to try to understand the repo itself and it did a great job. Nicely done.

Tanishq (tk) 的头像
Tanishq (tk)4 天前

glad to hear! Lmk if you have any feedback

Neesh 🥭 的头像
Neesh 🥭5 天前

this is so sick

Morteza Hosseini 的头像
Morteza Hosseini4 天前

Nice idea

Pierrick Bignet 的头像
Pierrick Bignet4 天前

Excellent! Been using crit.md which has similar goal. Those tools are the key to unlock productivity.

José Miguel Arroyo 的头像
José Miguel Arroyo4 天前

Nice! I was wondering if you'd release it since last time I saw you talk about it. 👏

Tanishq (tk) 的头像
Tanishq (tk)4 天前

yes it took a long time to dial in and until I was happy with it. Still a WIP honestly, but I use it every day so that was a good enough bar

Luke Igel 的头像
Luke Igel4 天前

Amazing Tanisqh!

Rictus 🍥❁ 的头像
Rictus 🍥❁4 天前

Tried it on few PRs, great execution!

Antonio Bonet 的头像
Antonio Bonet4 天前

This is really cool

Tanishq (tk) 的头像
Tanishq (tk)4 天前

thanks! would love some feedback

Antonio Bonet 的头像
Antonio Bonet4 天前

Will see about trying it soon

Arshith varma 的头像
Arshith varma4 天前

This is crazy, I was working on the same idea and I was calling it replay.

Ivan Santos 的头像
Ivan Santos4 天前

This is awesome!

Doug Tabuchi 的头像
Doug Tabuchi4 天前

@bot save to my vault to check out

Calvin Cheng 的头像
Calvin Cheng4 天前

can you view this on mobile?

male manipulator (reformed) 的头像
male manipulator (reformed)4 天前

What do you use to make sure the map lines up with what’s in the code? Programmatic tools that check some of the mapping between the two would make it a lot easier to trust the info. (As long as it’s clear what precisely is verified by the tools, and what we’re taking on trust)

Tanishq (tk) 的头像
Tanishq (tk)4 天前

the diff panels are real code lines. everything else is written by the agent. the agent can reference the code lines in the diagrams, so you can audit whats in the diagram matches up with whats in the code, but realistically that’s not an issue

Mathew Chan 的头像
Mathew Chan4 天前

This is sweet! gonna try this.

Tanishq (tk) 的头像
Tanishq (tk)4 天前

lmk if you try it and have feedback!

Asmir 的头像
Asmir4 天前

this would be so good with a validator that checks every callstack node points at an actual changed hunk and flags files in the diff that no node covers lol

Tanishq (tk) 的头像
Tanishq (tk)4 天前

yes have thought about this! decided it was easier product ux to show a commit summary when implemented. but very interesting concept, just didnt know how to surface cleanly

Mark Maglana 的头像
Mark Maglana4 天前

Is the sharing feature being implemented via github gist a temporary thing? Would feel safer if it was something more restrictive.

Tanishq (tk) 的头像
Tanishq (tk)4 天前

agreed! yeah its temporary, ill implement something better if more people want it

Daniel Lenton 的头像
Daniel Lenton4 天前

Does the ✅ version of a phase usually look much like the plan? That gap feels like the bit most worth reviewing

Tanishq (tk) 的头像
Tanishq (tk)4 天前

basically, the plan is composed of phases (commit-length work). You review the plan, and (my preferred way of working) is going phase by phase, but you can also just decide to build the whole thing in one shot

Ricardo Vázquez 的头像
Ricardo Vázquez4 天前

cc @karrisaarinen ☝️

Tanishq (tk) 的头像
Tanishq (tk)4 天前

@karrisaarinen oh yeah saw their recent launch! Need to dig into it more

相关视频

Introducing /visual-plan - a skill to generate rich, visual plans for Claude Code and Codex. Plan mode in Claude Code is incredible. But I always find my eyes glazing over when it gives me this huge markdown essay in my terminal. I found I can make much better visual plans with reusable components. So I made a skill called `/visual-plan`. It generates plans as MDX with visual, interactive components. Diagrams, interactive API specs, schema design changes, annotated code, and even pan and zoomable wireframes. So for any UI work, you can look at a wireframe first, comment on it, iterate, and then have the agent work. I’ve found this to be a much more intuitive interface for reasoning about what the agent is doing. It’s somewhat inspired by that popular post about how HTML is better than Markdown. But HTML can be slow and verbose to write. And it doesn’t look good checked into a repo. This has really made me feel like humans and engineering are entering a new abstraction phase, where we reason about things at the plan level. As long as the plan is good, agents are getting more and more reliable at executing on it. Almost to the degree that we trust the C compiler to compile to assembly reliably. Plans are the new intermediate representation. I also made a skill for the reverse of this, called `/visual-recap`. After the agent works, it gives you a recap of everything it did. Same idea: wireframes, interactive API specs and diffs, schemas, annotated code, etc. So now when you’re reviewing what the agent did for you, or looking at a pull request of somebody else’s code, you can see a visual recap instead of just reading a wall of text. It’s all free and open source. You can find it on my GitHub. Will link to it in the reply because we all know how dumb these algorithms are with links.

Steve (Builder.io)

126,758 次观看 • 4 个月前