fix(threads): Improve flickering when switching threads (and connecting) (CopilotKit#4154)

This PR includes several fixes that improve the UX of the Langraph +
Threads example.

Some are part of the example itself, while others are in the core
framework (most of which deal with avoiding flickering in the chat
window when switching (so, connecting) to threads.

Example changes:
- package-lock.json included (hence, line count)
- restore button + tooltips on archive/restore/delete
- segmented Active/All filter
- graceful error state if threads don't load
- skeleton rows on initial load
- stable scrollbar gutter
- pre-paint dark-mode class
- logo position stable across app/chat modes
- drop dynamic-import drawer wrapper that caused null first paint
- archived-row dimming via child colors instead of opacity.

Framework changes:
- Skip copilotkit.connectAgent when CopilotChat lacks a caller-supplied
threadId — a locally-minted UUID has no backend record, so /connect
would always 404 on the intelligence platform.
- Suppress the welcome screen while a connect is in flight and
unconditionally when the caller has supplied a threadId
(hasExplicitThreadId). Prevents the "How can I help you today?" flash on
thread switch.
- Gate suggestions on !isConnecting && !isRunning to avoid painting them
against a mid-replay message tree.
- Defer the isConnecting release by one animation frame so trailing
bootstrap renders commit before the flag flips.
- Reserve room for the "Powered by CopilotKit" license badge via a new
--copilotkit-license-banner-offset CSS var published by the banner on
mount; chat input consumes it only when bottom-anchored.
- Sort and display threads by lastRunAt (fallback to updatedAt →
createdAt) so metadata-only actions like archive/rename don't reshuffle
the list.
- useThreads waits for runtimeConnectionStatus === Connected before
dispatching the store context, eliminating the speculative /threads
fetch that fired before /info returned wsUrl.

Tests:
- CopilotChat.absentThreadConnect: connect is skipped without a
threadId, fires when supplied via prop or config.
- CopilotChatView.connectingGate: isConnecting suppresses welcome;
hasExplicitThreadId suppresses welcome on empty chat.
- threads (core): lastRunAt sort fallback ordering.
- use-threads: Connecting-state gate defers /threads until Connected.

<!--
Thank you for sending the PR! We appreciate you spending the time to
work on these changes.

Help us understand your motivation by explaining why you decided to make
this change.


**Please PLEASE reach out to us first before starting any significant
work on new or existing features.**

By the time you've gotten here, you're looking at creating a pull
request so hopefully we're not too late.

We love community contributions! That said, we want to make sure we're
all on the same page before you start.
Investing a lot of time and effort just to find out it doesn't align
with the upstream project feels awful, and we don't want that to happen.
It also helps to make sure the work you're planning isn't already in
progress.

As described in our contributing guide, please file an issue first:
https://github.com/ag-ui-protocol/ag-ui/issues
Or, reach out to us on Discord: https://discord.com/invite/6dffbvGU3D


You can learn more about contributing to copilotkit here:
https://github.com/copilotkit/copilotkit/blob/master/CONTRIBUTING.md

Happy contributing!

-->

## What does this PR do?

(Describe the changes introduced in this PR)

## Related PRs and Issues

- (Direct link to related PR or issue, if relevant)
- ENT-313
- ENT-317
- ENT-314

## Checklist

- [ ] I have read the [Contribution
Guide](https://github.com/copilotkit/copilotkit/blob/master/CONTRIBUTING.md)
- [ ] If the PR changes or adds functionality, I have updated the
relevant documentation

Author: BenTaylorDev

.changeset/ent-314-thread-connect-ux.md

@@ -0,0 +1,14 @@
+---
+"@copilotkit/react-core": minor
+"@copilotkit/core": patch
+---
+
+fix(threads): stabilize thread-switch UX, skip /connect for absent threads
+
+- Skip `connectAgent` when `CopilotChat` is rendered without a caller-supplied `threadId`. A locally-minted UUID has no backend record, so `/connect` would always 404 on the intelligence platform.
+- Expose `lastRunAt` on `Thread` and use it (with fallback to `updatedAt`, then `createdAt`) as the `useThreads` sort key so metadata-only actions like archive/rename no longer reshuffle the list.
+- `useThreads` waits for `runtimeConnectionStatus === Connected` before dispatching the store context, eliminating a speculative `/threads` fetch that fired before `/info` returned `wsUrl`.
+- Reserve room for the fixed "Powered by CopilotKit" license badge via a new `--copilotkit-license-banner-offset` CSS var published by the banner; chat input consumes it when bottom-anchored so the two no longer overlap.
+- Add a new `bottomAnchored` prop on `CopilotChatInput` for callers rendering it as a flex-last-child.
+
+**Behavior change (chat suggestions):** `CopilotChatView` no longer renders suggestions while `isRunning` is true. Previously, suggestions could appear against a streaming-in message tree and visibly reflow as text chunks landed. If you relied on suggestions staying visible during a run, you'll now see them only once the run finalizes (or the thread's initial connect completes).

examples/integrations/langgraph-python-threads/apps/app/index.html

@@ -5,6 +5,21 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/svg+xml" href="/copilotkit-logo-mark.svg" />
     <title>CopilotKit + LangGraph</title>
+    <script>
+      // Apply the theme class before first paint so the page doesn't flash
+      // white when the OS prefers dark. Mirrors the logic in ThemeProvider;
+      // its later useEffect is a no-op when the class is already correct.
+      (function () {
+        try {
+          var prefersDark = window.matchMedia(
+            "(prefers-color-scheme: dark)",
+          ).matches;
+          document.documentElement.classList.add(
+            prefersDark ? "dark" : "light",
+          );
+        } catch (_) {}
+      })();
+    </script>
   </head>
   <body>
     <div id="root"></div>

examples/integrations/langgraph-python-threads/apps/app/src/components/example-layout/index.tsx

@@ -37,8 +37,8 @@ export function ExampleLayout({ chatContent, appContent }: ExampleLayoutProps) {
       <div
         className={`max-h-full flex flex-col ${
           mode === "app"
-            ? "w-1/3 px-6 max-lg:hidden" // Hide on mobile in app mode
-            : "flex-1 max-lg:px-4"
+            ? "w-1/3 max-lg:hidden" // Hide on mobile in app mode
+            : "flex-1"
         }`}
       >
         <div className="shrink-0 pt-6 pl-6 pb-2 max-lg:pl-4 max-lg:pt-4">
@@ -48,7 +48,13 @@ export function ExampleLayout({ chatContent, appContent }: ExampleLayoutProps) {
             className="h-7 dark:invert"
           />
         </div>
-        <div className="flex-1 min-h-0 overflow-y-auto">{chatContent}</div>
+        <div
+          className={`flex-1 min-h-0 overflow-y-auto ${
+            mode === "app" ? "px-6" : "max-lg:px-4"
+          }`}
+        >
+          {chatContent}
+        </div>
       </div>
 
       {/* State Panel */}

examples/integrations/langgraph-python-threads/apps/app/src/components/threads-drawer/index.tsx

@@ -1,21 +1,4 @@
 "use client";
 
-import { useState, useEffect, type ComponentProps } from "react";
-import type ThreadsDrawerComponent from "./threads-drawer";
-
-type Props = ComponentProps<typeof ThreadsDrawerComponent>;
-
+export { default as ThreadsDrawer } from "./threads-drawer";
 export type { ThreadsDrawerProps } from "./threads-drawer";
-
-export function ThreadsDrawer(props: Props) {
-  const [Component, setComponent] = useState<
-    typeof ThreadsDrawerComponent | null
-  >(null);
-
-  useEffect(() => {
-    import("./threads-drawer").then((m) => setComponent(() => m.default));
-  }, []);
-
-  if (!Component) return null;
-  return <Component {...props} />;
-}