feat: update prompt input

packages/app/src/components/prompt-input.tsx

@@ -1267,7 +1267,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
   )
 
   return (
-    <div class="relative size-full _max-h-[320px] flex flex-col gap-0">
+    <div class="relative size-full _max-h-[320px] flex flex-col gap-0 group/prompt-input">
       {(promptReady(), null)}
       <PromptPopover
         popover={store.popover}
@@ -1414,7 +1414,11 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
             </div>
           </div>
 
-          <div class="pointer-events-none absolute bottom-2 left-2">
+          <div
+            class="pointer-events-none absolute bottom-2 left-2 flex flex-row items-center gap-1"
+            onMouseDown={(e) => e.stopPropagation()}
+            style={control()}
+          >
             <div
               aria-hidden={store.mode !== "normal"}
               class="pointer-events-auto"
@@ -1442,62 +1446,6 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                 </Button>
               </TooltipKeybind>
             </div>
-          </div>
-        </div>
-      </DockShellForm>
-      <Show when={store.mode === "normal" || store.mode === "shell"}>
-        <DockTray attach="top">
-          <div class="px-1.75 pt-5.5 pb-2 flex items-center gap-2 min-w-0">
-            <div class="flex items-center gap-1.5 min-w-0 flex-1 relative">
-              <div
-                class="h-7 flex items-center gap-1.5 min-w-0 absolute inset-0"
-                style={{
-                  padding: "0 0px 0 8px",
-                  ...shell(),
-                }}
-              >
-                <Icon name="console" />
-                <span class="truncate text-13-medium text-text-base">{language.t("prompt.mode.shell")}</span>
-                <div class="flex-1" />
-                <Button
-                  variant="ghost"
-                  class="text-text-base"
-                  onClick={() => {
-                    setStore("mode", "normal")
-                  }}
-                >
-                  {language.t("common.cancel")}
-                </Button>
-              </div>
-              <div class="flex items-center gap-1.5 min-w-0 flex-1 h-7">
-                <Show when={!agentsLoading()}>
-                  <div
-                    data-component="prompt-agent-control"
-                    style={agentsShouldFadeIn() ? { animation: "fade-in 0.3s" } : undefined}
-                  >
-                    <TooltipKeybind
-                      placement="top"
-                      gutter={4}
-                      title={language.t("command.agent.cycle")}
-                      keybind={command.keybind("agent.cycle")}
-                    >
-                      <Select
-                        size="normal"
-                        options={agentNames()}
-                        current={local.agent.current()?.name ?? ""}
-                        onSelect={(value) => {
-                          local.agent.set(value)
-                          restoreFocus()
-                        }}
-                        class="capitalize max-w-[160px] text-text-base"
-                        valueClass="truncate text-13-regular text-text-base"
-                        triggerStyle={control()}
-                        triggerProps={{ "data-action": "prompt-agent" }}
-                        variant="ghost"
-                      />
-                    </TooltipKeybind>
-                  </div>
-                </Show>
             <Show when={!providersLoading()}>
               <Show when={store.mode !== "shell"}>
                 <div
@@ -1519,7 +1467,6 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                           variant="ghost"
                           size="normal"
                           class="min-w-0 max-w-[320px] text-13-regular text-text-base group"
-                              style={control()}
                           onClick={() => {
                             void import("@/components/dialog-select-model-unpaid").then((x) => {
                               dialog.show(() => <x.DialogSelectModelUnpaid model={local.model} />)
@@ -1596,8 +1543,12 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                         }}
                         class="capitalize max-w-[160px] text-text-base"
                         valueClass="truncate text-13-regular text-text-base"
-                            triggerStyle={control()}
+                        triggerProps={{
-                            triggerProps={{ "data-action": "prompt-model-variant" }}
+                          "data-action": "prompt-model-variant",
+                          class: !local.model.variant.current()
+                            ? "opacity-0 group-hover/prompt-input:opacity-100 focus-visible:opacity-100 transition-opacity duration-100 data-[expanded]:opacity-100"
+                            : "",
+                        }}
                         variant="ghost"
                       />
                     </TooltipKeybind>
@@ -1607,9 +1558,78 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
             </Show>
           </div>
         </div>
+      </DockShellForm>
+      <Show when={store.mode === "normal" || store.mode === "shell"}>
+        <DockTray attach="top">
+          <div class="px-1.75 pt-5.5 pb-2 flex items-center gap-2 min-w-0">
+            <div class="flex items-center gap-1.5 min-w-0 flex-1 relative">
+              <div
+                class="h-7 flex items-center gap-1.5 min-w-0 absolute inset-0"
+                style={{
+                  padding: "0 0px 0 8px",
+                  ...shell(),
+                }}
+              >
+                <Icon name="console" />
+                <span class="truncate text-13-medium text-text-base">{language.t("prompt.mode.shell")}</span>
+                <div class="flex-1" />
+                <Button
+                  variant="ghost"
+                  class="text-text-base"
+                  onClick={() => {
+                    setStore("mode", "normal")
+                  }}
+                >
+                  {language.t("common.cancel")}
+                </Button>
+              </div>
+              <div class="flex items-center gap-1.5 min-w-0 flex-1 h-7" style={control()}>
+                <Show when={!agentsLoading()}>
+                  <div data-component="prompt-agent-control">
+                    <TooltipKeybind
+                      placement="top"
+                      gutter={4}
+                      title={language.t("command.agent.cycle")}
+                      keybind={command.keybind("agent.cycle")}
+                    >
+                      <Select
+                        size="normal"
+                        options={agentNames()}
+                        current={local.agent.current()?.name ?? ""}
+                        onSelect={(value) => {
+                          local.agent.set(value)
+                          restoreFocus()
+                        }}
+                        class="capitalize max-w-[160px] text-text-base"
+                        valueClass="truncate text-13-regular text-text-base"
+                        triggerProps={{ "data-action": "prompt-agent" }}
+                        variant="ghost"
+                      />
+                    </TooltipKeybind>
+                  </div>
+                </Show>
+                <Show when={sync.data.vcs?.branch}>
+                  {(branch) => (
+                    <div class="flex gap-1 ml-auto text-text-weak pr-2">
+                      <Icon name="branch" />
+                      <span>{branch()}</span>
+                    </div>
+                  )}
+                </Show>
+              </div>
+            </div>
           </div>
         </DockTray>
       </Show>
     </div>
   )
 }
+
+const omit = <T extends Record<string, unknown>>(obj: T, key: keyof T) => {
+  const { [key]: _, ...rest } = obj
+  return rest
+}
+
+const objPick = <T extends Record<string, unknown>>(obj: T, key: keyof T) => {
+  return { [key]: obj[key] }
+}