fix(ui): remove duplicate back button in info-view logs header

Author: bluelovers

packages/electron-app/electron/main/process-manager.ts

@@ -539,7 +539,7 @@ export class CliProcessManager extends EventEmitter {
   }
 
   private buildCliArgs(options: StartOptions, host: string): string[] {
-    const args = ["serve", "--host", host, "--generate-token", "--auth-cookie-name", this.authCookieName, "--unrestricted-root"]
+    const args = ["serve", "--host", host, "--generate-token", "--auth-cookie-name", this.authCookieName]
 
     if (options.dev) {
       // Dev: run plain HTTP + Vite dev server proxy.

packages/tauri-app/src-tauri/src/cli_manager.rs

@@ -963,7 +963,6 @@ impl CliEntry {
             "--auth-cookie-name".to_string(),
             auth_cookie_name.to_string(),
             "--generate-token".to_string(),
-            "--unrestricted-root".to_string(),
         ];
 
         if dev {

packages/ui/src/components/environment-variables-editor.tsx

@@ -1,46 +1,8 @@
-import { Component, createSignal, For, Show, mergeProps } from "solid-js"
-import { Plus, Trash2, Key, Globe, Eye, EyeOff } from "lucide-solid"
+import { Component, createSignal, For, Show } from "solid-js"
+import { Plus, Trash2, Key, Globe } from "lucide-solid"
 import { useConfig } from "../stores/preferences"
 import { useI18n } from "../lib/i18n"
 
-/**
- * Password input with visibility toggle
- */
-interface IPasswordInputProps {
-  value: string
-  placeholder?: string
-  disabled?: boolean
-  class?: string
-  onInput?: (value: string) => void
-}
-
-const PasswordInput: Component<IPasswordInputProps> = (props) => {
-  const merged = mergeProps({ disabled: false } as IPasswordInputProps, props)
-  const [show, setShow] = createSignal(false)
-
-  return (
-    <div class="relative flex-1">
-      <input
-        type={show() ? "text" : "password"}
-        value={merged.value}
-        disabled={merged.disabled}
-        onInput={(e) => merged.onInput?.(e.currentTarget.value)}
-        class={merged.class}
-        placeholder={merged.placeholder}
-      />
-      <button
-        type="button"
-        onClick={() => setShow(!show())}
-        disabled={merged.disabled}
-        class="absolute right-2 top-1/2 -translate-y-1/2 p-0.5 icon-muted icon-accent-hover disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-        title={show() ? "Hide value" : "Show value"}
-      >
-        {show() ? <EyeOff class="w-3.5 h-3.5" /> : <Eye class="w-3.5 h-3.5" />}
-      </button>
-    </div>
-  )
-}
-
 interface EnvironmentVariablesEditorProps {
   disabled?: boolean
 }
@@ -118,11 +80,12 @@ const EnvironmentVariablesEditor: Component<EnvironmentVariablesEditorProps> = (
                     placeholder={t("envEditor.fields.name.placeholder")}
                     title={t("envEditor.fields.name.readOnlyTitle")}
                   />
-                  <PasswordInput
+                  <input
+                    type="text"
                     value={value}
                     disabled={props.disabled}
-                    onInput={(v) => handleUpdateVariable(key, v)}
-                    class="w-full px-2.5 py-1.5 text-sm bg-surface-base border border-base rounded text-primary focus-ring-accent disabled:opacity-50 disabled:cursor-not-allowed pr-8"
+                    onInput={(e) => handleUpdateVariable(key, e.currentTarget.value)}
+                    class="flex-1 px-2.5 py-1.5 text-sm bg-surface-base border border-base rounded text-primary focus-ring-accent disabled:opacity-50 disabled:cursor-not-allowed"
                     placeholder={t("envEditor.fields.value.placeholder")}
                   />
                 </div>
@@ -153,11 +116,13 @@ const EnvironmentVariablesEditor: Component<EnvironmentVariablesEditorProps> = (
             class="flex-1 px-2.5 py-1.5 text-sm bg-surface-base border border-base rounded text-primary focus-ring-accent disabled:opacity-50 disabled:cursor-not-allowed"
             placeholder={t("envEditor.fields.name.placeholder")}
           />
-          <PasswordInput
+          <input
+            type="text"
             value={newValue()}
+            onInput={(e) => setNewValue(e.currentTarget.value)}
+            onKeyPress={handleKeyPress}
             disabled={props.disabled}
-            onInput={setNewValue}
-            class="w-full px-2.5 py-1.5 text-sm bg-surface-base border border-base rounded text-primary focus-ring-accent disabled:opacity-50 disabled:cursor-not-allowed pr-8"
+            class="flex-1 px-2.5 py-1.5 text-sm bg-surface-base border border-base rounded text-primary focus-ring-accent disabled:opacity-50 disabled:cursor-not-allowed"
             placeholder={t("envEditor.fields.value.placeholder")}
           />
         </div>

packages/ui/src/components/info-view.tsx

@@ -1,11 +1,12 @@
 import { Component, For, createSignal, createEffect, Show, onMount, onCleanup, createMemo } from "solid-js"
-import { getInstanceLogs, instances, isInstanceLogStreaming, setInstanceLogStreaming } from "../stores/instances"
-import { ChevronDown } from "lucide-solid"
+import { getInstanceLogs, instances, isInstanceLogStreaming, setInstanceLogStreaming, clearLogs } from "../stores/instances"
+import { ArrowLeft, Trash2 } from "lucide-solid"
 import InstanceInfo from "./instance-info"
 import { useI18n } from "../lib/i18n"
 
 interface InfoViewProps {
   instanceId: string
+  onBackToConversation?: () => void
 }
 
 const logsScrollState = new Map<string, { scrollTop: number; autoScroll: boolean }>()
@@ -15,19 +16,27 @@ const InfoView: Component<InfoViewProps> = (props) => {
   let scrollRef: HTMLDivElement | undefined
   const savedState = logsScrollState.get(props.instanceId)
   const [autoScroll, setAutoScroll] = createSignal(savedState?.autoScroll ?? false)
+  const [showScrollTopButton, setShowScrollTopButton] = createSignal(false)
+  const [showScrollBottomButton, setShowScrollBottomButton] = createSignal(false)
 
   const instance = () => instances().get(props.instanceId)
   const logs = createMemo(() => getInstanceLogs(props.instanceId))
   const streamingEnabled = createMemo(() => isInstanceLogStreaming(props.instanceId))
 
   const handleEnableLogs = () => setInstanceLogStreaming(props.instanceId, true)
   const handleDisableLogs = () => setInstanceLogStreaming(props.instanceId, false)
+  const handleClearLogs = () => {
+    clearLogs(props.instanceId)
+    updateScrollButtons()
+  }
 
   onMount(() => {
 
     if (scrollRef && savedState) {
       scrollRef.scrollTop = savedState.scrollTop
     }
+    // 初始化滾動按鈕可見性 / Initialize scroll button visibility
+    updateScrollButtons()
   })
 
   onCleanup(() => {
@@ -45,18 +54,51 @@ const InfoView: Component<InfoViewProps> = (props) => {
     }
   })
 
+  // 監聽日誌變化並更新滾動按鈕 / Listen for log changes and update scroll buttons
+  createEffect(() => {
+    logs()  // 追蹤 logs 變化
+    updateScrollButtons()
+  })
+
+  /** 更新滾動按鈕顯示狀態 / Update scroll button visibility */
+  const updateScrollButtons = () => {
+    if (!scrollRef) return
+
+    const scrollTop = scrollRef.scrollTop
+    const scrollHeight = scrollRef.scrollHeight
+    const clientHeight = scrollRef.clientHeight
+    const hasItems = logs().length > 0
+
+    const atBottom = scrollHeight - (scrollTop + clientHeight) <= 50
+    const atTop = scrollTop <= 50
+
+    setShowScrollBottomButton(hasItems && !atBottom)
+    setShowScrollTopButton(hasItems && !atTop)
+  }
+
+  /** 滾動至頂部 / Scroll to top */
+  const scrollToTop = () => {
+    if (scrollRef) {
+      scrollRef.scrollTop = 0
+      setAutoScroll(false)
+      updateScrollButtons()
+    }
+  }
+
   const handleScroll = () => {
     if (!scrollRef) return
 
     const isAtBottom = scrollRef.scrollHeight - scrollRef.scrollTop <= scrollRef.clientHeight + 50
 
     setAutoScroll(isAtBottom)
+    updateScrollButtons()
   }
 
   const scrollToBottom = () => {
     if (scrollRef) {
       scrollRef.scrollTop = scrollRef.scrollHeight
       setAutoScroll(true)
+      updateScrollButtons()
     }
   }
 
@@ -83,6 +125,11 @@ const InfoView: Component<InfoViewProps> = (props) => {
     }
   }
 
+  /** 是否顯示浮動滾動按鈕 / Whether to show floating scroll buttons */
+  const showScrollButtons = createMemo(() => {
+    return streamingEnabled() && (showScrollTopButton() || showScrollBottomButton())
+  })
+
   return (
     <div class="log-container">
       <div class="flex-1 flex flex-col lg:flex-row gap-4 p-4 overflow-hidden">
@@ -94,6 +141,38 @@ const InfoView: Component<InfoViewProps> = (props) => {
           <div class="log-header">
             <h2 class="panel-title">{t("infoView.logs.title")}</h2>
             <div class="flex items-center gap-2">
+              <Show when={props.onBackToConversation}>
+                {(onBack) => (
+                  <button
+                    type="button"
+                    class="button-tertiary"
+                    onClick={onBack}
+                    title={t("infoView.logs.actions.back")}
+                  >
+                    <ArrowLeft class="w-4 h-4" />
+                  </button>
+                )}
+              </Show>
+              <Show when={logs().length > 0}>
+                <button
+                  type="button"
+                  class="button-tertiary"
+                  onClick={handleClearLogs}
+                  title={t("infoView.logs.actions.clear")}
+                >
+                  <Trash2 class="w-4 h-4" />
+                </button>
+              </Show>
+              <Show when={logs().length > 0}>
+                <button
+                  type="button"
+                  class="button-tertiary"
+                  onClick={handleClearLogs}
+                  title={t("infoView.logs.actions.clear")}
+                >
+                  <Trash2 class="w-4 h-4" />
+                </button>
+              </Show>
               <Show
                 when={streamingEnabled()}
                 fallback={
@@ -143,15 +222,37 @@ const InfoView: Component<InfoViewProps> = (props) => {
               </Show>
             </Show>
           </div>
- 
-          <Show when={!autoScroll() && streamingEnabled()}>
-            <button
-              onClick={scrollToBottom}
-              class="scroll-to-bottom"
-            >
-              <ChevronDown class="w-4 h-4" />
-              {t("infoView.logs.scrollToBottom")}
-            </button>
+
+          {/* 浮動滾動按鈕 / Floating scroll buttons */}
+          <Show when={showScrollButtons()}>
+            <div class="message-scroll-button-wrapper">
+              <Show when={showScrollTopButton()}>
+                <button
+                  type="button"
+                  class="message-scroll-button"
+                  onClick={scrollToTop}
+                  aria-label={t("infoView.logs.scrollToTop")}
+                  title={t("infoView.logs.scrollToTop")}
+                >
+                  <span class="message-scroll-icon" aria-hidden="true">
+                    ↑
+                  </span>
+                </button>
+              </Show>
+              <Show when={showScrollBottomButton()}>
+                <button
+                  type="button"
+                  class="message-scroll-button"
+                  onClick={scrollToBottom}
+                  aria-label={t("infoView.logs.scrollToBottom")}
+                  title={t("infoView.logs.scrollToBottom")}
+                >
+                  <span class="message-scroll-icon" aria-hidden="true">
+                    ↓
+                  </span>
+                </button>
+              </Show>
+            </div>
           </Show>
         </div>
       </div>

packages/ui/src/components/instance-info.tsx

@@ -151,13 +151,13 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
             </div>
             <div class="space-y-1">
               <For each={environmentEntries()}>
-                {([key]) => (
+                {([key, value]) => (
                   <div dir="ltr" class="flex items-center gap-2 px-2 py-1.5 rounded border bg-surface-secondary border-base">
                     <span class="text-xs font-mono font-medium flex-1 text-primary" title={key}>
                       {key}
                     </span>
-                    <span class="text-xs font-mono flex-1 text-secondary">
-                      ***
+                    <span class="text-xs font-mono flex-1 text-secondary" title={value}>
+                      {value}
                     </span>
                   </div>
                 )}