ui(deploy): Identity & Artifact section with filename auto-derive

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

ui/src/pages/AppsTab/AppDeploymentPage/index.tsx

@@ -1,8 +1,11 @@
+import { useState, useEffect, useRef } from 'react';
 import { useParams, useLocation } from 'react-router';
 import { useEnvironmentStore } from '../../../api/environment-store';
 import { useEnvironments } from '../../../api/queries/admin/environments';
-import { useApps } from '../../../api/queries/admin/apps';
+import { useApps, useAppVersions } from '../../../api/queries/admin/apps';
 import { PageLoader } from '../../../components/PageLoader';
+import { IdentitySection } from './IdentitySection';
+import { deriveAppName } from './utils/deriveAppName';
 import styles from './AppDeploymentPage.module.css';
 
 export default function AppDeploymentPage() {
@@ -15,12 +18,49 @@ export default function AppDeploymentPage() {
   const isNetNew = location.pathname.endsWith('/apps/new');
   const app = isNetNew ? null : apps.find((a) => a.slug === appId) ?? null;
 
+  const env = environments.find((e) => e.slug === selectedEnv);
+  const { data: versions = [] } = useAppVersions(selectedEnv, app?.slug);
+  const currentVersion = versions.slice().sort((a, b) => b.version - a.version)[0] ?? null;
+
+  // Form state
+  const [name, setName] = useState('');
+  const [stagedJar, setStagedJar] = useState<File | null>(null);
+  const lastDerivedRef = useRef<string>('');
+
+  // Initialize name when app loads
+  useEffect(() => {
+    if (app) setName(app.displayName);
+  }, [app]);
+
+  // Auto-derive from staged JAR (net-new mode only, don't overwrite manual edits)
+  useEffect(() => {
+    if (!stagedJar || app) return;
+    const derived = deriveAppName(stagedJar.name);
+    if (!name || name === lastDerivedRef.current) {
+      setName(derived);
+      lastDerivedRef.current = derived;
+    }
+  }, [stagedJar, app, name]);
+
   if (envLoading || appsLoading) return <PageLoader />;
+  if (!env) return <div>Select an environment first.</div>;
+
+  const mode: 'net-new' | 'deployed' = app ? 'deployed' : 'net-new';
 
   return (
     <div className={styles.container}>
       <h2>{app ? app.displayName : 'Create Application'}</h2>
-      {/* Identity section, tabs, primary button land in subsequent tasks */}
+      <IdentitySection
+        mode={mode}
+        environment={env}
+        app={app}
+        currentVersion={currentVersion}
+        name={name}
+        onNameChange={setName}
+        stagedJar={stagedJar}
+        onStagedJarChange={setStagedJar}
+        deploying={false}
+      />
     </div>
   );
 }