feat(readme): update README for clarity and installation instructions

- Revised the introductory text to better reflect the application's purpose. - Added installation instructions for macOS and Windows, detailing download options and setup steps. - Enhanced the visual presentation with additional badges and download buttons for improved user experience. - Updated the development section to clarify prerequisites and build instructions. This commit improves the README by providing clearer guidance for users and enhancing the overall presentation of the project.
2026-02-13 02:23:30 +09:00 · 2026-02-13 02:23:30 +09:00 · a9ea131546
commit a9ea131546
parent d07485bf27
5 changed files with 103 additions and 50 deletions
--- a/README.md
+++ b/README.md
@ -5,11 +5,35 @@
 <h1 align="center">claude-devtools</h1>

 <p align="center">
-  <strong><code>Read 3 files</code> told you nothing. This shows you everything.</strong>
+  <strong><code>Terminal tells you nothing. This shows you everything.</code></strong>
  <br />
  A desktop app that reconstructs exactly what Claude Code did — every file path, every tool call, every token — from the raw session logs already on your machine.
 </p>

+
+<p align="center">
+  <a href="https://github.com/matt1398/claude-devtools/releases/latest"><img src="https://img.shields.io/github/v/release/matt1398/claude-devtools?style=flat-square&label=version&color=blue" alt="Latest Release" /></a>&nbsp;
+  <a href="https://github.com/matt1398/claude-devtools/actions/workflows/ci.yml"><img src="https://github.com/matt1398/claude-devtools/actions/workflows/ci.yml/badge.svg" alt="CI Status" /></a>&nbsp;
+  <a href="https://github.com/matt1398/claude-devtools/releases"><img src="https://img.shields.io/github/downloads/matt1398/claude-devtools/total?style=flat-square&color=green" alt="Downloads" /></a>&nbsp;
+  <a href="https://github.com/matt1398/claude-devtools/blob/main/LICENSE"><img src="https://img.shields.io/github/license/matt1398/claude-devtools?style=flat-square" alt="License" /></a>&nbsp;
+  <img src="https://img.shields.io/badge/platform-macOS%20%7C%20Windows-lightgrey?style=flat-square" alt="Platform" />
+</p>
+
+<br />
+
+<p align="center">
+  <a href="https://github.com/matt1398/claude-devtools/releases/latest">
+    <img src="https://img.shields.io/badge/macOS-Download-black?logo=apple&logoColor=white&style=flat" alt="Download for macOS" height="30" />
+  </a>&nbsp;&nbsp;
+  <a href="https://github.com/matt1398/claude-devtools/releases/latest">
+    <img src="https://img.shields.io/badge/Windows-Download-0078D4?logo=windows&logoColor=white&style=flat" alt="Download for Windows" height="30" />
+  </a>
+</p>
+
+<p align="center">
+  <sub>No API keys. No configuration. Just download, open, and see everything Claude Code did.</sub>
+</p>
+
 <br />

 <p align="center">
@ -20,6 +44,18 @@

 ---

