From a2c825fa2c0fe14dd909aa2d6144c4421df78cfe Mon Sep 17 00:00:00 2001
From: Giorgi Bagdavadze <notgiorgi@gmail.com>
Date: Fri, 25 Apr 2025 10:33:34 +0400
Subject: [PATCH 1/5] feat: modify and store system prompt in the local storage

---
 packages/frontend/src/app.tsx   | 35 ++++++++++++++++++++++++++-------
 packages/frontend/src/index.css | 13 ++++++------
 2 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/packages/frontend/src/app.tsx b/packages/frontend/src/app.tsx
index 93989bd..f3b3a2f 100644
--- a/packages/frontend/src/app.tsx
+++ b/packages/frontend/src/app.tsx
@@ -13,12 +13,19 @@ const providerMetadata = {
     },
   },
 }
-
+const systemPrompt = {
+  get: () => {
+    return localStorage.getItem("systemPrompt") ?? SYSTEM_PROMPT
+  },
+  set: (value: string) => {
+    localStorage.setItem("systemPrompt", value)
+  },
+}
 // Define initial system messages once
 const getInitialPrompt = (): LanguageModelV1Prompt => [
   {
     role: "system",
-    content: SYSTEM_PROMPT,
+    content: systemPrompt.get(),
     providerMetadata: {
       anthropic: {
         cacheControl: {
@@ -215,6 +222,17 @@ export function App() {
     textarea?.focus()
   }
 
+  const modifySystemPrompt = () => {
+    const newPrompt = prompt(
+      "⚠️ This is going to reset chat history.\nEnter new system prompt:",
+      systemPrompt.get(),
+    )
+    if (newPrompt !== null) {
+      systemPrompt.set(newPrompt)
+      setStore("prompt", getInitialPrompt())
+    }
+  }
+
   return (
     <div data-component="root" ref={root}>
       <div data-component="messages">
@@ -292,13 +310,16 @@ export function App() {
         <div data-slot="spacer"></div>
       </div>
       <div data-component="footer">
-        {store.prompt.length > 2 && !store.isProcessing && (
-          <div data-slot="clear">
-            <button data-component="clear-button" onClick={clearConversation}>
+        <div data-slot="footer-actions">
+          <button data-component="footer-action" onClick={modifySystemPrompt}>
+            🔧
+          </button>
+          {store.prompt.length > 2 && !store.isProcessing && (
+            <button data-component="footer-action" onClick={clearConversation}>
               Clear
             </button>
-          </div>
-        )}
+          )}
+        </div>
         <div data-slot="chat">
           <textarea
             autofocus
diff --git a/packages/frontend/src/index.css b/packages/frontend/src/index.css
index 0686144..446a8aa 100644
--- a/packages/frontend/src/index.css
+++ b/packages/frontend/src/index.css
@@ -196,13 +196,14 @@ body {
   padding: 0 16px 16px;
   box-sizing: border-box;
 
-  [data-slot="clear"] {
+  [data-slot="footer-actions"] {
     position: relative;
     width: 100%;
     max-width: 780px;
     display: flex;
     justify-content: flex-end;
     margin-bottom: 8px;
+    gap: 8px;
   }
 
   [data-slot="chat"] {
@@ -222,7 +223,7 @@ body {
   }
 }
 
-[data-component="clear-button"] {
+[data-component="footer-action"] {
   background: var(--color-bravo200);
   color: white;
   border: none;
@@ -246,8 +247,8 @@ body {
 @media (max-width: 600px) {
   [data-component="footer"] {
     padding-bottom: 8px;
-    
-    [data-slot="clear"] {
+
+    [data-slot="footer-actions"] {
       margin-bottom: 4px;
     }
     
@@ -256,8 +257,8 @@ body {
       border-radius: 8px;
     }
   }
-  
-  [data-component="clear-button"] {
+
+  [data-component="footer-action"] {
     padding: 4px 10px;
     font-size: 12px;
   }

From 4acf89178495fe1d76e69f3f307624002793042a Mon Sep 17 00:00:00 2001
From: Giorgi Bagdavadze <notgiorgi@gmail.com>
Date: Fri, 25 Apr 2025 10:45:45 +0400
Subject: [PATCH 2/5] feat: improve system prompt input modal

---
 packages/frontend/src/app.tsx   | 70 ++++++++++++++++++++++++++++++---
 packages/frontend/src/index.css | 51 ++++++++++++++++++++++++
 2 files changed, 115 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/src/app.tsx b/packages/frontend/src/app.tsx
index f3b3a2f..a713814 100644
--- a/packages/frontend/src/app.tsx
+++ b/packages/frontend/src/app.tsx
@@ -1,5 +1,5 @@
 import { LanguageModelV1Prompt } from "ai"
-import { createEffect, For, onCleanup } from "solid-js"
+import { createEffect, For, onCleanup, Show, createSignal } from "solid-js"
 import { createStore } from "solid-js/store"
 import SYSTEM_PROMPT from "./system.txt?raw"
 import { hc } from "hono/client"
@@ -222,16 +222,41 @@ export function App() {
     textarea?.focus()
   }
 
+  const [showSystemPromptModal, setShowSystemPromptModal] = createSignal(false)
+  const [systemPromptValue, setSystemPromptValue] = createSignal(systemPrompt.get())
+  
   const modifySystemPrompt = () => {
-    const newPrompt = prompt(
-      "⚠️ This is going to reset chat history.\nEnter new system prompt:",
-      systemPrompt.get(),
-    )
-    if (newPrompt !== null) {
+    setSystemPromptValue(systemPrompt.get())
+    setShowSystemPromptModal(true)
+  }
+  
+  const handleSystemPromptSubmit = () => {
+    const newPrompt = systemPromptValue()
+    if (newPrompt.trim() !== "") {
       systemPrompt.set(newPrompt)
       setStore("prompt", getInitialPrompt())
     }
+    setShowSystemPromptModal(false)
   }
+  
+  createEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (showSystemPromptModal()) {
+        if (e.key === "Escape") {
+          e.preventDefault()
+          setShowSystemPromptModal(false)
+        } else if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+          e.preventDefault()
+          handleSystemPromptSubmit()
+        }
+      }
+    }
+    
+    window.addEventListener("keydown", handleKeyDown)
+    onCleanup(() => {
+      window.removeEventListener("keydown", handleKeyDown)
+    })
+  })
 
   return (
     <div data-component="root" ref={root}>
@@ -341,6 +366,39 @@ export function App() {
           />
         </div>
       </div>
+
+      {/* System Prompt Modal */}
+      <Show when={showSystemPromptModal()}>
+        <div data-component="dialog-overlay" onClick={() => setShowSystemPromptModal(false)}></div>
+        <div data-component="dialog-center">
+          <div data-slot="content" data-size="md">
+            <div data-slot="header">
+              <label data-size="md" data-slot="title" data-component="label">
+                ⚠️ System Prompt (will reset chat history)
+              </label>
+            </div>
+            <div data-slot="main">
+              <textarea
+                data-component="input"
+                style={{ "min-height": "200px", "margin-top": "10px" }}
+                value={systemPromptValue()}
+                onInput={(e) => setSystemPromptValue(e.currentTarget.value)}
+              />
+            </div>
+            <div data-slot="footer">
+              <small style={{ "margin-right": "auto", "opacity": "0.7" }}>
+                Press Esc to cancel, Ctrl+Enter to save
+              </small>
+              <button data-component="footer-action" onClick={() => setShowSystemPromptModal(false)}>
+                Cancel
+              </button>
+              <button data-component="footer-action" onClick={handleSystemPromptSubmit}>
+                Save
+              </button>
+            </div>
+          </div>
+        </div>
+      </Show>
     </div>
   )
 }
diff --git a/packages/frontend/src/index.css b/packages/frontend/src/index.css
index 446a8aa..7e94a29 100644
--- a/packages/frontend/src/index.css
+++ b/packages/frontend/src/index.css
@@ -331,3 +331,54 @@ body {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(-720deg); }
 }
+
+/* Dialog Components */
+[data-component="dialog-overlay"] {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 10;
+  backdrop-filter: blur(2px);
+}
+
+[data-component="dialog-center"] {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 20;
+
+  [data-slot="content"] {
+      background: var(--color-alpha200);
+      border-radius: 8px;
+      width: 90%;
+      max-width: 600px;
+      display: flex;
+      flex-direction: column;
+      max-height: 90vh;
+      overflow: hidden;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+      border: 1px solid var(--color-bravo200);
+  }
+      
+  [data-slot="content"] [data-slot="header"] {
+      padding: 16px;
+      border-bottom: 1px solid var(--color-bravo100);
+  }
+      
+  [data-slot="content"] [data-slot="main"] {
+      padding: 16px;
+      overflow-y: auto;
+      flex: 1;
+  }
+      
+  [data-slot="content"] [data-slot="footer"] {
+      padding: 16px;
+      display: flex;
+      justify-content: flex-end;
+      gap: 10px;
+      border-top: 1px solid var(--color-bravo100);
+  }
+}
+

From 0c69173c839f46905bf15cddfa4ac4bb77b67a77 Mon Sep 17 00:00:00 2001
From: Giorgi Bagdavadze <notgiorgi@gmail.com>
Date: Fri, 25 Apr 2025 11:04:39 +0400
Subject: [PATCH 3/5] chore: formatting

---
 packages/frontend/src/app.tsx | 33 ++++++++++++++++++++++-----------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/packages/frontend/src/app.tsx b/packages/frontend/src/app.tsx
index a713814..0ef8082 100644
--- a/packages/frontend/src/app.tsx
+++ b/packages/frontend/src/app.tsx
@@ -15,10 +15,10 @@ const providerMetadata = {
 }
 const systemPrompt = {
   get: () => {
-    return localStorage.getItem("systemPrompt") ?? SYSTEM_PROMPT
+    return localStorage.getItem("opencontrol:systemPrompt") ?? SYSTEM_PROMPT
   },
   set: (value: string) => {
-    localStorage.setItem("systemPrompt", value)
+    localStorage.setItem("opencontrol:systemPrompt", value)
   },
 }
 // Define initial system messages once
@@ -223,13 +223,15 @@ export function App() {
   }
 
   const [showSystemPromptModal, setShowSystemPromptModal] = createSignal(false)
-  const [systemPromptValue, setSystemPromptValue] = createSignal(systemPrompt.get())
-  
+  const [systemPromptValue, setSystemPromptValue] = createSignal(
+    systemPrompt.get(),
+  )
+
   const modifySystemPrompt = () => {
     setSystemPromptValue(systemPrompt.get())
     setShowSystemPromptModal(true)
   }
-  
+
   const handleSystemPromptSubmit = () => {
     const newPrompt = systemPromptValue()
     if (newPrompt.trim() !== "") {
@@ -238,7 +240,7 @@ export function App() {
     }
     setShowSystemPromptModal(false)
   }
-  
+
   createEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (showSystemPromptModal()) {
@@ -251,7 +253,7 @@ export function App() {
         }
       }
     }
-    
+
     window.addEventListener("keydown", handleKeyDown)
     onCleanup(() => {
       window.removeEventListener("keydown", handleKeyDown)
@@ -369,7 +371,10 @@ export function App() {
 
       {/* System Prompt Modal */}
       <Show when={showSystemPromptModal()}>
-        <div data-component="dialog-overlay" onClick={() => setShowSystemPromptModal(false)}></div>
+        <div
+          data-component="dialog-overlay"
+          onClick={() => setShowSystemPromptModal(false)}
+        ></div>
         <div data-component="dialog-center">
           <div data-slot="content" data-size="md">
             <div data-slot="header">
@@ -386,13 +391,19 @@ export function App() {
               />
             </div>
             <div data-slot="footer">
-              <small style={{ "margin-right": "auto", "opacity": "0.7" }}>
+              <small style={{ "margin-right": "auto", opacity: "0.7" }}>
                 Press Esc to cancel, Ctrl+Enter to save
               </small>
-              <button data-component="footer-action" onClick={() => setShowSystemPromptModal(false)}>
+              <button
+                data-component="footer-action"
+                onClick={() => setShowSystemPromptModal(false)}
+              >
                 Cancel
               </button>
-              <button data-component="footer-action" onClick={handleSystemPromptSubmit}>
+              <button
+                data-component="footer-action"
+                onClick={handleSystemPromptSubmit}
+              >
                 Save
               </button>
             </div>

From ca7c2ee2076666871530987cd7d918d8f37de056 Mon Sep 17 00:00:00 2001
From: Giorgi Bagdavadze <notgiorgi@gmail.com>
Date: Fri, 25 Apr 2025 11:14:24 +0400
Subject: [PATCH 4/5] style: styling

---
 packages/frontend/src/app.tsx   | 4 ++--
 packages/frontend/src/index.css | 7 +++++++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/app.tsx b/packages/frontend/src/app.tsx
index 0ef8082..f19e2a0 100644
--- a/packages/frontend/src/app.tsx
+++ b/packages/frontend/src/app.tsx
@@ -379,7 +379,7 @@ export function App() {
           <div data-slot="content" data-size="md">
             <div data-slot="header">
               <label data-size="md" data-slot="title" data-component="label">
-                ⚠️ System Prompt (will reset chat history)
+                🔧 System Prompt
               </label>
             </div>
             <div data-slot="main">
@@ -391,7 +391,7 @@ export function App() {
               />
             </div>
             <div data-slot="footer">
-              <small style={{ "margin-right": "auto", opacity: "0.7" }}>
+              <small data-component="footer-hint">
                 Press Esc to cancel, Ctrl+Enter to save
               </small>
               <button
diff --git a/packages/frontend/src/index.css b/packages/frontend/src/index.css
index 7e94a29..812589f 100644
--- a/packages/frontend/src/index.css
+++ b/packages/frontend/src/index.css
@@ -380,5 +380,12 @@ body {
       gap: 10px;
       border-top: 1px solid var(--color-bravo100);
   }
+  
+  [data-component="footer-hint"] {
+      margin-right: auto;
+      opacity: 0.7;
+      display: flex;
+      align-items: center;
+  }
 }
 

From 7889a9b10d4bcd239a317005429b465a35940061 Mon Sep 17 00:00:00 2001
From: Giorgi Bagdavadze <notgiorgi@gmail.com>
Date: Fri, 25 Apr 2025 11:15:46 +0400
Subject: [PATCH 5/5] chore: remove redundant comment

---
 packages/frontend/src/app.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/frontend/src/app.tsx b/packages/frontend/src/app.tsx
index f19e2a0..26f9cba 100644
--- a/packages/frontend/src/app.tsx
+++ b/packages/frontend/src/app.tsx
@@ -369,7 +369,6 @@ export function App() {
         </div>
       </div>
 
-      {/* System Prompt Modal */}
       <Show when={showSystemPromptModal()}>
         <div
           data-component="dialog-overlay"