claudedesk 4.3.1 → 4.4.0

package/src/renderer/components/ui/ToolsDropdown.tsx

@@ -0,0 +1,119 @@
+import { ToolbarDropdown, DropdownItem } from './ToolbarDropdown';
+
+interface ToolsDropdownProps {
+  onOpenAtlas?: () => void;
+  onOpenLayoutPicker?: () => void;
+  onOpenTeams?: () => void;
+  onOpenGit?: () => void;
+  onOpenHistory?: () => void;
+  teamCount?: number;
+  gitStagedCount?: number;
+}
+
+export function ToolsDropdown({
+  onOpenAtlas,
+  onOpenLayoutPicker,
+  onOpenTeams,
+  onOpenGit,
+  onOpenHistory,
+  teamCount = 0,
+  gitStagedCount = 0,
+}: ToolsDropdownProps) {
+  const items: DropdownItem[] = [];
+
+  if (onOpenAtlas) {
+    items.push({
+      id: 'atlas',
+      label: 'Repository Atlas',
+      icon: (
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6" />
+          <line x1="8" y1="2" x2="8" y2="18" />
+          <line x1="16" y1="6" x2="16" y2="22" />
+        </svg>
+      ),
+      onClick: onOpenAtlas,
+    });
+  }
+
+  if (onOpenLayoutPicker) {
+    items.push({
+      id: 'layout',
+      label: 'Workspace Layouts',
+      shortcut: 'Ctrl+Shift+L',
+      icon: (
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <rect x="3" y="3" width="7" height="7" />
+          <rect x="14" y="3" width="7" height="7" />
+          <rect x="3" y="14" width="7" height="7" />
+          <rect x="14" y="14" width="7" height="7" />
+        </svg>
+      ),
+      onClick: onOpenLayoutPicker,
+    });
+  }
+
+  if (onOpenGit) {
+    items.push({
+      id: 'git',
+      label: 'Git Integration',
+      shortcut: 'Ctrl+Shift+G',
+      badge: gitStagedCount > 0 ? gitStagedCount : undefined,
+      icon: (
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <line x1="6" y1="3" x2="6" y2="15" />
+          <circle cx="18" cy="6" r="3" />
+          <circle cx="6" cy="18" r="3" />
+          <path d="M18 9a9 9 0 01-9 9" />
+        </svg>
+      ),
+      onClick: onOpenGit,
+    });
+  }
+
+  if (onOpenTeams) {
+    items.push({
+      id: 'teams',
+      label: 'Agent Teams',
+      badge: teamCount > 0 ? teamCount : undefined,
+      icon: (
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" />
+          <circle cx="9" cy="7" r="4" />
+          <path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75" />
+        </svg>
+      ),
+      onClick: onOpenTeams,
+    });
+  }
+
+  if (onOpenHistory) {
+    items.push({
+      id: 'history',
+      label: 'Session History',
+      shortcut: 'Ctrl+Shift+H',
+      icon: (
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <circle cx="12" cy="12" r="10" />
+          <polyline points="12 6 12 12 16 14" />
+        </svg>
+      ),
+      onClick: onOpenHistory,
+    });
+  }
+
+  if (items.length === 0) return null;
+
+  return (
+    <ToolbarDropdown
+      icon={
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z" />
+        </svg>
+      }
+      label="Tools"
+      items={items}
+      title="Tools - Quick access to workspace features"
+    />
+  );
+}

package/src/renderer/components/ui/TooltipCoach.tsx

