From 38e0e4f3a08b51110d057c5eae4bbaf3ee0a6e02 Mon Sep 17 00:00:00 2001
From: Eric P Green <ericpgreen2@gmail.com>
Date: Tue, 9 Dec 2025 22:01:16 -0500
Subject: [PATCH 1/3] feat (Status): Add table with deployment, GitHub, OLAP,
 and AI info

---
 .../github/GithubConnectionDialog.svelte      |  27 +--
 .../projects/status/ConfigurationRowAi.svelte | 162 ++++++++++++++++
 .../status/ConfigurationRowDeployment.svelte  |  81 ++++++++
 .../status/ConfigurationRowGithub.svelte      | 177 ++++++++++++++++++
 .../status/ConfigurationRowOlap.svelte        | 111 +++++++++++
 .../projects/status/ProjectAiConnector.svelte | 162 ++++++++++++++++
 .../status/ProjectConfiguration.svelte        |  29 +++
 .../status/ProjectOlapConnector.svelte        | 104 ++++++++++
 .../features/projects/status/display-utils.ts |   2 +-
 .../[project]/-/status/+page.svelte           |  15 +-
 .../icons/connectors/OpenAIIcon.svelte        |  16 ++
 .../connectors/connector-icon-mapping.ts      |   2 +
 12 files changed, 863 insertions(+), 25 deletions(-)
 create mode 100644 web-admin/src/features/projects/status/ConfigurationRowAi.svelte
 create mode 100644 web-admin/src/features/projects/status/ConfigurationRowDeployment.svelte
 create mode 100644 web-admin/src/features/projects/status/ConfigurationRowGithub.svelte
 create mode 100644 web-admin/src/features/projects/status/ConfigurationRowOlap.svelte
 create mode 100644 web-admin/src/features/projects/status/ProjectAiConnector.svelte
 create mode 100644 web-admin/src/features/projects/status/ProjectConfiguration.svelte
 create mode 100644 web-admin/src/features/projects/status/ProjectOlapConnector.svelte
 create mode 100644 web-common/src/components/icons/connectors/OpenAIIcon.svelte

diff --git a/web-admin/src/features/projects/github/GithubConnectionDialog.svelte b/web-admin/src/features/projects/github/GithubConnectionDialog.svelte
index 9133bdcd5c5..e182f6177bf 100644
--- a/web-admin/src/features/projects/github/GithubConnectionDialog.svelte
+++ b/web-admin/src/features/projects/github/GithubConnectionDialog.svelte
@@ -25,6 +25,7 @@
   export let open = false;
   export let organization: string;
   export let project: string;
+  export let hideTrigger = false;
 
   const FORM_ID = "github-connect-form";
 
@@ -159,18 +160,20 @@
     }
   }}
 >
