[codex] Port Reborn WebUI projects and settings coverage

crates/ironclaw_webui_v2_static/static/js/pages/projects/components/project-filesystem-panel.js

@@ -167,6 +167,9 @@ export function ProjectFilesystemPanel({ threadId }) {
                   key=${entry.path}
                   type="button"
                   onClick=${() => openEntry(entry)}
+                  data-testid="project-filesystem-entry"
+                  data-entry-kind=${entry.kind}
+                  data-entry-path=${entry.path}
                   className="flex w-full items-center gap-3 rounded-[12px] border border-transparent px-3 py-2 text-left hover:border-white/10 hover:bg-white/[0.04]"
                 >
                   <${Icon}

crates/ironclaw_webui_v2_static/static/js/pages/projects/components/project-workspace-shell.js

@@ -23,10 +23,14 @@ export function ProjectWorkspaceShell({
   const fsThreadId = representativeThreadId(threads);
 
   return html`
-    <div className="grid gap-5 xl:grid-cols-[minmax(0,1.15fr)_minmax(340px,0.85fr)]">
+    <div
+      data-testid="project-workspace"
+      data-project-id=${project.id}
+      className="grid gap-5 xl:grid-cols-[minmax(0,1.15fr)_minmax(340px,0.85fr)]"
+    >
       <div className="space-y-5">
         <div className="min-w-0">
-          <h2 className="text-2xl font-semibold tracking-tight text-white">${project.name}</h2>
+          <h2 data-testid="project-workspace-title" className="text-2xl font-semibold tracking-tight text-white">${project.name}</h2>
           ${project.description
             ? html`<p className="mt-1 text-sm leading-6 text-iron-300">${project.description}</p>`
             : null}

crates/ironclaw_webui_v2_static/static/js/pages/projects/components/projects-grid.js

@@ -12,6 +12,8 @@ import {
 function ProjectCard({ project, onOpen, t }) {
   return html`
     <article
+      data-testid="project-card"
+      data-project-id=${project.id}
       onClick=${() => onOpen(project.id)}
       role="button"
       tabIndex=${0}
@@ -72,6 +74,7 @@ function ProjectCard({ project, onOpen, t }) {
           <div className="mt-1 text-xs uppercase tracking-[0.16em] text-iron-500">${formatProjectRelativeTime(project.last_activity)}</div>
         </div>
         <${Button}
+          data-testid="project-open-workspace"
           variant="secondary"
           onClick=${(event) => {
             event.stopPropagation();
@@ -86,6 +89,8 @@ function ProjectCard({ project, onOpen, t }) {
 function GeneralProjectCard({ project, onOpen, t }) {
   return html`
     <${Panel}
+      data-testid="project-card"
+      data-project-id=${project.id}
       onClick=${() => onOpen(project.id)}
       role="button"
       tabIndex=${0}
@@ -115,6 +120,7 @@ function GeneralProjectCard({ project, onOpen, t }) {
             ${compactCount(project.threads_today || 0, "thread")} today
           </div>
           <${Button}
+            data-testid="project-open-workspace"
             variant="secondary"
             onClick=${(event) => {
               event.stopPropagation();
@@ -140,16 +146,7 @@ export function ProjectsGrid({
   const defaultProject = projects.find((project) => project.name === "default");
   const scopedProjects = projects.filter((project) => project.name !== "default");
 
-  if (!projects.length && totalProjects > 0) {
-    return html`
-      <${EmptyPanel}
-        title=${t("projects.empty.noMatchTitle")}
-        description=${t("projects.empty.noMatchDesc")}
-      />
-    `;
-  }
-
-  if (!projects.length) {
+  if (!totalProjects) {
     return html`
       <${EmptyPanel}
         title=${t("projects.empty.noneTitle")}
@@ -161,7 +158,7 @@ export function ProjectsGrid({
   }
 
   return html`
-    <div className="space-y-5">
+    <div data-testid="projects-grid" className="space-y-5">
       ${defaultProject && html`<${GeneralProjectCard} project=${defaultProject} onOpen=${onOpenProject} t=${t} />`}
 
       <${Panel} className="p-4 sm:p-5">
@@ -175,6 +172,7 @@ export function ProjectsGrid({
           </div>
           <div className="flex gap-2">
             <input
+              data-testid="projects-search-input"
               value=${search}
               onInput=${(event) => onSearchChange(event.target.value)}
               placeholder=${t("projects.searchPlaceholder")}
@@ -189,6 +187,13 @@ export function ProjectsGrid({
         ? html`<div className="grid gap-4 xl:grid-cols-2 2xl:grid-cols-3">
             ${scopedProjects.map((project) => html`<${ProjectCard} key=${project.id} project=${project} onOpen=${onOpenProject} t=${t} />`)}
           </div>`
+        : !projects.length
+          ? html`
+              <${EmptyPanel}
+                title=${t("projects.empty.noMatchTitle")}
+                description=${t("projects.empty.noMatchDesc")}
+              />
+            `
         : html`
             <${EmptyPanel}
               title=${t("projects.scoped.onlyGeneralTitle")}

crates/ironclaw_webui_v2_static/static/js/pages/projects/lib/projects-api.js

@@ -1,7 +1,7 @@
 // Project endpoints now call the real WebChat v2 `/api/webchat/v2/projects`
-// surface (list/create/read/update/delete + membership ACL). Mission/thread/
-// widget reads remain TODO stubs until the v2 missions/threads-by-project
-// endpoints land — the page degrades to empty panels for those.
+// surface (list/create/read/update/delete + membership ACL) plus the v2
+// project-filtered thread list. Mission/widget reads remain TODO stubs until
+// those v2 project child endpoints land.
 
 import {
   addProjectMember as apiAddProjectMember,
@@ -13,6 +13,7 @@ import {
   removeProjectMember as apiRemoveProjectMember,
   updateProject as apiUpdateProject,
   updateProjectMemberRole as apiUpdateProjectMemberRole,
+  listThreads as apiListThreads,
 } from "../../../lib/api.js";
 
 // Map a wire `RebornProjectInfo` to the shape the Projects page components
@@ -46,6 +47,17 @@ function toPageProject(project) {
   };
 }
 
+function toPageThread(thread) {
+  if (!thread) return null;
+  return {
+    ...thread,
+    id: thread.thread_id,
+    state: thread.state || null,
+    turn_count: thread.turn_count || 0,
+    updated_at: thread.updated_at || null,
+  };
+}
+
 export async function fetchProjectsOverview() {
   const response = await apiListProjects({ limit: 200 });
   const projects = (response?.projects || []).map(toPageProject);
@@ -94,8 +106,13 @@ export function removeProjectMember(projectId, userId) {
 export function fetchProjectMissions(_projectId) {
   return Promise.resolve({ missions: [], todo: true });
 }
-export function fetchProjectThreads(_projectId) {
-  return Promise.resolve({ threads: [], todo: true });
+export async function fetchProjectThreads(projectId) {
+  if (!projectId) return { threads: [] };
+  const response = await apiListThreads({ projectId, limit: 200 });
+  return {
+    threads: (response?.threads || []).map(toPageThread).filter(Boolean),
+    next_cursor: response?.next_cursor || null,
+  };
 }
 export function fetchProjectWidgets(_projectId) {
   return Promise.resolve({ widgets: [], todo: true });

crates/ironclaw_webui_v2_static/static/js/pages/projects/projects-page.js

@@ -64,15 +64,15 @@ export function ProjectsPage() {
         type: "error",
         message: error.message || t("projects.chatAutoFail"),
       });
+      return;
     }
 
-    navigate("/chat", {
+    navigate(nextThreadId ? `/chat/${nextThreadId}` : "/chat", {
       state: {
         composerDraft: t("projects.creationDraft"),
-        threadId: nextThreadId,
       },
     });
-  }, [navigate, threadsState]);
+  }, [navigate, threadsState, t]);
 
   const handleOpenThread = React.useCallback((nextThreadId) => {
     navigate(`/projects/${projectId}/threads/${nextThreadId}`);
@@ -85,7 +85,7 @@ export function ProjectsPage() {
     setChatFlowError(null);
     try {
       const newThreadId = await threadsState.createThread(projectId);
-      navigate("/chat", { state: { threadId: newThreadId } });
+      navigate(newThreadId ? `/chat/${newThreadId}` : "/chat");
       workspaceState.invalidate();
     } catch (error) {
       setChatFlowError({

crates/ironclaw_webui_v2_static/static/js/pages/settings/components/channels-tab.js

@@ -35,6 +35,7 @@ function ExtensionChannelCard({ channel, registryEntry }) {
   const t = useT();
   const name =
     registryEntry?.display_name ||
+    channel?.display_name ||
     channel?.name ||
     registryEntry?.name ||
     t("common.unknown");

crates/ironclaw_webui_v2_static/static/js/pages/settings/components/tools-tab.js

@@ -107,14 +107,18 @@ function ToolRow({ tool, onPermissionChange, isSaved }) {
 
   return html`
     <div
+      data-testid="settings-tool-row"
+      data-tool-name=${tool.name}
       className="flex items-center justify-between gap-4 border-t border-[var(--v2-panel-border)] py-3.5 first:border-0 first:pt-0"
     >
       <div className="flex min-w-0 items-center gap-3">
         ${isLocked &&
-        html`<${Icon}
-          name="lock"
-          className="h-3.5 w-3.5 shrink-0 text-[var(--v2-text-faint)]"
-        />`}
+        html`<span data-testid="settings-tool-lock" className="shrink-0">
+          <${Icon}
+            name="lock"
+            className="h-3.5 w-3.5 text-[var(--v2-text-faint)]"
+          />
+        </span>`}
         <div className="min-w-0">
           <div className="flex items-center gap-2">
             <span className="truncate font-mono text-sm text-[var(--v2-text)]"

crates/ironclaw_webui_v2_static/static/js/pages/settings/hooks/useSettings.js

@@ -83,6 +83,7 @@ export function useSettings() {
     needsRestart,
     importSettings,
     isImporting: importMutation.isPending,
-    saveError: mutation.error || importMutation.error,
+    saveError: mutation.error,
+    importError: importMutation.error,
   };
 }

crates/ironclaw_webui_v2_static/static/js/pages/settings/settings-page.js

@@ -8,6 +8,7 @@ import { LanguageTab } from "./components/language-tab.js";
 import { NetworkingTab } from "./components/networking-tab.js";
 import { RestartBanner } from "./components/restart-banner.js";
 import { SkillsTab } from "./components/skills-tab.js";
+import { SettingsToolbar } from "./components/settings-toolbar.js";
 import { ToolsTab } from "./components/tools-tab.js";
 import { TraceCommonsTab } from "./components/trace-commons-tab.js";
 import { UsersTab } from "./components/users-tab.js";
@@ -19,7 +20,17 @@ export function SettingsPage() {
   const { gatewayStatus, gatewayStatusQuery, isAdmin = false } = useOutletContext();
   const defaultTab = isAdmin ? "inference" : "language";
   const tab = requestedTab || defaultTab;
-  const { settings, query, save, savedKeys, needsRestart, saveError } = useSettings();
+  const {
+    settings,
+    query,
+    save,
+    savedKeys,
+    needsRestart,
+    importSettings,
+    isImporting,
+    saveError,
+    importError,
+  } = useSettings();
   const [searchQuery, setSearchQuery] = React.useState("");
 
   React.useEffect(() => {
@@ -98,6 +109,25 @@ export function SettingsPage() {
               </div>
             `}
 
+            ${importError &&
+            html`
+              <div
+                className="rounded-xl border border-red-400/30 bg-red-500/10 px-4 py-3 text-sm text-red-200"
+              >
+                ${t("settings.importFailed", { message: importError.message })}
+              </div>
+            `}
+
+            <${SettingsToolbar}
+              settingsExport=${query.data || null}
+              onImport=${importSettings}
+              isImporting=${isImporting}
+              searchQuery=${searchQuery}
+              onSearchChange=${setSearchQuery}
+              onSearchClear=${() => setSearchQuery("")}
+              canGoBack=${false}
+            />
+
             ${tabContent[tab]}
           </div>
         </div>

tests/e2e/helpers.py

@@ -306,6 +306,18 @@
     "logs_entry_message": "[data-testid='logs-entry-message']",
     "logs_entry_context": "[data-testid='logs-entry-context']",
     "logs_context_chip": "[data-testid='logs-context-chip'][data-context-key='{key}']",
+    "settings_search_placeholder": "Search settings...",
+    "settings_tool_row_for": (
+        "[data-testid='settings-tool-row'][data-tool-name='{name}']"
+    ),
+    "settings_tool_lock": "[data-testid='settings-tool-lock']",
+    "llm_provider_card_for": (
+        "[data-testid='llm-provider-card'][data-provider-id='{provider_id}']"
+    ),
+    "llm_provider_disclosure": "llm-provider-disclosure",
+    "skills_card": "#skills-list .ext-card",
+    "skill_name_placeholder": "skill-name",
+    "skill_content_placeholder": "---\\nname: example\\ndescription: ...\\n---\\n",
 }