<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Deno</title>
    <description>The latest articles on DEV Community by Deno (@denoby).</description>
    <link>https://dev.to/denoby</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4025328%2Ff0165352-ea58-4607-924e-03955ed4c827.jpg</url>
      <title>DEV Community: Deno</title>
      <link>https://dev.to/denoby</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/denoby"/>
    <language>en</language>
    <item>
      <title>I got tired of alt-tabbing to an IDE to see what Claude Code changed, so I built terminal overlays for it</title>
      <dc:creator>Deno</dc:creator>
      <pubDate>Sat, 11 Jul 2026 15:42:08 +0000</pubDate>
      <link>https://dev.to/denoby/i-got-tired-of-alt-tabbing-to-an-ide-to-see-what-claude-code-changed-so-i-built-terminal-overlays-3n3g</link>
      <guid>https://dev.to/denoby/i-got-tired-of-alt-tabbing-to-an-ide-to-see-what-claude-code-changed-so-i-built-terminal-overlays-3n3g</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fnlscj13yu5vmeagjuw39.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fnlscj13yu5vmeagjuw39.gif" alt="familiar — a quick tour of the overlays" width="800" height="516"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Claude Code moved my coding into the terminal. But my &lt;em&gt;reviewing&lt;/em&gt; didn't move with it.&lt;/p&gt;

&lt;p&gt;Every time the agent finished a task, I had two options: squint at &lt;code&gt;git diff&lt;/code&gt; in a pager, or alt-tab to an IDE just to read the changes — in a project the agent was working on, not me. And with a few sessions running in parallel across projects, getting back to one meant remembering which folder it lives in, &lt;code&gt;cd&lt;/code&gt;-ing there, and running &lt;code&gt;claude --resume&lt;/code&gt; by hand.&lt;/p&gt;

&lt;p&gt;So I built &lt;strong&gt;familiar&lt;/strong&gt; — three full-screen overlays for the &lt;a href="https://sw.kovidgoyal.net/kitty/" rel="noopener noreferrer"&gt;kitty&lt;/a&gt; terminal, each on its own hotkey. Here's what they do and how the whole loop works.&lt;/p&gt;


&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://assets.dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/DenoBY" rel="noopener noreferrer"&gt;
        DenoBY
      &lt;/a&gt; / &lt;a href="https://github.com/DenoBY/familiar" rel="noopener noreferrer"&gt;
        familiar
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      Keyboard-driven kitty overlays for an AI-agent workflow: a Claude Code session manager, a git reviewer, and a log browser.
    &lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="ltag-github-body"&gt;
    
&lt;div id="readme" class="md"&gt;&lt;div class="markdown-heading"&gt;
&lt;h1 class="heading-element"&gt;familiar&lt;/h1&gt;
&lt;/div&gt;
&lt;p&gt;Claude Code writes the code in your terminal — familiar gives that terminal the
missing IDE half. Three full-screen &lt;a href="https://sw.kovidgoyal.net/kitty/" rel="nofollow noopener noreferrer"&gt;kitty&lt;/a&gt;
overlays, one hotkey each: review everything the agent just changed in an
IDE-grade diff and send line comments straight back into the chat; see all your
sessions live — which agent is busy, which is waiting for your permission — and
resume, fork or spin up a worktree in a keystroke; walk the git history the same
way. Pure Python standard library plus vendored Pygments for syntax
highlighting — nothing to install. macOS only.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;A &lt;em&gt;familiar&lt;/em&gt; is a helper spirit in a cat's shape — fitting for a set of kitty
kittens that tend your coding agents.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;&lt;a href="https://github.com/DenoBY/familiar/README.md" rel="noopener noreferrer"&gt;English&lt;/a&gt; · &lt;a href="https://github.com/DenoBY/familiar/README.ru.md" rel="noopener noreferrer"&gt;Русский&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Each kitten is a full-screen overlay opened by a hotkey:&lt;/p&gt;
&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Kitten&lt;/th&gt;
&lt;th&gt;Hotkey&lt;/th&gt;
&lt;th&gt;What it does&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="https://github.com/DenoBY/familiar/wiki/Session" rel="noopener noreferrer"&gt;session&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;Cmd+Shift+S&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Browse and manage Claude Code sessions — resume, fork, continue, new session,&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;…&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/DenoBY/familiar" rel="noopener noreferrer"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;


