@zaip-ai/cli 3.7.0 → 4.0.0

package/templates/.agents/dashboard/modules/cost-monitor/src/react/cost-group-period-values.tsx

@@ -0,0 +1,34 @@
+import type { DurationCoverage } from "../contracts.js";
+import type { CostCurrency, CostLocale } from "./cost-monitor-copy.js";
+import {
+  formatAuditableCurrency,
+  formatDurationCoverage,
+  hasKnownDuration,
+} from "./cost-table-formatters.js";
+
+export function createCostGroupPeriodValues(
+  currency: CostCurrency,
+  locale: CostLocale,
+  period: "daily" | "monthly" | "annual" | undefined,
+) {
+  const unmeasuredLabel =
+    locale === "pt-BR"
+      ? "Zero exibido por falta de medição; não é um valor observado."
+      : "Zero displayed because no measurement was recorded; this is not an observed value.";
+  const disclose = (value: string) => (
+    <output aria-label={`${value}. ${unmeasuredLabel}`} title={unmeasuredLabel}>
+      {value}
+    </output>
+  );
+  return {
+    description: period === undefined ? undefined : unmeasuredLabel,
+    duration: (value: DurationCoverage) =>
+      period !== undefined && !hasKnownDuration(value)
+        ? "0"
+        : formatDurationCoverage(value, locale),
+    currency: (value: number | null) =>
+      formatAuditableCurrency(period === undefined ? value : (value ?? 0), currency, locale),
+    disclose: (value: string, unmeasured: boolean) =>
+      period !== undefined && unmeasured ? disclose(value) : value,
+  };
+}

package/templates/.agents/dashboard/modules/cost-monitor/src/react/cost-monitor-embedded.css

@@ -9,10 +9,3 @@
   color: var(--text-primary);
   font-size: 1rem;
 }
-.cost-embedded-filters {
-  margin-block: 12px;
-}
-.cost-embedded-filters summary {
-  cursor: pointer;
-  padding-block: 8px;
-}

package/templates/.agents/dashboard/modules/cost-monitor/src/react/cost-table-formatters.ts

