Merge branch 'main' into okcode/replace-themes-cursor

Author: BunsDev

.playwright-cli/page-2026-03-28T08-32-38-952Z.yml

@@ -0,0 +1,95 @@
+- generic [ref=e1]:
+    - generic [ref=e3]:
+        - generic [ref=e6]:
+            - generic [ref=e9] [cursor=pointer]:
+                - generic [ref=e10]: OK
+                - generic [ref=e11]: Code
+                - generic [ref=e12]: Dev
+            - generic [ref=e15]:
+                - generic [ref=e16]:
+                    - generic [ref=e17]: Projects
+                    - generic [ref=e18]:
+                        - button [ref=e19] [cursor=pointer]:
+                            - img [ref=e20]
+                        - button [ref=e23] [cursor=pointer]:
+                            - img [ref=e24]
+                - generic [ref=e25]: No projects yet
+            - separator [ref=e26]
+            - list [ref=e28]:
+                - listitem [ref=e29]:
+                    - button [ref=e30]:
+                        - img [ref=e31]
+                        - generic [ref=e34]: Spotify
+                - listitem [ref=e35]:
+                    - button [ref=e36] [cursor=pointer]:
+                        - img [ref=e37]
+                        - generic [ref=e41]: PR Review
+                - listitem [ref=e42]:
+                    - button [ref=e43] [cursor=pointer]:
+                        - img [ref=e44]
+                        - generic [ref=e48]: Merge Conflicts
+                - listitem [ref=e49]:
+                    - button [ref=e50] [cursor=pointer]:
+                        - img [ref=e51]
+                        - generic [ref=e54]: Settings
+                - listitem [ref=e55]:
+                    - generic [ref=e56]:
+                        - button [ref=e57]:
+                            - img [ref=e58]
+                        - button [ref=e60]:
+                            - img [ref=e61]
+                        - button [ref=e67]:
+                            - img [ref=e68]
+            - button [ref=e70]
+        - generic [ref=e74]:
+            - generic [ref=e75]:
+                - paragraph [ref=e76]: Start here
+                - heading [level=1] [ref=e77]: Pick up a project or start a fresh thread.
+                - paragraph [ref=e78]: Open a project folder, jump back into something recent, or create a new thread without digging through the sidebar first.
+                - generic [ref=e79]:
+                    - button [ref=e80]:
+                        - img
+                        - text: Open project folder
+                    - button [ref=e81]:
+                        - img
+                        - text: Open project folder
+                    - button [ref=e82]:
+                        - img
+                        - text: Review pull requests
+                    - button [ref=e83]:
+                        - img
+                        - text: Resolve merge conflicts
+                    - button [ref=e84]:
+                        - img
+                        - text: Settings
+            - complementary [ref=e85]:
+                - generic [ref=e87]:
+                    - heading [level=2] [ref=e88]: Recent projects
+                    - paragraph [ref=e89]: Jump back in without hunting through the sidebar.
+                - generic [ref=e90]: No projects yet. Open your first folder to get started.
+    - generic:
+        - region "Notifications"
+    - generic:
+        - region "Notifications"
+    - dialog "Welcome to OK Code" [ref=e94]:
+        - generic [ref=e97]:
+            - img [ref=e99]
+            - heading "Welcome to OK Code" [level=2] [ref=e102]
+            - paragraph [ref=e103]: Your AI-powered coding companion. Let's take a quick tour of the features that will supercharge your workflow.
+            - list [ref=e104]:
+                - listitem [ref=e105]: Work alongside AI agents that read, write, and reason about your code
+                - listitem [ref=e107]: Every conversation runs in an isolated git worktree by default
+                - listitem [ref=e109]: This tour takes about a minute — you can skip at any time
+        - generic [ref=e111]:
+            - group "Onboarding progress" [ref=e112]:
+                - 'button "Go to step 1 of 8: Welcome to OK Code" [active] [ref=e113]'
+                - 'button "Go to step 2 of 8: AI-Powered Conversations" [ref=e114]'
+                - 'button "Go to step 3 of 8: Built-in Git Workflows" [ref=e115]'
+                - 'button "Go to step 4 of 8: Review Changes Side-by-Side" [ref=e116]'
+                - 'button "Go to step 5 of 8: Integrated Terminal" [ref=e117]'
+                - 'button "Go to step 6 of 8: AI-Generated Plans" [ref=e118]'
+                - 'button "Go to step 7 of 8: Stay in Control" [ref=e119]'
+                - 'button "Go to step 8 of 8: You''re All Set!" [ref=e120]'
+            - generic [ref=e121]:
+                - button "Skip" [ref=e122]
+                - button "Next" [ref=e123]