+## Installation
+
+| Platform | Download | Notes |
+|----------|----------|-------|
+| **macOS** (Apple Silicon) | [`.dmg`](https://github.com/matt1398/claude-devtools/releases/latest) | Drag to Applications. On first launch: right-click → Open (unsigned) |
+| **macOS** (Apple Silicon) | [`.zip`](https://github.com/matt1398/claude-devtools/releases/latest) | Extract and run |
+| **Windows** | [`.exe`](https://github.com/matt1398/claude-devtools/releases/latest) | Standard installer. May trigger SmartScreen — click "More info" → "Run anyway" |
+
+The app reads session logs from `~/.claude/` — the data is already on your machine. No setup, no API keys, no login.
+
+---
+
 ## Why This Exists

 ### Claude Code stopped telling you what it's doing.
@ -109,15 +145,14 @@ Open multiple sessions side-by-side. Drag-and-drop tabs between panes, split vie

 ---

-## Getting Started
+## Development

-### Prerequisites
+<details>
+<summary><strong>Build from source</strong></summary>

- **Node.js** 20+
- **pnpm** 10+
- macOS or Windows
+<br />

-### Install & Run
+**Prerequisites:** Node.js 20+, pnpm 10+

 ```bash
 git clone https://github.com/matt1398/claude-devtools.git
@ -126,9 +161,9 @@ pnpm install
 pnpm dev
 ```

-That's it. The app auto-discovers your Claude Code projects from `~/.claude/`.
+The app auto-discovers your Claude Code projects from `~/.claude/`.

-### Build for Distribution
+#### Build for Distribution

 ```bash
 pnpm dist:mac     # macOS (.dmg)
@ -136,9 +171,7 @@ pnpm dist:win     # Windows (.exe)
 pnpm dist         # Both platforms
 ```

---
-
-## Scripts
+#### Scripts

 | Command | Description |
 |---------|-------------|
@ -151,6 +184,8 @@ pnpm dist         # Both platforms
 | `pnpm test:coverage` | Coverage report |
 | `pnpm check` | Full quality gate (types + lint + test + build) |

+</details>
+
 ---

 ## Contributing
--- a/src/main/services/infrastructure/UpdaterService.ts
+++ b/src/main/services/infrastructure/UpdaterService.ts
@ -57,9 +57,11 @@ export class UpdaterService {

  /**
   * Quit the app and install the downloaded update.
+   * On Windows (NSIS): isSilent=true runs the installer with /S (no wizard);
+   * isForceRunAfter=true launches the app after install. Other platforms ignore these.
   */
  quitAndInstall(): void {
-    autoUpdater.quitAndInstall();
+    autoUpdater.quitAndInstall(true, true);
  }

  private sendStatus(status: UpdaterStatus): void {
--- a/src/renderer/components/common/UpdateBanner.tsx
+++ b/src/renderer/components/common/UpdateBanner.tsx
@ -21,47 +21,60 @@ export const UpdateBanner = (): React.JSX.Element | null => {

  const isDownloading = updateStatus === 'downloading';
  const percent = Math.round(downloadProgress);
+  const clampedPercent = Math.max(0, Math.min(percent, 100));

  return (
    <div
-      className="relative flex items-center gap-3 border-b px-4 py-2 text-sm"
+      className="relative border-b px-4 py-2.5"
      style={{
-        backgroundColor: 'var(--color-surface-raised)',
+        backgroundColor: 'var(--color-surface)',
        borderColor: 'var(--color-border)',
      }}
    >
      {isDownloading ? (
-        <>
-          <Loader2 className="size-4 shrink-0 animate-spin text-blue-400" />
-          <span style={{ color: 'var(--color-text-secondary)' }}>
-            Downloading update... {percent}%
-          </span>
-          <div className="h-1.5 flex-1 overflow-hidden rounded-full bg-white/10">
+        <div className="pr-8">
+          <div className="mb-1.5 flex items-center gap-2 text-xs" style={{ color: 'var(--color-text-secondary)' }}>
+            <Loader2 className="size-3.5 shrink-0 animate-spin text-blue-400" />
+            <span>Updating app</span>
+            <span className="tabular-nums" style={{ color: 'var(--color-text-muted)' }}>
+              {clampedPercent}%
+            </span>
+          </div>
+          <div className="h-1 w-full overflow-hidden rounded-full" style={{ backgroundColor: 'var(--color-border)' }}>
            <div
-              className="h-full rounded-full bg-blue-500 transition-all duration-300"
-              style={{ width: `${percent}%` }}
+              className="h-full rounded-full bg-blue-500 transition-all duration-300 ease-out"
+              style={{ width: `${clampedPercent}%` }}
            />
          </div>
-        </>
+        </div>
      ) : (
-        <>
+        <div className="flex items-center gap-2 pr-8">
          <CheckCircle className="size-4 shrink-0 text-green-400" />
-          <span style={{ color: 'var(--color-text-secondary)' }}>
-            Update ready{availableVersion ? ` (v${availableVersion})` : ''}
+          <span className="text-sm" style={{ color: 'var(--color-text-secondary)' }}>
+            Update ready
+            {availableVersion ? (
+              <span className="ml-1 text-xs" style={{ color: 'var(--color-text-muted)' }}>
+                v{availableVersion}
+              </span>
+            ) : null}
          </span>
          <button
            onClick={installUpdate}
-            className="ml-auto rounded-md bg-green-600 px-3 py-1 text-xs font-medium text-white transition-colors hover:bg-green-500"
+            className="ml-auto rounded-md border px-2.5 py-1 text-xs font-medium transition-colors hover:bg-white/5"
+            style={{
+              borderColor: 'var(--color-border-emphasis)',
+              color: 'var(--color-text)',
+            }}
          >
-            Restart to Update
+            Restart now
          </button>
-        </>
+        </div>
      )}

      {/* Dismiss */}
      <button
        onClick={dismissUpdateBanner}
-        className="shrink-0 rounded p-0.5 transition-colors hover:bg-white/10"
+        className="absolute right-3 top-1/2 -translate-y-1/2 shrink-0 rounded p-0.5 transition-colors hover:bg-white/10"
        style={{ color: 'var(--color-text-muted)' }}
      >
        <X className="size-3.5" />
--- a/src/renderer/components/common/UpdateDialog.tsx
+++ b/src/renderer/components/common/UpdateDialog.tsx
@ -5,7 +5,7 @@
 */

 import { useStore } from '@renderer/store';
-import { Download, X } from 'lucide-react';
+import { X } from 'lucide-react';

 export const UpdateDialog = (): React.JSX.Element | null => {
  const showUpdateDialog = useStore((s) => s.showUpdateDialog);
@ -27,7 +27,7 @@ export const UpdateDialog = (): React.JSX.Element | null => {
        tabIndex={-1}
      />
      <div
-        className="relative mx-4 w-full max-w-md rounded-lg border p-6 shadow-xl"
+        className="relative mx-4 w-full max-w-sm rounded-md border p-4 shadow-lg"
        role="dialog"
        aria-modal="true"
        aria-label="Update available"
@ -45,20 +45,21 @@ export const UpdateDialog = (): React.JSX.Element | null => {
          <X className="size-4" />
        </button>

-        {/* Title */}
-        <h2 className="text-lg font-semibold" style={{ color: 'var(--color-text)' }}>
-          Update Available
-        </h2>
-
-        {/* Body */}
-        <p className="mt-2 text-sm" style={{ color: 'var(--color-text-secondary)' }}>
-          Version {availableVersion} is available. Would you like to download it?
-        </p>
+        <div className="mb-3 pr-8">
+          <h2 className="text-base font-semibold" style={{ color: 'var(--color-text)' }}>
+            Update Available
+          </h2>
+          {availableVersion && (
+            <div className="mt-1 text-xs" style={{ color: 'var(--color-text-secondary)' }}>
+              v{availableVersion}
+            </div>
+          )}
+        </div>

        {/* Release notes */}
        {releaseNotes && (
          <div
-            className="mt-3 max-h-40 overflow-y-auto rounded border p-3 text-xs"
+            className="mb-4 max-h-32 overflow-y-auto rounded border p-2 text-xs"
            style={{
              backgroundColor: 'var(--color-surface)',
              borderColor: 'var(--color-border)',
@ -70,10 +71,10 @@ export const UpdateDialog = (): React.JSX.Element | null => {
        )}

        {/* Actions */}
-        <div className="mt-5 flex justify-end gap-3">
+        <div className="flex justify-end gap-2">
          <button
            onClick={dismissUpdateDialog}
-            className="rounded-md border px-4 py-2 text-sm font-medium transition-colors hover:bg-white/5"
+            className="rounded-md border px-3 py-1.5 text-sm font-medium transition-colors hover:bg-white/5"
            style={{
              borderColor: 'var(--color-border)',
              color: 'var(--color-text-secondary)',
@ -83,10 +84,9 @@ export const UpdateDialog = (): React.JSX.Element | null => {
          </button>
          <button
            onClick={downloadUpdate}
-            className="flex items-center gap-2 rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-500"
+            className="rounded-md bg-blue-600 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-blue-500"
          >
-            <Download className="size-4" />
-            Download Update
+            Download
          </button>
        </div>
      </div>
--- a/src/renderer/components/layout/SidebarHeader.tsx
+++ b/src/renderer/components/layout/SidebarHeader.tsx
@ -195,6 +195,9 @@ const ProjectDropdownItem = ({
 };

 export const SidebarHeader = (): React.JSX.Element => {
+  const isMacElectron =
+    isElectronMode() && window.navigator.userAgent.toLowerCase().includes('mac');
+
  const {
    repositoryGroups,
    selectedRepositoryId,
@ -330,10 +333,10 @@ export const SidebarHeader = (): React.JSX.Element => {
        style={
          {
            height: `${HEADER_ROW1_HEIGHT}px`,
-            paddingLeft: isElectronMode()
+            paddingLeft: isMacElectron
              ? 'var(--macos-traffic-light-padding-left, 72px)'
              : '16px',
-            WebkitAppRegion: isElectronMode() ? 'drag' : undefined,
+            WebkitAppRegion: isMacElectron ? 'drag' : undefined,
          } as React.CSSProperties
        }
      >