claudedesk 4.3.1 → 4.4.0

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

@@ -0,0 +1,246 @@
+interface Step2LayoutPickerProps {
+  onNext: () => void;
+  onBack: () => void;
+}
+
+const layoutExamples = [
+  {
+    id: 'single',
+    name: 'Single Pane',
+    icon: <rect x="2" y="2" width="20" height="20" rx="2" fill="currentColor" opacity="0.3" />
+  },
+  {
+    id: 'horizontal',
+    name: 'Horizontal Split',
+    icon: (
+      <>
+        <rect x="2" y="2" width="9" height="20" rx="2" fill="currentColor" opacity="0.3" />
+        <rect x="13" y="2" width="9" height="20" rx="2" fill="currentColor" opacity="0.3" />
+      </>
+    )
+  },
+  {
+    id: 'vertical',
+    name: 'Vertical Split',
+    icon: (
+      <>
+        <rect x="2" y="2" width="20" height="9" rx="2" fill="currentColor" opacity="0.3" />
+        <rect x="2" y="13" width="20" height="9" rx="2" fill="currentColor" opacity="0.3" />
+      </>
+    )
+  },
+  {
+    id: 'quad',
+    name: 'Quad Grid',
+    icon: (
+      <>
+        <rect x="2" y="2" width="9" height="9" rx="2" fill="currentColor" opacity="0.3" />
+        <rect x="13" y="2" width="9" height="9" rx="2" fill="currentColor" opacity="0.3" />
+        <rect x="2" y="13" width="9" height="9" rx="2" fill="currentColor" opacity="0.3" />
+        <rect x="13" y="13" width="9" height="9" rx="2" fill="currentColor" opacity="0.3" />
+      </>
+    )
+  }
+];
+
+export function Step2_LayoutPicker({ onNext, onBack }: Step2LayoutPickerProps) {
+  return (
+    <div className="wizard-step-content">
+      <h2 className="step-title">Choose Your Workspace Layout</h2>
+      <p className="step-subtitle">
+        ClaudeDesk supports up to 4 terminal panes simultaneously.
+        You can change your layout anytime from the toolbar.
+      </p>
+
+      <div className="layout-examples">
+        {layoutExamples.map((layout, index) => (
+          <div
+            key={layout.id}
+            className="layout-example"
+            style={{ animationDelay: `${index * 0.1}s` }}
+          >
+            <svg width="120" height="120" viewBox="0 0 24 24" className="layout-icon">
+              {layout.icon}
+            </svg>
+            <span className="layout-name">{layout.name}</span>
+          </div>
+        ))}
+      </div>
+
+      <p className="layout-hint">
+        💡 Tip: Use <kbd>Ctrl+\</kbd> to toggle split view and <kbd>Ctrl+Shift+L</kbd> to open the layout picker
+      </p>
+
+      <div className="wizard-actions">
+        <button className="wizard-back-btn" onClick={onBack}>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <polyline points="15 18 9 12 15 6" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+          Back
+        </button>
+        <button className="wizard-next-btn" onClick={onNext}>
+          Continue
+          <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>
+      </div>
+
+      <style>{`
+        .wizard-step-content {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          width: 100%;
+          animation: step-fade-in 0.4s ease;
+        }
+
+        @keyframes step-fade-in {
+          from {
+            opacity: 0;
+            transform: translateY(10px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+
+        .step-title {
+          font-size: 24px;
+          font-weight: 600;
+          color: #e9e9ea;
+          margin: 0 0 12px 0;
+          letter-spacing: -0.3px;
+        }
+
+        .step-subtitle {
+          font-size: 14px;
+          color: #a9b1d6;
+          margin: 0 0 32px 0;
+          text-align: center;
+          max-width: 600px;
+          line-height: 1.6;
+        }
+
+        .layout-examples {
+          display: grid;
+          grid-template-columns: repeat(4, 1fr);
+          gap: 24px;
+          margin-bottom: 32px;
+        }
+
+        .layout-example {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 12px;
+          padding: 20px;
+          background: #1f2335;
+          border: 2px solid #3d4458;
+          border-radius: 12px;
+          transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
+          animation: card-fade-in 0.5s ease backwards;
+        }
+
+        @keyframes card-fade-in {
+          from {
+            opacity: 0;
+            transform: translateY(20px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+
+        .layout-example:hover {
+          transform: translateY(-4px);
+          border-color: #7aa2f7;
+        }
+
+        .layout-icon {
+          color: #7aa2f7;
+        }
+
+        .layout-name {
+          font-size: 13px;
+          color: #e9e9ea;
+          font-weight: 500;
+        }
+
+        .layout-hint {
+          font-size: 13px;
+          color: #a9b1d6;
+          margin-bottom: 32px;
+          text-align: center;
+          padding: 16px 24px;
+          background: #1f2335;
+          border: 1px solid #3d4458;
+          border-radius: 8px;
+        }
+
+        .layout-hint kbd {
+          display: inline-block;
+          padding: 3px 6px;
+          background: #24283b;
+          border: 1px solid #3d4458;
+          border-radius: 4px;
+          font-size: 11px;
+          font-family: 'JetBrains Mono', monospace;
+          color: #7aa2f7;
+        }
+
+        .wizard-actions {
+          display: flex;
+          gap: 16px;
+          align-items: center;
+        }
+
+        .wizard-back-btn {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          padding: 10px 20px;
+          background: #24283b;
+          border: 1px solid #3d4458;
+          border-radius: 8px;
+          color: #a9b1d6;
+          font-size: 13px;
+          font-weight: 500;
+          font-family: 'JetBrains Mono', monospace;
+          cursor: pointer;
+          transition: all 0.2s ease;
+        }
+
+        .wizard-back-btn:hover {
+          background: #292e42;
+          border-color: #7aa2f7;
+          color: #7aa2f7;
+        }
+
+        .wizard-next-btn {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          padding: 10px 24px;
+          background: linear-gradient(135deg, #7aa2f7, #7dcfff);
+          border: none;
+          border-radius: 8px;
+          color: #1a1b26;
+          font-size: 13px;
+          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);
+        }
+      `}</style>
+    </div>
+  );
+}

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

