feat: comprehensive UI overhaul and improvements

- Complete TUI-style redesign with orange theme (#C15F3C)
- Auto dark/light theme detection based on DevTools
- Added Phosphor icons for all UI elements
- Keyboard shortcuts (Cmd+Enter/Ctrl+Enter) for prompt submission
- Periodic connection status checking with version display
- Fixed layout scrolling and responsive behavior
- Improved element details with multiline display
- Auto-resizing textarea with proper constraints
- Persistent checkbox preferences in localStorage
- Fixed image clipboard to work only on macOS
- Updated README with simplified installation instructions
- Replaced icon.svg with claude.png/claude.svg consistently
- Added --version flag to host server
- Fixed send button state management after submission
- Element selection now properly resets after sending

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: alexremoon

.github/workflows/release.yml

@@ -31,6 +31,10 @@ jobs:
           cd claude-devtools-host
           pnpm install --no-frozen-lockfile
 
+      - name: Copy README to package
+        run: |
+          cp README.md claude-devtools-host/
+
       - name: Package Chrome Extension
         run: |
           cd chrome-devtools-extension

README.md

@@ -22,16 +22,15 @@ pnpm add -g @alexstrnik/claude-devtools
 
 ### 2. Install the Chrome extension
 
-**Option A: Download latest release**
+**Option A: Download latest release** (Easiest)
 1. Go to [Releases](https://github.com/AlexStrNik/claude-devtools/releases/latest)
 2. Download `claude-devtools-extension-vX.X.X.zip`
-3. Extract the zip file
-4. Open Chrome → Extensions → Developer mode
-5. Click **Load unpacked** → select the extracted folder
+3. Open Chrome → Extensions → Enable **Developer mode**
+4. **Drag and drop** the zip file directly onto the Extensions page
 
 **Option B: Clone from source**
 1. Clone this repo: `git clone https://github.com/AlexStrNik/claude-devtools`
-2. Open Chrome → Extensions → Developer mode
+2. Open Chrome → Extensions → Enable **Developer mode**
 3. Click **Load unpacked** → select `chrome-devtools-extension` folder
 
 ### 3. Start the host server

chrome-devtools-extension/claude.png

@@ -3,10 +3,11 @@
   position: fixed !important;
   pointer-events: none !important;
   z-index: 999999 !important;
-  border: 2px solid #007aff !important;
-  background-color: rgba(0, 122, 255, 0.1) !important;
+  border: 2px solid #C15F3C !important;
+  background-color: rgba(193, 95, 60, 0.1) !important;
   box-sizing: border-box !important;
   display: none !important;
+  border-radius: 2px !important;
 }
 
 .claude-devtools-highlighter.active {
@@ -15,13 +16,13 @@
 
 .claude-devtools-label {
   position: fixed !important;
-  background: #007aff !important;
-  color: white !important;
+  background: #C15F3C !important;
+  color: #F4F3EE !important;
   font-size: 11px !important;
   padding: 2px 6px !important;
-  border-radius: 3px !important;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
-  font-weight: 500 !important;
+  border-radius: 2px !important;
+  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace !important;
+  font-weight: normal !important;
   white-space: nowrap !important;
   z-index: 1000000 !important;
   pointer-events: none !important;
@@ -38,7 +39,7 @@
   left: 0 !important;
   width: 100vw !important;
   height: 100vh !important;
-  background: rgba(0, 0, 0, 0.3) !important;
+  background: rgba(42, 38, 33, 0.4) !important;
   z-index: 999998 !important;
   pointer-events: none !important;
 }
@@ -48,20 +49,22 @@
   top: 20px !important;
   left: 50% !important;
   transform: translateX(-50%) !important;
-  background: #1a1a1a !important;
-  color: white !important;
-  padding: 12px 20px !important;
-  border-radius: 8px !important;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
-  font-size: 14px !important;
+  background: #2A2621 !important;
+  color: #F4F3EE !important;
+  padding: 8px 12px !important;
+  border-radius: 2px !important;
+  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace !important;
+  font-size: 12px !important;
   z-index: 1000001 !important;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
 }
 
 .claude-devtools-instructions .key {
-  background: #333 !important;
+  background: rgba(244, 243, 238, 0.2) !important;
+  color: #C15F3C !important;
   padding: 2px 6px !important;
-  border-radius: 3px !important;
-  font-size: 12px !important;
+  border-radius: 2px !important;
+  font-size: 11px !important;
   margin: 0 2px !important;
+  border: 1px solid rgba(193, 95, 60, 0.3) !important;
 }

chrome-devtools-extension/claude.svg

@@ -56,7 +56,7 @@ class ClaudeDevTools {
     this.instructions = document.createElement("div");
     this.instructions.className = "claude-devtools-instructions";
     this.instructions.innerHTML = `
-      Click any element to select • <span class="key">ESC</span> to cancel
+      Click any element to select • Click "Cancel Picking" to stop
     `;
     document.body.appendChild(this.instructions);
 

chrome-devtools-extension/content.css

@@ -1,7 +1,7 @@
 // Create the Claude DevTools panel
 chrome.devtools.panels.create(
   "Claude",
-  "icon.svg",
+  "claude.svg",
   "panel.html",
   function (panel) {
     console.log("Claude DevTools panel created");

chrome-devtools-extension/content.js

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Claude DevTools",
-  "version": "1.0.0",
+  "version": "0.0.6",
   "description": "Pick elements and send them to Claude with React/Angular/Vue component detection",
   "permissions": ["activeTab", "storage", "tabs", "debugger", "scripting"],
   "host_permissions": ["<all_urls>"],
@@ -10,10 +10,10 @@
   },
   "devtools_page": "devtools.html",
   "icons": {
-    "16": "icon.svg",
-    "32": "icon.svg",
-    "48": "icon.svg",
-    "128": "icon.svg"
+    "16": "claude.png",
+    "32": "claude.png",
+    "48": "claude.png",
+    "128": "claude.png"
   },
   "content_scripts": [
     {