@@ -0,0 +1,217 @@
+import { useState, useEffect, useRef } from 'react';
+
+interface TooltipCoachProps {
+  id: string; // Unique ID for this tooltip (e.g., "atlas-button")
+  children: React.ReactNode; // The element to wrap
+  title: string;
+  description: string;
+  position?: 'top' | 'bottom' | 'left' | 'right';
+  disabled?: boolean;
+}
+
+export function TooltipCoach({
+  id,
+  children,
+  title,
+  description,
+  position = 'bottom',
+  disabled = false,
+}: TooltipCoachProps) {
+  const [isVisible, setIsVisible] = useState(false);
+  const [isDismissed, setIsDismissed] = useState(false);
+  const [hasShownInSession, setHasShownInSession] = useState(false);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const tooltipRef = useRef<HTMLDivElement>(null);
+
+  // Check if this tooltip has been dismissed
+  useEffect(() => {
+    const dismissed = localStorage.getItem(`tooltipCoach:${id}`) === 'true';
+    setIsDismissed(dismissed);
+  }, [id]);
+
+  // Handle showing tooltip on hover (only if not dismissed and not shown in this session)
+  const handleMouseEnter = () => {
+    if (disabled || isDismissed || hasShownInSession) return;
+    setIsVisible(true);
+    setHasShownInSession(true); // Only show once per session
+  };
+
+  const handleMouseLeave = () => {
+    // Don't auto-hide - user must click "Got it"
+  };
+
+  const handleGotIt = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    localStorage.setItem(`tooltipCoach:${id}`, 'true');
+    setIsDismissed(true);
+    setIsVisible(false);
+  };
+
+  if (isDismissed || disabled) {
+    return <>{children}</>;
+  }
+
+  return (
+    <div
+      ref={wrapperRef}
+      className="tooltip-coach-wrapper"
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {children}
+
+      {isVisible && (
+        <div ref={tooltipRef} className={`tooltip-coach tooltip-coach-${position}`}>
+          <div className="tooltip-coach-content">
+            <h4 className="tooltip-coach-title">{title}</h4>
+            <p className="tooltip-coach-description">{description}</p>
+            <button className="tooltip-coach-btn" onClick={handleGotIt}>
+              Got it!
+            </button>
+          </div>
+          <div className={`tooltip-coach-arrow tooltip-coach-arrow-${position}`} />
+
+          <style>{`
+            .tooltip-coach-wrapper {
+              position: relative;
+              display: inline-block;
+            }
+
+            .tooltip-coach {
+              position: absolute;
+              z-index: 10000;
+              background: #1f2335;
+              border: 2px solid #7aa2f7;
+              border-radius: 10px;
+              padding: 16px;
+              min-width: 280px;
+              max-width: 320px;
+              box-shadow: 0 12px 48px rgba(122, 162, 247, 0.3);
+              font-family: 'JetBrains Mono', monospace;
+              animation: tooltip-coach-fade-in 0.3s ease;
+            }
+
+            @keyframes tooltip-coach-fade-in {
+              from {
+                opacity: 0;
+                transform: translateY(-8px) scale(0.95);
+              }
+              to {
+                opacity: 1;
+                transform: translateY(0) scale(1);
+              }
+            }
+
+            .tooltip-coach-bottom {
+              top: calc(100% + 12px);
+              left: 50%;
+              transform: translateX(-50%);
+            }
+
+            .tooltip-coach-top {
+              bottom: calc(100% + 12px);
+              left: 50%;
+              transform: translateX(-50%);
+            }
+
+            .tooltip-coach-left {
+              right: calc(100% + 12px);
+              top: 50%;
+              transform: translateY(-50%);
+            }
+
+            .tooltip-coach-right {
+              left: calc(100% + 12px);
+              top: 50%;
+              transform: translateY(-50%);
+            }
+
+            .tooltip-coach-content {
+              display: flex;
+              flex-direction: column;
+              gap: 12px;
+            }
+
+            .tooltip-coach-title {
+              font-size: 14px;
+              font-weight: 600;
+              color: #7aa2f7;
+              margin: 0;
+            }
+
+            .tooltip-coach-description {
+              font-size: 12px;
+              color: #a9b1d6;
+              margin: 0;
+              line-height: 1.5;
+            }
+
+            .tooltip-coach-btn {
+              padding: 8px 16px;
+              background: linear-gradient(135deg, #7aa2f7, #7dcfff);
+              border: none;
+              border-radius: 6px;
+              color: #1a1b26;
+              font-size: 12px;
+              font-weight: 600;
+              font-family: inherit;
+              cursor: pointer;
+              transition: all 0.2s ease;
+              align-self: flex-start;
+            }
+
+            .tooltip-coach-btn:hover {
+              transform: translateY(-1px);
+              box-shadow: 0 4px 16px rgba(122, 162, 247, 0.4);
+            }
+
+            .tooltip-coach-btn:active {
+              transform: translateY(0);
+            }
+
+            .tooltip-coach-arrow {
+              position: absolute;
+              width: 12px;
+              height: 12px;
+              background: #1f2335;
+              border: 2px solid #7aa2f7;
+              transform: rotate(45deg);
+            }
+
+            .tooltip-coach-arrow-bottom {
+              top: -7px;
+              left: 50%;
+              margin-left: -6px;
+              border-bottom: none;
+              border-right: none;
+            }
+
+            .tooltip-coach-arrow-top {
+              bottom: -7px;
+              left: 50%;
+              margin-left: -6px;
+              border-top: none;
+              border-left: none;
+            }
+
+            .tooltip-coach-arrow-left {
+              right: -7px;
+              top: 50%;
+              margin-top: -6px;
+              border-left: none;
+              border-bottom: none;
+            }
+
+            .tooltip-coach-arrow-right {
+              left: -7px;
+              top: 50%;
+              margin-top: -6px;
+              border-right: none;
+              border-top: none;
+            }
+          `}</style>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/renderer/components/ui/WelcomeHero.tsx

@@ -0,0 +1,85 @@
+interface WelcomeHeroProps {
+  version: string;
+}
+
+export function WelcomeHero({ version }: WelcomeHeroProps) {
+  return (
+    <div className="welcome-hero">
+      <div className="hero-logo">
+        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+          <rect x="3" y="3" width="18" height="18" rx="2" ry="2" strokeLinecap="round" strokeLinejoin="round" />
+          <path d="M9 3v18" strokeLinecap="round" strokeLinejoin="round" />
+          <path d="M14 8l-5 5l5 5" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+      </div>
+
+      <h1 className="hero-title">ClaudeDesk</h1>
+      <p className="hero-tagline">
+        Multi-session terminal workspace for Claude Code CLI
+      </p>
+      <div className="hero-version">v{version}</div>
+
+      <style>{`
+        .welcome-hero {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          margin-bottom: 48px;
+          animation: hero-fade-in 0.5s ease;
+        }
+
+        @keyframes hero-fade-in {
+          from {
+            opacity: 0;
+            transform: translateY(-10px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+
+        .hero-logo {
+          width: 96px;
+          height: 96px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: linear-gradient(135deg, rgba(122, 162, 247, 0.15), rgba(125, 207, 255, 0.1));
+          border: 2px solid #3d4458;
+          border-radius: 24px;
+          margin-bottom: 24px;
+          color: #7aa2f7;
+          box-shadow: 0 8px 32px rgba(122, 162, 247, 0.15);
+        }
+
+        .hero-title {
+          font-size: 32px;
+          font-weight: 700;
+          color: #e9e9ea;
+          margin: 0 0 8px 0;
+          letter-spacing: -0.5px;
+        }
+
+        .hero-tagline {
+          font-size: 14px;
+          color: #a9b1d6;
+          margin: 0 0 12px 0;
+          text-align: center;
+          max-width: 400px;
+          line-height: 1.5;
+        }
+
+        .hero-version {
+          font-size: 11px;
+          color: #565f89;
+          font-weight: 500;
+          padding: 4px 12px;
+          background: #1f2335;
+          border: 1px solid #3d4458;
+          border-radius: 12px;
+        }
+      `}</style>
+    </div>
+  );
+}

package/src/renderer/components/ui/index.ts

@@ -11,6 +11,11 @@ export { ContextMenu } from './ContextMenu';
 export { ConfirmDialog } from './ConfirmDialog';
 export { CheckpointDialog } from './CheckpointDialog';
 export { EmptyState } from './EmptyState';
+export { FuelStatusIndicator } from './FuelStatusIndicator';
+export type { FuelStatusIndicatorProps } from './FuelStatusIndicator';
+export { FuelGaugeBar } from './FuelGaugeBar';
+export { ToolsDropdown } from './ToolsDropdown';
+export { FuelTooltip } from './FuelTooltip';
 // Re-export quota types from shared
 export type { ClaudeUsageQuota, BurnRateData, QuotaBucket } from '../../../shared/ipc-types';
 // Export prompt template components (from parent directory)

package/src/renderer/components/wizard/Step1_Welcome.tsx

@@ -0,0 +1,166 @@
+interface Step1WelcomeProps {
+  onNext: () => void;
+}
+
+export function Step1Welcome({ onNext }: Step1WelcomeProps) {
+  return (
+    <div className="wizard-step-content">
+      <div className="welcome-icon">
+        <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+          <rect x="3" y="3" width="18" height="18" rx="2" ry="2" strokeLinecap="round" strokeLinejoin="round" />
+          <path d="M9 3v18" strokeLinecap="round" strokeLinejoin="round" />
+          <path d="M14 8l-5 5l5 5" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+      </div>
+
+      <h1 className="welcome-title">Welcome to ClaudeDesk</h1>
+      <p className="welcome-subtitle">
+        Your multi-session terminal workspace for Claude Code CLI
+      </p>
+
+      <div className="welcome-features">
+        <div className="feature-item">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <polyline points="20 6 9 17 4 12" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+          <span>Work with up to 4 terminal sessions simultaneously</span>
+        </div>
+        <div className="feature-item">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <polyline points="20 6 9 17 4 12" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+          <span>Visualize and coordinate multiple AI agent teams</span>
+        </div>
+        <div className="feature-item">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <polyline points="20 6 9 17 4 12" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+          <span>Generate AI-powered repository maps for navigation</span>
+        </div>
+        <div className="feature-item">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <polyline points="20 6 9 17 4 12" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+          <span>Save and restore conversation checkpoints</span>
+        </div>
+      </div>
+
+      <button className="wizard-next-btn" onClick={onNext}>
+        Get Started
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <polyline points="9 18 15 12 9 6" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+      </button>
+
+      <style>{`
+        .wizard-step-content {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          animation: step-fade-in 0.4s ease;
+        }
+
+        @keyframes step-fade-in {
+          from {
+            opacity: 0;
+            transform: translateY(10px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+
+        .welcome-icon {
+          width: 120px;
+          height: 120px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: linear-gradient(135deg, rgba(122, 162, 247, 0.15), rgba(125, 207, 255, 0.1));
+          border: 2px solid #3d4458;
+          border-radius: 28px;
+          margin-bottom: 32px;
+          color: #7aa2f7;
+          box-shadow: 0 12px 48px rgba(122, 162, 247, 0.2);
+        }
+
+        .welcome-title {
+          font-size: 32px;
+          font-weight: 700;
+          color: #e9e9ea;
+          margin: 0 0 12px 0;
+          letter-spacing: -0.5px;
+        }
+
+        .welcome-subtitle {
+          font-size: 15px;
+          color: #a9b1d6;
+          margin: 0 0 48px 0;
+          text-align: center;
+          max-width: 500px;
+          line-height: 1.6;
+        }
+
+        .welcome-features {
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+          margin-bottom: 48px;
+          width: 100%;
+          max-width: 480px;
+        }
+
+        .feature-item {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          padding: 16px;
+          background: #1f2335;
+          border: 1px solid #3d4458;
+          border-radius: 10px;
+          color: #a9b1d6;
+          font-size: 14px;
+          line-height: 1.5;
+          transition: all 0.2s ease;
+        }
+
+        .feature-item:hover {
+          transform: translateX(4px);
+          border-color: #7aa2f7;
+        }
+
+        .feature-item svg {
+          color: #7aa2f7;
+          flex-shrink: 0;
+        }
+
+        .wizard-next-btn {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          padding: 14px 32px;
+          background: linear-gradient(135deg, #7aa2f7, #7dcfff);
+          border: none;
+          border-radius: 10px;
+          color: #1a1b26;
+          font-size: 14px;
+          font-weight: 600;
+          font-family: 'JetBrains Mono', monospace;
+          cursor: pointer;
+          transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
+          box-shadow: 0 4px 16px rgba(122, 162, 247, 0.3);
+        }
+
+        .wizard-next-btn:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 8px 24px rgba(122, 162, 247, 0.4);
+        }
+
+        .wizard-next-btn:active {
+          transform: translateY(0);
+        }
+      `}</style>
+    </div>
+  );
+}