claudity 1.0.0 → 1.2.0

package/install.sh

@@ -136,7 +136,7 @@ if xcode-select -p &>/dev/null; then
   ok "already installed"
 else
   xcode-select --install 2>/dev/null || true
-  warn "a dialog may appear — click install and wait"
+  warn "a dialog may appear - click install and wait"
   elapsed=0
   timeout=1800
   chars="⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏"
@@ -210,7 +210,7 @@ fi
 
 step "downloading claudity"
 INSTALL_DIR="$HOME/claudity"
-REPO_URL="https://github.com/flavormingo/claudity.git"
+REPO_URL="https://github.com/claudity/claudity.git"
 if [ -d "$INSTALL_DIR/.git" ]; then
   spin "updating claudity" git -C "$INSTALL_DIR" pull --ff-only
 elif [ -d "$INSTALL_DIR" ]; then
@@ -256,7 +256,7 @@ else
     warn "no authentication found"
     echo ""
     echo -e "  ${green}1${reset}) run ${green}claude login${reset} now ${dim}(recommended)${reset}"
-    echo -e "  ${green}2${reset}) skip — configure later via web ui"
+    echo -e "  ${green}2${reset}) skip - configure later via web ui"
     echo ""
     echo -en "  choice ${dim}[1/2]${reset}: "
     read -r auth_choice </dev/tty
@@ -270,10 +270,10 @@ else
       if [ -n "$KEYCHAIN_CREDS" ]; then
         ok "authenticated successfully"
       else
-        warn "credentials not detected — you can authenticate later"
+        warn "credentials not detected - you can authenticate later"
       fi
     else
-      info "skipped — authenticate at http://localhost:6767"
+      info "skipped - authenticate at http://localhost:6767"
     fi
   fi
 fi
@@ -322,15 +322,57 @@ fi
 echo ""
 info "for signal support: ${green}brew install signal-cli${reset}"
 
-step "starting claudity..."
-cd "$INSTALL_DIR" && node src/index.js &
-CLAUDITY_PID=$!
+step "setting up auto-start"
+PLIST_NAME="ai.claudity.server"
+PLIST_PATH="$HOME/Library/LaunchAgents/${PLIST_NAME}.plist"
+NODE_PATH="$(which node)"
+CLAUDE_PATH="$(which claude 2>/dev/null || echo "")"
+mkdir -p "$INSTALL_DIR/data"
+
+PLIST_PATH_DIRS="/usr/local/bin:/opt/homebrew/bin:/usr/bin:/bin"
+[ -n "$NODE_PATH" ] && PLIST_PATH_DIRS="$(dirname "$NODE_PATH"):${PLIST_PATH_DIRS}"
+[ -n "$CLAUDE_PATH" ] && PLIST_PATH_DIRS="$(dirname "$CLAUDE_PATH"):${PLIST_PATH_DIRS}"
+
+launchctl bootout "gui/$(id -u)/${PLIST_NAME}" 2>/dev/null || true
+
+cat > "$PLIST_PATH" <<PLIST
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+  <key>Label</key>
+  <string>${PLIST_NAME}</string>
+  <key>ProgramArguments</key>
+  <array>
+    <string>${NODE_PATH}</string>
+    <string>${INSTALL_DIR}/src/index.js</string>
+  </array>
+  <key>WorkingDirectory</key>
+  <string>${INSTALL_DIR}</string>
+  <key>RunAtLoad</key>
+  <true/>
+  <key>KeepAlive</key>
+  <true/>
+  <key>StandardOutPath</key>
+  <string>${INSTALL_DIR}/data/claudity.log</string>
+  <key>StandardErrorPath</key>
+  <string>${INSTALL_DIR}/data/claudity.log</string>
+  <key>EnvironmentVariables</key>
+  <dict>
+    <key>PATH</key>
+    <string>${PLIST_PATH_DIRS}</string>
+  </dict>
+</dict>
+</plist>
+PLIST
+
+launchctl bootstrap "gui/$(id -u)" "$PLIST_PATH" 2>/dev/null || launchctl load "$PLIST_PATH" 2>/dev/null
 sleep 2
 
-if kill -0 "$CLAUDITY_PID" 2>/dev/null; then
-  ok "claudity is running"
+if curl -sf http://localhost:6767/api/auth/status >/dev/null 2>&1; then
+  ok "claudity is running and will restart automatically"
 else
-  warn "failed to start — run manually with: cd ~/claudity && npm start"
+  warn "service loaded but server not responding yet - check ~/claudity/data/claudity.log"
 fi
 
 boxlines \
@@ -338,6 +380,7 @@ boxlines \
   "" \
   "${green}http://localhost:6767${reset}" \
   "" \