-  <Dialog.Trigger asChild let:builder>
-    <Button
-      builders={[builder]}
-      type="primary"
-      class="w-fit mt-1"
-      loading={$userStatus.isFetching}
-      onClick={() => void githubAccessManager.ensureGithubAccess()}
-    >
-      <Github className="w-4 h-4" />
-      Connect to GitHub
-    </Button>
-  </Dialog.Trigger>
+  {#if !hideTrigger}
+    <Dialog.Trigger asChild let:builder>
+      <Button
+        builders={[builder]}
+        type="primary"
+        class="w-fit mt-1"
+        loading={$userStatus.isFetching}
+        onClick={() => void githubAccessManager.ensureGithubAccess()}
+      >
+        <Github className="w-4 h-4" />
+        Connect to GitHub
+      </Button>
+    </Dialog.Trigger>
+  {/if}
   <Dialog.Content class="translate-y-[-200px]">
     <Dialog.Header>
       <div class="flex flex-row gap-x-2 items-center">
diff --git a/web-admin/src/features/projects/status/ConfigurationRowAi.svelte b/web-admin/src/features/projects/status/ConfigurationRowAi.svelte
new file mode 100644
index 00000000000..f54b8d0d87f
--- /dev/null
+++ b/web-admin/src/features/projects/status/ConfigurationRowAi.svelte
@@ -0,0 +1,162 @@
+<script lang="ts">
+  import Spinner from "@rilldata/web-common/features/entity-management/Spinner.svelte";
+  import { EntityStatus } from "@rilldata/web-common/features/entity-management/types";
+  import { connectorIconMapping } from "@rilldata/web-common/features/connectors/connector-icon-mapping";
+  import { createRuntimeServiceGetInstance } from "@rilldata/web-common/runtime-client";
+  import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
+  import ConnectorIcon from "@rilldata/web-common/components/icons/ConnectorIcon.svelte";
+
+  $: ({ instanceId } = $runtime);
+
+  $: instanceQuery = createRuntimeServiceGetInstance(instanceId);
+  $: ({ data: instanceData, isLoading, error } = $instanceQuery);
+
+  // Get the active AI connector name
+  $: aiConnector = instanceData?.instance?.aiConnector;
+
+  // Check if this is a user-configured connector (exists in projectConnectors)
+  $: userConnectorConfig = instanceData?.instance?.projectConnectors?.find(
+    (c) => c.name === aiConnector,
+  );
+
+  $: isUserConfigured = !!userConnectorConfig;
+
+  // Get the driver type for icon lookup
+  $: driverType = userConnectorConfig?.type;
+
+  // Get the icon component for the connector
+  $: IconComponent =
+    connectorIconMapping[driverType as keyof typeof connectorIconMapping];
+
+  // Extract config properties for user-provided connectors (excluding secrets)
+  $: configDetails = getConfigDetails(userConnectorConfig?.config);
+
+  function getConfigDetails(
+    config: Record<string, unknown> | undefined,
+  ): { label: string; value: string }[] {
+    if (!config) return [];
+
+    const details: { label: string; value: string }[] = [];
+    const displayOrder = ["model", "base_url", "api_type", "api_version"];
+
+    for (const key of displayOrder) {
+      const value = config[key];
+      if (value && typeof value === "string" && !isSecretValue(value)) {
+        details.push({
+          label: getDisplayLabel(key),
+          value: value,
+        });
+      }
+    }
+
+    return details;
+  }
+
+  function getDisplayLabel(key: string): string {
+    const labels: Record<string, string> = {
+      model: "Model",
+      base_url: "Base URL",
+      api_type: "API Type",
+      api_version: "API Version",
+    };
+    return labels[key] ?? key;
+  }
+
+  function isSecretValue(value: string): boolean {
+    // Don't display templated values or anything that looks like a secret
+    return (
+      value.includes("{{") ||
+      value.includes("}}") ||
+      value.toLowerCase().includes("secret") ||
+      value.startsWith("sk-")
+    );
+  }
+
+  function getDriverDisplayName(driver: string | undefined): string {
+    if (!driver) return "AI";
+    const names: Record<string, string> = {
+      openai: "OpenAI",
+      admin: "Rill AI",
+    };
+    return names[driver] ?? driver;
+  }
+</script>
+
+<div class="config-row">
+  <div class="config-label">AI</div>
+  <div class="config-value">
+    {#if isLoading}
+      <Spinner status={EntityStatus.Running} size="14px" />
+    {:else if error}
+      <span class="text-red-600 text-sm">Error loading AI connector</span>
+    {:else if isUserConfigured}
+      <div class="ai-content">
+        {#if IconComponent}
+          <svelte:component this={IconComponent} size="16px" />
+        {:else}
+          <ConnectorIcon size="16px" />
+        {/if}
+        <span class="connector-name">
+          {getDriverDisplayName(userConnectorConfig?.type)}
+        </span>
+        {#if configDetails.length > 0}
+          {#each configDetails as detail, i}
+            <span class="separator">•</span>
+            <span class="detail">
+              <span class="detail-label">{detail.label}:</span>
+              {detail.value}
+            </span>
+          {/each}
+        {/if}
+      </div>
+    {:else}
+      <div class="ai-content">
+        <span class="connector-name">Rill-managed</span>
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style lang="postcss">
+  .config-row {
+    @apply flex items-center border-b border-slate-200;
+    @apply min-h-[44px];
+  }
+
+  .config-row:last-child {
+    @apply border-b-0;
+  }
+
+  .config-label {
+    @apply w-[140px] flex-shrink-0 px-4 py-3;
+    @apply text-sm font-medium text-gray-600;
+    @apply bg-slate-50;
+    @apply border-r border-slate-200;
+    @apply whitespace-nowrap;
+  }
+
+  .config-value {
+    @apply flex-1 px-4 py-3;
+    @apply text-sm;
+  }
+
+  .ai-content {
+    @apply flex items-center gap-x-2 flex-wrap;
+  }
+
+  .connector-name {
+    @apply font-medium text-gray-800;
+  }
+
+  .separator {
+    @apply text-gray-400;
+  }
+
+  .detail {
+    @apply text-gray-600;
+  }
+
+  .detail-label {
+    @apply text-gray-500;
+  }
+</style>
diff --git a/web-admin/src/features/projects/status/ConfigurationRowDeployment.svelte b/web-admin/src/features/projects/status/ConfigurationRowDeployment.svelte
new file mode 100644
index 00000000000..f7503668156
--- /dev/null
+++ b/web-admin/src/features/projects/status/ConfigurationRowDeployment.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+  import { V1DeploymentStatus } from "@rilldata/web-admin/client";
+  import Spinner from "@rilldata/web-common/features/entity-management/Spinner.svelte";
+  import { EntityStatus } from "@rilldata/web-common/features/entity-management/types";
+  import { deploymentChipDisplays } from "./display-utils";
+  import { useProjectDeployment } from "./selectors";
+
+  export let organization: string;
+  export let project: string;
+
+  $: projectDeployment = useProjectDeployment(organization, project);
+  $: ({ data: deployment, isLoading, error } = $projectDeployment);
+
+  $: currentStatusDisplay =
+    deploymentChipDisplays[
+      deployment?.status || V1DeploymentStatus.DEPLOYMENT_STATUS_UNSPECIFIED
+    ];
+</script>
+
+<div class="config-row">
+  <div class="config-label">Deployment</div>
+  <div class="config-value">
+    {#if isLoading}
+      <Spinner status={EntityStatus.Running} size="14px" />
+    {:else if error}
+      <span class="text-red-600 text-sm">Error loading deployment status</span>
+    {:else}
+      <div class="deployment-content">
+        <div class="status-badge {currentStatusDisplay.wrapperClass}">
+          <svelte:component
+            this={currentStatusDisplay.icon}
+            {...currentStatusDisplay.iconProps}
+          />
+          <span class={currentStatusDisplay.textClass}>
+            {currentStatusDisplay.text}
+          </span>
+        </div>
+        {#if deployment?.statusMessage}
+          <span class="status-message">{deployment.statusMessage}</span>
+        {/if}
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style lang="postcss">
+  .config-row {
+    @apply flex items-center border-b border-slate-200;
+    @apply min-h-[44px];
+  }
+
+  .config-row:last-child {
+    @apply border-b-0;
+  }
+
+  .config-label {
+    @apply w-[140px] flex-shrink-0 px-4 py-3;
+    @apply text-sm font-medium text-gray-600;
+    @apply bg-slate-50;
+    @apply border-r border-slate-200;
+    @apply whitespace-nowrap;
+  }
+
+  .config-value {
+    @apply flex-1 px-4 py-3;
+    @apply text-sm;
+  }
+
+  .deployment-content {
+    @apply flex items-center gap-x-3;
+  }
+
+  .status-badge {
+    @apply px-2 border rounded w-fit;
+    @apply flex space-x-1 items-center;
+  }
+
+  .status-message {
+    @apply text-gray-600 text-sm;
+  }
+</style>
diff --git a/web-admin/src/features/projects/status/ConfigurationRowGithub.svelte b/web-admin/src/features/projects/status/ConfigurationRowGithub.svelte
new file mode 100644
index 00000000000..5384b35dc09
--- /dev/null
+++ b/web-admin/src/features/projects/status/ConfigurationRowGithub.svelte
@@ -0,0 +1,177 @@
+<script lang="ts">
+  import { createAdminServiceGetProject } from "@rilldata/web-admin/client";
+  import { useDashboardsLastUpdated } from "@rilldata/web-admin/features/dashboards/listing/selectors";
+  import { GithubAccessManager } from "@rilldata/web-admin/features/projects/github/GithubAccessManager";
+  import GithubConnectionDialog from "@rilldata/web-admin/features/projects/github/GithubConnectionDialog.svelte";
+  import { useGithubLastSynced } from "@rilldata/web-admin/features/projects/selectors";
+  import Github from "@rilldata/web-common/components/icons/Github.svelte";
+  import Spinner from "@rilldata/web-common/features/entity-management/Spinner.svelte";
+  import { EntityStatus } from "@rilldata/web-common/features/entity-management/types";
+  import {
+    getGitUrlFromRemote,
+    getRepoNameFromGitRemote,
+  } from "@rilldata/web-common/features/project/deploy/github-utils";
+  import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
+
+  export let organization: string;
+  export let project: string;
+
+  let dialogOpen = false;
+
+  const githubAccessManager = new GithubAccessManager();
+
+  $: ({ instanceId } = $runtime);
+
+  $: proj = createAdminServiceGetProject(organization, project);
+  $: ({ isLoading, error } = $proj);
+
+  $: gitRemote = $proj.data?.project?.gitRemote;
+  $: managedGitId = $proj.data?.project?.managedGitId;
+  $: subpath = $proj.data?.project?.subpath;
+  $: prodBranch = $proj.data?.project?.prodBranch;
+
+  $: isGithubConnected = !!gitRemote;
+  $: isManagedGit = !!managedGitId;
+  $: repoName = getRepoNameFromGitRemote(gitRemote);
+
+  $: githubLastSynced = useGithubLastSynced(instanceId);
+  $: dashboardsLastUpdated = useDashboardsLastUpdated(
+    instanceId,
+    organization,
+    project,
+  );
+  $: lastUpdated = $githubLastSynced.data ?? $dashboardsLastUpdated;
+
+  function formatSyncTime(date: Date): string {
+    return date.toLocaleString(undefined, {
+      month: "short",
+      day: "numeric",
+      hour: "numeric",
+      minute: "numeric",
+    });
+  }
+</script>
+
+<div class="config-row">
+  <div class="config-label">GitHub</div>
+  <div class="config-value">
+    {#if isLoading}
+      <Spinner status={EntityStatus.Running} size="14px" />
+    {:else if error}
+      <span class="text-red-600 text-sm">Error loading GitHub status</span>
+    {:else if isGithubConnected && !isManagedGit}
+      <div class="connected-content">
+        <Github className="w-4 h-4 flex-shrink-0" />
+        <a
+          href={getGitUrlFromRemote(gitRemote)}
+          class="repo-link"
+          target="_blank"
+          rel="noreferrer noopener"
+        >
+          {repoName}
+        </a>
+        <span class="separator">•</span>
+        <span class="detail">branch: {prodBranch}</span>
+        {#if subpath}
+          <span class="separator">•</span>
+          <span class="detail">/{subpath}</span>
+        {/if}
+        {#if lastUpdated}
+          <span class="separator">•</span>
+          <span class="sync-time">Synced {formatSyncTime(lastUpdated)}</span>
+        {/if}
+      </div>
+    {:else}
+      <div class="not-connected-content">
+        <span class="not-connected-text">Not connected</span>
+        <button
+          class="connect-link"
+          on:click={() => {
+            void githubAccessManager.ensureGithubAccess();
+            dialogOpen = true;
+          }}
+        >
+          Connect →
+        </button>
+      </div>
+    {/if}
+  </div>
+</div>
+
+<GithubConnectionDialog
+  {organization}
+  {project}
+  bind:open={dialogOpen}
+  hideTrigger
+/>
+
+<style lang="postcss">
+  .config-row {
+    @apply flex items-center;
+    @apply border-b border-slate-200;
+    @apply min-h-[44px];
+  }
+
+  .config-row:last-child {
+    @apply border-b-0;
+  }
+
+  .config-label {
+    @apply w-[140px] flex-shrink-0;
+    @apply px-4 py-3;
+    @apply text-sm font-medium text-gray-600;
+    @apply bg-slate-50;
+    @apply border-r border-slate-200;
+    @apply whitespace-nowrap;
+  }
+
+  .config-value {
+    @apply flex-1 px-4 py-3;
+    @apply text-sm;
+  }
+
+  .connected-content {
+    @apply flex items-center;
+    @apply gap-x-2 flex-wrap;
+  }
+
+  .repo-link {
+    @apply font-semibold font-mono;
+    @apply text-gray-800;
+  }
+
+  .repo-link:hover {
+    @apply text-primary-600 underline;
+  }
+
+  .separator {
+    @apply text-gray-400;
+  }
+
+  .detail {
+    @apply text-gray-600;
+  }
+
+  .sync-time {
+    @apply text-gray-500 text-xs;
+  }
+
+  .not-connected-content {
+    @apply flex items-center gap-x-2;
+  }
+
+  .not-connected-text {
+    @apply text-gray-600;
+  }
+
+  .connect-link {
+    @apply text-primary-600;
+    @apply cursor-pointer;
+    @apply bg-transparent border-none p-0;
+    @apply text-sm font-medium;
+  }
+
+  .connect-link:hover {
+    @apply text-primary-700 underline;
+  }
+</style>
diff --git a/web-admin/src/features/projects/status/ConfigurationRowOlap.svelte b/web-admin/src/features/projects/status/ConfigurationRowOlap.svelte
new file mode 100644
index 00000000000..cfe3834bd5a
--- /dev/null
+++ b/web-admin/src/features/projects/status/ConfigurationRowOlap.svelte
@@ -0,0 +1,111 @@
+<script lang="ts">
+  import Spinner from "@rilldata/web-common/features/entity-management/Spinner.svelte";
+  import { EntityStatus } from "@rilldata/web-common/features/entity-management/types";
+  import { connectorIconMapping } from "@rilldata/web-common/features/connectors/connector-icon-mapping";
+  import { createRuntimeServiceGetInstance } from "@rilldata/web-common/runtime-client";
+  import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
+  import ConnectorIcon from "@rilldata/web-common/components/icons/ConnectorIcon.svelte";
+
+  $: ({ instanceId } = $runtime);
+
+  $: instanceQuery = createRuntimeServiceGetInstance(instanceId);
+  $: ({ data: instanceData, isLoading, error } = $instanceQuery);
+
+  // Get the active OLAP connector name (handle empty string as well as null/undefined)
+  $: olapConnector = instanceData?.instance?.olapConnector || "duckdb";
+
+  // Check if this is a user-configured connector (exists in projectConnectors)
+  $: isUserConfigured = instanceData?.instance?.projectConnectors?.some(
+    (c) => c.name === olapConnector,
+  );
+
+  // Find the connector to get the driver type
+  $: connectorConfig = instanceData?.instance?.projectConnectors?.find(
+    (c) => c.name === olapConnector,
+  );
+
+  // For user-configured connectors, use the driver type; otherwise use the connector name
+  $: driverType = connectorConfig?.type ?? olapConnector;
+
+  // Get display name
+  $: displayName = getDisplayName(driverType);
+
+  // Get the icon component for the connector
+  $: IconComponent =
+    connectorIconMapping[driverType as keyof typeof connectorIconMapping];
+
+  function getDisplayName(driver: string): string {
+    const displayNames: Record<string, string> = {
+      duckdb: "DuckDB",
+      clickhouse: "ClickHouse",
+      clickhousecloud: "ClickHouse Cloud",
+      druid: "Apache Druid",
+      pinot: "Apache Pinot",
+      bigquery: "BigQuery",
+      snowflake: "Snowflake",
+      postgres: "PostgreSQL",
+      mysql: "MySQL",
+      athena: "Athena",
+      redshift: "Redshift",
+      motherduck: "MotherDuck",
+    };
+    return displayNames[driver] ?? driver;
+  }
+</script>
+
+<div class="config-row">
+  <div class="config-label">OLAP Engine</div>
+  <div class="config-value">
+    {#if isLoading}
+      <Spinner status={EntityStatus.Running} size="14px" />
+    {:else if error}
+      <span class="text-red-600 text-sm">Error loading OLAP connector</span>
+    {:else}
+      <div class="olap-content">
+        {#if isUserConfigured}
+          {#if IconComponent}
+            <svelte:component this={IconComponent} size="16px" />
+          {:else}
+            <ConnectorIcon size="16px" />
+          {/if}
+        {/if}
+        <span class="connector-name">
+          {#if !isUserConfigured}Rill-managed
+          {/if}{displayName}
+        </span>
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style lang="postcss">
+  .config-row {
+    @apply flex items-center border-b border-slate-200;
+    @apply min-h-[44px];
+  }
+
+  .config-row:last-child {
+    @apply border-b-0;
+  }
+
+  .config-label {
+    @apply w-[140px] flex-shrink-0 px-4 py-3;
+    @apply text-sm font-medium text-gray-600;
+    @apply bg-slate-50;
+    @apply border-r border-slate-200;
+    @apply whitespace-nowrap;
+  }
+
+  .config-value {
+    @apply flex-1 px-4 py-3;
+    @apply text-sm;
+  }
+
+  .olap-content {
+    @apply flex items-center gap-x-2;
+  }
+
+  .connector-name {
+    @apply font-medium text-gray-800;
+  }
+</style>
diff --git a/web-admin/src/features/projects/status/ProjectAiConnector.svelte b/web-admin/src/features/projects/status/ProjectAiConnector.svelte
new file mode 100644
index 00000000000..34f8baece01
--- /dev/null
+++ b/web-admin/src/features/projects/status/ProjectAiConnector.svelte
@@ -0,0 +1,162 @@
+<script lang="ts">
+  import Spinner from "@rilldata/web-common/features/entity-management/Spinner.svelte";
+  import { EntityStatus } from "@rilldata/web-common/features/entity-management/types";
+  import { createRuntimeServiceGetInstance } from "@rilldata/web-common/runtime-client";
+  import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
+  import RillFilled from "@rilldata/web-common/components/icons/RillFilled.svelte";
+  import ConnectorIcon from "@rilldata/web-common/components/icons/ConnectorIcon.svelte";
+
+  $: ({ instanceId } = $runtime);
+
+  $: instanceQuery = createRuntimeServiceGetInstance(instanceId);
+  $: ({ data: instanceData, isLoading, error } = $instanceQuery);
+
+  // Get the active AI connector name
+  $: aiConnector = instanceData?.instance?.aiConnector;
+
+  // Check if this is a user-configured connector (exists in projectConnectors)
+  $: userConnectorConfig = instanceData?.instance?.projectConnectors?.find(
+    (c) => c.name === aiConnector,
+  );
+
+  $: isUserConfigured = !!userConnectorConfig;
+
+  // Extract config properties for user-provided connectors (excluding secrets)
+  $: configDetails = getConfigDetails(userConnectorConfig?.config);
+
+  function getConfigDetails(
+    config: Record<string, unknown> | undefined,
+  ): { label: string; value: string }[] {
+    if (!config) return [];
+
+    const details: { label: string; value: string }[] = [];
+    const displayOrder = ["model", "base_url", "api_type", "api_version"];
+
+    for (const key of displayOrder) {
+      const value = config[key];
+      if (value && typeof value === "string" && !isSecretValue(value)) {
+        details.push({
+          label: getDisplayLabel(key),
+          value: value,
+        });
+      }
+    }
+
+    return details;
+  }
+
+  function getDisplayLabel(key: string): string {
+    const labels: Record<string, string> = {
+      model: "Model",
+      base_url: "Base URL",
+      api_type: "API Type",
+      api_version: "API Version",
+    };
+    return labels[key] ?? key;
+  }
+
+  function isSecretValue(value: string): boolean {
+    // Don't display templated values or anything that looks like a secret
+    return (
+      value.includes("{{") ||
+      value.includes("}}") ||
+      value.toLowerCase().includes("secret") ||
+      value.startsWith("sk-")
+    );
+  }
+
+  function getDriverDisplayName(driver: string | undefined): string {
+    if (!driver) return "AI";
+    const names: Record<string, string> = {
+      openai: "OpenAI",
+      admin: "Rill AI",
+    };
+    return names[driver] ?? driver;
+  }
+</script>
+
+<section class="ai-connector">
+  <h3 class="ai-label">AI</h3>
+  {#if isLoading}
+    <div class="py-1">
+      <Spinner status={EntityStatus.Running} size="16px" />
+    </div>
+  {:else if error}
+    <div class="py-0.5">
+      <span class="text-red-600">Error loading AI connector</span>
+    </div>
+  {:else if isUserConfigured}
+    <div class="ai-display">
+      <div class="ai-header">
+        <ConnectorIcon size="16px" />
+        <span class="ai-name">
+          {getDriverDisplayName(userConnectorConfig?.type)}
+        </span>
+      </div>
+      {#if configDetails.length > 0}
+        <div class="ai-details">
+          {#each configDetails as detail}
+            <div class="ai-detail-row">
+              <span class="ai-detail-label">{detail.label}:</span>
+              <span class="ai-detail-value">{detail.value}</span>
+            </div>
+          {/each}
+        </div>
+      {/if}
+    </div>
+  {:else}
+    <div class="ai-display">
+      <div class="ai-header">
+        <RillFilled size="16" />
+        <span class="ai-name">
+          Rill AI
+          <span class="ai-default">(default)</span>
+        </span>
+      </div>
+    </div>
+  {/if}
+</section>
+
+<style lang="postcss">
+  .ai-connector {
+    @apply flex flex-col gap-y-1;
+  }
+
+  .ai-label {
+    @apply text-[10px] leading-none font-semibold uppercase;
+    @apply text-gray-500;
+  }
+
+  .ai-display {
+    @apply flex flex-col gap-y-1;
+  }
+
+  .ai-header {
+    @apply flex items-center gap-x-1.5;
+  }
+
+  .ai-name {
+    @apply text-[12px] font-semibold text-gray-800;
+  }
+
+  .ai-default {
+    @apply text-gray-500 font-normal;
+  }
+
+  .ai-details {
+    @apply flex flex-col gap-y-0.5 pl-6;
+  }
+
+  .ai-detail-row {
+    @apply flex items-center gap-x-1;
+    @apply text-[11px] text-gray-600;
+  }
+
+  .ai-detail-label {
+    @apply font-mono;
+  }
+
+  .ai-detail-value {
+    @apply text-gray-800;
+  }
+</style>
diff --git a/web-admin/src/features/projects/status/ProjectConfiguration.svelte b/web-admin/src/features/projects/status/ProjectConfiguration.svelte
new file mode 100644
index 00000000000..5f7e3d89df3
--- /dev/null
+++ b/web-admin/src/features/projects/status/ProjectConfiguration.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { page } from "$app/stores";
+  import ConfigurationRowDeployment from "./ConfigurationRowDeployment.svelte";
+  import ConfigurationRowGithub from "./ConfigurationRowGithub.svelte";
+  import ConfigurationRowOlap from "./ConfigurationRowOlap.svelte";
+  import ConfigurationRowAi from "./ConfigurationRowAi.svelte";
+
+  $: organization = $page.params.organization;
+  $: project = $page.params.project;
+</script>
+
+<section class="configuration-section">
+  <div class="configuration-table">
+    <ConfigurationRowDeployment {organization} {project} />
+    <ConfigurationRowGithub {organization} {project} />
+    <ConfigurationRowOlap />
+    <ConfigurationRowAi />
+  </div>
+</section>
+
+<style lang="postcss">
+  .configuration-section {
+    @apply flex flex-col;
+  }
+
+  .configuration-table {
+    @apply border border-slate-200 rounded-sm overflow-hidden;
+  }
+</style>
diff --git a/web-admin/src/features/projects/status/ProjectOlapConnector.svelte b/web-admin/src/features/projects/status/ProjectOlapConnector.svelte
new file mode 100644
index 00000000000..d5590d5b09c
--- /dev/null
+++ b/web-admin/src/features/projects/status/ProjectOlapConnector.svelte
@@ -0,0 +1,104 @@
+<script lang="ts">
+  import Spinner from "@rilldata/web-common/features/entity-management/Spinner.svelte";
+  import { EntityStatus } from "@rilldata/web-common/features/entity-management/types";
+  import { connectorIconMapping } from "@rilldata/web-common/features/connectors/connector-icon-mapping";
+  import { createRuntimeServiceGetInstance } from "@rilldata/web-common/runtime-client";
+  import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
+  import ConnectorIcon from "@rilldata/web-common/components/icons/ConnectorIcon.svelte";
+
+  $: ({ instanceId } = $runtime);
+
+  $: instanceQuery = createRuntimeServiceGetInstance(instanceId);
+  $: ({ data: instanceData, isLoading, error } = $instanceQuery);
+
+  // Get the active OLAP connector name
+  $: olapConnector = instanceData?.instance?.olapConnector ?? "duckdb";
+
+  // Check if this is a user-configured connector (exists in projectConnectors)
+  $: isUserConfigured = instanceData?.instance?.projectConnectors?.some(
+    (c) => c.name === olapConnector,
+  );
+
+  // Find the connector to get the driver type
+  $: connectorConfig = instanceData?.instance?.projectConnectors?.find(
+    (c) => c.name === olapConnector,
+  );
+
+  // For user-configured connectors, use the driver type; otherwise use the connector name
+  $: driverType = connectorConfig?.type ?? olapConnector;
+
+  // Get display name (capitalize first letter)
+  $: displayName = getDisplayName(driverType);
+
+  // Get the icon component for the connector
+  $: IconComponent =
+    connectorIconMapping[driverType as keyof typeof connectorIconMapping];
+
+  function getDisplayName(driver: string): string {
+    const displayNames: Record<string, string> = {
+      duckdb: "DuckDB",
+      clickhouse: "ClickHouse",
+      clickhousecloud: "ClickHouse Cloud",
+      druid: "Apache Druid",
+      pinot: "Apache Pinot",
+      bigquery: "BigQuery",
+      snowflake: "Snowflake",
+      postgres: "PostgreSQL",
+      mysql: "MySQL",
+      athena: "Athena",
+      redshift: "Redshift",
+      motherduck: "MotherDuck",
+    };
+    return displayNames[driver] ?? driver;
+  }
+</script>
+
+<section class="olap-connector">
+  <h3 class="olap-label">OLAP Engine</h3>
+  {#if isLoading}
+    <div class="py-1">
+      <Spinner status={EntityStatus.Running} size="16px" />
+    </div>
+  {:else if error}
+    <div class="py-0.5">
+      <span class="text-red-600">Error loading OLAP connector</span>
+    </div>
+  {:else}
+    <div class="olap-display">
+      {#if IconComponent}
+        <svelte:component this={IconComponent} size="16px" />
+      {:else}
+        <ConnectorIcon size="16px" />
+      {/if}
+      <span class="olap-name">
+        {displayName}
+        {#if !isUserConfigured}
+          <span class="olap-default">(default)</span>
+        {/if}
+      </span>
+    </div>
+  {/if}
+</section>
+
+<style lang="postcss">
+  .olap-connector {
+    @apply flex flex-col gap-y-1;
+  }
+
+  .olap-label {
+    @apply text-[10px] leading-none font-semibold uppercase;
+    @apply text-gray-500;
+  }
+
+  .olap-display {
+    @apply flex items-center gap-x-1.5;
+  }
+
+  .olap-name {
+    @apply text-[12px] font-semibold text-gray-800;
+  }
+
+  .olap-default {
+    @apply text-gray-500 font-normal;
+  }
+</style>
diff --git a/web-admin/src/features/projects/status/display-utils.ts b/web-admin/src/features/projects/status/display-utils.ts
index d4e7a35cd8c..09cd4f1ae8f 100644
--- a/web-admin/src/features/projects/status/display-utils.ts
+++ b/web-admin/src/features/projects/status/display-utils.ts
@@ -92,7 +92,7 @@ export const deploymentChipDisplays: Record<V1DeploymentStatus, StatusDisplay> =
     [V1DeploymentStatus.DEPLOYMENT_STATUS_RUNNING]: {
       icon: CheckCircle,
       iconProps: { className: "text-primary-600 hover:text-primary-500" },
-      text: "Ready",
+      text: "Running",
       textClass: "text-primary-600",
       wrapperClass: "bg-primary-50 border-primary-300",
     },
diff --git a/web-admin/src/routes/[organization]/[project]/-/status/+page.svelte b/web-admin/src/routes/[organization]/[project]/-/status/+page.svelte
index ba2ab04ec94..e5c6d406052 100644
--- a/web-admin/src/routes/[organization]/[project]/-/status/+page.svelte
+++ b/web-admin/src/routes/[organization]/[project]/-/status/+page.svelte
@@ -1,22 +1,13 @@
 <script lang="ts">
-  import { page } from "$app/stores";
   import ContentContainer from "@rilldata/web-admin/components/layout/ContentContainer.svelte";
-  import ProjectDeploymentStatus from "@rilldata/web-admin/features/projects/status/ProjectDeploymentStatus.svelte";
-  import ProjectGithubConnection from "@rilldata/web-admin/features/projects/github/ProjectGithubConnection.svelte";
+  import ProjectConfiguration from "@rilldata/web-admin/features/projects/status/ProjectConfiguration.svelte";
   import ProjectParseErrors from "@rilldata/web-admin/features/projects/status/ProjectParseErrors.svelte";
   import ProjectResources from "@rilldata/web-admin/features/projects/status/ProjectResources.svelte";
-
-  $: organization = $page.params.organization;
-  $: project = $page.params.project;
 </script>
 
 <ContentContainer title="Project status" maxWidth={1100}>
-  <div class="flex flex-col gap-y-4 size-full">
-    <div class="flex gap-x-20 items-start">
-      <ProjectGithubConnection {organization} {project} />
-      <ProjectDeploymentStatus {organization} {project} />
-    </div>
-
+  <div class="flex flex-col gap-y-6 size-full">
+    <ProjectConfiguration />
     <ProjectResources />
     <ProjectParseErrors />
   </div>
diff --git a/web-common/src/components/icons/connectors/OpenAIIcon.svelte b/web-common/src/components/icons/connectors/OpenAIIcon.svelte
new file mode 100644
index 00000000000..6b7f594b97b
--- /dev/null
+++ b/web-common/src/components/icons/connectors/OpenAIIcon.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  export let size = "1em";
+</script>
+
+<svg
+  height={size}
+  width={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364l2.0201-1.1638a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.4091-.6765zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z"
+    class="fill-gray-700"
+  />
+</svg>
diff --git a/web-common/src/features/connectors/connector-icon-mapping.ts b/web-common/src/features/connectors/connector-icon-mapping.ts
index a5e581f0395..b987cd3aa89 100644
--- a/web-common/src/features/connectors/connector-icon-mapping.ts
+++ b/web-common/src/features/connectors/connector-icon-mapping.ts
@@ -8,6 +8,7 @@ import AthenaIcon from "../../components/icons/connectors/AthenaIcon.svelte";
 import PostgresIcon from "../../components/icons/connectors/PostgresIcon.svelte";
 import MySqlIcon from "../../components/icons/connectors/MySqlIcon.svelte";
 import MotherDuckIcon from "../../components/icons/connectors/MotherDuckIcon.svelte";
+import OpenAIIcon from "../../components/icons/connectors/OpenAIIcon.svelte";
 import RedshiftIcon from "../../components/icons/connectors/RedshiftIcon.svelte";
 import SnowflakeIcon from "../../components/icons/connectors/SnowflakeIcon.svelte";
 import ClickHouseCloudIcon from "../../components/icons/connectors/ClickHouseCloudIcon.svelte";
@@ -21,6 +22,7 @@ export const connectorIconMapping = {
   druid: ApacheDruidIcon,
   duckdb: DuckDbIcon,
   mysql: MySqlIcon,
+  openai: OpenAIIcon,
   pinot: ApachePinotIcon,
   postgres: PostgresIcon,
   redshift: RedshiftIcon,

From 5f348fc94d68ee982d057423b902a93928aaba88 Mon Sep 17 00:00:00 2001
From: Eric P Green <ericpgreen2@gmail.com>
Date: Tue, 9 Dec 2025 22:16:34 -0500
Subject: [PATCH 2/3] Code cleanup

---
 .../status/ConfigurationRowDeployment.svelte  |  81 -------------
 .../status/ProjectConfiguration.svelte        |  29 -----
 .../status/project-info/InfoRow.svelte        |  37 ++++++
 .../InfoRowAi.svelte}                         |  92 ++++++---------
 .../project-info/InfoRowDeployment.svelte     |  57 +++++++++
 .../InfoRowGithub.svelte}                     | 110 +++++++-----------
 .../InfoRowOlap.svelte}                       |  70 ++++-------
 .../status/project-info/ProjectInfo.svelte    |  24 ++++
 .../[project]/-/status/+page.svelte           |   6 +-
 9 files changed, 220 insertions(+), 286 deletions(-)
 delete mode 100644 web-admin/src/features/projects/status/ConfigurationRowDeployment.svelte
 delete mode 100644 web-admin/src/features/projects/status/ProjectConfiguration.svelte
 create mode 100644 web-admin/src/features/projects/status/project-info/InfoRow.svelte
 rename web-admin/src/features/projects/status/{ConfigurationRowAi.svelte => project-info/InfoRowAi.svelte} (67%)
 create mode 100644 web-admin/src/features/projects/status/project-info/InfoRowDeployment.svelte
 rename web-admin/src/features/projects/status/{ConfigurationRowGithub.svelte => project-info/InfoRowGithub.svelte} (61%)
 rename web-admin/src/features/projects/status/{ConfigurationRowOlap.svelte => project-info/InfoRowOlap.svelte} (67%)
 create mode 100644 web-admin/src/features/projects/status/project-info/ProjectInfo.svelte

diff --git a/web-admin/src/features/projects/status/ConfigurationRowDeployment.svelte b/web-admin/src/features/projects/status/ConfigurationRowDeployment.svelte
deleted file mode 100644
index f7503668156..00000000000
--- a/web-admin/src/features/projects/status/ConfigurationRowDeployment.svelte
+++ /dev/null
@@ -1,81 +0,0 @@
-<script lang="ts">
-  import { V1DeploymentStatus } from "@rilldata/web-admin/client";
-  import Spinner from "@rilldata/web-common/features/entity-management/Spinner.svelte";
-  import { EntityStatus } from "@rilldata/web-common/features/entity-management/types";
-  import { deploymentChipDisplays } from "./display-utils";
-  import { useProjectDeployment } from "./selectors";
-
-  export let organization: string;
-  export let project: string;
-
-  $: projectDeployment = useProjectDeployment(organization, project);
-  $: ({ data: deployment, isLoading, error } = $projectDeployment);
-
-  $: currentStatusDisplay =
-    deploymentChipDisplays[
-      deployment?.status || V1DeploymentStatus.DEPLOYMENT_STATUS_UNSPECIFIED
-    ];
-</script>
-
-<div class="config-row">
-  <div class="config-label">Deployment</div>
-  <div class="config-value">
-    {#if isLoading}
-      <Spinner status={EntityStatus.Running} size="14px" />
-    {:else if error}
-      <span class="text-red-600 text-sm">Error loading deployment status</span>
-    {:else}
-      <div class="deployment-content">
-        <div class="status-badge {currentStatusDisplay.wrapperClass}">
-          <svelte:component
-            this={currentStatusDisplay.icon}
-            {...currentStatusDisplay.iconProps}
-          />
-          <span class={currentStatusDisplay.textClass}>
-            {currentStatusDisplay.text}
-          </span>
-        </div>
-        {#if deployment?.statusMessage}
-          <span class="status-message">{deployment.statusMessage}</span>
-        {/if}
-      </div>
-    {/if}
-  </div>
-</div>
-
-<style lang="postcss">
-  .config-row {
-    @apply flex items-center border-b border-slate-200;
-    @apply min-h-[44px];
-  }
-
-  .config-row:last-child {
-    @apply border-b-0;
-  }
-
-  .config-label {
-    @apply w-[140px] flex-shrink-0 px-4 py-3;
-    @apply text-sm font-medium text-gray-600;
-    @apply bg-slate-50;
-    @apply border-r border-slate-200;
-    @apply whitespace-nowrap;
-  }
-
-  .config-value {
-    @apply flex-1 px-4 py-3;
-    @apply text-sm;
-  }
-
-  .deployment-content {
-    @apply flex items-center gap-x-3;
-  }
-
-  .status-badge {
-    @apply px-2 border rounded w-fit;
-    @apply flex space-x-1 items-center;
-  }
-
-  .status-message {
-    @apply text-gray-600 text-sm;
-  }
-</style>
diff --git a/web-admin/src/features/projects/status/ProjectConfiguration.svelte b/web-admin/src/features/projects/status/ProjectConfiguration.svelte
deleted file mode 100644
index 5f7e3d89df3..00000000000
--- a/web-admin/src/features/projects/status/ProjectConfiguration.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<script lang="ts">
-  import { page } from "$app/stores";
-  import ConfigurationRowDeployment from "./ConfigurationRowDeployment.svelte";
-  import ConfigurationRowGithub from "./ConfigurationRowGithub.svelte";
-  import ConfigurationRowOlap from "./ConfigurationRowOlap.svelte";
-  import ConfigurationRowAi from "./ConfigurationRowAi.svelte";
-
-  $: organization = $page.params.organization;
-  $: project = $page.params.project;
-</script>
-
-<section class="configuration-section">
-  <div class="configuration-table">
-    <ConfigurationRowDeployment {organization} {project} />
-    <ConfigurationRowGithub {organization} {project} />
-    <ConfigurationRowOlap />
-    <ConfigurationRowAi />
-  </div>
-</section>
-
-<style lang="postcss">
-  .configuration-section {
-    @apply flex flex-col;
-  }
-
-  .configuration-table {
-    @apply border border-slate-200 rounded-sm overflow-hidden;
-  }
-</style>
diff --git a/web-admin/src/features/projects/status/project-info/InfoRow.svelte b/web-admin/src/features/projects/status/project-info/InfoRow.svelte
new file mode 100644
index 00000000000..4abd186afb7
--- /dev/null
+++ b/web-admin/src/features/projects/status/project-info/InfoRow.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+  export let label: string;
+</script>
+
+<div class="info-row">
+  <dt class="info-label">{label}</dt>
+  <dd class="info-value">
+    <slot />
+  </dd>
+</div>
+
+<style lang="postcss">
+  .info-row {
+    @apply flex items-center;
+    @apply border-b border-slate-200;
+    @apply min-h-[44px];
+  }
+
+  .info-row:last-of-type {
+    @apply border-b-0;
+  }
+
+  .info-label {
+    @apply w-[140px] flex-shrink-0;
+    @apply px-4 py-3;
+    @apply text-sm font-medium text-gray-600;
+    @apply bg-slate-50;
+    @apply border-r border-slate-200;
+    @apply whitespace-nowrap;
+  }
+
+  .info-value {
+    @apply flex-1 px-4 py-3;
+    @apply text-sm;
+    @apply m-0; /* Reset default dd margin */
+  }
+</style>
diff --git a/web-admin/src/features/projects/status/ConfigurationRowAi.svelte b/web-admin/src/features/projects/status/project-info/InfoRowAi.svelte
similarity index 67%
rename from web-admin/src/features/projects/status/ConfigurationRowAi.svelte
rename to web-admin/src/features/projects/status/project-info/InfoRowAi.svelte
index f54b8d0d87f..52fd3bb17d5 100644
--- a/web-admin/src/features/projects/status/ConfigurationRowAi.svelte
+++ b/web-admin/src/features/projects/status/project-info/InfoRowAi.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
+  import ConnectorIcon from "@rilldata/web-common/components/icons/ConnectorIcon.svelte";
+  import { connectorIconMapping } from "@rilldata/web-common/features/connectors/connector-icon-mapping";
   import Spinner from "@rilldata/web-common/features/entity-management/Spinner.svelte";
   import { EntityStatus } from "@rilldata/web-common/features/entity-management/types";
-  import { connectorIconMapping } from "@rilldata/web-common/features/connectors/connector-icon-mapping";
   import { createRuntimeServiceGetInstance } from "@rilldata/web-common/runtime-client";
   import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
-  import ConnectorIcon from "@rilldata/web-common/components/icons/ConnectorIcon.svelte";
+  import InfoRow from "./InfoRow.svelte";
 
   $: ({ instanceId } = $runtime);
 
@@ -82,64 +83,39 @@
   }
 </script>
 
-<div class="config-row">
-  <div class="config-label">AI</div>
-  <div class="config-value">
-    {#if isLoading}
-      <Spinner status={EntityStatus.Running} size="14px" />
-    {:else if error}
-      <span class="text-red-600 text-sm">Error loading AI connector</span>
-    {:else if isUserConfigured}
-      <div class="ai-content">
-        {#if IconComponent}
-          <svelte:component this={IconComponent} size="16px" />
-        {:else}
-          <ConnectorIcon size="16px" />
-        {/if}
-        <span class="connector-name">
-          {getDriverDisplayName(userConnectorConfig?.type)}
-        </span>
-        {#if configDetails.length > 0}
-          {#each configDetails as detail, i}
-            <span class="separator">•</span>
-            <span class="detail">
-              <span class="detail-label">{detail.label}:</span>
-              {detail.value}
-            </span>
-          {/each}
-        {/if}
-      </div>
-    {:else}
-      <div class="ai-content">
-        <span class="connector-name">Rill-managed</span>
-      </div>
-    {/if}
-  </div>
-</div>
+<InfoRow label="AI">
+  {#if isLoading}
+    <Spinner status={EntityStatus.Running} size="14px" />
+  {:else if error}
+    <span class="text-red-600 text-sm">Error loading AI connector</span>
+  {:else if isUserConfigured}
+    <div class="ai-content">
+      {#if IconComponent}
+        <svelte:component this={IconComponent} size="16px" />
+      {:else}
+        <ConnectorIcon size="16px" />
+      {/if}
+      <span class="connector-name">
+        {getDriverDisplayName(userConnectorConfig?.type)}
+      </span>
+      {#if configDetails.length > 0}
+        {#each configDetails as detail}
+          <span class="separator">•</span>
+          <span class="detail">
+            <span class="detail-label">{detail.label}:</span>
+            {detail.value}
+          </span>
+        {/each}
+      {/if}
+    </div>
+  {:else}
+    <div class="ai-content">
+      <span class="connector-name">Rill-managed</span>
+    </div>
+  {/if}
+</InfoRow>
 
 <style lang="postcss">
-  .config-row {
-    @apply flex items-center border-b border-slate-200;
-    @apply min-h-[44px];
-  }
-
-  .config-row:last-child {
-    @apply border-b-0;
-  }
-
-  .config-label {
-    @apply w-[140px] flex-shrink-0 px-4 py-3;
-    @apply text-sm font-medium text-gray-600;
-    @apply bg-slate-50;
-    @apply border-r border-slate-200;
-    @apply whitespace-nowrap;
-  }
-
-  .config-value {
-    @apply flex-1 px-4 py-3;
-    @apply text-sm;
-  }
-
   .ai-content {
     @apply flex items-center gap-x-2 flex-wrap;
   }
diff --git a/web-admin/src/features/projects/status/project-info/InfoRowDeployment.svelte b/web-admin/src/features/projects/status/project-info/InfoRowDeployment.svelte
new file mode 100644
index 00000000000..c305bf40ae8
--- /dev/null
+++ b/web-admin/src/features/projects/status/project-info/InfoRowDeployment.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { V1DeploymentStatus } from "@rilldata/web-admin/client";
+  import Spinner from "@rilldata/web-common/features/entity-management/Spinner.svelte";
+  import { EntityStatus } from "@rilldata/web-common/features/entity-management/types";
+  import { deploymentChipDisplays } from "../display-utils";
+  import { useProjectDeployment } from "../selectors";
+  import InfoRow from "./InfoRow.svelte";
+
+  export let organization: string;
+  export let project: string;
+
+  $: projectDeployment = useProjectDeployment(organization, project);
+  $: ({ data: deployment, isLoading, error } = $projectDeployment);
+
+  $: currentStatusDisplay =
+    deploymentChipDisplays[
+      deployment?.status || V1DeploymentStatus.DEPLOYMENT_STATUS_UNSPECIFIED
+    ];
+</script>
+
+<InfoRow label="Deployment">
+  {#if isLoading}
+    <Spinner status={EntityStatus.Running} size="14px" />
+  {:else if error}
+    <span class="text-red-600 text-sm">Error loading deployment status</span>
+  {:else}
+    <div class="deployment-content">
+      <div class="status-badge {currentStatusDisplay.wrapperClass}">
+        <svelte:component
+          this={currentStatusDisplay.icon}
+          {...currentStatusDisplay.iconProps}
+        />
+        <span class={currentStatusDisplay.textClass}>
+          {currentStatusDisplay.text}
+        </span>
+      </div>
+      {#if deployment?.statusMessage}
+        <span class="status-message">{deployment.statusMessage}</span>
+      {/if}
+    </div>
+  {/if}
+</InfoRow>
+
+<style lang="postcss">
+  .deployment-content {
+    @apply flex items-center gap-x-3;
+  }
+
+  .status-badge {
+    @apply px-2 border rounded w-fit;
+    @apply flex space-x-1 items-center;
+  }
+
+  .status-message {
+    @apply text-gray-600 text-sm;
+  }
+</style>
diff --git a/web-admin/src/features/projects/status/ConfigurationRowGithub.svelte b/web-admin/src/features/projects/status/project-info/InfoRowGithub.svelte
similarity index 61%
rename from web-admin/src/features/projects/status/ConfigurationRowGithub.svelte
rename to web-admin/src/features/projects/status/project-info/InfoRowGithub.svelte
index 5384b35dc09..f6392ec5ea5 100644
--- a/web-admin/src/features/projects/status/ConfigurationRowGithub.svelte
+++ b/web-admin/src/features/projects/status/project-info/InfoRowGithub.svelte
@@ -12,6 +12,7 @@
     getRepoNameFromGitRemote,
   } from "@rilldata/web-common/features/project/deploy/github-utils";
   import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
+  import InfoRow from "./InfoRow.svelte";
 
   export let organization: string;
   export let project: string;
@@ -52,51 +53,48 @@
   }
 </script>
 
-<div class="config-row">
-  <div class="config-label">GitHub</div>
-  <div class="config-value">
-    {#if isLoading}
-      <Spinner status={EntityStatus.Running} size="14px" />
-    {:else if error}
-      <span class="text-red-600 text-sm">Error loading GitHub status</span>
-    {:else if isGithubConnected && !isManagedGit}
-      <div class="connected-content">
-        <Github className="w-4 h-4 flex-shrink-0" />
-        <a
-          href={getGitUrlFromRemote(gitRemote)}
-          class="repo-link"
-          target="_blank"
-          rel="noreferrer noopener"
-        >
-          {repoName}
-        </a>
+<InfoRow label="GitHub">
+  {#if isLoading}
+    <Spinner status={EntityStatus.Running} size="14px" />
+  {:else if error}
+    <span class="text-red-600 text-sm">Error loading GitHub status</span>
+  {:else if isGithubConnected && !isManagedGit}
+    <div class="connected-content">
+      <Github className="w-4 h-4 flex-shrink-0" />
+      <a
+        href={getGitUrlFromRemote(gitRemote)}
+        class="repo-link"
+        target="_blank"
+        rel="noreferrer noopener"
+      >
+        {repoName}
+      </a>
+      <span class="separator">•</span>
+      <span class="detail">branch: {prodBranch}</span>
+      {#if subpath}
         <span class="separator">•</span>
-        <span class="detail">branch: {prodBranch}</span>
-        {#if subpath}
-          <span class="separator">•</span>
-          <span class="detail">/{subpath}</span>
-        {/if}
-        {#if lastUpdated}
-          <span class="separator">•</span>
-          <span class="sync-time">Synced {formatSyncTime(lastUpdated)}</span>
-        {/if}
-      </div>
-    {:else}
-      <div class="not-connected-content">
-        <span class="not-connected-text">Not connected</span>
-        <button
-          class="connect-link"
-          on:click={() => {
-            void githubAccessManager.ensureGithubAccess();
-            dialogOpen = true;
-          }}
-        >
-          Connect →
-        </button>
-      </div>
-    {/if}
-  </div>
-</div>
+        <span class="detail">/{subpath}</span>
+      {/if}
+      {#if lastUpdated}
+        <span class="separator">•</span>
+        <span class="sync-time">Synced {formatSyncTime(lastUpdated)}</span>
+      {/if}
+    </div>
+  {:else}
+    <div class="not-connected-content">
+      <span class="not-connected-text">Not connected</span>
+      <button
+        class="connect-link"
+        on:click={() => {
+          void githubAccessManager.ensureGithubAccess();
+          dialogOpen = true;
+        }}
+      >
+        Connect →
+      </button>
+    </div>
+  {/if}
+</InfoRow>
 
 <GithubConnectionDialog
   {organization}
@@ -106,30 +104,6 @@
 />
 
 <style lang="postcss">
-  .config-row {
-    @apply flex items-center;
-    @apply border-b border-slate-200;
-    @apply min-h-[44px];
-  }
-
-  .config-row:last-child {
-    @apply border-b-0;
-  }
-
-  .config-label {
-    @apply w-[140px] flex-shrink-0;
-    @apply px-4 py-3;
-    @apply text-sm font-medium text-gray-600;
-    @apply bg-slate-50;
-    @apply border-r border-slate-200;
-    @apply whitespace-nowrap;
-  }
-
-  .config-value {
-    @apply flex-1 px-4 py-3;
-    @apply text-sm;
-  }
-
   .connected-content {
     @apply flex items-center;
     @apply gap-x-2 flex-wrap;
diff --git a/web-admin/src/features/projects/status/ConfigurationRowOlap.svelte b/web-admin/src/features/projects/status/project-info/InfoRowOlap.svelte
similarity index 67%
rename from web-admin/src/features/projects/status/ConfigurationRowOlap.svelte
rename to web-admin/src/features/projects/status/project-info/InfoRowOlap.svelte
index cfe3834bd5a..bc0c5bccd41 100644
--- a/web-admin/src/features/projects/status/ConfigurationRowOlap.svelte
+++ b/web-admin/src/features/projects/status/project-info/InfoRowOlap.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
+  import ConnectorIcon from "@rilldata/web-common/components/icons/ConnectorIcon.svelte";
+  import { connectorIconMapping } from "@rilldata/web-common/features/connectors/connector-icon-mapping";
   import Spinner from "@rilldata/web-common/features/entity-management/Spinner.svelte";
   import { EntityStatus } from "@rilldata/web-common/features/entity-management/types";
-  import { connectorIconMapping } from "@rilldata/web-common/features/connectors/connector-icon-mapping";
   import { createRuntimeServiceGetInstance } from "@rilldata/web-common/runtime-client";
   import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
-  import ConnectorIcon from "@rilldata/web-common/components/icons/ConnectorIcon.svelte";
+  import InfoRow from "./InfoRow.svelte";
 
   $: ({ instanceId } = $runtime);
 
@@ -53,54 +54,29 @@
   }
 </script>
 
-<div class="config-row">
-  <div class="config-label">OLAP Engine</div>
-  <div class="config-value">
-    {#if isLoading}
-      <Spinner status={EntityStatus.Running} size="14px" />
-    {:else if error}
-      <span class="text-red-600 text-sm">Error loading OLAP connector</span>
-    {:else}
-      <div class="olap-content">
-        {#if isUserConfigured}
-          {#if IconComponent}
-            <svelte:component this={IconComponent} size="16px" />
-          {:else}
-            <ConnectorIcon size="16px" />
-          {/if}
+<InfoRow label="OLAP Engine">
+  {#if isLoading}
+    <Spinner status={EntityStatus.Running} size="14px" />
+  {:else if error}
+    <span class="text-red-600 text-sm">Error loading OLAP connector</span>
+  {:else}
+    <div class="olap-content">
+      {#if isUserConfigured}
+        {#if IconComponent}
+          <svelte:component this={IconComponent} size="16px" />
+        {:else}
+          <ConnectorIcon size="16px" />
         {/if}
-        <span class="connector-name">
-          {#if !isUserConfigured}Rill-managed
-          {/if}{displayName}
-        </span>
-      </div>
-    {/if}
-  </div>
-</div>
+      {/if}
+      <span class="connector-name">
+        {#if !isUserConfigured}Rill-managed
+        {/if}{displayName}
+      </span>
+    </div>
+  {/if}
+</InfoRow>
 
 <style lang="postcss">
-  .config-row {
-    @apply flex items-center border-b border-slate-200;
-    @apply min-h-[44px];
-  }
-
-  .config-row:last-child {
-    @apply border-b-0;
-  }
-
-  .config-label {
-    @apply w-[140px] flex-shrink-0 px-4 py-3;
-    @apply text-sm font-medium text-gray-600;
-    @apply bg-slate-50;
-    @apply border-r border-slate-200;
-    @apply whitespace-nowrap;
-  }
-
-  .config-value {
-    @apply flex-1 px-4 py-3;
-    @apply text-sm;
-  }
-
   .olap-content {
     @apply flex items-center gap-x-2;
   }
diff --git a/web-admin/src/features/projects/status/project-info/ProjectInfo.svelte b/web-admin/src/features/projects/status/project-info/ProjectInfo.svelte
new file mode 100644
index 00000000000..ece72cc5826
--- /dev/null
+++ b/web-admin/src/features/projects/status/project-info/ProjectInfo.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { page } from "$app/stores";
+  import InfoRowAi from "./InfoRowAi.svelte";
+  import InfoRowDeployment from "./InfoRowDeployment.svelte";
+  import InfoRowGithub from "./InfoRowGithub.svelte";
+  import InfoRowOlap from "./InfoRowOlap.svelte";
+
+  $: organization = $page.params.organization;
+  $: project = $page.params.project;
+</script>
+
+<dl class="info-list">
+  <InfoRowDeployment {organization} {project} />
+  <InfoRowGithub {organization} {project} />
+  <InfoRowOlap />
+  <InfoRowAi />
+</dl>
+
+<style lang="postcss">
+  .info-list {
+    @apply m-0; /* Reset default dl margin */
+    @apply border border-slate-200 rounded-sm;
+  }
+</style>
diff --git a/web-admin/src/routes/[organization]/[project]/-/status/+page.svelte b/web-admin/src/routes/[organization]/[project]/-/status/+page.svelte
index e5c6d406052..05a4bfe0a1f 100644
--- a/web-admin/src/routes/[organization]/[project]/-/status/+page.svelte
+++ b/web-admin/src/routes/[organization]/[project]/-/status/+page.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
   import ContentContainer from "@rilldata/web-admin/components/layout/ContentContainer.svelte";
-  import ProjectConfiguration from "@rilldata/web-admin/features/projects/status/ProjectConfiguration.svelte";
+  import ProjectInfo from "@rilldata/web-admin/features/projects/status/project-info/ProjectInfo.svelte";
   import ProjectParseErrors from "@rilldata/web-admin/features/projects/status/ProjectParseErrors.svelte";
   import ProjectResources from "@rilldata/web-admin/features/projects/status/ProjectResources.svelte";
 </script>
 
 <ContentContainer title="Project status" maxWidth={1100}>
-  <div class="flex flex-col gap-y-6 size-full">
-    <ProjectConfiguration />
+  <div class="flex flex-col gap-y-6 size-full pt-1">
+    <ProjectInfo />
     <ProjectResources />
     <ProjectParseErrors />
   </div>

From 242823dc4d53eea3d043c5e3942b4e5f8b714ed9 Mon Sep 17 00:00:00 2001
From: Eric P Green <ericpgreen2@gmail.com>
Date: Fri, 12 Dec 2025 13:22:55 -0500
Subject: [PATCH 3/3] Tweak GitHub row

---
 .../github/GithubConnectionDialog.svelte      | 10 ++++-
 ...InfoRowGithub.svelte => InfoRowGit.svelte} | 37 ++++++-------------
 .../status/project-info/ProjectInfo.svelte    |  4 +-
 3 files changed, 22 insertions(+), 29 deletions(-)
 rename web-admin/src/features/projects/status/project-info/{InfoRowGithub.svelte => InfoRowGit.svelte} (84%)

diff --git a/web-admin/src/features/projects/github/GithubConnectionDialog.svelte b/web-admin/src/features/projects/github/GithubConnectionDialog.svelte
index e182f6177bf..2e1e1b42d83 100644
--- a/web-admin/src/features/projects/github/GithubConnectionDialog.svelte
+++ b/web-admin/src/features/projects/github/GithubConnectionDialog.svelte
@@ -181,7 +181,15 @@
         <div class="flex flex-col gap-y-1">
           <Dialog.Title>Connect to GitHub</Dialog.Title>
           <Dialog.Description>
-            Connect this project to a new repo.
+            Enable version control and collaboration for your project.
+            <a
+              href="https://docs.rilldata.com/deploy/deploy-dashboard/github-101"
+              target="_blank"
+              rel="noreferrer noopener"
+              class="text-primary-600 hover:underline"
+            >
+              Learn more
+            </a>
           </Dialog.Description>
         </div>
       </div>
diff --git a/web-admin/src/features/projects/status/project-info/InfoRowGithub.svelte b/web-admin/src/features/projects/status/project-info/InfoRowGit.svelte
similarity index 84%
rename from web-admin/src/features/projects/status/project-info/InfoRowGithub.svelte
rename to web-admin/src/features/projects/status/project-info/InfoRowGit.svelte
index f6392ec5ea5..7b85e610486 100644
--- a/web-admin/src/features/projects/status/project-info/InfoRowGithub.svelte
+++ b/web-admin/src/features/projects/status/project-info/InfoRowGit.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { createAdminServiceGetProject } from "@rilldata/web-admin/client";
   import { useDashboardsLastUpdated } from "@rilldata/web-admin/features/dashboards/listing/selectors";
-  import { GithubAccessManager } from "@rilldata/web-admin/features/projects/github/GithubAccessManager";
   import GithubConnectionDialog from "@rilldata/web-admin/features/projects/github/GithubConnectionDialog.svelte";
   import { useGithubLastSynced } from "@rilldata/web-admin/features/projects/selectors";
   import Github from "@rilldata/web-common/components/icons/Github.svelte";
@@ -19,8 +18,6 @@
 
   let dialogOpen = false;
 
-  const githubAccessManager = new GithubAccessManager();
-
   $: ({ instanceId } = $runtime);
 
   $: proj = createAdminServiceGetProject(organization, project);
@@ -53,7 +50,7 @@
   }
 </script>
 
-<InfoRow label="GitHub">
+<InfoRow label="Git">
   {#if isLoading}
     <Spinner status={EntityStatus.Running} size="14px" />
   {:else if error}
@@ -81,18 +78,14 @@
       {/if}
     </div>
   {:else}
-    <div class="not-connected-content">
-      <span class="not-connected-text">Not connected</span>
-      <button
-        class="connect-link"
-        on:click={() => {
-          void githubAccessManager.ensureGithubAccess();
-          dialogOpen = true;
-        }}
-      >
-        Connect →
-      </button>
-    </div>
+    <button
+      class="connect-link"
+      on:click={() => {
+        dialogOpen = true;
+      }}
+    >
+      Connect →
+    </button>
   {/if}
 </InfoRow>
 
@@ -130,19 +123,11 @@
     @apply text-gray-500 text-xs;
   }
 
-  .not-connected-content {
-    @apply flex items-center gap-x-2;
-  }
-
-  .not-connected-text {
-    @apply text-gray-600;
-  }
-
   .connect-link {
-    @apply text-primary-600;
-    @apply cursor-pointer;
     @apply bg-transparent border-none p-0;
     @apply text-sm font-medium;
+    @apply text-primary-600;
+    @apply cursor-pointer;
   }
 
   .connect-link:hover {
diff --git a/web-admin/src/features/projects/status/project-info/ProjectInfo.svelte b/web-admin/src/features/projects/status/project-info/ProjectInfo.svelte
index ece72cc5826..f355eb5ae09 100644
--- a/web-admin/src/features/projects/status/project-info/ProjectInfo.svelte
+++ b/web-admin/src/features/projects/status/project-info/ProjectInfo.svelte
@@ -2,7 +2,7 @@
   import { page } from "$app/stores";
   import InfoRowAi from "./InfoRowAi.svelte";
   import InfoRowDeployment from "./InfoRowDeployment.svelte";
-  import InfoRowGithub from "./InfoRowGithub.svelte";
+  import InfoRowGit from "./InfoRowGit.svelte";
   import InfoRowOlap from "./InfoRowOlap.svelte";
 
   $: organization = $page.params.organization;
@@ -11,7 +11,7 @@
 
 <dl class="info-list">
   <InfoRowDeployment {organization} {project} />
-  <InfoRowGithub {organization} {project} />
+  <InfoRowGit {organization} {project} />
   <InfoRowOlap />
   <InfoRowAi />
 </dl>