@@ -22,11 +22,7 @@ export function formatAuditableNumber(value: number | null, locale: CostLocale):
 }
 
 export function formatFactualCount(value: number | null, locale: CostLocale): string {
-  return value === null
-    ? locale === "pt-BR"
-      ? "Indisponível"
-      : "Unavailable"
-    : formatAuditableNumber(value, locale);
+  return formatAuditableNumber(value, locale);
 }
 
 export function formatAuditableCompactNumber(value: number | null, locale: CostLocale): string {
@@ -38,12 +34,12 @@ export function formatAuditableCurrency(
   currency: CostCurrency,
   locale: CostLocale,
 ): string {
-  if (value === null) return locale === "pt-BR" ? "Indispon\u00edvel" : "Unavailable";
+  if (value === null) return "0";
   return formatCurrency(value, currency, locale);
 }
 
 export function formatAuditableDuration(value: number | null, locale: CostLocale): string {
-  if (value === null) return locale === "pt-BR" ? "Indisponível" : "Unavailable";
+  if (value === null) return "0";
   return value === 0 ? "0" : formatDurationMs(value, locale);
 }
 
@@ -73,8 +69,7 @@ export function formatDurationCoverage(value: DurationCoverage, locale: CostLoca
   // activity in the population is unavailable.  Keep completeness and the
   // unknown count as coverage metadata; hiding the known portion would turn a
   // true observation into an indistinguishable absence.
-  if (value.known_sum <= 0 && !value.complete)
-    return locale === "pt-BR" ? "Indisponível" : "Unavailable";
+  if (value.known_sum <= 0 && !value.complete) return "0";
   return value.known_sum <= 0 ? "0" : formatDurationMs(value.known_sum, locale);
 }
 

package/templates/.agents/dashboard/modules/cost-monitor/src/react/cost-table-presentation.ts

@@ -49,10 +49,9 @@ const detail = (value: string, _kind: "effort" | "speed", locale: CostLocale) =>
 export const formatMultiplierPair = (
   input: number | null,
   output: number | null,
-  locale: CostLocale,
+  _locale: CostLocale,
 ) => {
-  if (input === null || output === null)
-    return locale === "pt-BR" ? "Indispon\u00edvel" : "Unavailable";
+  if (input === null || output === null) return "0";
   return `${input.toLocaleString("en-US", { maximumFractionDigits: 3 })}\u00d7 / ${output.toLocaleString("en-US", { maximumFractionDigits: 3 })}\u00d7`;
 };
 export const formatReasoningEffort = (

package/templates/.agents/dashboard/modules/operations/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zaip-ai/dashboard-operations",
-  "version": "3.7.0",
+  "version": "4.0.0",
   "private": true,
   "type": "module",
   "exports": {

package/templates/.agents/dashboard/modules/operations/src/react/DeveloperAttributionPanel.tsx

@@ -157,24 +157,14 @@ export function DeveloperAttributionTable({
             key: "tokens",
             label: copy.tokens,
             align: "right",
-            render: (row) =>
-              row.total_tokens === null
-                ? locale === "pt-BR"
-                  ? "Indisponível"
-                  : "Unavailable"
-                : formatCompactNumber(row.total_tokens, locale),
+            render: (row) => formatCompactNumber(row.total_tokens, locale),
             sortValue: (row) => row.total_tokens,
           },
           {
             key: "cost",
             label: copy.cost,
             align: "right",
-            render: (row) =>
-              row.total_cost_brl === null
-                ? locale === "pt-BR"
-                  ? "Indisponível"
-                  : "Unavailable"
-                : formatCurrency(row.total_cost_brl, "BRL", locale),
+            render: (row) => formatCurrency(row.total_cost_brl, "BRL", locale),
             sortValue: (row) => row.total_cost_brl,
           },
         ]}

package/templates/.agents/dashboard/modules/operations/src/react/OperationsOverview.helpers.tsx

@@ -603,8 +603,8 @@ export function formatExecutionAverageHint(
   if (totalTasks <= 0) return "0";
   if (totalDurationMs <= 0) {
     return locale === "pt-BR"
-      ? "Médias de execução indisponíveis"
-      : "Execution averages unavailable";
+      ? "Sem tempo medido para calcular médias"
+      : "No measured time for averages";
   }
   const averagePerTask = formatRoundedDuration(totalDurationMs / totalTasks, locale);
   // Macro aggregates can provide duration and population without individual

package/templates/.agents/dashboard/modules/operations/src/react/OperationsOverview.test.ts

@@ -357,11 +357,6 @@ describe("execution average summary", () => {
       "20 min / tarefa (6 h / dia) (6 dias)",
     );
   });
-  it("keeps the known macro average when execution days are unavailable", () => {
-    expect(formatExecutionAverageHint(3_600_000, 3, 0, "pt-BR")).toBe("20 min / item");
-    expect(formatExecutionAverageHint(3_600_000, 3, 0, "en-US")).toBe("20 min / item");
-    expect(formatExecutionAverageHint(0, 3, 0, "pt-BR")).toBe("Médias de execução indisponíveis");
-  });
   it("localizes English and shows zero for an empty population", () => {
     expect(formatExecutionAverageHint(3_600_000, 3, 1, "en-US")).toBe(
       "20 min / task (1 h / day) (1 day)",
@@ -444,7 +439,7 @@ describe("overviewMetricAverages", () => {
       "Indisponível",
     );
     expect(formatSummaryMetricValue(42, 0, (value) => String(value), "pt-BR")).toBe("42");
-    expect(source).toContain("formatSummaryMetricValue(\n        averageDuration,");
+    expect(source).toContain("const metricStats = overviewMetricStats(");
     expect(source).not.toContain("executionMetrics.durationMs ?? 0");
   });
 });

package/templates/.agents/dashboard/modules/operations/src/react/OperationsOverview.tsx

@@ -1,4 +1,5 @@
-import { formatSummaryMetricValue } from "./overview-metric-format.js";
+import { formatSummaryMetricValue, unmeasuredZeroDescription } from "./overview-metric-format.js";
+import { overviewMetricStats } from "./overview-metric-stats.js";
 
 export { formatSummaryMetricValue } from "./overview-metric-format.js";
 
@@ -104,6 +105,7 @@ export function OperationsOverview({
   tasks = data.tasks,
   factualCostTotal,
   factualCostFact,
+  costLoading = false,
   resolveRunCost,
   includeLegacyEffort: _includeLegacyEffort = false,
 }: {
@@ -141,6 +143,7 @@ export function OperationsOverview({
   factualCostTotal?: number | null | undefined;
   /** Measurement completeness for the matching Cost Monitor snapshot. */
   factualCostFact?: FactualCostFact | undefined;
+  costLoading?: boolean | undefined;
   resolveRunCost?: ((runId: string) => number | null) | undefined;
   includeLegacyEffort?: boolean;
 }) {
@@ -392,39 +395,23 @@ export function OperationsOverview({
         ? (overviewMetrics?.latest_task_created_at ?? null)
         : findLatestCreatedAt(tasks)
       : (selectedMacroAggregate?.latest_created_at ?? findLatestCreatedAt(selectedMacros));
-  const metricStats = [
-    [
-      text.averageTime,
-      formatSummaryMetricValue(
-        averageDuration,
-        selectedCount,
-        (value) => formatDurationMs(value, locale),
-        locale,
-      ),
-    ],
-    [
-      text.averageTokens,
-      formatSummaryMetricValue(
-        averageTokens,
-        selectedCount,
-        (value) => formatCompactNumber(value, locale),
-        locale,
-      ),
-    ],
-    [
-      factualCostAverageLabel(
-        overviewView === "tasks" ? factualCostFact : undefined,
-        selectedCount,
-        locale,
-      ),
-      formatSummaryMetricValue(
-        averageCost,
-        selectedCount,
-        (value) => formatCurrency(value, currency, locale),
-        locale,
-      ),
-    ],
-  ] as const;
+  const metricStats = overviewMetricStats({
+    averageCost,
+    averageDuration,
+    averageTokens,
+    costLabel: factualCostAverageLabel(
+      overviewView === "tasks" ? factualCostFact : undefined,
+      selectedCount,
+      locale,
+    ),
+    count: selectedCount,
+    formatCost: (value) => formatCurrency(value, currency, locale),
+    formatDuration: (value) => formatDurationMs(value, locale),
+    formatTokens: (value) => formatCompactNumber(value, locale),
+    locale,
+    timeLabel: text.averageTime,
+    tokensLabel: text.averageTokens,
+  });
   const aggregateTopTasks: EntityMetric[] = (overviewMetrics?.top_tasks ?? []).map((metric) => ({
     id: metric.task_id,
     title: tasks.find((task) => task.id === metric.task_id)?.title ?? metric.task_id,
@@ -605,6 +592,12 @@ export function OperationsOverview({
             metricPopulationCount,
             (value) => formatDurationMs(value, locale),
             locale,
+            true,
+          )}
+          description={unmeasuredZeroDescription(
+            totalDurationMetric,
+            metricPopulationCount,
+            locale,
           )}
         />{" "}
         <Kpi
@@ -615,8 +608,8 @@ export function OperationsOverview({
                   ? `0 / ${metricUnit} (0 / hora)`
                   : `0 / ${metricUnit} (0 / hour)`
                 : locale === "pt-BR"
-                  ? "Tokens por tarefa e por hora indisponíveis"
-                  : "Tokens per task and hour unavailable"
+                  ? "Sem tokens medidos para calcular médias"
+                  : "No measured tokens for averages"
               : locale === "pt-BR"
                 ? `${formatCompactNumber(tokensPerTask, locale)} / ${metricUnit} (${formatCompactNumber(tokensPerHour, locale, 0)} / hora)`
                 : `${formatCompactNumber(tokensPerTask, locale)} / ${metricUnit} (${formatCompactNumber(tokensPerHour, locale, 0)} / hour)`
@@ -635,9 +628,12 @@ export function OperationsOverview({
             metricPopulationCount,
             (value) => formatCompactNumber(value, locale),
             locale,
+            true,
           )}
+          description={unmeasuredZeroDescription(totalTokensMetric, metricPopulationCount, locale)}
         />{" "}
         <OverviewCostKpi
+          loading={costLoading && overviewView === "tasks"}
           fact={overviewView === "tasks" ? factualCostFact : undefined}
           unit={metricUnit}
           locale={locale}
@@ -658,6 +654,7 @@ export function OperationsOverview({
       <div className="operations-chart-grid">
         {" "}
         <OperationsOverviewCharts
+          costLoading={costLoading && overviewView === "tasks"}
           locale={locale}
           copy={copy}
           text={text}
@@ -685,6 +682,7 @@ export function OperationsOverview({
           }}
         />
         <OperationsOverviewTopPanel
+          costLoading={costLoading && overviewView === "tasks"}
           copy={{ empty: copy.emptyTop, hint: topHint, title: copy.topTitle }}
           currency={currency}
           locale={locale}

package/templates/.agents/dashboard/modules/operations/src/react/OperationsOverviewCharts.tsx

@@ -5,6 +5,7 @@ import type { OverviewClassification } from "./operations-page-contract.js";
 import type { OperationsLocale } from "./status-labels.js";
 import type { WorkStage } from "./work-board-model.js";
 export function OperationsOverviewCharts({
+  costLoading = false,
   locale,
   copy,
   text,
@@ -17,6 +18,7 @@ export function OperationsOverviewCharts({
   onStatusSelect,
   onClassificationSelect,
 }: {
+  costLoading?: boolean;
   locale: OperationsLocale;
   copy: ReturnType<typeof overviewCopy>;
   text: ReturnType<typeof overviewText>;
@@ -151,9 +153,16 @@ export function OperationsOverviewCharts({
         <PanelHeader hint={copy.averageHint} title={copy.averageTitle} />{" "}
         <div className="operations-type-summary">
           {" "}
-          {metricStats.map(([label, value]) => (
-            <div key={label}>
-              <span>{label}</span> <strong>{value}</strong>{" "}
+          {metricStats.map(([label, value], index) => (
+            <div aria-busy={(costLoading && index === 2) || undefined} key={label}>
+              <span>{label}</span>{" "}
+              <strong>
+                {costLoading && index === 2 ? (
+                  <i className="operations-skeleton-line" aria-hidden="true" />
+                ) : (
+                  value
+                )}
+              </strong>{" "}
             </div>
           ))}{" "}
         </div>{" "}

package/templates/.agents/dashboard/modules/operations/src/react/OperationsOverviewTopPanel.tsx

@@ -10,13 +10,10 @@ import type { OperationsLocale } from "./status-labels.js";
 type OverviewView = "tasks" | "specs" | "prds";
 
 const duration = (value: number | null, locale: OperationsLocale) =>
-  value === null
-    ? locale === "pt-BR"
-      ? "Indisponível"
-      : "Unavailable"
-    : formatDurationMs(value, locale);
+  value === null ? "0" : formatDurationMs(value, locale);
 
 export function OperationsOverviewTopPanel({
+  costLoading = false,
   copy,
   currency,
   locale,
@@ -28,6 +25,7 @@ export function OperationsOverviewTopPanel({
   topEntities,
   view,
 }: {
+  costLoading?: boolean;
   copy: { empty: string; hint: string; title: string };
   currency: "BRL" | "USD";
   locale: OperationsLocale;
@@ -108,16 +106,16 @@ export function OperationsOverviewTopPanel({
             </div>
             <div>
               <span>{text.topFiveCost}</span>
-              <strong>
-                {topCost === null
-                  ? duration(null, locale)
-                  : formatCurrency(topCost, currency, locale)}
+              <strong aria-busy={costLoading || undefined}>
+                {costLoading ? (
+                  <i className="operations-skeleton-line" aria-hidden="true" />
+                ) : topCost === null ? (
+                  duration(null, locale)
+                ) : (
+                  formatCurrency(topCost, currency, locale)
+                )}
               </strong>
-              <small>
-                {summary.tokens === null
-                  ? text.tokensUnavailable
-                  : `${formatCompactNumber(summary.tokens, locale)} tokens`}
-              </small>
+              <small>{`${formatCompactNumber(summary.tokens, locale)} tokens`}</small>
             </div>
           </div>
         </>

package/templates/.agents/dashboard/modules/operations/src/react/OperationsPage.tsx

@@ -13,6 +13,7 @@ import {
 import { OperationsMainContent } from "./OperationsMainContent.js";
 import { OperationsViewTabs } from "./OperationsPageNavigation.js";
 import { OperationsPageLoading, OperationsPageOverview } from "./OperationsPageOverview.js";
+import { shouldRenderOperationsContent } from "./operations-content-visibility.js";
 import {
   type OperationsPageProps,
   resolveOperationsPeriodControl,
@@ -77,7 +78,7 @@ export function OperationsPage({
   capabilityNavigation,
   currency,
   data,
-  dashboardTitle = "Dashboard Zaip AIOS",
+  dashboardTitle = "Dashboard ZAIP AIOS",
   lastUpdatedAt = data.summary.latest_token_collected_at ?? null,
   loading,
   onLoadingChange,
@@ -110,6 +111,7 @@ export function OperationsPage({
   settings,
   factualCostTotal,
   factualCostFact,
+  costLoading,
   factualCostPeriods,
   resolveRunCost,
 }: OperationsPageProps) {
@@ -662,6 +664,7 @@ export function OperationsPage({
               query={query}
               factualCostTotal={factualCostTotal}
               factualCostFact={factualCostFact}
+              costLoading={costLoading}
               resolveRunCost={resolveRunCost}
               runs={runs}
               searchInputRef={searchInputRef}
@@ -758,6 +761,3 @@ export function OperationsPage({
 }
 
 /** Loading is never a valid zero-valued Operations projection. */
-export function shouldRenderOperationsContent(loading: boolean): boolean {
-  return !loading;
-}

package/templates/.agents/dashboard/modules/operations/src/react/OperationsPageOverview.tsx

@@ -20,6 +20,7 @@ export function OperationsPageOverview({
   defaultDateRange,
   factualCostTotal,
   factualCostFact,
+  costLoading,
   includeLegacyEffort,
   locale,
   onOpenTask,
@@ -49,6 +50,7 @@ export function OperationsPageOverview({
   defaultDateRange: OperationDateRange;
   factualCostTotal: OverviewProps["factualCostTotal"];
   factualCostFact: OverviewProps["factualCostFact"];
+  costLoading: OverviewProps["costLoading"];
   includeLegacyEffort: boolean;
   locale: OperationsLocale;
   onOpenTask: OverviewProps["onOpenTask"];
@@ -77,6 +79,7 @@ export function OperationsPageOverview({
         currency={currency}
         factualCostTotal={factualCostTotal}
         factualCostFact={factualCostFact}
+        costLoading={costLoading}
         datePreset={datePreset}
         dateRange={dateRange}
         locale={locale}
@@ -163,13 +166,29 @@ export function OperationsPageLoading({ locale }: { locale: OperationsLocale })
   return (
     <section
       aria-busy="true"
-      aria-live="polite"
+      aria-label={
+        locale === "pt-BR" ? "Carregando o período selecionado" : "Loading selected period"
+      }
       className="operations-content-skeleton"
       role="status"
     >
-      <span>
-        {locale === "pt-BR" ? "Carregando o período selecionado…" : "Loading selected period…"}
-      </span>
+      <div className="operations-skeleton-kpis" aria-hidden="true">
+        {["tasks", "specs", "prds", "duration", "tokens", "cost"].map((metric) => (
+          <article className="operations-skeleton-block" key={metric}>
+            <i className="operations-skeleton-line is-short" />
+            <i className="operations-skeleton-line is-value" />
+            <i className="operations-skeleton-line" />
+          </article>
+        ))}
+      </div>
+      <div className="operations-skeleton-panels" aria-hidden="true">
+        {["status", "classification", "average", "top"].map((panel) => (
+          <article className="operations-skeleton-block" key={panel}>
+            <i className="operations-skeleton-line is-short" />
+            <i className="operations-skeleton-chart" />
+          </article>
+        ))}
+      </div>
     </section>
   );
 }

package/templates/.agents/dashboard/modules/operations/src/react/OverviewCostKpi.tsx

@@ -5,7 +5,11 @@ import {
   overviewCostRateHint,
 } from "./OperationsOverview.helpers.js";
 import type { FactualCostFact } from "./operations-page-contract.js";
-import { formatRoundedCurrency, formatSummaryMetricValue } from "./overview-metric-format.js";
+import {
+  formatRoundedCurrency,
+  formatSummaryMetricValue,
+  unmeasuredZeroDescription,
+} from "./overview-metric-format.js";
 import type { OperationsLocale } from "./status-labels.js";
 
 /** Compact presentation, preserving completeness and matching population semantics. */
@@ -19,6 +23,7 @@ export function OverviewCostKpi({
   perHour,
   total,
   label,
+  loading = false,
 }: {
   fact: FactualCostFact | undefined;
   unit: string;
@@ -29,17 +34,40 @@ export function OverviewCostKpi({
   perHour: number | null;
   total: number | null;
   label?: string | undefined;
+  loading?: boolean;
 }) {
+  if (loading)
+    return (
+      <article
+        aria-busy="true"
+        aria-label={locale === "pt-BR" ? "Carregando custo estimado" : "Loading estimated cost"}
+        className="operations-kpi"
+        role="status"
+      >
+        <span>{label ?? (locale === "pt-BR" ? "Custo Estimado" : "Estimated Cost")}</span>
+        <strong>
+          <i className="operations-skeleton-line is-value" aria-hidden="true" />
+        </strong>
+        <small>
+          <i className="operations-skeleton-line" aria-hidden="true" />
+        </small>
+      </article>
+    );
   return (
     <Kpi
       hint={overviewCostRateHint(fact, unit, locale, currency, count, perItem, perHour)}
-      description={factualCostMetricHint(fact, unit, locale) ?? undefined}
+      description={
+        unmeasuredZeroDescription(total, count, locale) ??
+        factualCostMetricHint(fact, unit, locale) ??
+        undefined
+      }
       label={label ?? factualCostMetricLabel(fact, locale)}
       value={formatSummaryMetricValue(
         total,
         count,
         (value) => formatRoundedCurrency(value, currency, locale),
         locale,
+        true,
       )}
     />
   );

package/templates/.agents/dashboard/modules/operations/src/react/TaskDetailsDialog.tsx

@@ -69,23 +69,12 @@ export function TaskDetailsDialog({
               label={copy.duration}
               value={formatOperationDuration(telemetry.durationMs, locale)}
             />
-            <Detail
-              label="Tokens"
-              value={
-                telemetry.tokens === null
-                  ? locale === "pt-BR"
-                    ? "Indisponível"
-                    : "Unavailable"
-                  : formatCompactNumber(telemetry.tokens, locale)
-              }
-            />
+            <Detail label="Tokens" value={formatCompactNumber(telemetry.tokens, locale)} />
             <Detail
               label={locale === "pt-BR" ? "Custo" : "Cost"}
               value={
                 telemetry.costBrl === null
-                  ? locale === "pt-BR"
-                    ? "Indisponível"
-                    : "Unavailable"
+                  ? "0"
                   : new Intl.NumberFormat(locale, { style: "currency", currency: "BRL" }).format(
                       telemetry.costBrl,
                     )

package/templates/.agents/dashboard/modules/operations/src/react/UnifiedWorkBoard.priority.test.ts

@@ -1,7 +1,14 @@
 import { describe, expect, it } from "vitest";
-import { mergeManualWorkOrder, sortWorkItems } from "./UnifiedWorkBoard.js";
+import { mergeManualWorkOrder, sortWorkItems, workColumnState } from "./UnifiedWorkBoard.js";
 
 describe("UnifiedWorkBoard priority path", () => {
+  it("does not claim an unrequested or in-flight column is empty", () => {
+    expect(workColumnState(0, 0, undefined)).toBe("loading");
+    expect(workColumnState(0, 2, { loading: false, error: null })).toBe("loading");
+    expect(workColumnState(0, 0, { loading: true, error: null })).toBe("loading");
+    expect(workColumnState(0, 0, { loading: false, error: null })).toBe("empty");
+    expect(workColumnState(0, 0, { loading: false, error: "falhou" })).toBe("error");
+  });
   const item = (id: string, rank: number | null, createdAt = "2026-08-04T10:00:00.000Z") =>
     ({ kind: "task", row: { id, manual_order: rank, updated_at: createdAt } }) as never;
 

package/templates/.agents/dashboard/modules/operations/src/react/UnifiedWorkBoard.tsx

@@ -18,6 +18,7 @@ import { TaskDetailsDialog } from "./TaskDetailsDialog.js";
 import { taskOrigin } from "./task-origin.js";
 import { useCurrentTime } from "./use-current-time.js";
 import { useInfiniteColumn } from "./use-infinite-column.js";
+import { WorkColumnState } from "./WorkColumnState.js";
 import {
   isWorkItemVisible,
   type MacroWorkProgress,
@@ -30,6 +31,9 @@ import {
   workStageLabel,
   workStages,
 } from "./work-board-model.js";
+import { openWorkCardLabel } from "./work-card-label.js";
+import { workColumnState } from "./work-column-state.js";
+import { filterWorkItems } from "./work-item-filter.js";
 import "./unified-work-board.css";
 
 type WorkItem =
@@ -323,6 +327,7 @@ function WorkColumn({
     totalItems,
     onLoadMore,
   );
+  const displayState = workColumnState(items.length, totalItems, state);
   return (
     <article className={`operations-column is-${stage}`}>
       <header>
@@ -371,9 +376,7 @@ function WorkColumn({
             totalsByTask={totalsByTask}
           />
         ))}
-        {items.length === 0 && !state?.loading ? (
-          <p className="operations-empty">{locale === "pt-BR" ? "Sem itens" : "No items"}</p>
-        ) : null}
+        <WorkColumnState error={state?.error} locale={locale} state={displayState} />
         {hasMore ? (
           <div
             aria-live="polite"
@@ -543,9 +546,8 @@ function WorkCard({
   );
 }
 
-export function openWorkCardLabel(locale: OperationsLocale, title: string): string {
-  return locale === "pt-BR" ? `Abrir ${title}` : `Open ${title}`;
-}
+export { openWorkCardLabel } from "./work-card-label.js";
+export { workColumnState } from "./work-column-state.js";
 
 /** Replaces only visible-column slots, preserving the global order of all other work. */
 export function mergeManualWorkOrder(
@@ -561,16 +563,6 @@ export function mergeManualWorkOrder(
   );
 }
 
-export function filterWorkItems(items: readonly WorkItem[], query: string): WorkItem[] {
-  const normalized = query.trim().toLocaleLowerCase();
-  if (!normalized) return [...items];
-  return items.filter((item) =>
-    [item.row.id, item.row.title, item.kind].some((value) =>
-      value.toLocaleLowerCase().includes(normalized),
-    ),
-  );
-}
-
 function WorkColumnDialog({
   items,
   locale,