-  "${dim}next time: cd ~/claudity && npm start${reset}"
+  "${dim}claudity starts automatically on login${reset}" \
+  "${dim}logs: ~/claudity/data/claudity.log${reset}"
 
 echo ""

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claudity",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "evolving agents that live where you chat ★ powered by claude code",
   "main": "src/index.js",
   "bin": {

package/public/css/style.css

@@ -1,7 +1,7 @@
 @font-face {
   font-family: 'berkeley';
   src: url('../font/berkeley.woff2') format('woff2');
-  font-weight: normal;
+  font-weight: 100 900;
   font-style: normal;
   font-display: swap;
 }
@@ -67,7 +67,6 @@ html, body {
 
 body {
   font-family: 'berkeley', monospace;
-  -webkit-text-stroke: 0px;
   background: var(--black);
   color: var(--white);
   display: grid;
@@ -114,7 +113,7 @@ nav[aria-label="agents"] header {
 
 nav[aria-label="agents"] header h1 {
   font-size: 14px;
-  -webkit-text-stroke: 0.5px currentColor;
+  font-weight: 600;
   color: var(--accent);
   letter-spacing: 0.05em;
   display: flex;
@@ -124,7 +123,7 @@ nav[aria-label="agents"] header h1 {
 
 nav[aria-label="agents"] header h1 span {
   font-size: 9px;
-  -webkit-text-stroke: 0;
+  font-weight: normal;
   color: var(--accent);
   letter-spacing: 0.06em;
   background: rgba(var(--glow), 0.1);
@@ -366,6 +365,16 @@ section[aria-label="empty"] p {
   font-size: 12px;
 }
 
+section[aria-label="empty"] a {
+  color: var(--accent);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+section[aria-label="empty"] a:hover {
+  text-decoration: underline;
+}
+
 section[aria-label="setup"] pre {
   background: var(--bg-raised);
   border: 1px solid var(--muted);
@@ -611,7 +620,7 @@ div[aria-label="messages"] > div[data-role="assistant"] > .msg-body p:last-child
 }
 
 div[aria-label="messages"] > div[data-role="assistant"] > .msg-body strong {
-  -webkit-text-stroke: 0.4px currentColor;
+  font-weight: 600;
 }
 
 div[aria-label="messages"] > div[data-role="assistant"] > .msg-body strong a {
@@ -744,10 +753,110 @@ div[aria-label="messages"] > div[data-activity] [data-thinking] {
   opacity: 0.85;
 }
 
+div[aria-label="messages"] > div[data-activity] [data-activity-row] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 4px;
+}
+
 div[aria-label="messages"] > div[data-activity] [data-status] {
   color: var(--muted);
   font-size: 11px;
-  margin-top: 4px;
+}
+
+div[aria-label="messages"] > div[data-activity] [data-stop] {
+  background: transparent;
+  border: 1px solid var(--bg-hover);
+  color: var(--muted);
+  font-family: inherit;
+  font-size: 10px;
+  padding: 2px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+div[aria-label="messages"] > div[data-activity] [data-stop]:hover {
+  background: rgba(255, 80, 80, 0.1);
+  border-color: rgba(255, 80, 80, 0.3);
+  color: var(--danger);
+}
+
+div[aria-label="messages"] > div[data-activity] [data-watchdog-warn] {
+  color: #f59e0b;
+  font-size: 11px;
+  margin: 0.3rem 0 0;
+}
+
+div[aria-label="messages"] > div[data-role="system"] {
+  color: var(--muted);
+  font-size: 11px;
+  padding: 0.25rem 0;
+  font-style: italic;
+}
+
+[data-usage-bar] {
+  display: flex;
+  gap: 1.5rem;
+  padding: 0.5rem 1.5rem;
+  font-size: 10px;
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
+  flex-shrink: 0;
+  border-top: 1px solid var(--bg-raised);
+}
+
+[data-usage-bar][hidden] {
+  display: none;
+}
+
+[data-usage-bar] > div {
+  flex: 1;
+  min-width: 0;
+}
+
+[data-usage-bar] [data-quota-header] {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 3px;
+}
+
+[data-usage-bar] [data-quota-header] span:first-child {
+  color: var(--white);
+  font-weight: 600;
+}
+
+[data-usage-bar] [data-quota-pct] {
+  color: var(--white);
+}
+
+[data-usage-bar] [data-quota-track] {
+  height: 6px;
+  background: var(--bg-raised);
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+[data-usage-bar] [data-quota-fill] {
+  height: 100%;
+  border-radius: 3px;
+  background: var(--accent);
+  transition: width 0.4s ease, background 0.3s;
+  width: 0%;
+}
+
+[data-usage-bar] [data-quota-fill][data-warn] {
+  background: var(--amber);
+}
+
+[data-usage-bar] [data-quota-fill][data-danger] {
+  background: var(--danger);
+}
+
+[data-usage-bar] [data-quota-reset] {
+  margin-top: 2px;
+  font-size: 9px;
 }
 
 form[aria-label="input"] {
@@ -869,19 +978,19 @@ section[aria-label="connections"] [data-platforms] {
   border-color: var(--muted);
 }
 
-[data-platforms] article[data-status="connected"] {
+[data-platforms] article[data-conn-status="connected"] {
   border-color: rgba(var(--glow), 0.2);
 }
 
-[data-platforms] article[data-status="connected"]:hover {
+[data-platforms] article[data-conn-status="connected"]:hover {
   border-color: rgba(var(--glow), 0.4);
 }
 
-[data-platforms] article[data-status="connecting"] {
+[data-platforms] article[data-conn-status="connecting"] {
   border-color: rgba(245, 158, 11, 0.3);
 }
 
-[data-platforms] article[data-status="error"] {
+[data-platforms] article[data-conn-status="error"] {
   border-color: rgba(239, 68, 68, 0.3);
 }
 
@@ -1446,6 +1555,11 @@ dialog[aria-label="connection"] footer button[data-disconnect]:hover {
     max-width: 95%;
   }
 
+  [data-usage-bar] {
+    padding: 0.5rem 0.75rem;
+    gap: 0.75rem;
+  }
+
   form[aria-label="input"] {
     padding: 0.5rem 0.75rem 0.75rem;
   }

package/public/index.html

@@ -8,7 +8,7 @@
   <meta name="theme-color" content="#000000">
   <meta name="color-scheme" content="dark">
   <link rel="icon" href="/favicon.svg" type="image/svg+xml">
-  <link rel="stylesheet" href="css/style.css">
+  <link rel="stylesheet" href="css/style.css?cb=20">
 </head>
 <body>
   <button type="button" aria-label="menu" aria-expanded="false" aria-controls="agent-nav" title="menu" data-action="toggle-nav">
@@ -83,7 +83,7 @@
     <section aria-label="empty" hidden role="region">
       <div>
         <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M352 0c0-17.7-14.3-32-32-32S288-17.7 288 0l0 64-96 0c-53 0-96 43-96 96l0 224c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-224c0-53-43-96-96-96l-96 0 0-64zM160 368c0-13.3 10.7-24 24-24l32 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-32 0c-13.3 0-24-10.7-24-24zm120 0c0-13.3 10.7-24 24-24l32 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-32 0c-13.3 0-24-10.7-24-24zm120 0c0-13.3 10.7-24 24-24l32 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-32 0c-13.3 0-24-10.7-24-24zM224 176a48 48 0 1 1 0 96 48 48 0 1 1 0-96zm144 48a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zM64 224c0-17.7-14.3-32-32-32S0 206.3 0 224l0 96c0 17.7 14.3 32 32 32s32-14.3 32-32l0-96zm544-32c-17.7 0-32 14.3-32 32l0 96c0 17.7 14.3 32 32 32s32-14.3 32-32l0-96c0-17.7-14.3-32-32-32z"/></svg>
-        <p>select or create an agent to begin</p>
+        <p>select or <a data-action="create-agent-link">create an agent</a> to begin</p>
       </div>
     </section>
 
@@ -114,6 +114,24 @@
 
       <div aria-label="messages" role="log" aria-live="polite"></div>
 
+      <div data-usage-bar hidden>
+        <div data-quota-session>
+          <div data-quota-header><span>session</span><span data-quota-pct>0%</span></div>
+          <div data-quota-track><div data-quota-fill></div></div>
+          <div data-quota-reset></div>
+        </div>
+        <div data-quota-weekly>
+          <div data-quota-header><span>weekly</span><span data-quota-pct>0%</span></div>
+          <div data-quota-track><div data-quota-fill></div></div>
+          <div data-quota-reset></div>
+        </div>
+        <div data-quota-overage>
+          <div data-quota-header><span>extra usage</span><span data-quota-pct>0%</span></div>
+          <div data-quota-track><div data-quota-fill></div></div>
+          <div data-quota-reset></div>
+        </div>
+      </div>
+
       <form aria-label="input">
         <textarea placeholder="say something..." rows="1" aria-label="message"></textarea>
         <button type="submit" aria-label="send message" title="send message">
@@ -145,8 +163,8 @@
         </select>
       </label>
       <label data-select>
-        <span>thinking</span>
-        <select name="thinking">
+        <span>effort</span>
+        <select name="effort">
           <option value="low">low</option>
           <option value="medium">medium</option>
           <option value="high" selected>high</option>
@@ -183,8 +201,8 @@
         </select>
       </label>
       <label data-select>
-        <span>thinking</span>
-        <select name="thinking">
+        <span>effort</span>
+        <select name="effort">
           <option value="low">low</option>
           <option value="medium">medium</option>
           <option value="high">high</option>
@@ -257,6 +275,6 @@
     </footer>
   </dialog>
 
-  <script src="js/app.js"></script>
+  <script src="js/app.js?cb=20"></script>
 </body>
 </html>