Add menu items UI for about and problem pages (#6)

app/components/chat/Chat.client.tsx

@@ -21,7 +21,7 @@ import { debounce } from '~/utils/debounce';
 import { useSettings } from '~/lib/hooks/useSettings';
 import { useSearchParams } from '@remix-run/react';
 import { createSampler } from '~/utils/sampler';
-import { saveProjectPrompt } from './Messages.client';
+import { saveProjectContents } from './Messages.client';
 import type { SimulationPromptClientData } from '~/lib/replay/SimulationPrompt';
 import { getIFrameSimulationData } from '~/lib/replay/Recording';
 import { getCurrentIFrame } from '../workbench/Preview';
@@ -246,7 +246,7 @@ export const ChatImpl = memo(
        */
       await workbenchStore.saveAllFiles();
 
-      const { contentBase64, uniqueProjectName } = await workbenchStore.generateZipBase64();
+      const { contentBase64 } = await workbenchStore.generateZipBase64();
 
       let simulationClientData: SimulationPromptClientData | undefined;
       if (simulation) {
@@ -323,7 +323,7 @@ export const ChatImpl = memo(
       // The project contents are associated with the last message present when
       // the user message is added.
       const lastMessage = messages[messages.length - 1];
-      saveProjectPrompt(lastMessage.id, { content: contentBase64, uniqueProjectName, input: _input });
+      saveProjectContents(lastMessage.id, { content: contentBase64 });
     };
 
     /**

app/components/chat/LoadProblemButton.tsx

@@ -3,8 +3,8 @@ import type { Message } from 'ai';
 import { toast } from 'react-toastify';
 import { createChatFromFolder, type FileArtifact } from '~/utils/folderImport';
 import { logStore } from '~/lib/stores/logs'; // Assuming logStore is imported from this location
-import { sendCommandDedicatedClient } from '~/lib/replay/ReplayProtocolClient';
-import type { BoltProblem } from './Messages.client';
+import { assert, sendCommandDedicatedClient } from '~/lib/replay/ReplayProtocolClient';
+import type { BoltProblem } from '~/components/sidebar/SaveProblem';
 import JSZip from 'jszip';
 
 interface LoadProblemButtonProps {
@@ -12,6 +12,58 @@ interface LoadProblemButtonProps {
   importChat?: (description: string, messages: Message[]) => Promise<void>;
 }
 
+export async function loadProblem(problemId: string, importChat: (description: string, messages: Message[]) => Promise<void>) {
+  let problem: BoltProblem | null = null;
+  try {
+    const rv = await sendCommandDedicatedClient({
+      method: "Recording.globalExperimentalCommand",
+      params: {
+        name: "fetchBoltProblem",
+        params: { problemId },
+      },
+    });
+    console.log("FetchProblemRval", rv);
+    problem = (rv as { rval: BoltProblem }).rval;
+  } catch (error) {
+    console.error("Error fetching problem", error);
+    toast.error("Failed to fetch problem");
+  }
+
+  if (!problem) {
+    return;
+  }
+
+  const problemContents = problem.prompt.content;
+  const problemTitle = problem.title;
+
+  const zip = new JSZip();
+  await zip.loadAsync(problemContents, { base64: true });
+
+  const fileArtifacts: FileArtifact[] = [];
+  for (const [key, object] of Object.entries(zip.files)) {
+    if (object.dir) continue;
+    fileArtifacts.push({
+      content: await object.async('text'),
+      path: key,
+    });
+  }
+
+  try {
+    const messages = await createChatFromFolder(fileArtifacts, [], "problem");
+    await importChat(`Problem: ${problemTitle}`, [...messages]);
+
+    logStore.logSystem('Problem loaded successfully', {
+      problemId,
+      textFileCount: fileArtifacts.length,
+    });
+    toast.success('Problem loaded successfully');
+  } catch (error) {
+    logStore.logError('Failed to load problem', error);
+    console.error('Failed to load problem:', error);
+    toast.error('Failed to load problem');
+  }
+}
+
 export const LoadProblemButton: React.FC<LoadProblemButtonProps> = ({ className, importChat }) => {
   const [isLoading, setIsLoading] = useState(false);
   const [isInputOpen, setIsInputOpen] = useState(false);
@@ -22,61 +74,9 @@ export const LoadProblemButton: React.FC<LoadProblemButtonProps> = ({ className,
 
     const problemId = (document.getElementById('problem-input') as HTMLInputElement)?.value;
 
-    let problem: BoltProblem | null = null;
-    try {
-      const rv = await sendCommandDedicatedClient({
-        method: "Recording.globalExperimentalCommand",
-        params: {
-          name: "fetchBoltProblem",
-          params: { problemId },
-        },
-      });
-      console.log("FetchProblemRval", rv);
-      problem = (rv as any).rval.problem;
-    } catch (error) {
-      console.error("Error fetching problem", error);
-      toast.error("Failed to fetch problem");
-    }
-
-    if (!problem) {
-      return;
-    }
-
-    console.log("Problem", problem);
-
-    const zip = new JSZip();
-    await zip.loadAsync(problem.prompt.content, { base64: true });
-
-    const fileArtifacts: FileArtifact[] = [];
-    for (const [key, object] of Object.entries(zip.files)) {
-      if (object.dir) continue;
-      fileArtifacts.push({
-        content: await object.async('text'),
-        path: key,
-      });
-    }
-
-    const folderName = problem.prompt.uniqueProjectName;
-
-    try {
-      const messages = await createChatFromFolder(fileArtifacts, [], folderName);
-
-      if (importChat) {
-        await importChat(folderName, [...messages]);
-      }
-
-      logStore.logSystem('Problem loaded successfully', {
-        problemId,
-        textFileCount: fileArtifacts.length,
-      });
-      toast.success('Problem loaded successfully');
-    } catch (error) {
-      logStore.logError('Failed to load problem', error);
-      console.error('Failed to load problem:', error);
-      toast.error('Failed to load problem');
-    } finally {
-      setIsLoading(false);
-    }
+    assert(importChat, "importChat is required");
+    await loadProblem(problemId, importChat);
+    setIsLoading(false);
   };
 
   return (

app/components/chat/Messages.client.tsx

@@ -9,9 +9,6 @@ import { forkChat } from '~/lib/persistence/db';
 import { toast } from 'react-toastify';
 import WithTooltip from '~/components/ui/Tooltip';
 import { assert, sendCommandDedicatedClient } from "~/lib/replay/ReplayProtocolClient";
-import ReactModal from 'react-modal';
-
-ReactModal.setAppElement('#root');
 
 interface MessagesProps {
   id?: string;
@@ -20,282 +17,89 @@ interface MessagesProps {
   messages?: Message[];
 }
 
-// Combines information about the contents of a project along with a prompt
-// from the user and any associated Replay data to accomplish a task. Together
-// this information is enough that the model should be able to generate a
-// suitable fix.
-//
-// Must be JSON serializable.
-interface ProjectPrompt {
+interface ProjectContents {
   content: string; // base64 encoded
-  uniqueProjectName: string;
-  input: string;
 }
 
-export interface BoltProblem {
-  title: string;
-  description: string;
-  name: string;
-  email: string;
-  prompt: ProjectPrompt;
+const gProjectContentsByMessageId = new Map<string, ProjectContents>();
+
+export function saveProjectContents(messageId: string, contents: ProjectContents) {
+  gProjectContentsByMessageId.set(messageId, contents);
 }
 
-const gProjectPromptsByMessageId = new Map<string, ProjectPrompt>();
-
-export function saveProjectPrompt(messageId: string, prompt: ProjectPrompt) {
-  gProjectPromptsByMessageId.set(messageId, prompt);
-}
+// The rewind button is not fully implemented yet.
+const EnableRewindButton = false;
 
 export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>((props: MessagesProps, ref) => {
   const { id, isStreaming = false, messages = [] } = props;
-  const location = useLocation();
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [currentProjectPrompt, setCurrentProjectPrompt] = useState<ProjectPrompt | null>(null);
-  const [formData, setFormData] = useState({
-    title: '',
-    description: '',
-    name: '',
-    email: ''
-  });
-  const [problemId, setProblemId] = useState<string | null>(null);
 
-  const handleRewind = (messageId: string) => {
-    const searchParams = new URLSearchParams(location.search);
-    searchParams.set('rewindTo', messageId);
-    window.location.search = searchParams.toString();
-  };
-
-  const handleFork = async (messageId: string) => {
-    try {
-      if (!db || !chatId.get()) {
-        toast.error('Chat persistence is not available');
-        return;
-      }
-
-      const urlId = await forkChat(db, chatId.get()!, messageId);
-      window.location.href = `/chat/${urlId}`;
-    } catch (error) {
-      toast.error('Failed to fork chat: ' + (error as Error).message);
-    }
-  };
-
-  const handleSaveProblem = (prompt: ProjectPrompt) => {
-    setCurrentProjectPrompt(prompt);
-    setIsModalOpen(true);
-    setFormData({
-      title: '',
-      description: '',
-      name: '',
-      email: '',
-    });
-    setProblemId(null);
-  };
-
-  const handleSubmitProblem = async (e: React.MouseEvent) => {
-    // Add validation here
-    if (!formData.title) {
-      toast.error('Please fill in title field');
-      return;
-    }
-
-    toast.info("Submitting problem...");
-
-    console.log("SubmitProblem", formData);
-
-    assert(currentProjectPrompt);
-
-    const problem: BoltProblem = {
-      title: formData.title,
-      description: formData.description,
-      name: formData.name,
-      email: formData.email,
-      prompt: currentProjectPrompt,
-    };
-
-    try {
-      const rv = await sendCommandDedicatedClient({
-        method: "Recording.globalExperimentalCommand",
-        params: {
-          name: "submitBoltProblem",
-          params: { problem },
-        },
-      });
-      console.log("SubmitProblemRval", rv);
-      setProblemId((rv as any).rval.problemId);
-    } catch (error) {
-      console.error("Error submitting problem", error);
-      toast.error("Failed to submit problem");
-    }
-  }
-
-  const getLastMessageProjectPrompt = (index: number) => {
+  const getLastMessageProjectContents = (index: number) => {
     // The message index is for the model response, and the project
-    // prompt will be associated with the last message present when
+    // contents will be associated with the last message present when
     // the user prompt was sent to the model. So look back two messages
-    // for the associated prompt.
+    // for the previous contents.
     if (index < 2) {
-      return null;
+      return undefined;
     }
     const previousMessage = messages[index - 2];
-    return gProjectPromptsByMessageId.get(previousMessage.id);
-  };
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { name, value } = e.target;
-    setFormData(prev => ({
-      ...prev,
-      [name]: value
-    }));
+    return gProjectContentsByMessageId.get(previousMessage.id);
   };
 
   return (
-    <>
-      <div id={id} ref={ref} className={props.className}>
-        {messages.length > 0
-          ? messages.map((message, index) => {
-              const { role, content, id: messageId } = message;
-              const isUserMessage = role === 'user';
-              const isFirst = index === 0;
-              const isLast = index === messages.length - 1;
+    <div id={id} ref={ref} className={props.className}>
+      {messages.length > 0
+        ? messages.map((message, index) => {
+            const { role, content, id: messageId } = message;
+            const isUserMessage = role === 'user';
+            const isFirst = index === 0;
+            const isLast = index === messages.length - 1;
 
-              return (
-                <div
-                  key={index}
-                  className={classNames('flex gap-4 p-6 w-full rounded-[calc(0.75rem-1px)]', {
-                    'bg-bolt-elements-messages-background': isUserMessage || !isStreaming || (isStreaming && !isLast),
-                    'bg-gradient-to-b from-bolt-elements-messages-background from-30% to-transparent':
-                      isStreaming && isLast,
-                    'mt-4': !isFirst,
-                  })}
-                >
-                  {isUserMessage && (
-                    <div className="flex items-center justify-center w-[34px] h-[34px] overflow-hidden bg-white text-gray-600 rounded-full shrink-0 self-start">
-                      <div className="i-ph:user-fill text-xl"></div>
-                    </div>
-                  )}
-                  <div className="grid grid-col-1 w-full">
-                    {isUserMessage ? (
-                      <UserMessage content={content} />
-                    ) : (
-                      <AssistantMessage content={content} annotations={message.annotations} />
-                    )}
+            return (
+              <div
+                key={index}
+                className={classNames('flex gap-4 p-6 w-full rounded-[calc(0.75rem-1px)]', {
+                  'bg-bolt-elements-messages-background': isUserMessage || !isStreaming || (isStreaming && !isLast),
+                  'bg-gradient-to-b from-bolt-elements-messages-background from-30% to-transparent':
+                    isStreaming && isLast,
+                  'mt-4': !isFirst,
+                })}
+              >
+                {isUserMessage && (
+                  <div className="flex items-center justify-center w-[34px] h-[34px] overflow-hidden bg-white text-gray-600 rounded-full shrink-0 self-start">
+                    <div className="i-ph:user-fill text-xl"></div>
                   </div>
-                  {!isUserMessage && (
-                    <div className="flex gap-2 flex-col lg:flex-row">
-                      {messageId && (
-                        <WithTooltip tooltip="Revert to this message">
-                          <button
-                            onClick={() => handleRewind(messageId)}
-                            key="i-ph:arrow-u-up-left"
-                            className={classNames(
-                              'i-ph:arrow-u-up-left',
-                              'text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors',
-                            )}
-                          />
-                        </WithTooltip>
-                      )}
-
-                      <WithTooltip tooltip="Fork chat from this message">
-                        <button
-                          onClick={() => handleFork(messageId)}
-                          key="i-ph:git-fork"
-                          className={classNames(
-                            'i-ph:git-fork',
-                            'text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors',
-                          )}
-                        />
-                      </WithTooltip>
-
-                      {getAnnotationsTokensUsage(message.annotations) &&
-                       getLastMessageProjectPrompt(index) && (
-                        <WithTooltip tooltip="Save prompt as new problem">
-                          <button
-                            onClick={() => {
-                              const prompt = getLastMessageProjectPrompt(index);
-                              assert(prompt);
-                              handleSaveProblem(prompt);
-                            }}
-                            key="i-ph:export"
-                            className={classNames(
-                              'i-ph:export',
-                              'text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors',
-                            )}
-                          />
-                        </WithTooltip>
-                      )}
-                    </div>
+                )}
+                <div className="grid grid-col-1 w-full">
+                  {isUserMessage ? (
+                    <UserMessage content={content} />
+                  ) : (
+                    <AssistantMessage content={content} annotations={message.annotations} />
                   )}
                 </div>
-              );
-            })
-          : null}
-        {isStreaming && (
-          <div className="text-center w-full text-bolt-elements-textSecondary i-svg-spinners:3-dots-fade text-4xl mt-4"></div>
-        )}
-      </div>
-
-      <ReactModal
-        isOpen={isModalOpen}
-        onRequestClose={() => setIsModalOpen(false)}
-        className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg p-6 max-w-2xl w-full z-50"
-        overlayClassName="fixed inset-0 bg-black bg-opacity-50 z-40"
-      >
-        {problemId && (
-          <>
-            <div className="text-center mb-2">Problem Submitted: {problemId}</div>
-            <div className="text-center">
-              <div className="flex justify-center gap-2 mt-4">
-                <button onClick={() => setIsModalOpen(false)} className="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">Close</button>
+                {!isUserMessage && messageId && getLastMessageProjectContents(index) && EnableRewindButton && (
+                  <div className="flex gap-2 flex-col lg:flex-row">
+                    <WithTooltip tooltip="Rewind to this message">
+                      <button
+                        onClick={() => {
+                          const contents = getLastMessageProjectContents(index);
+                          assert(contents);
+                        }}
+                        key="i-ph:arrow-u-up-left"
+                        className={classNames(
+                          'i-ph:arrow-u-up-left',
+                          'text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors',
+                        )}
+                      />
+                    </WithTooltip>
+                  </div>
+                )}
               </div>
-            </div>
-          </>
-        )}
-        {!problemId && (
-          <>
-            <div className="text-center">Save prompts as new problems when AI results are unsatisfactory.</div>
-            <div className="text-center">Problems are publicly visible and are used to improve AI performance.</div>
-            <div style={{ marginTop: "10px" }}>
-              <div className="grid grid-cols-[auto_1fr] gap-4 max-w-md mx-auto">
-                <div className="flex items-center">Title:</div>
-                <input type="text"
-                  name="title"
-                  className="bg-bolt-elements-background-depth-1 text-bolt-elements-textPrimary rounded px-2 w-full border border-gray-300"
-                  value={formData.title}
-                  onChange={handleInputChange}
-                />
-
-                <div className="flex items-center">Description:</div>
-                <input type="text"
-                  name="description"
-                  className="bg-bolt-elements-background-depth-1 text-bolt-elements-textPrimary rounded px-2 w-full border border-gray-300"
-                  value={formData.description}
-                  onChange={handleInputChange}
-                />
-
-                <div className="flex items-center">Name (optional):</div>
-                <input type="text"
-                  name="name"
-                  className="bg-bolt-elements-background-depth-1 text-bolt-elements-textPrimary rounded px-2 w-full border border-gray-300"
-                  value={formData.name}
-                  onChange={handleInputChange}
-                />
-
-                <div className="flex items-center">Email (optional):</div>
-                <input type="text"
-                  name="email"
-                  className="bg-bolt-elements-background-depth-1 text-bolt-elements-textPrimary rounded px-2 w-full border border-gray-300"
-                  value={formData.email}
-                  onChange={handleInputChange}
-                />
-              </div>
-              <div className="flex justify-center gap-2 mt-4">
-                <button onClick={handleSubmitProblem} className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">Submit</button>
-                <button onClick={() => setIsModalOpen(false)} className="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">Cancel</button>
-              </div>
-            </div>
-          </>
-        )}
-      </ReactModal>
-    </>
+            );
+          })
+        : null}
+      {isStreaming && (
+        <div className="text-center w-full text-bolt-elements-textSecondary i-svg-spinners:3-dots-fade text-4xl mt-4"></div>
+      )}
+    </div>
   );
 });

app/components/chat/chatExportAndImport/ImportButtons.tsx

@@ -1,7 +1,6 @@
 import type { Message } from 'ai';
 import { toast } from 'react-toastify';
 import { ImportFolderButton } from '~/components/chat/ImportFolderButton';
-import { LoadProblemButton } from '~/components/chat/LoadProblemButton';
 
 type ChatData = {
   messages?: Message[]; // Standard Bolt format
@@ -72,10 +71,6 @@ export function ImportButtons(importChat: ((description: string, messages: Messa
             importChat={importChat}
             className="px-4 py-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary hover:bg-bolt-elements-background-depth-3 transition-all flex items-center gap-2"
           />
-          <LoadProblemButton
-            importChat={importChat}
-            className="px-4 py-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary hover:bg-bolt-elements-background-depth-3 transition-all flex items-center gap-2"
-          />
         </div>
       </div>
     </div>

app/components/sidebar/Menu.client.tsx

@@ -11,6 +11,8 @@ import { logger } from '~/utils/logger';
 import { HistoryItem } from './HistoryItem';
 import { binDates } from './date-binning';
 import { useSearchFilter } from '~/lib/hooks/useSearchFilter';
+import ReactModal from 'react-modal';
+import { SaveProblem } from './SaveProblem';
 
 const menuVariants = {
   closed: {
@@ -35,25 +37,6 @@ const menuVariants = {
 
 type DialogContent = { type: 'delete'; item: ChatHistoryItem } | null;
 
-function CurrentDateTime() {
-  const [dateTime, setDateTime] = useState(new Date());
-
-  useEffect(() => {
-    const timer = setInterval(() => {
-      setDateTime(new Date());
-    }, 60000); // Update every minute
-
-    return () => clearInterval(timer);
-  }, []);
-
-  return (
-    <div className="flex items-center gap-2 px-4 py-3 font-bold text-gray-700 dark:text-gray-300 border-b border-bolt-elements-borderColor">
-      <div className="h-4 w-4 i-ph:clock-thin" />
-      {dateTime.toLocaleDateString()} {dateTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
-    </div>
-  );
-}
-
 export const Menu = () => {
   const { duplicateCurrentChat, exportChat } = useChatHistory();
   const menuRef = useRef<HTMLDivElement>(null);
@@ -145,9 +128,23 @@ export const Menu = () => {
       variants={menuVariants}
       className="flex selection-accent flex-col side-menu fixed top-0 w-[350px] h-full bg-bolt-elements-background-depth-2 border-r rounded-r-3xl border-bolt-elements-borderColor z-sidebar shadow-xl shadow-bolt-elements-sidebar-dropdownShadow text-sm"
     >
-      <div className="h-[60px]" /> {/* Spacer for top margin */}
-      <CurrentDateTime />
+      <div className="h-[45px]" /> {/* Spacer for top margin */}
       <div className="flex-1 flex flex-col h-full w-full overflow-hidden">
+        <div className="flex gap-2 px-2 mb-0 ml-2.5">
+          <a
+            href="/problems"
+            className="flex gap-2 bg-bolt-elements-sidebar-buttonBackgroundDefault text-bolt-elements-sidebar-buttonText hover:bg-bolt-elements-sidebar-buttonBackgroundHover rounded-md p-2 transition-theme"
+          >
+            Problems
+          </a>
+          <SaveProblem />
+          <a
+            href="/about"
+            className="flex gap-2 bg-bolt-elements-sidebar-buttonBackgroundDefault text-bolt-elements-sidebar-buttonText hover:bg-bolt-elements-sidebar-buttonBackgroundHover rounded-md p-2 transition-theme"
+          >
+            About
+          </a>
+        </div>
         <div className="p-4 select-none">
           <a
             href="/"
@@ -227,6 +224,7 @@ export const Menu = () => {
         </div>
       </div>
       <SettingsWindow open={isSettingsOpen} onClose={() => setIsSettingsOpen(false)} />
+      <SaveProblem />
     </motion.div>
   );
 };

app/components/sidebar/SaveProblem.tsx

@@ -0,0 +1,170 @@
+import { toast } from "react-toastify";
+import ReactModal from 'react-modal';
+import { assert, sendCommandDedicatedClient } from "~/lib/replay/ReplayProtocolClient";
+import { useState } from "react";
+import { workbenchStore } from "~/lib/stores/workbench";
+
+ReactModal.setAppElement('#root');
+
+// Combines information about the contents of a project along with a prompt
+// from the user and any associated Replay data to accomplish a task. Together
+// this information is enough that the model should be able to generate a
+// suitable fix.
+//
+// Must be JSON serializable.
+interface ProjectPrompt {
+  content: string; // base64 encoded zip file
+}
+
+export interface BoltProblem {
+  version: number;
+  title: string;
+  description: string;
+  name: string;
+  email: string;
+  prompt: ProjectPrompt;
+}
+
+export function SaveProblem() {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [formData, setFormData] = useState({
+    title: '',
+    description: '',
+    name: '',
+    email: ''
+  });
+  const [problemId, setProblemId] = useState<string | null>(null);
+
+  const handleSaveProblem = () => {
+    setIsModalOpen(true);
+    setFormData({
+      title: '',
+      description: '',
+      name: '',
+      email: '',
+    });
+    setProblemId(null);
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+
+  const handleSubmitProblem = async () => {
+    // Add validation here
+    if (!formData.title) {
+      toast.error('Please fill in title field');
+      return;
+    }
+
+    toast.info("Submitting problem...");
+
+    console.log("SubmitProblem", formData);
+
+    await workbenchStore.saveAllFiles();
+    const { contentBase64 } = await workbenchStore.generateZipBase64();
+    const prompt: ProjectPrompt = { content: contentBase64 };
+
+    const problem: BoltProblem = {
+      version: 1,
+      title: formData.title,
+      description: formData.description,
+      name: formData.name,
+      email: formData.email,
+      prompt,
+    };
+
+    try {
+      const rv = await sendCommandDedicatedClient({
+        method: "Recording.globalExperimentalCommand",
+        params: {
+          name: "submitBoltProblem",
+          params: { problem },
+        },
+      });
+      console.log("SubmitProblemRval", rv);
+      setProblemId((rv as any).rval.problemId);
+    } catch (error) {
+      console.error("Error submitting problem", error);
+      toast.error("Failed to submit problem");
+    }
+  }
+
+  return (
+    <>
+      <a
+        href="#"
+        className="flex gap-2 bg-bolt-elements-sidebar-buttonBackgroundDefault text-bolt-elements-sidebar-buttonText hover:bg-bolt-elements-sidebar-buttonBackgroundHover rounded-md p-2 transition-theme"
+        onClick={handleSaveProblem}
+      >
+        Save Problem
+      </a>
+      <ReactModal
+        isOpen={isModalOpen}
+        onRequestClose={() => setIsModalOpen(false)}
+        className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg p-6 max-w-2xl w-full z-50"
+        overlayClassName="fixed inset-0 bg-black bg-opacity-50 z-40"
+      >
+        {problemId && (
+          <>
+            <div className="text-center mb-2">Problem Submitted: {problemId}</div>
+            <div className="text-center">
+              <div className="flex justify-center gap-2 mt-4">
+                <button onClick={() => setIsModalOpen(false)} className="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">Close</button>
+              </div>
+            </div>
+          </>
+        )}
+        {!problemId && (
+          <>
+            <div className="text-center">Save prompts as new problems when AI results are unsatisfactory.</div>
+            <div className="text-center">Problems are publicly visible and are used to improve AI performance.</div>
+            <div style={{ marginTop: "10px" }}>
+              <div className="grid grid-cols-[auto_1fr] gap-4 max-w-md mx-auto">
+                <div className="flex items-center">Title:</div>
+                <input type="text"
+                  name="title"
+                  className="bg-bolt-elements-background-depth-1 text-bolt-elements-textPrimary rounded px-2 w-full border border-gray-300"
+                  value={formData.title}
+                  onChange={handleInputChange}
+                />
+
+                <div className="flex items-center">Description:</div>
+                <input type="text"
+                  name="description"
+                  className="bg-bolt-elements-background-depth-1 text-bolt-elements-textPrimary rounded px-2 w-full border border-gray-300"
+                  value={formData.description}
+                  onChange={handleInputChange}
+                />
+
+                <div className="flex items-center">Name (optional):</div>
+                <input type="text"
+                  name="name"
+                  className="bg-bolt-elements-background-depth-1 text-bolt-elements-textPrimary rounded px-2 w-full border border-gray-300"
+                  value={formData.name}
+                  onChange={handleInputChange}
+                />
+
+                <div className="flex items-center">Email (optional):</div>
+                <input type="text"
+                  name="email"
+                  className="bg-bolt-elements-background-depth-1 text-bolt-elements-textPrimary rounded px-2 w-full border border-gray-300"
+                  value={formData.email}
+                  onChange={handleInputChange}
+                />
+              </div>
+              <div className="flex justify-center gap-2 mt-4">
+                <button onClick={handleSubmitProblem} className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">Submit</button>
+                <button onClick={() => setIsModalOpen(false)} className="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">Cancel</button>
+              </div>
+            </div>
+          </>
+        )}
+      </ReactModal>
+    </>
+  );
+}

app/lib/persistence/useChatHistory.ts

@@ -14,6 +14,7 @@ import {
   duplicateChat,
   createChatFromMessages,
 } from './db';
+import { loadProblem } from '~/components/chat/LoadProblemButton';
 
 export interface ChatHistoryItem {
   id: string;
@@ -32,13 +33,31 @@ export const description = atom<string | undefined>(undefined);
 
 export function useChatHistory() {
   const navigate = useNavigate();
-  const { id: mixedId } = useLoaderData<{ id?: string }>();
+  const { id: mixedId, problemId } = useLoaderData<{ id?: string, problemId?: string }>() ?? {};
   const [searchParams] = useSearchParams();
 
   const [initialMessages, setInitialMessages] = useState<Message[]>([]);
   const [ready, setReady] = useState<boolean>(false);
   const [urlId, setUrlId] = useState<string | undefined>();
 
+  const importChat = async (description: string, messages: Message[]) => {
+    if (!db) {
+      return;
+    }
+
+    try {
+      const newId = await createChatFromMessages(db, description, messages);
+      window.location.href = `/chat/${newId}`;
+      toast.success('Chat imported successfully');
+    } catch (error) {
+      if (error instanceof Error) {
+        toast.error('Failed to import chat: ' + error.message);
+      } else {
+        toast.error('Failed to import chat');
+      }
+    }
+  };
+
   useEffect(() => {
     if (!db) {
       setReady(true);
@@ -75,11 +94,13 @@ export function useChatHistory() {
           logStore.logError('Failed to load chat messages', error);
           toast.error(error.message);
         });
+    } else if (problemId) {
+      loadProblem(problemId, importChat).then(() => setReady(true));
     }
   }, []);
 
   return {
-    ready: !mixedId || ready,
+    ready: ready || (!mixedId && !problemId),
     initialMessages,
     storeMessageHistory: async (messages: Message[]) => {
       if (!db || messages.length === 0) {
@@ -125,23 +146,7 @@ export function useChatHistory() {
         console.log(error);
       }
     },
-    importChat: async (description: string, messages: Message[]) => {
-      if (!db) {
-        return;
-      }
-
-      try {
-        const newId = await createChatFromMessages(db, description, messages);
-        window.location.href = `/chat/${newId}`;
-        toast.success('Chat imported successfully');
-      } catch (error) {
-        if (error instanceof Error) {
-          toast.error('Failed to import chat: ' + error.message);
-        } else {
-          toast.error('Failed to import chat');
-        }
-      }
-    },
+    importChat,
     exportChat: async (id = urlId) => {
       if (!db || !id) {
         return;

app/routes/about.tsx

@@ -0,0 +1,20 @@
+import { ClientOnly } from 'remix-utils/client-only';
+import { Header } from '~/components/header/Header';
+import { Menu } from '~/components/sidebar/Menu.client';
+import BackgroundRays from '~/components/ui/BackgroundRays';
+import { TooltipProvider } from '@radix-ui/react-tooltip';
+
+function AboutPage() {
+  return (
+    <TooltipProvider>
+      <div className="flex flex-col h-full w-full bg-bolt-elements-background-depth-1">
+        <BackgroundRays />
+        <Header />
+        <ClientOnly>{() => <Menu />}</ClientOnly>
+        <div>Hello World! About Page</div>
+      </div>
+    </TooltipProvider>
+  );
+}
+
+export default AboutPage;

app/routes/problem.$id.tsx

@@ -0,0 +1,8 @@
+import { json, type LoaderFunctionArgs } from '@remix-run/cloudflare';
+import { default as IndexRoute } from './_index';
+
+export async function loader(args: LoaderFunctionArgs) {
+  return json({ problemId: args.params.id });
+}
+
+export default IndexRoute;

app/routes/problems.tsx

@@ -0,0 +1,115 @@
+import { ClientOnly } from 'remix-utils/client-only';
+import { Header } from '~/components/header/Header';
+import { Menu } from '~/components/sidebar/Menu.client';
+import BackgroundRays from '~/components/ui/BackgroundRays';
+import { TooltipProvider } from '@radix-ui/react-tooltip';
+import { sendCommandDedicatedClient } from '~/lib/replay/ReplayProtocolClient';
+import { cssTransition, toast, ToastContainer } from 'react-toastify';
+import { useEffect } from 'react';
+import { useState } from 'react';
+
+interface BoltProblemDescription {
+  problemId: string;
+  title: string;
+  description: string;
+  timestamp: number;
+}
+
+const toastAnimation = cssTransition({
+  enter: 'animated fadeInRight',
+  exit: 'animated fadeOutRight',
+});
+
+function ToastContainerWrapper() {
+  return <ToastContainer
+    closeButton={({ closeToast }) => {
+      return (
+        <button className="Toastify__close-button" onClick={closeToast}>
+          <div className="i-ph:x text-lg" />
+        </button>
+      );
+    }}
+    icon={({ type }) => {
+      /**
+       * @todo Handle more types if we need them. This may require extra color palettes.
+       */
+      switch (type) {
+        case 'success': {
+          return <div className="i-ph:check-bold text-bolt-elements-icon-success text-2xl" />;
+        }
+        case 'error': {
+          return <div className="i-ph:warning-circle-bold text-bolt-elements-icon-error text-2xl" />;
+        }
+      }
+
+      return undefined;
+    }}
+    position="bottom-right"
+    pauseOnFocusLoss
+    transition={toastAnimation}
+  />
+}
+
+async function fetchProblems(): Promise<BoltProblemDescription[]> {
+  try {
+    const rv = await sendCommandDedicatedClient({
+      method: "Recording.globalExperimentalCommand",
+      params: {
+        name: "listBoltProblems",
+      },
+    });
+    console.log("ListProblemsRval", rv);
+    return (rv as any).rval.problems;
+  } catch (error) {
+    console.error("Error fetching problems", error);
+    toast.error("Failed to fetch problems");
+    return [];
+  }
+}
+
+function ProblemsPage() {
+  const [problems, setProblems] = useState<BoltProblemDescription[] | null>(null);
+
+  useEffect(() => {
+    fetchProblems().then(setProblems);
+  }, []);
+
+  return (
+    <TooltipProvider>
+      <div className="flex flex-col h-full w-full bg-bolt-elements-background-depth-1">
+        <BackgroundRays />
+        <Header />
+        <ClientOnly>{() => <Menu />}</ClientOnly>
+        
+        <div className="p-6">
+          {problems === null ? (
+            <div className="flex items-center justify-center">
+              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-white"></div>
+            </div>
+          ) : problems.length === 0 ? (
+            <div className="text-center text-gray-600">No problems found</div>
+          ) : (
+            <div className="grid gap-4">
+              {problems.map((problem) => (
+                <a
+                  href={`/problem/${problem.problemId}`}
+                  key={problem.problemId}
+                  className="p-4 rounded-lg bg-bolt-elements-background-depth-2 hover:bg-bolt-elements-background-depth-3 transition-colors cursor-pointer"
+                >
+                  <h2 className="text-xl font-semibold mb-2">{problem.title}</h2>
+                  <p className="text-gray-700 mb-2">{problem.description}</p>
+                  <p className="text-sm text-gray-600">
+                    Time: {new Date(problem.timestamp).toLocaleString()}
+                  </p>
+                </a>
+              ))}
+            </div>
+          )}
+        </div>
+        <ToastContainerWrapper />
+      </div>
+    </TooltipProvider>
+  );
+}
+
+export default ProblemsPage;