@vibe80/vibe80 0.2.0 → 0.2.2

package/client/src/components/SessionGate/SessionGate.jsx

@@ -1,6 +1,15 @@
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCheck, faCopy, faPlus, faRightFromBracket, faUser } from "@fortawesome/free-solid-svg-icons";
+import {
+  faCheck,
+  faCopy,
+  faPlus,
+  faRightFromBracket,
+  faGear,
+  faSpinner,
+  faTrash,
+  faUser,
+} from "@fortawesome/free-solid-svg-icons";
 
 export default function SessionGate({
   t,
@@ -40,7 +49,14 @@ export default function SessionGate({
   workspaceSessions,
   workspaceSessionsError,
   workspaceSessionDeletingId,
+  workspaceSessionConfigId,
+  sessionConfigTarget,
+  workspaceSessionUpdatingId,
+  workspaceSessionConfigError,
   handleResumeSession,
+  openSessionConfigure,
+  closeSessionConfigure,
+  handleUpdateAndResumeSession,
   handleDeleteSession,
   locale,
   extractRepoName,
@@ -65,6 +81,18 @@ export default function SessionGate({
   setDefaultInternetAccess,
   defaultDenyGitCredentialsAccess,
   setDefaultDenyGitCredentialsAccess,
+  sessionConfigAuthMode,
+  setSessionConfigAuthMode,
+  sessionConfigSshKey,
+  setSessionConfigSshKey,
+  sessionConfigHttpUsername,
+  setSessionConfigHttpUsername,
+  sessionConfigHttpPassword,
+  setSessionConfigHttpPassword,
+  sessionConfigInternetAccess,
+  setSessionConfigInternetAccess,
+  sessionConfigDenyGitCredentialsAccess,
+  setSessionConfigDenyGitCredentialsAccess,
   attachmentsError,
   sessionRequested,
   workspaceBusy,
@@ -476,84 +504,232 @@ export default function SessionGate({
                   }`}
                   aria-hidden={sessionMode !== "existing"}
                 >
-                  <div className="session-auth">
-                    <div className="session-auth-title">
-                      {t("Existing sessions")}
+                  {!workspaceSessionConfigId ? (
+                    <div className="session-auth">
+                      <div className="session-auth-title">
+                        {t("Existing sessions")}
+                      </div>
+                      {workspaceSessionsLoading ? (
+                        <div className="session-auth-hint">
+                          {t("Loading sessions...")}
+                        </div>
+                      ) : workspaceSessions.length === 0 ? (
+                        <div className="session-auth-hint">
+                          {t("No sessions available.")}
+                        </div>
+                      ) : (
+                        <ul className="session-list">
+                          {workspaceSessions.map((session) => {
+                            const repoName = extractRepoName(session.repoUrl);
+                            const title =
+                              session.name || repoName || session.sessionId;
+                            const subtitle = session.repoUrl
+                              ? getTruncatedText(session.repoUrl, 72)
+                              : session.sessionId;
+                            const lastSeen = session.lastActivityAt
+                              ? new Date(session.lastActivityAt).toLocaleString(
+                                  locale
+                                )
+                              : session.createdAt
+                                ? new Date(
+                                    session.createdAt
+                                  ).toLocaleString(locale)
+                                : "";
+                            const isDeleting =
+                              workspaceSessionDeletingId === session.sessionId;
+                            const isUpdating =
+                              workspaceSessionUpdatingId === session.sessionId;
+                            return (
+                              <li key={session.sessionId} className="session-item">
+                                <div className="session-item-row">
+                                  <div className="session-item-meta">
+                                    <div className="session-item-title">{title}</div>
+                                    <div className="session-item-sub">
+                                      {subtitle}
+                                    </div>
+                                    {lastSeen && (
+                                      <div className="session-item-sub">
+                                        {t("Last activity: {{date}}", {
+                                          date: lastSeen,
+                                        })}
+                                      </div>
+                                    )}
+                                  </div>
+                                  <div className="session-item-actions">
+                                    <button
+                                      type="button"
+                                      className="session-list-button session-list-icon-button"
+                                      onClick={() =>
+                                        handleResumeSession(session.sessionId)
+                                      }
+                                      disabled={formDisabled || isDeleting}
+                                      title={t("Resume")}
+                                      aria-label={t("Resume")}
+                                    >
+                                      <FontAwesomeIcon icon={faRightFromBracket} />
+                                    </button>
+                                    <button
+                                      type="button"
+                                      className="session-list-button session-list-icon-button"
+                                      onClick={() => openSessionConfigure(session)}
+                                      disabled={formDisabled || isDeleting || isUpdating}
+                                      title={t("Configure session")}
+                                      aria-label={t("Configure session")}
+                                    >
+                                      <FontAwesomeIcon icon={faGear} />
+                                    </button>
+                                    <button
+                                      type="button"
+                                      className="session-list-button session-list-icon-button is-danger"
+                                      onClick={() => handleDeleteSession(session)}
+                                      disabled={formDisabled || isDeleting}
+                                      title={isDeleting ? t("Deleting...") : t("Delete")}
+                                      aria-label={isDeleting ? t("Deleting...") : t("Delete")}
+                                    >
+                                      <FontAwesomeIcon
+                                        icon={isDeleting ? faSpinner : faTrash}
+                                        spin={isDeleting}
+                                      />
+                                    </button>
+                                  </div>
+                                </div>
+                              </li>
+                            );
+                          })}
+                        </ul>
+                      )}
+                      {workspaceSessionsError && (
+                        <div className="attachments-error">
+                          {workspaceSessionsError}
+                        </div>
+                      )}
                     </div>
-                    {workspaceSessionsLoading ? (
-                      <div className="session-auth-hint">
-                        {t("Loading sessions...")}
+                  ) : (
+                    <div className="session-form session-form--compact">
+                      <div className="session-auth-title">
+                        {t("Configure session")}
                       </div>
-                    ) : workspaceSessions.length === 0 ? (
-                      <div className="session-auth-hint">
-                        {t("No sessions available.")}
+                      <div className="session-form-row is-compact-grid">
+                        <input
+                          type="text"
+                          placeholder={t("Session name")}
+                          value={sessionConfigTarget?.name || ""}
+                          disabled
+                        />
+                        <div className="session-repo-field">
+                          <input
+                            type="text"
+                            placeholder={t("git@gitea.devops:my-org/my-repo.git")}
+                            value={sessionConfigTarget?.repoUrl || ""}
+                            disabled
+                          />
+                        </div>
                       </div>
-                    ) : (
-                      <ul className="session-list">
-                        {workspaceSessions.map((session) => {
-                          const repoName = extractRepoName(session.repoUrl);
-                          const title =
-                            session.name || repoName || session.sessionId;
-                          const subtitle = session.repoUrl
-                            ? getTruncatedText(session.repoUrl, 72)
-                            : session.sessionId;
-                          const lastSeen = session.lastActivityAt
-                            ? new Date(session.lastActivityAt).toLocaleString(
-                                locale
-                              )
-                            : session.createdAt
-                              ? new Date(
-                                  session.createdAt
-                                ).toLocaleString(locale)
-                              : "";
-                          const isDeleting =
-                            workspaceSessionDeletingId === session.sessionId;
-                          return (
-                            <li key={session.sessionId} className="session-item">
-                              <div className="session-item-meta">
-                                <div className="session-item-title">{title}</div>
-                                <div className="session-item-sub">
-                                  {subtitle}
-                                </div>
-                                {lastSeen && (
-                                  <div className="session-item-sub">
-                                    {t("Last activity: {{date}}", {
-                                      date: lastSeen,
-                                    })}
-                                  </div>
-                                )}
-                              </div>
-                              <div className="session-item-actions">
-                                <button
-                                  type="button"
-                                  className="session-list-button"
-                                  onClick={() =>
-                                    handleResumeSession(session.sessionId)
-                                  }
-                                  disabled={formDisabled || isDeleting}
-                                >
-                                  {t("Resume")}
-                                </button>
-                                <button
-                                  type="button"
-                                  className="session-list-button is-danger"
-                                  onClick={() => handleDeleteSession(session)}
-                                  disabled={formDisabled || isDeleting}
-                                >
-                                  {isDeleting ? t("Deleting...") : t("Delete")}
-                                </button>
-                              </div>
-                            </li>
-                          );
-                        })}
-                      </ul>
-                    )}
-                    {workspaceSessionsError && (
-                      <div className="attachments-error">
-                        {workspaceSessionsError}
+                      <div className="session-auth">
+                        <div className="session-auth-title">
+                          {t("Repository authentication (optional)")}
+                        </div>
+                        <div className="session-auth-options">
+                          <select
+                            value={sessionConfigAuthMode}
+                            onChange={(event) =>
+                              setSessionConfigAuthMode(event.target.value)
+                            }
+                            disabled={formDisabled || Boolean(workspaceSessionUpdatingId)}
+                          >
+                            <option value="keep">{t("Keep unchanged")}</option>
+                            <option value="none">{t("None")}</option>
+                            <option value="ssh">
+                              {t("Private SSH key (not recommended)")}
+                            </option>
+                            <option value="http">
+                              {t("Username + password")}
+                            </option>
+                          </select>
+                        </div>
+                        {sessionConfigAuthMode === "ssh" ? (
+                          <textarea
+                            className="session-auth-textarea"
+                            placeholder={t("-----BEGIN OPENSSH PRIVATE KEY-----")}
+                            value={sessionConfigSshKey}
+                            onChange={(event) =>
+                              setSessionConfigSshKey(event.target.value)
+                            }
+                            disabled={formDisabled || Boolean(workspaceSessionUpdatingId)}
+                            rows={6}
+                            spellCheck={false}
+                          />
+                        ) : null}
+                        {sessionConfigAuthMode === "http" ? (
+                          <div className="session-auth-grid">
+                            <input
+                              type="text"
+                              placeholder={t("Username")}
+                              value={sessionConfigHttpUsername}
+                              onChange={(event) =>
+                                setSessionConfigHttpUsername(event.target.value)
+                              }
+                              disabled={formDisabled || Boolean(workspaceSessionUpdatingId)}
+                              autoComplete="username"
+                            />
+                            <input
+                              type="password"
+                              placeholder={t("Password or PAT")}
+                              value={sessionConfigHttpPassword}
+                              onChange={(event) =>
+                                setSessionConfigHttpPassword(event.target.value)
+                              }
+                              disabled={formDisabled || Boolean(workspaceSessionUpdatingId)}
+                              autoComplete="current-password"
+                            />
+                          </div>
+                        ) : null}
                       </div>
-                    )}
-                  </div>
+                      <div className="session-auth session-auth-compact">
+                        <div className="session-auth-title">
+                          {t("Permissions")}
+                        </div>
+                        <div className="session-auth-options session-auth-options--compact">
+                          <label className="session-auth-option">
+                            <input
+                              type="checkbox"
+                              checked={sessionConfigInternetAccess}
+                              onChange={(event) => {
+                                const checked = event.target.checked;
+                                setSessionConfigInternetAccess(checked);
+                                if (!checked) {
+                                  setSessionConfigDenyGitCredentialsAccess(false);
+                                }
+                              }}
+                              disabled={formDisabled || Boolean(workspaceSessionUpdatingId)}
+                            />
+                            {t("Internet access")}
+                          </label>
+                          {sessionConfigInternetAccess &&
+                          deploymentMode !== "mono_user" ? (
+                            <label className="session-auth-option">
+                              <input
+                                type="checkbox"
+                                checked={sessionConfigDenyGitCredentialsAccess}
+                                onChange={(event) =>
+                                  setSessionConfigDenyGitCredentialsAccess(
+                                    event.target.checked
+                                  )
+                                }
+                                disabled={formDisabled || Boolean(workspaceSessionUpdatingId)}
+                              />
+                              {t("Deny git credentials access")}
+                            </label>
+                          ) : null}
+                        </div>
+                      </div>
+                      {workspaceSessionConfigError ? (
+                        <div className="attachments-error">
+                          {workspaceSessionConfigError}
+                        </div>
+                      ) : null}
+                    </div>
+                  )}
                 </div>
                 <div
                   className={`session-panel ${
@@ -788,21 +964,37 @@ export default function SessionGate({
               </button>
             ) : showStep4 ? (
               sessionMode === "existing" ? (
-                <button
-                  type="button"
-                  className="session-button secondary session-footer-full"
-                  disabled={formDisabled}
-                  onClick={() => {
-                    setWorkspaceProvidersEditing(true);
-                    setWorkspaceError("");
-                    setProvidersBackStep(4);
-                    loadWorkspaceProviders();
-                    loadWorkspaceSessions();
-                    setWorkspaceStep(2);
-                  }}
-                >
-                  {t("AI providers")}
-                </button>
+                <>
+                  <button
+                    type="button"
+                    className="session-button secondary"
+                    disabled={formDisabled}
+                    onClick={
+                      workspaceSessionConfigId
+                        ? closeSessionConfigure
+                        : () => {
+                            setWorkspaceProvidersEditing(true);
+                            setWorkspaceError("");
+                            setProvidersBackStep(4);
+                            loadWorkspaceProviders();
+                            loadWorkspaceSessions();
+                            setWorkspaceStep(2);
+                          }
+                    }
+                  >
+                    {workspaceSessionConfigId ? t("Cancel") : t("AI providers")}
+                  </button>
+                  {workspaceSessionConfigId ? (
+                    <button
+                      type="button"
+                      className="session-button primary"
+                      disabled={formDisabled || Boolean(workspaceSessionUpdatingId)}
+                      onClick={handleUpdateAndResumeSession}
+                    >
+                      {workspaceSessionUpdatingId ? t("Updating...") : t("Update & Resume")}
+                    </button>
+                  ) : null}
+                </>
               ) : (
                 <>
                   <button
@@ -844,6 +1036,18 @@ export default function SessionGate({
             {infoContent.paragraphs?.map((paragraph) => (
               <p key={paragraph}>{paragraph}</p>
             ))}
+            {infoContent.setupLink ? (
+              <p>
+                <a
+                  className="session-info-link"
+                  href="https://vibe80.io/docs/workspace-session-setup"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  {t("Click here to learn more.")}
+                </a>
+              </p>
+            ) : null}
             {infoContent.securityLink ? (
               <p>
                 {t(
@@ -851,7 +1055,7 @@ export default function SessionGate({
                 )}
                 <a
                   className="session-info-link"
-                  href="https://vibe80.ai/security"
+                  href="https://vibe80.io/docs/sandboxing"
                   target="_blank"
                   rel="noreferrer"
                 >

package/client/src/components/WorktreeTabs.css

@@ -258,6 +258,17 @@
   font-size: 18px;
 }
 
+.worktree-create-form {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  min-width: 0;
+}
+
+.worktree-create-dialog.is-submitting .worktree-create-form {
+  opacity: 0.55;
+}
+
 .worktree-create-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));

package/client/src/components/WorktreeTabs.jsx

@@ -69,6 +69,7 @@ export default function WorktreeTabs({
   const [newSourceWorktree, setNewSourceWorktree] = useState("main");
   const [newModel, setNewModel] = useState("");
   const [newReasoningEffort, setNewReasoningEffort] = useState("");
+  const [createSubmitting, setCreateSubmitting] = useState(false);
   const [newInternetAccess, setNewInternetAccess] = useState(
     Boolean(defaultInternetAccess)
   );
@@ -218,34 +219,46 @@ export default function WorktreeTabs({
     }
   }, [newContext, newProvider, selectedModelDetails, newReasoningEffort]);
 
-  const handleCreate = () => {
-    if (onCreate) {
-      onCreate({
-        context: newContext,
-        name: newName.trim() || null,
-        provider: newProvider,
-        sourceWorktree: newContext === "fork" ? newSourceWorktree : null,
-        startingBranch: effectiveBranch || null,
-        model: newContext === "new" ? newModel || null : null,
-        reasoningEffort: newContext === "new" ? newReasoningEffort || null : null,
-        internetAccess: newInternetAccess,
-        denyGitCredentialsAccess: newDenyGitCredentialsAccess,
-      });
+  const handleCreate = async () => {
+    if (createSubmitting) {
+      return;
+    }
+    setCreateSubmitting(true);
+    try {
+      let created = true;
+      if (onCreate) {
+        created = await onCreate({
+          context: newContext,
+          name: newName.trim() || null,
+          provider: newProvider,
+          sourceWorktree: newContext === "fork" ? newSourceWorktree : null,
+          startingBranch: effectiveBranch || null,
+          model: newContext === "new" ? newModel || null : null,
+          reasoningEffort: newContext === "new" ? newReasoningEffort || null : null,
+          internetAccess: newInternetAccess,
+          denyGitCredentialsAccess: newDenyGitCredentialsAccess,
+        });
+      }
+      if (!created) {
+        return;
+      }
+      setNewName("");
+      setNewContext("new");
+      setNewProvider(providerOptions[0]);
+      setNewSourceWorktree("main");
+      setStartingBranch(defaultBranch || "");
+      setNewModel("");
+      setNewReasoningEffort("");
+      setNewInternetAccess(Boolean(defaultInternetAccess));
+      setNewDenyGitCredentialsAccess(
+        typeof defaultDenyGitCredentialsAccess === "boolean"
+          ? defaultDenyGitCredentialsAccess
+          : true
+      );
+      setCreateDialogOpen(false);
+    } finally {
+      setCreateSubmitting(false);
     }
-    setNewName("");
-    setNewContext("new");
-    setNewProvider(providerOptions[0]);
-    setNewSourceWorktree("main");
-    setStartingBranch(defaultBranch || "");
-    setNewModel("");
-    setNewReasoningEffort("");
-    setNewInternetAccess(Boolean(defaultInternetAccess));
-    setNewDenyGitCredentialsAccess(
-      typeof defaultDenyGitCredentialsAccess === "boolean"
-        ? defaultDenyGitCredentialsAccess
-        : true
-    );
-    setCreateDialogOpen(false);
   };
 
   const handleStartEdit = (wt) => {
@@ -271,8 +284,11 @@ export default function WorktreeTabs({
   };
 
   const handleKeyDownCreate = (e) => {
+    if (createSubmitting) {
+      return;
+    }
     if (e.key === "Enter") {
-      handleCreate();
+      void handleCreate();
     } else if (e.key === "Escape") {
       setCreateDialogOpen(false);
     }
@@ -416,10 +432,23 @@ export default function WorktreeTabs({
       </div>
 
       {createDialogOpen && (
-        <div className="worktree-create-dialog-overlay" onClick={() => setCreateDialogOpen(false)}>
-          <div className="worktree-create-dialog" onClick={(e) => e.stopPropagation()}>
+        <div
+          className="worktree-create-dialog-overlay"
+          onClick={() => {
+            if (!createSubmitting) {
+              setCreateDialogOpen(false);
+            }
+          }}
+        >
+          <div
+            className={`worktree-create-dialog ${
+              createSubmitting ? "is-submitting" : ""
+            }`}
+            onClick={(e) => e.stopPropagation()}
+          >
             <h3>{t("New worktree")}</h3>
-            <div className="worktree-create-grid">
+            <fieldset className="worktree-create-form" disabled={createSubmitting}>
+              <div className="worktree-create-grid">
               <div className="worktree-create-field">
                 <label>{t("Name (optional)")}</label>
                 <input
@@ -579,22 +608,23 @@ export default function WorktreeTabs({
                   </label>
                 </div>
               )}
-            </div>
-            <div className="worktree-create-actions">
-              <button
-                className="worktree-btn-cancel"
-                onClick={() => setCreateDialogOpen(false)}
-              >
-                {t("Cancel")}
-              </button>
-              <button
-                className="worktree-btn-create"
-                onClick={handleCreate}
-                disabled={!isBranchValid || (newContext === "fork" && !newSourceWorktree)}
-              >
-                {t("Create")}
-              </button>
-            </div>
+              </div>
+              <div className="worktree-create-actions">
+                <button
+                  className="worktree-btn-cancel"
+                  onClick={() => setCreateDialogOpen(false)}
+                >
+                  {t("Cancel")}
+                </button>
+                <button
+                  className="worktree-btn-create"
+                  onClick={() => void handleCreate()}
+                  disabled={!isBranchValid || (newContext === "fork" && !newSourceWorktree)}
+                >
+                  {createSubmitting ? t("Creating...") : t("Create")}
+                </button>
+              </div>
+            </fieldset>
           </div>
         </div>
       )}