chat context indicator fix for pending state

Signed-off-by: Yujong Lee <yujonglee.dev@gmail.com>

Author: yujonglee

apps/desktop/src/chat/components/view.tsx …sktop/src/chat/components/chat-panel.tsxapps/desktop/src/chat/components/view.tsx renamed to apps/desktop/src/chat/components/chat-panel.tsx apps/desktop/src/chat/components/view.tsx renamed to apps/desktop/src/chat/components/chat-panel.tsx

@@ -5,7 +5,7 @@ import { cn } from "@hypr/utils";
 import { ChatBody } from "./body";
 import { ChatContent } from "./content";
 import { ChatHeader } from "./header";
-import { ChatSession } from "./session";
+import { ChatSession } from "./session-provider";
 
 import { useLanguageModel } from "~/ai/hooks";
 import {

apps/desktop/src/chat/components/content.tsx

@@ -5,7 +5,8 @@ import { ContextBar } from "./context-bar";
 import { ChatMessageInput, type McpIndicator } from "./input";
 
 import type { useLanguageModel } from "~/ai/hooks";
-import type { ContextEntity, ContextRef } from "~/chat/context/entities";
+import type { ContextRef } from "~/chat/context/entities";
+import type { DisplayEntity } from "~/chat/context/use-chat-context-pipeline";
 import type { HyprUIMessage } from "~/chat/types";
 
 export function ChatContent({
@@ -40,7 +41,7 @@ export function ChatContent({
     sendMessage: (message: HyprUIMessage) => void,
     contextRefs?: ContextRef[],
   ) => void;
-  contextEntities: ContextEntity[];
+  contextEntities: DisplayEntity[];
   pendingRefs: ContextRef[];
   onRemoveContextEntity?: (key: string) => void;
   onAddContextEntity?: (ref: ContextRef) => void;

apps/desktop/src/chat/components/context-bar.tsx

@@ -13,8 +13,9 @@ import {
 } from "@hypr/ui/components/ui/tooltip";
 import { cn } from "@hypr/utils";
 
-import type { ContextEntity, ContextRef } from "~/chat/context/entities";
+import type { ContextRef } from "~/chat/context/entities";
 import { type ContextChipProps, renderChip } from "~/chat/context/registry";
+import type { DisplayEntity } from "~/chat/context/use-chat-context-pipeline";
 import { useSearchEngine } from "~/search/contexts/engine";
 import { useTabs } from "~/store/zustand/tabs";
 
@@ -60,9 +61,11 @@ function useOverflow(
 function ContextChip({
   chip,
   onRemove,
+  pending,
 }: {
   chip: ContextChipProps;
   onRemove?: (key: string) => void;
+  pending?: boolean;
 }) {
   const Icon = chip.icon;
   const openNew = useTabs((state) => state.openNew);
@@ -80,7 +83,10 @@ function ContextChip({
         <span
           onClick={handleClick}
           className={cn([
-            "group max-w-48 min-w-0 rounded-md bg-neutral-500/10 px-1.5 py-0.5 text-xs text-neutral-600",
+            "group max-w-48 min-w-0 rounded-md px-1.5 py-0.5 text-xs",
+            pending
+              ? "bg-neutral-500/5 text-neutral-400"
+              : "bg-white text-neutral-600 shadow-xs",
             "inline-flex shrink items-center gap-1",
             isClickable
               ? "cursor-pointer hover:bg-neutral-500/20"
@@ -182,13 +188,21 @@ export function ContextBar({
   onRemoveEntity,
   onAddEntity,
 }: {
-  entities: ContextEntity[];
+  entities: DisplayEntity[];
   onRemoveEntity?: (key: string) => void;
   onAddEntity?: (ref: ContextRef) => void;
 }) {
   const chips = useMemo(
     () =>
-      entities.map(renderChip).filter((c): c is ContextChipProps => c !== null),
+      entities
+        .map((entity) => ({
+          chip: renderChip(entity),
+          pending: entity.pending,
+        }))
+        .filter(
+          (c): c is { chip: ContextChipProps; pending: boolean } =>
+            c.chip !== null,
+        ),
     [entities],
   );
 
@@ -201,50 +215,59 @@ export function ContextBar({
     setExpanded(false);
   }, [chips.length]);
 
-  if (chips.length === 0 && !onAddEntity) return null;
+  if (chips.length === 0 && !onAddEntity) {
+    return null;
+  }
 
   return (
     <div className="mx-2 rounded-t-xl border-t border-r border-l border-neutral-200 bg-neutral-100">
-      <div className="flex items-start gap-1.5 px-2.5 py-2">
-        <div
-          ref={chipsRef}
-          className={cn([
-            "flex min-w-0 flex-1 flex-wrap items-center gap-1.5",
-            !expanded && "max-h-[22px] overflow-hidden",
-          ])}
-        >
-          {chips.map((chip) => (
-            <ContextChip key={chip.key} chip={chip} onRemove={onRemoveEntity} />
-          ))}
-        </div>
+      <div className="flex flex-col gap-1 px-2.5 py-2">
+        <div className="flex items-start gap-1.5">
+          <div
+            ref={chipsRef}
+            className={cn([
+              "flex min-w-0 flex-1 flex-wrap items-center gap-1.5",
+              !expanded && "max-h-[22px] overflow-hidden",
+            ])}
+          >
+            {chips.map(({ chip, pending }) => (
+              <ContextChip
+                key={chip.key}
+                chip={chip}
+                onRemove={onRemoveEntity}
+                pending={pending}
+              />
+            ))}
+          </div>
 
-        <div className="flex shrink-0 items-center gap-1.5">
-          {(hasOverflow || expanded) && (
-            <button
-              type="button"
-              onClick={() => setExpanded((v) => !v)}
-              className="inline-flex items-center gap-0.5 rounded-md bg-neutral-500/10 px-1 py-0.5 text-xs text-neutral-400 transition-colors hover:bg-neutral-500/20 hover:text-neutral-600"
-            >
-              {!expanded && hiddenCount > 0 && <span>+{hiddenCount}</span>}
-              <ChevronDownIcon
-                className={cn(["size-3.5", expanded && "rotate-180"])}
+          <div className="flex shrink-0 items-center gap-1.5">
+            {(hasOverflow || expanded) && (
+              <button
+                type="button"
+                onClick={() => setExpanded((v) => !v)}
+                className="inline-flex items-center gap-0.5 rounded-md bg-neutral-500/10 px-1 py-0.5 text-xs text-neutral-400 transition-colors hover:bg-neutral-500/20 hover:text-neutral-600"
+              >
+                {!expanded && hiddenCount > 0 && <span>+{hiddenCount}</span>}
+                <ChevronDownIcon
+                  className={cn(["size-3.5", expanded && "rotate-180"])}
+                />
+              </button>
+            )}
+            {onAddEntity && (
+              <AddSessionButton
+                onAdd={(sessionId) => {
+                  onAddEntity({
+                    kind: "session",
+                    key: `session:manual:${sessionId}`,
+                    source: "manual",
+                    sessionId,
+                  });
+                }}
+                open={pickerOpen}
+                onOpenChange={setPickerOpen}
               />
-            </button>
-          )}
-          {onAddEntity && (
-            <AddSessionButton
-              onAdd={(sessionId) => {
-                onAddEntity({
-                  kind: "session",
-                  key: `session:manual:${sessionId}`,
-                  source: "manual",
-                  sessionId,
-                });
-              }}
-              open={pickerOpen}
-              onOpenChange={setPickerOpen}
-            />
-          )}
+            )}
+          </div>
         </div>
       </div>
     </div>

…ps/desktop/src/chat/components/index.tsx …/src/chat/components/floating-button.tsxapps/desktop/src/chat/components/index.tsx renamed to apps/desktop/src/chat/components/floating-button.tsx apps/desktop/src/chat/components/index.tsx renamed to apps/desktop/src/chat/components/floating-button.tsx

@@ -4,7 +4,7 @@ import { useHotkeys } from "react-hotkeys-hook";
 
 import { cn } from "@hypr/utils";
 
-import { ChatView } from "./view";
+import { ChatView } from "./chat-panel";
 
 import { useShell } from "~/contexts/shell";
 
@@ -96,8 +96,8 @@ export function PersistentChatPanel({
   return (
     <div
       className={cn([
-        "fixed z-[100]",
-        !isVisible && "!hidden",
+        "fixed z-100",
+        !isVisible && "hidden!",
         isPanel && "pointer-events-none",
       ])}
       style={

apps/desktop/src/chat/components/persistent-chat.tsx

@@ -10,17 +10,15 @@ import {
   useState,
 } from "react";
 
-import { commands as templateCommands } from "@hypr/plugin-template";
-
-import { useLanguageModel } from "~/ai/hooks";
-import type { ContextEntity, ContextRef } from "~/chat/context/entities";
-import { hydrateSessionContextFromFs } from "~/chat/context/session-context-hydrator";
-import { useChatContextPipeline } from "~/chat/context/use-chat-context-pipeline";
+import type { ContextRef } from "~/chat/context/entities";
+import {
+  type DisplayEntity,
+  useChatContextPipeline,
+} from "~/chat/context/use-chat-context-pipeline";
 import { useCreateChatMessage } from "~/chat/store/useCreateChatMessage";
-import { CONTEXT_TEXT_FIELD } from "~/chat/tools";
-import { CustomChatTransport } from "~/chat/transport";
+import { stripEphemeralToolContext } from "~/chat/tools/strip-ephemeral-tool-context";
+import { useTransport } from "~/chat/transport/use-transport";
 import type { HyprUIMessage } from "~/chat/types";
-import { useToolRegistry } from "~/contexts/tool";
 import { id } from "~/shared/utils";
 import * as main from "~/store/tinybase/store/main";
 
@@ -42,44 +40,14 @@ interface ChatSessionProps {
     stop: () => void;
     status: ChatStatus;
     error?: Error;
-    contextEntities: ContextEntity[];
+    contextEntities: DisplayEntity[];
     pendingRefs: ContextRef[];
     onRemoveContextEntity: (key: string) => void;
     onAddContextEntity: (ref: ContextRef) => void;
     isSystemPromptReady: boolean;
   }) => ReactNode;
 }
 
-function isRecord(value: unknown): value is Record<string, unknown> {
-  return typeof value === "object" && value !== null;
-}
-
-function stripEphemeralToolContext(
-  parts: HyprUIMessage["parts"],
-): HyprUIMessage["parts"] {
-  let changed = false;
-  const sanitized = parts.map((part) => {
-    if (
-      !isRecord(part) ||
-      part.type !== "tool-search_sessions" ||
-      part.state !== "output-available" ||
-      !isRecord(part.output) ||
-      !(CONTEXT_TEXT_FIELD in part.output)
-    ) {
-      return part;
-    }
-
-    changed = true;
-    const { contextText: _contextText, ...restOutput } = part.output;
-    return {
-      ...part,
-      output: restOutput,
-    };
-  });
-
-  return changed ? sanitized : parts;
-}
-
 export function ChatSession({
   sessionId,
   chatGroupId,
@@ -277,99 +245,3 @@ export function ChatSession({
     </div>
   );
 }
-
-function useTransport(
-  modelOverride?: LanguageModel,
-  extraTools?: ToolSet,
-  systemPromptOverride?: string,
-  store?: ReturnType<typeof main.UI.useStore>,
-) {
-  const registry = useToolRegistry();
-  const configuredModel = useLanguageModel("chat");
-  const model = modelOverride ?? configuredModel;
-  const language = main.UI.useValue("ai_language", main.STORE_ID) ?? "en";
-  const [systemPrompt, setSystemPrompt] = useState<string | undefined>();
-
-  useEffect(() => {
-    if (systemPromptOverride) {
-      setSystemPrompt(systemPromptOverride);
-      return;
-    }
-
-    let stale = false;
-
-    templateCommands
-      .render({
-        chatSystem: {
-          language,
-        },
-      })
-      .then((result) => {
-        if (stale) {
-          return;
-        }
-
-        if (result.status === "ok") {
-          setSystemPrompt(result.data);
-        } else {
-          setSystemPrompt("");
-        }
-      })
-      .catch((error) => {
-        console.error(error);
-        if (!stale) {
-          setSystemPrompt("");
-        }
-      });
-
-    return () => {
-      stale = true;
-    };
-  }, [language, systemPromptOverride]);
-
-  const effectiveSystemPrompt = systemPromptOverride ?? systemPrompt;
-  const isSystemPromptReady =
-    typeof systemPromptOverride === "string" || systemPrompt !== undefined;
-
-  const tools = useMemo(() => {
-    const localTools = registry.getTools("chat-general");
-
-    if (extraTools && import.meta.env.DEV) {
-      for (const key of Object.keys(extraTools)) {
-        if (key in localTools) {
-          console.warn(
-            `[ChatSession] Tool name collision: "${key}" exists in both local registry and extraTools. extraTools will take precedence.`,
-          );
-        }
-      }
-    }
-
-    return {
-      ...localTools,
-      ...extraTools,
-    };
-  }, [registry, extraTools]);
-
-  const transport = useMemo(() => {
-    if (!model) {
-      return null;
-    }
-
-    return new CustomChatTransport(
-      model,
-      tools,
-      effectiveSystemPrompt,
-      async (ref) => {
-        if (!store) {
-          return null;
-        }
-        return hydrateSessionContextFromFs(store, ref.sessionId);
-      },
-    );
-  }, [model, tools, effectiveSystemPrompt, store]);
-
-  return {
-    transport,
-    isSystemPromptReady,
-  };
-}

…/desktop/src/chat/components/session.tsx …src/chat/components/session-provider.tsxapps/desktop/src/chat/components/session.tsx renamed to apps/desktop/src/chat/components/session-provider.tsx apps/desktop/src/chat/components/session.tsx renamed to apps/desktop/src/chat/components/session-provider.tsx

@@ -7,7 +7,12 @@ function isRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === "object" && value !== null;
 }
 
-export type ContextEntitySource = "tool" | "manual" | "auto-current";
+export const CONTEXT_ENTITY_SOURCES = [
+  "tool",
+  "manual",
+  "auto-current",
+] as const;
+export type ContextEntitySource = (typeof CONTEXT_ENTITY_SOURCES)[number];
 
 export type ContextRef = {
   kind: "session";