fix: task + stop btn

Author: Acorn221

src/activate/registerPearListener.ts

@@ -1,8 +1,6 @@
 import * as vscode from "vscode"
 import { ClineProvider } from "../core/webview/ClineProvider"
 import { assert } from "../utils/util"
-import { CreatorModeConfig } from "../schemas"
-
 
 export const getPearaiExtension = async () => {
 	const pearAiExtension = vscode.extensions.getExtension("pearai.pearai")

webview-ui/src/components/chat/ChatView.tsx

@@ -1239,7 +1239,11 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 				overflow: "hidden",
 			}}>
 			{apiConfiguration?.creatorModeConfig?.creatorMode === true && (
-				<PlanningBar requestedPlan="YEET" isGenerating={isStreaming} />
+				<PlanningBar
+					requestedPlan={task?.text || ""}
+					isGenerating={isStreaming}
+					stopCallback={() => vscode.postMessage({ type: "cancelTask" })}
+				/>
 			)}
 			{task ? (
 				<>

webview-ui/src/components/chat/PlanningBar.tsx

@@ -1,26 +1,26 @@
 import { CodeBracketIcon } from "@heroicons/react/24/outline"
 import { Button } from "./button"
-import { DocumentTextIcon as SolidDocumentTextIcon } from "@heroicons/react/24/solid"
+import { DocumentTextIcon as SolidDocumentTextIcon, StopCircleIcon, StopIcon } from "@heroicons/react/24/solid"
 import { FC } from "react"
 import { cn } from "@/lib/utils"
 
 export type PlanningBarProps = {
   isGenerating?: boolean;
   requestedPlan: string;
-  nextCallback?: () => void;
+  stopCallback?: () => void;
   className?: string;
 };
 
 export const PlanningBar: FC<PlanningBarProps> = ({
   isGenerating,
   requestedPlan,
-  nextCallback,
+  stopCallback,
   className,
 }) => {
   return (
     <div
       className={cn(
-        "bg-[#161718] w-full rounded-full flex text-white justify-between min-w-64 h-10 gap-4 relative overflow-clip",
+        "bg-[#000] w-full rounded-full flex text-white justify-between min-w-64 h-10 gap-4 relative overflow-clip",
         className,
       )}
     >
@@ -38,26 +38,27 @@ export const PlanningBar: FC<PlanningBarProps> = ({
       </div>
 
       <div className="flex justify-center align-middle mr-2 gap-4">
-        <div className="my-auto">
+        <div className="m-auto flex gap-2">
+          <div className="flex my-auto">
           <Button
             variant="default"
             toggled
-            className="bg-black hover:bg-black rounded-r-none"
+            className="bg-black hover:bg-black rounded-r-none cursor-default"
           >
             <SolidDocumentTextIcon />
           </Button>
-          <Button className="rounded-r-none bg-blue-700/60 hover:bg-blue-700/60 ">
+          <Button className="rounded-l-none bg-blue-700/60 hover:bg-blue-700/60 cursor-default">
             <CodeBracketIcon />
           </Button>
+          </div>
+
+          <Button variant="default" className="my-auto">
+            Not Working?
+          </Button>
+          <Button className="my-auto bg-red-500/20 hover:bg-red-500/40" disabled={!isGenerating} onClick={stopCallback}>
+            <StopIcon className="fill-red-500"  />
+          </Button>
         </div>
-        <Button
-          size="default"
-          variant="secondary"
-          className="my-auto rounded-lg text-[0.9em] cursor-pointer"
-          onClick={nextCallback}
-        >
-          Next
-        </Button>
         {/* <ArrowTurnDownLeftIcon className="size-4" /> */}
       </div>
     </div>

webview-ui/src/components/chat/button/index.tsx

@@ -6,7 +6,7 @@ import { cn } from "@/lib/utils"
 // FROM: https://vscode.dev/github/trypear/pearai-submodule/blob/acorn/253-submodule-api-fixed/gui/src/pages/creator/ui/button/index.tsx#L1-L121
 // TODO: UI LIBRARY COMPONENT SHARING SHIZZ HERE!
 const buttonVariants = cva(
-	"inline-flex items-center justify-center gap-2 border-none whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#a1a1aa] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+	"inline-flex items-center justify-center gap-2 border-none whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#a1a1aa] disabled:pointer-events-none cursor-pointer disabled:cursor-default disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 	{
 		variants: {
 			variant: {