claude-multi 0.4.3 → 0.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-multi",
-  "version": "0.4.3",
+  "version": "0.5.1",
   "description": "Manage multiple Claude Code instances with different aliases and configurations",
   "type": "module",
   "bin": {
@@ -8,11 +8,18 @@
   },
   "scripts": {
     "build": "bun build src/cli.ts --outdir dist --target bun --format esm && chmod +x dist/cli.js",
+    "build:ink": "bun build src/ink/main.tsx --outfile dist/ink-cli.js --target bun --format esm && chmod +x dist/ink-cli.js",
     "dev": "bun run src/cli.ts",
+    "dev:ink": "bun run src/ink/main.tsx",
     "test": "bun test",
     "prepublishOnly": "bun run build",
     "test:binary": "./dist/cli.js",
-    "install:global": "bun link"
+    "install:global": "bun link",
+    "docs:dev": "astro dev",
+    "docs:build": "astro build",
+    "docs:preview": "astro preview",
+    "ci:docs:deploy": "gh workflow run deploy-docs.yml",
+    "ci:publish": "gh workflow run publish.yml -f version=$(node -p \"require('./package.json').version\")"
   },
   "keywords": [
     "claude",
@@ -27,7 +34,7 @@
     "type": "git",
     "url": "git+https://github.com/hmziqrs/claude-multi.git"
   },
-  "homepage": "https://github.com/hmziqrs/claude-multi#readme",
+  "homepage": "https://claudemutli.hmziq.xyz",
   "bugs": {
     "url": "https://github.com/hmziqrs/claude-multi/issues"
   },