@@ -0,0 +1,278 @@
+interface Step3FeaturesProps {
+  onNext: () => void;
+  onBack: () => void;
+  onTryFeature: (feature: string) => void;
+}
+
+const features = [
+  {
+    id: 'atlas',
+    icon: (
+      <svg width="32" height="32" 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>
+    ),
+    title: 'Repository Atlas',
+    description: 'Generate an AI-powered map of your codebase. Automatically discovers file structure, analyzes imports, infers domains, and creates navigation guides for Claude.',
+    action: 'Try Atlas'
+  },
+  {
+    id: 'teams',
+    icon: (
+      <svg width="32" height="32" 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>
+    ),
+    title: 'Agent Teams',
+    description: 'Coordinate multiple AI agents working together. Visualize agent relationships, monitor task progress, and see real-time message streams between team members.',
+    action: 'Try Teams'
+  },
+  {
+    id: 'checkpoints',
+    icon: (
+      <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z" />
+        <polyline points="17 21 17 13 7 13 7 21" />
+        <polyline points="7 3 7 8 15 8" />
+      </svg>
+    ),
+    title: 'Checkpoints',
+    description: 'Save conversation states at any point. Restore previous contexts, experiment with different approaches, or create branching conversation threads.',
+    action: 'Try Checkpoints'
+  },
+  {
+    id: 'templates',
+    icon: (
+      <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M14.5 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V7.5L14.5 2z" />
+        <polyline points="14 2 14 8 20 8" />
+        <line x1="12" y1="18" x2="12" y2="12" />
+        <line x1="9" y1="15" x2="15" y2="15" />
+      </svg>
+    ),
+    title: 'Prompt Templates',
+    description: 'Create reusable prompt templates for common tasks. Use variables, clipboard integration, and file references to speed up repetitive workflows.',
+    action: 'Try Templates'
+  }
+];
+
+export function Step3Features({ onNext, onBack, onTryFeature }: Step3FeaturesProps) {
+  return (
+    <div className="wizard-step-content">
+      <h2 className="step-title">Explore Powerful Features</h2>
+      <p className="step-subtitle">
+        Click "Try" to test any feature right now, or continue to see keyboard shortcuts.
+      </p>
+
+      <div className="features-grid">
+        {features.map((feature, index) => (
+          <div
+            key={feature.id}
+            className="feature-card"
+            style={{ animationDelay: `${index * 0.1}s` }}
+          >
+            <div className="feature-icon">{feature.icon}</div>
+            <h3 className="feature-title">{feature.title}</h3>
+            <p className="feature-description">{feature.description}</p>
+            <button
+              className="feature-try-btn"
+              onClick={() => onTryFeature(feature.id)}
+            >
+              {feature.action}
+            </button>
+          </div>
+        ))}
+      </div>
+
+      <div className="wizard-actions">
+        <button className="wizard-back-btn" onClick={onBack}>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <polyline points="15 18 9 12 15 6" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+          Back
+        </button>
+        <button className="wizard-next-btn" onClick={onNext}>
+          Continue
+          <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>
+      </div>
+
+      <style>{`
+        .wizard-step-content {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          width: 100%;
+          animation: step-fade-in 0.4s ease;
+        }
+
+        @keyframes step-fade-in {
+          from {
+            opacity: 0;
+            transform: translateY(10px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+
+        .step-title {
+          font-size: 24px;
+          font-weight: 600;
+          color: #e9e9ea;
+          margin: 0 0 12px 0;
+          letter-spacing: -0.3px;
+        }
+
+        .step-subtitle {
+          font-size: 14px;
+          color: #a9b1d6;
+          margin: 0 0 32px 0;
+          text-align: center;
+          max-width: 600px;
+          line-height: 1.6;
+        }
+
+        .features-grid {
+          display: grid;
+          grid-template-columns: repeat(2, 1fr);
+          gap: 20px;
+          width: 100%;
+          max-width: 900px;
+          margin-bottom: 32px;
+        }
+
+        .feature-card {
+          padding: 24px;
+          background: #1f2335;
+          border: 2px solid #3d4458;
+          border-radius: 12px;
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+          transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
+          animation: card-fade-in 0.5s ease backwards;
+        }
+
+        @keyframes card-fade-in {
+          from {
+            opacity: 0;
+            transform: translateY(20px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+
+        .feature-card:hover {
+          transform: translateY(-4px);
+          border-color: #7aa2f7;
+          box-shadow: 0 12px 32px rgba(122, 162, 247, 0.2);
+        }
+
+        .feature-icon {
+          width: 56px;
+          height: 56px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: rgba(122, 162, 247, 0.1);
+          border-radius: 14px;
+          color: #7aa2f7;
+          margin-bottom: 16px;
+        }
+
+        .feature-title {
+          font-size: 16px;
+          font-weight: 600;
+          color: #e9e9ea;
+          margin: 0 0 8px 0;
+        }
+
+        .feature-description {
+          font-size: 12px;
+          color: #a9b1d6;
+          margin: 0 0 16px 0;
+          line-height: 1.6;
+          flex: 1;
+        }
+
+        .feature-try-btn {
+          padding: 8px 16px;
+          background: #24283b;
+          border: 1px solid #7aa2f7;
+          border-radius: 6px;
+          color: #7aa2f7;
+          font-size: 12px;
+          font-weight: 500;
+          font-family: 'JetBrains Mono', monospace;
+          cursor: pointer;
+          transition: all 0.2s ease;
+        }
+
+        .feature-try-btn:hover {
+          background: #7aa2f7;
+          color: #1a1b26;
+        }
+
+        .wizard-actions {
+          display: flex;
+          gap: 16px;
+          align-items: center;
+        }
+
+        .wizard-back-btn {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          padding: 10px 20px;
+          background: #24283b;
+          border: 1px solid #3d4458;
+          border-radius: 8px;
+          color: #a9b1d6;
+          font-size: 13px;
+          font-weight: 500;
+          font-family: 'JetBrains Mono', monospace;
+          cursor: pointer;
+          transition: all 0.2s ease;
+        }
+
+        .wizard-back-btn:hover {
+          background: #292e42;
+          border-color: #7aa2f7;
+          color: #7aa2f7;
+        }
+
+        .wizard-next-btn {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          padding: 10px 24px;
+          background: linear-gradient(135deg, #7aa2f7, #7dcfff);
+          border: none;
+          border-radius: 8px;
+          color: #1a1b26;
+          font-size: 13px;
+          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);
+        }
+      `}</style>
+    </div>
+  );
+}