add an "add" button when there are no secrets, also add wsh secret ui cli command

Author: sawka

cmd/wsh/cmd/wshcmd-secret.go

@@ -9,6 +9,7 @@ import (
 	"strings"
 
 	"github.com/spf13/cobra"
+	"github.com/wavetermdev/waveterm/pkg/waveobj"
 	"github.com/wavetermdev/waveterm/pkg/wshrpc"
 	"github.com/wavetermdev/waveterm/pkg/wshrpc/wshclient"
 )
@@ -54,12 +55,21 @@ var secretDeleteCmd = &cobra.Command{
 	PreRunE: preRunSetupRpcClient,
 }
 
+var secretUiCmd = &cobra.Command{
+	Use:     "ui",
+	Short:   "open secrets UI",
+	Args:    cobra.NoArgs,
+	RunE:    secretUiRun,
+	PreRunE: preRunSetupRpcClient,
+}
+
 func init() {
 	rootCmd.AddCommand(secretCmd)
 	secretCmd.AddCommand(secretGetCmd)
 	secretCmd.AddCommand(secretSetCmd)
 	secretCmd.AddCommand(secretListCmd)
 	secretCmd.AddCommand(secretDeleteCmd)
+	secretCmd.AddCommand(secretUiCmd)
 }
 
 func secretGetRun(cmd *cobra.Command, args []string) (rtnErr error) {
@@ -156,4 +166,26 @@ func secretDeleteRun(cmd *cobra.Command, args []string) (rtnErr error) {
 
 	WriteStdout("secret deleted: %s\n", name)
 	return nil
+}
+
+func secretUiRun(cmd *cobra.Command, args []string) (rtnErr error) {
+	defer func() {
+		sendActivity("secret", rtnErr == nil)
+	}()
+
+	wshCmd := &wshrpc.CommandCreateBlockData{
+		BlockDef: &waveobj.BlockDef{
+			Meta: map[string]interface{}{
+				waveobj.MetaKey_View: "secretstore",
+			},
+		},
+		Magnified: false,
+		Focused:   true,
+	}
+
+	_, err := RpcClient.SendRpcRequest(wshrpc.Command_CreateBlock, wshCmd, &wshrpc.RpcOpts{Timeout: 2000})
+	if err != nil {
+		return fmt.Errorf("opening secrets UI: %w", err)
+	}
+	return nil
 }

docs/docs/wsh-reference.mdx

@@ -978,6 +978,23 @@ wsh secret delete old_api_key
 wsh secret delete temp_token
 ```
 
+### ui
+
+```sh
+wsh secret ui
+```
+
+Open the secrets management interface in a new block. This provides a graphical interface for viewing and managing all your secrets.
+
+Example:
+
+```sh
+# Open the secrets UI
+wsh secret ui
+```
+
+The secrets UI provides a convenient visual way to browse, add, edit, and delete secrets without needing to use the command-line interface.
+
 :::tip
 Use secrets in your scripts to avoid hardcoding sensitive values. Secrets work across remote machines - store an API key locally with `wsh secret set`, then access it from any SSH or WSL connection with `wsh secret get`. The secret is securely retrieved from your local machine without needing to duplicate it on remote systems.
 :::

frontend/app/view/secretstore/secretstore.tsx

@@ -38,12 +38,19 @@ const LoadingSpinner = memo(({ message }: { message: string }) => {
 });
 LoadingSpinner.displayName = "LoadingSpinner";
 
-const EmptyState = memo(() => {
+const EmptyState = memo(({ onAddSecret }: { onAddSecret: () => void }) => {
     return (
-        <div className="flex flex-col items-center justify-center gap-3 py-12">
+        <div className="flex flex-col items-center justify-center gap-4 py-12">
             <i className="fa-sharp fa-solid fa-key text-4xl text-gray-600" />
             <h3 className="text-lg font-semibold text-gray-400">No Secrets</h3>
             <p className="text-gray-500">Add a secret to get started</p>
+            <button
+                className="flex items-center gap-2 px-4 py-2 bg-accent-600 hover:bg-accent-500 rounded cursor-pointer transition-colors"
+                onClick={onAddSecret}
+            >
+                <i className="fa-sharp fa-solid fa-plus" />
+                <span className="font-medium">Add New Secret</span>
+            </button>
         </div>
     );
 });
@@ -352,7 +359,7 @@ export const SecretStoreView = memo(({ model }: { blockId: string; model: Secret
         }
 
         if (secretNames.length === 0) {
-            return <EmptyState />;
+            return <EmptyState onAddSecret={() => model.startAddingSecret()} />;
         }
 
         return (