DEV Community: tage cc

I open sourced memduck, a self-hosted AI memory workspace

tage cc — Thu, 21 May 2026 11:19:33 +0000

I built memduck because useful context keeps disappearing across links, copied text, screenshots, and chat messages.

Most of my actual working memory is not in one clean notes app. It is spread across browser tabs, saved links, snippets, screenshots, Telegram messages, and random text I copied while researching something. Later, when I want to ask a question about that material, I usually have to reconstruct the context manually.

memduck is my attempt at a small, self-hosted workspace for that problem.

GitHub: https://github.com/tageecc/memduck

What it does

memduck lets you save material from browser pages, pasted text, screenshots, and chat channels into a local memory workspace. Then you can ask questions against the saved material and trace answers back to the original sources.

The current version includes:

a Next.js workspace for asking and managing saved memory
local SQLite storage and local file assets
browser extension capture
channel configuration for browser, Telegram, DingTalk, Slack, Discord, Feishu, WhatsApp, and webhook-style inputs
model/provider configuration in the UI
background compilation for summaries, topics, embeddings, and retrieval data

Why self-hosted

I wanted this to be closer to a personal memory engine than another hosted knowledge app. The goal is to keep the runtime simple enough to inspect and run locally, while still making AI retrieval useful.

It is still early, but it is already useful for the workflow I care about: save context first, ask later, and keep the source trail visible.

Try it

npm install -g memduck@latest
memduck

Or from source:

git clone https://github.com/tageecc/memduck.git
cd memduck
pnpm install
pnpm memduck dev

If you care about local-first tools, personal knowledge workflows, or AI memory with source-backed answers, I would like feedback.

I open sourced memduck, a self-hosted AI memory workspace

tage cc — Thu, 21 May 2026 07:35:30 +0000

I built memduck because useful context keeps disappearing across links, copied text, screenshots, and chat messages.

memduck is my attempt at a small, self-hosted workspace for that problem.

GitHub: https://github.com/tageecc/memduck

What it does

The current version includes:

a Next.js workspace for asking and managing saved memory
local SQLite storage and local file assets
browser extension capture
channel configuration for browser, Telegram, DingTalk, Slack, Discord, Feishu, WhatsApp, and webhook-style inputs
model/provider configuration in the UI
background compilation for summaries, topics, embeddings, and retrieval data

Why self-hosted

It is still early, but it is already useful for the workflow I care about: save context first, ask later, and keep the source trail visible.

Try it

npm install -g memduck@latest
memduck

Or from source:

git clone https://github.com/tageecc/memduck.git
cd memduck
pnpm install
pnpm memduck dev

If you care about local-first tools, personal knowledge workflows, or AI memory with source-backed answers, I would like feedback.

I open sourced memduck: a self-hosted AI memory workspace

tage cc — Wed, 20 May 2026 14:25:38 +0000

I open sourced memduck today.

It is a self-hosted AI memory workspace for the things that usually disappear across browser tabs, copied notes, screenshots, and chat channels.

The idea is simple: save useful material once, then ask against your own memory later with citations back to the original source.

Why I built it

Most note tools make it easy to save more, but retrieval still gets messy.

I wanted something closer to a personal memory engine:

keep the raw source so I can always go back
turn long links or pasted text into reusable memory cards
capture from browser and chat channels
ask questions only against material I actually saved
keep model providers and channel setup visible in the UI

What it does now

memduck currently includes:

a Next.js web workspace
local SQLite storage
browser extension capture
Telegram runtime
DingTalk / Slack / Discord / Feishu / WhatsApp-style channel adapters
configurable model providers such as OpenAI, Anthropic, Gemini, Ollama, and OpenAI-compatible profiles
grounded Q&A with citations over saved memory

It is still early, but the core loop is already there: capture, compile, retrieve, ask.

Who it is for

This is mainly for developers, builders, and researchers who want a self-hosted place to keep source-backed memory instead of sending every note into another hosted AI app.

If you care about local control, explicit provider setup, and source traceability, it may be worth trying.

GitHub: https://github.com/tageecc/memduck

Building a Desktop Control Center for OpenClaw with Tauri and Rust

tage cc — Sat, 28 Mar 2026 03:13:29 +0000

I've been working with OpenClaw for managing AI agents, and I kept running into the same problems: juggling multiple instances for different environments, manually editing openclaw.json, and lacking visibility into token usage and costs.

So I built Pond — a desktop app that sits on top of OpenClaw and solves these issues.

Screenshots (from the repo README)

What it does

Pond is a control center that lets you:

Manage multiple OpenClaw instances on one machine (like dev/test/prod environments)
Orchestrate team collaboration with a built-in task state machine (open → claimed → done/failed)
Monitor in real-time — tokens, costs, sessions, system resources
Edit configs visually instead of wrestling with JSON files

Each instance runs independently with its own Gateway process, port, config, and team data.

Technical stack

I chose Tauri 2 instead of Electron because I wanted native performance and smaller binaries. The backend is Rust:

tokio::process for managing Gateway subprocesses
fs4 for cross-platform file locks (team data concurrency)
Native WebSocket plugin for bidirectional streaming with OpenClaw

The frontend is React 19 + TypeScript + Zustand for state, with Radix UI components and TailwindCSS.

The team collaboration layer

One unique feature is the collaboration workflow. You define roles in agents.list (a Leader and executors), and Pond manages a task lifecycle:

Leader creates tasks (state: open)
Executors claim tasks (state: claimed)
Executors mark them done or failed with reasons
Real-time notifications pushed via WebSocket to relevant roles

There's a built-in pond-team skill that orchestrates this entire workflow without manual coordination.

What's missing

It's still early (v1.0.4), and there are gaps:

No cloud sync for configs yet
No mobile clients (only desktop)
Skill marketplace is planned but not built

But the core features work, and it's fully open source.

Try it

Installers for macOS (Intel + Apple Silicon), Windows, and Linux are on the GitHub releases page:

👉 https://github.com/tageecc/pond

If you're building with OpenClaw, I'd appreciate feedback — especially around what metrics or workflows you need most.

Built a Browser Tool to Stop Using Photoshop for Theme Comparisons

tage cc — Fri, 27 Mar 2026 15:24:34 +0000

How I used Canvas to create diagonal split screenshots in one hour

The Problem

While working on my project docs, I wanted to show light/dark theme comparisons. Not just two screenshots side by side—I wanted that nice diagonal split effect.

My options:

Photoshop - tedious to repeat every time
Online tools - mostly paid, and you have to upload images
Manual stitching - doesn't look professional

Couldn't find a good free tool, so I built one.

What I Built

Try it: https://tageecc.github.io/theme-merge/

Features:

Upload two images (light/dark theme)
Diagonal split with adjustable angle
Paste from clipboard (Ctrl+V)
Everything runs locally in your browser
Free and open source

Tech Stack

Kept it simple:

HTML5 Canvas for image manipulation
Vanilla JavaScript (no frameworks)
GitHub Pages for hosting

Goal was to make something you can just open and use. No install, no signup.

How It Works

The Core Algorithm

The diagonal split uses Canvas's clip() method:

function drawMergedImage() {
  // Draw dark theme as base
  ctx.drawImage(darkImg, 0, 0);

  // Save state
  ctx.save();

  // Create diagonal clipping path
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(canvas.width, 0);
  ctx.lineTo(x1, y1);  // rotated endpoints
  ctx.lineTo(x2, y2);
  ctx.lineTo(0, canvas.height);
  ctx.closePath();

  // Apply clip and draw light theme
  ctx.clip();
  ctx.drawImage(lightImg, 0, 0);

  ctx.restore();
}

Angle Calculation

My math isn't great, so this part took some trial and error:

const angle = parseFloat(angleSlider.value);
const angleRad = (angle * Math.PI) / 180;
const diagonal = Math.sqrt(canvas.width ** 2 + canvas.height ** 2);
const baseAngle = Math.atan2(canvas.height, canvas.width);

// Calculate rotated diagonal endpoints
const x1 = canvas.width + diagonal * Math.cos(baseAngle + angleRad);
const y1 = -diagonal * Math.sin(baseAngle + angleRad);
const x2 = -diagonal * Math.cos(baseAngle + angleRad);
const y2 = canvas.height + diagonal * Math.sin(baseAngle + angleRad);

Formula looks complicated, but the logic is: base diagonal + angle offset = new diagonal position.

UX Improvements

Started with basic file upload, then added enhancements:

Click left/right to upload

Detect which side of the diagonal was clicked:

function isPointOnLightSide(x, y) {
  const centerX = canvas.width / 2;
  const centerY = canvas.height / 2;

  const dx = x - centerX;
  const dy = y - centerY;

  // Rotate coordinate system
  const rotatedX = dx * Math.cos(-angleRad) - dy * Math.sin(-angleRad);
  const rotatedY = dx * Math.sin(-angleRad) + dy * Math.cos(-angleRad);

  return rotatedY < rotatedX * baseSlope;
}

Clipboard paste

Added this later because saving screenshots then uploading was annoying:

document.addEventListener('paste', (e) => {
  const items = e.clipboardData?.items;

  for (let i = 0; i < items.length; i++) {
    if (items[i].type.startsWith('image/')) {
      const file = items[i].getAsFile();
      loadImageToSide(file, determineSide());
      break;
    }
  }
});

Now you can screenshot and Ctrl+V directly. Much faster.

Gotchas

Issue 1: Canvas Size

Initially set canvas size via CSS. Images came out blurry. Turns out:

CSS controls display size
width/height attributes control actual resolution

Issue 2: Large Image Performance

4K images made pixel-by-pixel calculation slow. Solution: use Canvas's native clip() and let the browser handle it. Much faster.

Issue 3: Mobile Responsiveness

Canvas would overflow on mobile. Added max-width/height CSS:

canvas {
  max-width: 90vw;
  max-height: 70vh;
  width: auto;
  height: auto;
}

Scales display while keeping original resolution for download.

Use Cases

Perfect for:

Documentation - showing feature differences
Portfolios - displaying design work
Blog posts - creating comparison images
READMEs - showcasing project themes

What's Next

Current version works for my needs, but could add:

Vertical split mode
More export formats (JPG, WebP)
Batch processing
Preset angle templates

Try It Out

Live demo: https://tageecc.github.io/theme-merge/

Source code: https://github.com/tageecc/theme-merge

Took about an hour to build, less than 500 lines of code. Canvas clip() works really well for this.

If you need something similar, feel free to fork and modify. Issues and PRs welcome!

What would you add?

Have ideas for features? Drop a comment below or open an issue on GitHub!

Originally published on my blog. Follow me for more web dev tips and tools.

Tags: #webdev #javascript #canvas #opensource #tools