@@ -37,12 +44,28 @@
   "devDependencies": {
     "@types/node": "^20.0.0",
     "@types/prompts": "^2.4.9",
-    "bun-types": "latest"
+    "@types/react": "^19.2.14",
+    "bun-types": "latest",
+    "execa": "^9.6.1",
+    "ink-testing-library": "^4.0.0",
+    "playwright": "^1.60.0",
+    "puppeteer": "^25.0.4",
+    "puppeteer-screen-recorder": "^3.0.6",
+    "react-devtools-core": "^7.0.1"
   },
   "dependencies": {
+    "@astrojs/starlight": "^0.39.2",
+    "@astrojs/tailwind": "^6.0.2",
+    "@inkjs/ui": "^2.0.0",
+    "@tailwindcss/vite": "^4.3.0",
+    "astro": "^6.3.3",
     "chalk": "^5.3.0",
     "commander": "^12.0.0",
-    "prompts": "^2.4.2"
+    "ink": "^7.0.2",
+    "prompts": "^2.4.2",
+    "react": "^19.2.6",
+    "tailwindcss": "^4.3.0",
+    "three": "^0.184.0"
   },
   "engines": {
     "node": ">=18.0.0"

package/public/favicon-animated.svg

@@ -0,0 +1,140 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="4 8 56 48" fill="none">
+  <defs>
+    <linearGradient id="brandGrad" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#d9f99d"/>
+      <stop offset="1" stop-color="#65a30d"/>
+    </linearGradient>
+
+    <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="2.5" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+
+    <filter id="shadow" x="-20%" y="-10%" width="140%" height="140%">
+      <feDropShadow dx="0" dy="2" stdDeviation="2.5" flood-color="#65a30d" flood-opacity=".35"/>
+    </filter>
+
+    <clipPath id="card-clip">
+      <rect x="20" y="16" width="28" height="22" rx="5"/>
+    </clipPath>
+
+    <linearGradient id="glare" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#fff" stop-opacity="0"/>
+      <stop offset=".48" stop-color="#fff" stop-opacity="0"/>
+      <stop offset=".5" stop-color="#fff" stop-opacity=".45"/>
+      <stop offset=".52" stop-color="#fff" stop-opacity="0"/>
+      <stop offset="1" stop-color="#fff" stop-opacity="0"/>
+      <animateTransform attributeName="gradientTransform" type="translate" values="-1.5 -1.5;1.5 1.5;-1.5 -1.5" dur="3s" repeatCount="indefinite"/>
+    </linearGradient>
+
+    <radialGradient id="ambientGlow" cx=".5" cy=".5" r=".6">
+      <stop offset="0" stop-color="#65a30d" stop-opacity=".25"/>
+      <stop offset="1" stop-color="#65a30d" stop-opacity="0"/>
+    </radialGradient>
+
+    <style>
+      @keyframes stack-back {
+        0%   { transform: translate(8px, 10px) rotate(6deg); opacity: 0; }
+        15%  { transform: translate(0, 0) rotate(0deg); opacity: 1; }
+        85%  { transform: translate(0, 0) rotate(0deg); opacity: 1; }
+        100% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
+      }
+      @keyframes stack-mid {
+        0%   { transform: translate(4px, 6px) rotate(4deg); opacity: 0; }
+        8%   { transform: translate(4px, 6px) rotate(4deg); opacity: 0; }
+        22%  { transform: translate(0, 0) rotate(0deg); opacity: 1; }
+        85%  { transform: translate(0, 0) rotate(0deg); opacity: 1; }
+        100% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
+      }
+      @keyframes stack-front {
+        0%   { transform: translate(0px, 3px) rotate(2deg); opacity: 0; }
+        16%  { transform: translate(0px, 3px) rotate(2deg); opacity: 0; }
+        30%  { transform: translate(0, 0) rotate(0deg); opacity: 1; }
+        85%  { transform: translate(0, 0) rotate(0deg); opacity: 1; }
+        100% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
+      }
+
+      @keyframes float-back {
+        0%, 100% { transform: translateY(0); }
+        50% { transform: translateY(-1.6px); }
+      }
+      @keyframes float-mid {
+        0%, 100% { transform: translateY(0); }
+        50% { transform: translateY(-1px); }
+      }
+      @keyframes float-front {
+        0%, 100% { transform: translateY(0); }
+        50% { transform: translateY(-0.5px); }
+      }
+
+      @keyframes pulse-green  { 0%, 100% { stroke-opacity: .5; } 50% { stroke-opacity: 1; } }
+      @keyframes pulse-purple { 0%, 100% { stroke-opacity: .6; } 50% { stroke-opacity: 1; } }
+      @keyframes pulse-blue   { 0%, 100% { stroke-opacity: .7; } 50% { stroke-opacity: 1; } }
+
+      @keyframes glow-pulse {
+        0%, 100% { opacity: .3; transform: scale(1); }
+        50% { opacity: .7; transform: scale(1.15); }
+      }
+
+      @keyframes blink {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0; }
+      }
+
+      .layer-back {
+        animation:
+          stack-back 5s ease-out infinite,
+          float-back 3s ease-in-out infinite 5s,
+          pulse-green 3s ease-in-out infinite;
+      }
+      .layer-mid {
+        animation:
+          stack-mid 5s ease-out infinite,
+          float-mid 3s ease-in-out infinite 5.3s,
+          pulse-purple 3s ease-in-out infinite .3s;
+      }
+      .layer-front {
+        animation:
+          stack-front 5s ease-out infinite,
+          float-front 3s ease-in-out infinite 5.6s,
+          pulse-blue 3s ease-in-out infinite .6s;
+      }
+      .ambient {
+        animation: glow-pulse 3s ease-in-out infinite;
+        transform-origin: center;
+      }
+      .cursor {
+        animation: blink 1s step-end infinite;
+      }
+    </style>
+  </defs>
+
+  <!-- ambient glow -->
+  <ellipse cx="34" cy="30" rx="24" ry="18" fill="url(#ambientGlow)" class="ambient"/>
+
+  <!-- card layers -->
+  <g class="layer-back">
+    <rect x="10" y="22" width="36" height="28" rx="5" fill="#0c0c0f" stroke="#6dd9a1" stroke-opacity=".6"/>
+  </g>
+  <g class="layer-mid">
+    <rect x="14" y="18" width="36" height="28" rx="5" fill="#0c0c0f" stroke="#c79bff" stroke-opacity=".7"/>
+  </g>
+  <g class="layer-front" filter="url(#shadow)">
+    <rect x="18" y="14" width="36" height="28" rx="5" fill="#0c0c0f" stroke="#7aa7ff" stroke-opacity=".8"/>
+  </g>
+
+  <!-- brand card -->
+  <g filter="url(#glow)">
+    <rect x="20" y="16" width="28" height="22" rx="5" fill="url(#brandGrad)"/>
+  </g>
+
+  <!-- glare sweep over card -->
+  <rect x="20" y="16" width="28" height="22" rx="5" fill="url(#glare)" clip-path="url(#card-clip)"/>
+
+  <!-- terminal prompt -->
+  <path d="M28 22 L34 27 L28 32" stroke="#0c0c0f" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+  <line x1="36" y1="32" x2="42" y2="32" stroke="#0c0c0f" stroke-width="2.4" stroke-linecap="round" class="cursor"/>
+</svg>