&lt;h2&gt;
  
  
  The loop: review → comment → paste back
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;Cmd+Shift+R&lt;/code&gt; opens &lt;strong&gt;review&lt;/strong&gt; — a two-pane view of everything uncommitted: file tree with statuses on the left, syntax-highlighted unified diff on the right.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F15jp6dhzti4h8fxs06v6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F15jp6dhzti4h8fxs06v6.png" alt="review — two-pane diff with word-level highlights" width="800" height="516"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The parts that earn their keep daily:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Word-diff&lt;/strong&gt; — in a changed line, only the words that actually changed are highlighted. &lt;code&gt;int(raw_minutes)&lt;/code&gt; → &lt;code&gt;round(raw_minutes)&lt;/code&gt; reads instantly.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;⌥-click go-to-definition&lt;/strong&gt; — jump to where a symbol is defined without leaving the overlay, with a back stack (&lt;code&gt;⌃o&lt;/code&gt;). No LSP, no index — a context-aware resolver on top of &lt;code&gt;git grep&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Final-code view&lt;/strong&gt; — read the file as it will look after the merge, IDE-style, edits marked in the gutter.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Line comments → markdown.&lt;/strong&gt; This is the actual loop-closer: you walk the diff, drop comments on lines, press &lt;code&gt;w&lt;/code&gt; — and everything lands in your clipboard as structured markdown. Paste into the Claude chat: "here are the review comments, fix them." Done.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;When you don't need a full review — just pointing the agent somewhere — &lt;code&gt;⌘⇧C&lt;/code&gt; copies an &lt;code&gt;@path/to/file.py#L42&lt;/code&gt; reference (or &lt;code&gt;#L42-58&lt;/code&gt; if you've selected a range with the mouse), the exact form Claude Code resolves. &lt;code&gt;⌘C&lt;/code&gt; on a file in the tree copies its &lt;code&gt;@path&lt;/code&gt;. No more "in that file, somewhere near that function".&lt;/p&gt;

&lt;h2&gt;
  
  
  Sessions: one list, all projects
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;Cmd+Shift+S&lt;/code&gt; opens &lt;strong&gt;session&lt;/strong&gt; — every Claude Code session across all projects in one place:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fzdp1ng5is7iqm4wa3lyd.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fzdp1ng5is7iqm4wa3lyd.png" alt="session — all sessions with live status" width="800" height="516"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The status is &lt;em&gt;live&lt;/em&gt; — busy / waiting for permission / background agent — read from Claude Code's process registry, not from file mtimes, so it's the truth, not a guess. From the list: resume, fork, start a session in a fresh git worktree, or preview the whole conversation as a rendered transcript — tool calls with output, file edits as coloured diffs, markdown answers:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fqwpbvflmgzbpbffvk4f4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fqwpbvflmgzbpbffvk4f4.png" alt="session — conversation preview" width="800" height="516"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  History: log
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;Cmd+Shift+L&lt;/code&gt; — commit list with a branch graph, and per-commit diffs on the same engine as review. &lt;code&gt;git fetch&lt;/code&gt; / &lt;code&gt;git push&lt;/code&gt; without leaving the overlay.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F738z4kwjt2z47dn3v62f.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F738z4kwjt2z47dn3v62f.png" alt="log — commit list with branch graph" width="800" height="516"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Under the hood
&lt;/h2&gt;

&lt;p&gt;Each overlay is a kitty &lt;em&gt;kitten&lt;/em&gt; — a Python TUI that kitty runs in an overlay window over your shell. That gave me a UI layer for free: real mouse events, pixel-precise clicks, instant startup. The whole thing is &lt;strong&gt;pure Python standard library&lt;/strong&gt; (Pygments is vendored for highlighting) — no pip install, no node_modules, nothing to break.&lt;/p&gt;

&lt;p&gt;A fun constraint: the terminal mouse protocol carries Shift/Alt/Ctrl but &lt;em&gt;never&lt;/em&gt; Cmd — which is why go-to-definition is ⌥-click, not ⌘-click.&lt;/p&gt;

&lt;h2&gt;
  
  
  Try it
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;brew tap denoby/familiar https://github.com/DenoBY/familiar
brew &lt;span class="nb"&gt;install &lt;/span&gt;denoby/familiar/familiar
familiar &lt;span class="nb"&gt;enable&lt;/span&gt; &lt;span class="nt"&gt;--kittens&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
      <category>ai</category>
      <category>opensource</category>
      <category>claude</category>
      <category>python</category>
    </item>
  </channel>
</rss>