apps/marketing/src/pages/index.astro

@@ -136,6 +136,29 @@ const themes = [
   },
 ] as const;
 
+const faqs = [
+  {
+    question: "What is OK Code, exactly?",
+    answer:
+      "A focused workspace for AI coding flows. It brings together long-running threads, diffs, preview, PR review, and release actions so the work stays connected.",
+  },
+  {
+    question: "Who is it for?",
+    answer:
+      "Developers, design engineers, and AI-native builders who want a calmer, more legible way to work with coding agents.",
+  },
+  {
+    question: "Does it replace my editor or terminal?",
+    answer:
+      "Not necessarily. It complements your stack by making the agent workflow itself more coherent, visible, and easier to ship from.",
+  },
+  {
+    question: "Is it open source?",
+    answer:
+      "Yes. You can inspect the repo, follow releases, and use OK Code in a workflow that stays close to the metal.",
+  },
+] as const;
+
 const faqs = [
   {
     question: "What is OK Code, exactly?",

apps/web/src/components/ChatView.tsx

@@ -89,7 +89,7 @@ import BranchToolbar from "./BranchToolbar";
 import { resolveShortcutCommand, shortcutLabelForCommand } from "../keybindings";
 import PlanSidebar from "./PlanSidebar";
 import ThreadTerminalDrawer from "./ThreadTerminalDrawer";
-import { SpotifyPlayerDrawer } from "./SpotifyPlayer";
+import { YouTubePlayerDrawer } from "./YouTubePlayer";
 import {
   AtSignIcon,
   BotIcon,
@@ -4894,7 +4894,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
         );
       })()}
 
-      <SpotifyPlayerDrawer />
+      <YouTubePlayerDrawer />
 
       <Dialog
         open={pendingProjectScriptRun !== null}

apps/web/src/components/CodeMirrorViewer.tsx

@@ -60,7 +60,7 @@ const baseExtensions: Extension[] = [
       backgroundColor: "transparent",
     },
     ".cm-selectionBackground": {
-      backgroundColor: "color-mix(in srgb, var(--primary) 25%, transparent) !important",
+      backgroundColor: "color-mix(in srgb, var(--primary) 55%, transparent) !important",
     },
   }),
 ];

apps/web/src/components/CodeViewerPanel.tsx