package/public/favicon.json

@@ -0,0 +1 @@
+{"v":"5.7.4","fr":30,"ip":0,"op":90,"w":64,"h":64,"nm":"claude-multi","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":0,"ty":4,"nm":"Icon","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[32,32,0]},"a":{"a":0,"k":[32,32,0]},"s":{"a":1,"k":[{"i":{"x":[0.4,0.4,0.4],"y":[1,1,1]},"o":{"x":[0.6,0.6,0.6],"y":[0,0,0]},"t":0,"s":[100,100,100],"e":[100,100,100]},{"i":{"x":[0.4,0.4,0.4],"y":[1,1,1]},"o":{"x":[0.6,0.6,0.6],"y":[0,0,0]},"t":36,"s":[100,100,100],"e":[104,104,100]},{"i":{"x":[0.4,0.4,0.4],"y":[1,1,1]},"o":{"x":[0.6,0.6,0.6],"y":[0,0,0]},"t":54,"s":[104,104,100],"e":[100,100,100]},{"i":{"x":[0.4,0.4,0.4],"y":[1,1,1]},"o":{"x":[0.6,0.6,0.6],"y":[0,0,0]},"t":72,"s":[100,100,100],"e":[104,104,100]},{"t":90,"s":[104,104,100]}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[36,28]},"p":{"a":0,"k":[28,36]},"r":{"a":0,"k":5}},{"ty":"fl","c":{"a":0,"k":[0.047058823529411764,0.047058823529411764,0.058823529411764705,1]},"o":{"a":0,"k":100},"r":1,"bm":0},{"ty":"st","c":{"a":0,"k":[0.42745098039215684,0.8509803921568627,0.6313725490196078,1]},"o":{"a":0,"k":60},"w":{"a":0,"k":1},"lc":2,"lj":2,"bm":0},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":[0.4,0.4],"y":[1,1]},"o":{"x":[0.6,0.6],"y":[0,0]},"t":0,"s":[-20,8],"e":[0,0]},{"t":12,"s":[0,0]}]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":1,"k":[{"i":{"x":[0.4],"y":[1]},"o":{"x":[0.6],"y":[0]},"t":0,"s":[0],"e":[100]},{"t":12,"s":[100]}]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}]},{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[36,28]},"p":{"a":0,"k":[32,32]},"r":{"a":0,"k":5}},{"ty":"fl","c":{"a":0,"k":[0.047058823529411764,0.047058823529411764,0.058823529411764705,1]},"o":{"a":0,"k":100},"r":1,"bm":0},{"ty":"st","c":{"a":0,"k":[0.7803921568627451,0.6078431372549019,1,1]},"o":{"a":0,"k":70},"w":{"a":0,"k":1},"lc":2,"lj":2,"bm":0},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":[0.4,0.4],"y":[1,1]},"o":{"x":[0.6,0.6],"y":[0,0]},"t":5,"s":[-20,8],"e":[0,0]},{"t":17,"s":[0,0]}]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":1,"k":[{"i":{"x":[0.4],"y":[1]},"o":{"x":[0.6],"y":[0]},"t":5,"s":[0],"e":[100]},{"t":17,"s":[100]}]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}]},{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[36,28]},"p":{"a":0,"k":[36,28]},"r":{"a":0,"k":5}},{"ty":"fl","c":{"a":0,"k":[0.047058823529411764,0.047058823529411764,0.058823529411764705,1]},"o":{"a":0,"k":100},"r":1,"bm":0},{"ty":"st","c":{"a":0,"k":[0.47843137254901963,0.6549019607843137,1,1]},"o":{"a":0,"k":80},"w":{"a":0,"k":1},"lc":2,"lj":2,"bm":0},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":[0.4,0.4],"y":[1,1]},"o":{"x":[0.6,0.6],"y":[0,0]},"t":10,"s":[-20,8],"e":[0,0]},{"t":22,"s":[0,0]}]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":1,"k":[{"i":{"x":[0.4],"y":[1]},"o":{"x":[0.6],"y":[0]},"t":10,"s":[0],"e":[100]},{"t":22,"s":[100]}]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}]},{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[28,22]},"p":{"a":0,"k":[34,27]},"r":{"a":0,"k":5}},{"ty":"gf","o":{"a":0,"k":100},"t":1,"bm":0,"g":{"p":2,"k":{"a":0,"k":[0,0.851,0.976,0.616,1,0.396,0.639,0.051]}},"s":{"a":0,"k":[20,16]},"e":{"a":0,"k":[48,38]}},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":[0.4,0.4],"y":[1,1]},"o":{"x":[0.6,0.6],"y":[0,0]},"t":18,"s":[-5,5],"e":[0,0]},{"t":28,"s":[0,0]}]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":1,"k":[{"i":{"x":[0.4],"y":[1]},"o":{"x":[0.6],"y":[0]},"t":18,"s":[0],"e":[100]},{"t":28,"s":[100]}]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}]},{"ty":"gr","it":[{"ty":"sh","d":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[28,22],[34,27],[28,32]],"c":false}}},{"ty":"st","c":{"a":0,"k":[0.047058823529411764,0.047058823529411764,0.058823529411764705,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":2.4},"lc":2,"lj":2,"bm":0},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":1,"k":[{"i":{"x":[0.4],"y":[1]},"o":{"x":[0.6],"y":[0]},"t":24,"s":[0],"e":[100]},{"t":32,"s":[100]}]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}]},{"ty":"gr","it":[{"ty":"sh","d":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[36,32],[42,32]],"c":false}}},{"ty":"st","c":{"a":0,"k":[0.047058823529411764,0.047058823529411764,0.058823529411764705,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":2.4},"lc":2,"lj":2,"bm":0},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":1,"k":[{"i":{"x":[0.4],"y":[1]},"o":{"x":[0.6],"y":[0]},"t":28,"s":[0],"e":[100]},{"t":34,"s":[100]}]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}]}],"ip":0,"op":90,"st":0,"bm":0}]}

