feat: walkthrough

Author: AkatQuas

packages/livekit/src/chat/live-chat-kit.ts

@@ -16,6 +16,7 @@ import {
   type PrepareRequestGetters,
 } from "./flexible-chat-transport";
 import { compactTask } from "./llm";
+import { walkthroughTask } from "./llm/walkthrough-task";
 import { createModel } from "./models";
 
 const logger = getLogger("LiveChatKit");
@@ -97,6 +98,7 @@ export class LiveChatKit<
     messages: Message[];
   }) => void;
   readonly compact: () => Promise<string>;
+  readonly walkthrough: () => Promise<string>;
   private lastStepStartTimestamp: number | undefined;
 
   constructor({
@@ -202,6 +204,20 @@ export class LiveChatKit<
       }
       return summary;
     };
+    this.walkthrough = async () => {
+      const { messages } = this.chat;
+      const model = createModel({ llm: getters.getLLM() });
+      const walkthrough = await walkthroughTask({
+        store: this.store,
+        taskId: this.taskId,
+        model,
+        messages,
+      });
+      if (!walkthrough) {
+        throw new Error("Failed to walkthrough task");
+      }
+      return walkthrough;
+    };
   }
 
   init(cwd: string | undefined, options?: InitOptions | undefined) {

packages/livekit/src/chat/llm/walkthrough-task.ts

@@ -0,0 +1,90 @@
+import type { LanguageModelV2 } from "@ai-sdk/provider";
+import { formatters, getLogger, prompts } from "@getpochi/common";
+import type { Store } from "@livestore/livestore";
+import { convertToModelMessages, generateText } from "ai";
+import { makeDownloadFunction } from "../../store-blob";
+import type { Message } from "../../types";
+
+const logger = getLogger("walkthroughTask");
+
+export async function walkthroughTask({
+  store,
+  taskId,
+  model,
+  messages,
+  abortSignal,
+}: {
+  store: Store;
+  taskId: string;
+  model: LanguageModelV2;
+  messages: Message[];
+  abortSignal?: AbortSignal;
+}): Promise<string | undefined> {
+  if (messages.length < 1) {
+    throw new Error("No messages to walkthrough");
+  }
+
+  try {
+    const text = prompts.inlineCompact(
+      await generateWalkthrough(
+        store,
+        taskId,
+        model,
+        abortSignal,
+        messages.slice(0, -1),
+      ),
+      messages.length - 1,
+    );
+
+    return text;
+  } catch (err) {
+    logger.warn("Failed to create walkthrough", err);
+  }
+}
+
+async function generateWalkthrough(
+  store: Store,
+  taskId: string,
+  model: LanguageModelV2,
+  abortSignal: AbortSignal | undefined,
+  inputMessages: Message[],
+) {
+  const messages: Message[] = [
+    ...inputMessages,
+    {
+      id: crypto.randomUUID(),
+      role: "user",
+      parts: [
+        {
+          type: "text",
+          text: 'Please create "walkthrough" artifacts for the conversation above message. This type of artifact includes a concise summary of the changes that have been made to remind the user of what has happened in the active conversation.',
+          // AT "2025/12/15 16:56"
+          // TODO MAYBE (╭ರ_•́)
+          // fine tune this prompt
+        },
+      ],
+    },
+  ];
+
+  const resp = await generateText({
+    providerOptions: {
+      pochi: {
+        taskId,
+        version: globalThis.POCHI_CLIENT,
+        useCase: "walkthrough-task",
+      },
+    },
+    model,
+    prompt: convertToModelMessages(
+      formatters.llm(messages, {
+        removeSystemReminder: true,
+      }),
+    ),
+    experimental_download: makeDownloadFunction(store),
+    abortSignal,
+    maxOutputTokens: 3_000,
+    maxRetries: 0,
+  });
+
+  return resp.text;
+}

packages/vscode-webui/src/components/token-usage.tsx

@@ -32,12 +32,18 @@ interface Props {
     newCompactTask: () => void;
     enabled: boolean;
   };
+  walkthrough?: {
+    walkthroughTaskPending: boolean;
+    walkthroughTask: () => void;
+    enabled: boolean;
+  };
 }
 
 export function TokenUsage({
   totalTokens,
   className,
   compact,
+  walkthrough,
   selectedModel,
 }: Props) {
   const { t } = useTranslation();
@@ -223,6 +229,29 @@ export function TokenUsage({
                 {minTokenTooltip}
               </Tooltip>
             </TooltipProvider>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <div className="inline-block">
+                    <Button
+                      variant="secondary"
+                      size="sm"
+                      className="text-xs"
+                      onClick={() => {
+                        walkthrough?.walkthroughTask();
+                        setIsOpen(false);
+                      }}
+                      disabled={!walkthrough?.enabled}
+                    >
+                      {walkthrough?.walkthroughTaskPending
+                        ? t("tokenUsage.walkthroughGenerating")
+                        : t("tokenUsage.walkthroughTask")}
+                    </Button>
+                  </div>
+                </TooltipTrigger>
+                {minTokenTooltip}
+              </Tooltip>
+            </TooltipProvider>
           </div>
         </div>
       </PopoverContent>

packages/vscode-webui/src/features/chat/components/chat-toolbar.tsx

@@ -14,8 +14,7 @@ import {
 } from "@/components/ui/hover-card";
 import { ApprovalButton, type useApprovalAndRetry } from "@/features/approval";
 import { useAutoApproveGuard, useTaskChangedFiles } from "@/features/chat";
-import { useSelectedModels } from "@/features/settings";
-import { AutoApproveMenu } from "@/features/settings";
+import { AutoApproveMenu, useSelectedModels } from "@/features/settings";
 import { TodoList, useTodos } from "@/features/todo";
 import { useAddCompleteToolCalls } from "@/lib/hooks/use-add-complete-tool-calls";
 import type { useAttachmentUpload } from "@/lib/hooks/use-attachment-upload";
@@ -33,6 +32,7 @@ import { useChatSubmit } from "../hooks/use-chat-submit";
 import { useInlineCompactTask } from "../hooks/use-inline-compact-task";
 import { useNewCompactTask } from "../hooks/use-new-compact-task";
 import type { SubtaskInfo } from "../hooks/use-subtask-info";
+import { useWalkthroughTask } from "../hooks/use-walkthrough-task";
 import { ChatInputForm } from "./chat-input-form";
 import { ErrorMessageView } from "./error-message-view";
 import { CompleteSubtaskButton } from "./subtask";
@@ -41,6 +41,7 @@ interface ChatToolbarProps {
   task?: Task;
   approvalAndRetry: ReturnType<typeof useApprovalAndRetry>;
   compact: () => Promise<string>;
+  walkthrough: () => Promise<string>;
   chat: UseChatHelpers<Message>;
   attachmentUpload: ReturnType<typeof useAttachmentUpload>;
   isSubTask: boolean;
@@ -54,6 +55,7 @@ export const ChatToolbar: React.FC<ChatToolbarProps> = ({
   chat,
   approvalAndRetry: { pendingApproval, retry },
   compact,
+  walkthrough,
   attachmentUpload,
   isSubTask,
   subtask,
@@ -106,6 +108,9 @@ export const ChatToolbar: React.FC<ChatToolbarProps> = ({
     compact,
   });
 
+  const { walkthroughTask, walkthroughTaskPending } = useWalkthroughTask({
+    walkthrough,
+  });
   const {
     isExecuting,
     isBusyCore,
@@ -191,6 +196,11 @@ export const ChatToolbar: React.FC<ChatToolbarProps> = ({
     newCompactTask,
     newCompactTaskPending,
   };
+  const walkthroughOptions = {
+    enabled: !isLoading && !isExecuting && !walkthroughTaskPending,
+    walkthroughTaskPending,
+    walkthroughTask,
+  };
 
   const messageContent = useMemo(
     () => JSON.stringify(messages, null, 2),
@@ -290,6 +300,7 @@ export const ChatToolbar: React.FC<ChatToolbarProps> = ({
               totalTokens={totalTokens}
               className="mr-5"
               compact={compactOptions}
+              walkthrough={walkthroughOptions}
               selectedModel={selectedModel}
             />
           )}

packages/vscode-webui/src/features/chat/hooks/use-walkthrough-task.ts

@@ -0,0 +1,43 @@
+import { vscodeHost } from "@/lib/vscode";
+import type { Task } from "@getpochi/livekit";
+import { useMutation } from "@tanstack/react-query";
+
+export const useWalkthroughTask = ({
+  task,
+  walkthrough,
+}: {
+  task?: Task;
+  walkthrough: () => Promise<string>;
+}) => {
+  const mutation = useMutation({
+    mutationFn: async () => {
+      return walkthrough();
+    },
+    onSuccess: async (walkthroughText) => {
+      const cwd = task?.cwd;
+      if (!cwd) {
+        throw new Error("Cannot get task cwd when creating walkthrough.");
+      }
+
+      // AT "2025/12/16 10:04"
+      // TODO IMPLEMENT ..._〆(°▽°*)
+      await vscodeHost.executeToolCall(
+        "writeToFile",
+        {
+          path: ".pochi/walkthrough/xx.md",
+          content: walkthroughText,
+        },
+        {
+          toolCallId: "mock-tool-call-id",
+          // abortSignal: undefined,
+        },
+      );
+      // toast or notification
+    },
+  });
+
+  return {
+    walkthroughTaskPending: mutation.isPending,
+    walkthroughTask: () => mutation.mutate(),
+  };
+};

packages/vscode-webui/src/features/chat/page.tsx

@@ -9,8 +9,8 @@ import { vscodeHost } from "@/lib/vscode";
 import { useChat } from "@ai-sdk/react";
 import { formatters } from "@getpochi/common";
 import type { UserInfo } from "@getpochi/common/configuration";
-import { type Task, catalog, taskCatalog } from "@getpochi/livekit";
 import type { Message } from "@getpochi/livekit";
+import { type Task, catalog, taskCatalog } from "@getpochi/livekit";
 import { useLiveChatKit } from "@getpochi/livekit/react";
 import type { Todo } from "@getpochi/tools";
 import { useStore } from "@livestore/react";
@@ -438,6 +438,7 @@ function Chat({
             task={task}
             todosRef={todosRef}
             compact={chatKit.compact}
+            walkthrough={chatKit.walkthrough}
             approvalAndRetry={approvalAndRetry}
             attachmentUpload={attachmentUpload}
             isSubTask={isSubTask}

packages/vscode-webui/src/i18n/locales/en.json

@@ -38,6 +38,8 @@
   },
   "tokenUsage": {
     "compacting": "Compacting...",
+    "walkthroughGenerating": "Generating walkthrough",
+    "walkthroughTask": "Walkthrough Task",
     "ofTokens": "% of {{tokens}} tokens",
     "rules": "Rules",
     "contextWindow": "Context Window",