@@ -95,7 +95,7 @@ const CodeViewerFileContent = memo(function CodeViewerFileContent(props: {
   }
 
   return (
-    <div className="min-h-0 flex-1 overflow-hidden">
+    <div className="min-h-0 flex-1 overflow-y-auto">
       {query.data.truncated && (
         <div className="border-b border-amber-500/30 bg-amber-500/10 px-3 py-1 text-[11px] text-amber-700 dark:text-amber-300/90">
           File is larger than 1MB. Showing truncated content.
@@ -177,7 +177,7 @@ export default function CodeViewerPanel() {
         </div>
       </div>
       {/* Content */}
-      <div className="flex min-h-0 flex-1 justify-center overflow-hidden">
+      <div className="flex min-h-0 flex-1 justify-center overflow-y-auto">
         <div className="h-full w-full max-w-5xl">
           {!activeTab ? (
             <div className="flex h-full flex-col items-center justify-center gap-2 px-5 text-center text-muted-foreground/60">

apps/web/src/components/GitActionsControl.tsx

@@ -1059,7 +1059,7 @@ export default function GitActionsControl({ gitCwd, activeThreadId }: GitActions
                 }
               >
                 <GitQuickActionIcon quickAction={quickAction} />
-                <span className="sr-only @sm/header-actions:not-sr-only @sm/header-actions:ml-0.5">
+                <span className="sr-only @lg/header-actions:not-sr-only @lg/header-actions:ml-0.5">
                   {quickAction.label}
                 </span>
               </PopoverTrigger>
@@ -1075,7 +1075,7 @@ export default function GitActionsControl({ gitCwd, activeThreadId }: GitActions
               onClick={runQuickAction}
             >
               <GitQuickActionIcon quickAction={quickAction} />
-              <span className="sr-only @sm/header-actions:not-sr-only @sm/header-actions:ml-0.5">
+              <span className="sr-only @lg/header-actions:not-sr-only @lg/header-actions:ml-0.5">
                 {quickAction.label}
               </span>
             </Button>

apps/web/src/components/Sidebar.tsx

@@ -12,7 +12,7 @@ import {
   TerminalIcon,
   TriangleAlertIcon,
 } from "lucide-react";
-import { SpotifyToggleButton } from "./SpotifyPlayer";
+import { YouTubeToggleButton } from "./YouTubePlayer";
 import { ThemeModeSwitcher } from "./ThemeModeSwitcher";
 import { autoAnimate } from "@formkit/auto-animate";
 import { useCallback, useEffect, useMemo, useRef, useState, type MouseEvent } from "react";
@@ -2027,7 +2027,7 @@ export default function Sidebar() {
       <SidebarFooter className="p-2">
         <SidebarMenu>
           <SidebarMenuItem>
-            <SpotifyToggleButton />
+            <YouTubeToggleButton />
           </SidebarMenuItem>
           {isOnSubPage ? (
             <SidebarMenuItem>

apps/web/src/components/SpotifyPlayer.tsx

@@ -5,9 +5,6 @@ import {
   MaximizeIcon,
   MinimizeIcon,
   Music2Icon,
-  Volume1Icon,
-  Volume2Icon,
-  VolumeXIcon,
   XIcon,
 } from "lucide-react";
 import { useCallback, useMemo, useRef, useState } from "react";
@@ -51,51 +48,6 @@ export function SpotifyToggleButton() {
 // ---------------------------------------------------------------------------
 const CATEGORIES = [...new Set(DEFAULT_PLAYLISTS.map((p) => p.category))];
 
-// ---------------------------------------------------------------------------
-// Volume slider — always accessible in the header bar
-// ---------------------------------------------------------------------------
-function VolumeControl() {
-  const { volume, setVolume } = useSpotifyPlayerStore();
-  const [premuteVolume, setPremuteVolume] = useState<number>(80);
-
-  const toggleMute = useCallback(() => {
-    if (volume > 0) {
-      setPremuteVolume(volume);
-      setVolume(0);
-    } else {
-      setVolume(premuteVolume || 80);
-    }
-  }, [volume, premuteVolume, setVolume]);
-
-  const VolumeIcon = volume === 0 ? VolumeXIcon : volume < 50 ? Volume1Icon : Volume2Icon;
-
-  return (
-    <div className="flex items-center gap-1.5">
-      <button
-        type="button"
-        onClick={toggleMute}
-        className="rounded p-0.5 text-muted-foreground/60 transition-colors hover:text-foreground"
-        aria-label={volume === 0 ? "Unmute" : "Mute"}
-      >
-        <VolumeIcon className="size-3.5" />
-      </button>
-      <input
-        type="range"
-        min={0}
-        max={100}
-        step={1}
-        value={volume}
-        onChange={(e) => setVolume(Number(e.target.value))}
-        className="spotify-volume-slider h-1 w-16 cursor-pointer appearance-none rounded-full bg-muted-foreground/20 accent-emerald-400 [&::-webkit-slider-thumb]:size-2.5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-emerald-400 [&::-webkit-slider-thumb]:transition-transform [&::-webkit-slider-thumb]:hover:scale-125 [&::-moz-range-thumb]:size-2.5 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-emerald-400"
-        aria-label="Volume"
-      />
-      <span className="min-w-[2ch] text-[10px] tabular-nums text-muted-foreground/50">
-        {volume}
-      </span>
-    </div>
-  );
-}
-
 // ---------------------------------------------------------------------------
 // Main Spotify Player Drawer — rendered at the bottom of ChatView
 // ---------------------------------------------------------------------------
@@ -159,8 +111,12 @@ export function SpotifyPlayerDrawer() {
         {/* Spacer */}
         <div className="flex-1" />
 
-        {/* Volume — always accessible */}
-        <VolumeControl />
+        <span
+          className="rounded-full border border-border/60 px-2 py-0.5 text-[10px] text-muted-foreground/60"
+          title="Spotify embeds do not expose volume control. Adjust volume in Spotify or with your system/browser controls."
+        >
+          Volume in Spotify/system
+        </span>
 
         {/* Playlist picker toggle (only when not minimized) */}
         {!minimized && (