package/public/favicon.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="9 13 46 38" fill="none">
+  <defs>
+    <linearGradient id="brandGrad" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#d9f99d"/>
+      <stop offset="1" stop-color="#65a30d"/>
+    </linearGradient>
+  </defs>
+  <rect x="10" y="22" width="36" height="28" rx="5" fill="#0c0c0f" stroke="#6dd9a1" stroke-opacity=".6"/>
+  <rect x="14" y="18" width="36" height="28" rx="5" fill="#0c0c0f" stroke="#c79bff" stroke-opacity=".7"/>
+  <rect x="18" y="14" width="36" height="28" rx="5" fill="#0c0c0f" stroke="#7aa7ff" stroke-opacity=".8"/>
+  <rect x="20" y="16" width="28" height="22" rx="5" fill="url(#brandGrad)"/>
+  <path d="M28 22 L34 27 L28 32" stroke="#0c0c0f" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+  <line x1="36" y1="32" x2="42" y2="32" stroke="#0c0c0f" stroke-width="2.4" stroke-linecap="round"/>
+</svg>

package/public/logo.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="9 13 46 38" fill="none" width="64" height="64">
+  <defs>
+    <linearGradient id="brandGrad" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#d9f99d"/>
+      <stop offset="1" stop-color="#65a30d"/>
+    </linearGradient>
+  </defs>
+  <rect x="10" y="22" width="36" height="28" rx="5" fill="#0c0c0f" stroke="#6dd9a1" stroke-opacity=".6"/>
+  <rect x="14" y="18" width="36" height="28" rx="5" fill="#0c0c0f" stroke="#c79bff" stroke-opacity=".7"/>
+  <rect x="18" y="14" width="36" height="28" rx="5" fill="#0c0c0f" stroke="#7aa7ff" stroke-opacity=".8"/>
+  <rect x="20" y="16" width="28" height="22" rx="5" fill="url(#brandGrad)"/>
+  <path d="M28 22 L34 27 L28 32" stroke="#0c0c0f" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+  <line x1="36" y1="32" x2="42" y2="32" stroke="#0c0c0f" stroke-width="2.4" stroke-linecap="round"/>
+</svg>

package/public/site.webmanifest

@@ -0,0 +1,11 @@
+{
+  "name": "claude-multi",
+  "short_name": "claude-multi",
+  "icons": [
+    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
+  ],
+  "theme_color": "#0c0c0f",
+  "background_color": "#0c0c0f",
+  "display": "standalone"
+}