apply fixes

ui/src/app/dashboard/page.tsx

@@ -1,14 +1,68 @@
 'use client';
 
+import { useEffect, useMemo, useState } from 'react';
 import JobsTable from '@/components/JobsTable';
 import { TopBar, MainContent } from '@/components/layout';
 import Link from 'next/link';
 import { useAuth } from '@/contexts/AuthContext';
 import HFLoginButton from '@/components/HFLoginButton';
+import useSettings from '@/hooks/useSettings';
+import { apiClient } from '@/utils/api';
 
 export default function Dashboard() {
-  const { status: authStatus, namespace } = useAuth();
+  const { status: authStatus, namespace, token: authToken } = useAuth();
+  const { settings } = useSettings();
   const isAuthenticated = authStatus === 'authenticated';
+  const effectiveToken = useMemo(() => authToken || settings.HF_TOKEN, [authToken, settings.HF_TOKEN]);
+
+  type OrgStatus = 'idle' | 'checking' | 'member' | 'missing' | 'error';
+  const [orgStatus, setOrgStatus] = useState<OrgStatus>('idle');
+
+  useEffect(() => {
+    if (!isAuthenticated) {
+      setOrgStatus('idle');
+      return;
+    }
+
+    if (!effectiveToken) {
+      setOrgStatus('idle');
+      return;
+    }
+
+    let cancelled = false;
+    setOrgStatus('checking');
+
+    apiClient
+      .post('/api/hf-hub', {
+        action: 'whoami',
+        token: effectiveToken,
+      })
+      .then(response => {
+        if (cancelled) return;
+        const orgsRaw = response.data?.user?.orgs ?? response.data?.user?.organizations ?? [];
+        const REQUIRED_ORG = 'lora-training-frenzi';
+        const isMember = Array.isArray(orgsRaw)
+          ? orgsRaw.some((org: any) => {
+              if (!org) return false;
+              if (typeof org === 'string') {
+                return org === REQUIRED_ORG;
+              }
+              const nameMatch = org?.name || org?.organization || org?.namespace || org?.id;
+              return nameMatch === REQUIRED_ORG;
+            })
+          : false;
+        setOrgStatus(isMember ? 'member' : 'missing');
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setOrgStatus('error');
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [effectiveToken, isAuthenticated]);
 
   return (
     <>
@@ -38,50 +92,97 @@ export default function Dashboard() {
             </p>
           </div>
           {isAuthenticated ? (
-            <div className="flex flex-wrap items-center gap-3 text-sm">
-              <Link
-                href="/jobs/new"
-                className="px-4 py-2 rounded-md bg-blue-600 hover:bg-blue-500 text-white transition-colors"
-              >
-                Create a Training Job
-              </Link>
-              <Link
-                href="/datasets"
-                className="px-4 py-2 rounded-md bg-gray-800 hover:bg-gray-700 text-gray-200 transition-colors"
-              >
-                Manage Datasets
-              </Link>
-              <Link
-                href="/settings"
-                className="px-4 py-2 rounded-md border border-gray-700 text-gray-300 hover:border-gray-600 transition-colors"
-              >
-                Settings
-              </Link>
-            </div>
-          ) : (
-            <div className="flex flex-col gap-2 text-sm">
-              <div className="flex flex-wrap items-start gap-4">
-                <HFLoginButton size="md" />
-                <div className="flex flex-col gap-2 text-sm text-gray-300 max-w-sm">
+            <div className="flex flex-col gap-4 text-sm">
+              {orgStatus === 'checking' && (
+                <div className="text-xs text-gray-400">Checking your LoRA Frenzi membership…</div>
+              )}
+              {orgStatus === 'missing' && (
+                <div className="border border-yellow-700 bg-yellow-900/20 text-yellow-100 rounded-lg p-4 space-y-2">
+                  <p className="font-semibold">LoRA Frenzi reminder</p>
                   <p>
-                    Planning to join LoRA Frenzi? Make sure your training runs are 5,000 steps or fewer and join the{' '}
-                    <a
-                      href="https://huggingface.co/organizations/lora-training-frenzi/share/kEyyVNQXBPWqmARdwHFVdIiFqqONHZPOtz"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-blue-400 underline"
-                    >
-                      LoRA Frenzi organization
-                    </a>{' '}
-                    before authorizing the <code className="bg-gray-800 px-1 rounded">lorafrenzi</code> organization when logging in.
+                    Your Hugging Face account isn&apos;t in the <code className="bg-yellow-800/50 px-1 rounded">lora-training-frenzi</code> organization yet.
+                    To participate:
                   </p>
+                  <ol className="list-decimal list-inside space-y-1 text-sm">
+                    <li>
+                      Join the{' '}
+                      <a
+                        href="https://huggingface.co/organizations/lora-training-frenzi/share/kEyyVNQXBPWqmARdwHFVdIiFqqONHZPOtz"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-blue-200 underline"
+                      >
+                        LoRA Frenzi organization
+                      </a>
+                      .
+                    </li>
+                    <li>
+                      Remove the “Ostris AI Toolkit” app from{' '}
+                      <a
+                        href="https://huggingface.co/settings/connected-applications"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-blue-200 underline"
+                      >
+                        Hugging Face &gt; Connected Applications
+                      </a>
+                      .
+                    </li>
+                    <li>Log out here and sign in again so we can refresh your permissions.</li>
+                  </ol>
+                </div>
+              )}
+              {orgStatus === 'error' && (
+                <div className="border border-red-700 bg-red-900/20 text-red-100 rounded-lg p-4 text-sm">
+                  We couldn&apos;t verify your organization membership right now. You can retry later or ensure your token is valid.
+                </div>
+              )}
+              <div className="flex flex-wrap items-center gap-3">
+                <Link
+                  href="/jobs/new"
+                  className="px-4 py-2 rounded-md bg-blue-600 hover:bg-blue-500 text-white transition-colors"
+                >
+                  Create a Training Job
+                </Link>
+                <Link
+                  href="/datasets"
+                  className="px-4 py-2 rounded-md bg-gray-800 hover:bg-gray-700 text-gray-200 transition-colors"
+                >
+                  Manage Datasets
+                </Link>
+                <Link
+                  href="/settings"
+                  className="px-4 py-2 rounded-md border border-gray-700 text-gray-300 hover:border-gray-600 transition-colors"
+                >
+                  Settings
+                </Link>
+              </div>
+            </div>
+          ) : (
+            <div className="flex flex-col gap-4 text-sm text-gray-300">
+              <ol className="list-decimal list-inside space-y-4">
+                <li>
+                  Join the{' '}
+                  <a
+                    href="https://huggingface.co/organizations/lora-training-frenzi/share/kEyyVNQXBPWqmARdwHFVdIiFqqONHZPOtz"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-blue-400 underline"
+                  >
+                    LoRA Frenzi organization
+                  </a>{' '}
+                  first, then authorize the <code className="bg-gray-800 px-1 rounded">lorafrenzi</code> org when prompted.
                   <img
                     src="https://huggingface.co/spaces/multimodalart/ai-toolkit/resolve/main/add_org_to_oauth.png"
                     alt="Authorize lorafrenzi organization"
-                    className="max-w-sm rounded border border-gray-800"
+                    className="mt-3 max-w-sm rounded border border-gray-800"
                   />
-                </div>
-              </div>
+                </li>
+                <li className="space-y-3">
+                  <span>Sign in with Hugging Face to create and track your jobs.</span>
+                  <HFLoginButton size="md" />
+                </li>
+              </ol>
               <Link
                 href="/settings"
                 className="text-xs text-blue-400 hover:text-blue-300"

ui/src/app/jobs/new/SimplifiedJob.tsx

@@ -61,7 +61,6 @@ export default function SimplifiedJob({
   onHFJobComplete,
   forceHFBackend = false,
   datasetOptions,
-  settings,
   namespace,
 }: SimplifiedJobProps) {
   const [showAdvanced, setShowAdvanced] = useState(false);
@@ -409,7 +408,7 @@ export default function SimplifiedJob({
     <div className="flex gap-2 mb-4">
       {([
         { value: 'upload', label: 'Upload Files' },
-        { value: 'existing', label: 'Existing Path' },
+        { value: 'existing', label: 'Existing Dataset' },
       ] as const).map(option => (
         <button
           key={option.value}
@@ -473,12 +472,6 @@ export default function SimplifiedJob({
             placeholder="Enter a name for this LoRA"
             required
           />
-          <TextInput
-            label="Job Name"
-            value={jobConfig.meta?.name || ''}
-            onChange={value => setJobConfig(value, 'meta.name')}
-            placeholder="Display name for this job"
-          />
         </div>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
           <SelectInput
@@ -519,6 +512,75 @@ export default function SimplifiedJob({
         </div>
       </Card>
 
+      <Card>
+        <div className="flex items-center justify-between">
+          <h2 className="text-lg font-semibold text-gray-100">Advanced Options</h2>
+          <Button
+            type="button"
+            className="flex items-center gap-2 text-sm text-blue-300 hover:text-blue-200"
+            onClick={() => setShowAdvanced(prev => !prev)}
+          >
+            {showAdvanced ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+            {showAdvanced ? 'Hide' : 'Show'}
+          </Button>
+        </div>
+        {showAdvanced && (
+          <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
+            <SelectInput
+              label="Training Backend"
+              value={trainingBackend}
+              onChange={value => setTrainingBackend?.(value as 'local' | 'hf-jobs')}
+              options={effectiveBackendOptions}
+              disabled={forceHFBackend || !setTrainingBackend}
+            />
+            {trainingBackend === 'local' && (
+              <SelectInput
+                label="GPU"
+                value={gpuIDs ?? ''}
+                onChange={value => setGpuIDs(value)}
+                options={gpuList.map((gpu: any) => ({ value: `${gpu.index}`, label: `GPU #${gpu.index}` }))}
+              />
+            )}
+            <NumberInput
+              label="Learning Rate"
+              value={process.train.lr}
+              onChange={value => setJobConfig(value, 'config.process[0].train.lr')}
+              min={0}
+              step={0.000001}
+              required
+            />
+            <NumberInput
+              label="LoRA Rank"
+              value={process.network?.linear ?? 32}
+              onChange={handleLoraRankChange}
+              min={1}
+              required
+            />
+            <SelectInput
+              label="Optimizer"
+              value={process.train.optimizer}
+              onChange={value => setJobConfig(value, 'config.process[0].train.optimizer')}
+              options={[
+                { value: 'adamw8bit', label: 'AdamW8Bit' },
+                { value: 'adafactor', label: 'Adafactor' },
+              ]}
+            />
+            <div className="flex items-center gap-2 pt-2">
+              <Checkbox
+                label="Skip First Sample"
+                checked={process.train.skip_first_sample}
+                onChange={value => setJobConfig(value, 'config.process[0].train.skip_first_sample')}
+              />
+              <Checkbox
+                label="Disable Sampling"
+                checked={process.train.disable_sampling}
+                onChange={value => setJobConfig(value, 'config.process[0].train.disable_sampling')}
+              />
+            </div>
+          </div>
+        )}
+      </Card>
+
       <Card title="Dataset">
         {renderDatasetModeSwitch(trainDatasetMode, value => {
           setTrainDatasetMode(value);
@@ -666,75 +728,6 @@ export default function SimplifiedJob({
         )}
       </Card>
 
-      <Card>
-        <div className="flex items-center justify-between">
-          <h2 className="text-lg font-semibold text-gray-100">Advanced Options</h2>
-          <Button
-            type="button"
-            className="flex items-center gap-2 text-sm text-blue-300 hover:text-blue-200"
-            onClick={() => setShowAdvanced(prev => !prev)}
-          >
-            {showAdvanced ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
-            {showAdvanced ? 'Hide' : 'Show'}
-          </Button>
-        </div>
-        {showAdvanced && (
-          <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
-            <SelectInput
-              label="Training Backend"
-              value={trainingBackend}
-              onChange={value => setTrainingBackend?.(value as 'local' | 'hf-jobs')}
-              options={effectiveBackendOptions}
-              disabled={forceHFBackend || !setTrainingBackend}
-            />
-            {trainingBackend === 'local' && (
-              <SelectInput
-                label="GPU"
-                value={gpuIDs ?? ''}
-                onChange={value => setGpuIDs(value)}
-                options={gpuList.map((gpu: any) => ({ value: `${gpu.index}`, label: `GPU #${gpu.index}` }))}
-              />
-            )}
-            <NumberInput
-              label="Learning Rate"
-              value={process.train.lr}
-              onChange={value => setJobConfig(value, 'config.process[0].train.lr')}
-              min={0}
-              step={0.000001}
-              required
-            />
-            <NumberInput
-              label="LoRA Rank"
-              value={process.network?.linear ?? 32}
-              onChange={handleLoraRankChange}
-              min={1}
-              required
-            />
-            <SelectInput
-              label="Optimizer"
-              value={process.train.optimizer}
-              onChange={value => setJobConfig(value, 'config.process[0].train.optimizer')}
-              options={[
-                { value: 'adamw8bit', label: 'AdamW8Bit' },
-                { value: 'adafactor', label: 'Adafactor' },
-              ]}
-            />
-            <div className="flex items-center gap-2 pt-2">
-              <Checkbox
-                label="Skip First Sample"
-                checked={process.train.skip_first_sample}
-                onChange={value => setJobConfig(value, 'config.process[0].train.skip_first_sample')}
-              />
-              <Checkbox
-                label="Disable Sampling"
-                checked={process.train.disable_sampling}
-                onChange={value => setJobConfig(value, 'config.process[0].train.disable_sampling')}
-              />
-            </div>
-          </div>
-        )}
-      </Card>
-
       {trainingBackend === 'hf-jobs' && (
         <div className="space-y-6">
           <HFJobsWorkflow

ui/src/app/jobs/new/page.tsx

@@ -201,70 +201,57 @@ export default function TrainingForm() {
 
   return (
     <>
-      <TopBar>
-        <div>
-          <Button className="text-gray-500 dark:text-gray-300 px-3 mt-1" onClick={() => history.back()}>
-            <FaChevronLeft />
-          </Button>
-        </div>
-        <div>
-          <h1 className="text-lg">{runId ? 'Edit Training Job' : 'New Training Job'}</h1>
-        </div>
-        <div className="flex-1"></div>
-        {showAdvancedView && isAuthenticated && (
-          <>
-            <div>
-              <SelectInput
-                value={`${gpuIDs}`}
-                onChange={value => setGpuIDs(value)}
-                options={gpuList.map((gpu: any) => ({ value: `${gpu.index}`, label: `GPU #${gpu.index}` }))}
-              />
-            </div>
-            <div className="mx-4 bg-gray-200 dark:bg-gray-800 w-1 h-6"></div>
-          </>
-        )}
-
-        {isAuthenticated && activeTab === 'original' && (
-          <div className="pr-2">
-            <Button
-              className="text-gray-200 bg-gray-800 px-3 py-1 rounded-md"
-              onClick={() => setShowAdvancedView(!showAdvancedView)}
-            >
-              {showAdvancedView ? 'Show Original Layout' : 'Show Advanced Layout'}
+      <div className="relative z-20">
+        <TopBar>
+          <div>
+            <Button className="text-gray-500 dark:text-gray-300 px-3 mt-1" onClick={() => history.back()}>
+              <FaChevronLeft />
             </Button>
           </div>
-        )}
-        <div>
-          <Button
-            className="text-gray-200 bg-green-800 hover:bg-green-700 px-3 py-1 rounded-md"
-            onClick={() => saveJob()}
-            disabled={!isAuthenticated || status === 'saving'}
-          >
-            {status === 'saving' 
-              ? 'Saving...' 
-              : runId 
-              ? 'Update Job' 
-              : 'Create Job'}
-          </Button>
-        </div>
-      </TopBar>
+          <div>
+            <h1 className="text-lg">{runId ? 'Edit Training Job' : 'New Training Job'}</h1>
+          </div>
+          <div className="flex-1"></div>
+          {showAdvancedView && isAuthenticated && (
+            <>
+              <div>
+                <SelectInput
+                  value={`${gpuIDs}`}
+                  onChange={value => setGpuIDs(value)}
+                  options={gpuList.map((gpu: any) => ({ value: `${gpu.index}`, label: `GPU #${gpu.index}` }))}
+                />
+              </div>
+              <div className="mx-4 bg-gray-200 dark:bg-gray-800 w-1 h-6"></div>
+            </>
+          )}
 
-      {!isAuthenticated ? (
-        <MainContent>
-          <div className="border border-gray-800 rounded-lg p-6 bg-gray-900 text-gray-400 text-sm flex flex-col gap-4">
-            <p>You need to sign in with Hugging Face or provide a valid access token before creating or editing jobs.</p>
-            <div className="flex items-center gap-3">
-              <HFLoginButton size="sm" />
-              <Link href="/settings" className="text-xs text-blue-400 hover:text-blue-300">
-                Manage authentication in Settings
-              </Link>
+          {isAuthenticated && activeTab === 'original' && (
+            <div className="pr-2">
+              <Button
+                className="text-gray-200 bg-gray-800 px-3 py-1 rounded-md"
+                onClick={() => setShowAdvancedView(!showAdvancedView)}
+              >
+                {showAdvancedView ? 'Show Original Layout' : 'Show Advanced Layout'}
+              </Button>
             </div>
+          )}
+          <div>
+            <Button
+              className="text-gray-200 bg-green-800 hover:bg-green-700 px-3 py-1 rounded-md"
+              onClick={() => saveJob()}
+              disabled={!isAuthenticated || status === 'saving'}
+            >
+              {status === 'saving' 
+                ? 'Saving...' 
+                : runId 
+                ? 'Update Job' 
+                : 'Create Job'}
+            </Button>
           </div>
-        </MainContent>
-      ) : (
-        <>
-          <div className="bg-gray-950 border-b border-gray-800">
-            <div className="flex px-6 gap-4">
+        </TopBar>
+        {isAuthenticated && (
+          <div className="bg-gray-900/70 border-b border-gray-700">
+            <div className="flex justify-center gap-4 px-6 py-3">
               {(
                 [
                   { id: 'simplified', label: 'Simplified View' },
@@ -273,10 +260,10 @@ export default function TrainingForm() {
               ).map(tab => (
                 <button
                   key={tab.id}
-                  className={`px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
+                  className={`px-6 py-2 text-sm font-semibold rounded-t-md border-b-2 transition-colors ${
                     activeTab === tab.id
-                      ? 'border-blue-500 text-blue-300'
-                      : 'border-transparent text-gray-400 hover:text-gray-300'
+                      ? 'border-blue-500 text-blue-200 bg-blue-500/10'
+                      : 'border-transparent text-gray-400 hover:text-gray-200'
                   }`}
                   onClick={() => setActiveTab(tab.id)}
                   type="button"
@@ -286,9 +273,25 @@ export default function TrainingForm() {
               ))}
             </div>
           </div>
+        )}
+      </div>
 
+      {!isAuthenticated ? (
+        <MainContent className="pt-28">
+          <div className="border border-gray-800 rounded-lg p-6 bg-gray-900 text-gray-400 text-sm flex flex-col gap-4">
+            <p>You need to sign in with Hugging Face or provide a valid access token before creating or editing jobs.</p>
+            <div className="flex items-center gap-3">
+              <HFLoginButton size="sm" />
+              <Link href="/settings" className="text-xs text-blue-400 hover:text-blue-300">
+                Manage authentication in Settings
+              </Link>
+            </div>
+          </div>
+        </MainContent>
+      ) : (
+        <>
           {activeTab === 'simplified' ? (
-            <MainContent>
+            <MainContent className="pt-28">
               <SimplifiedJob
                 jobConfig={jobConfig}
                 setJobConfig={setJobConfig}
@@ -312,22 +315,24 @@ export default function TrainingForm() {
               />
             </MainContent>
           ) : showAdvancedView ? (
-            <div className="px-6 py-8">
-              <AdvancedJob
-                jobConfig={jobConfig}
-                setJobConfig={setJobConfig}
-                status={status}
-                handleSubmit={handleSubmit}
-                runId={runId}
-                gpuIDs={gpuIDs}
-                setGpuIDs={setGpuIDs}
-                gpuList={gpuList}
-                datasetOptions={datasetOptions}
-                settings={settings}
-              />
-            </div>
+            <MainContent className="pt-28">
+              <div className="px-2 pb-6">
+                <AdvancedJob
+                  jobConfig={jobConfig}
+                  setJobConfig={setJobConfig}
+                  status={status}
+                  handleSubmit={handleSubmit}
+                  runId={runId}
+                  gpuIDs={gpuIDs}
+                  setGpuIDs={setGpuIDs}
+                  gpuList={gpuList}
+                  datasetOptions={datasetOptions}
+                  settings={settings}
+                />
+              </div>
+            </MainContent>
           ) : (
-            <MainContent>
+            <MainContent className="pt-28">
               <ErrorBoundary
                 fallback={
                   <div className="flex items-center justify-center h-64 text-lg text-red-600 font-medium bg-red-100 dark:bg-red-900/20 dark:text-red-400 border border-red-300 dark:border-red-700 rounded-lg">