Temporary agents and chats

frontend/src/views/AgentCreate.vue

@@ -32,6 +32,10 @@
       payload.identifier = agent.value.identifier;
     }
 
+    if (agent.value.temporary) {
+      payload.temporary = true;
+    }
+
     let response = await backend.sendAction("create-agent", payload);
 
     if (response.error) {
@@ -54,39 +58,54 @@
       <h1>Create Agent</h1>
     </TitleBar>
 
-    <div class="main-container">
-      <input v-model="agent.name" type="text" placeholder="name">
-      <input v-model="agent.identifier" type="text" placeholder="identifier">
-      <select v-model="agent.kind">
-        <option v-for="k in kinds" :value="k">{{k}}</option>
+    <section class="container">
+      <input v-model="agent.name" placeholder="Name" />
+      <input v-model="agent.identifier" placeholder="Identifier (optional)" />
+      <select v-model="agent.kind" :class="{ placeholder: !agent.kind }">
+        <option value="" disabled>Select type</option>
+        <option v-for="k in kinds" :key="k" :value="k">{{ k }}</option>
       </select>
-
-      <button @click="submitAgent()">Create Agent</button>
-    </div>
+      <label class="checkbox">
+        <input type="checkbox" v-model="agent.temporary" />
+        Temporary
+      </label>
+      <button @click="submitAgent()">Create</button>
+    </section>
   </main>
 </template>
 
 <style scoped>
-  .main-container {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .multi-select-box {
-    border: 1px solid var(--color-border);
-    border-radius: var(--border-radius);
-  }
-
-  .multi-select-box div {
-    border-bottom: 1px solid var(--color-border);
-  }
-  .multi-select-box div:last {
-    border-bottom: none;
-  }
-  .multi-select-box div:hover {
-    background-color: var(--color-background-mute);
-  }
-  .multi-select-box div.selected {
-    background-color: var(--color-background-soft);
-  }
+section {
+  margin: 1em;
+  padding: 1em;
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius);
+}
+.container {
+  display: flex;
+  flex-direction: column;
+}
+input, select {
+  padding: 10px;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  font-size: 14px;
+  background: var(--color-background);
+}
+input::placeholder, select.placeholder {
+  color: var(--color-text-light);
+}
+input:focus, select:focus { outline: none; border-color: var(--color-primary); }
+.checkbox { display: flex; align-items: center; gap: 6px; cursor: pointer; }
+button {
+  margin-top: 4px;
+  padding: 10px;
+  background: var(--color-primary);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-weight: 500;
+  cursor: pointer;
+}
+button:hover { opacity: 0.9; }
 </style>